feat(components): [input] native inputmode prop for el-input & el-input-number (#14997)

* feat(components): add native inputmode for el-input

* feat(components): add native inputmode for el-input-number
 Please enter the commit message for your changes. Lines starting

* chore: rm "props" in template

docs/en-US/component/input-number.md

@@ -119,6 +119,7 @@ input-number/with-prefix-suffix
 | value-on-clear ^(2.2.0)     | value should be set when input box is cleared    | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | —         |
 | validate-event              | whether to trigger form validation               | ^[boolean]                                    | true      |
 | label ^(a11y) ^(deprecated) | same as `aria-label` in native input             | ^[string]                                     | —         |
+| inputmode ^(2.10.3)         | same as `inputmode` in native input              | ^[string]                                     | —         |
 
 ### Slots
 

docs/en-US/component/input.md

@@ -151,6 +151,7 @@ input/length-limiting
 | validate-event              | whether to trigger form validation                                                                                                     | ^[boolean]                                                                                                                                                                                                                   | true    |
 | input-style                 | the style of the input element or textarea element                                                                                     | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]`                                                                                                                                                          | {}      |
 | label ^(a11y) ^(deprecated) | same as `aria-label` in native input                                                                                                   | ^[string]                                                                                                                                                                                                                    | —       |
+| inputmode ^(2.10.3)         | same as `inputmode` in native input                                                                                                    | ^[string]                                                                                                                                                                                                                    | —       |
 
 ### Events
 

packages/components/input-number/src/input-number.ts

@@ -1,13 +1,13 @@
 import { isNil } from 'lodash-unified'
 import { useAriaProps, useSizeProp } from '@element-plus/hooks'
-import { buildProps, isNumber } from '@element-plus/utils'
+import { buildProps, definePropType, isNumber } from '@element-plus/utils'
 import {
   CHANGE_EVENT,
   INPUT_EVENT,
   UPDATE_MODEL_EVENT,
 } from '@element-plus/constants'
 
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, HTMLAttributes } from 'vue'
 import type InputNumber from './input-number.vue'
 
 export const inputNumberProps = buildProps({
@@ -109,6 +109,13 @@ export const inputNumberProps = buildProps({
     default: true,
   },
   ...useAriaProps(['ariaLabel']),
+  /**
+   * @description native input mode for virtual keyboards
+   */
+  inputmode: {
+    type: definePropType<HTMLAttributes['inputmode']>(String),
+    default: undefined,
+  },
 } as const)
 export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>
 

packages/components/input-number/src/input-number.vue

@@ -54,6 +54,7 @@
       :name="name"
       :aria-label="ariaLabel"
       :validate-event="false"
+      :inputmode="inputmode"
       @keydown.up.prevent="increase"
       @keydown.down.prevent="decrease"
       @blur="handleBlur"

packages/components/input/src/input.ts

@@ -8,7 +8,7 @@ import {
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useAriaProps, useSizeProp } from '@element-plus/hooks'
 
-import type { ExtractPropTypes, StyleValue } from 'vue'
+import type { ExtractPropTypes, HTMLAttributes, StyleValue } from 'vue'
 
 export type InputAutoSize = { minRows?: number; maxRows?: number } | boolean
 
@@ -168,6 +168,13 @@ export const inputProps = buildProps({
     default: 2,
   },
   ...useAriaProps(['ariaLabel']),
+  /**
+   * @description native input mode for virtual keyboards
+   */
+  inputmode: {
+    type: definePropType<HTMLAttributes['inputmode']>(String),
+    default: undefined,
+  },
 } as const)
 export type InputProps = ExtractPropTypes<typeof inputProps>
 

packages/components/input/src/input.vue

@@ -47,6 +47,7 @@
           :form="form"
           :autofocus="autofocus"
           :role="containerRole"
+          :inputmode="inputmode"
           @compositionstart="handleCompositionStart"
           @compositionupdate="handleCompositionUpdate"
           @compositionend="handleCompositionEnd"