feat(Form): 完成基本的校验功能

packages/devui-vue/devui/form/src/components/form-control/form-control.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles-var/devui-var.scss';
+
 .devui-form__control {
   flex: 1 1 auto;
   position: relative;
@@ -73,11 +75,20 @@
     }
   }
 
-  .devui-form__control-extra {
-    font-size: 12px;
-    color: #8a8e99;
-    min-height: 20px;
-    line-height: 1.5;
-    text-align: justify;
+  .devui-form__control-info {
+    .error-message {
+      display: inline-block;
+      min-height: 20px;
+      font-size: $devui-font-size;
+      color: $devui-danger;
+    }
+
+    .devui-form__control-extra {
+      font-size: 12px;
+      color: #8a8e99;
+      min-height: 20px;
+      line-height: 1.5;
+      text-align: justify;
+    }
   }
 }

packages/devui-vue/devui/form/src/components/form-control/form-control.tsx

@@ -1,118 +1,32 @@
-import { defineComponent, ref, computed, onMounted, Teleport } from 'vue';
+import { defineComponent, ref } from 'vue';
 import type { SetupContext } from 'vue';
 import { uniqueId } from 'lodash';
 import { formControlProps, FormControlProps } from './form-control-types';
-import { ShowPopoverErrorMessageEventData } from '../../directives/d-validate-rules';
-import clickoutsideDirective from '../../../../shared/devui-directive/clickoutside';
-import { EventBus, getElOffset } from '../../utils';
-import Icon from '../../../../icon/src/icon';
-import Popover from '../../../../popover/src/popover';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { useFormControl, useFormControlValidate } from './use-form-control';
 import './form-control.scss';
-import { useFormControl } from './use-form-control';
-
-type positionType = 'top' | 'right' | 'bottom' | 'left';
 
 export default defineComponent({
   name: 'DFormControl',
-  directives: {
-    clickoutside: clickoutsideDirective,
-  },
   props: formControlProps,
   setup(props: FormControlProps, ctx: SetupContext) {
     const formControl = ref();
     const uid = uniqueId('dfc-');
-    const showPopover = ref(false);
-    const updateOn = ref('change');
-    const tipMessage = ref('');
-    const popPosition = ref<positionType>('bottom');
     const ns = useNamespace('form');
     const { controlClasses, controlContainerClasses } = useFormControl(props);
-    let rectInfo: Partial<DOMRect> = {
-      width: 0,
-      height: 0,
-    };
-    let elOffset = {
-      left: 0,
-      top: 0,
-    };
-    let popoverLeftPosition = 0;
-    let popoverTopPosition = 0;
-
-    onMounted(() => {
-      const el = document.getElementById(uid);
-      elOffset = getElOffset(el);
-      EventBus.on('showPopoverErrorMessage', (data: ShowPopoverErrorMessageEventData) => {
-        if (uid === data.uid) {
-          rectInfo = el.getBoundingClientRect();
-          showPopover.value = data.showPopover;
-          tipMessage.value = data.message;
-          popPosition.value = data.popPosition as any; // todo: 待popover组件positionType完善类型之后再替换类型
-          popoverLeftPosition =
-            popPosition.value === 'top' || popPosition.value === 'bottom' ? rectInfo.right - rectInfo.width / 2 : rectInfo.right;
-          popoverTopPosition =
-            popPosition.value === 'top' ? elOffset.top + rectInfo.height / 2 - rectInfo.height : elOffset.top + rectInfo.height / 2;
-          updateOn.value = data.updateOn ?? 'change';
-        }
-      });
-    });
-
-    const iconData = computed(() => {
-      switch (props.feedbackStatus) {
-        case 'pending':
-          return { name: 'priority', color: '#e9edfa' };
-        case 'success':
-          return { name: 'right-o', color: 'rgb(61, 204, 166)' };
-        case 'error':
-          return { name: 'error-o', color: 'rgb(249, 95, 91)' };
-        default:
-          return { name: '', color: '' };
-      }
-    });
-
-    const handleClickOutside = () => {
-      if (updateOn.value !== 'change') {
-        showPopover.value = false;
-      }
-    };
+    const { errorMessage } = useFormControlValidate();
 
     return () => (
-      <div class={controlClasses.value} ref={formControl} data-uid={uid} v-clickoutside={handleClickOutside}>
-        {showPopover.value && (
-          <Teleport to="body">
-            <div
-              style={{
-                position: 'absolute',
-                left: popoverLeftPosition + 'px',
-                top: popoverTopPosition + 'px',
-                width: rectInfo.width + 'px',
-                height: rectInfo.height + 'px',
-              }}>
-              <Popover
-                controlled={updateOn.value !== 'change'}
-                visible={showPopover.value}
-                content={tipMessage.value}
-                popType={'error'}
-                position={popPosition.value}
-              />
-            </div>
-          </Teleport>
-        )}
+      <div class={controlClasses.value} ref={formControl} data-uid={uid}>
         <div class={controlContainerClasses.value}>
           <div class={ns.e('control-content')} id={uid}>
             {ctx.slots.default?.()}
           </div>
-          {(props.feedbackStatus || ctx.slots.suffixTemplate?.()) && (
-            <span class={ns.e('control-feedback')}>
-              {ctx.slots.suffixTemplate?.() ? (
-                ctx.slots.suffixTemplate?.()
-              ) : (
-                <Icon name={iconData.value.name} color={iconData.value.color}></Icon>
-              )}
-            </span>
-          )}
         </div>
-        {props.extraInfo && <div class={ns.e('control-extra')}>{props.extraInfo}</div>}
+        <div class={ns.e('control-info')}>
+          {errorMessage.value && <div class="error-message">{errorMessage.value}</div>}
+          {props.extraInfo && <div class={ns.e('control-extra')}>{props.extraInfo}</div>}
+        </div>
       </div>
     );
   },

packages/devui-vue/devui/form/src/components/form-control/use-form-control.ts

@@ -1,11 +1,12 @@
 import { computed, reactive, inject, toRefs } from 'vue';
-import { FORM_TOKEN, IForm } from '../../form-types';
+import { FORM_TOKEN, FormContext } from '../../form-types';
 import { FormControlProps, UseFormControl } from './form-control-types';
+import { FormItemContext, FORM_ITEM_TOKEN } from '../form-item/form-item-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 
 export function useFormControl(props: FormControlProps): UseFormControl {
-  const Form = reactive(inject(FORM_TOKEN) as IForm);
-  const labelData = reactive(Form.labelData);
+  const formContext = inject(FORM_TOKEN) as FormContext;
+  const labelData = reactive(formContext.labelData);
   const ns = useNamespace('form');
   const { feedbackStatus } = toRefs(props);
 
@@ -23,3 +24,10 @@ export function useFormControl(props: FormControlProps): UseFormControl {
 
   return { controlClasses, controlContainerClasses };
 }
+
+export function useFormControlValidate() {
+  const formItemContext = inject(FORM_ITEM_TOKEN) as FormItemContext;
+  const errorMessage = computed(() => formItemContext.validateMessage);
+
+  return { errorMessage };
+}

packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts

@@ -1,4 +1,11 @@
-import type { ComputedRef, ExtractPropTypes } from 'vue';
+import type { RuleItem, ValidateFieldsError } from 'async-validator';
+import type { ComputedRef, ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue';
+
+export type FormItemValidateState = '' | 'error' | 'pending' | 'success';
+
+export interface FormRuleItem extends RuleItem {
+  trigger?: Array<string>;
+}
 
 export const formItemProps = {
   field: {
@@ -9,10 +16,34 @@ export const formItemProps = {
     type: Boolean,
     default: false,
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: [Object, Array] as PropType<[FormRuleItem, Array<FormRuleItem>]>,
+  },
 };
 
 export type FormItemProps = ExtractPropTypes<typeof formItemProps>;
 
+export type FormValidateCallback = (isValid: boolean, invalidFields?: ValidateFieldsError) => void;
+export type FormValidateResult = Promise<boolean>;
+
+export interface FormItemContext extends FormItemProps {
+  validateState: FormItemValidateState;
+  validateMessage: string;
+  validate: (trigger: string, callback?: FormValidateCallback) => FormValidateResult;
+}
+
 export interface UseFormItem {
   itemClasses: ComputedRef<Record<string, boolean>>;
 }
+
+export interface UseFormItemValidate {
+  validateState: Ref<FormItemValidateState>;
+  validateMessage: Ref<string>;
+  validate: (trigger: string, callback?: FormValidateCallback) => FormValidateResult;
+}
+
+export const FORM_ITEM_TOKEN: InjectionKey<FormItemContext> = Symbol('dFormItem');

packages/devui-vue/devui/form/src/components/form-item/form-item.tsx

@@ -1,100 +1,37 @@
-import { defineComponent, reactive, inject, onMounted, onBeforeUnmount, provide, ref } from 'vue';
+import { defineComponent, onMounted, inject, reactive, toRefs, onBeforeUnmount, provide, toRef } from 'vue';
 import type { SetupContext } from 'vue';
-import AsyncValidator, { Rules } from 'async-validator';
-import mitt from 'mitt';
-import { dFormEvents, dFormItemEvents, IForm, FORM_TOKEN, FORM_ITEM_TOKEN } from '../../form-types';
-import { formItemProps, FormItemProps } from './form-item-types';
-import { useFormItem } from './use-form-item';
+import { FORM_TOKEN } from '../../form-types';
+import { FormItemContext, formItemProps, FormItemProps, FORM_ITEM_TOKEN } from './form-item-types';
+import { useFormItem, useFormItemRule, useFormItemValidate } from './use-form-item';
 import './form-item.scss';
 
 export default defineComponent({
   name: 'DFormItem',
   props: formItemProps,
   setup(props: FormItemProps, ctx: SetupContext) {
-    const formItemMitt = mitt();
-    const dForm = reactive(inject(FORM_TOKEN, {} as IForm));
-    const formData = reactive(dForm.formData);
-    const initFormItemData = formData[props.field];
-    const rules = reactive(dForm.rules);
+    const formContext = inject(FORM_TOKEN);
     const { itemClasses } = useFormItem();
-
-    const resetField = () => {
-      if (Array.isArray(initFormItemData)) {
-        formData[props.field] = [...initFormItemData];
-      } else {
-        formData[props.field] = initFormItemData;
-      }
-    };
-
-    const formItem = reactive({
-      dHasFeedback: props.dHasFeedback,
-      field: props.field,
-      formItemMitt,
-      resetField,
+    const { _rules } = useFormItemRule(props);
+    const { validateState, validateMessage, validate } = useFormItemValidate(props, _rules);
+    const context: FormItemContext = reactive({
+      ...toRefs(props),
+      validateState,
+      validateMessage,
+      validate,
     });
-    provide(FORM_ITEM_TOKEN, formItem);
-
-    const showMessage = ref(false);
-    const tipMessage = ref('');
-
-    const validate = (trigger: string) => {
-      const ruleKey = props.field;
-      const ruleItem = rules[ruleKey];
-      const descriptor: Rules = {};
-      descriptor[ruleKey] = ruleItem;
-
-      const validator = new AsyncValidator(descriptor);
-
-      validator
-        .validate({ [ruleKey]: formData[ruleKey] })
-        .then(() => {
-          showMessage.value = false;
-          tipMessage.value = '';
-        })
-        .catch(({ errors }) => {
-          showMessage.value = true;
-          tipMessage.value = errors[0].message;
-        });
-    };
-    const validateEvents = [];
 
-    const addValidateEvents = () => {
-      if (rules && rules[props.field]) {
-        const ruleItem = rules[props.field];
-        let eventName = ruleItem['trigger'];
-
-        if (Array.isArray(ruleItem)) {
-          ruleItem.forEach((item) => {
-            eventName = item['trigger'];
-            const cb = () => validate(eventName);
-            validateEvents.push({ eventName: cb });
-            formItem.formItemMitt.on(dFormItemEvents[eventName], cb);
-          });
-        } else {
-          const cb = () => validate(eventName);
-          validateEvents.push({ eventName: cb });
-          ruleItem && formItem.formItemMitt.on(dFormItemEvents[eventName], cb);
-        }
-      }
-    };
-
-    const removeValidateEvents = () => {
-      if (rules && rules[props.field] && validateEvents.length > 0) {
-        validateEvents.forEach((item) => {
-          formItem.formItemMitt.off(item.eventName, item.cb);
-        });
-      }
-    };
+    provide(FORM_ITEM_TOKEN, context);
 
     onMounted(() => {
-      dForm.formMitt.emit(dFormEvents.addField, formItem);
-      addValidateEvents();
+      if (props.field) {
+        formContext?.addItemContext(context);
+      }
     });
 
     onBeforeUnmount(() => {
-      dForm.formMitt.emit(dFormEvents.removeField, formItem);
-      removeValidateEvents();
+      formContext?.removeItemContext(context);
     });
+
     return () => <div class={itemClasses.value}>{ctx.slots.default?.()}</div>;
   },
 });