vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Initiated InputOtp

pull/5323/head
Cagatay Civici 2024-02-21 21:38:16 +03:00
parent c555e258c0
commit 067da063a8
102 changed files with 2228 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
api-generator/components/inputotp.js Normal file
View File

@ -0,0 +1,80 @@
const InputSwitchProps = [
{
name: 'modelValue',
type: 'boolean',
default: 'null',
description: 'Specifies whether a inputswitch should be checked or not.'
},
{
name: 'trueValue',
type: 'any',
default: 'null',
description: 'Value in checked state.'
},
{
name: 'falseValue',
type: 'any',
default: 'null',
description: 'Value in unchecked state.'
},
{
name: 'inputId',
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'inputStyle',
type: 'object',
default: 'null',
description: 'Inline style of the input field.'
},
{
name: 'inputClass',
type: 'string | object',
default: 'null',
description: 'Style class of the input field.'
},
{
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',
type: 'boolean',
default: 'false',
description: 'When enabled, it removes component related styles in the core.'
}
];
const InputSwitchEvents = [
{
name: 'click',
description: 'Callback to invoke on click.'
},
{
name: 'change',
description: 'Callback to invoke on value change.'
},
{
name: 'input',
description: 'Callback to invoke on value change.'
}
];
module.exports = {
inputswitch: {
name: 'InputSwitch',
description: 'InputSwitch is used to select a boolean value.',
props: InputSwitchProps,
events: InputSwitchEvents
}
};

5
assets/menu/menu.json
View File

@ -115,6 +115,11 @@
"name": "InputNumber",
"to": "/inputnumber"
},
{
"name": "InputOtp",
"to": "/inputotp",
"badge": "NEW"
},
{
"name": "InputSwitch",
"to": "/inputswitch"

53
components/lib/inputotp/BaseInputOtp.vue Normal file
View File

@ -0,0 +1,53 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import InputOtpStyle from 'primevue/inputotp/style';
export default {
name: 'BaseInputOtp',
extends: BaseComponent,
props: {
modelValue: {
type: null,
default: false
},
invalid: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
variant: {
type: String,
default: null
},
tabindex: {
type: Number,
default: null
},
length: {
type: Number,
default: 4
},
mask: {
type: Boolean,
default: false
},
integerOnly: {
type: Boolean,
default: false
}
},
style: InputOtpStyle,
provide() {
return {
$parentInstance: this
};
}
};
</script>

227
components/lib/inputotp/InputOtp.d.ts vendored Executable file
View File

@ -0,0 +1,227 @@
/**
*
* InputSwitch is used to select a boolean value.
*
* [Live Demo](https://www.primevue.org/inputswitch/)
*
* @module inputotp
*
*/
import { ComponentHooks } from '../basecomponent/BaseComponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputSwitchPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: InputSwitchProps;
/**
* Defines current inline state.
*/
state: InputSwitchState;
/**
* Defines current options.
*/
context: InputSwitchContext;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link InputSwitchProps.pt}
*/
export interface InputSwitchPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
*/
input?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the slider's DOM element.
*/
slider?: InputSwitchPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
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.
*/
export interface InputSwitchProps {
/**
* Specifies whether a inputswitch 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
*/
invalid?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* When present, it specifies that an input field is read-only.
* @default false
*/
readonly?: boolean | undefined;
/**
* Index of the element in tabbing order.
*/
tabindex?: number | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* Style class of the input field.
*/
inputClass?: string | object | undefined;
/**
* Inline style of the input field.
*/
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;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {InputSwitchPassThroughOptions}
*/
pt?: PassThrough<InputSwitchPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines current options in InputSwitch component.
*/
export interface InputSwitchContext {
/**
* Current checked state of the item as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
export interface InputSwitchSlots {}
/**
* Defines valid emits in InputSwitch component.
*/
export interface InputSwitchEmits {
/**
* Emitted when the value changes.
* @param {boolean} value - New value.
*/
'update:modelValue'(value: boolean): void;
/**
* Callback to invoke on value change.
* @param {Event} event - Browser event.
*/
change(event: Event): void;
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
focus(event: Event): void;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
blur(event: Event): void;
}
/**
* **PrimeVue - InputSwitch**
*
* _InputSwitch is used to select a boolean value._
*
* [Live Demo](https://www.primevue.org/inputswitch/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*
*/
declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
InputSwitch: GlobalComponentConstructor<InputSwitch>;
}
}
export default InputSwitch;

20
components/lib/inputotp/InputOtp.spec.js Normal file
View File

@ -0,0 +1,20 @@
import { mount } from '@vue/test-utils';
import InputSwitch from './InputSwitch.vue';
describe('InputSwitch.vue', () => {
it('should exist', async () => {
const wrapper = mount(InputSwitch);
expect(wrapper.find('.p-inputswitch.p-component').exists()).toBe(true);
expect(wrapper.find('.p-inputswitch-slider').exists()).toBe(true);
await wrapper.vm.onChange({});
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
await wrapper.setProps({ modelValue: true });
expect(wrapper.vm.checked).toBe(true);
expect(wrapper.find('.p-inputswitch').classes()).toContain('p-highlight');
});
});

155
components/lib/inputotp/InputOtp.vue Executable file
View File

@ -0,0 +1,155 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<OtpInputText
v-for="i in length"
:key="i"
v-model="tokens[i - 1]"
:type="inputType"
:class="cx('input')"
maxlength="1"
:inputmode="inputMode"
@input="onInput"
@focus="onFocus"
@blur="onBlur"
@paste="onPaste"
@keydown="onKeyDown($event, i - 1)"
:pt="ptm('input')"
/>
</div>
</template>
<script>
import InputText from 'primevue/inputtext';
import BaseInputOtp from './BaseInputOtp.vue';
export default {
name: 'InputOtp',
extends: BaseInputOtp,
inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur'],
data() {
return {
tokens: []
};
},
watch: {
modelValue: {
immediate: true,
handler(newValue) {
this.tokens = newValue ? newValue.split('') : new Array(this.length);
}
}
},
methods: {
getPTOptions(key) {
const _ptm = key === 'root' ? this.ptmi : this.ptm;
return _ptm(key, {
context: {
checked: this.checked,
disabled: this.disabled
}
});
},
onInput(event) {
this.moveToNext(event);
this.updateModel(event);
},
updateModel(event) {
const newValue = this.tokens.join('');
this.$emit('update:modelValue', newValue);
this.$emit('change', {
originalEvent: event,
value: newValue
});
},
moveToPrev(event) {
var prevElement = event.target.previousElementSibling;
if (prevElement) {
prevElement.focus();
prevElement.select();
}
},
moveToNext(event) {
var nextElement = event.target.nextElementSibling;
if (nextElement) {
nextElement.focus();
nextElement.select();
}
},
onFocus(event) {
event.target.select();
this.$emit('focus', event);
},
onBlur(event) {
this.$emit('blur', event);
},
onKeyDown(event, index) {
const keyCode = event.keyCode;
switch (keyCode) {
case 37:
this.moveToPrev(event);
event.preventDefault();
break;
case 38:
case 40:
event.preventDefault();
break;
case 39:
this.moveToNext(event);
event.preventDefault();
break;
case 8:
event.preventDefault();
this.tokens[index] = '';
this.moveToPrev(event);
this.updateModel(event);
break;
default:
if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
event.preventDefault();
}
break;
}
},
onPaste(event) {
let paste = event.clipboardData.getData('text');
if (paste.length) {
let pastedCode = paste.substring(0, this.length + 1);
if (!this.isIntegerOnly || !isNaN(pastedCode)) {
this.tokens = pastedCode.split('');
this.updateModel(event);
}
}
event.preventDefault();
}
},
computed: {
inputMode() {
return this.integerOnly ? 'number' : 'text';
},
inputType() {
return this.mask ? 'password' : 'text';
}
},
components: {
OtpInputText: InputText
}
};
</script>

9
components/lib/inputotp/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"main": "./inputotp.cjs.js",
"module": "./inputotp.esm.js",
"unpkg": "./inputotp.min.js",
"types": "./inputotp.d.ts",
"browser": {
"./sfc": "./inputotp.vue"
}
}

3
components/lib/inputotp/style/InputOtpStyle.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
import { BaseStyle } from '../../base/style/BaseStyle';
export interface InputOtpStyle extends BaseStyle {}

11
components/lib/inputotp/style/InputOtpStyle.js Normal file
View File

@ -0,0 +1,11 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ props }) => ['p-inputotp p-component'],
input: 'p-inputotp-input'
};
export default BaseStyle.extend({
name: 'inputotp',
classes
});

6
components/lib/inputotp/style/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./inputotpstyle.cjs.js",
"module": "./inputotpstyle.esm.js",
"unpkg": "./inputotpstyle.min.js",
"types": "./inputotpstyle.d.ts"
}

431
doc/common/apidoc/index.json
View File

@ -5418,7 +5418,7 @@
}
],
"methods": [],
"extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
"extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
}
}
}
@ -31974,6 +31974,435 @@
}
}
},
"inputotp": {
"description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
"components": {
"default": {
"description": "InputSwitch is used to select a boolean value.",
"methods": {
"description": "Defines methods that can be accessed by the component's reference.",
"values": []
}
}
},
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"eventDescription": "Defines the custom events used by the component's emit.",
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"InputSwitchPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "instance",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Defines instance."
},
{
"name": "props",
"optional": false,
"readonly": false,
"type": "InputSwitchProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "InputSwitchState",
"default": "",
"description": "Defines current inline state."
},
{
"name": "context",
"optional": false,
"readonly": false,
"type": "InputSwitchContext",
"default": "",
"description": "Defines current options."
},
{
"name": "attrs",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Defines valid attributes."
},
{
"name": "parent",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Defines parent options."
},
{
"name": "global",
"optional": false,
"readonly": false,
"type": "undefined | object",
"default": "",
"description": "Defines passthrough(pt) options in global config."
}
],
"methods": []
},
"InputSwitchPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "InputSwitchProps.pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "InputSwitchPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "input",
"optional": true,
"readonly": false,
"type": "InputSwitchPassThroughOptionType",
"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."
},
{
"name": "hooks",
"optional": true,
"readonly": false,
"type": "ComponentHooks",
"default": "",
"description": "Used to manage all lifecycle hooks."
}
],
"methods": []
},
"InputSwitchPassThroughAttributes": {
"description": "Custom passthrough attributes for each DOM elements",
"relatedProp": "",
"props": [
{
"name": "[key: string]",
"optional": false,
"readonly": false,
"type": "any"
}
],
"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": "",
"props": [
{
"name": "modelValue",
"optional": true,
"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."
},
{
"name": "invalid",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should have invalid state style."
},
{
"name": "disabled",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "readonly",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "",
"description": "When present, it specifies that an input field is read-only."
},
{
"name": "tabindex",
"optional": true,
"readonly": false,
"type": "number",
"default": "",
"description": "Index of the element in tabbing order."
},
{
"name": "inputId",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Identifier of the underlying input element."
},
{
"name": "inputClass",
"optional": true,
"readonly": false,
"type": "string | object",
"default": "",
"description": "Style class of the input field."
},
{
"name": "inputStyle",
"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."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "PassThrough<InputSwitchPassThroughOptions>",
"default": "",
"description": "Used to pass attributes to DOM elements inside the component."
},
{
"name": "ptOptions",
"optional": true,
"readonly": false,
"type": "PassThroughOptions",
"default": "",
"description": "Used to configure passthrough(pt) options of the component."
},
{
"name": "unstyled",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "When enabled, it removes component related styles in the core."
}
],
"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": {
"relatedProp": "",
"props": [],
"methods": []
},
"InputSwitchEmits": {
"description": "Defines valid emits in InputSwitch component.",
"relatedProp": "",
"props": [],
"methods": [
{
"name": "update:modelValue",
"parameters": [
{
"name": "value",
"optional": false,
"type": "boolean",
"description": "New value."
}
],
"returnType": "void",
"description": "Emitted when the value changes."
},
{
"name": "change",
"parameters": [
{
"name": "event",
"optional": false,
"type": "Event",
"description": "Browser event."
}
],
"returnType": "void",
"description": "Callback to invoke on value change."
},
{
"name": "focus",
"parameters": [
{
"name": "event",
"optional": false,
"type": "Event",
"description": "Browser event."
}
],
"returnType": "void",
"description": "Callback to invoke when the component receives focus."
},
{
"name": "blur",
"parameters": [
{
"name": "event",
"optional": false,
"type": "Event",
"description": "Browser event."
}
],
"returnType": "void",
"description": "Callback to invoke when the component loses focus."
}
]
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"InputSwitchPassThroughOptionType": {
"values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
}
}
}
},
"inputotp/style/InputOtpStyle": {
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"eventDescription": "Defines the custom events used by the component's emit.",
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"InputOtpStyle": {
"relatedProp": "",
"props": [
{
"name": "name",
"optional": true,
"readonly": false,
"type": "string",
"default": ""
},
{
"name": "css",
"optional": true,
"readonly": false,
"type": "string",
"default": ""
},
{
"name": "classes",
"optional": true,
"readonly": false,
"type": "object",
"default": ""
},
{
"name": "inlineStyles",
"optional": true,
"readonly": false,
"type": "object",
"default": ""
},
{
"name": "loadStyle",
"optional": true,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "getStyleSheet",
"optional": true,
"readonly": false,
"type": "Function",
"default": ""
}
],
"methods": [],
"extendedTypes": "BaseStyle"
}
}
}
},
"inputswitch": {
"description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
"components": {

32
doc/inputotp/AccessibilityDoc.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>Input OTP uses a set of InputText components, refer to the <NuxtLink to="/inputtext">InputText</NuxtLink> component for more information about the screen reader support.</p>
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the input otp.</td>
</tr>
<tr>
<td><i>right arrow</i></td>
<td>Moves focus to the next input element.</td>
</tr>
<tr>
<td><i>left arrow</i></td>
<td>Moves focus to the next previous element.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>

54
doc/inputotp/BasicDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Two-way value binding is defined using <i>v-model</i>. The number of characters is defined with the <i>length</i> property, which is set to 4 by default.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputOtp v-model="value" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputOtp v-model="value" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

18
doc/inputotp/ImportDoc.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import InputOtp from 'primevue/inputotp';
`
}
};
}
};
</script>

54
doc/inputotp/IntegerOnlyDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>integerOnly</i> is present, only integers can be accepted as input.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputOtp v-model="value" integerOnly />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputOtp v-model="value" integerOnly />
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value" integerOnly />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value" integerOnly />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

54
doc/inputotp/MaskDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Enable the <i>mask</i> option to hide the values in the input fields.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputOtp v-model="value" mask />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputOtp v-model="value" mask />
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value" mask />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value" mask />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

8
doc/inputotp/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" />
</div>
</template>

35
doc/inputotp/pt/index.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>InputSwitch Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.inputswitch',
label: 'InputSwitch PT Options',
component: DocApiTable,
data: getPTOption('InputSwitch')
}
]
};
}
};
</script>

29
doc/inputotp/theming/StyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-inputswitch</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-inputswitch-checked</td>
<td>Container element in active state.</td>
</tr>
<tr>
<td>p-inputswitch-slider</td>
<td>Slider element behind the handle.</td>
</tr>
</tbody>
</table>
</div>
</template>

6
doc/inputotp/theming/TailwindDoc.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
Tailwind CSS.
</DocSectionText>
</template>

40
doc/inputotp/theming/index.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>InputSwitch Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

1
modules/nuxt-primevue/runtime/core/components/index.js
View File

@ -14,6 +14,7 @@ const form = [
'InputIcon',
'InputMask',
'InputNumber',
'InputOtp',
'InputSwitch',
'InputText',
'Knob',

1
nuxt-vite.config.js
View File

@ -56,6 +56,7 @@ const STYLE_ALIAS = {
'primevue/inputicon/style': path.resolve(__dirname, './components/lib/inputicon/style/InputIconStyle.js'),
'primevue/inputmask/style': path.resolve(__dirname, './components/lib/inputmask/style/InputMaskStyle.js'),
'primevue/inputnumber/style': path.resolve(__dirname, './components/lib/inputnumber/style/InputNumberStyle.js'),
'primevue/inputotp/style': path.resolve(__dirname, './components/lib/inputotp/style/InputOtpStyle.js'),
'primevue/inputswitch/style': path.resolve(__dirname, './components/lib/inputswitch/style/InputSwitchStyle.js'),
'primevue/inputtext/style': path.resolve(__dirname, './components/lib/inputtext/style/InputTextStyle.js'),
'primevue/knob/style': path.resolve(__dirname, './components/lib/knob/style/KnobStyle.js'),

49
pages/inputotp/index.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<DocComponent title="Vue Otp Input Component" header="InputOtp" description="Input Otp is used to enter one time passwords." :componentDocs="docs" :apiDocs="['InputOtp']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
import PTComponent from '@/doc/inputotp/pt/index.vue';
import ThemingDoc from '@/doc/inputotp/theming/index.vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'mask',
label: 'Mask',
component: MaskDoc
},
{
id: 'integeronly',
label: 'Integer Only',
component: IntegerOnlyDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};
</script>

11
public/themes/arya-blue/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/arya-green/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/arya-orange/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/arya-purple/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-amber/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-blue/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-cyan/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-green/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-indigo/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-lime/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-noir/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-pink/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-purple/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-dark-teal/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-amber/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-blue/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-cyan/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-green/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-indigo/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-lime/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-noir/theme.css
View File

@ -1738,6 +1738,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-pink/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-purple/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/aura-light-teal/theme.css
View File

@ -1734,6 +1734,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/bootstrap4-light-blue/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/bootstrap4-light-purple/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/fluent-light/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-amber/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-blue/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-cyan/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-green/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-indigo/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-pink/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-purple/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-dark-teal/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-amber/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-blue/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-cyan/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-green/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-indigo/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-pink/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-purple/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/lara-light-teal/theme.css
View File

@ -1732,6 +1732,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/luna-amber/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/luna-blue/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/luna-green/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/luna-pink/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/md-dark-deeppurple/theme.css
View File

@ -1738,6 +1738,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 3rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/md-dark-indigo/theme.css
View File

@ -1738,6 +1738,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 3rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/md-light-deeppurple/theme.css
View File

@ -1737,6 +1737,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 3rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/md-light-indigo/theme.css
View File

@ -1737,6 +1737,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 3rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -1738,6 +1738,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/mdc-dark-indigo/theme.css
View File

@ -1738,6 +1738,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/mdc-light-deeppurple/theme.css
View File

@ -1737,6 +1737,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/mdc-light-indigo/theme.css
View File

@ -1737,6 +1737,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/mira/theme.css
View File

@ -1741,6 +1741,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/nano/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/nova-accent/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/nova-alt/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/nova-vue/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/nova/theme.css
View File

@ -1717,6 +1717,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/rhea/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 1.858rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/saga-blue/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/saga-green/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/saga-orange/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/saga-purple/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/soho-dark/theme.css
View File

@ -1737,6 +1737,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/soho-light/theme.css
View File

@ -1737,6 +1737,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/tailwind-light/theme.css
View File

@ -1748,6 +1748,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/vela-blue/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/vela-green/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/vela-orange/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/vela-purple/theme.css
View File

@ -1713,6 +1713,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

11
public/themes/viva-dark/theme.css
View File

@ -1745,6 +1745,17 @@
margin-top: -0.5rem;
}
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputgroup {
display: flex;
align-items: stretch;

Some files were not shown because too many files have changed in this diff Show More