@tdesign/uniapp 0.7.3 → 0.8.1

package/dist/form/form.vue

@@ -1,18 +1,10 @@
 <template>
-  <view>
-    <form
-      :class="
-        classPrefix +
-          ' ' + classPrefix + '--' + labelAlign +
-          ' ' + classPrefix + '--' + (disabled ? 'disabled' : '') +
-          ' ' + classPrefix + '--' + (readonly ? 'readonly' : '') +
-          ' ' + tClass
-      "
-      :style="customStyle"
-    >
-      <slot />
-    </form>
-  </view>
+  <form
+    :class="classPrefix + ' ' + tClass"
+    :style="'' + tools._style([customStyle])"
+  >
+    <slot />
+  </form>
 </template>
 <script>
 
@@ -21,6 +13,7 @@ import { prefix } from '../common/config';
 import props from './props';
 import { ParentMixin, RELATION_MAP } from '../common/relation';
 import { coalesce } from '../common/utils';
+import tools from '../common/utils.wxs';
 
 const name = `${prefix}-form`;
 
@@ -29,257 +22,279 @@ const needValidate = (name, fields) => {
   return fields.indexOf(`${name}`) !== -1;
 };
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-  ],
-  mixins: [ParentMixin(RELATION_MAP.FormItem)],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      children: [],
-      formData: {},
-      initialData: {},
-      fields: [],
-    };
-  },
-  created() {
-    this.initFormData();
-  },
-
-  methods: {
-    // 初始化表单数据
-    initFormData() {
-      const { data } = this;
-      // 确保 data 不为 undefined 或 null
-      const safeData = data || {};
-      const formData = { ...safeData };
-      const initialData = { ...safeData };
-      const fields = Object.keys(safeData);
-
-      this.formData = formData;
-      this.initialData = initialData;
-      this.fields = fields;
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-
-    // 注册子组件
-    registerChild(child) {
-      const { children } = this;
-      if (!children.find(item => item.name === child.name)) {
-        children.push(child);
-        this.children = children;
-      }
+    externalClasses: [
+      `${prefix}-class`,
+    ],
+    mixins: [ParentMixin(RELATION_MAP.FormItem)],
+    props: {
+      ...props,
     },
-
-    // 注销子组件
-    unregisterChild(childName) {
-      const { children } = this;
-      const index = children.findIndex(item => item.name === childName);
-      if (index > -1) {
-        children.splice(index, 1);
-        this.children = children;
-      }
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        formData: {},
+        initialData: {},
+        fields: [],
+        tools,
+      };
     },
-
-    // 更新表单数据
-    updateFormData(name, value) {
-      const { formData } = this;
-      formData[name] = value;
-      this.formData = formData;
+    created() {
+      this.children = [];
+      this.initFormData();
     },
 
-    // 验证表单
-    async validate(params = {}) {
-      const { fields, trigger = 'all' } = params;
-      const showErrorMessage = coalesce(params.showErrorMessage, this.showErrorMessage);
+    methods: {
+    // 初始化表单数据
+      initFormData() {
+        const { data } = this;
+        // 确保 data 不为 undefined 或 null
+        const safeData = data || {};
+        const formData = { ...safeData };
+        const initialData = { ...safeData };
+        const fields = Object.keys(safeData);
+
+        this.formData = formData;
+        this.initialData = initialData;
+        this.fields = fields;
+      },
+
+      // 注册子组件
+      registerChild(child) {
+        const { children } = this;
+        if (!children.find(item => item.name === child.name)) {
+          children.push(child);
+          this.children = children;
+        }
+      },
+
+      // 注销子组件
+      unregisterChild(childName) {
+        const { children } = this;
+        const index = children.findIndex(item => item.name === childName);
+        if (index > -1) {
+          children.splice(index, 1);
+          this.children = children;
+        }
+      },
+
+      // 更新表单数据
+      updateFormData(name, value) {
+        const { formData } = this;
+        formData[name] = value;
+        this.formData = formData;
+      },
+
+      // 验证表单
+      async validate(params = {}) {
+        const { fields, trigger = 'all' } = params;
+        const showErrorMessage = coalesce(params.showErrorMessage, this.showErrorMessage);
+
+        const { children } = this;
+        const { data } = this;
+        const validatePromises = children
+          .filter(child => needValidate(`${child.name}`, fields))
+          .map(child => child.validate(data, trigger, showErrorMessage));
+
+        try {
+          const results = await Promise.all(validatePromises);
+          const validateResult = this.formatValidateResult(results);
+
+          if (validateResult !== true) {
+            this.scrollToError(validateResult);
+          }
 
-      const { children } = this;
-      const { data } = this;
-      const validatePromises = children
-        .filter(child => needValidate(`${child.name}`, fields))
-        .map(child => child.validate(data, trigger, showErrorMessage));
+          this.$emit('validate', {
+            validateResult,
+          });
 
-      try {
-        const results = await Promise.all(validatePromises);
-        const validateResult = this.formatValidateResult(results);
+          return validateResult;
+        } catch (error) {
+          return false;
+        }
+      },
 
-        this.$emit('validate', {
-          validateResult,
-        });
+      // 滚动到第一个校验不通过的字段
+      scrollToError(validateResult) {
+        const { scrollToFirstError } = this;
+        if (!scrollToFirstError) return;
 
-        return validateResult;
-      } catch (error) {
-        return false;
-      }
-    },
+        const firstErrorKey = Object.keys(validateResult)[0];
+        if (!firstErrorKey) return;
 
-    // 纯净验证（不显示错误信息）
-    async validateOnly(params) {
-      const { fields, trigger = 'all' } = params;
-      const { children } = this;
+        const { children } = this;
+        const errorChild = children.find(child => child.name === firstErrorKey);
+        if (!errorChild) return;
 
-      const validatePromises = children
-        .filter((child) => {
-          if (fields && fields.length > 0) {
-            return fields.includes(child.name);
-          }
-          return true;
-        })
-        .map(child => child.validateOnly(trigger));
-
-      try {
-        const results = await Promise.all(validatePromises);
-        return this.formatValidateResult(results);
-      } catch (error) {
-        return false;
-      }
-    },
+        errorChild.scrollIntoView(scrollToFirstError);
+      },
+
+      // 纯净验证（不显示错误信息）
+      async validateOnly(params) {
+        const { fields, trigger = 'all' } = params;
+        const { children } = this;
 
-    // 格式化验证结果
-    formatValidateResult(validateResultList) {
-      const result = {};
-      let hasError = false;
-
-      validateResultList.forEach((item) => {
-        if (item && typeof item === 'object') {
-          Object.keys(item).forEach((key) => {
-            if (item[key] !== true) {
-              result[key] = item[key];
-              hasError = true;
+        const validatePromises = children
+          .filter((child) => {
+            if (fields && fields.length > 0) {
+              return fields.includes(child.name);
             }
-          });
+            return true;
+          })
+          .map(child => child.validateOnly(trigger));
+
+        try {
+          const results = await Promise.all(validatePromises);
+          return this.formatValidateResult(results);
+        } catch (error) {
+          return false;
         }
-      });
+      },
+
+      // 格式化验证结果
+      formatValidateResult(validateResultList) {
+        const result = {};
+        let hasError = false;
+
+        validateResultList.forEach((item) => {
+          if (item && typeof item === 'object') {
+            Object.keys(item).forEach((key) => {
+              if (item[key] !== true) {
+                result[key] = item[key];
+                hasError = true;
+              }
+            });
+          }
+        });
 
-      return hasError ? result : true;
-    },
+        return hasError ? result : true;
+      },
 
-    // 获取第一个错误信息
-    getFirstError(validateResult) {
-      if (validateResult === true) return '';
-      const firstKey = Object.keys(validateResult)[0];
-      if (!firstKey) return '';
+      // 获取第一个错误信息
+      getFirstError(validateResult) {
+        if (validateResult === true) return '';
+        const firstKey = Object.keys(validateResult)[0];
+        if (!firstKey) return '';
 
-      const errorList = validateResult[firstKey];
-      if (Array.isArray(errorList) && errorList.length > 0) {
-        return errorList[0].message || '';
-      }
+        const errorList = validateResult[firstKey];
+        if (Array.isArray(errorList) && errorList.length > 0) {
+          return errorList[0].message || '';
+        }
 
-      return '';
-    },
+        return '';
+      },
 
-    // 提交表单
-    async submit(options) {
-      try {
-        const validateResult = await this.validate({
-          showErrorMessage: coalesce(options?.showErrorMessage, this.showErrorMessage),
-        });
-        const firstError = this.getFirstError(validateResult);
-        this.$emit('submit', {
-          validateResult,
-          firstError,
+      // 提交表单
+      async submit(options) {
+        try {
+          const validateResult = await this.validate({
+            showErrorMessage: coalesce(options?.showErrorMessage, this.showErrorMessage),
+          });
+          const firstError = this.getFirstError(validateResult);
+          this.$emit('submit', {
+            validateResult,
+            firstError,
+          });
+
+          return validateResult;
+        } catch (error) {
+          return false;
+        }
+      },
+      // 获取表单提交信息
+      async getValidate() {
+        try {
+          const validateResult = await this.validate();
+          const firstError = this.getFirstError(validateResult);
+          // this.$emit('getFormData', {
+          //   validateResult,
+          //   firstError,
+          // });
+
+          return { validateResult, firstError };
+        } catch (error) {
+          return false;
+        }
+      },
+      // 重置表单
+      reset(params = {}) {
+        const { fields } = params;
+        const resetType = coalesce(params.resetType, this.resetType);
+        const { children, initialData, formData } = this;
+
+        children
+          .filter(child => needValidate(`${child.name}`, fields))
+          .forEach((child) => {
+            if (resetType === 'empty') {
+              this.updateFormData(child.name, this.getEmptyValue(child.name));
+            } else if (resetType === 'initial') {
+              this.updateFormData(child.name, initialData[child.name]);
+            }
+            child.resetField();
+          });
+
+        this.$emit('reset', {
+          formData,
         });
+      },
 
-        return validateResult;
-      } catch (error) {
-        return false;
-      }
-    },
-    // 获取表单提交信息
-    async getValidate() {
-      try {
-        const validateResult = await this.validate();
-        const firstError = this.getFirstError(validateResult);
-        // this.$emit('getFormData', {
-        //   validateResult,
-        //   firstError,
-        // });
-
-        return { validateResult, firstError };
-      } catch (error) {
-        return false;
-      }
-    },
-    // 重置表单
-    reset(params = {}) {
-      const { fields } = params;
-      const resetType = coalesce(params.resetType, this.resetType);
-      const { children, initialData, formData } = this;
-
-      children
-        .filter(child => needValidate(`${child.name}`, fields))
-        .forEach((child) => {
-          if (resetType === 'empty') {
-            this.updateFormData(child.name, this.getEmptyValue(child.name));
-          } else if (resetType === 'initial') {
-            this.updateFormData(child.name, initialData[child.name]);
+      // 清空验证结果
+      clearValidate(fields) {
+        const { children } = this;
+
+        children.forEach((child) => {
+          if (!fields || fields.includes(child.name)) {
+            child.clearValidate();
           }
-          child.resetField();
         });
+      },
 
-      this.$emit('reset', {
-        formData,
-      });
-    },
-
-    // 清空验证结果
-    clearValidate(fields) {
-      const { children } = this;
+      // 设置验证信息
+      setValidateMessage(validateMessage) {
+        const { children } = this;
 
-      children.forEach((child) => {
-        if (!fields || fields.includes(child.name)) {
-          child.clearValidate();
-        }
-      });
-    },
+        children.forEach((child) => {
+          if (validateMessage[child.name]) {
+            child.setValidateMessage(validateMessage[child.name]);
+          }
+        });
+      },
 
-    // 设置验证信息
-    setValidateMessage(validateMessage) {
-      const { children } = this;
+      // 获取空值
+      getEmptyValue(name) {
+        const { formData } = this;
+        const currentValue = formData[name];
 
-      children.forEach((child) => {
-        if (validateMessage[child.name]) {
-          child.setValidateMessage(validateMessage[child.name]);
+        if (Array.isArray(currentValue)) {
+          return [];
         }
-      });
-    },
-
-    // 获取空值
-    getEmptyValue(name) {
-      const { formData } = this;
-      const currentValue = formData[name];
-
-      if (Array.isArray(currentValue)) {
-        return [];
-      }
-      if (typeof currentValue === 'object' && currentValue !== null) {
-        return {};
-      }
-      if (typeof currentValue === 'number') {
-        return 0;
-      }
-      return '';
-    },
-
-    // 表单提交事件处理
-    onSubmit() {
-      this.submit();
-    },
-
-    // 表单重置事件处理
-    onReset() {
-      this.reset();
+        if (typeof currentValue === 'object' && currentValue !== null) {
+          return {};
+        }
+        if (typeof currentValue === 'number') {
+          return 0;
+        }
+        return '';
+      },
+
+      // 表单提交事件处理
+      onSubmit() {
+        this.submit();
+      },
+
+      // 表单重置事件处理
+      onReset() {
+        this.reset();
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./form.css"></style>

package/dist/form/props.ts

@@ -8,25 +8,11 @@ import type { TdFormProps } from './type';
 export default {
   /** 是否在表单标签字段右侧显示冒号 */
   colon: Boolean,
-  /** 表单内容对齐方式：左对齐、右对齐 */
-  contentAlign: {
-    type: String,
-    default: 'left' as TdFormProps['contentAlign'],
-    validator(val: TdFormProps['contentAlign']): boolean {
-      if (!val) return true;
-      return ['left', 'right'].includes(val);
-    },
-  },
   /** 表单数据 */
   data: {
     type: Object,
     default: () => ({}),
   },
-  /** 是否禁用整个表单 */
-  disabled: {
-    type: Boolean,
-    default: undefined,
-  },
   /** 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` */
   errorMessage: {
     type: Object,
@@ -45,15 +31,10 @@ export default {
     type: [String, Number],
     default: '81px' as TdFormProps['labelWidth'],
   },
-  /** 是否整个表单只读 */
-  readonly: {
-    type: Boolean,
-    default: undefined,
-  },
   /** 是否显示必填符号（*），默认显示 */
   requiredMark: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdFormProps['requiredMark'],
   },
   /** 表单必填符号（*）显示位置 */
   requiredMarkPosition: {

package/dist/form/type.ts

@@ -14,20 +14,11 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default false
    */
   colon?: boolean;
-  /**
-   * 表单内容对齐方式：左对齐、右对齐
-   * @default left
-   */
-  contentAlign?: 'left' | 'right';
   /**
    * 表单数据
    * @default {}
    */
   data?: FormData;
-  /**
-   * 是否禁用整个表单
-   */
-  disabled?: boolean;
   /**
    * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
    */
@@ -42,14 +33,10 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default '81px'
    */
   labelWidth?: string | number;
-  /**
-   * 是否整个表单只读
-   */
-  readonly?: boolean;
   /**
    * 是否显示必填符号（*），默认显示
    */
-  requiredMark?: boolean;
+  requiredMark?: boolean | null;
   /**
    * 表单必填符号（*）显示位置
    */
@@ -115,58 +102,6 @@ export interface FormInstanceFunctions<FormData extends Data = Data> {
   validate: (params?: FormValidateParams) => Promise<FormValidateResult<FormData>>;
 }
 
-
-export interface TdFormItemProps {
-  /**
-   * 是否显示右侧箭头
-   * @default false
-   */
-  arrow?: boolean;
-  /**
-   * 表单内容对齐方式，优先级高于 Form.contentAlign
-   */
-  contentAlign?: 'left' | 'right';
-  /**
-   * label 原生属性
-   * @default ''
-   */
-  for?: string;
-  /**
-   * 表单项说明内容
-   */
-  help?: string;
-  /**
-   * 字段标签名称
-   * @default ''
-   */
-  label?: string;
-  /**
-   * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign
-   */
-  labelAlign?: 'left' | 'right' | 'top';
-  /**
-   * 可以整体设置标签宽度，优先级高于 Form.labelWidth
-   */
-  labelWidth?: string | number;
-  /**
-   * 表单字段名称
-   * @default ''
-   */
-  name?: string;
-  /**
-   * 是否显示必填符号（*），优先级高于 Form.requiredMark
-   */
-  requiredMark?: boolean;
-  /**
-   * 表单字段校验规则
-   */
-  rules?: Array<FormRule>;
-  /**
-   * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
-   */
-  showErrorMessage?: boolean;
-}
-
 export interface FormRule {
   /**
    * 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }`
@@ -236,7 +171,7 @@ export interface FormRule {
    */
   url?: boolean | IsURLOptions;
   /**
-   * 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`
+   * 自定义校验规则，context 中 formData 为当前完整表单值，name为该字段的标识，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`
    */
   validator?: CustomValidator;
   /**
@@ -373,7 +308,10 @@ export interface IsDateOptions {
   delimiters: string[];
 }
 
-export type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
+export type CustomValidator = (
+  val: ValueType,
+  context?: { formData: Data; name: string },
+) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
 
 export type CustomValidateResolveType = boolean | CustomValidateObj;
 
@@ -384,4 +322,3 @@ export interface CustomValidateObj {
 }
 
 export type ValueType = any;
-