@coreui/vue-pro 5.16.0 → 5.17.0

package/dist/esm/components/one-time-password-input/COneTimePasswordInput.d.ts

@@ -0,0 +1,4 @@
+declare const COneTimePasswordInput: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { COneTimePasswordInput };

package/dist/esm/components/one-time-password-input/COneTimePasswordInput.js

@@ -0,0 +1,17 @@
+import { defineComponent, h } from 'vue';
+
+const COneTimePasswordInput = defineComponent({
+    name: 'COneTimePasswordInput',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+        return () => h('input', {
+            ...attrs,
+            class: ['form-otp-control', attrs.class],
+            maxlength: 1,
+            autocomplete: 'off',
+        }, slots.default && slots.default());
+    },
+});
+
+export { COneTimePasswordInput };
+//# sourceMappingURL=COneTimePasswordInput.js.map

package/dist/esm/components/one-time-password-input/COneTimePasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"COneTimePasswordInput.js","sources":["../../../../src/components/one-time-password-input/COneTimePasswordInput.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,qBAAqB,GAAG,eAAe,CAAC;AAC5C,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAA;AACvB,QAAA,OAAO,MACL,CAAC,CACC,OAAO,EACP;AACE,YAAA,GAAG,KAAK;AACR,YAAA,KAAK,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,KAAK,CAAC;AACxC,YAAA,SAAS,EAAE,CAAC;AACZ,YAAA,YAAY,EAAE,KAAK;SACpB,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC;IACL,CAAC;AACF,CAAA;;;;"}

package/dist/esm/components/one-time-password-input/index.d.ts

@@ -0,0 +1,3 @@
+import { COneTimePassword } from './COneTimePassword';
+import { COneTimePasswordInput } from './COneTimePasswordInput';
+export { COneTimePassword, COneTimePasswordInput };

package/dist/esm/components/one-time-password-input/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isValidInput: (value: string, type: "number" | "text") => boolean;
+export declare const extractValidChars: (value: string, type: "number" | "text") => string;

package/dist/esm/components/one-time-password-input/utils.js

@@ -0,0 +1,15 @@
+const isValidInput = (value, type) => {
+    if (type === 'number') {
+        return /^\d$/.test(value);
+    }
+    return /^.$/u.test(value);
+};
+const extractValidChars = (value, type) => {
+    if (type === 'number') {
+        return value.replace(/\D/g, '');
+    }
+    return value;
+};
+
+export { extractValidChars, isValidInput };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/one-time-password-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/one-time-password-input/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"MAAa,YAAY,GAAG,CAAC,KAAa,EAAE,IAAuB,KAAa;AAC9E,IAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;AACrB,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;AACA,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAC3B;MAEa,iBAAiB,GAAG,CAAC,KAAa,EAAE,IAAuB,KAAY;AAClF,IAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IACjC;AACA,IAAA,OAAO,KAAK;AACd;;;;"}

package/dist/esm/components/stepper/CStepper.d.ts

@@ -161,8 +161,8 @@ export declare const CStepper: import("vue").DefineComponent<import("vue").Extra
     onStepValidationComplete?: ((...args: any[]) => any) | undefined;
 }>, {
     layout: "horizontal" | "vertical";
-    activeStepNumber: number;
     linear: boolean;
+    activeStepNumber: number;
     stepButtonLayout: "horizontal" | "vertical";
     validation: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/esm/index.js

@@ -135,6 +135,8 @@ export { COffcanvas } from './components/offcanvas/COffcanvas.js';
 export { COffcanvasBody } from './components/offcanvas/COffcanvasBody.js';
 export { COffcanvasHeader } from './components/offcanvas/COffcanvasHeader.js';
 export { COffcanvasTitle } from './components/offcanvas/COffcanvasTitle.js';
+export { COneTimePassword } from './components/one-time-password-input/COneTimePassword.js';
+export { COneTimePasswordInput } from './components/one-time-password-input/COneTimePasswordInput.js';
 export { CPasswordInput } from './components/password-input/CPasswordInput.js';
 export { CPasswordInputPlugin } from './components/password-input/index.js';
 export { CPaginationPlugin } from './components/pagination/index.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Components","Directives"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,SAAS,GAAG;AAChB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;AAC1B,QAAA,KAAK,MAAM,GAAG,IAAIA,KAAU,EAAE;YAC5B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAGA,KAAqC,CAAC,GAAG,CAAC,CAAC;QACjE;AAEA,QAAA,KAAK,MAAM,GAAG,IAAIC,OAAU,EAAE;AAC5B,YAAA,GAAG,CAAC,SAAS,CACVA,OAAqC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAClDA,OAAqC,CAAC,GAAG,CAAC,CAC5C;QACH;IACF,CAAC;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Components","Directives"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,SAAS,GAAG;AAChB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;AAC1B,QAAA,KAAK,MAAM,GAAG,IAAIA,KAAU,EAAE;YAC5B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAGA,KAAqC,CAAC,GAAG,CAAC,CAAC;QACjE;AAEA,QAAA,KAAK,MAAM,GAAG,IAAIC,OAAU,EAAE;AAC5B,YAAA,GAAG,CAAC,SAAS,CACVA,OAAqC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAClDA,OAAqC,CAAC,GAAG,CAAC,CAC5C;QACH;IACF,CAAC;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.16.0",
+  "version": "5.17.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -51,14 +51,14 @@
     "@types/jest": "^29.5.14",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.50.2",
+    "rollup": "^4.52.3",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.4.2",
-    "typescript": "^5.9.2",
-    "vue": "^3.5.21",
+    "ts-jest": "^29.4.4",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.22",
     "vue-types": "^6.0.0"
   },
   "peerDependencies": {

package/src/components/autocomplete/CAutocomplete.ts

@@ -785,22 +785,23 @@ const CAutocomplete = defineComponent({
                             handleClear()
                           },
                         }),
-                      h('button', {
-                        type: 'button',
-                        class: 'autocomplete-indicator',
-                        disabled:
-                          !(props.searchNoResultsLabel || filteredOptions.value.length > 0) &&
-                          !isExternalSearch(props.search),
-                        onClick: (event: Event) => {
-                          event.preventDefault()
-                          event.stopPropagation()
-                          if (visible.value) {
-                            handleDropdownHide()
-                          } else {
-                            handleDropdownShow()
-                          }
-                        },
-                      }),
+                      props.indicator &&
+                        h('button', {
+                          type: 'button',
+                          class: 'autocomplete-indicator',
+                          disabled:
+                            !(props.searchNoResultsLabel || filteredOptions.value.length > 0) &&
+                            !isExternalSearch(props.search),
+                          onClick: (event: Event) => {
+                            event.preventDefault()
+                            event.stopPropagation()
+                            if (visible.value) {
+                              handleDropdownHide()
+                            } else {
+                              handleDropdownShow()
+                            }
+                          },
+                        }),
                     ]),
                 ]
               ),

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from './multi-select'
 export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
+export * from './one-time-password-input'
 export * from './password-input'
 export * from './pagination'
 export * from './picker'

package/src/components/one-time-password-input/COneTimePassword.ts

@@ -0,0 +1,459 @@
+import { defineComponent, h, ref, computed, nextTick, watch } from 'vue'
+import { CFormControlWrapper } from '../form/CFormControlWrapper'
+import { COneTimePasswordInput } from './COneTimePasswordInput'
+import { isValidInput, extractValidChars } from './utils'
+import { getNextActiveElement, isRTL } from '../../utils'
+
+const COneTimePassword = defineComponent({
+  name: 'COneTimePassword',
+  inheritAttrs: false,
+  props: {
+    /**
+     * Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
+     */
+    ariaLabel: {
+      type: Function,
+      default: (index: number, total: number) => `Digit ${index + 1} of ${total}`,
+    },
+    /**
+     * Automatically submit the form when all one time password fields are filled.
+     */
+    autoSubmit: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Disable all one time password (OTP) input fields.
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Initial value for uncontrolled Vue.js one time password input.
+     */
+    defaultValue: [String, Number],
+    /**
+     * Provide valuable, actionable feedback.
+     */
+    feedback: String,
+    /**
+     * Provide valuable, actionable feedback.
+     */
+    feedbackInvalid: String,
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     */
+    feedbackValid: String,
+    /**
+     * A string of all className you want applied to the floating label wrapper.
+     */
+    floatingClassName: String,
+    /**
+     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     */
+    floatingLabel: String,
+    /**
+     * ID attribute for the hidden input field.
+     */
+    id: String,
+    /**
+     * Set component validation state to invalid.
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     */
+    label: String,
+    /**
+     * Enforce sequential input (users must fill fields in order).
+     */
+    linear: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Show input as password (masked characters).
+     */
+    masked: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: [String, Number],
+    /**
+     * Name attribute for the hidden input field.
+     */
+    name: String,
+    /**
+     * Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character.
+     */
+    placeholder: String,
+    /**
+     * Make Vue.js OTP input component read-only.
+     */
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Makes the input field required for form validation.
+     */
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Sets the visual size of the Vue.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
+     */
+    size: {
+      type: String,
+      validator: (value: string) => ['sm', 'lg'].includes(value),
+    },
+    /**
+     * Add helper text to the component.
+     */
+    text: String,
+    /**
+     * Display validation feedback in a styled tooltip.
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Input validation type: 'number' for digits only, or 'text' for free text.
+     */
+    type: {
+      type: String,
+      default: 'number',
+      validator: (value: string) => ['number', 'text'].includes(value),
+    },
+    /**
+     * Set component validation state to valid.
+     */
+    valid: Boolean,
+    /**
+     * The current value of the one time password input.
+     */
+    value: [String, Number],
+  },
+  emits: [
+    /**
+     * Callback triggered when the Vue.js one time password (OTP) value changes.
+     */
+    'update:modelValue',
+    /**
+     * Callback triggered when the Vue.js one time password (OTP) value changes.
+     */
+    'change',
+    /**
+     * Callback triggered when all Vue.js one time password (OTP) fields are filled.
+     */
+    'complete',
+  ],
+  setup(props, { attrs, slots, emit }) {
+    const inputRefs = ref<(HTMLInputElement | null)[]>([])
+    const hiddenInputRef = ref<HTMLInputElement | null>(null)
+    const inputValues = ref<string[]>([])
+
+    // Count valid OTP input children
+    const inputCount = computed(() => {
+      return inputRefs.value.filter((ref) => ref !== null).length
+    })
+
+    // Initialize input values
+    const initializeValues = () => {
+      const initialValue = String(props.modelValue ?? props.value ?? props.defaultValue ?? '')
+      inputValues.value = Array.from({ length: inputCount.value }, (_, i) => initialValue[i] || '')
+    }
+
+    // Watch for changes in modelValue or value (controlled mode)
+    watch(
+      () => props.modelValue ?? props.value,
+      (newValue) => {
+        if (newValue !== undefined) {
+          const valueString = String(newValue)
+          inputValues.value = Array.from(
+            { length: inputCount.value },
+            (_, i) => valueString[i] || ''
+          )
+        }
+      },
+      { immediate: true }
+    )
+
+    // Watch for changes in inputCount
+    watch(inputCount, initializeValues, { immediate: true })
+
+    // Update hidden input and trigger events
+    const updateValue = (newValues: string[]) => {
+      const newValue = newValues.join('')
+
+      if (hiddenInputRef.value) {
+        hiddenInputRef.value.value = newValue
+      }
+
+      emit('update:modelValue', newValue)
+      emit('change', newValue)
+
+      if (newValue.length === inputCount.value) {
+        emit('complete', newValue)
+
+        if (props.autoSubmit) {
+          nextTick(() => {
+            const form = hiddenInputRef.value?.closest('form') as HTMLFormElement
+            if (form && typeof form.requestSubmit === 'function') {
+              form.requestSubmit()
+            }
+          })
+        }
+      }
+    }
+
+    const handleInputChange = (index: number, event: Event) => {
+      const target = event.target as HTMLInputElement
+      const inputValue = target.value
+
+      if (inputValue.length === 1 && !isValidInput(inputValue, props.type as 'number' | 'text')) {
+        return
+      }
+
+      const newValues = [...inputValues.value]
+      newValues[index] = inputValue.length === 1 ? inputValue : ''
+
+      inputValues.value = newValues
+      updateValue(newValues)
+
+      if (inputValue.length === 1) {
+        const nextInput = getNextActiveElement(
+          inputRefs.value.filter(Boolean) as HTMLInputElement[],
+          target,
+          true,
+          false
+        )
+        nextInput?.focus()
+      }
+    }
+
+    const handleInputFocus = (event: FocusEvent) => {
+      const target = event.target as HTMLInputElement
+
+      if (target.value) {
+        setTimeout(() => {
+          target.select()
+        }, 0)
+        return
+      }
+
+      if (props.linear) {
+        const firstEmptyInput = inputRefs.value.find((input) => !input?.value)
+        if (firstEmptyInput && firstEmptyInput !== target) {
+          firstEmptyInput.focus()
+        }
+      }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const { key, target } = event
+
+      if (key === 'Backspace' && (target as HTMLInputElement).value === '') {
+        const newValues = [...inputValues.value]
+        const prevInput = getNextActiveElement(
+          inputRefs.value.filter(Boolean) as HTMLInputElement[],
+          target as HTMLInputElement,
+          false,
+          false
+        )
+
+        if (prevInput) {
+          const prevIndex = inputRefs.value.indexOf(prevInput as HTMLInputElement)
+          if (prevIndex !== -1) {
+            newValues[prevIndex] = ''
+            inputValues.value = newValues
+            updateValue(newValues)
+            prevInput.focus()
+          }
+        }
+        return
+      }
+
+      if (key === 'ArrowRight') {
+        if (props.linear && (target as HTMLInputElement).value === '') {
+          return
+        }
+
+        const shouldMoveNext = !isRTL(target as HTMLInputElement)
+        const nextInput = getNextActiveElement(
+          inputRefs.value.filter(Boolean) as HTMLInputElement[],
+          target as HTMLInputElement,
+          shouldMoveNext,
+          false
+        )
+        nextInput?.focus()
+        return
+      }
+
+      if (key === 'ArrowLeft') {
+        const shouldMoveNext = isRTL(target as HTMLInputElement)
+        const prevInput = getNextActiveElement(
+          inputRefs.value.filter(Boolean) as HTMLInputElement[],
+          target as HTMLInputElement,
+          shouldMoveNext,
+          false
+        )
+        prevInput?.focus()
+      }
+    }
+
+    const handlePaste = (index: number, event: ClipboardEvent) => {
+      event.preventDefault()
+      const pastedData = event.clipboardData?.getData('text') || ''
+      const validChars = extractValidChars(pastedData, props.type as 'number' | 'text')
+
+      if (!validChars) {
+        return
+      }
+
+      const newValues = [...inputValues.value]
+      const startIndex = index
+
+      for (let i = 0; i < validChars.length && startIndex + i < inputCount.value; i++) {
+        newValues[startIndex + i] = validChars[i]
+      }
+
+      inputValues.value = newValues
+      updateValue(newValues)
+
+      // Focus the next empty input or the last filled input
+      const nextEmptyIndex = startIndex + validChars.length
+      if (nextEmptyIndex < inputCount.value) {
+        inputRefs.value[nextEmptyIndex]?.focus()
+      } else {
+        inputRefs.value[inputRefs.value.length - 1]?.focus()
+      }
+    }
+
+    return () => {
+      if (!slots.default) {
+        return null
+      }
+
+      const children = slots.default()
+      let inputIndex = 0
+
+      const processedChildren = children?.map((child) => {
+        if (child.type && (child.type as any).name === 'COneTimePasswordInput') {
+          const currentInputIndex = inputIndex++
+
+          return h(COneTimePasswordInput, {
+            ...child.props,
+            key: `otp-input-${currentInputIndex}`,
+            type: props.masked ? 'password' : 'text',
+            class: [
+              {
+                'is-invalid': props.invalid,
+                'is-valid': props.valid,
+              },
+              child.props?.class,
+            ],
+            id: child.props?.id || (props.id ? `${props.id}-${currentInputIndex}` : undefined),
+            name:
+              child.props?.name || (props.name ? `${props.name}-${currentInputIndex}` : undefined),
+            placeholder:
+              child.props?.placeholder ||
+              (props.placeholder && props.placeholder.length > 1
+                ? props.placeholder[currentInputIndex]
+                : props.placeholder),
+            value: inputValues.value[currentInputIndex] || '',
+            tabindex:
+              currentInputIndex === 0 ? 0 : inputValues.value[currentInputIndex - 1] ? 0 : -1,
+            disabled: props.disabled || child.props?.disabled,
+            readonly: props.readonly || child.props?.readonly,
+            required: props.required || child.props?.required,
+            'aria-label':
+              child.props?.['aria-label'] || props.ariaLabel!(currentInputIndex, inputCount.value),
+            inputmode: props.type === 'number' ? 'numeric' : 'text',
+            pattern: props.type === 'number' ? '[0-9]*' : '.*',
+            onInput: (event: Event) => {
+              handleInputChange(currentInputIndex, event)
+            },
+            onFocus: handleInputFocus,
+            onKeydown: (event: KeyboardEvent) => {
+              handleKeyDown(event)
+            },
+            onPaste: (event: ClipboardEvent) => {
+              handlePaste(currentInputIndex, event)
+            },
+            ref: (el: any) => {
+              // Get the actual DOM element - handle both direct elements and component instances
+              if (el) {
+                // If it's a component instance, get the DOM element
+                const domElement = el.$el || el
+                // Ensure it's actually an HTMLInputElement
+                if (domElement && domElement.tagName === 'INPUT') {
+                  inputRefs.value[currentInputIndex] = domElement
+                } else {
+                  inputRefs.value[currentInputIndex] = el
+                }
+              } else {
+                inputRefs.value[currentInputIndex] = null
+              }
+            },
+          })
+        }
+        return child
+      })
+
+      return h(
+        CFormControlWrapper,
+        {
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          floatingClassName: props.floatingClassName,
+          floatingLabel: props.floatingLabel,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
+        },
+        {
+          default: () => [
+            h(
+              'div',
+              {
+                class: [
+                  'form-otp',
+                  {
+                    [`form-otp-${props.size}`]: props.size,
+                  },
+                  attrs.class,
+                ],
+                role: 'group',
+                ...attrs,
+              },
+              [
+                ...processedChildren,
+                h('input', {
+                  type: 'hidden',
+                  id: props.id,
+                  name: props.name,
+                  value: inputValues.value.join(''),
+                  disabled: props.disabled,
+                  ref: hiddenInputRef,
+                }),
+              ]
+            ),
+          ],
+        }
+      )
+    }
+  },
+})
+
+export { COneTimePassword }

package/src/components/one-time-password-input/COneTimePasswordInput.ts

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue'
+
+const COneTimePasswordInput = defineComponent({
+  name: 'COneTimePasswordInput',
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () =>
+      h(
+        'input',
+        {
+          ...attrs,
+          class: ['form-otp-control', attrs.class],
+          maxlength: 1,
+          autocomplete: 'off',
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { COneTimePasswordInput }