@tdesign/uniapp 0.7.3 → 0.8.1

package/dist/form-item/form-model.ts

@@ -1,198 +1,150 @@
-// 验证结果接口
-interface ValidateResult {
-  result: boolean;
-  message?: string;
-  type?: string;
-}
-
-// 工具函数：安全获取rule属性的实际值
-function getRuleValue(field: any, key?: string): any {
-  if (field && typeof field === 'object' && 'type' in field) {
-    // 针对type字段，过滤掉'error'和'warning'
-    if (key === 'type') {
-      const { value } = field;
-      if (value === 'error' || value === 'warning') {
-        return undefined;
-      }
-      return value;
-    }
-    return field.value;
-  }
-  // type字段只允许string
-  if (key === 'type') {
-    if (field === 'error' || field === 'warning') {
-      return undefined;
-    }
-  }
-  return field;
-}
+import { isNumber, isBoolean, isObject, isEmpty, isDate, isEmail, isURL } from '../common/validator';
 
-// 验证状态枚举
 export const ValidateStatus = {
   TO_BE_VALIDATED: 0,
   SUCCESS: 1,
   FAIL: 2,
 };
 
-// 执行单个验证规则
-async function executeRule(value: any, rule: any): Promise<ValidateResult> {
-  const result: ValidateResult = {
-    result: true,
-  };
-
-  // 必填验证
-  const required = getRuleValue(rule.required);
-  if (required && (value === undefined || value === null || value === '' || value.length === 0)) {
-    result.result = false;
-    result.message = getRuleValue(rule.message) || '此字段为必填项';
-    result.type = 'error';
-    return result;
-  }
-
-  // 如果值为空且不是必填，则跳过其他验证
-  if (value === undefined || value === null || value === '' || value.length === 0) {
-    return result;
-  }
-
-  // 列表最小值验证
-  const min = getRuleValue(rule.min);
-  if (min !== undefined) {
-    const val = Array.isArray(value) ? value.length : Number(value);
-    if (val < Number(min)) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || `不能小于 ${min}`;
-      result.type = 'error';
-      return result;
+/**
+ * 计算字符串字符的长度并可以截取字符串。
+ * @param str 传入字符串
+ * @param maxCharacter 规定最大字符串长度
+ * @returns 当没有传入maxCharacter时返回字符串字符长度，当传入maxCharacter时返回截取之后的字符串和长度。
+ */
+function getCharacterLength(str: string, maxCharacter?: number) {
+  const hasMaxCharacter = isNumber(maxCharacter);
+  if (!str || str.length === 0) {
+    if (hasMaxCharacter) {
+      return {
+        length: 0,
+        characters: str,
+      };
     }
+    return 0;
   }
-
-  // 列表最大值验证
-  const max = getRuleValue(rule.max);
-  if (max !== undefined) {
-    const val = Array.isArray(value) ? value.length : Number(value);
-    if (val > Number(max)) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || `不能大于 ${max}`;
-      result.type = 'error';
-      return result;
+  let len = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    let currentStringLength = 0;
+    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
+      currentStringLength = 2;
+    } else {
+      currentStringLength = 1;
     }
-  }
-  // 字符串最大长度验证
-  const maxLength = getRuleValue(rule.maxLength);
-  if (maxLength !== undefined) {
-    const len = String(value).length;
-    if (len > Number(maxLength)) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || `长度不能超过 ${maxLength}`;
-      result.type = 'error';
-      return result;
+    if (hasMaxCharacter && len + currentStringLength > maxCharacter) {
+      return {
+        length: len,
+        characters: str.slice(0, i),
+      };
     }
+    len += currentStringLength;
   }
-
-  // 字符串最小长度验证
-  const minLength = getRuleValue(rule.minLength);
-  if (minLength !== undefined) {
-    const len = String(value).length;
-    if (len < Number(minLength)) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || `长度不能少于 ${minLength}`;
-      result.type = 'error';
-      return result;
-    }
+  if (hasMaxCharacter) {
+    return {
+      length: len,
+      characters: str,
+    };
   }
+  return len;
+}
 
-  // 固定长度验证
-  const len = getRuleValue(rule.len);
-  if (len !== undefined) {
-    const strValue = String(value);
-    if (strValue.length !== Number(len)) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || `长度必须为 ${len}`;
-      result.type = 'error';
-      return result;
-    }
+// `{} / [] / '' / undefined / null` 等内容被认为是空； 0 和 false 被认为是正常数据，部分数据的值就是 0 或者 false
+export function isValueEmpty(val: any): boolean {
+  const type: string = Object.prototype.toString.call(val);
+  const typeMap: Record<string, any> = {
+    Date: '[object Date]',
+  };
+  if (type === typeMap.Date) {
+    return false;
   }
+  return isObject(val) ? isEmpty(val) : ['', undefined, null].includes(val);
+}
 
-  // 正则验证
-  const pattern = getRuleValue(rule.pattern);
-  if (pattern) {
-    let regex;
-    if (pattern instanceof RegExp) {
-      regex = pattern;
-    } else if (typeof pattern === 'string') {
-      regex = new RegExp(pattern);
-    } else if (pattern && typeof pattern === 'object' && 'test' in pattern) {
-      regex = pattern;
-    } else {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || '格式不正确';
-      result.type = 'error';
-      return result;
+const VALIDATE_MAP = {
+  date: isDate,
+  url: isURL,
+  email: isEmail,
+  required: (val: any): boolean => !isValueEmpty(val),
+  whitespace: (val: any): boolean => !(/^\s+$/.test(val) || val === ''),
+  boolean: (val: any): boolean => isBoolean(val),
+  max: (val: any, num: number): boolean => (isNumber(val) ? val <= num : (getCharacterLength(val) as number) <= num),
+  min: (val: any, num: number): boolean => (isNumber(val) ? val >= num : (getCharacterLength(val) as number) >= num),
+  len: (val: any, num: number): boolean => getCharacterLength(val) === num,
+  number: (val: any): boolean => isNumber(val),
+  enum: (val: any, strs: Array<string>): boolean => strs.includes(val),
+  idcard: (val: any): boolean => /^(\d{18,18}|\d{15,15}|\d{17,17}x)$/i.test(val),
+  telnumber: (val: any): boolean => /^1[3-9]\d{9}$/.test(val),
+  pattern: (val: any, regexp: RegExp | string): boolean => {
+    const reg = typeof regexp === 'string' ? new RegExp(regexp) : regexp;
+    return reg.test(val);
+  },
+  // 自定义校验规则，可能是异步校验
+  validator: (
+    val: any,
+    validate: Function,
+    context?: { formData: any; name: string },
+  ): any => validate(val, context),
+};
+
+/**
+ * 校验某一条数据的某一条规则，一种校验规则不满足则不再进行校验。
+ * @param value 值
+ * @param rule 校验规则
+ * @param context 表单上下文，包含 formData 和 name，供自定义校验器使用
+ * @returns 两种校验结果，一种是内置校验规则的校验结果，二种是自定义校验规则（validator）的校验结果
+ */
+export async function validateOneRule(
+  value: any,
+  rule: any,
+  context?: { formData: any; name: string },
+): Promise<any> {
+  let validateResult: any = { result: true };
+  const keys = Object.keys(rule);
+  let vOptions: any;
+  let vValidateFun: any;
+  let isValidatorRule = false;
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    // 非必填选项，值为空，非自定义规则：无需校验，直接返回 true
+    if (!rule.required && isValueEmpty(value) && !rule.validator) {
+      return validateResult;
     }
-    if (!regex.test(String(value))) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || '格式不正确';
-      result.type = 'error';
-      return result;
+    const validateRule = (VALIDATE_MAP as any)[key];
+    const ruleItem = rule[key];
+    // 找到一个校验规则，则无需再找，因为参数只允许对一个规则进行校验
+    if (validateRule && (ruleItem || ruleItem === 0)) {
+      // rule 值为 true 则表示没有校验参数，只是对值进行默认规则校验
+      vOptions = ruleItem === true ? undefined : ruleItem;
+      vValidateFun = validateRule;
+      isValidatorRule = key === 'validator';
+      break;
     }
   }
-
-  // 类型验证
-  const type = getRuleValue(rule.type, 'type');
-  if (typeof type === 'string') {
-    let isValid = true;
-    if (type === 'email') {
-      isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value));
-      if (!isValid) {
-        result.result = false;
-        result.message = getRuleValue(rule.message) || `${type} 格式不正确`;
-        result.type = 'error';
-        return result;
-      }
-    } else if (type === 'url') {
-      try {
-        const url = new URL(String(value));
-        isValid = !!url;
-      } catch (err) {
-        isValid = false;
-      }
-      if (!isValid) {
-        result.result = false;
-        result.message = getRuleValue(rule.message) || `${type} 格式不正确`;
-        result.type = 'error';
-        return result;
-      }
-    } else if (type === 'number') {
-      isValid = !Number.isNaN(Number(value));
-      if (!isValid) {
-        result.result = false;
-        result.message = getRuleValue(rule.message) || `${type} 格式不正确`;
-        result.type = 'error';
-        return result;
-      }
+  if (vValidateFun) {
+    validateResult = isValidatorRule
+      ? await vValidateFun(value, vOptions, context)
+      : await vValidateFun(value, vOptions);
+    // 如果校验不通过，则返回校验不通过的规则
+    if (isBoolean(validateResult)) {
+      return { ...rule, result: validateResult };
     }
-  }
-  // 自定义验证
-  const validator = getRuleValue(rule.validator);
-  if (validator) {
-    const validateResult = await validator(value);
-    if (!validateResult) {
-      result.result = false;
-      result.message = getRuleValue(rule.message) || '验证失败';
-      result.type = 'error';
-      return result;
+    // 校验结果为对象，只有自定义校验规则会存在这种情况
+    if (isObject(validateResult)) {
+      return validateResult;
     }
   }
-  return result;
+  return validateResult;
 }
 
-// 验证函数
-export async function validate(value: any, rules: any[]): Promise<ValidateResult[]> {
-  const results: ValidateResult[] = [];
-
-  const promises = rules.map(rule => executeRule(value, rule));
-  const ruleResults = await Promise.all(promises);
-  results.push(...ruleResults);
-
-  return results;
+/**
+ * 单个数据进行全规则校验
+ * 保留 validateRules 别名以兼容已有调用
+ */
+export async function validate(value: any, rules: any[], context?: { formData: any; name: string }): Promise<any[]> {
+  const all = rules.map(rule => validateOneRule(value, rule, context));
+  const r = await Promise.all(all);
+  return r;
 }
+
+// 兼容已有导入
+export const validateRules = validate;

package/dist/form-item/props.ts

@@ -8,19 +8,6 @@ import type { TdFormItemProps } from './type';
 export default {
   /** 是否显示右侧箭头 */
   arrow: Boolean,
-  /** 表单内容对齐方式，优先级高于 Form.contentAlign */
-  contentAlign: {
-    type: String,
-    validator(val: TdFormItemProps['contentAlign']): boolean {
-      if (!val) return true;
-      return ['left', 'right'].includes(val);
-    },
-  },
-  /** label 原生属性 */
-  for: {
-    type: String,
-    default: '',
-  },
   /** 表单项说明内容 */
   help: {
     type: String,
@@ -49,8 +36,8 @@ export default {
   },
   /** 是否显示必填符号（*），优先级高于 Form.requiredMark */
   requiredMark: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdFormItemProps['requiredMark'],
   },
   /** 表单字段校验规则 */
   rules: {
@@ -58,7 +45,7 @@ export default {
   },
   /** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
   showErrorMessage: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdFormItemProps['showErrorMessage'],
   },
 };

package/dist/form-item/type.ts

@@ -4,4 +4,46 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-export type { TdFormItemProps} from '../form/type';
+import type { FormRule } from '../form/type';
+
+export interface TdFormItemProps {
+  /**
+   * 是否显示右侧箭头
+   * @default false
+   */
+  arrow?: boolean;
+  /**
+   * 表单项说明内容
+   */
+  help?: string;
+  /**
+   * 字段标签名称
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign
+   */
+  labelAlign?: 'left' | 'right' | 'top';
+  /**
+   * 可以整体设置标签宽度，优先级高于 Form.labelWidth
+   */
+  labelWidth?: string | number;
+  /**
+   * 表单字段名称
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 是否显示必填符号（*），优先级高于 Form.requiredMark
+   */
+  requiredMark?: boolean | null;
+  /**
+   * 表单字段校验规则
+   */
+  rules?: Array<FormRule>;
+  /**
+   * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
+   */
+  showErrorMessage?: boolean | null;
+}

package/dist/grid/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-grid />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TGrid from '@tdesign/uniapp/grid/grid.vue';

package/dist/grid/grid.vue

@@ -1,7 +1,7 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [theme]) + ' ' + tClass"
+    :style="'' + tools._style([customStyle])"
+    :class="'' + tools.cls(classPrefix, [theme]) + ' ' + tClass"
   >
     <view
       v-if="column > 0"
@@ -33,60 +33,62 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-grid`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: ['t-class'],
-  mixins: [ParentMixin(RELATION_MAP.GridItem)],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      contentStyle: '',
-      tools,
-    };
-  },
-  watch: {
-    column: 'watchCallback',
-    hover: 'watchCallback',
-    align: 'watchCallback',
-    gutter: 'watchCallback',
-    border: 'watchCallback',
-  },
-  mounted() {
-    this.updateContentStyle();
-  },
-  methods: {
-    watchCallback() {
-      this.updateContentStyle();
-      this.doForChild(t => t.updateStyle?.());
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: ['t-class'],
+    mixins: [ParentMixin(RELATION_MAP.GridItem)],
+    props: {
+      ...props,
     },
-    doForChild(action) {
-      this.children?.forEach(action);
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        contentStyle: '',
+        tools,
+      };
     },
-    updateContentStyle() {
-      const contentStyles = [];
-      const marginStyle = this.getContentMargin();
-      marginStyle && contentStyles.push(marginStyle);
-      this.contentStyle = contentStyles.join(';');
+    watch: {
+      column: 'watchCallback',
+      hover: 'watchCallback',
+      align: 'watchCallback',
+      gutter: 'watchCallback',
+      border: 'watchCallback',
+    },
+    mounted() {
+      this.updateContentStyle();
     },
+    methods: {
+      watchCallback() {
+        this.updateContentStyle();
+        this.doForChild(t => t.updateStyle?.());
+      },
+      doForChild(action) {
+        this.children?.forEach(action);
+      },
+      updateContentStyle() {
+        const contentStyles = [];
+        const marginStyle = this.getContentMargin();
+        marginStyle && contentStyles.push(marginStyle);
+        this.contentStyle = contentStyles.join(';');
+      },
 
-    // 判断需不需要在content上加负margin以实现gutter间距
-    getContentMargin() {
-      const { gutter } = this;
-      let { border } = this;
+      // 判断需不需要在content上加负margin以实现gutter间距
+      getContentMargin() {
+        const { gutter } = this;
+        let { border } = this;
 
-      if (!border) return `margin-bottom:-${gutter}rpx; margin-right:-${gutter}rpx`;
-      if (!isObject(border)) border = {} ;
-      const { width = 2 } = border ;
-      return `margin-bottom:-${width}rpx; margin-right:-${width}rpx`;
+        if (!border) return `margin-bottom:-${gutter}rpx; margin-right:-${gutter}rpx`;
+        if (!isObject(border)) border = {} ;
+        const { width = 2 } = border ;
+        return `margin-bottom:-${width}rpx; margin-right:-${width}rpx`;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./grid.css"></style>