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

Author: xingyan95

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>;
  },
 });