feat(form): add built in row layout

vexip-ui · Aug 2, 2022 · 561ff23 · 561ff23
1 parent b04627a
commit 561ff23
Show file tree

Hide file tree

Showing 27 changed files with 707 additions and 304 deletions.
diff --git a/components/form/form-item.vue b/components/form/form-item.vue
@@ -1,5 +1,22 @@
 <template>
-  <div :class="className" role="group">
+  <Column
+    v-bind="$attrs"
+    :class="className"
+    role="group"
+    tag="div"
+    :span="props.span"
+    :offset="props.offset"
+    :push="props.push"
+    :pull="props.pull"
+    :order="props.order"
+    :xs="props.xs"
+    :sm="props.sm"
+    :md="props.md"
+    :lg="props.lg"
+    :xl="props.xl"
+    :xxl="props.xxl"
+    :flex="props.flex"
+  >
     <input
       v-if="isNative"
       type="hidden"
@@ -36,7 +53,7 @@
         </div>
       </transition>
     </div>
-  </div>
+  </Column>
 </template>
 
 <script lang="ts">
@@ -51,6 +68,7 @@ import {
   onMounted,
   onBeforeUnmount
 } from 'vue'
+import { Column } from '@/components/column'
 import { useNameHelper, useProps, useLocale, booleanProp, makeSentence } from '@vexip-ui/config'
 import { isNull, isFunction, createEventEmitter } from '@vexip-ui/utils'
 import { FORM_PROPS, FORM_FIELDS } from '@/components/form'
@@ -60,25 +78,44 @@ import { VALIDATE_FIELD, CLEAR_FIELD, FIELD_OPTIONS } from './symbol'
 
 import type { Ref, PropType } from 'vue'
 import type { ComponentState } from '@vexip-ui/config'
+import type { ColumnOptions } from '@/components/row'
 import type { FormProps, FormItemProps, FieldOptions } from './symbol'
-import type { Trigger, Rule } from './validator'
+import type { Rule } from './validator'
+
+const mediaProp = [Number, Object] as PropType<number | ColumnOptions>
 
 export default defineComponent({
   name: 'FormItem',
+  components: {
+    Column
+  },
+  inheritAttrs: true,
   props: {
     label: String,
     prop: String,
     rules: [Object, Array] as PropType<Rule | Rule[]>,
     labelWidth: Number,
-    required: Boolean,
+    required: booleanProp,
     htmlFor: String,
     errorTransition: String,
     defaultValue: Object as PropType<unknown>,
     hideErrorTip: booleanProp,
     validateAll: booleanProp,
     hideAsterisk: booleanProp,
     hideLabel: booleanProp,
-    action: booleanProp
+    action: booleanProp,
+    span: Number,
+    offset: Number,
+    push: Number,
+    pull: Number,
+    order: Number,
+    xs: mediaProp,
+    sm: mediaProp,
+    md: mediaProp,
+    lg: mediaProp,
+    xl: mediaProp,
+    xxl: mediaProp,
+    flex: [Number, String]
   },
   setup(_props, { slots }) {
     const nh = useNameHelper('form')
@@ -101,7 +138,19 @@ export default defineComponent({
       validateAll: null,
       hideAsterisk: null,
       hideLabel: null,
-      action: false
+      action: false,
+      span: 24,
+      offset: null,
+      push: null,
+      pull: null,
+      order: null,
+      xs: null,
+      sm: null,
+      md: null,
+      lg: null,
+      xl: null,
+      xxl: null,
+      flex: null
     })
 
     const formProps = inject(FORM_PROPS, {})
@@ -298,8 +347,8 @@ function useField(props: FormItemProps, formProps: Partial<FormProps>, allRules:
     } catch (e) {}
   }
 
-  function validate(type?: Trigger) {
-    return handleValidate(type)
+  function validate() {
+    return handleValidate()
   }
 
   function clearError() {
@@ -329,7 +378,7 @@ function useField(props: FormItemProps, formProps: Partial<FormProps>, allRules:
     return setValueByPath(formProps.model, props.prop, resetValue, true)
   }
 
-  async function handleValidate(type?: Trigger) {
+  async function handleValidate() {
     if (disabledValidate.value) {
       disabledValidate.value = false
 
@@ -343,9 +392,7 @@ function useField(props: FormItemProps, formProps: Partial<FormProps>, allRules:
     validating.value = true
 
     const value = currentValue.value
-    const useRules = type
-      ? allRules.value.filter(rule => !rule.trigger || rule.trigger === type)
-      : allRules.value
+    const useRules = allRules.value
     const model = formProps.model
 
     let errors: string[] | null = await asyncValidate(useRules, value, model, isValidateAll.value)

diff --git a/components/form/form.vue b/components/form/form.vue
@@ -1,22 +1,38 @@
 <template>
-  <form :class="className" :method="props.action && props.method" :action="props.action">
+  <Row
+    v-bind="$attrs"
+    :class="className"
+    tag="form"
+    :method="props.action && props.method"
+    :action="props.action"
+    :gap="props.gap"
+    :justify="props.justify"
+    :align="props.align"
+    :column-flex="undefined"
+  >
     <slot></slot>
-  </form>
+  </Row>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, computed, provide } from 'vue'
+import { Row } from '@/components/row'
 import { useNameHelper, useProps, booleanProp } from '@vexip-ui/config'
 import { FORM_PROPS, FORM_FIELDS, FORM_ACTIONS } from './symbol'
 
 import type { PropType } from 'vue'
+import type { RowGridJustify, RowGridAlign } from '@/components/row'
 import type { LabelPosition, SubmitMethod, FieldOptions } from './symbol'
 
 const submitMethods = Object.freeze<SubmitMethod>(['get', 'post', 'put', 'delete'])
 const labelPropstions = Object.freeze<LabelPosition>(['right', 'top', 'left'])
 
 export default defineComponent({
   name: 'Form',
+  components: {
+    Row
+  },
+  inheritAttrs: true,
   props: {
     method: String as PropType<SubmitMethod>,
     action: String,
@@ -30,7 +46,10 @@ export default defineComponent({
     validateAll: booleanProp,
     hideLabel: booleanProp,
     disabled: booleanProp,
-    loading: booleanProp
+    loading: booleanProp,
+    gap: [Number, Array] as PropType<number | number[]>,
+    justify: String as PropType<RowGridJustify>,
+    align: String as PropType<RowGridAlign>
   },
   setup(_props) {
     const props = useProps('form', _props, {
@@ -55,7 +74,10 @@ export default defineComponent({
       validateAll: false,
       hideLabel: false,
       disabled: false,
-      loading: false
+      loading: false,
+      gap: [8, 0],
+      justify: 'start',
+      align: 'top'
     })
 
     const nh = useNameHelper('form')

diff --git a/components/form/validator.ts b/components/form/validator.ts
@@ -1,6 +1,6 @@
 import { isDefined, isPromise, isObject, toDate, isColor, toNumber } from '@vexip-ui/utils'
 
-export type Trigger = 'blur' | 'change'
+// export type Trigger = 'blur' | 'change'
 
 export type Types =
   | 'string'
@@ -18,7 +18,7 @@ type Range = [number, number]
 type ValidatorReslut = boolean | string | Error | Promise<boolean | string | Error>
 
 export interface Rule<T = any> {
-  trigger?: Trigger,
+  // trigger?: Trigger,
   required?: boolean,
   type?: Types,
   length?: number,

diff --git a/components/grid/cell.ts b/components/grid/cell.ts
@@ -34,54 +34,18 @@ export default defineComponent({
   setup(_props, { slots }) {
     const props = useProps('cell', _props, {
       tag: 'div',
-      top: {
-        default: 'auto',
-        static: true
-      },
-      left: {
-        default: 'auto',
-        static: true
-      },
-      width: {
-        default: null,
-        static: true
-      },
-      height: {
-        default: 1,
-        static: true
-      },
-      right: {
-        default: '',
-        static: true
-      },
-      bottom: {
-        default: '',
-        static: true
-      },
-      xs: {
-        default: null,
-        static: true
-      },
-      sm: {
-        default: null,
-        static: true
-      },
-      md: {
-        default: null,
-        static: true
-      },
-      lg: {
-        default: null,
-        static: true
-      },
-      xl: {
-        default: null,
-        static: true
-      },
-      xxl: {
-        default: null,
-        static: true
-      },
+      top: 'auto',
+      left: 'auto',
+      width: null,
+      height: 1,
+      right: '',
+      bottom: '',
+      xs: null,
+      sm: null,
+      md: null,
+      lg: null,
+      xl: null,
+      xxl: null,
       useFlex: null
     })
 
@@ -97,7 +61,14 @@ export default defineComponent({
       width: props.width,
       height: props.height
     })
-    const leyoutKeys = Object.keys(layoutState) as ('top' | 'right' | 'bottom' | 'left' | 'width' | 'height')[]
+    const leyoutKeys = Object.keys(layoutState) as (
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'left'
+      | 'width'
+      | 'height'
+    )[]
 
     const defaultWidth = computed(() => {
       if (isDefined(props.width)) {
@@ -108,7 +79,8 @@ export default defineComponent({
     })
 
     watch(
-      currentBreakPoint, value => {
+      currentBreakPoint,
+      value => {
         const matchSize = queryBreakPointOptions(value)
 
         if (matchSize) {
@@ -120,7 +92,7 @@ export default defineComponent({
             layoutState.width = matchSize
           } else {
             leyoutKeys.forEach(key => {
-              layoutState[key] = has(matchSize, key) ? matchSize[key] : props[key] as any
+              layoutState[key] = has(matchSize, key) ? matchSize[key] : (props[key] as any)
             })
 
             layoutState.width = layoutState.width ?? defaultWidth.value
@@ -137,13 +109,14 @@ export default defineComponent({
     )
 
     const className = computed(() => {
-      const cellFelx = props.useFlex !== false && (props.useFlex || gridState?.cellFlex) && {
+      const cellFelx = props.useFlex !== false &&
+        (props.useFlex || gridState?.cellFlex) && {
         ...(gridState?.cellFlex || {}),
-        ...(
-          props.useFlex
-            ? props.useFlex === true ? { justify: 'start', align: 'top' } : props.useFlex
-            : {}
-        )
+        ...(props.useFlex
+          ? props.useFlex === true
+            ? { justify: 'start', align: 'top' }
+            : props.useFlex
+          : {})
       }
       const className = {
         [nh.b()]: true,
@@ -216,15 +189,16 @@ export default defineComponent({
       return null
     }
 
-    return () => h(
-      props.tag || 'div',
-      {
-        class: className.value,
-        style: style.value
-      },
-      {
-        default: () => slots.default?.()
-      }
-    )
+    return () =>
+      h(
+        props.tag || 'div',
+        {
+          class: className.value,
+          style: style.value
+        },
+        {
+          default: () => slots.default?.()
+        }
+      )
   }
 })