From 37df183c4b732702aabce82d52c40dc5a7a5de5d Mon Sep 17 00:00:00 2001 From: qiang Date: Thu, 13 Nov 2025 08:02:35 +0800 Subject: [PATCH] docs(components): [input] adjust the recommended value for the type (#22757) closed #14686 --- docs/en-US/component/input.md | 72 ++++++++-------- docs/en-US/component/message-box.md | 84 +++++++++---------- packages/components/input/src/input.ts | 15 +++- .../message-box/src/message-box.type.ts | 7 +- 4 files changed, 95 insertions(+), 83 deletions(-) diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index 5e7fb64ee8..45f8e33ce1 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -117,42 +117,42 @@ input/length-limiting ### Attributes -| Name | Description | Type | Default | -| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| type | type of input | ^[string]`'text' \| 'textarea' \| 'password' \| 'button' \| 'checkbox' \| 'file' \| 'number' \| 'radio' \| ...` [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text | -| model-value / v-model | binding value | ^[string] / ^[number] | — | -| model-modifiers ^(2.11.5) | v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) | ^[object]`{ lazy?: boolean, number?: boolean, trim?: boolean }` | — | -| maxlength | same as `maxlength` in native input | ^[string] / ^[number] | — | -| minlength | same as `minlength` in native input | ^[string] / ^[number] | — | -| show-word-limit | whether show word count, only works when `type` is 'text' or 'textarea' | ^[boolean] | false | -| word-limit-position ^(2.11.5) | word count position, valid when `show-word-limit` is true | ^[enum]`'inside' \| 'outside' ` | "inside" | -| placeholder | placeholder of Input | ^[string] | — | -| clearable | whether to show clear button, only works when `type` is not 'textarea' | ^[boolean] | false | -| clear-icon ^(2.11.0) | custom clear icon component | ^[string] / ^[object]`Component` | CircleClose | -| formatter | specifies the format of the value presented input.(only works when `type` is 'text') | ^[Function]`(value: string \| number) => string` | — | -| parser | specifies the value extracted from formatter input.(only works when `type` is 'text') | ^[Function]`(value: string) => string` | — | -| show-password | whether to show toggleable password input | ^[boolean] | false | -| disabled | whether Input is disabled | ^[boolean] | false | -| size | size of Input, works when `type` is not 'textarea' | ^[enum]`'large' \| 'default' \| 'small'` | — | -| prefix-icon | prefix icon component | ^[string] / ^[Component] | — | -| suffix-icon | suffix icon component | ^[string] / ^[Component] | — | -| rows | number of rows of textarea, only works when `type` is 'textarea' | ^[number] | 2 | -| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | ^[boolean] / ^[object]`{ minRows?: number, maxRows?: number }` | false | -| autocomplete | same as `autocomplete` in native input | ^[string] | off | -| name | same as `name` in native input | ^[string] | — | -| readonly | same as `readonly` in native input | ^[boolean] | false | -| max | same as `max` in native input | — | — | -| min | same as `min` in native input | — | — | -| step | same as `step` in native input | — | — | -| resize | control the resizability | ^[enum]`'none' \| 'both' \| 'horizontal' \| 'vertical'` | — | -| autofocus | same as `autofocus` in native input | ^[boolean] | false | -| form | same as `form` in native input | `string` | — | -| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in native input | ^[string] | — | -| tabindex | input tabindex | ^[string] / ^[number] | — | -| 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] | — | +| Name | Description | Type | Default | +| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- | +| type | type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | ^[string]`'text' \| 'textarea' \| 'number' \| 'password' \| 'email' \| 'search' \| 'tel' \| 'url'` | text | +| model-value / v-model | binding value | ^[string] / ^[number] | — | +| model-modifiers ^(2.11.5) | v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) | ^[object]`{ lazy?: boolean, number?: boolean, trim?: boolean }` | — | +| maxlength | same as `maxlength` in native input | ^[string] / ^[number] | — | +| minlength | same as `minlength` in native input | ^[string] / ^[number] | — | +| show-word-limit | whether show word count, only works when `type` is 'text' or 'textarea' | ^[boolean] | false | +| word-limit-position ^(2.11.5) | word count position, valid when `show-word-limit` is true | ^[enum]`'inside' \| 'outside' ` | "inside" | +| placeholder | placeholder of Input | ^[string] | — | +| clearable | whether to show clear button, only works when `type` is not 'textarea' | ^[boolean] | false | +| clear-icon ^(2.11.0) | custom clear icon component | ^[string] / ^[object]`Component` | CircleClose | +| formatter | specifies the format of the value presented input.(only works when `type` is 'text') | ^[Function]`(value: string \| number) => string` | — | +| parser | specifies the value extracted from formatter input.(only works when `type` is 'text') | ^[Function]`(value: string) => string` | — | +| show-password | whether to show toggleable password input | ^[boolean] | false | +| disabled | whether Input is disabled | ^[boolean] | false | +| size | size of Input, works when `type` is not 'textarea' | ^[enum]`'large' \| 'default' \| 'small'` | — | +| prefix-icon | prefix icon component | ^[string] / ^[Component] | — | +| suffix-icon | suffix icon component | ^[string] / ^[Component] | — | +| rows | number of rows of textarea, only works when `type` is 'textarea' | ^[number] | 2 | +| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | ^[boolean] / ^[object]`{ minRows?: number, maxRows?: number }` | false | +| autocomplete | same as `autocomplete` in native input | ^[string] | off | +| name | same as `name` in native input | ^[string] | — | +| readonly | same as `readonly` in native input | ^[boolean] | false | +| max | same as `max` in native input | — | — | +| min | same as `min` in native input | — | — | +| step | same as `step` in native input | — | — | +| resize | control the resizability | ^[enum]`'none' \| 'both' \| 'horizontal' \| 'vertical'` | — | +| autofocus | same as `autofocus` in native input | ^[boolean] | false | +| form | same as `form` in native input | `string` | — | +| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in native input | ^[string] | — | +| tabindex | input tabindex | ^[string] / ^[number] | — | +| 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 diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md index 02763c9db0..edfe43c740 100644 --- a/docs/en-US/component/message-box.md +++ b/docs/en-US/component/message-box.md @@ -158,45 +158,45 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB ### Options -| Name | Description | Type | Default | -| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ | -| autofocus | auto focus when open MessageBox | ^[boolean] | true | -| title | title of the MessageBox | ^[string] | '' | -| message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17) | — | -| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false | -| type | message type, used for icon display | ^[enum]`'primary' (2.9.11) \| 'success' \| 'info' \| 'warning' \| 'error'` | '' | -| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | '' | -| closeIcon ^(2.9.5) | custom close icon component, default is Close | ^[string] / ^[Component] | '' | -| customClass | custom class name for MessageBox | ^[string] | '' | -| customStyle | custom inline style for MessageBox | ^[CSSProperties] | {} | -| modal | whether a mask is displayed | ^[boolean] | true | -| modalClass | custom class names for mask | string | — | -| callback | MessageBox closing callback if you don't prefer Promise | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any` | null | -| showClose | whether to show close icon of MessageBox | ^[boolean] | true | -| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null | -| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | ^[boolean] | false | -| lockScroll | whether to lock body scroll when MessageBox prompts | ^[boolean] | true | -| showCancelButton | whether to show a cancel button | ^[boolean] | false (true when called with confirm and prompt) | -| showConfirmButton | whether to show a confirm button | ^[boolean] | true | -| cancelButtonText | text content of cancel button | ^[string] | Cancel | -| confirmButtonText | text content of confirm button | ^[string] | OK | -| cancelButtonLoadingIcon ^(2.7.7) | loading icon content of cancel button | ^[string] / ^[Component] | Loading | -| confirmButtonLoadingIcon ^(2.7.7) | loading icon content of confirm button | ^[string] / ^[Component] | Loading | -| cancelButtonClass | custom class name of cancel button | ^[string] | '' | -| confirmButtonClass | custom class name of confirm button | ^[string] | '' | -| closeOnClickModal | whether MessageBox can be closed by clicking the mask | ^[boolean] | true (false when called with alert) | -| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | ^[boolean] | true (false when called with alert) | -| closeOnHashChange | whether to close MessageBox when hash changes | ^[boolean] | true | -| showInput | whether to show an input | ^[boolean] | false (true when called with prompt) | -| inputPlaceholder | placeholder of input | ^[string] | '' | -| inputType | type of input | ^[string] | text | -| inputValue | initial value of input | ^[string] | '' | -| inputPattern | regexp for the input | ^[regexp] | null | -| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | ^[Function]`(value: string) => boolean \| string`/ `undefined` | undefined | -| inputErrorMessage | error message when validation fails | ^[string] | Illegal input | -| center | whether to align the content in center | ^[boolean] | false | -| draggable | whether MessageBox is draggable | ^[boolean] | false | -| overflow ^(2.5.4) | draggable MessageBox can overflow the viewport | ^[boolean] | false | -| roundButton | whether to use round button | ^[boolean] | false | -| buttonSize | custom size of confirm and cancel buttons | ^[string]`'small' \| 'default' \| 'large'` | default | -| appendTo ^(2.2.19) | set the root element for the message box | ^[CSSSelector] / ^[HTMLElement] | — | +| Name | Description | Type | Default | +| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------ | +| autofocus | auto focus when open MessageBox | ^[boolean] | true | +| title | title of the MessageBox | ^[string] | '' | +| message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17) | — | +| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false | +| type | message type, used for icon display | ^[enum]`'primary' (2.9.11) \| 'success' \| 'info' \| 'warning' \| 'error'` | '' | +| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | '' | +| closeIcon ^(2.9.5) | custom close icon component, default is Close | ^[string] / ^[Component] | '' | +| customClass | custom class name for MessageBox | ^[string] | '' | +| customStyle | custom inline style for MessageBox | ^[CSSProperties] | {} | +| modal | whether a mask is displayed | ^[boolean] | true | +| modalClass | custom class names for mask | string | — | +| callback | MessageBox closing callback if you don't prefer Promise | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any` | null | +| showClose | whether to show close icon of MessageBox | ^[boolean] | true | +| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null | +| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | ^[boolean] | false | +| lockScroll | whether to lock body scroll when MessageBox prompts | ^[boolean] | true | +| showCancelButton | whether to show a cancel button | ^[boolean] | false (true when called with confirm and prompt) | +| showConfirmButton | whether to show a confirm button | ^[boolean] | true | +| cancelButtonText | text content of cancel button | ^[string] | Cancel | +| confirmButtonText | text content of confirm button | ^[string] | OK | +| cancelButtonLoadingIcon ^(2.7.7) | loading icon content of cancel button | ^[string] / ^[Component] | Loading | +| confirmButtonLoadingIcon ^(2.7.7) | loading icon content of confirm button | ^[string] / ^[Component] | Loading | +| cancelButtonClass | custom class name of cancel button | ^[string] | '' | +| confirmButtonClass | custom class name of confirm button | ^[string] | '' | +| closeOnClickModal | whether MessageBox can be closed by clicking the mask | ^[boolean] | true (false when called with alert) | +| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | ^[boolean] | true (false when called with alert) | +| closeOnHashChange | whether to close MessageBox when hash changes | ^[boolean] | true | +| showInput | whether to show an input | ^[boolean] | false (true when called with prompt) | +| inputPlaceholder | placeholder of input | ^[string] | '' | +| inputType | type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | ^[string]`'text' \| 'textarea' \| 'number' \| 'password' \| 'email' \| 'search' \| 'tel' \| 'url'` | text | +| inputValue | initial value of input | ^[string] | '' | +| inputPattern | regexp for the input | ^[regexp] | null | +| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | ^[Function]`(value: string) => boolean \| string`/ `undefined` | undefined | +| inputErrorMessage | error message when validation fails | ^[string] | Illegal input | +| center | whether to align the content in center | ^[boolean] | false | +| draggable | whether MessageBox is draggable | ^[boolean] | false | +| overflow ^(2.5.4) | draggable MessageBox can overflow the viewport | ^[boolean] | false | +| roundButton | whether to use round button | ^[boolean] | false | +| buttonSize | custom size of confirm and cancel buttons | ^[string]`'small' \| 'default' \| 'large'` | default | +| appendTo ^(2.2.19) | set the root element for the message box | ^[CSSSelector] / ^[HTMLElement] | — | diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts index e51cbc19d3..7b7757c4de 100644 --- a/packages/components/input/src/input.ts +++ b/packages/components/input/src/input.ts @@ -22,6 +22,17 @@ export type InputModelModifiers = { trim?: boolean } export type InputAutoSize = { minRows?: number; maxRows?: number } | boolean +// Some commonly used values for input type +export type InputType = + | 'text' + | 'textarea' + | 'number' + | 'password' + | 'email' + | 'search' + | 'tel' + | 'url' + | (string & NonNullable) export const inputProps = buildProps({ /** @@ -70,10 +81,10 @@ export const inputProps = buildProps({ type: [String, Number], }, /** - * @description type of input + * @description type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) */ type: { - type: String, + type: definePropType(String), default: 'text', }, /** diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts index 037be0ccd9..deb56c65a3 100644 --- a/packages/components/message-box/src/message-box.type.ts +++ b/packages/components/message-box/src/message-box.type.ts @@ -1,5 +1,6 @@ import type { AppContext, CSSProperties, Component, VNode } from 'vue' import type { ComponentSize } from '@element-plus/constants' +import type { InputType } from '@element-plus/components/input/src/input' type MessageType = '' | 'primary' | 'success' | 'warning' | 'info' | 'error' @@ -27,7 +28,7 @@ export declare interface MessageBoxState { showInput: boolean inputValue: string inputPlaceholder: string - inputType: string + inputType: InputType inputPattern: RegExp | null inputValidator: MessageBoxInputValidator inputErrorMessage: string @@ -180,8 +181,8 @@ export interface ElMessageBoxOptions { /** Regexp for the input */ inputPattern?: RegExp - /** Input Type: text, textArea, password or number */ - inputType?: string + /** type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) */ + inputType?: InputType /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */ inputValidator?: MessageBoxInputValidator