adverich-kun-ui/dist/components/KunNumberField/src/composables/useKunNumberFieldComposable.js

Una librería de componentes Vue.js con Tailwind CSS

import { ref as w, computed as q, watch as G, nextTick as T } from "vue";
import { format as d, clamp as x, toRawNumberString as D, fromRawString as y } from "./numberFormatUtils.js";
function W(i, s) {
  const l = w(""), c = w(null), k = w(null), R = w(!1), m = w(0);
  let t = "";
  const F = q(() => {
    const e = Number(i.precision);
    return e > 0 ? e + 1 : 1;
  });
  function h(e) {
    return Number(i.precision) === 0 ? e === "" ? "0" : e.replace(/^0+(\d)/, "$1") : e.padStart(F.value, "0");
  }
  G(
    [() => i.modelValue, () => i.precision],
    ([e, n], [r, u]) => {
      const N = Number(n) !== Number(u);
      if (e == null || isNaN(e))
        l.value = d(0, { ...i, precision: n }), t = "0".repeat(Number(n) + 1);
      else {
        const v = parseFloat(e), o = x(v, i.min, i.max);
        N && (t = D(o, Number(n))), t.length < Number(n) + 1 && (t = t.padStart(Number(n) + 1, "0")), l.value = d(o, { ...i, precision: n });
      }
    },
    { immediate: !0 }
  );
  function K(e) {
    const { key: n, target: r } = e, u = /^[0-9]$/.test(n), N = n === "Backspace", v = n === "Delete", o = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(n), b = e.ctrlKey || e.metaKey, f = n === "Home", U = n === "End";
    if (n === "Tab")
      return;
    if (f) {
      T(() => {
        if (!c.value) return;
        const S = l.value.search(/\d/);
        c.value.setSelectionRange(S, S);
      });
      return;
    }
    if (U) {
      T(() => {
        if (!c.value) return;
        const a = l.value;
        c.value.setSelectionRange(a.length, a.length);
      });
      return;
    }
    if (o || b) return;
    const V = B(l.value, r.selectionStart);
    e.preventDefault();
    const L = Number(i.precision) + 1;
    for (; t.length < L; )
      t = "0" + t;
    const g = A(l.value, V);
    if (u)
      t = t.substring(0, g) + n + t.substring(g), m.value = g + 1;
    else if (N && V > 0) {
      const a = A(l.value, V), S = a - 1;
      if (t.length <= Number(i.precision) + 1) {
        const j = Math.max(0, a - 1);
        t = t.slice(0, j) + t.slice(a), t = h(t), m.value = a, C();
        return;
      }
      a > 0 && (t = t.slice(0, S) + t.slice(a), t = h(t), m.value = S);
    } else v && V < l.value.length && g < t.length && (t = t.substring(0, g) + t.substring(g + 1), m.value = g);
    for (t = h(t); t.length < L; )
      t = "0" + t;
    C();
  }
  function A(e, n) {
    let r = 0;
    for (let u = 0; u < n; u++)
      /\d/.test(e[u]) && r++;
    return r;
  }
  function $(e, n) {
    let r = 0;
    for (let u = 0; u < e.length; u++)
      if (/\d/.test(e[u])) {
        if (r === n)
          return u;
        r++;
      }
    for (let u = e.length - 1; u >= 0; u--)
      if (/\d/.test(e[u]))
        return u + 1;
    return e.length;
  }
  function B(e, n) {
    for (; n < e.length && !/\d/.test(e[n]); )
      n++;
    if (n >= e.length)
      for (n = e.length; n > 0 && !/\d/.test(e[n - 1]); )
        n--;
    const r = e.search(/\d/);
    return n < r && (n = r), n;
  }
  function C() {
    const e = Number(i.precision) + 1;
    t.padStart(e, "0");
    const n = Math.max(1, t.length - Number(i.precision)), r = t.slice(0, n) || "0", u = t.slice(n).padEnd(Number(i.precision), "0").slice(0, Number(i.precision)), N = `${r}.${u}`, v = parseFloat(N), o = x(v, i.min, i.max);
    t = D(o, Number(i.precision)), l.value = d(o, i), s("update:modelValue", o), s("input", o), T(() => {
      if (c.value)
        try {
          const b = l.value;
          let f = $(b, m.value);
          for (; f < b.length && !/\d/.test(b[f]); )
            f++;
          c.value.setSelectionRange(f, f);
        } catch {
          c.value.setSelectionRange(l.value.length, l.value.length);
        }
    });
  }
  function E() {
    R.value = !1, t = h(t);
    const e = y(t, Number(i.precision)), n = x(e, i.min, i.max);
    t = D(n, Number(i.precision)), t = h(t), l.value = d(n, i), s("update:modelValue", n), s("blur");
  }
  function M() {
    var n;
    R.value = !0;
    const e = ((n = c.value) == null ? void 0 : n.selectionStart) || 0;
    m.value = A(l.value, e), s("focus");
  }
  function H() {
    let e = y(t, Number(i.precision)) || 0;
    e = x(e + Number(i.step), i.min, i.max), t = D(e, Number(i.precision)), l.value = d(e, i), s("update:modelValue", e);
  }
  function I() {
    let e = y(t, Number(i.precision)) || 0;
    e = x(e - Number(i.step), i.min, i.max), t = D(e, Number(i.precision)), l.value = d(e, i), s("update:modelValue", e);
  }
  function z() {
    var e;
    t = "0".repeat(Number(i.precision) + 1), m.value = Number(i.precision) + 1, C(), (e = c.value) == null || e.focus();
  }
  return {
    inputValue: l,
    numberInput: c,
    rootRef: k,
    validateKey: K,
    handleFocus: M,
    handleBlur: E,
    onIncrement: H,
    onDecrement: I,
    onClear: z,
    isActive: R,
    focus: R
  };
}
export {
  W as useKunNumberField
};