@tmagic/form 1.8.0-beta.10 → 1.8.0-beta.12

package/src/theme/form-dialog.scss

@@ -7,7 +7,7 @@
     padding: 0 20px;
   }
 
-  .el-table .m-form-item .el-form-item {
+  .el-table .m-form-item .el-form-item:not(.is-error) {
     margin-bottom: 0;
   }
 }

package/src/theme/table.scss

@@ -26,6 +26,16 @@
   }
 }
 
+.el-form-item {
+  .m-fields-table {
+    .el-form-item {
+      &.is-error {
+        margin-bottom: 18px;
+      }
+    }
+  }
+}
+
 .m-fields-table {
   width: 100%;
 
@@ -62,7 +72,7 @@
     }
   }
 
-  .el-form-item {
+  .el-form-item:not(.is-error) {
     margin-bottom: 0;
   }
 

package/src/utils/form.ts

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-import { readonly } from 'vue';
+import { ComputedRef, readonly } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
 
+import { getDesignConfig } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
 import type {
@@ -39,6 +40,58 @@ import type {
   TypeFunction,
 } from '../schema';
 
+import { createTypeMatchValidator } from './typeMatch';
+
+type AsyncValidatorFn = (rule: any, value: any, callback: Function, source?: any, options?: any) => any;
+
+const isTDesignAdapter = () => getDesignConfig('adapterType') === 'tdesign-vue-next';
+
+/**
+ * 将 async-validator（Element Plus）风格的 validator 适配到当前 UI 库。
+ * TDesign 调用签名为 `(val) => boolean | CustomValidateObj | Promise`，无 callback。
+ */
+export const adaptFormValidator = (validator: AsyncValidatorFn): AsyncValidatorFn => {
+  return (arg1: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any) => {
+    if (!isTDesignAdapter()) {
+      return validator(arg1, arg2, arg3, arg4, arg5);
+    }
+
+    // TDesign: validator(val)
+    const value = arg1;
+    return new Promise((resolve) => {
+      let settled = false;
+      const callback = (error?: Error | string) => {
+        if (settled) return;
+        settled = true;
+        if (error) {
+          resolve({
+            result: false,
+            message: typeof error === 'string' ? error : error.message,
+          });
+        } else {
+          resolve(true);
+        }
+      };
+
+      try {
+        const result = validator(undefined, value, callback);
+        if (result !== null && typeof (result as PromiseLike<unknown>).then === 'function') {
+          Promise.resolve(result).then(
+            () => {
+              if (!settled) callback();
+            },
+            (err) => {
+              callback(err instanceof Error ? err : new Error(String(err)));
+            },
+          );
+        }
+      } catch (e) {
+        callback(e instanceof Error ? e : new Error(String(e)));
+      }
+    });
+  };
+};
+
 interface DefaultItem {
   defaultValue: any;
   type: string;
@@ -253,36 +306,54 @@ export const display = function (mForm: FormState | undefined, config: any, prop
   return true;
 };
 
-export const getRules = function (mForm: FormState | undefined, rules: Rule[] | Rule = [], props: any) {
-  rules = cloneDeep(rules);
+export const getRules = function (
+  mForm: FormState | undefined,
+  r: Rule[] | Rule = [],
+  props: any,
+  typeMatchValid?: ComputedRef<boolean>,
+) {
+  let rules = cloneDeep(r);
 
   if (typeof rules === 'object' && !Array.isArray(rules)) {
     rules = [rules];
   }
 
+  if (typeMatchValid?.value && !rules.some((r) => typeof r.typeMatch !== 'undefined')) {
+    rules.push({
+      typeMatch: true,
+    });
+  }
+
   return rules.map((item) => {
+    if (item.typeMatch) {
+      (item as any).validator = adaptFormValidator(createTypeMatchValidator(mForm, props, item));
+      return item;
+    }
+
     if (typeof item.validator === 'function') {
       const fnc = item.validator;
 
-      (item as any).validator = (rule: any, value: any, callback: Function, source: any, options: any) =>
-        fnc(
-          {
-            rule,
-            value: props.config.names ? props.model : value,
-            callback,
-            source,
-            options,
-          },
-          {
-            values: mForm?.initValues || {},
-            model: props.model,
-            parent: mForm?.parentValues || {},
-            formValue: mForm?.values || props.model,
-            prop: props.prop,
-            config: props.config,
-          },
-          mForm,
-        );
+      (item as any).validator = adaptFormValidator(
+        (rule: any, value: any, callback: Function, source: any, options: any) =>
+          fnc(
+            {
+              rule,
+              value: props.config.names ? props.model : value,
+              callback,
+              source,
+              options,
+            },
+            {
+              values: mForm?.initValues || {},
+              model: props.model,
+              parent: mForm?.parentValues || {},
+              formValue: mForm?.values || props.model,
+              prop: props.prop,
+              config: props.config,
+            },
+            mForm,
+          ),
+      );
     }
     return item;
   });