Merge branch 'master' of https://github.com/primefaces/primevue
commit
9d8e2cfd65
|
@ -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
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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) ⇒ 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) ⇒ 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": "",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue