javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): update inputmode attribute values to match the specs (#19131)

Browse Source
This commit is contained in:
Simon
2019-08-26 22:07:54 +02:00
committed by Brandy Carney
parent d4db3af881
commit 3e63b3c2c4
6 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -431,7 +431,7 @@ ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
ion-input,prop,color,string | undefined,undefined,false,false ion-input,prop,color,string | undefined,undefined,false,false
ion-input,prop,debounce,number,0,false,false ion-input,prop,debounce,number,0,false,false
ion-input,prop,disabled,boolean,false,false,false ion-input,prop,disabled,boolean,false,false,false
ion-input,prop,inputmode,string | undefined,undefined,false,false ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
ion-input,prop,max,string | undefined,undefined,false,false ion-input,prop,max,string | undefined,undefined,false,false
ion-input,prop,maxlength,number | undefined,undefined,false,false ion-input,prop,maxlength,number | undefined,undefined,false,false
ion-input,prop,min,string | undefined,undefined,false,false ion-input,prop,min,string | undefined,undefined,false,false

12
core/src/components.d.ts vendored
View File

@ -959,9 +959,9 @@ export namespace Components {
*/ */
'getInputElement': () => Promise<HTMLInputElement>; 'getInputElement': () => Promise<HTMLInputElement>;
/** /**
* A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
'inputmode'?: string; 'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
/** /**
* The maximum value, which must not be less than its minimum (min attribute) value. * The maximum value, which must not be less than its minimum (min attribute) value.
*/ */
@ -2184,7 +2184,7 @@ export namespace Components {
*/ */
'getInputElement': () => Promise<HTMLInputElement>; 'getInputElement': () => Promise<HTMLInputElement>;
/** /**
* A hint to the browser for which keyboard to display. Possible values are: `"none"` | `"text"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"` | `"search"`. * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
'inputmode': 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; 'inputmode': 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
/** /**
@ -4449,9 +4449,9 @@ declare namespace LocalJSX {
*/ */
'disabled'?: boolean; 'disabled'?: boolean;
/** /**
* A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
'inputmode'?: string; 'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
/** /**
* The maximum value, which must not be less than its minimum (min attribute) value. * The maximum value, which must not be less than its minimum (min attribute) value.
*/ */
@ -5446,7 +5446,7 @@ declare namespace LocalJSX {
*/ */
'disabled'?: boolean; 'disabled'?: boolean;
/** /**
* A hint to the browser for which keyboard to display. Possible values are: `"none"` | `"text"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"` | `"search"`. * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; 'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
/** /**

5
core/src/components/input/input.tsx
View File

@ -90,9 +90,10 @@ export class Input implements ComponentInterface {
/** /**
* A hint to the browser for which keyboard to display. * A hint to the browser for which keyboard to display.
* This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
* `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
@Prop() inputmode?: string; @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
/** /**
* The maximum value, which must not be less than its minimum (min attribute) value. * The maximum value, which must not be less than its minimum (min attribute) value.

4
core/src/components/input/readme.md
View File

@ -211,7 +211,7 @@ export const InputExample: React.FC = () => (
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------- | | ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
| `accept` | `accept` | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | `string \| undefined` | `undefined` | | `accept` | `accept` | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | `string \| undefined` | `undefined` |
| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `string` | `'off'` | | `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `string` | `'off'` |
| `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"off" \| "on"` | `'off'` | | `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"off" \| "on"` | `'off'` |
@ -222,7 +222,7 @@ export const InputExample: React.FC = () => (
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `0` | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `0` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. | `string \| undefined` | `undefined` | | `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` | `undefined` | | `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` | `undefined` |
| `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` | `undefined` | | `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` | `undefined` |
| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` | `undefined` | | `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` | `undefined` |

2
core/src/components/searchbar/readme.md
View File

@ -230,7 +230,7 @@ export const SearchbarExample: React.FC = () => (
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values are: `"none"` \| `"text"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` \| `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |

3
core/src/components/searchbar/searchbar.tsx
View File

@ -83,7 +83,8 @@ export class Searchbar implements ComponentInterface {
/** /**
* A hint to the browser for which keyboard to display. * A hint to the browser for which keyboard to display.
* Possible values are: `"none"` | `"text"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"` | `"search"`. * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
* `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
@Prop() inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' = 'search'; @Prop() inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' = 'search';