refactor: form

components/form/ErrorList.tsx

@@ -1,6 +1,6 @@
 import { useInjectFormItemPrefix } from './context';
 import { VueNode } from '../_util/type';
-import { defineComponent, ref, watch } from '@vue/runtime-core';
+import { defineComponent, onBeforeUnmount, ref, watch } from '@vue/runtime-core';
 import classNames from '../_util/classNames';
 import Transition, { getTransitionProps } from '../_util/transition';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -22,16 +22,26 @@ export default defineComponent({
     const visible = ref(!!(props.errors && props.errors.length));
     const innerStatus = ref(status.value);
     let timeout = ref();
-    watch([() => props.errors, () => props.help], () => {
+    const cacheErrors = ref([...props.errors]);
+    watch([() => [...props.errors], () => props.help], (newValues, prevValues) => {
       window.clearTimeout(timeout.value);
       if (props.help) {
         visible.value = !!(props.errors && props.errors.length);
+        if (visible.value) {
+          cacheErrors.value = newValues[0];
+        }
       } else {
         timeout.value = window.setTimeout(() => {
           visible.value = !!(props.errors && props.errors.length);
+          if (visible.value) {
+            cacheErrors.value = newValues[0];
+          }
         });
       }
     });
+    onBeforeUnmount(() => {
+      window.clearTimeout(timeout.value);
+    });
     // Memo status in same visible
     watch([visible, status], () => {
       if (visible.value && status.value) {
@@ -63,8 +73,7 @@ export default defineComponent({
               })}
               key="help"
             >
-              {props.errors?.map((error: any, index: number) => (
-                // eslint-disable-next-line react/no-array-index-key
+              {cacheErrors.value?.map((error: any, index: number) => (
                 <div key={index} role="alert">
                   {error}
                 </div>

components/form/FormItem.tsx

@@ -13,7 +13,7 @@ import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';
 import Row from '../grid/Row';
 import { ColProps } from '../grid/Col';
-import { isValidElement, flattenChildren } from '../_util/props-util';
+import { isValidElement, flattenChildren, filterEmpty } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
 import { validateRules as validateRulesUtil } from './utils/validateUtil';
@@ -115,7 +115,6 @@ export default defineComponent({
     const formContext = useInjectForm();
     const fieldName = computed(() => props.name || props.prop);
     const errors = ref([]);
-    const validateMessage = ref('');
     const validateDisabled = ref(false);
     const domErrorVisible = ref(false);
     const inputRef = ref();
@@ -222,7 +221,6 @@ export default defineComponent({
         .then((ers = []) => {
           if (validateState.value === 'validating') {
             validateState.value = ers.length ? 'error' : 'success';
-            validateMessage.value = ers[0];
             errors.value = ers;
           }
         });
@@ -242,17 +240,17 @@ export default defineComponent({
     };
     const clearValidate = () => {
       validateState.value = '';
-      validateMessage.value = '';
       validateDisabled.value = false;
+      errors.value = [];
     };
 
     const resetField = () => {
       validateState.value = '';
-      validateMessage.value = '';
+      validateDisabled.value = true;
+      errors.value = [];
       const model = formContext.model.value || {};
       const value = fieldValue.value;
       const prop = getPropByPath(model, namePath.value, true);
-      validateDisabled.value = true;
       if (Array.isArray(value)) {
         prop.o[prop.k] = [].concat(initialValue.value);
       } else {
@@ -305,7 +303,7 @@ export default defineComponent({
       [`${prefixCls.value}-item-hidden`]: props.hidden,
     }));
     return () => {
-      const help = props.help ?? slots.help?.();
+      const help = props.help ?? (slots.help ? filterEmpty(slots.help()) : null);
       const children = flattenChildren(slots.default?.());
       let firstChildren = children[0];
       if (fieldName.value && props.autoLink && isValidElement(firstChildren)) {
@@ -357,7 +355,7 @@ export default defineComponent({
           {/* Input Group */}
           <FormItemInput
             {...props}
-            errors={errors.value}
+            errors={help !== undefined && help !== null ? toArray(help) : errors.value}
             prefixCls={prefixCls.value}
             status={validateState.value}
             onDomErrorVisibleChange={(v: boolean) => (domErrorVisible.value = v)}

components/menu/src/MenuItem.tsx

@@ -14,7 +14,7 @@ import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
 import { cloneElement } from '../../_util/vnode';
 import Tooltip from '../../tooltip';
 import { MenuInfo } from './interface';
-import KeyCode from 'ant-design-vue/es/_util/KeyCode';
+import KeyCode from '../../_util/KeyCode';
 import useDirectionStyle from './hooks/useDirectionStyle';
 
 let indexGuid = 0;

webpack.config.js

@@ -129,7 +129,7 @@ module.exports = {
     alias: {
       'ant-design-vue/es': path.join(__dirname, './components'),
       'ant-design-vue': path.join(__dirname, './components'),
-      vue$: 'vue/dist/vue.esm-bundler.js',
+      vue$: 'vue/dist/vue.runtime.esm-bundler.js',
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.md'],
   },