bootstrap-vue-next/dist/BFormOtp-DYjsPhQN.mjs.map

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

{"version":3,"file":"BFormOtp-DYjsPhQN.mjs","names":[],"sources":["../../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/shared/useArrowNavigation.js","../../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/PinInput/PinInputRoot.js","../../../node_modules/.pnpm/reka-ui@2.9.2_vue@3.5.31_typescript@5.9.3_/node_modules/reka-ui/dist/PinInput/PinInputInput.js","../src/components/BFormOtp/BFormOtp.vue","../src/components/BFormOtp/BFormOtp.vue"],"sourcesContent":["//#region src/shared/useArrowNavigation.ts\nconst ignoredElement = [\"INPUT\", \"TEXTAREA\"];\n/**\n* Allow arrow navigation for every html element with data-reka-collection-item tag\n*\n* @param e               Keyboard event\n* @param currentElement  Event initiator element or any element that wants to handle the navigation\n* @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav\n* @param options         further options\n* @returns               the navigated html element or null if none\n*/\nfunction useArrowNavigation(e, currentElement, parentElement, options = {}) {\n\tif (!currentElement || options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName)) return null;\n\tconst { arrowKeyOptions = \"both\", attributeName = \"[data-reka-collection-item]\", itemsArray = [], loop = true, dir = \"ltr\", preventScroll = true, focus = false } = options;\n\tconst [right, left, up, down, home, end] = [\n\t\te.key === \"ArrowRight\",\n\t\te.key === \"ArrowLeft\",\n\t\te.key === \"ArrowUp\",\n\t\te.key === \"ArrowDown\",\n\t\te.key === \"Home\",\n\t\te.key === \"End\"\n\t];\n\tconst goingVertical = up || down;\n\tconst goingHorizontal = right || left;\n\tif (!home && !end && (!goingVertical && !goingHorizontal || arrowKeyOptions === \"vertical\" && goingHorizontal || arrowKeyOptions === \"horizontal\" && goingVertical)) return null;\n\tconst allCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(attributeName)) : itemsArray;\n\tif (!allCollectionItems.length) return null;\n\tif (preventScroll) e.preventDefault();\n\tlet item = null;\n\tif (goingHorizontal || goingVertical) {\n\t\tconst goForward = goingVertical ? down : dir === \"ltr\" ? right : left;\n\t\titem = findNextFocusableElement(allCollectionItems, currentElement, {\n\t\t\tgoForward,\n\t\t\tloop\n\t\t});\n\t} else if (home) item = allCollectionItems.at(0) || null;\n\telse if (end) item = allCollectionItems.at(-1) || null;\n\tif (focus) item?.focus();\n\treturn item;\n}\n/**\n* Recursive function to find the next focusable element to avoid disabled elements\n*\n* @param elements Elements to navigate\n* @param currentElement Current active element\n* @param options\n* @returns next focusable element\n*/\nfunction findNextFocusableElement(elements, currentElement, options, iterations = !elements.includes(currentElement) ? elements.length + 1 : elements.length) {\n\tif (--iterations === 0) return null;\n\tconst index = elements.indexOf(currentElement);\n\tlet newIndex;\n\tif (index === -1) newIndex = options.goForward ? 0 : elements.length - 1;\n\telse newIndex = options.goForward ? index + 1 : index - 1;\n\tif (!options.loop && (newIndex < 0 || newIndex >= elements.length)) return null;\n\tconst adjustedNewIndex = (newIndex + elements.length) % elements.length;\n\tconst candidate = elements[adjustedNewIndex];\n\tif (!candidate) return null;\n\tconst isDisabled = candidate.hasAttribute(\"disabled\") && candidate.getAttribute(\"disabled\") !== \"false\";\n\tif (isDisabled) return findNextFocusableElement(elements, candidate, options, iterations);\n\treturn candidate;\n}\n\n//#endregion\nexport { useArrowNavigation };\n//# sourceMappingURL=useArrowNavigation.js.map","import { createContext } from \"../shared/createContext.js\";\nimport { useDirection } from \"../shared/useDirection.js\";\nimport { useForwardExpose } from \"../shared/useForwardExpose.js\";\nimport { Primitive } from \"../Primitive/Primitive.js\";\nimport { VisuallyHiddenInput_default } from \"../VisuallyHidden/VisuallyHiddenInput.js\";\nimport { computed, createBlock, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toRefs, unref, watch, withCtx } from \"vue\";\nimport { useVModel } from \"@vueuse/core\";\n\n//#region src/PinInput/PinInputRoot.vue?vue&type=script&setup=true&lang.ts\nconst [injectPinInputRootContext, providePinInputRootContext] = createContext(\"PinInputRoot\");\nvar PinInputRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({\n\tinheritAttrs: false,\n\t__name: \"PinInputRoot\",\n\tprops: {\n\t\tmodelValue: {\n\t\t\ttype: null,\n\t\t\trequired: false\n\t\t},\n\t\tdefaultValue: {\n\t\t\ttype: null,\n\t\t\trequired: false\n\t\t},\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: \"\"\n\t\t},\n\t\tmask: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t},\n\t\totp: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t},\n\t\ttype: {\n\t\t\ttype: null,\n\t\t\trequired: false,\n\t\t\tdefault: \"text\"\n\t\t},\n\t\tdir: {\n\t\t\ttype: String,\n\t\t\trequired: false\n\t\t},\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: false\n\t\t},\n\t\tasChild: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t},\n\t\tas: {\n\t\t\ttype: null,\n\t\t\trequired: false\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false\n\t\t},\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t}\n\t},\n\temits: [\"update:modelValue\", \"complete\"],\n\tsetup(__props, { emit: __emit }) {\n\t\tconst props = __props;\n\t\tconst emits = __emit;\n\t\tconst { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props);\n\t\tconst { forwardRef } = useForwardExpose();\n\t\tconst dir = useDirection(propDir);\n\t\tconst modelValue = useVModel(props, \"modelValue\", emits, {\n\t\t\tdefaultValue: props.defaultValue ?? [],\n\t\t\tpassive: true,\n\t\t\tdeep: true\n\t\t});\n\t\tconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : []);\n\t\tconst inputElements = ref(/* @__PURE__ */ new Set());\n\t\tfunction onInputElementChange(el) {\n\t\t\tinputElements.value.add(el);\n\t\t}\n\t\tconst isNumericMode = computed(() => props.type === \"number\");\n\t\tconst isCompleted = computed(() => {\n\t\t\tconst modelValues = currentModelValue.value.filter((i) => !!i || isNumericMode.value && i === 0);\n\t\t\treturn modelValues.length === inputElements.value.size;\n\t\t});\n\t\twatch(modelValue, () => {\n\t\t\tif (isCompleted.value) emits(\"complete\", modelValue.value);\n\t\t}, { deep: true });\n\t\tprovidePinInputRootContext({\n\t\t\tmodelValue,\n\t\t\tcurrentModelValue,\n\t\t\tmask,\n\t\t\totp,\n\t\t\tplaceholder,\n\t\t\ttype,\n\t\t\tdir,\n\t\t\tdisabled,\n\t\t\tisCompleted,\n\t\t\tinputElements,\n\t\t\tonInputElementChange,\n\t\t\tisNumericMode\n\t\t});\n\t\treturn (_ctx, _cache) => {\n\t\t\treturn openBlock(), createBlock(unref(Primitive), mergeProps(_ctx.$attrs, {\n\t\t\t\tref: unref(forwardRef),\n\t\t\t\tdir: unref(dir),\n\t\t\t\t\"data-complete\": isCompleted.value ? \"\" : void 0,\n\t\t\t\t\"data-disabled\": unref(disabled) ? \"\" : void 0\n\t\t\t}), {\n\t\t\t\tdefault: withCtx(() => [renderSlot(_ctx.$slots, \"default\", { modelValue: unref(modelValue) }), createVNode(VisuallyHiddenInput_default, {\n\t\t\t\t\tid: _ctx.id,\n\t\t\t\t\tas: \"input\",\n\t\t\t\t\tfeature: \"focusable\",\n\t\t\t\t\ttabindex: \"-1\",\n\t\t\t\t\tvalue: currentModelValue.value.join(\"\"),\n\t\t\t\t\tname: _ctx.name ?? \"\",\n\t\t\t\t\tdisabled: unref(disabled),\n\t\t\t\t\trequired: _ctx.required,\n\t\t\t\t\tonFocus: _cache[0] || (_cache[0] = ($event) => Array.from(inputElements.value)?.[0]?.focus())\n\t\t\t\t}, null, 8, [\n\t\t\t\t\t\"id\",\n\t\t\t\t\t\"value\",\n\t\t\t\t\t\"name\",\n\t\t\t\t\t\"disabled\",\n\t\t\t\t\t\"required\"\n\t\t\t\t])]),\n\t\t\t\t_: 3\n\t\t\t}, 16, [\n\t\t\t\t\"dir\",\n\t\t\t\t\"data-complete\",\n\t\t\t\t\"data-disabled\"\n\t\t\t]);\n\t\t};\n\t}\n});\n\n//#endregion\n//#region src/PinInput/PinInputRoot.vue\nvar PinInputRoot_default = PinInputRoot_vue_vue_type_script_setup_true_lang_default;\n\n//#endregion\nexport { PinInputRoot_default, injectPinInputRootContext };\n//# sourceMappingURL=PinInputRoot.js.map","import { getActiveElement } from \"../shared/getActiveElement.js\";\nimport { useArrowNavigation } from \"../shared/useArrowNavigation.js\";\nimport { Primitive } from \"../Primitive/Primitive.js\";\nimport { usePrimitiveElement } from \"../Primitive/usePrimitiveElement.js\";\nimport { injectPinInputRootContext } from \"./PinInputRoot.js\";\nimport { computed, createBlock, defineComponent, nextTick, onMounted, onUnmounted, openBlock, renderSlot, unref, watch, withCtx, withKeys } from \"vue\";\n\n//#region src/PinInput/PinInputInput.vue?vue&type=script&setup=true&lang.ts\nvar PinInputInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({\n\t__name: \"PinInputInput\",\n\tprops: {\n\t\tindex: {\n\t\t\ttype: Number,\n\t\t\trequired: true\n\t\t},\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t},\n\t\tasChild: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false\n\t\t},\n\t\tas: {\n\t\t\ttype: null,\n\t\t\trequired: false,\n\t\t\tdefault: \"input\"\n\t\t}\n\t},\n\tsetup(__props) {\n\t\tconst props = __props;\n\t\tconst context = injectPinInputRootContext();\n\t\tconst inputElements = computed(() => Array.from(context.inputElements.value));\n\t\tconst currentValue = computed(() => context.currentModelValue.value[props.index]);\n\t\tconst disabled = computed(() => props.disabled || context.disabled.value);\n\t\tconst isOtpMode = computed(() => context.otp.value);\n\t\tconst isPasswordMode = computed(() => context.mask.value);\n\t\tconst { primitiveElement, currentElement } = usePrimitiveElement();\n\t\tfunction handleInput(event) {\n\t\t\tconst target = event.target;\n\t\t\tif ((event.data?.length ?? 0) > 1) {\n\t\t\t\thandleMultipleCharacter(target.value);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (context.isNumericMode.value && !/^\\d*$/.test(target.value)) {\n\t\t\t\ttarget.value = target.value.replace(/\\D/g, \"\");\n\t\t\t\treturn;\n\t\t\t}\n\t\t\ttarget.value = event.data || target.value.slice(-1);\n\t\t\tupdateModelValueAt(props.index, target.value);\n\t\t\tconst nextEl = inputElements.value[props.index + 1];\n\t\t\tif (nextEl) nextEl.focus();\n\t\t}\n\t\tfunction updatePlaceholder() {\n\t\t\tnextTick(() => {\n\t\t\t\tconst target = currentElement.value;\n\t\t\t\tif (!target) return;\n\t\t\t\tif (!target.value && target === getActiveElement()) target.placeholder = \"\";\n\t\t\t\telse target.placeholder = context.placeholder.value;\n\t\t\t});\n\t\t}\n\t\tfunction handleKeydown(event) {\n\t\t\tuseArrowNavigation(event, getActiveElement(), void 0, {\n\t\t\t\titemsArray: inputElements.value,\n\t\t\t\tfocus: true,\n\t\t\t\tloop: false,\n\t\t\t\tarrowKeyOptions: \"horizontal\",\n\t\t\t\tdir: context.dir.value\n\t\t\t});\n\t\t}\n\t\tfunction handleBackspace(event) {\n\t\t\tevent.preventDefault();\n\t\t\tconst target = event.target;\n\t\t\tconst value = target.value;\n\t\t\tif (value) updateModelValueAt(props.index, \"\");\n\t\t\telse {\n\t\t\t\tconst prevEl = inputElements.value[props.index - 1];\n\t\t\t\tif (prevEl) {\n\t\t\t\t\tprevEl.focus();\n\t\t\t\t\tupdateModelValueAt(props.index - 1, \"\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tfunction handleDelete(event) {\n\t\t\tif (event.key === \"Delete\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tupdateModelValueAt(props.index, \"\");\n\t\t\t}\n\t\t}\n\t\tfunction handleFocus(event) {\n\t\t\tif (context.otp.value) {\n\t\t\t\tconst firstEmptyInputIdx = inputElements.value.findIndex((_, idx) => context.currentModelValue.value[idx] === \"\" || context.currentModelValue.value[idx] === void 0);\n\t\t\t\tif (firstEmptyInputIdx !== -1 && firstEmptyInputIdx < props.index) {\n\t\t\t\t\tinputElements.value[firstEmptyInputIdx].focus();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst target = event.target;\n\t\t\ttarget.setSelectionRange(1, 1);\n\t\t\tupdatePlaceholder();\n\t\t}\n\t\tfunction handleBlur(event) {\n\t\t\tupdatePlaceholder();\n\t\t}\n\t\tfunction handlePaste(event) {\n\t\t\tevent.preventDefault();\n\t\t\tconst clipboardData = event.clipboardData;\n\t\t\tif (!clipboardData) return;\n\t\t\tconst values = clipboardData.getData(\"text\");\n\t\t\thandleMultipleCharacter(values);\n\t\t}\n\t\tfunction handleMultipleCharacter(values) {\n\t\t\tconst tempModelValue = [...context.currentModelValue.value];\n\t\t\tconst initialIndex = values.length >= inputElements.value.length ? 0 : props.index;\n\t\t\tconst lastIndex = Math.min(initialIndex + values.length, inputElements.value.length);\n\t\t\tfor (let i = initialIndex; i < lastIndex; i++) {\n\t\t\t\tconst input = inputElements.value[i];\n\t\t\t\tconst value = values[i - initialIndex];\n\t\t\t\tif (context.isNumericMode.value && !/^\\d*$/.test(value)) continue;\n\t\t\t\ttempModelValue[i] = value;\n\t\t\t\tinput.focus();\n\t\t\t}\n\t\t\tcontext.modelValue.value = tempModelValue;\n\t\t\tinputElements.value[lastIndex]?.focus();\n\t\t}\n\t\tfunction removeTrailingEmptyStrings(input) {\n\t\t\tlet i = input.length - 1;\n\t\t\twhile (i >= 0 && input[i] === \"\") {\n\t\t\t\tinput.pop();\n\t\t\t\ti--;\n\t\t\t}\n\t\t\treturn input;\n\t\t}\n\t\tfunction updateModelValueAt(index, value) {\n\t\t\tconst tempModelValue = [...context.currentModelValue.value];\n\t\t\tif (context.isNumericMode.value) {\n\t\t\t\tconst num = +value;\n\t\t\t\tif (value === \"\" || isNaN(num)) delete tempModelValue[index];\n\t\t\t\telse tempModelValue[index] = num;\n\t\t\t} else tempModelValue[index] = value;\n\t\t\tcontext.modelValue.value = removeTrailingEmptyStrings(tempModelValue);\n\t\t}\n\t\twatch(currentValue, updatePlaceholder);\n\t\tonMounted(() => {\n\t\t\tcontext.onInputElementChange(currentElement.value);\n\t\t});\n\t\tonUnmounted(() => {\n\t\t\tcontext.inputElements?.value.delete(currentElement.value);\n\t\t});\n\t\treturn (_ctx, _cache) => {\n\t\t\treturn openBlock(), createBlock(unref(Primitive), {\n\t\t\t\tref_key: \"primitiveElement\",\n\t\t\t\tref: primitiveElement,\n\t\t\t\tautocapitalize: \"none\",\n\t\t\t\tas: _ctx.as,\n\t\t\t\t\"as-child\": _ctx.asChild,\n\t\t\t\tautocomplete: isOtpMode.value ? \"one-time-code\" : \"false\",\n\t\t\t\ttype: isPasswordMode.value ? \"password\" : \"text\",\n\t\t\t\tinputmode: unref(context).isNumericMode.value ? \"numeric\" : \"text\",\n\t\t\t\tpattern: unref(context).isNumericMode.value ? \"[0-9]*\" : void 0,\n\t\t\t\tplaceholder: unref(context).placeholder.value,\n\t\t\t\tvalue: currentValue.value,\n\t\t\t\tdisabled: disabled.value,\n\t\t\t\t\"data-disabled\": disabled.value ? \"\" : void 0,\n\t\t\t\t\"data-complete\": unref(context).isCompleted.value ? \"\" : void 0,\n\t\t\t\t\"aria-label\": `pin input ${_ctx.index + 1} of ${inputElements.value.length}`,\n\t\t\t\tonInput: _cache[0] || (_cache[0] = ($event) => handleInput($event)),\n\t\t\t\tonKeydown: [\n\t\t\t\t\twithKeys(handleKeydown, [\n\t\t\t\t\t\t\"left\",\n\t\t\t\t\t\t\"right\",\n\t\t\t\t\t\t\"up\",\n\t\t\t\t\t\t\"down\",\n\t\t\t\t\t\t\"home\",\n\t\t\t\t\t\t\"end\"\n\t\t\t\t\t]),\n\t\t\t\t\twithKeys(handleBackspace, [\"backspace\"]),\n\t\t\t\t\twithKeys(handleDelete, [\"delete\"])\n\t\t\t\t],\n\t\t\t\tonFocus: handleFocus,\n\t\t\t\tonBlur: handleBlur,\n\t\t\t\tonPaste: handlePaste\n\t\t\t}, {\n\t\t\t\tdefault: withCtx(() => [renderSlot(_ctx.$slots, \"default\")]),\n\t\t\t\t_: 3\n\t\t\t}, 8, [\n\t\t\t\t\"as\",\n\t\t\t\t\"as-child\",\n\t\t\t\t\"autocomplete\",\n\t\t\t\t\"type\",\n\t\t\t\t\"inputmode\",\n\t\t\t\t\"pattern\",\n\t\t\t\t\"placeholder\",\n\t\t\t\t\"value\",\n\t\t\t\t\"disabled\",\n\t\t\t\t\"data-disabled\",\n\t\t\t\t\"data-complete\",\n\t\t\t\t\"aria-label\"\n\t\t\t]);\n\t\t};\n\t}\n});\n\n//#endregion\n//#region src/PinInput/PinInputInput.vue\nvar PinInputInput_default = PinInputInput_vue_vue_type_script_setup_true_lang_default;\n\n//#endregion\nexport { PinInputInput_default };\n//# sourceMappingURL=PinInputInput.js.map","<template>\n  <PinInputRoot\n    :id=\"computedId\"\n    v-model=\"modelValue\"\n    :class=\"rootClasses\"\n    :disabled=\"props.disabled\"\n    :dir=\"props.dir\"\n    :mask=\"props.mask\"\n    :name=\"props.name\"\n    :otp=\"props.otp\"\n    :placeholder=\"props.placeholder\"\n    :required=\"props.required\"\n    :type=\"props.type\"\n    @complete=\"emit('complete', $event)\"\n  >\n    <PinInputInput\n      v-for=\"(_, i) in computedLength\"\n      :key=\"i\"\n      :index=\"i\"\n      :disabled=\"props.disabled\"\n      as-child\n    >\n      <BFormInput\n        class=\"b-form-otp-field\"\n        :aria-label=\"`${props.ariaLabel || 'Pin'} ${i + 1} of ${computedLength}`\"\n        :aria-invalid=\"props.ariaInvalid\"\n        :autofocus=\"props.autofocus && i === 0\"\n        :disabled=\"props.disabled\"\n        :form=\"props.form\"\n        :plaintext=\"props.plaintext\"\n        :readonly=\"props.readonly\"\n        :size=\"props.size\"\n        :state=\"props.state\"\n      />\n    </PinInputInput>\n  </PinInputRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport {computed} from 'vue'\nimport {useToNumber} from '@vueuse/core'\nimport {PinInputInput, PinInputRoot} from 'reka-ui'\nimport type {BFormOtpProps} from '../../types'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport BFormInput from '../BFormInput/BFormInput.vue'\n\nconst lengthDefault = 6\nconst _props = withDefaults(defineProps<Omit<BFormOtpProps, 'modelValue'>>(), {\n  ariaInvalid: undefined,\n  ariaLabel: undefined,\n  autofocus: false,\n  dir: undefined,\n  disabled: false,\n  form: undefined,\n  id: undefined,\n  length: lengthDefault,\n  mask: false,\n  name: undefined,\n  otp: false,\n  placeholder: '',\n  plaintext: false,\n  readonly: false,\n  required: false,\n  size: undefined,\n  state: null,\n  type: 'text',\n})\nconst props = useDefaults(_props, 'BFormOtp')\nconst emit = defineEmits<{\n  complete: [value: string[]]\n}>()\n\nconst modelValue = defineModel<BFormOtpProps['modelValue']>({default: () => []})\n\nconst computedId = useId(() => props.id)\nconst lengthNumber = useToNumber(() => props.length, {nanToZero: true, method: 'parseInt'})\nconst computedLength = computed(() => (lengthNumber.value > 0 ? lengthNumber.value : lengthDefault))\n\nconst rootClasses = computed(() => [\n  'b-form-otp',\n  'd-flex',\n  'gap-2',\n  'align-items-center',\n  {\n    [`b-form-otp-${props.size}`]: !!props.size,\n  },\n])\n</script>\n","<template>\n  <PinInputRoot\n    :id=\"computedId\"\n    v-model=\"modelValue\"\n    :class=\"rootClasses\"\n    :disabled=\"props.disabled\"\n    :dir=\"props.dir\"\n    :mask=\"props.mask\"\n    :name=\"props.name\"\n    :otp=\"props.otp\"\n    :placeholder=\"props.placeholder\"\n    :required=\"props.required\"\n    :type=\"props.type\"\n    @complete=\"emit('complete', $event)\"\n  >\n    <PinInputInput\n      v-for=\"(_, i) in computedLength\"\n      :key=\"i\"\n      :index=\"i\"\n      :disabled=\"props.disabled\"\n      as-child\n    >\n      <BFormInput\n        class=\"b-form-otp-field\"\n        :aria-label=\"`${props.ariaLabel || 'Pin'} ${i + 1} of ${computedLength}`\"\n        :aria-invalid=\"props.ariaInvalid\"\n        :autofocus=\"props.autofocus && i === 0\"\n        :disabled=\"props.disabled\"\n        :form=\"props.form\"\n        :plaintext=\"props.plaintext\"\n        :readonly=\"props.readonly\"\n        :size=\"props.size\"\n        :state=\"props.state\"\n      />\n    </PinInputInput>\n  </PinInputRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport {computed} from 'vue'\nimport {useToNumber} from '@vueuse/core'\nimport {PinInputInput, PinInputRoot} from 'reka-ui'\nimport type {BFormOtpProps} from '../../types'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport BFormInput from '../BFormInput/BFormInput.vue'\n\nconst lengthDefault = 6\nconst _props = withDefaults(defineProps<Omit<BFormOtpProps, 'modelValue'>>(), {\n  ariaInvalid: undefined,\n  ariaLabel: undefined,\n  autofocus: false,\n  dir: undefined,\n  disabled: false,\n  form: undefined,\n  id: undefined,\n  length: lengthDefault,\n  mask: false,\n  name: undefined,\n  otp: false,\n  placeholder: '',\n  plaintext: false,\n  readonly: false,\n  required: false,\n  size: undefined,\n  state: null,\n  type: 'text',\n})\nconst props = useDefaults(_props, 'BFormOtp')\nconst emit = defineEmits<{\n  complete: [value: string[]]\n}>()\n\nconst modelValue = defineModel<BFormOtpProps['modelValue']>({default: () => []})\n\nconst computedId = useId(() => props.id)\nconst lengthNumber = useToNumber(() => props.length, {nanToZero: true, method: 'parseInt'})\nconst computedLength = computed(() => (lengthNumber.value > 0 ? lengthNumber.value : lengthDefault))\n\nconst rootClasses = computed(() => [\n  'b-form-otp',\n  'd-flex',\n  'gap-2',\n  'align-items-center',\n  {\n    [`b-form-otp-${props.size}`]: !!props.size,\n  },\n])\n</script>\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}