import { defineComponent as w, ref as f, computed as K, watch as T, onMounted as $, openBlock as c, createElementBlock as h, createElementVNode as F, normalizeClass as M, createCommentVNode as j, Fragment as R, renderList as N, createBlock as W } from "vue"; const H = { style: { display: "flex", "align-items": "center" } }, S = ["type", "inputmode", "placeholder", "disabled", "maxlength", "value"], V = { key: 0 }, q = ["innerHTML"], z = /* @__PURE__ */ w({ __name: "single-otp-input", props: { inputType: { default: "tel" }, inputmode: { default: "numeric" }, value: { default: "" }, separator: { default: "" }, focus: { type: Boolean, default: !1 }, inputClasses: { default: "" }, conditionalClass: { default: "" }, shouldAutoFocus: { type: Boolean, default: !1 }, isLastChild: { type: Boolean, default: !1 }, placeholder: { default: "" }, isDisabled: { type: Boolean, default: !1 } }, emits: ["on-change", "on-keydown", "on-paste", "on-focus", "on-blur"], setup(b, { emit: I }) { const s = b, l = I, i = f(s.value || ""), a = f(null), n = (e) => { const u = e.target.value; return u && u.trim().length > 1 ? (e.clipboardData = { getData: () => u.trim() }, l("on-paste", e)) : l("on-change", u); }, v = (e) => e >= 65 && e <= 90, D = (e) => e >= 48 && e <= 57 || e >= 96 && e <= 105, k = (e) => { s.isDisabled && e.preventDefault(); const u = e || window.event, r = u.which ? u.which : u.keyCode; D(r) || s.inputType === "letter-numeric" && v(r) || [8, 9, 13, 37, 39, 46, 86].includes(r) ? l("on-keydown", e) : u.preventDefault(); }, m = (e) => l("on-paste", e), d = () => (a.value.select(), l("on-focus")), y = () => l("on-blur"), g = K( () => ["letter-numeric", "number"].includes(s.inputType) ? "text" : s.inputType ); return T( () => s.value, (e, u) => { e !== u && (i.value = e); } ), T( () => s.focus, (e, u) => { u !== e && a.value && s.focus && (a.value.focus(), a.value.select()); } ), $(() => { a.value && s.focus && s.shouldAutoFocus && (a.value.focus(), a.value.select()); }), (e, u) => (c(), h("div", H, [ F("input", { "data-test": "single-input", type: g.value, inputmode: e.inputmode, placeholder: e.placeholder, disabled: e.isDisabled, ref_key: "input", ref: a, min: "0", max: "9", maxlength: e.isLastChild ? 1 : void 0, pattern: "[0-9]", value: i.value, class: M([e.inputClasses, e.conditionalClass, { "is-complete": i.value }]), onInput: n, onKeydown: k, onPaste: m, onFocus: d, onBlur: y }, null, 42, S), !e.isLastChild && e.separator ? (c(), h("span", V, [ F("span", { innerHTML: e.separator }, null, 8, q) ])) : j("", !0) ])); } }), G = { style: { display: "flex" }, class: "otp-input-container" }, J = { key: 0, autocomplete: "off", name: "hidden", type: "text", style: { display: "none" } }, Q = 8, U = 37, X = 39, Y = 46, x = /* @__PURE__ */ w({ __name: "vue3-otp-input", props: { value: { default: "" }, numInputs: { default: 4 }, separator: { default: "" }, inputClasses: { default: "" }, conditionalClass: { default: () => [] }, inputType: {}, inputmode: { default: "text" }, shouldAutoFocus: { type: Boolean, default: !1 }, placeholder: { default: () => [] }, isDisabled: { type: Boolean, default: !1 }, shouldFocusOrder: { type: Boolean } }, emits: ["update:value", "on-change", "on-complete"], setup(b, { expose: I, emit: s }) { const l = b, i = s, a = f(0), n = f([]), v = f([]); T( () => l.value, (t) => { if (t.length === l.numInputs || n.value.length === 0) { const o = t.split(""); n.value = o; } }, { immediate: !0 } ); const D = (t) => { a.value = t; }, k = () => { a.value = -1; }, m = () => n.value.join("").length === l.numInputs ? (i("update:value", n.value.join("")), i("on-complete", n.value.join(""))) : "Wait until the user enters the required number of characters", d = (t) => { a.value = Math.max(Math.min(l.numInputs - 1, t), 0); }, y = () => { d(a.value + 1); }, g = () => { d(a.value - 1); }, e = (t) => { v.value = Object.assign([], n.value), n.value[a.value] = t.toString(), v.value.join("") !== n.value.join("") && (i("update:value", n.value.join("")), i("on-change", n.value.join("")), m()); }, u = (t) => { t.preventDefault(); const o = t.clipboardData.getData("text/plain").slice(0, l.numInputs - a.value).split(""); if (l.inputType === "number" && !o.join("").match(/^\d+$/) || l.inputType === "letter-numeric" && !o.join("").match(/^\w+$/)) return "Invalid pasted data"; const p = n.value.slice(0, a.value).concat(o); return p.slice(0, l.numInputs).forEach(function(O, C) { n.value[C] = O; }), d(p.slice(0, l.numInputs).length), m(); }, r = (t) => { e(t), y(); }, A = () => { n.value.length > 0 && (i("update:value", ""), i("on-change", "")), n.value = [], a.value = 0; }, E = (t) => { const o = t.split(""); o.length === l.numInputs && (n.value = o, i("update:value", n.value.join("")), i("on-complete", n.value.join(""))); }, L = (t, o) => { switch (t.keyCode) { case Q: t.preventDefault(), e(""), g(); break; case Y: t.preventDefault(), e(""); break; case U: t.preventDefault(), g(); break; case X: t.preventDefault(), y(); break; default: _(o); break; } }, _ = (t) => { l.shouldFocusOrder && setTimeout(() => { const o = n.value.join("").length; t - o >= 0 && (a.value = o, n.value[t] = ""); }, 100); }; return I({ clearInput: A, fillInput: E }), (t, o) => (c(), h("div", G, [ t.inputType === "password" ? (c(), h("input", J)) : j("", !0), (c(!0), h(R, null, N(t.numInputs, (P, p) => { var O, C; return c(), W(z, { key: p, focus: a.value === p, value: n.value[p], separator: t.separator, "input-type": t.inputType, inputmode: t.inputmode, "input-classes": t.inputClasses, conditionalClass: (O = t.conditionalClass) == null ? void 0 : O[p], "is-last-child": p === t.numInputs - 1, "should-auto-focus": t.shouldAutoFocus, placeholder: (C = t.placeholder) == null ? void 0 : C[p], "is-disabled": t.isDisabled, onOnChange: r, onOnKeydown: (B) => L(B, p), onOnPaste: u, onOnFocus: (B) => D(p), onOnBlur: k }, null, 8, ["focus", "value", "separator", "input-type", "inputmode", "input-classes", "conditionalClass", "is-last-child", "should-auto-focus", "placeholder", "is-disabled", "onOnKeydown", "onOnFocus"]); }), 128)) ])); } }); export { x as default };