@j2only/pincode
Version:
Vue.js pincode input component. Written entirely on Vue 3 Composition API with Typescript and Vite.
162 lines (161 loc) • 5.9 kB
JavaScript
import { openBlock as i, createElementBlock as c, createElementVNode as s, defineComponent as N, computed as w, ref as k, toRefs as I, watch as h, onMounted as P, onUnmounted as T, resolveComponent as V, normalizeClass as f, Fragment as E, renderList as $, toDisplayString as _, createVNode as z } from "vue";
import './index.css';const M = {
name: "UndoIcon"
}, C = (e, n) => {
const u = e.__vccOpts || e;
for (const [t, l] of n)
u[t] = l;
return u;
}, R = {
height: "512pt",
viewBox: "0 0 512 512",
width: "512pt",
xmlns: "http://www.w3.org/2000/svg"
};
function U(e, n, u, t, l, d) {
return i(), c("svg", R, n[0] || (n[0] = [
s("path", { d: "m154.667969 213.332031h-138.667969c-8.832031 0-16-7.167969-16-16v-138.664062c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v122.664062h122.667969c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0" }, null, -1),
s("path", { d: "m256 512c-68.351562 0-132.628906-26.644531-180.96875-75.03125-6.253906-6.25-6.253906-16.382812 0-22.632812 6.269531-6.273438 16.402344-6.230469 22.632812 0 42.304688 42.347656 98.515626 65.664062 158.335938 65.664062 123.519531 0 224-100.480469 224-224s-100.480469-224-224-224c-105.855469 0-200.257812 71.148438-224.449219 169.171875-2.132812 8.597656-10.75 13.824219-19.371093 11.714844-8.574219-2.132813-13.800782-10.796875-11.710938-19.371094 27.691406-112.148437 135.148438-193.515625 255.53125-193.515625 141.164062 0 256 114.835938 256 256s-114.835938 256-256 256zm0 0" }, null, -1)
]));
}
const q = /* @__PURE__ */ C(M, [["render", U]]), O = N({
name: "VuePincode",
components: { UndoIcon: q },
props: {
name: {
type: String,
default: "pincode"
},
length: {
type: Number,
default: 4
},
customButton: {
type: Boolean,
default: !1
},
releaseSuccess: {
type: Boolean,
default: !0
},
releaseSuccessDelay: {
type: Number,
default: 2500
},
releaseErrorDelay: {
type: Number,
default: 500
},
keyboardInput: {
type: Boolean,
default: !0
},
focusRequired: {
type: Boolean,
default: !1
},
activeElement: {
type: Object,
default: () => document.body
}
},
setup(e, { emit: n }) {
const u = w(() => e.length < 2 ? 2 : e.length > 8 ? 8 : e.length), t = k(""), l = k(!1), d = k(!1), a = w(() => t.value.length), o = w(() => l.value || d.value), r = k(null), { keyboardInput: y } = I(e), B = (p) => {
n("clickButton"), a.value < u.value && (t.value += p);
}, v = () => {
n("clickButton"), t.value = "", l.value = !1, d.value = !1;
}, D = () => {
n("clickButton"), n("clickCustomButton");
}, L = () => {
l.value = !0, setTimeout(v, e.releaseErrorDelay);
}, S = () => {
d.value = !0, e.releaseSuccess && setTimeout(v, e.releaseSuccessDelay);
}, b = (p) => {
var g;
const m = parseInt(p.key, 10);
(!e.focusRequired || document.activeElement === e.activeElement || ((g = document.activeElement) == null ? void 0 : g.outerHTML.slice(1, 41)) === 'button class="vue-pincode-numbers-button') && (!isNaN(m) && m >= 0 && m <= 9 ? (r.value = m, B(m), setTimeout(() => {
r.value = null;
}, 50)) : p.key === "Backspace" ? t.value = t.value.slice(0, -1) : p.key === "Delete" && v());
};
return h(t, () => {
a.value === u.value && n("pincode", t.value);
}), h(y, () => {
y.value ? window.addEventListener("keydown", b) : window.removeEventListener("keydown", b);
}), P(() => {
e.keyboardInput && window.addEventListener("keydown", b);
}), T(() => {
e.keyboardInput && window.removeEventListener("keydown", b), v();
}), {
pincode: t,
pincodeError: l,
pincodeSuccess: d,
setupLength: u,
pincodeLength: a,
buttonDisabled: o,
activeButton: r,
clickPinButton: B,
resetPincode: v,
clickCustomButton: D,
triggerMiss: L,
triggerSuccess: S
};
}
}), j = ["id"], F = { class: "vue-pincode-numbers" }, H = ["onClick", "disabled"], K = { key: 1 }, A = ["disabled"], G = ["disabled"];
function J(e, n, u, t, l, d) {
const a = V("undo-icon");
return i(), c("div", {
id: e.name,
class: f(["vue-pincode", {
"is-success": e.pincodeSuccess,
"is-error": e.pincodeError
}])
}, [
s("div", {
class: f(["vue-pincode-fields", {
"is-success": e.pincodeSuccess,
"is-miss": e.pincodeError
}])
}, [
(i(!0), c(E, null, $(e.setupLength, (o) => (i(), c("span", {
key: o,
class: f({ active: e.pincodeLength >= o })
}, null, 2))), 128))
], 2),
s("div", F, [
(i(), c(E, null, $([1, 2, 3, 4, 5, 6, 7, 8, 9], (o, r) => s("button", {
key: r,
class: f(["vue-pincode-numbers-button shadow", { "is-pressed": e.activeButton === o }]),
onClick: (y) => e.clickPinButton(o),
disabled: e.buttonDisabled
}, [
s("span", null, _(o), 1)
], 10, H)), 64)),
e.customButton ? (i(), c("button", {
key: 0,
onClick: n[0] || (n[0] = (o) => e.clickCustomButton())
}, n[3] || (n[3] = [
s("span", { class: "is-custom" }, null, -1)
]))) : (i(), c("div", K)),
s("button", {
onClick: n[1] || (n[1] = (o) => e.clickPinButton(0)),
disabled: e.buttonDisabled,
class: f(["vue-pincode-numbers-button shadow", { "is-pressed": e.activeButton === 0 }])
}, n[4] || (n[4] = [
s("span", null, "0", -1)
]), 10, A),
s("button", {
class: "vue-pincode-undo",
onClick: n[2] || (n[2] = (o) => e.resetPincode()),
disabled: e.buttonDisabled
}, [
s("span", null, [
z(a)
])
], 8, G)
])
], 10, j);
}
const W = /* @__PURE__ */ C(O, [["render", J]]);
export {
W as default
};