feat(input): mobile add enterkeyhint API (#478)

* feat(input): mobile add enterkeyhint API * feat(input): support spellCheck * feat(input): mobile-react 拆分定义 spellcheck --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
TDesignOteam · Nov 27, 2024 · 069339e · 069339e
1 parent 6497234
commit 069339e
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 2 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-mobile-react/src/input/defaultProps.ts b/packages/products/tdesign-mobile-react/src/input/defaultProps.ts
@@ -16,6 +16,7 @@ export const inputDefaultProps: TdInputProps = {
   layout: 'horizontal',
   placeholder: undefined,
   readonly: undefined,
+  spellcheck: false,
   status: 'default',
   type: 'text',
 };
diff --git a/packages/products/tdesign-mobile-react/src/input/input.en-US.md b/packages/products/tdesign-mobile-react/src/input/input.en-US.md
@@ -16,6 +16,7 @@ borderless | Boolean | false | input without border | N
 clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
 clearable | Boolean | false | show clear icon, clicked to clear input value | N
 disabled | Boolean | undefined | make input to be disabled | N
+enterkeyhint | String | - | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。options: enter/done/go/next/previous/search/send | N
 errorMessage | String | - | `deprecated` | N
 format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
 label | TNode | - | text on the left of input。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
@@ -27,6 +28,7 @@ placeholder | String | undefined | \- | N
 prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 readonly | Boolean | undefined | \- | N
 size | String | medium | `deprecated`。options: small/medium。Typescript：`'medium' \| 'small'` | N
+spellcheck | Boolean | false | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N
 status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | suffix content before suffixIcon。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | suffix icon of input。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

diff --git a/packages/products/tdesign-mobile-react/src/input/input.md b/packages/products/tdesign-mobile-react/src/input/input.md
@@ -16,6 +16,7 @@ borderless | Boolean | false | 是否开启无边框模式 | N
 clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | undefined | 是否禁用输入框 | N
+enterkeyhint | String | - | 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。可选项：enter/done/go/next/previous/search/send | N
 errorMessage | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
 format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
@@ -27,6 +28,7 @@ placeholder | String | undefined | 占位符 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 已废弃。输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
+spellcheck | Boolean | false | 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

diff --git a/packages/products/tdesign-mobile-react/src/input/type.ts b/packages/products/tdesign-mobile-react/src/input/type.ts
@@ -46,6 +46,10 @@ export interface TdInputProps {
    * 是否禁用输入框
    */
   disabled?: boolean;
+  /**
+   * 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
+   */
+  enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
   /**
    * 指定输入框展示值的格式
    */
@@ -84,6 +88,11 @@ export interface TdInputProps {
    * 只读状态
    */
   readonly?: boolean;
+  /**
+   * 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck)
+   * @default false
+   */
+  spellcheck?: boolean;
   /**
    * 输入框状态
    * @default default

diff --git a/packages/products/tdesign-mobile-vue/src/input/input.en-US.md b/packages/products/tdesign-mobile-vue/src/input/input.en-US.md
@@ -14,6 +14,7 @@ borderless | Boolean | false | input without border | N
 clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
 clearable | Boolean | false | show clear icon, clicked to clear input value | N
 disabled | Boolean | undefined | make input to be disabled | N
+enterkeyhint | String | - | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。options: enter/done/go/next/previous/search/send | N
 format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N
 label | String / Slot / Function | - | text on the left of input。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | options: vertical/horizontal | N

diff --git a/packages/products/tdesign-mobile-vue/src/input/input.md b/packages/products/tdesign-mobile-vue/src/input/input.md
@@ -14,6 +14,7 @@ borderless | Boolean | false | 是否开启无边框模式 | N
 clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | undefined | 是否禁用输入框 | N
+enterkeyhint | String | - | 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。可选项：enter/done/go/next/previous/search/send | N
 format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N

diff --git a/packages/products/tdesign-mobile-vue/src/input/props.ts b/packages/products/tdesign-mobile-vue/src/input/props.ts
@@ -44,6 +44,14 @@ export default {
     type: Boolean,
     default: undefined,
   },
+  /** 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) */
+  enterkeyhint: {
+    type: String as PropType<TdInputProps['enterkeyhint']>,
+    validator(val: TdInputProps['enterkeyhint']): boolean {
+      if (!val) return true;
+      return ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'].includes(val);
+    },
+  },
   /** 指定输入框展示值的格式 */
   format: {
     type: Function as PropType<TdInputProps['format']>,

diff --git a/packages/products/tdesign-mobile-vue/src/input/type.ts b/packages/products/tdesign-mobile-vue/src/input/type.ts
@@ -45,6 +45,10 @@ export interface TdInputProps {
    * 是否禁用输入框
    */
   disabled?: boolean;
+  /**
+   * 用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
+   */
+  enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
   /**
    * 指定输入框展示值的格式
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -63919,6 +63919,47 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1732163188,
+      "platform_framework": [
+        "8",
+        "16",
+        "32"
+      ],
+      "component": "Input",
+      "field_category": 1,
+      "field_name": "enterkeyhint",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "",
+      "field_enum": "enter/done/go/next/previous/search/send",
+      "field_desc_zh": "用于控制回车键样式，此 API 仅在部分浏览器支持，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+      "field_desc_en": "attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-21 04:26:28",
+      "update_time": "2024-11-21 04:26:28",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
     {
       "id": 1710,
       "platform_framework": [
@@ -65239,7 +65280,8 @@
         "1",
         "2",
         "4",
-        "8"
+        "8",
+        "32"
       ],
       "component": "Input",
       "field_category": 1,
@@ -65270,7 +65312,45 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
-        "Vue(Mobile)"
+        "Vue(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
+    {
+      "id": 1732518837,
+      "platform_framework": [
+        "16"
+      ],
+      "component": "Input",
+      "field_category": 1,
+      "field_name": "spellcheck",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "false",
+      "field_enum": "",
+      "field_desc_zh": "是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck)",
+      "field_desc_en": "attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck)",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-25 07:13:57",
+      "update_time": "2024-11-25 07:13:57",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "React(Mobile)"
       ],
       "field_type_text": [
         "Boolean"