docs(form): api update (#1465)

Tencent · Jun 21, 2024 · 681a9a2 · 681a9a2
1 parent 68135e8
commit 681a9a2
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 101 deletions.
diff --git a/src/form/form-item-props.ts b/src/form/form-item-props.ts
@@ -8,6 +8,17 @@ import { TdFormItemProps } from '../form/type';
 import { PropType } from 'vue';
 
 export default {
+  /** 是否显示右侧箭头 */
+  arrow: Boolean,
+  /** 表单内容对齐方式：左对齐、右对齐 */
+  contentAlign: {
+    type: String as PropType<TdFormItemProps['contentAlign']>,
+    default: 'left' as TdFormItemProps['contentAlign'],
+    validator(val: TdFormItemProps['contentAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
   /** label 原生属性 */
   for: {
     type: String,
@@ -34,15 +45,6 @@ export default {
   labelWidth: {
     type: [String, Number] as PropType<TdFormItemProps['labelWidth']>,
   },
-  /** 表单字段标签对齐方式：左对齐、右对齐 */
-  contentAlign: {
-    type: String as PropType<TdFormItemProps['contentAlign']>,
-    default: 'left' as TdFormItemProps['contentAlign'],
-    validator(val: TdFormItemProps['contentAlign']): boolean {
-      if (!val) return true;
-      return ['left', 'right'].includes(val);
-    },
-  },
   /** 表单字段名称 */
   name: {
     type: [String, Number] as PropType<TdFormItemProps['name']>,
@@ -61,22 +63,4 @@ export default {
     type: Boolean,
     default: undefined,
   },
-  /** 校验状态，可在需要完全自主控制校验状态时使用 */
-  status: {
-    type: String as PropType<TdFormItemProps['status']>,
-    default: '',
-  },
-  /** 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。优先级高级 Form 的 statusIcon */
-  statusIcon: {
-    type: [Boolean, Function] as PropType<TdFormItemProps['statusIcon']>,
-    default: undefined,
-  },
-  /** 是否显示校验成功的边框，默认不显示 */
-  successBorder: Boolean,
-  /** 自定义提示内容，样式跟随 `status` 变动，可在需要完全自主控制校验规则时使用 */
-  tips: {
-    type: [String, Function] as PropType<TdFormItemProps['tips']>,
-  },
-  /** 是否显示右侧箭头 */
-  arrow: Boolean,
 };
diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md
@@ -11,9 +11,9 @@ contentAlign | String | left | options: left/right | N
 data | Object | {} | Typescript：`FormData` | N
 disabled | Boolean | undefined | \- | N
 errorMessage | Object | - | Typescript：`FormErrorMessage` | N
-formControlledComponents | Array | - | Typescript：`Array<string>` | N
 labelAlign | String | right | options: left/right/top | N
 labelWidth | String / Number | '81px' | \- | N
+preventSubmitDefault | Boolean | true | \- | N
 requiredMark | Boolean | undefined | \- | N
 resetType | String | empty | options: empty/initial | N
 rules | Object | - | Typescript：`FormRules<FormData>` `type FormRules<T extends Data> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts) | N
@@ -48,6 +48,7 @@ validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `P
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+arrow | Boolean | false | \- | N
 contentAlign | String | left | options: left/right | N
 for | String | - | \- | N
 help | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/form/form.md b/src/form/form.md
@@ -11,9 +11,9 @@ contentAlign | String | left | 表单内容对齐方式：左对齐、右对齐
 data | Object | {} | 表单数据。TS 类型：`FormData` | N
 disabled | Boolean | undefined | 是否禁用整个表单 | N
 errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
-formControlledComponents | Array | - | 【开发中】允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TSwitch、TRadio、TRadioGroup、TUpload、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']`。TS 类型：`Array<string>` | N
 labelAlign | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
 labelWidth | String / Number | '81px' | 可以整体设置label标签宽度，默认为81px | N
+preventSubmitDefault | Boolean | true | 是否阻止表单提交默认事件（表单提交默认事件会刷新页面），设置为 `true` 可以避免刷新 | N
 requiredMark | Boolean | undefined | 是否显示必填符号（*），默认显示 | N
 resetType | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N
 rules | Object | - | 表单字段校验规则。TS 类型：`FormRules<FormData>` `type FormRules<T extends Data> = { [field in keyof T]?: Array<FormRule> }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts) | N
@@ -48,6 +48,7 @@ validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `P
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+arrow | Boolean | false | 是否显示右侧箭头 | N
 contentAlign | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
 for | String | - | label 原生属性 | N
 help | String / Slot / Function | - | 表单项说明内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/form/props.ts b/src/form/props.ts
@@ -10,6 +10,15 @@ import { PropType } from 'vue';
 export default {
   /** 是否在表单标签字段右侧显示冒号 */
   colon: Boolean,
+  /** 表单内容对齐方式：左对齐、右对齐 */
+  contentAlign: {
+    type: String as PropType<TdFormProps['contentAlign']>,
+    default: 'left' as TdFormProps['contentAlign'],
+    validator(val: TdFormProps['contentAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
   /** 表单数据 */
   data: {
     type: Object as PropType<TdFormProps['data']>,
@@ -24,10 +33,6 @@ export default {
   errorMessage: {
     type: Object as PropType<TdFormProps['errorMessage']>,
   },
-  /** 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']` */
-  formControlledComponents: {
-    type: Array as PropType<TdFormProps['formControlledComponents']>,
-  },
   /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐 */
   labelAlign: {
     type: String as PropType<TdFormProps['labelAlign']>,
@@ -42,24 +47,6 @@ export default {
     type: [String, Number] as PropType<TdFormProps['labelWidth']>,
     default: '81px',
   },
-  /** 表单字段标签对齐方式：左对齐、右对齐 */
-  contentAlign: {
-    type: String as PropType<TdFormProps['contentAlign']>,
-    default: 'left' as TdFormProps['contentAlign'],
-    validator(val: TdFormProps['contentAlign']): boolean {
-      if (!val) return true;
-      return ['left', 'right'].includes(val);
-    },
-  },
-  /** 表单布局，有两种方式：纵向布局 和 行内布局 */
-  layout: {
-    type: String as PropType<TdFormProps['layout']>,
-    default: 'vertical' as TdFormProps['layout'],
-    validator(val: TdFormProps['layout']): boolean {
-      if (!val) return true;
-      return ['vertical', 'inline'].includes(val);
-    },
-  },
   /** 是否阻止表单提交默认事件（表单提交默认事件会刷新页面），设置为 `true` 可以避免刷新 */
   preventSubmitDefault: {
     type: Boolean,
@@ -96,11 +83,6 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标 */
-  statusIcon: {
-    type: [Boolean, Function] as PropType<TdFormProps['statusIcon']>,
-    default: undefined,
-  },
   /** 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 */
   submitWithWarningMessage: Boolean,
   /** 表单重置时触发 */

diff --git a/src/form/type.ts b/src/form/type.ts
@@ -14,6 +14,11 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default false
    */
   colon?: boolean;
+  /**
+   * 表单内容对齐方式：左对齐、右对齐
+   * @default left
+   */
+  contentAlign?: 'left' | 'right';
   /**
    * 表单数据
    * @default {}
@@ -27,10 +32,6 @@ export interface TdFormProps<FormData extends Data = Data> {
    * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
    */
   errorMessage?: FormErrorMessage;
-  /**
-   * 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']`
-   */
-  formControlledComponents?: Array<string>;
   /**
    * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐
    * @default right
@@ -41,15 +42,6 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default '81px'
    */
   labelWidth?: string | number;
-  /**
-   * 表单内容对齐方式：左对齐、右对齐对齐。默认使用 Form 的对齐方式，优先级高于 Form.contentAlign
-   */
-  contentAlign?: 'left' | 'right';
-  /**
-   * 表单布局，有两种方式：纵向布局 和 行内布局
-   * @default vertical
-   */
-  layout?: 'vertical' | 'inline';
   /**
    * 是否阻止表单提交默认事件（表单提交默认事件会刷新页面），设置为 `true` 可以避免刷新
    * @default true
@@ -77,10 +69,6 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default true
    */
   showErrorMessage?: boolean;
-  /**
-   * 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标
-   */
-  statusIcon?: boolean | TNode<TdFormItemProps>;
   /**
    * 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件
    * @default false
@@ -101,7 +89,7 @@ export interface TdFormProps<FormData extends Data = Data> {
 }
 
 /** 组件实例方法 */
-export interface FormInstanceFunctions {
+export interface FormInstanceFunctions<FormData extends Data = Data> {
   /**
    * 清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
    */
@@ -129,6 +117,16 @@ export interface FormInstanceFunctions {
 }
 
 export interface TdFormItemProps {
+  /**
+   * 是否显示右侧箭头
+   * @default false
+   */
+  arrow?: boolean;
+  /**
+   * 表单内容对齐方式：左对齐、右对齐
+   * @default left
+   */
+  contentAlign?: 'left' | 'right';
   /**
    * label 原生属性
    * @default ''
@@ -151,10 +149,6 @@ export interface TdFormItemProps {
    * 可以整体设置标签宽度，优先级高于 Form.labelWidth
    */
   labelWidth?: string | number;
-  /**
-   * 表单内容对齐方式：左对齐、右对齐对齐。默认使用 Form 的对齐方式，优先级高于 Form.contentAlign
-   */
-  contentAlign?: 'left' | 'right';
   /**
    * 表单字段名称
    */
@@ -171,29 +165,6 @@ export interface TdFormItemProps {
    * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
    */
   showErrorMessage?: boolean;
-  /**
-   * 校验状态，可在需要完全自主控制校验状态时使用
-   * @default ''
-   */
-  status?: 'error' | 'warning' | 'success' | 'validating';
-  /**
-   * 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。优先级高级 Form 的 statusIcon
-   */
-  statusIcon?: boolean | TNode;
-  /**
-   * 是否显示校验成功的边框，默认不显示
-   * @default false
-   */
-  successBorder?: boolean;
-  /**
-   * 自定义提示内容，样式跟随 `status` 变动，可在需要完全自主控制校验规则时使用
-   */
-  tips?: string | TNode;
-  /**
-   * 是否显示右侧箭头
-   * @default false
-   */
-  arrow?: boolean;
 }
 
 export interface FormRule {