diff --git a/api-generator/components/inputotp.js b/api-generator/components/inputotp.js new file mode 100644 index 000000000..c4a86f705 --- /dev/null +++ b/api-generator/components/inputotp.js @@ -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 + } +}; diff --git a/assets/menu/menu.json b/assets/menu/menu.json index ce32aa7a0..f0dc6cc2e 100644 --- a/assets/menu/menu.json +++ b/assets/menu/menu.json @@ -115,6 +115,11 @@ "name": "InputNumber", "to": "/inputnumber" }, + { + "name": "InputOtp", + "to": "/inputotp", + "badge": "NEW" + }, { "name": "InputSwitch", "to": "/inputswitch" diff --git a/components/lib/inputotp/BaseInputOtp.vue b/components/lib/inputotp/BaseInputOtp.vue new file mode 100644 index 000000000..b05b42582 --- /dev/null +++ b/components/lib/inputotp/BaseInputOtp.vue @@ -0,0 +1,53 @@ + diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts new file mode 100755 index 000000000..83506dbf9 --- /dev/null +++ b/components/lib/inputotp/InputOtp.d.ts @@ -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; + /** + * 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 {} + +declare module '@vue/runtime-core' { + interface GlobalComponents { + InputSwitch: GlobalComponentConstructor; + } +} + +export default InputSwitch; diff --git a/components/lib/inputotp/InputOtp.spec.js b/components/lib/inputotp/InputOtp.spec.js new file mode 100644 index 000000000..df8f16fc5 --- /dev/null +++ b/components/lib/inputotp/InputOtp.spec.js @@ -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'); + }); +}); diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue new file mode 100755 index 000000000..9522cb48d --- /dev/null +++ b/components/lib/inputotp/InputOtp.vue @@ -0,0 +1,155 @@ + + + diff --git a/components/lib/inputotp/package.json b/components/lib/inputotp/package.json new file mode 100644 index 000000000..39b0a1db3 --- /dev/null +++ b/components/lib/inputotp/package.json @@ -0,0 +1,9 @@ +{ + "main": "./inputotp.cjs.js", + "module": "./inputotp.esm.js", + "unpkg": "./inputotp.min.js", + "types": "./inputotp.d.ts", + "browser": { + "./sfc": "./inputotp.vue" + } +} diff --git a/components/lib/inputotp/style/InputOtpStyle.d.ts b/components/lib/inputotp/style/InputOtpStyle.d.ts new file mode 100644 index 000000000..c52582775 --- /dev/null +++ b/components/lib/inputotp/style/InputOtpStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style/BaseStyle'; + +export interface InputOtpStyle extends BaseStyle {} diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js new file mode 100644 index 000000000..f1a9db114 --- /dev/null +++ b/components/lib/inputotp/style/InputOtpStyle.js @@ -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 +}); diff --git a/components/lib/inputotp/style/package.json b/components/lib/inputotp/style/package.json new file mode 100644 index 000000000..47e678339 --- /dev/null +++ b/components/lib/inputotp/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./inputotpstyle.cjs.js", + "module": "./inputotpstyle.esm.js", + "unpkg": "./inputotpstyle.min.js", + "types": "./inputotpstyle.d.ts" +} diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 44c59e757..1257694f1 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -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", + "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": { diff --git a/doc/inputotp/AccessibilityDoc.vue b/doc/inputotp/AccessibilityDoc.vue new file mode 100644 index 000000000..29470c777 --- /dev/null +++ b/doc/inputotp/AccessibilityDoc.vue @@ -0,0 +1,32 @@ + diff --git a/doc/inputotp/BasicDoc.vue b/doc/inputotp/BasicDoc.vue new file mode 100644 index 000000000..ac72aad11 --- /dev/null +++ b/doc/inputotp/BasicDoc.vue @@ -0,0 +1,54 @@ + + + diff --git a/doc/inputotp/ImportDoc.vue b/doc/inputotp/ImportDoc.vue new file mode 100644 index 000000000..6c589aa09 --- /dev/null +++ b/doc/inputotp/ImportDoc.vue @@ -0,0 +1,18 @@ + + + diff --git a/doc/inputotp/IntegerOnlyDoc.vue b/doc/inputotp/IntegerOnlyDoc.vue new file mode 100644 index 000000000..55a525e79 --- /dev/null +++ b/doc/inputotp/IntegerOnlyDoc.vue @@ -0,0 +1,54 @@ + + + diff --git a/doc/inputotp/MaskDoc.vue b/doc/inputotp/MaskDoc.vue new file mode 100644 index 000000000..153ad36b4 --- /dev/null +++ b/doc/inputotp/MaskDoc.vue @@ -0,0 +1,54 @@ + + + diff --git a/doc/inputotp/pt/PTImage.vue b/doc/inputotp/pt/PTImage.vue new file mode 100644 index 000000000..60ede1567 --- /dev/null +++ b/doc/inputotp/pt/PTImage.vue @@ -0,0 +1,8 @@ + diff --git a/doc/inputotp/pt/index.vue b/doc/inputotp/pt/index.vue new file mode 100644 index 000000000..584d9a293 --- /dev/null +++ b/doc/inputotp/pt/index.vue @@ -0,0 +1,35 @@ + + + diff --git a/doc/inputotp/theming/StyledDoc.vue b/doc/inputotp/theming/StyledDoc.vue new file mode 100644 index 000000000..5df2ea33a --- /dev/null +++ b/doc/inputotp/theming/StyledDoc.vue @@ -0,0 +1,29 @@ + diff --git a/doc/inputotp/theming/TailwindDoc.vue b/doc/inputotp/theming/TailwindDoc.vue new file mode 100644 index 000000000..fe4aadc26 --- /dev/null +++ b/doc/inputotp/theming/TailwindDoc.vue @@ -0,0 +1,6 @@ + diff --git a/doc/inputotp/theming/index.vue b/doc/inputotp/theming/index.vue new file mode 100644 index 000000000..b9c44bb04 --- /dev/null +++ b/doc/inputotp/theming/index.vue @@ -0,0 +1,40 @@ + + + diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js index 037a7c5ff..feca2c2d4 100644 --- a/modules/nuxt-primevue/runtime/core/components/index.js +++ b/modules/nuxt-primevue/runtime/core/components/index.js @@ -14,6 +14,7 @@ const form = [ 'InputIcon', 'InputMask', 'InputNumber', + 'InputOtp', 'InputSwitch', 'InputText', 'Knob', diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 60a8f403f..d7ca8ef78 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -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'), diff --git a/pages/inputotp/index.vue b/pages/inputotp/index.vue new file mode 100644 index 000000000..53fbc89d0 --- /dev/null +++ b/pages/inputotp/index.vue @@ -0,0 +1,49 @@ + + + diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index a5223b08d..478404e6c 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -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; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 7278119d3..0377f8390 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -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; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a853cb151..cc9da0f85 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -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; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index c2965363d..e239d10d1 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -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; diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css index 9de6b57cb..c25e3a03c 100644 --- a/public/themes/aura-dark-amber/theme.css +++ b/public/themes/aura-dark-amber/theme.css @@ -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; diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css index 08822ee98..9e925cef9 100644 --- a/public/themes/aura-dark-blue/theme.css +++ b/public/themes/aura-dark-blue/theme.css @@ -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; diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css index 22b7fa082..02e2231c0 100644 --- a/public/themes/aura-dark-cyan/theme.css +++ b/public/themes/aura-dark-cyan/theme.css @@ -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; diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css index f0399e3cb..b6fd391c8 100644 --- a/public/themes/aura-dark-green/theme.css +++ b/public/themes/aura-dark-green/theme.css @@ -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; diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css index 6ec354216..42892e700 100644 --- a/public/themes/aura-dark-indigo/theme.css +++ b/public/themes/aura-dark-indigo/theme.css @@ -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; diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css index 3e834d596..3df7cdc87 100644 --- a/public/themes/aura-dark-lime/theme.css +++ b/public/themes/aura-dark-lime/theme.css @@ -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; diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css index a4f41924f..63015b3ea 100644 --- a/public/themes/aura-dark-noir/theme.css +++ b/public/themes/aura-dark-noir/theme.css @@ -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; diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css index c95143f6f..df4b5fbe5 100644 --- a/public/themes/aura-dark-pink/theme.css +++ b/public/themes/aura-dark-pink/theme.css @@ -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; diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css index 27935ca85..9e0c4daba 100644 --- a/public/themes/aura-dark-purple/theme.css +++ b/public/themes/aura-dark-purple/theme.css @@ -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; diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css index 117fd4225..ce1c3f1c5 100644 --- a/public/themes/aura-dark-teal/theme.css +++ b/public/themes/aura-dark-teal/theme.css @@ -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; diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css index ec09b0414..2a25b10c0 100644 --- a/public/themes/aura-light-amber/theme.css +++ b/public/themes/aura-light-amber/theme.css @@ -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; diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css index 1cd094f43..1c2463f99 100644 --- a/public/themes/aura-light-blue/theme.css +++ b/public/themes/aura-light-blue/theme.css @@ -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; diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css index ac0d3fb7e..68e9ce855 100644 --- a/public/themes/aura-light-cyan/theme.css +++ b/public/themes/aura-light-cyan/theme.css @@ -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; diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css index 9c894b6c0..1f3e32da1 100644 --- a/public/themes/aura-light-green/theme.css +++ b/public/themes/aura-light-green/theme.css @@ -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; diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css index bd07b09b8..56deed7de 100644 --- a/public/themes/aura-light-indigo/theme.css +++ b/public/themes/aura-light-indigo/theme.css @@ -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; diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css index 6784b63d4..5dca643a5 100644 --- a/public/themes/aura-light-lime/theme.css +++ b/public/themes/aura-light-lime/theme.css @@ -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; diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css index 08513f60c..b89da65bc 100644 --- a/public/themes/aura-light-noir/theme.css +++ b/public/themes/aura-light-noir/theme.css @@ -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; diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css index eca62a30b..5fefcea80 100644 --- a/public/themes/aura-light-pink/theme.css +++ b/public/themes/aura-light-pink/theme.css @@ -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; diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css index e25b41207..4ca9f3d5f 100644 --- a/public/themes/aura-light-purple/theme.css +++ b/public/themes/aura-light-purple/theme.css @@ -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; diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css index f124a432f..e536f67b2 100644 --- a/public/themes/aura-light-teal/theme.css +++ b/public/themes/aura-light-teal/theme.css @@ -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; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 301eb4d43..bc9ea3f17 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -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; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 37002f762..4824e6ba8 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -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; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 1aec877dd..79ff17a40 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -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; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index bae0b1032..a8c135d9d 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -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; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 91bdd9f4d..25d5e9798 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -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; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index e03e306df..ae61b1003 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -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; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index f11813d2e..6971ec8eb 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -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; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 4017009a4..9a76c1572 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -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; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 71c7d7fcf..a15eac126 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -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; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 81c2cdb31..4efb41778 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -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; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 225855982..6c9698607 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -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; diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index 17931a10b..a6d3b4ac4 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -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; diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 06e92b5a8..8d412eb01 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -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; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index a1846e97b..1b63ab011 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -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; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index c52a4f27f..260b91ea5 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -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; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index dc8effe19..401171b41 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -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; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index ea86fe355..3a7ff7804 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -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; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index e5f43f652..c04048804 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -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; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 368f92929..4dbed3607 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -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; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 6c286fc42..eb8a548d3 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -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; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index aa41c8a34..4cd5361fb 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -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; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index de3ecc522..09a5349b6 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -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; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 0735e5f13..b8b7088e1 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -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; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 9ee1cbd98..841121837 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -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; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 777e905fa..2ae6354ae 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -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; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 9f27cbb8d..30bdb79c8 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -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; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 1bcb85c96..d6b368c5e 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -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; diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 861bc1e01..bc3cd1599 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -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; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 3fb1973f9..84436237c 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -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; diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 758377026..1fceb2c42 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -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; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 417f0dc30..d604ba8a1 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -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; diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 93edb3402..e54eb882e 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -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; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 40f401831..f276a2532 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -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; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index c2fc9a9c1..a1c6571e1 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -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; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 5a83e774a..cd2e33434 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -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; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index fb46f2b65..617717826 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -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; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 52df4b159..d9f887b37 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -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; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 2702258af..c31fd3fae 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -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; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index ac967ff21..2d122c672 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -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; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 3b5dcffdf..6265f0868 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -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; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 3d845a2cf..dde35f753 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -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; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index fa8323357..304253c1d 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -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; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 81befe107..736bf49ce 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -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; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index e1455fda4..f3f357bc4 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -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; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index bd6f3f749..13719c15d 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -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; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 9a99d7ae1..55e1ba567 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -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; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index e519c1538..d81372210 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -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; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index db3f3eef2..435a42566 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -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; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index fcb70c3c3..598a55ab5 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -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; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index dc53ece7f..2c79f2770 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -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; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index b9a12e9a2..3b9c3cb00 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -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; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 3828c6b76..0f7e5c47c 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -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; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 7aaa9dd71..be1fc9660 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -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; diff --git a/rollup.config.js b/rollup.config.js index 38ddd8895..27fa6a2fd 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -117,6 +117,7 @@ const CORE_STYLE_DEPENDENCIES = { 'primevue/inputgroupaddon/style': 'primevue.inputgroupaddon.style', 'primevue/inputmask/style': 'primevue.inputmask.style', 'primevue/inputnumber/style': 'primevue.inputnumber.style', + 'primevue/inputotp/style': 'primevue.inputotp.style', 'primevue/inputswitch/style': 'primevue.inputswitch.style', 'primevue/inputtext/style': 'primevue.inputtext.style', 'primevue/knob/style': 'primevue.knob.style',