@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/form-item/form-item.vue

@@ -0,0 +1,396 @@
+<template>
+  <view
+    :class="
+      classPrefix +
+        ' ' + classPrefix + '--' + dataLabelAlign +
+        ' ' + classPrefix + '--bordered' +
+        ' ' + classPrefix + '--' + (verifyStatus === 2 ? 'error' : verifyStatus === 1 ? 'success' : '') +
+        ' ' + tClass
+    "
+    :style="tools._style([customStyle])"
+  >
+    <view
+      v-if="label"
+      :class="classPrefix + '__label ' + classPrefix + '__label--' + dataLabelAlign + ' ' + tClassLabel"
+      :style="'width: ' + dataLabelWidth"
+    >
+      <text
+        v-if="dataRequiredMark && requiredMarkPosition === 'left'"
+        :class="classPrefix + '__label--required'"
+      >
+        *
+      </text>
+      <slot
+        name="label"
+      >
+        <text>
+          {{ label }}
+        </text>
+      </slot>
+      <text
+        v-if="dataRequiredMark && requiredMarkPosition === 'right'"
+        :class="classPrefix + '__label--required'"
+      >
+        *
+      </text>
+      <text
+        v-if="colon"
+        :class="classPrefix + '__label--colon'"
+      >
+        :
+      </text>
+    </view>
+    <view
+      :class="classPrefix + '__controls ' + tClassControls"
+      :style="contentStyle"
+    >
+      <view :class="classPrefix + '__controls-content ' + classPrefix + '__controls-content--' + dataContentAlign">
+        <slot />
+        <view
+          v-if="arrow"
+          :class="classPrefix + '__arrow'"
+        >
+          <t-icon
+            name="chevron-right"
+            size="16"
+          />
+        </view>
+      </view>
+
+      <view
+        :class="classPrefix + '__help ' + classPrefix + '__help--' + dataContentAlign + tClassHelp"
+        :style="errorPosition"
+      >
+        <slot name="help">
+          {{ help }}
+        </slot>
+      </view>
+
+      <view
+        v-if="errorList.length > 0 && dataShowErrorMessage"
+        :class="classPrefix + '__error ' + classPrefix + '__error--' + (errorList[0].type || 'error')"
+      >
+        {{ errorList[0].message }}
+      </view>
+      <view
+        v-if="successList.length > 0"
+        :class="classPrefix + '__success'"
+      >
+        {{ successList[0].message }}
+      </view>
+    </view>
+
+    <view :class="classPrefix + '__extra ' + tClassExtra">
+      <slot name="extra" />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { validate, ValidateStatus } from './form-model';
+import TIcon from '../icon/icon.vue';
+import TButton from '../button/button.vue';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import tools from '../common/utils.wxs';
+import { isNumber } from '../common/validator';
+
+const name = `${prefix}-form-item`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-controls`,
+    `${prefix}-class-help`,
+    `${prefix}-class-extra`,
+  ],
+  provide() {
+    return {
+      [RELATION_MAP.FormKey]: this,
+    };
+  },
+  mixins: [ChildrenMixin(RELATION_MAP.FormItem)],
+  components: {
+    TIcon,
+    TButton,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      errorList: [],
+      successList: [],
+      verifyStatus: ValidateStatus.TO_BE_VALIDATED,
+      needResetField: false,
+      resetValidating: false,
+      // rules: [],
+      form: {},
+      colon: false,
+      // showErrorMessage: true,
+
+      tools,
+      dataRules: this.rules,
+      dataLabelAlign: this.labelAlign,
+      dataLabelWidth: this.labelWidth,
+      dataRequiredMark: this.requiredMark,
+      dataShowErrorMessage: this.showErrorMessage,
+      dataContentAlign: this.contentAlign,
+
+      errorPosition: '',
+    };
+  },
+  computed: {
+    contentStyle() {
+      const { labelWidth, labelAlign } = this;
+      let contentStyle = {};
+      if (labelWidth && labelAlign !== 'top') {
+        if (isNumber(labelWidth)) {
+          contentStyle = { marginLeft: `${labelWidth}px` };
+        } else {
+          contentStyle = { marginLeft: labelWidth };
+        }
+      }
+
+      return tools._style(contentStyle);
+    },
+  },
+  watch: {
+
+  },
+  created() {
+    // this.initFormItem();
+  },
+  onBeforeUnmount() {
+    if (this.form) {
+      this.form.unregisterChild(this.name);
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      const target = this[RELATION_MAP.FormItem];
+      target.registerChild(this);
+      this.form = target;
+      this.initFormItem();
+
+      const { requiredMark, labelAlign, labelWidth, showErrorMessage, contentAlign } = this;
+      const isRequired = target.rules[this.name]?.some(rule => rule.required);
+
+      this.dataRules = target.rules[this.name];
+      this.colon = target.colon;
+      this.dataLabelAlign = labelAlign || target.labelAlign || 'right';
+      this.dataLabelWidth = labelWidth || target.labelWidth;
+      this.dataContentAlign = contentAlign || target.contentAlign,
+      this.dataRequiredMark = (() => {
+        if (!isRequired) {
+          return false;
+        }
+        if (typeof requiredMark === 'boolean') {
+          return requiredMark;
+        }
+        return target.requiredMark || false;
+      })();
+      this.dataShowErrorMessage = typeof showErrorMessage === 'boolean' ? showErrorMessage : target.showErrorMessage;
+      this.requiredMarkPosition = target.requiredMarkPosition;
+
+      setTimeout(() => {
+        this.errorPosition = this.dataLabelAlign !== 'top' && `text-align: ${this.dataContentAlign}`;
+      }, 33);
+    },
+    innerAfterUnlinked() {
+      if (this.form) {
+        this.form.unregisterChild(this.name);
+      }
+    },
+    // 处理描述信息链接点击事件
+    handlePreviewImage(e) {
+      const { url } = e.currentTarget.dataset;
+      const urls = url.map(item => item.url) || [];
+      if (url) {
+        uni.previewImage({
+          urls,
+          current: urls[0],
+        });
+      }
+    },
+    // 初始化表单项
+    initFormItem() {
+      this.setInitialValue();
+    },
+
+    // 设置初始值
+    setInitialValue() {
+      const { name } = this;
+      if (name && this.form) {
+        const { formData } = this.form;
+        this.initialValue = formData[name];
+      }
+    },
+
+    // 获取表单数据
+    getFormData() {
+      if (this.form) {
+        return this.form.formData;
+      }
+      return {};
+    },
+
+    // 获取当前值
+    getValue() {
+      const { name } = this;
+      if (name && this.form) {
+        const { formData } = this.form;
+        return formData[name];
+      }
+      return undefined;
+    },
+
+    // 获取验证规则
+    getRules() {
+      const { rules } = this;
+
+      // 优先使用组件自身的规则
+      if (rules && rules.length > 0) {
+        return rules;
+      }
+
+      // 使用表单的规则
+      return this.dataRules || [];
+    },
+
+    // 验证表单项
+    async validate(data, trigger, showErrorMessage) {
+      const rules = this.getRules();
+      if (rules.length === 0) {
+        return { [this.name]: true };
+      }
+
+      // 根据触发方式过滤规则
+      const filteredRules = trigger === 'all'
+        ? rules
+        : rules.filter(rule => (rule.trigger || 'change') === trigger);
+
+      if (filteredRules.length === 0) {
+        return { [this.name]: true };
+      }
+
+      const value = data[this.name];
+      const results = await validate(value, filteredRules);
+
+      // 分析验证结果
+      const analysis = this.analysisValidateResult(results);
+
+      // 更新状态
+      this.updateValidateStatus(analysis, showErrorMessage);
+
+      // 返回验证结果
+      const result = {};
+      result[this.name] = analysis.errorList.length > 0 ? analysis.errorList : true;
+      return result;
+    },
+
+    // 纯净验证（不显示错误信息）
+    async validateOnly(trigger) {
+      return this.validate(this.getFormData(), trigger, false);
+    },
+
+    // 分析验证结果
+    analysisValidateResult(results) {
+      const errorList = results.filter(item => item.result !== true);
+      const successList = results.filter(item => item.result === true && item.message && item.type === 'success');
+
+      return {
+        errorList,
+        successList,
+        resultList: results,
+      };
+    },
+
+    // 更新验证状态
+    updateValidateStatus(analysis) {
+      const { errorList, successList } = analysis;
+
+      this.errorList = errorList;
+      this.successList = successList;
+      this.verifyStatus = errorList.length > 0 ? ValidateStatus.FAIL : ValidateStatus.SUCCESS;
+    },
+
+    // 清空验证结果
+    clearValidate() {
+      this.errorList = [];
+      this.successList = [];
+      this.verifyStatus = ValidateStatus.TO_BE_VALIDATED;
+    },
+
+    // 重置字段
+    resetField() {
+      const { name } = this;
+      if (name && this.form) {
+        const { resetType } = this.form;
+
+        if (resetType === 'initial') {
+          this.form.updateFormData(name, this.initialValue);
+        } else {
+          this.form.updateFormData(name, this.getEmptyValue());
+        }
+      }
+
+      this.clearValidate();
+    },
+
+    // 设置验证信息
+    setValidateMessage(validateMessage) {
+      this.errorList = validateMessage.filter(item => item.type === 'error');
+      this.successList = validateMessage.filter(item => item.type === 'warning');
+      this.verifyStatus = validateMessage.length > 0 ? ValidateStatus.FAIL : ValidateStatus.SUCCESS;
+    },
+
+    // 获取空值
+    getEmptyValue() {
+      const value = this.getValue();
+
+      if (Array.isArray(value)) {
+        return [];
+      }
+      if (typeof value === 'object' && value !== null) {
+        return {};
+      }
+      if (typeof value === 'number') {
+        return 0;
+      }
+      return '';
+    },
+
+    // 处理值变化
+    onValueChange(value) {
+      const { name } = this;
+      if (name && this.form) {
+        this.form.updateFormData(name, value);
+
+        // 触发change验证
+        this.validate(this.getFormData(), 'change', true);
+      }
+    },
+
+    // 处理失焦事件
+    onBlur() {
+      // 触发blur验证
+      this.validate(this.getFormData(), 'blur', true);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './form-item.css';
+</style>

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

@@ -0,0 +1,198 @@
+// 验证结果接口
+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;
+}
+
+// 验证状态枚举
+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;
+    }
+  }
+
+  // 列表最大值验证
+  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;
+    }
+  }
+  // 字符串最大长度验证
+  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;
+    }
+  }
+
+  // 字符串最小长度验证
+  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;
+    }
+  }
+
+  // 固定长度验证
+  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;
+    }
+  }
+
+  // 正则验证
+  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;
+    }
+    if (!regex.test(String(value))) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || '格式不正确';
+      result.type = 'error';
+      return result;
+    }
+  }
+
+  // 类型验证
+  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;
+      }
+    }
+  }
+  // 自定义验证
+  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;
+    }
+  }
+  return result;
+}
+
+// 验证函数
+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;
+}

package/dist/form-item/props.ts

@@ -0,0 +1,64 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+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,
+  },
+  /** 字段标签名称 */
+  label: {
+    type: String,
+    default: '' as TdFormItemProps['label'],
+  },
+  /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign */
+  labelAlign: {
+    type: String,
+    validator(val: TdFormItemProps['labelAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'top'].includes(val);
+    },
+  },
+  /** 可以整体设置标签宽度，优先级高于 Form.labelWidth */
+  labelWidth: {
+    type: [String, Number],
+  },
+  /** 表单字段名称 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示必填符号（*），优先级高于 Form.requiredMark */
+  requiredMark: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单字段校验规则 */
+  rules: {
+    type: Array,
+  },
+  /** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
+  showErrorMessage: {
+    type: Boolean,
+    default: undefined,
+  },
+};

package/dist/form-item/type.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export type { TdFormItemProps} from '../form/type';