feat(form): support form id and button form API

Tencent · Sep 6, 2024 · cc75ffb · cc75ffb
1 parent b30b2ab
commit cc75ffb
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 0 deletions.
diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
@@ -9,6 +9,7 @@ block | Boolean | false | make button to be a block-level element | N
 content | String / Slot / Function | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | default slot。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined | native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
 ghost | Boolean | false | make background-color to be transparent | N
 href | String | - | \- | N
 icon | Slot / Function | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

diff --git a/src/button/button.md b/src/button/button.md
@@ -9,6 +9,7 @@ block | Boolean | false | 是否为块级元素 | N
 content | String / Slot / Function | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
 icon | Slot / Function | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

diff --git a/src/button/props.ts b/src/button/props.ts
@@ -20,6 +20,11 @@ export default {
   },
   /** 禁用状态 */
   disabled: Boolean,
+  /** 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 */
+  form: {
+    type: String,
+    default: undefined,
+  },
   /** 是否为幽灵按钮（镂空按钮） */
   ghost: Boolean,
   /** 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 */

diff --git a/src/button/type.ts b/src/button/type.ts
@@ -25,6 +25,10 @@ export interface TdButtonProps {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件
+   */
+  form?: string;
   /**
    * 是否为幽灵按钮（镂空按钮）
    * @default false

diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md
@@ -11,6 +11,7 @@ data | Object | {} | Typescript：`FormData` | N
 disabled | Boolean | undefined | \- | N
 errorMessage | Object | - | Typescript：`FormErrorMessage` | N
 formControlledComponents | Array | - | Typescript：`Array<string>` | N
+id | String | undefined | native id attribute of the form，which supports being used in conjunction with non-form buttons through the form attribute to trigger form events | N
 labelAlign | String | right | options: left/right/top | N
 labelWidth | String / Number | '100px' | \- | N
 layout | String | vertical | options: vertical/inline | N

diff --git a/src/form/form.md b/src/form/form.md
@@ -13,6 +13,7 @@ data | Object | {} | 表单数据。TS 类型：`FormData` | N
 disabled | Boolean | undefined | 是否禁用整个表单 | N
 errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
 formControlledComponents | Array | - | 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']`。TS 类型：`Array<string>` | N
+id | String | undefined | 表单原生的id属性，支持用于配合非表单内的按钮通过form属性来触发表单事件 | N
 labelAlign | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
 labelWidth | String / Number | '100px' | 可以整体设置label标签宽度，默认为100px | N
 layout | String | vertical | 表单布局，有两种方式：纵向布局 和 行内布局。可选项：vertical/inline | N

diff --git a/src/form/props.ts b/src/form/props.ts
@@ -28,6 +28,11 @@ export default {
   formControlledComponents: {
     type: Array as PropType<TdFormProps['formControlledComponents']>,
   },
+  /** 表单原生的id属性，支持用于配合非表单内的按钮通过form属性来触发表单事件 */
+  id: {
+    type: String,
+    default: undefined,
+  },
   /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐 */
   labelAlign: {
     type: String as PropType<TdFormProps['labelAlign']>,

diff --git a/src/form/type.ts b/src/form/type.ts
@@ -31,6 +31,10 @@ export interface TdFormProps<FormData extends Data = Data> {
    * 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']`
    */
   formControlledComponents?: Array<string>;
+  /**
+   * 表单原生的id属性，支持用于配合非表单内的按钮通过form属性来触发表单事件
+   */
+  id?: string;
   /**
    * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐
    * @default right