diff --git a/api-generator/components/inputotp.js b/api-generator/components/inputotp.js index c4a86f705..6c74db25d 100644 --- a/api-generator/components/inputotp.js +++ b/api-generator/components/inputotp.js @@ -1,9 +1,9 @@ -const InputSwitchProps = [ +const InputOtpProps = [ { name: 'modelValue', type: 'boolean', default: 'null', - description: 'Specifies whether a inputswitch should be checked or not.' + description: 'Specifies whether a inputOtp should be checked or not.' }, { name: 'trueValue', @@ -55,7 +55,7 @@ const InputSwitchProps = [ } ]; -const InputSwitchEvents = [ +const InputOtpEvents = [ { name: 'click', description: 'Callback to invoke on click.' @@ -71,10 +71,10 @@ const InputSwitchEvents = [ ]; module.exports = { - inputswitch: { - name: 'InputSwitch', - description: 'InputSwitch is used to select a boolean value.', - props: InputSwitchProps, - events: InputSwitchEvents + inputotp: { + name: 'InputOtp', + description: 'InputOtp is used to enter one time passwords.', + props: InputOtpProps, + events: InputOtpEvents } }; diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js index 6baa7dec7..1441d3356 100644 --- a/components/doc/codeeditor/templates.js +++ b/components/doc/codeeditor/templates.js @@ -193,10 +193,11 @@ import InlineMessage from 'primevue/inlinemessage'; import Inplace from 'primevue/inplace'; import InputGroup from 'primevue/inputgroup'; import InputGroupAddon from 'primevue/inputgroupaddon'; -import InputSwitch from 'primevue/inputswitch'; -import InputText from 'primevue/inputtext'; import InputMask from 'primevue/inputmask'; import InputNumber from 'primevue/inputnumber'; +import InputOtp from 'primevue/inputotp'; +import InputSwitch from 'primevue/inputswitch'; +import InputText from 'primevue/inputtext'; import Knob from 'primevue/knob'; import Listbox from 'primevue/listbox'; import MegaMenu from 'primevue/megamenu'; @@ -313,6 +314,7 @@ app.component('InputGroupAddon', InputGroupAddon); app.component('InputIcon', InputIcon); app.component('InputMask', InputMask); app.component('InputNumber', InputNumber); +app.component('InputOtp', InputOtp); app.component('InputSwitch', InputSwitch); app.component('InputText', InputText); app.component('Knob', Knob); diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts index 83506dbf9..892c9bcbd 100755 --- a/components/lib/inputotp/InputOtp.d.ts +++ b/components/lib/inputotp/InputOtp.d.ts @@ -1,22 +1,24 @@ /** * - * InputSwitch is used to select a boolean value. + * InputOtp is used to enter one time passwords. * - * [Live Demo](https://www.primevue.org/inputswitch/) + * [Live Demo](https://www.primevue.org/inputotp/) * * @module inputotp * */ +import { VNode } from 'vue'; import { ComponentHooks } from '../basecomponent/BaseComponent'; +import { InputTextPassThroughOptions } from '../inputtext'; import { PassThroughOptions } from '../passthrough'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; -export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined; +export declare type InputOtpPassThroughOptionType = InputOtpPassThroughAttributes | ((options: InputOtpPassThroughMethodOptions) => InputOtpPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface InputSwitchPassThroughMethodOptions { +export interface InputOtpPassThroughMethodOptions { /** * Defines instance. */ @@ -24,23 +26,15 @@ export interface InputSwitchPassThroughMethodOptions { /** * Defines valid properties. */ - props: InputSwitchProps; + props: InputOtpProps; /** * Defines current inline state. */ - state: InputSwitchState; - /** - * Defines current options. - */ - context: InputSwitchContext; + state: InputOtpState; /** * Defines valid attributes. */ attrs: any; - /** - * Defines parent options. - */ - parent: any; /** * Defines passthrough(pt) options in global config. */ @@ -48,22 +42,33 @@ export interface InputSwitchPassThroughMethodOptions { } /** - * Custom passthrough(pt) options. - * @see {@link InputSwitchProps.pt} + * Custom shared passthrough(pt) option method. */ -export interface InputSwitchPassThroughOptions { +export interface InputOtpSharedPassThroughMethodOptions { + /** + * Defines valid properties. + */ + props: InputOtpProps; + /** + * Defines current inline state. + */ + state: InputOtpState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link InputOtpProps.pt} + */ +export interface InputOtpPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: InputSwitchPassThroughOptionType; + root?: InputOtpPassThroughOptionType; /** - * Used to pass attributes to the input's DOM element. + * Used to pass attributes to the InputText component. + * @see {@link InputTextPassThroughOptions} */ - input?: InputSwitchPassThroughOptionType; - /** - * Used to pass attributes to the slider's DOM element. - */ - slider?: InputSwitchPassThroughOptionType; + input?: InputTextPassThroughOptions; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -74,36 +79,70 @@ export interface InputSwitchPassThroughOptions { /** * Custom passthrough attributes for each DOM elements */ -export interface InputSwitchPassThroughAttributes { +export interface InputOtpPassThroughAttributes { [key: string]: any; } /** - * Defines current inline state in InputSwitch component. + * Defines current inline state in InputOtp component. */ -export interface InputSwitchState { - [key: string]: any; -} - -/** - * Defines valid properties in InputSwitch component. - */ -export interface InputSwitchProps { +export interface InputOtpState { /** - * Specifies whether a inputswitch should be checked or not. + * Array of input tokens + */ + tokens: string[] | number[]; +} + +/** + * InputOtp attr options + */ +export interface InputOtpTemplateAttrsOptions { + /** + * Input token value + */ + value: string; +} + +/** + * InputOtp templating events + */ +export interface InputOtpTemplateEvents { + /** + * Input event + * @param {Event} event - Browser event + */ + input: (event: Event) => void; + /** + * Keydown event + * @param {Event} event - Browser event + */ + keydown: (event: Event) => void; + /** + * Focus event + * @param {Event} event - Browser event + */ + focus: (event: Event) => void; + /** + * Blur event + * @param {Event} event - Browser event + */ + blur: (event: Event) => void; + /** + * Paste event + * @param {Event} event - Browser event + */ + paste: (event: Event) => void; +} + +/** + * Defines valid properties in InputOtp component. + */ +export interface InputOtpProps { + /** + * Specifies whether a inputotp should be checked or not. * @defaultValue false */ modelValue?: boolean | string | undefined; - /** - * Value in checked state. - * @defaultValue true - */ - trueValue?: any; - /** - * Value in unchecked state. - * @defaultValue false - */ - falseValue?: any; /** * When present, it specifies that the component should have invalid state style. * @defaultValue false @@ -116,38 +155,38 @@ export interface InputSwitchProps { disabled?: boolean | undefined; /** * When present, it specifies that an input field is read-only. - * @default false + * @defaultValue false */ readonly?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; /** * Index of the element in tabbing order. */ tabindex?: number | undefined; /** - * Identifier of the underlying input element. + * Number of characters to initiate. + * @defaultValue 4 */ - inputId?: string | undefined; + length?: number | undefined; /** - * Style class of the input field. + * Mask pattern. + * @defaultValue false */ - inputClass?: string | object | undefined; + mask?: boolean | undefined; /** - * Inline style of the input field. + * When present, it specifies that an input field is integer-only. + * @defaultValue false */ - inputStyle?: object | undefined; - /** - * Establishes relationships between the component and label(s) where its value should be one or more element IDs. - */ - ariaLabelledby?: string | undefined; - /** - * Establishes a string value that labels the component. - */ - ariaLabel?: string | undefined; + integerOnly?: boolean | undefined; /** * Used to pass attributes to DOM elements inside the component. - * @type {InputSwitchPassThroughOptions} + * @type {InputOtpPassThroughOptions} */ - pt?: PassThrough; + pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} @@ -161,27 +200,36 @@ export interface InputSwitchProps { } /** - * Defines current options in InputSwitch component. + * */ -export interface InputSwitchContext { +export interface InputOtpSlots { /** - * Current checked state of the item as a boolean. - * @defaultValue false + * Default content slot. */ - checked: boolean; - /** - * Current disabled state of the item as a boolean. - * @defaultValue false - */ - disabled: boolean; + default(scope: { + /** + * Events of the component + * @param {number} index - Index of the input field + * @return {InputOtpTemplateEvents} + */ + events: (index: number) => InputOtpTemplateEvents; + /** + * Attributes of the component + * @param {number} index - Index of the input field + * @return {InputOtpTemplateAttrsOptions} + */ + attrs: (index: number) => InputOtpTemplateAttrsOptions; + /** + * Index of the input field + */ + index: number; + }): VNode[]; } -export interface InputSwitchSlots {} - /** - * Defines valid emits in InputSwitch component. + * Defines valid emits in InputOtp component. */ -export interface InputSwitchEmits { +export interface InputOtpEmits { /** * Emitted when the value changes. * @param {boolean} value - New value. @@ -205,23 +253,23 @@ export interface InputSwitchEmits { } /** - * **PrimeVue - InputSwitch** + * **PrimeVue - InputOtp** * - * _InputSwitch is used to select a boolean value._ + * _InputOtp is used to enter one time passwords._ * - * [Live Demo](https://www.primevue.org/inputswitch/) + * [Live Demo](https://www.primevue.org/inputotp/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ -declare class InputSwitch extends ClassComponent {} +declare class InputOtp extends ClassComponent {} declare module '@vue/runtime-core' { interface GlobalComponents { - InputSwitch: GlobalComponentConstructor; + InputOtp: GlobalComponentConstructor; } } -export default InputSwitch; +export default InputOtp; diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue index bb6a7ed1a..7a390d6df 100755 --- a/components/lib/inputotp/InputOtp.vue +++ b/components/lib/inputotp/InputOtp.vue @@ -12,6 +12,7 @@ :disabled="disabled" :invalid="invalid" :tabindex="tabindex" + :unstyled="unstyled" @input="onInput($event, i - 1)" @focus="onFocus($event)" @blur="onBlur($event)" @@ -91,7 +92,7 @@ export default { }); }, moveToPrev(event) { - var prevInput = this.findPrevInput(event.target); + let prevInput = this.findPrevInput(event.target); if (prevInput) { prevInput.focus(); @@ -99,7 +100,7 @@ export default { } }, moveToNext(event) { - var nextInput = this.findNextInput(event.target); + let nextInput = this.findNextInput(event.target); if (nextInput) { nextInput.focus(); @@ -107,12 +108,16 @@ export default { } }, findNextInput(element) { - var nextElement = element.nextElementSibling; + let nextElement = element.nextElementSibling; + + if (!nextElement) return; return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement); }, findPrevInput(element) { - var prevElement = element.previousElementSibling; + let prevElement = element.previousElementSibling; + + if (!prevElement) return; return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement); }, diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js index f1a9db114..89b47d4fe 100644 --- a/components/lib/inputotp/style/InputOtpStyle.js +++ b/components/lib/inputotp/style/InputOtpStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: ({ props }) => ['p-inputotp p-component'], + root: 'p-inputotp p-component', input: 'p-inputotp-input' }; diff --git a/components/lib/inputswitch/InputSwitch.d.ts b/components/lib/inputswitch/InputSwitch.d.ts index b0f1b64fc..c6791e150 100755 --- a/components/lib/inputswitch/InputSwitch.d.ts +++ b/components/lib/inputswitch/InputSwitch.d.ts @@ -25,10 +25,6 @@ export interface InputSwitchPassThroughMethodOptions { * Defines valid properties. */ props: InputSwitchProps; - /** - * Defines current inline state. - */ - state: InputSwitchState; /** * Defines current options. */ @@ -78,13 +74,6 @@ export interface InputSwitchPassThroughAttributes { [key: string]: any; } -/** - * Defines current inline state in InputSwitch component. - */ -export interface InputSwitchState { - [key: string]: any; -} - /** * Defines valid properties in InputSwitch component. */ diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 1257694f1..4aa69edc4 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -31975,10 +31975,10 @@ } }, "inputotp": { - "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)", + "description": "InputOtp is used to enter one time passwords.\n\n[Live Demo](https://www.primevue.org/inputotp/)", "components": { "default": { - "description": "InputSwitch is used to select a boolean value.", + "description": "InputOtp is used to enter one time passwords.", "methods": { "description": "Defines methods that can be accessed by the component's reference.", "values": [] @@ -31991,7 +31991,7 @@ "methodDescription": "Defines methods that can be accessed by the component's reference.", "typeDescription": "Defines the custom types used by the module.", "values": { - "InputSwitchPassThroughMethodOptions": { + "InputOtpPassThroughMethodOptions": { "description": "Custom passthrough(pt) option method.", "relatedProp": "", "props": [ @@ -32007,7 +32007,7 @@ "name": "props", "optional": false, "readonly": false, - "type": "InputSwitchProps", + "type": "InputOtpProps", "default": "", "description": "Defines valid properties." }, @@ -32015,18 +32015,10 @@ "name": "state", "optional": false, "readonly": false, - "type": "InputSwitchState", + "type": "InputOtpState", "default": "", "description": "Defines current inline state." }, - { - "name": "context", - "optional": false, - "readonly": false, - "type": "InputSwitchContext", - "default": "", - "description": "Defines current options." - }, { "name": "attrs", "optional": false, @@ -32035,14 +32027,6 @@ "default": "", "description": "Defines valid attributes." }, - { - "name": "parent", - "optional": false, - "readonly": false, - "type": "any", - "default": "", - "description": "Defines parent options." - }, { "name": "global", "optional": false, @@ -32054,15 +32038,38 @@ ], "methods": [] }, - "InputSwitchPassThroughOptions": { + "InputOtpSharedPassThroughMethodOptions": { + "description": "Custom shared passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "InputOtpProps", + "default": "", + "description": "Defines valid properties." + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "InputOtpState", + "default": "", + "description": "Defines current inline state." + } + ], + "methods": [] + }, + "InputOtpPassThroughOptions": { "description": "Custom passthrough(pt) options.", - "relatedProp": "InputSwitchProps.pt", + "relatedProp": "InputOtpProps.pt", "props": [ { "name": "root", "optional": true, "readonly": false, - "type": "InputSwitchPassThroughOptionType", + "type": "InputOtpPassThroughOptionType", "default": "", "description": "Used to pass attributes to the root's DOM element." }, @@ -32070,17 +32077,9 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputSwitchPassThroughOptionType", + "type": "InputTextPassThroughOptions", "default": "", - "description": "Used to pass attributes to the input's DOM element." - }, - { - "name": "slider", - "optional": true, - "readonly": false, - "type": "InputSwitchPassThroughOptionType", - "default": "", - "description": "Used to pass attributes to the slider's DOM element." + "description": "Used to pass attributes to the InputText component." }, { "name": "hooks", @@ -32093,7 +32092,7 @@ ], "methods": [] }, - "InputSwitchPassThroughAttributes": { + "InputOtpPassThroughAttributes": { "description": "Custom passthrough attributes for each DOM elements", "relatedProp": "", "props": [ @@ -32106,21 +32105,80 @@ ], "methods": [] }, - "InputSwitchState": { - "description": "Defines current inline state in InputSwitch component.", + "InputOtpState": { + "description": "Defines current inline state in InputOtp component.", "relatedProp": "", "props": [ { - "name": "[key: string]", + "name": "tokens", "optional": false, "readonly": false, - "type": "any" + "type": "string[] | number[]", + "default": "", + "description": "Array of input tokens" } ], "methods": [] }, - "InputSwitchProps": { - "description": "Defines valid properties in InputSwitch component.", + "InputOtpTemplateAttrsOptions": { + "description": "InputOtp attr options", + "relatedProp": "", + "props": [ + { + "name": "value", + "optional": false, + "readonly": false, + "type": "string", + "default": "", + "description": "Input token value" + } + ], + "methods": [] + }, + "InputOtpTemplateEvents": { + "description": "InputOtp templating events", + "relatedProp": "", + "props": [ + { + "name": "input", + "optional": false, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "keydown", + "optional": false, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "focus", + "optional": false, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "blur", + "optional": false, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "paste", + "optional": false, + "readonly": false, + "type": "Function", + "default": "" + } + ], + "methods": [] + }, + "InputOtpProps": { + "description": "Defines valid properties in InputOtp component.", "relatedProp": "", "props": [ { @@ -32129,23 +32187,7 @@ "readonly": false, "type": "string | boolean", "default": "false", - "description": "Specifies whether a inputswitch should be checked or not." - }, - { - "name": "trueValue", - "optional": true, - "readonly": false, - "type": "any", - "default": "true", - "description": "Value in checked state." - }, - { - "name": "falseValue", - "optional": true, - "readonly": false, - "type": "any", - "default": "false", - "description": "Value in unchecked state." + "description": "Specifies whether a inputotp should be checked or not." }, { "name": "invalid", @@ -32168,9 +32210,17 @@ "optional": true, "readonly": false, "type": "boolean", - "default": "", + "default": "false", "description": "When present, it specifies that an input field is read-only." }, + { + "name": "variant", + "optional": true, + "readonly": false, + "type": "\"filled\" | \"outlined\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "tabindex", "optional": true, @@ -32180,50 +32230,34 @@ "description": "Index of the element in tabbing order." }, { - "name": "inputId", + "name": "length", "optional": true, "readonly": false, - "type": "string", - "default": "", - "description": "Identifier of the underlying input element." + "type": "number", + "default": "4", + "description": "Number of characters to initiate." }, { - "name": "inputClass", + "name": "mask", "optional": true, "readonly": false, - "type": "string | object", - "default": "", - "description": "Style class of the input field." + "type": "boolean", + "default": "false", + "description": "Mask pattern." }, { - "name": "inputStyle", + "name": "integerOnly", "optional": true, "readonly": false, - "type": "object", - "default": "", - "description": "Inline style of the input field." - }, - { - "name": "ariaLabelledby", - "optional": true, - "readonly": false, - "type": "string", - "default": "", - "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." - }, - { - "name": "ariaLabel", - "optional": true, - "readonly": false, - "type": "string", - "default": "", - "description": "Establishes a string value that labels the component." + "type": "boolean", + "default": "false", + "description": "When present, it specifies that an input field is integer-only." }, { "name": "pt", "optional": true, "readonly": false, - "type": "PassThrough", + "type": "PassThrough", "default": "", "description": "Used to pass attributes to DOM elements inside the component." }, @@ -32246,36 +32280,27 @@ ], "methods": [] }, - "InputSwitchContext": { - "description": "Defines current options in InputSwitch component.", - "relatedProp": "", - "props": [ - { - "name": "checked", - "optional": false, - "readonly": false, - "type": "boolean", - "default": "false", - "description": "Current checked state of the item as a boolean." - }, - { - "name": "disabled", - "optional": false, - "readonly": false, - "type": "boolean", - "default": "false", - "description": "Current disabled state of the item as a boolean." - } - ], - "methods": [] - }, - "InputSwitchSlots": { + "InputOtpSlots": { + "description": "", "relatedProp": "", "props": [], - "methods": [] + "methods": [ + { + "name": "default", + "parameters": [ + { + "name": "scope", + "optional": false, + "type": "{\n \t events: (index: number) ⇒ InputOtpTemplateEvents, // Events of the component\n\t attrs: (index: number) ⇒ InputOtpTemplateAttrsOptions, // Attributes of the component\n \t index: number, // Index of the input field\n }" + } + ], + "returnType": "VNode[]", + "description": "Default content slot." + } + ] }, - "InputSwitchEmits": { - "description": "Defines valid emits in InputSwitch component.", + "InputOtpEmits": { + "description": "Defines valid emits in InputOtp component.", "relatedProp": "", "props": [], "methods": [ @@ -32338,8 +32363,8 @@ "types": { "description": "Defines the custom types used by the module.", "values": { - "InputSwitchPassThroughOptionType": { - "values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined" + "InputOtpPassThroughOptionType": { + "values": "InputOtpPassThroughAttributes | (options: InputOtpPassThroughMethodOptions) => undefined | string | null | undefined" } } } @@ -32440,14 +32465,6 @@ "default": "", "description": "Defines valid properties." }, - { - "name": "state", - "optional": false, - "readonly": false, - "type": "InputSwitchState", - "default": "", - "description": "Defines current inline state." - }, { "name": "context", "optional": false, @@ -32535,19 +32552,6 @@ ], "methods": [] }, - "InputSwitchState": { - "description": "Defines current inline state in InputSwitch component.", - "relatedProp": "", - "props": [ - { - "name": "[key: string]", - "optional": false, - "readonly": false, - "type": "any" - } - ], - "methods": [] - }, "InputSwitchProps": { "description": "Defines valid properties in InputSwitch component.", "relatedProp": "", diff --git a/doc/inputotp/AccessibilityDoc.vue b/doc/inputotp/AccessibilityDoc.vue index 29470c777..78d025d80 100644 --- a/doc/inputotp/AccessibilityDoc.vue +++ b/doc/inputotp/AccessibilityDoc.vue @@ -23,7 +23,11 @@ left arrow - Moves focus to the next previous element. + Moves focus to the previous input element. + + + backspace + Deletes the input and moves focus to the previous input element. diff --git a/doc/inputotp/pt/PTImage.vue b/doc/inputotp/pt/PTImage.vue index 60ede1567..9ac50d6b4 100644 --- a/doc/inputotp/pt/PTImage.vue +++ b/doc/inputotp/pt/PTImage.vue @@ -3,6 +3,6 @@

{{ $attrs.description }}

- +
diff --git a/doc/inputotp/pt/index.vue b/doc/inputotp/pt/index.vue index 584d9a293..797c4ac77 100644 --- a/doc/inputotp/pt/index.vue +++ b/doc/inputotp/pt/index.vue @@ -1,7 +1,7 @@