adverich-kun-ui 0.1.375 → 0.1.376

package/dist/components/KunNumberField/src/components/KunNumberField.vue.js

@@ -1,212 +1,205 @@
-import { getCurrentInstance as P, useSlots as R, watch as U, computed as H, createElementBlock as s, openBlock as l, createCommentVNode as n, createElementVNode as d, normalizeClass as b, unref as r, toDisplayString as u, mergeProps as L, createBlock as I, renderSlot as V, Fragment as K, renderList as q } from "vue";
-import { KunNumberFieldProps as G } from "../composables/KunNumberFieldProps.js";
-import { useKunNumberField as J } from "../composables/useKunNumberFieldComposable.js";
-import j from "../../../KunIcon/src/components/KunIcon.vue.js";
-const O = {
+import { getCurrentInstance as $, useSlots as z, computed as E, createElementBlock as l, openBlock as s, createCommentVNode as n, createElementVNode as i, normalizeClass as p, toDisplayString as u, mergeProps as P, unref as o, createBlock as I, renderSlot as V, Fragment as j, renderList as R } from "vue";
+import { KunNumberFieldProps as U } from "../composables/KunNumberFieldProps.js";
+import { useKunNumberField as H } from "../composables/useKunNumberFieldComposable.js";
+import x from "../../../KunIcon/src/components/KunIcon.vue.js";
+const L = {
   key: 0,
   class: "h-full"
-}, Q = ["disabled"], T = {
+}, q = ["disabled"], G = {
   key: 1,
   class: "mx-2"
-}, W = {
+}, J = {
   key: 2,
   class: "flex items-center justify-center h-full pl-1"
-}, X = ["value", "placeholder", "readonly", "disabled", "maxlength", "aria-invalid"], Y = ["disabled"], Z = {
+}, O = ["value", "placeholder", "readonly", "disabled", "maxlength", "aria-invalid"], Q = ["disabled"], T = {
   key: 0,
   class: "flex items-center h-full"
-}, _ = ["disabled"], ee = ["disabled"], te = {
+}, W = ["disabled"], X = ["disabled"], Y = {
   key: 1,
   class: "flex flex-col items-center justify-center border-l border-slate-600"
-}, oe = ["disabled"], re = ["disabled"], le = {
+}, Z = ["disabled"], _ = ["disabled"], ee = {
   key: 5,
   class: "flex items-center justify-center h-full pr-1"
-}, se = {
+}, te = {
   key: 6,
   class: "h-full"
-}, ne = ["disabled"], de = {
+}, oe = ["disabled"], re = {
   key: 7,
   class: "ml-2"
-}, ie = {
+}, se = {
   key: 0,
   class: "h-[1.25rem]"
-}, ae = {
+}, le = {
   key: 0,
   class: "text-red-500 text-sm text-center"
-}, ue = { key: 0 }, pe = { key: 1 }, be = {
+}, ne = { key: 0 }, ie = { key: 1 }, de = {
   key: 1,
   class: "text-xs text-center"
-}, me = {
+}, ye = {
   __name: "KunNumberField",
-  props: G,
+  props: U,
   emits: [
     "update:modelValue",
     "focus",
+    "input",
     "blur",
     "handleClick",
     "keyDown",
     "keyUp"
   ],
-  setup(A, { expose: D, emit: F }) {
-    const p = A, y = F, c = `number-input-${P().uid}`, m = R(), x = !!m["prepend-icon"], B = !!m["append-icon"], {
-      inputValue: f,
-      numberInput: k,
-      rootRef: v,
-      inputKey: M,
-      updateValue: N,
-      onIncrement: i,
+  setup(D, { expose: F, emit: K }) {
+    const b = D, y = K, f = `number-input-${$().uid}`, k = z(), A = !!k["prepend-icon"], B = !!k["append-icon"], {
+      inputValue: m,
+      numberInput: c,
+      rootRef: h,
+      onIncrement: d,
       onDecrement: a,
-      onClear: h,
-      validateKey: S,
+      onClear: v,
+      validateKey: M,
       focus: w,
       handleFocus: g,
-      isActive: $,
       handleBlur: C
-    } = J(p, y);
-    D({
-      numberInput: k,
-      rootRef: v,
+    } = H(b, y);
+    F({
+      numberInput: c,
+      rootRef: h,
       focus: () => {
         var e;
-        return (e = k.value) == null ? void 0 : e.focus();
+        return (e = c.value) == null ? void 0 : e.focus();
       }
-    }), U(() => p.modelValue, (e) => {
-      f.value = e;
     });
-    const z = H(() => p.density === "compact" ? "p-1" : p.density === "comfortable" ? "p-2" : "p-3");
-    return (e, o) => (l(), s("div", {
-      class: "w-full flex flex-col relative",
+    const N = E(() => b.density === "compact" ? "p-1" : b.density === "comfortable" ? "p-2" : "p-3");
+    return (e, r) => (s(), l("div", {
+      class: "w-full flex flex-col relative h-fit",
       ref_key: "rootRef",
-      ref: v
+      ref: h
     }, [
-      e.label ? (l(), s("label", {
+      e.label ? (s(), l("label", {
         key: 0,
-        for: c,
-        class: b([
+        for: f,
+        class: p([
           e.labelColor,
           "absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10",
-          r($) || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"
+          "-top-2.25 text-xs opacity-80"
         ])
       }, u(e.label), 3)) : n("", !0),
-      d("div", L({ class: "w-full flex flex-col justify-center relative" }, e.$attrs), [
-        d("div", {
-          class: b(["flex items-center w-full h-full border", [
+      i("div", P({ class: "w-full flex flex-col justify-center relative" }, e.$attrs), [
+        i("div", {
+          class: p(["flex items-center w-full h-full border", [
             e.bgInput,
             e.rounded,
-            r(w) ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : e.borderColor,
+            o(w) ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : e.borderColor,
             e.disabled ? "opacity-60 cursor-not-allowed" : "cursor-text",
             e.error ? "bg-red-200 dark:bg-red-900" : ""
           ]])
         }, [
-          !e.noArrows && e.controlVariant === "split" ? (l(), s("div", O, [
-            d("button", {
+          !e.noArrows && e.controlVariant === "split" ? (s(), l("div", L, [
+            i("button", {
               type: "button",
               class: "p-3 text-lg border-r border-slate-600 text-black dark:text-white disabled:opacity-50 cursor-pointer hover:opacity-80",
-              onClick: o[0] || (o[0] = (...t) => r(a) && r(a)(...t)),
+              onClick: r[0] || (r[0] = (...t) => o(a) && o(a)(...t)),
               disabled: e.disabled || e.readonly
-            }, "−", 8, Q)
+            }, "−", 8, q)
           ])) : n("", !0),
-          e.prefix ? (l(), s("div", T, u(e.prefix), 1)) : n("", !0),
-          e.prependIcon || x ? (l(), s("div", W, [
-            e.prependIcon ? (l(), I(j, {
+          e.prefix ? (s(), l("div", G, u(e.prefix), 1)) : n("", !0),
+          e.prependIcon || A ? (s(), l("div", J, [
+            e.prependIcon ? (s(), I(x, {
               key: 0,
               icon: e.prependIcon
             }, null, 8, ["icon"])) : V(e.$slots, "prepend-icon", { key: 1 })
           ])) : n("", !0),
-          (l(), s("input", {
-            id: c,
+          i("input", {
+            id: f,
             ref_key: "numberInput",
-            ref: k,
-            key: r(M) + e.modelValue,
+            ref: c,
             type: "text",
-            value: r(f),
+            value: o(m),
             placeholder: e.placeholder,
             readonly: e.readonly,
             disabled: e.disabled,
             maxlength: e.maxlength,
             autocomplete: "off",
-            class: b(["w-full h-full bg-transparent rounded focus:outline-none", [z.value, e.textColor, e.placeholderColor, e.textCenter ? "text-center" : ""]]),
+            class: p(["w-full h-full bg-transparent rounded focus:outline-none", [N.value, e.textColor, e.placeholderColor, e.textCenter ? "text-center" : ""]]),
             "aria-invalid": e.error ? "true" : "false",
-            onKeypress: o[1] || (o[1] = (t) => r(S)(t)),
-            onBlur: o[2] || (o[2] = (...t) => r(C) && r(C)(...t)),
-            onFocus: o[3] || (o[3] = (...t) => r(g) && r(g)(...t)),
-            onInput: o[4] || (o[4] = (t) => r(N)(t.target.value)),
-            onKeydown: o[5] || (o[5] = (t) => y("keyDown", t)),
-            onKeyup: o[6] || (o[6] = (t) => y("keyUp", t)),
+            onBlur: r[1] || (r[1] = (...t) => o(C) && o(C)(...t)),
+            onFocus: r[2] || (r[2] = (...t) => o(g) && o(g)(...t)),
+            onKeydown: r[3] || (r[3] = (t) => (o(M)(t), y("keyDown", t))),
+            onKeyup: r[4] || (r[4] = (t) => y("keyUp", t)),
             inputmode: "decimal",
             pattern: "[0-9]+([\\.,][0-9]+)?"
-          }, null, 42, X)),
-          e.clearable && r(f) != null ? (l(), s("button", {
+          }, null, 42, O),
+          e.clearable && o(m) != null ? (s(), l("button", {
             key: 3,
             type: "button",
-            onClick: o[7] || (o[7] = (...t) => r(h) && r(h)(...t)),
-            class: b(["ml-2", e.textColor]),
+            onClick: r[5] || (r[5] = (...t) => o(v) && o(v)(...t)),
+            class: p(["ml-2", e.textColor]),
             disabled: e.disabled || e.readonly
-          }, " × ", 10, Y)) : n("", !0),
-          e.noArrows ? n("", !0) : (l(), s(K, { key: 4 }, [
-            e.controlVariant === "default" ? (l(), s("div", Z, [
-              d("button", {
+          }, " × ", 10, Q)) : n("", !0),
+          e.noArrows ? n("", !0) : (s(), l(j, { key: 4 }, [
+            e.controlVariant === "default" ? (s(), l("div", T, [
+              i("button", {
                 type: "button",
                 class: "flex items-center border-l border-slate-600 p-3 justify-center text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer hover:opacity-80",
-                onClick: o[8] || (o[8] = (...t) => r(i) && r(i)(...t)),
+                onClick: r[6] || (r[6] = (...t) => o(d) && o(d)(...t)),
                 disabled: e.disabled || e.readonly
-              }, " ▲ ", 8, _),
-              d("button", {
+              }, " ▲ ", 8, W),
+              i("button", {
                 type: "button",
                 class: "flex items-center border-l border-slate-600 p-3 justify-center text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer hover:opacity-80",
-                onClick: o[9] || (o[9] = (...t) => r(a) && r(a)(...t)),
+                onClick: r[7] || (r[7] = (...t) => o(a) && o(a)(...t)),
                 disabled: e.disabled || e.readonly
-              }, " ▼ ", 8, ee)
+              }, " ▼ ", 8, X)
             ])) : n("", !0),
-            e.controlVariant === "stacked" ? (l(), s("div", te, [
-              d("div", {
+            e.controlVariant === "stacked" ? (s(), l("div", Y, [
+              i("div", {
                 class: "border-b border-slate-600 pb-1 px-3 flex hover:opacity-80 cursor-pointer",
-                onClick: o[10] || (o[10] = (...t) => r(i) && r(i)(...t))
+                onClick: r[8] || (r[8] = (...t) => o(d) && o(d)(...t))
               }, [
-                d("button", {
+                i("button", {
                   type: "button",
                   class: "text-xs text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer",
                   disabled: e.disabled || e.readonly
-                }, "▲", 8, oe)
+                }, "▲", 8, Z)
               ]),
-              d("div", {
+              i("div", {
                 class: "border-t border-slate-600 pt-1 px-3 flex hover:opacity-80 cursor-pointer",
-                onClick: o[11] || (o[11] = (...t) => r(a) && r(a)(...t))
+                onClick: r[9] || (r[9] = (...t) => o(a) && o(a)(...t))
               }, [
-                d("button", {
+                i("button", {
                   type: "button",
                   class: "text-xs text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer",
                   disabled: e.disabled || e.readonly
-                }, "▼", 8, re)
+                }, "▼", 8, _)
               ])
             ])) : n("", !0)
           ], 64)),
-          e.appendIcon || B ? (l(), s("div", le, [
-            e.appendIcon ? (l(), I(j, {
+          e.appendIcon || B ? (s(), l("div", ee, [
+            e.appendIcon ? (s(), I(x, {
               key: 0,
               icon: e.appendIcon
             }, null, 8, ["icon"])) : V(e.$slots, "append-icon", { key: 1 })
           ])) : n("", !0),
-          !e.noArrows && e.controlVariant === "split" ? (l(), s("div", se, [
-            d("button", {
+          !e.noArrows && e.controlVariant === "split" ? (s(), l("div", te, [
+            i("button", {
               type: "button",
               class: "p-3 text-lg border-l border-slate-600 text-black dark:text-white disabled:opacity-50 cursor-pointer hover:opacity-80",
-              onClick: o[12] || (o[12] = (...t) => r(i) && r(i)(...t)),
+              onClick: r[10] || (r[10] = (...t) => o(d) && o(d)(...t)),
               disabled: e.disabled || e.readonly
-            }, "+", 8, ne)
+            }, "+", 8, oe)
           ])) : n("", !0),
-          e.suffix ? (l(), s("div", de, u(e.suffix), 1)) : n("", !0)
+          e.suffix ? (s(), l("div", re, u(e.suffix), 1)) : n("", !0)
         ], 2),
-        e.hideDetails ? n("", !0) : (l(), s("div", ie, [
-          e.error || e.errorMessages ? (l(), s("div", ae, [
-            Array.isArray(e.errorMessages) ? (l(), s("div", ue, [
-              (l(!0), s(K, null, q(e.errorMessages, (t, E) => (l(), s("div", { key: E }, u(t), 1))), 128))
-            ])) : typeof e.errorMessages == "string" ? (l(), s("div", pe, u(e.errorMessages), 1)) : n("", !0)
-          ])) : e.hint && (e.persistentHint || r(w)) ? (l(), s("div", be, u(e.hint), 1)) : n("", !0)
+        e.hideDetails ? n("", !0) : (s(), l("div", se, [
+          e.error || e.errorMessages ? (s(), l("div", le, [
+            Array.isArray(e.errorMessages) ? (s(), l("div", ne, [
+              (s(!0), l(j, null, R(e.errorMessages, (t, S) => (s(), l("div", { key: S }, u(t), 1))), 128))
+            ])) : typeof e.errorMessages == "string" ? (s(), l("div", ie, u(e.errorMessages), 1)) : n("", !0)
+          ])) : e.hint && (e.persistentHint || o(w)) ? (s(), l("div", de, u(e.hint), 1)) : n("", !0)
         ]))
       ], 16)
     ], 512));
   }
 };
 export {
-  me as default
+  ye as default
 };

package/dist/components/KunNumberField/src/composables/KunNumberFieldProps.js

@@ -41,7 +41,7 @@ const e = {
   max: { type: [Number, String], default: 1 / 0 },
   step: { type: [Number, String], default: 1 },
   locale: { type: String, default: "es-AR" },
-  separator: { type: String, default: "." },
+  separator: { type: String, default: "," },
   useGrouping: { type: Boolean, default: !0 },
   precision: { type: [Number, String], default: 2 }
 };

package/dist/components/KunNumberField/src/composables/numberFormatUtils.js

@@ -1,7 +1,24 @@
-function n(r, l = ",") {
-  const e = r.replace(/[^\d.,]/g, "");
-  return l === "," ? e.replace(/\./g, ",") : e.replace(/,/g, ".");
+function o(n, t, r) {
+  return Math.min(Math.max(n, Number(t)), Number(r));
+}
+function m(n, t) {
+  return new Intl.NumberFormat(t.locale, {
+    minimumFractionDigits: t.precision,
+    maximumFractionDigits: t.precision,
+    useGrouping: t.useGrouping
+  }).format(n);
+}
+function u(n, t) {
+  return parseFloat(n).toFixed(t).replace(".", "").replace(",", "");
+}
+function c(n, t) {
+  if (!n || n.length === 0) return 0;
+  const r = n.padStart(t + 1, "0"), e = r.slice(0, -t), i = r.slice(-t), a = `${e}.${i}`;
+  return parseFloat(a);
 }
 export {
-  n as normalizeNumber
+  o as clamp,
+  m as format,
+  c as fromRawString,
+  u as toRawNumberString
 };

package/dist/components/KunNumberField/src/composables/useKunNumberFieldComposable.js

@@ -1,61 +1,58 @@
-import { ref as t, computed as b, watch as g, nextTick as K } from "vue";
-import { normalizeNumber as k } from "./numberFormatUtils.js";
-function C(e, a) {
-  const u = t(e.modelValue), r = t(null), s = t(null), f = t(0);
-  function c(n) {
-    const l = k(n, e.separator).split(e.separator);
-    if (l.length > 2) {
-      d();
+import { ref as o, watch as R } from "vue";
+import { format as i, toRawNumberString as m, fromRawString as r, clamp as f } from "./numberFormatUtils.js";
+function I(e, a) {
+  const u = o(""), x = o(null), N = o(null), c = o(!1);
+  let t = "";
+  R(
+    () => e.modelValue,
+    (n) => {
+      n == null || isNaN(n) ? (u.value = i(0, e), t = "") : (t = m(n, e.precision), u.value = i(parseFloat(n), e));
+    },
+    { immediate: !0 }
+  );
+  function V(n) {
+    const l = n.key, s = /^[0-9]$/.test(l), v = l === "Backspace";
+    if (!s && !v) {
+      n.preventDefault();
       return;
     }
-    l.length === 2 && l[1].length > e.precision && (l[1] = l[1].slice(0, e.precision));
-    const i = l.join(e.separator);
-    i === u.value ? d() : u.value = i, a("update:modelValue", i);
-  }
-  function d() {
-    f.value++, K(() => {
-      var n;
-      (n = r.value) == null || n.focus();
-    });
+    s ? t += l : v && (t = t.slice(0, -1));
+    const b = t.padStart(e.precision + 1, "0"), h = b.slice(0, -e.precision), y = b.slice(-e.precision), B = parseFloat(`${h}.${y}`), d = f(B, e.min, e.max);
+    u.value = i(d, e), a("input", d), a("update:modelValue", d), n.preventDefault();
   }
-  function v() {
-    c((u.value || 0) + e.step);
+  function g() {
+    c.value = !1;
+    const n = r(t, e.precision), l = f(n, e.min, e.max);
+    t = m(l, e.precision), u.value = i(l, e), a("update:modelValue", l), a("blur");
   }
-  function m() {
-    c((u.value || 0) - e.step);
+  function k() {
+    c.value = !0, a("focus");
   }
-  function h() {
-    u.value = null, a("update:modelValue", null);
-  }
-  function V(n) {
-    ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "‚", ",", "Backspace", "Delete", "ArrowLeft", "ArrowRight"].includes(n.key) || n.preventDefault();
+  function D() {
+    let n = r(t, e.precision) || 0;
+    n = f(n + Number(e.step), e.min, e.max), t = m(n, e.precision), u.value = i(n, e), a("update:modelValue", n);
   }
-  const o = t(!1);
-  function p() {
-    o.value = !0, u.value || (u.value = ""), a("focus");
+  function F() {
+    let n = r(t, e.precision) || 0;
+    n = f(n - Number(e.step), e.min, e.max), t = m(n, e.precision), u.value = i(n, e), a("update:modelValue", n);
   }
-  function I() {
-    o.value = !1, u.value || (u.value = 0), a("blur");
+  function S() {
+    t = "", u.value = i(0, e), a("update:modelValue", null);
   }
-  const w = b(() => o.value || !!e.modelValue || e.dirty);
-  return g(() => e.modelValue, (n) => {
-    u.value = n;
-  }), {
+  return {
     inputValue: u,
-    numberInput: r,
-    rootRef: s,
-    inputKey: f,
-    updateValue: c,
-    onIncrement: v,
-    onDecrement: m,
-    onClear: h,
+    numberInput: x,
+    rootRef: N,
     validateKey: V,
-    focus: o,
-    handleFocus: p,
-    isActive: w,
-    handleBlur: I
+    handleFocus: k,
+    handleBlur: g,
+    onIncrement: D,
+    onDecrement: F,
+    onClear: S,
+    isActive: c,
+    focus: c
   };
 }
 export {
-  C as useKunNumberField
+  I as useKunNumberField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.375",
+  "version": "0.1.376",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",