adverich-kun-ui
Version:
Una librería de componentes Vue.js con Tailwind CSS
265 lines (264 loc) • 9.18 kB
JavaScript
import { ref as M, computed as p, watch as ee, nextTick as N } from "vue";
import { clamp as g, toRawNumberString as k, fromRawString as y } from "./numberFormatUtils.js";
function ue(n, c) {
const r = M(""), o = M(null), $ = M(null), h = M(!1), S = M(0);
let a = "";
const A = p(() => {
const e = Number(n.precision);
return e > 0 ? e + 1 : 1;
});
function b(e, t = 2, u = !1, l = !0) {
if (e == null || isNaN(e)) return "";
const f = Number(t), d = Number(e) < 0 ? "-" : "", i = Math.abs(Number(e));
let s = k(i, f);
const m = f + 1;
s.length < m && (s = s.padStart(m, "0"));
const w = s.slice(0, s.length - f) || "0";
let V = f > 0 ? s.slice(-f) : "";
f > 0 && u && (V = V.replace(/0+$/, ""));
const D = l ? w.replace(/\B(?=(\d{3})+(?!\d))/g, ".") : w;
return f === 0 || !V || V.length === 0 ? d + D : d + D + "," + V;
}
function x(e) {
if (e == null) return NaN;
let t = String(e).trim();
return t ? (t = t.replace(/\s+/g, ""), t = t.replace(/\./g, ""), t = t.replace(/,/g, "."), t = t.replace(/[^0-9\.\-]/g, ""), t === "" ? NaN : parseFloat(t)) : NaN;
}
const F = C((e) => {
c("update:modelValue", e);
}, 100);
function K(e) {
const t = o.value;
if (!t) return;
let u = t.value;
const l = Number(n.precision), f = t.selectionStart || 0;
if (l === 0) {
let i = u.replace(/[^0-9\-]/g, "");
i = i.replace(/^0+(\d)/, "$1"), r.value = i, N(() => {
if (!o.value) return;
o.value.value = i;
const m = Math.min(i.length, f);
o.value.setSelectionRange(m, m);
}), c("input", i);
const s = x(i);
isNaN(s) || F(s);
return;
}
if (u = u.replace(/\./g, ",").replace(/\s+/g, ""), u = u.replace(/[^0-9,\-]/g, ""), (u.match(/,/g) || []).length > 1) {
const i = u.split(","), s = i.shift() || "", m = i.join("");
u = s + (m.length ? "," + m : "");
}
if (u.includes(",")) {
const [i, s = ""] = u.split(","), m = s.slice(0, l);
u = i + (m.length ? "," + m : ",");
}
r.value = u, N(E), N(() => {
const i = f;
t.setSelectionRange(i, i);
}), c("input", u);
const d = x(u);
isNaN(d) || F(d);
}
function C(e, t = 250) {
let u;
return (...l) => {
clearTimeout(u), u = setTimeout(() => e(...l), t);
};
}
function E() {
o.value && (o.value.value = r.value);
}
function H(e) {
if (h.value = !0, !o.value) return;
const t = Number(n.modelValue), u = Number(n.precision);
if (isNaN(t)) {
r.value = "", c("focus");
return;
}
if (t === 0) {
r.value = "", N(() => {
try {
o.value.setSelectionRange(0, 0);
} catch {
}
}), c("focus");
return;
}
let l = k(Math.abs(t), u);
const f = l.slice(0, l.length - u) || "0";
let d = u > 0 ? l.slice(-u) : "";
u > 0 && (d = d.replace(/0+$/, "")), r.value = (t < 0 ? "-" : "") + f + (d.length ? "," + d : ""), N(() => {
try {
const i = r.value.length;
o.value.setSelectionRange(i, i);
} catch {
}
}), c("focus");
}
function j() {
h.value = !1;
let e = (r.value ?? "").toString().trim();
e || (e = "0");
let t = x(e);
isNaN(t) && (t = 0), t = g(t, n.min, n.max), r.value = b(t, Number(n.precision), !1), c("update:modelValue", t), c("blur");
}
function T(e) {
return Number(n.precision) === 0 ? e === "" ? "0" : e.replace(/^0+(\d)/, "$1") : e.padStart(A.value, "0");
}
function B(e, t) {
let u = 0;
for (let l = 0; l < t; l++)
/\d/.test(e[l]) && u++;
return u;
}
function U(e, t) {
let u = 0;
for (let l = 0; l < e.length; l++)
if (/\d/.test(e[l])) {
if (u === t) return l;
u++;
}
for (let l = e.length - 1; l >= 0; l--)
if (/\d/.test(e[l])) return l + 1;
return e.length;
}
function P() {
const e = Number(n.precision) + 1;
a = String(a || "").padStart(e, "0");
const t = Math.max(1, a.length - Number(n.precision)), u = a.slice(0, t) || "0", l = a.slice(t).padEnd(Number(n.precision), "0").slice(0, Number(n.precision)), f = `${u}.${l}`, d = parseFloat(f), i = g(d, n.min, n.max);
a = k(i, Number(n.precision)), r.value = b(i, Number(n.precision), !1), c("update:modelValue", i), c("input", i), N(() => {
if (o.value)
try {
const s = r.value;
let m = U(s, S.value);
for (; m < s.length && !/\d/.test(s[m]); ) m++;
o.value.setSelectionRange(m, m);
} catch {
o.value.setSelectionRange(r.value.length, r.value.length);
}
});
}
function q() {
h.value = !1, a = T(a);
const e = y(a, Number(n.precision)), t = g(e, n.min, n.max);
a = k(t, Number(n.precision)), a = T(a), r.value = b(t, Number(n.precision), !1), c("update:modelValue", t), c("blur");
}
function z(e) {
h.value = !0, N(() => {
var u;
if (!o.value) return;
if ((e == null ? void 0 : e.relatedTarget) !== void 0 || ((u = e == null ? void 0 : e.sourceCapabilities) == null ? void 0 : u.firesTouchEvents) === !1) {
const l = r.value.length;
o.value.setSelectionRange(l, l), S.value = r.value.replace(/\D/g, "").length;
} else {
const l = o.value.selectionStart || 0;
S.value = B(r.value, l);
}
}), c("focus");
}
function G(e) {
var t;
(t = e.preventDefault) == null || t.call(e);
}
function J(e) {
if (n.formatMode !== "bank") return;
const { key: t, target: u } = e, l = /^[0-9]$/.test(t), f = t === "Backspace", d = t === "Delete", i = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t), s = e.ctrlKey || e.metaKey, m = t === "Home", w = t === "End";
if (t === "Tab") return;
if (m) {
N(() => {
if (!o.value) return;
const L = r.value.search(/\d/);
o.value.setSelectionRange(L, L);
});
return;
}
if (w) {
N(() => {
if (!o.value) return;
const R = r.value;
o.value.setSelectionRange(R.length, R.length);
});
return;
}
if (i || s) return;
const D = (u == null ? void 0 : u.selectionStart) ?? 0, _ = r.value || "", v = B(_, D);
e.preventDefault();
const I = Number(n.precision) + 1;
for (; a.length < I; ) a = "0" + a;
if (l)
a = a.substring(0, v) + t + a.substring(v), S.value = v + 1;
else if (f) {
if (v > 0) {
const R = v - 1;
a = a.substring(0, R) + a.substring(R + 1), S.value = R;
}
} else if (d)
v < a.length && (a = a.substring(0, v) + a.substring(v + 1), S.value = v);
else return;
for (; a.length < I; ) a = "0" + a;
P();
}
function O() {
let e;
n.formatMode === "bank" ? (e = y(a, Number(n.precision)) || 0, e = g(e + Number(n.step), n.min, n.max), a = k(e, Number(n.precision)), r.value = b(e, Number(n.precision), !1), c("update:modelValue", e), c("input", e)) : (e = Number(n.modelValue ?? 0) || 0, e = g(e + Number(n.step), n.min, n.max), r.value = b(e, Number(n.precision), !1), c("update:modelValue", e), c("input", e));
}
function Q() {
let e;
n.formatMode === "bank" ? (e = y(a, Number(n.precision)) || 0, e = g(e - Number(n.step), n.min, n.max), a = k(e, Number(n.precision)), r.value = b(e, Number(n.precision), !1), c("update:modelValue", e), c("input", e)) : (e = Number(n.modelValue ?? 0) || 0, e = g(e - Number(n.step), n.min, n.max), r.value = b(e, Number(n.precision), !1), c("update:modelValue", e), c("input", e));
}
function W() {
n.formatMode === "bank" ? (a = "0".repeat(Number(n.precision) + 1), S.value = Number(n.precision) + 1, P(), N(() => {
var e, t;
return (t = (e = o.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
})) : (r.value = "", c("update:modelValue", null), N(() => {
var e, t;
return (t = (e = o.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
}));
}
ee(
[() => n.modelValue, () => n.precision, () => n.formatMode],
([e, t, u]) => {
if (u !== "bank") {
if (h.value) {
const l = Number(e ?? 0);
l === 0 ? r.value = "" : r.value = b(l, Number(t), !0, !1);
} else
r.value = b(Number(e ?? 0), Number(t), !1, !0);
return;
}
if (e == null || isNaN(e))
r.value = b(0, Number(t), !1), a = "0".repeat(Number(t) + 1);
else {
const l = Number(e), f = g(l, n.min, n.max);
a = k(f, Number(t)), a.length < Number(t) + 1 && (a = a.padStart(Number(t) + 1, "0")), r.value = b(f, Number(t), !1);
}
},
{ immediate: !0 }
);
function X(e) {
return n.formatMode !== "bank" ? K() : G(e);
}
function Y(e) {
return n.formatMode !== "bank" ? H() : z(e);
}
function Z(e) {
return n.formatMode !== "bank" ? j() : q();
}
return {
inputValue: r,
numberInput: o,
rootRef: $,
validateKey: J,
handleFocus: Y,
handleBlur: Z,
handleInput: X,
onIncrement: O,
onDecrement: Q,
onClear: W,
isActive: h,
focus: h
};
}
export {
ue as useKunNumberField
};