From 067da063a8a0d319d3bd89ba678df00dc35f791d Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 21 Feb 2024 21:38:16 +0300 Subject: [PATCH] Initiated InputOtp --- api-generator/components/inputotp.js | 80 ++++ assets/menu/menu.json | 5 + components/lib/inputotp/BaseInputOtp.vue | 53 +++ components/lib/inputotp/InputOtp.d.ts | 227 +++++++++ components/lib/inputotp/InputOtp.spec.js | 20 + components/lib/inputotp/InputOtp.vue | 155 +++++++ components/lib/inputotp/package.json | 9 + .../lib/inputotp/style/InputOtpStyle.d.ts | 3 + .../lib/inputotp/style/InputOtpStyle.js | 11 + components/lib/inputotp/style/package.json | 6 + doc/common/apidoc/index.json | 431 +++++++++++++++++- doc/inputotp/AccessibilityDoc.vue | 32 ++ doc/inputotp/BasicDoc.vue | 54 +++ doc/inputotp/ImportDoc.vue | 18 + doc/inputotp/IntegerOnlyDoc.vue | 54 +++ doc/inputotp/MaskDoc.vue | 54 +++ doc/inputotp/pt/PTImage.vue | 8 + doc/inputotp/pt/index.vue | 35 ++ doc/inputotp/theming/StyledDoc.vue | 29 ++ doc/inputotp/theming/TailwindDoc.vue | 6 + doc/inputotp/theming/index.vue | 40 ++ .../runtime/core/components/index.js | 1 + nuxt-vite.config.js | 1 + pages/inputotp/index.vue | 49 ++ public/themes/arya-blue/theme.css | 11 + public/themes/arya-green/theme.css | 11 + public/themes/arya-orange/theme.css | 11 + public/themes/arya-purple/theme.css | 11 + public/themes/aura-dark-amber/theme.css | 11 + public/themes/aura-dark-blue/theme.css | 11 + public/themes/aura-dark-cyan/theme.css | 11 + public/themes/aura-dark-green/theme.css | 11 + public/themes/aura-dark-indigo/theme.css | 11 + public/themes/aura-dark-lime/theme.css | 11 + public/themes/aura-dark-noir/theme.css | 11 + public/themes/aura-dark-pink/theme.css | 11 + public/themes/aura-dark-purple/theme.css | 11 + public/themes/aura-dark-teal/theme.css | 11 + public/themes/aura-light-amber/theme.css | 11 + public/themes/aura-light-blue/theme.css | 11 + public/themes/aura-light-cyan/theme.css | 11 + public/themes/aura-light-green/theme.css | 11 + public/themes/aura-light-indigo/theme.css | 11 + public/themes/aura-light-lime/theme.css | 11 + public/themes/aura-light-noir/theme.css | 11 + public/themes/aura-light-pink/theme.css | 11 + public/themes/aura-light-purple/theme.css | 11 + public/themes/aura-light-teal/theme.css | 11 + public/themes/bootstrap4-dark-blue/theme.css | 11 + .../themes/bootstrap4-dark-purple/theme.css | 11 + public/themes/bootstrap4-light-blue/theme.css | 11 + .../themes/bootstrap4-light-purple/theme.css | 11 + public/themes/fluent-light/theme.css | 11 + public/themes/lara-dark-amber/theme.css | 11 + public/themes/lara-dark-blue/theme.css | 11 + public/themes/lara-dark-cyan/theme.css | 11 + public/themes/lara-dark-green/theme.css | 11 + public/themes/lara-dark-indigo/theme.css | 11 + public/themes/lara-dark-pink/theme.css | 11 + public/themes/lara-dark-purple/theme.css | 11 + public/themes/lara-dark-teal/theme.css | 11 + public/themes/lara-light-amber/theme.css | 11 + public/themes/lara-light-blue/theme.css | 11 + public/themes/lara-light-cyan/theme.css | 11 + public/themes/lara-light-green/theme.css | 11 + public/themes/lara-light-indigo/theme.css | 11 + public/themes/lara-light-pink/theme.css | 11 + public/themes/lara-light-purple/theme.css | 11 + public/themes/lara-light-teal/theme.css | 11 + public/themes/luna-amber/theme.css | 11 + public/themes/luna-blue/theme.css | 11 + public/themes/luna-green/theme.css | 11 + public/themes/luna-pink/theme.css | 11 + public/themes/md-dark-deeppurple/theme.css | 11 + public/themes/md-dark-indigo/theme.css | 11 + public/themes/md-light-deeppurple/theme.css | 11 + public/themes/md-light-indigo/theme.css | 11 + public/themes/mdc-dark-deeppurple/theme.css | 11 + public/themes/mdc-dark-indigo/theme.css | 11 + public/themes/mdc-light-deeppurple/theme.css | 11 + public/themes/mdc-light-indigo/theme.css | 11 + public/themes/mira/theme.css | 11 + public/themes/nano/theme.css | 11 + public/themes/nova-accent/theme.css | 11 + public/themes/nova-alt/theme.css | 11 + public/themes/nova-vue/theme.css | 11 + public/themes/nova/theme.css | 11 + public/themes/rhea/theme.css | 11 + public/themes/saga-blue/theme.css | 11 + public/themes/saga-green/theme.css | 11 + public/themes/saga-orange/theme.css | 11 + public/themes/saga-purple/theme.css | 11 + public/themes/soho-dark/theme.css | 11 + public/themes/soho-light/theme.css | 11 + public/themes/tailwind-light/theme.css | 11 + public/themes/vela-blue/theme.css | 11 + public/themes/vela-green/theme.css | 11 + public/themes/vela-orange/theme.css | 11 + public/themes/vela-purple/theme.css | 11 + public/themes/viva-dark/theme.css | 11 + public/themes/viva-light/theme.css | 11 + rollup.config.js | 1 + 102 files changed, 2228 insertions(+), 1 deletion(-) create mode 100644 api-generator/components/inputotp.js create mode 100644 components/lib/inputotp/BaseInputOtp.vue create mode 100755 components/lib/inputotp/InputOtp.d.ts create mode 100644 components/lib/inputotp/InputOtp.spec.js create mode 100755 components/lib/inputotp/InputOtp.vue create mode 100644 components/lib/inputotp/package.json create mode 100644 components/lib/inputotp/style/InputOtpStyle.d.ts create mode 100644 components/lib/inputotp/style/InputOtpStyle.js create mode 100644 components/lib/inputotp/style/package.json create mode 100644 doc/inputotp/AccessibilityDoc.vue create mode 100644 doc/inputotp/BasicDoc.vue create mode 100644 doc/inputotp/ImportDoc.vue create mode 100644 doc/inputotp/IntegerOnlyDoc.vue create mode 100644 doc/inputotp/MaskDoc.vue create mode 100644 doc/inputotp/pt/PTImage.vue create mode 100644 doc/inputotp/pt/index.vue create mode 100644 doc/inputotp/theming/StyledDoc.vue create mode 100644 doc/inputotp/theming/TailwindDoc.vue create mode 100644 doc/inputotp/theming/index.vue create mode 100644 pages/inputotp/index.vue diff --git a/api-generator/components/inputotp.js b/api-generator/components/inputotp.js new file mode 100644 index 0000000000..c4a86f705b --- /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 ce32aa7a0b..f0dc6cc2e2 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 0000000000..b05b42582b --- /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 0000000000..83506dbf90 --- /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 0000000000..df8f16fc5b --- /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 0000000000..9522cb48d0 --- /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 0000000000..39b0a1db3e --- /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 0000000000..c52582775f --- /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 0000000000..f1a9db1147 --- /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 0000000000..47e6783395 --- /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 44c59e7579..1257694f18 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 0000000000..29470c7778 --- /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 0000000000..ac72aad11c --- /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 0000000000..6c589aa093 --- /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 0000000000..55a525e796 --- /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 0000000000..153ad36b4b --- /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 0000000000..60ede15671 --- /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 0000000000..584d9a293f --- /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 0000000000..5df2ea33ab --- /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 0000000000..fe4aadc26e --- /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 0000000000..b9c44bb041 --- /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 037a7c5ff5..feca2c2d47 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 60a8f403fe..d7ca8ef781 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 0000000000..53fbc89d0a --- /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 a5223b08dc..478404e6c7 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 7278119d3d..0377f83900 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 a853cb1517..cc9da0f85b 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 c2965363d0..e239d10d1a 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 9de6b57cb4..c25e3a03c5 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 08822ee983..9e925cef94 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 22b7fa0829..02e2231c02 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 f0399e3cb5..b6fd391c80 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 6ec354216e..42892e7008 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 3e834d5965..3df7cdc87d 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 a4f41924f0..63015b3ea8 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 c95143f6ff..df4b5fbe5f 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 27935ca85c..9e0c4daba2 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 117fd42251..ce1c3f1c5a 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 ec09b04149..2a25b10c05 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 1cd094f438..1c2463f99a 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 ac0d3fb7e0..68e9ce855e 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 9c894b6c0b..1f3e32da14 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 bd07b09b8d..56deed7ded 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 6784b63d4c..5dca643a55 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 08513f60c2..b89da65bcb 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 eca62a30b8..5fefcea804 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 e25b41207a..4ca9f3d5f1 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 f124a432f6..e536f67b29 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 301eb4d43b..bc9ea3f179 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 37002f762c..4824e6ba86 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 1aec877ddd..79ff17a403 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 bae0b10328..a8c135d9d1 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 91bdd9f4db..25d5e97987 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 e03e306df3..ae61b10038 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 f11813d2ef..6971ec8eb8 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 4017009a47..9a76c15726 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 71c7d7fcf2..a15eac1260 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 81c2cdb316..4efb41778c 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 225855982c..6c96986079 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 17931a10bf..a6d3b4ac4d 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 06e92b5a81..8d412eb013 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 a1846e97b8..1b63ab0112 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 c52a4f27f0..260b91ea5c 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 dc8effe192..401171b419 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 ea86fe3559..3a7ff78040 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 e5f43f6525..c04048804f 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 368f92929d..4dbed36070 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 6c286fc422..eb8a548d34 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 aa41c8a34e..4cd5361fbe 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 de3ecc5222..09a5349b66 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 0735e5f13d..b8b7088e16 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 9ee1cbd98a..8411218379 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 777e905fab..2ae6354aec 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 9f27cbb8d5..30bdb79c88 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 1bcb85c968..d6b368c5e0 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 861bc1e01b..bc3cd1599f 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 3fb1973f9f..84436237c4 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 7583770268..1fceb2c42d 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 417f0dc300..d604ba8a11 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 93edb34024..e54eb882e0 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 40f4018310..f276a25327 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 c2fc9a9c1d..a1c6571e18 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 5a83e774af..cd2e334347 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 fb46f2b656..6177178266 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 52df4b1598..d9f887b374 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 2702258af4..c31fd3fae4 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 ac967ff210..2d122c6729 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 3b5dcffdf8..6265f0868b 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 3d845a2cfe..dde35f7530 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 fa8323357e..304253c1db 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 81befe1071..736bf49ce0 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 e1455fda43..f3f357bc41 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 bd6f3f749e..13719c15d8 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 9a99d7ae14..55e1ba5676 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 e519c15389..d813722102 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 db3f3eef26..435a42566a 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 fcb70c3c37..598a55ab57 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 dc53ece7fb..2c79f27702 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 b9a12e9a21..3b9c3cb00a 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 3828c6b76a..0f7e5c47c7 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 7aaa9dd717..be1fc96606 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 38ddd8895c..27fa6a2fdb 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',