@lbgm/otp-widget-vue
Version:
OTP code input widget for Vue
83 lines (82 loc) • 3.19 kB
JavaScript
import { defineComponent as I, ref as k, toRef as x, watch as B, openBlock as u, createElementBlock as i, normalizeClass as D, unref as b, Fragment as S, renderList as w, createCommentVNode as $ } from "vue";
const L = ["placeholder"], O = ["placeholder"], P = /* @__PURE__ */ I({
__name: "otp-widget",
props: {
childs: { default: 4 },
type: { default: "number" },
placeholder: { default: "" },
gap: { default: "otp-gap-16" }
},
emits: ["code", "filled"],
setup(o, { expose: f, emit: c }) {
const p = o, n = k(null), l = k([]), g = x(p, "childs"), r = x(p, "type"), C = (t) => {
const e = t.parentNode.children;
return [...Array.from(e)].indexOf(t);
}, h = (t) => {
const e = t.target;
e.value = String(e.value)[0] || "";
}, v = (t) => {
t.preventDefault(), t.stopPropagation();
const e = t.target, s = C(e), a = /^\d$/i.test(t.key) && r.value === "number", d = /(^\D)|(^\d)$/i.test(t.key) && r.value === "text", y = n.value.children[s + 1], _ = n.value.children[s - 1];
t.key !== "Backspace" && (a || d) ? (l.value.push(String(e.value)), e.value && e.classList.add("hasvalue"), y && y.focus()) : t.key === "Backspace" && (e.value = "", l.value.splice(l.value.indexOf(String(e.value), 1)), e.classList.remove("hasvalue"), _ && _.focus());
};
B(l, () => {
const t = l.value.length, e = l.value.join("");
t === g.value ? (c("code", e), c("filled")) : t === 0 && c("code", "");
}, { deep: !0 });
const m = (t) => {
const e = String(t.clipboardData.getData("Text")).trim(), s = n.value.querySelectorAll("input");
e && e.length === g.value && (r.value === "text" && /^[a-zA-Z0-9]*$/.test(e) || r.value === "number" && /^[0-9]*$/.test(e)) && s.forEach((a, d) => {
a.value = e[d], l.value.push(String(e[d])), a.focus();
});
};
return f({
parent: n
}), (t, e) => (u(), i("div", {
ref_key: "parent",
ref: n,
class: D(["widget-otp-parent", { [o.gap]: !0 }]),
"data-widget": "widget-otp-parent"
}, [
b(r) === "number" ? (u(!0), i(S, { key: 0 }, w(o.childs, (s, a) => (u(), i("input", {
key: a,
ref_for: !0,
ref: `widget-otp-input-${a}`,
type: "number",
min: "0",
max: "9",
step: "1",
maxlength: "1",
autocomplete: "off",
spellcheck: "false",
inputmode: "decimal",
placeholder: o.placeholder,
onKeyup: v,
onInput: h,
onPaste: m
}, null, 40, L))), 128)) : $("", !0),
b(r) === "text" ? (u(!0), i(S, { key: 1 }, w(o.childs, (s, a) => (u(), i("input", {
key: a,
ref_for: !0,
ref: `widget-otp-input-${a}`,
type: "text",
maxlength: "1",
autocomplete: "off",
spellcheck: "false",
onKeyup: v,
onInput: h,
placeholder: o.placeholder,
onPaste: m
}, null, 40, O))), 128)) : $("", !0)
], 2));
}
});
const A = (o, f) => {
const c = o.__vccOpts || o;
for (const [p, n] of f)
c[p] = n;
return c;
}, N = /* @__PURE__ */ A(P, [["__scopeId", "data-v-27fa7e78"]]);
export {
N as OtpWidget
};