@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/form/form.css

@@ -0,0 +1,169 @@
+.t-form {
+  position: relative;
+  width: 100%;
+  background-color: var(--td-form-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  padding: var(--td-form-padding, 0);
+  border-radius: var(--td-form-border-radius, 0);
+  box-sizing: border-box;
+  min-height: 100%;
+}
+.t-form--label-left .t-form__item .t-form__label {
+  text-align: left;
+  justify-content: flex-start;
+}
+.t-form--label-right .t-form__item .t-form__label {
+  text-align: right;
+  justify-content: flex-end;
+}
+.t-form--label-top .t-form__item {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.t-form--label-top .t-form__item .t-form__label {
+  width: 100%;
+  margin-bottom: var(--td-spacer, 16rpx);
+  text-align: left;
+  justify-content: flex-start;
+}
+.t-form--label-top .t-form__item .t-form__controls {
+  width: 100%;
+  margin-top: 0;
+}
+.t-form--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.t-form--disabled .t-form__item .t-form__label,
+.t-form--disabled .t-form__item .t-form__controls,
+.t-form--disabled .t-form__item .t-form__help,
+.t-form--disabled .t-form__item .t-form__extra {
+  color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+}
+.t-form--readonly {
+  background-color: var(--td-form-readonly-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-form--readonly .t-form__item .t-form__label,
+.t-form--readonly .t-form__item .t-form__controls,
+.t-form--readonly .t-form__item .t-form__help,
+.t-form--readonly .t-form__item .t-form__extra {
+  color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
+}
+.t-form__item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: var(--td-spacer-2, 32rpx);
+}
+.t-form__item:last-child {
+  margin-bottom: 0;
+}
+.t-form__label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 160rpx;
+  max-width: 300rpx;
+  margin-right: var(--td-spacer-2, 32rpx);
+  font-size: var(--td-font-size-m, 32rpx);
+  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  line-height: 1.5;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+.t-form__label--required::before {
+  content: '*';
+  color: var(--td-error-color, var(--td-error-color-6, #d54941));
+  margin-right: 4rpx;
+  font-size: var(--td-font-size-m, 32rpx);
+  line-height: 1;
+}
+.t-form__label--colon::after {
+  content: ':';
+  margin-left: 4rpx;
+  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-form__label--required-mark-left::before {
+  content: '*';
+  color: var(--td-error-color, var(--td-error-color-6, #d54941));
+  margin-right: 4rpx;
+  font-size: var(--td-font-size-m, 32rpx);
+  line-height: 1;
+}
+.t-form__label--required-mark-right::after {
+  content: '*';
+  color: var(--td-error-color, var(--td-error-color-6, #d54941));
+  margin-left: 4rpx;
+  font-size: var(--td-font-size-m, 32rpx);
+  line-height: 1;
+}
+.t-form__controls {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.t-form__help {
+  margin-top: var(--td-spacer, 16rpx);
+  font-size: var(--td-font-size-s, 24rpx);
+  color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
+  line-height: 1.4;
+}
+.t-form__extra {
+  margin-left: var(--td-spacer-2, 32rpx);
+  font-size: var(--td-font-size-s, 24rpx);
+  color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
+  line-height: 1.4;
+}
+.t-form--error .t-form__label {
+  color: var(--td-error-color, var(--td-error-color-6, #d54941));
+}
+.t-form--error .t-form__help {
+  color: var(--td-error-color, var(--td-error-color-6, #d54941));
+}
+.t-form--success .t-form__label {
+  color: var(--td-success-color, var(--td-success-color-5, #2ba471));
+}
+.t-form--success .t-form__help {
+  color: var(--td-success-color, var(--td-success-color-5, #2ba471));
+}
+.t-form--warning .t-form__label {
+  color: var(--td-warning-color, var(--td-warning-color-5, #e37318));
+}
+.t-form--warning .t-form__help {
+  color: var(--td-warning-color, var(--td-warning-color-5, #e37318));
+}
+@media (max-width: 750rpx) {
+  .t-form__label {
+    min-width: 120rpx;
+    max-width: 200rpx;
+    font-size: var(--td-font-size-base, 28rpx);
+  }
+  .t-form__item {
+    margin-bottom: var(--td-spacer, 16rpx);
+  }
+}
+.t-form--compact .t-form__item {
+  margin-bottom: var(--td-spacer, 16rpx);
+}
+.t-form--compact .t-form__label {
+  min-width: 120rpx;
+  font-size: var(--td-font-size-base, 28rpx);
+}
+.t-form--compact .t-form__help {
+  margin-top: calc(var(--td-spacer, 16rpx) / 2);
+  font-size: var(--td-font-size-xs, var(--td-font-size, 20rpx));
+}
+.t-form--loose .t-form__item {
+  margin-bottom: var(--td-spacer-3, 48rpx);
+}
+.t-form--loose .t-form__label {
+  min-width: 200rpx;
+  font-size: var(--td-font-size-l, 36rpx);
+}
+.t-form--loose .t-form__help {
+  margin-top: var(--td-spacer-2, 32rpx);
+  font-size: var(--td-font-size-m, 32rpx);
+}

package/dist/form/form.vue

@@ -0,0 +1,287 @@
+<template>
+  <view>
+    <form
+      :class="
+        classPrefix +
+          ' ' + classPrefix + '--' + labelAlign +
+          ' ' + classPrefix + '--' + (disabled ? 'disabled' : '') +
+          ' ' + classPrefix + '--' + (readonly ? 'readonly' : '') +
+          ' ' + tClass
+      "
+      :style="customStyle"
+    >
+      <slot />
+    </form>
+  </view>
+</template>
+<script>
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { coalesce } from '../common/utils';
+
+const name = `${prefix}-form`;
+
+const needValidate = (name, fields) => {
+  if (!fields || !Array.isArray(fields)) return true;
+  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;
+    },
+
+    // 注册子组件
+    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);
+
+        this.$emit('validate', {
+          validateResult,
+        });
+
+        return validateResult;
+      } catch (error) {
+        return false;
+      }
+    },
+
+    // 纯净验证（不显示错误信息）
+    async validateOnly(params) {
+      const { fields, trigger = 'all' } = params;
+      const { children } = this;
+
+      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;
+    },
+
+    // 获取第一个错误信息
+    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 || '';
+      }
+
+      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,
+        });
+
+        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,
+      });
+    },
+
+    // 清空验证结果
+    clearValidate(fields) {
+      const { children } = this;
+
+      children.forEach((child) => {
+        if (!fields || fields.includes(child.name)) {
+          child.clearValidate();
+        }
+      });
+    },
+
+    // 设置验证信息
+    setValidateMessage(validateMessage) {
+      const { children } = this;
+
+      children.forEach((child) => {
+        if (validateMessage[child.name]) {
+          child.setValidateMessage(validateMessage[child.name]);
+        }
+      });
+    },
+
+    // 获取空值
+    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();
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './form.css';
+</style>

package/dist/form/props.ts

@@ -0,0 +1,109 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+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,
+  },
+  /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐 */
+  labelAlign: {
+    type: String,
+    default: 'right' as TdFormProps['labelAlign'],
+    validator(val: TdFormProps['labelAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'top'].includes(val);
+    },
+  },
+  /** 可以整体设置label标签宽度，默认为81px */
+  labelWidth: {
+    type: [String, Number],
+    default: '81px' as TdFormProps['labelWidth'],
+  },
+  /** 是否整个表单只读 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否显示必填符号（*），默认显示 */
+  requiredMark: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单必填符号（*）显示位置 */
+  requiredMarkPosition: {
+    type: String,
+    validator(val: TdFormProps['requiredMarkPosition']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值 */
+  resetType: {
+    type: String,
+    default: 'empty' as TdFormProps['resetType'],
+    validator(val: TdFormProps['resetType']): boolean {
+      if (!val) return true;
+      return ['empty', 'initial'].includes(val);
+    },
+  },
+  /** 表单字段校验规则 */
+  rules: {
+    type: Object,
+  },
+  /** 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动 */
+  scrollToFirstError: {
+    type: String,
+    validator(val: TdFormProps['scrollToFirstError']): boolean {
+      if (!val) return true;
+      return ['', 'smooth', 'auto'].includes(val);
+    },
+  },
+  /** 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 */
+  showErrorMessage: {
+    type: Boolean,
+    default: true,
+  },
+  /** 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 */
+  submitWithWarningMessage: Boolean,
+  /** 表单重置时触发 */
+  onReset: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()` */
+  onSubmit: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表 */
+  onValidate: {
+    type: Function,
+    default: () => ({}),
+  },
+};