pull/5323/head
Cagatay Civici 2024-02-22 12:35:29 +03:00
commit 9d8e2cfd65
11 changed files with 307 additions and 259 deletions

View File

@ -1,9 +1,9 @@
const InputSwitchProps = [ const InputOtpProps = [
{ {
name: 'modelValue', name: 'modelValue',
type: 'boolean', type: 'boolean',
default: 'null', default: 'null',
description: 'Specifies whether a inputswitch should be checked or not.' description: 'Specifies whether a inputOtp should be checked or not.'
}, },
{ {
name: 'trueValue', name: 'trueValue',
@ -55,7 +55,7 @@ const InputSwitchProps = [
} }
]; ];
const InputSwitchEvents = [ const InputOtpEvents = [
{ {
name: 'click', name: 'click',
description: 'Callback to invoke on click.' description: 'Callback to invoke on click.'
@ -71,10 +71,10 @@ const InputSwitchEvents = [
]; ];
module.exports = { module.exports = {
inputswitch: { inputotp: {
name: 'InputSwitch', name: 'InputOtp',
description: 'InputSwitch is used to select a boolean value.', description: 'InputOtp is used to enter one time passwords.',
props: InputSwitchProps, props: InputOtpProps,
events: InputSwitchEvents events: InputOtpEvents
} }
}; };

View File

@ -193,10 +193,11 @@ import InlineMessage from 'primevue/inlinemessage';
import Inplace from 'primevue/inplace'; import Inplace from 'primevue/inplace';
import InputGroup from 'primevue/inputgroup'; import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon'; import InputGroupAddon from 'primevue/inputgroupaddon';
import InputSwitch from 'primevue/inputswitch';
import InputText from 'primevue/inputtext';
import InputMask from 'primevue/inputmask'; import InputMask from 'primevue/inputmask';
import InputNumber from 'primevue/inputnumber'; 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 Knob from 'primevue/knob';
import Listbox from 'primevue/listbox'; import Listbox from 'primevue/listbox';
import MegaMenu from 'primevue/megamenu'; import MegaMenu from 'primevue/megamenu';
@ -313,6 +314,7 @@ app.component('InputGroupAddon', InputGroupAddon);
app.component('InputIcon', InputIcon); app.component('InputIcon', InputIcon);
app.component('InputMask', InputMask); app.component('InputMask', InputMask);
app.component('InputNumber', InputNumber); app.component('InputNumber', InputNumber);
app.component('InputOtp', InputOtp);
app.component('InputSwitch', InputSwitch); app.component('InputSwitch', InputSwitch);
app.component('InputText', InputText); app.component('InputText', InputText);
app.component('Knob', Knob); app.component('Knob', Knob);

View File

@ -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 * @module inputotp
* *
*/ */
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent/BaseComponent'; import { ComponentHooks } from '../basecomponent/BaseComponent';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; 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. * Custom passthrough(pt) option method.
*/ */
export interface InputSwitchPassThroughMethodOptions { export interface InputOtpPassThroughMethodOptions {
/** /**
* Defines instance. * Defines instance.
*/ */
@ -24,23 +26,15 @@ export interface InputSwitchPassThroughMethodOptions {
/** /**
* Defines valid properties. * Defines valid properties.
*/ */
props: InputSwitchProps; props: InputOtpProps;
/** /**
* Defines current inline state. * Defines current inline state.
*/ */
state: InputSwitchState; state: InputOtpState;
/**
* Defines current options.
*/
context: InputSwitchContext;
/** /**
* Defines valid attributes. * Defines valid attributes.
*/ */
attrs: any; attrs: any;
/**
* Defines parent options.
*/
parent: any;
/** /**
* Defines passthrough(pt) options in global config. * Defines passthrough(pt) options in global config.
*/ */
@ -48,22 +42,33 @@ export interface InputSwitchPassThroughMethodOptions {
} }
/** /**
* Custom passthrough(pt) options. * Custom shared passthrough(pt) option method.
* @see {@link InputSwitchProps.pt}
*/ */
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. * 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; input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the slider's DOM element.
*/
slider?: InputSwitchPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}
@ -74,36 +79,70 @@ export interface InputSwitchPassThroughOptions {
/** /**
* Custom passthrough attributes for each DOM elements * Custom passthrough attributes for each DOM elements
*/ */
export interface InputSwitchPassThroughAttributes { export interface InputOtpPassThroughAttributes {
[key: string]: any; [key: string]: any;
} }
/** /**
* Defines current inline state in InputSwitch component. * Defines current inline state in InputOtp component.
*/ */
export interface InputSwitchState { export interface InputOtpState {
[key: string]: any;
}
/**
* Defines valid properties in InputSwitch component.
*/
export interface InputSwitchProps {
/** /**
* 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 * @defaultValue false
*/ */
modelValue?: boolean | string | undefined; 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. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false
@ -116,38 +155,38 @@ export interface InputSwitchProps {
disabled?: boolean | undefined; disabled?: boolean | undefined;
/** /**
* When present, it specifies that an input field is read-only. * When present, it specifies that an input field is read-only.
* @default false * @defaultValue false
*/ */
readonly?: boolean | undefined; readonly?: boolean | undefined;
/**
* Specifies the input variant of the component.
* @defaultValue outlined
*/
variant?: 'outlined' | 'filled' | undefined;
/** /**
* Index of the element in tabbing order. * Index of the element in tabbing order.
*/ */
tabindex?: number | undefined; 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; integerOnly?: boolean | 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;
/** /**
* Used to pass attributes to DOM elements inside the component. * Used to pass attributes to DOM elements inside the component.
* @type {InputSwitchPassThroughOptions} * @type {InputOtpPassThroughOptions}
*/ */
pt?: PassThrough<InputSwitchPassThroughOptions>; pt?: PassThrough<InputOtpPassThroughOptions>;
/** /**
* Used to configure passthrough(pt) options of the component. * Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions} * @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. * Default content slot.
* @defaultValue false
*/ */
checked: boolean; default(scope: {
/** /**
* Current disabled state of the item as a boolean. * Events of the component
* @defaultValue false * @param {number} index - Index of the input field
* @return {InputOtpTemplateEvents}
*/ */
disabled: boolean; 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. * Emitted when the value changes.
* @param {boolean} value - New value. * @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) * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
* *
* @group Component * @group Component
* *
*/ */
declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {} declare class InputOtp extends ClassComponent<InputOtpProps, InputOtpSlots, InputOtpEmits> {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
interface GlobalComponents { interface GlobalComponents {
InputSwitch: GlobalComponentConstructor<InputSwitch>; InputOtp: GlobalComponentConstructor<InputOtp>;
} }
} }
export default InputSwitch; export default InputOtp;

View File

@ -12,6 +12,7 @@
:disabled="disabled" :disabled="disabled"
:invalid="invalid" :invalid="invalid"
:tabindex="tabindex" :tabindex="tabindex"
:unstyled="unstyled"
@input="onInput($event, i - 1)" @input="onInput($event, i - 1)"
@focus="onFocus($event)" @focus="onFocus($event)"
@blur="onBlur($event)" @blur="onBlur($event)"
@ -91,7 +92,7 @@ export default {
}); });
}, },
moveToPrev(event) { moveToPrev(event) {
var prevInput = this.findPrevInput(event.target); let prevInput = this.findPrevInput(event.target);
if (prevInput) { if (prevInput) {
prevInput.focus(); prevInput.focus();
@ -99,7 +100,7 @@ export default {
} }
}, },
moveToNext(event) { moveToNext(event) {
var nextInput = this.findNextInput(event.target); let nextInput = this.findNextInput(event.target);
if (nextInput) { if (nextInput) {
nextInput.focus(); nextInput.focus();
@ -107,12 +108,16 @@ export default {
} }
}, },
findNextInput(element) { findNextInput(element) {
var nextElement = element.nextElementSibling; let nextElement = element.nextElementSibling;
if (!nextElement) return;
return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement); return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
}, },
findPrevInput(element) { findPrevInput(element) {
var prevElement = element.previousElementSibling; let prevElement = element.previousElementSibling;
if (!prevElement) return;
return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement); return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
}, },

View File

@ -1,7 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => ['p-inputotp p-component'], root: 'p-inputotp p-component',
input: 'p-inputotp-input' input: 'p-inputotp-input'
}; };

View File

@ -25,10 +25,6 @@ export interface InputSwitchPassThroughMethodOptions {
* Defines valid properties. * Defines valid properties.
*/ */
props: InputSwitchProps; props: InputSwitchProps;
/**
* Defines current inline state.
*/
state: InputSwitchState;
/** /**
* Defines current options. * Defines current options.
*/ */
@ -78,13 +74,6 @@ export interface InputSwitchPassThroughAttributes {
[key: string]: any; [key: string]: any;
} }
/**
* Defines current inline state in InputSwitch component.
*/
export interface InputSwitchState {
[key: string]: any;
}
/** /**
* Defines valid properties in InputSwitch component. * Defines valid properties in InputSwitch component.
*/ */

View File

@ -31975,10 +31975,10 @@
} }
}, },
"inputotp": { "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": { "components": {
"default": { "default": {
"description": "InputSwitch is used to select a boolean value.", "description": "InputOtp is used to enter one time passwords.",
"methods": { "methods": {
"description": "Defines methods that can be accessed by the component's reference.", "description": "Defines methods that can be accessed by the component's reference.",
"values": [] "values": []
@ -31991,7 +31991,7 @@
"methodDescription": "Defines methods that can be accessed by the component's reference.", "methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.", "typeDescription": "Defines the custom types used by the module.",
"values": { "values": {
"InputSwitchPassThroughMethodOptions": { "InputOtpPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.", "description": "Custom passthrough(pt) option method.",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
@ -32007,7 +32007,7 @@
"name": "props", "name": "props",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"type": "InputSwitchProps", "type": "InputOtpProps",
"default": "", "default": "",
"description": "Defines valid properties." "description": "Defines valid properties."
}, },
@ -32015,18 +32015,10 @@
"name": "state", "name": "state",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"type": "InputSwitchState", "type": "InputOtpState",
"default": "", "default": "",
"description": "Defines current inline state." "description": "Defines current inline state."
}, },
{
"name": "context",
"optional": false,
"readonly": false,
"type": "InputSwitchContext",
"default": "",
"description": "Defines current options."
},
{ {
"name": "attrs", "name": "attrs",
"optional": false, "optional": false,
@ -32035,14 +32027,6 @@
"default": "", "default": "",
"description": "Defines valid attributes." "description": "Defines valid attributes."
}, },
{
"name": "parent",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Defines parent options."
},
{ {
"name": "global", "name": "global",
"optional": false, "optional": false,
@ -32054,15 +32038,38 @@
], ],
"methods": [] "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.", "description": "Custom passthrough(pt) options.",
"relatedProp": "InputSwitchProps.pt", "relatedProp": "InputOtpProps.pt",
"props": [ "props": [
{ {
"name": "root", "name": "root",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "InputSwitchPassThroughOptionType", "type": "InputOtpPassThroughOptionType",
"default": "", "default": "",
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
@ -32070,17 +32077,9 @@
"name": "input", "name": "input",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "InputSwitchPassThroughOptionType", "type": "InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>",
"default": "", "default": "",
"description": "Used to pass attributes to the input's DOM element." "description": "Used to pass attributes to the InputText component."
},
{
"name": "slider",
"optional": true,
"readonly": false,
"type": "InputSwitchPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the slider's DOM element."
}, },
{ {
"name": "hooks", "name": "hooks",
@ -32093,7 +32092,7 @@
], ],
"methods": [] "methods": []
}, },
"InputSwitchPassThroughAttributes": { "InputOtpPassThroughAttributes": {
"description": "Custom passthrough attributes for each DOM elements", "description": "Custom passthrough attributes for each DOM elements",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
@ -32106,21 +32105,80 @@
], ],
"methods": [] "methods": []
}, },
"InputSwitchState": { "InputOtpState": {
"description": "Defines current inline state in InputSwitch component.", "description": "Defines current inline state in InputOtp component.",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
{ {
"name": "[key: string]", "name": "tokens",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"type": "any" "type": "string[] | number[]",
"default": "",
"description": "Array of input tokens"
} }
], ],
"methods": [] "methods": []
}, },
"InputSwitchProps": { "InputOtpTemplateAttrsOptions": {
"description": "Defines valid properties in InputSwitch component.", "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": "", "relatedProp": "",
"props": [ "props": [
{ {
@ -32129,23 +32187,7 @@
"readonly": false, "readonly": false,
"type": "string | boolean", "type": "string | boolean",
"default": "false", "default": "false",
"description": "Specifies whether a inputswitch should be checked or not." "description": "Specifies whether a inputotp 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."
}, },
{ {
"name": "invalid", "name": "invalid",
@ -32168,9 +32210,17 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "boolean", "type": "boolean",
"default": "", "default": "false",
"description": "When present, it specifies that an input field is read-only." "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", "name": "tabindex",
"optional": true, "optional": true,
@ -32180,50 +32230,34 @@
"description": "Index of the element in tabbing order." "description": "Index of the element in tabbing order."
}, },
{ {
"name": "inputId", "name": "length",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "number",
"default": "", "default": "4",
"description": "Identifier of the underlying input element." "description": "Number of characters to initiate."
}, },
{ {
"name": "inputClass", "name": "mask",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string | object", "type": "boolean",
"default": "", "default": "false",
"description": "Style class of the input field." "description": "Mask pattern."
}, },
{ {
"name": "inputStyle", "name": "integerOnly",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "object", "type": "boolean",
"default": "", "default": "false",
"description": "Inline style of the input field." "description": "When present, it specifies that an input field is integer-only."
},
{
"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."
}, },
{ {
"name": "pt", "name": "pt",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "PassThrough<InputSwitchPassThroughOptions>", "type": "PassThrough<InputOtpPassThroughOptions>",
"default": "", "default": "",
"description": "Used to pass attributes to DOM elements inside the component." "description": "Used to pass attributes to DOM elements inside the component."
}, },
@ -32246,36 +32280,27 @@
], ],
"methods": [] "methods": []
}, },
"InputSwitchContext": { "InputOtpSlots": {
"description": "Defines current options in InputSwitch component.", "description": "",
"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": {
"relatedProp": "", "relatedProp": "",
"props": [], "props": [],
"methods": [] "methods": [
{
"name": "default",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">events</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateEvents</span>, <span class=\"doc-option-parameter-type\">// Events of the component</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">attrs</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateAttrsOptions</span>, <span class=\"doc-option-parameter-type\">// Attributes of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the input field</span>\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Default content slot."
}
]
}, },
"InputSwitchEmits": { "InputOtpEmits": {
"description": "Defines valid emits in InputSwitch component.", "description": "Defines valid emits in InputOtp component.",
"relatedProp": "", "relatedProp": "",
"props": [], "props": [],
"methods": [ "methods": [
@ -32338,8 +32363,8 @@
"types": { "types": {
"description": "Defines the custom types used by the module.", "description": "Defines the custom types used by the module.",
"values": { "values": {
"InputSwitchPassThroughOptionType": { "InputOtpPassThroughOptionType": {
"values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined" "values": "InputOtpPassThroughAttributes | (options: InputOtpPassThroughMethodOptions) => undefined | string | null | undefined"
} }
} }
} }
@ -32440,14 +32465,6 @@
"default": "", "default": "",
"description": "Defines valid properties." "description": "Defines valid properties."
}, },
{
"name": "state",
"optional": false,
"readonly": false,
"type": "InputSwitchState",
"default": "",
"description": "Defines current inline state."
},
{ {
"name": "context", "name": "context",
"optional": false, "optional": false,
@ -32535,19 +32552,6 @@
], ],
"methods": [] "methods": []
}, },
"InputSwitchState": {
"description": "Defines current inline state in InputSwitch component.",
"relatedProp": "",
"props": [
{
"name": "[key: string]",
"optional": false,
"readonly": false,
"type": "any"
}
],
"methods": []
},
"InputSwitchProps": { "InputSwitchProps": {
"description": "Defines valid properties in InputSwitch component.", "description": "Defines valid properties in InputSwitch component.",
"relatedProp": "", "relatedProp": "",

View File

@ -23,7 +23,11 @@
</tr> </tr>
<tr> <tr>
<td><i>left arrow</i></td> <td><i>left arrow</i></td>
<td>Moves focus to the next previous element.</td> <td>Moves focus to the previous input element.</td>
</tr>
<tr>
<td><i>backspace</i></td>
<td>Deletes the input and moves focus to the previous input element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -3,6 +3,6 @@
<p>{{ $attrs.description }}</p> <p>{{ $attrs.description }}</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" /> <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div> </div>
</template> </template>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>InputSwitch Pass Through</h1> <h1>InputOtp Pass Through</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -23,10 +23,10 @@ export default {
component: PTImage component: PTImage
}, },
{ {
id: 'pt.doc.inputswitch', id: 'pt.doc.inputotp',
label: 'InputSwitch PT Options', label: 'InputOtp PT Options',
component: DocApiTable, component: DocApiTable,
data: getPTOption('InputSwitch') data: getPTOption('InputOtp')
} }
] ]
}; };

View File

@ -12,16 +12,12 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-inputswitch</td> <td>p-inputotp</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-inputswitch-checked</td> <td>p-inputotp-input</td>
<td>Container element in active state.</td> <td>Input element of the component.</td>
</tr>
<tr>
<td>p-inputswitch-slider</td>
<td>Slider element behind the handle.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>