adverich-kun-ui 0.1.373 → 0.1.375

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

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

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

@@ -1,9 +1,9 @@
-import { ref as t, computed as p, watch as g, nextTick as y } from "vue";
-import { normalizeNumber as z } from "./numberFormatUtils.js";
-function N(e, a) {
-  const u = t(e.modelValue), r = t(null), m = t(null), f = t(0);
+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 = z(n, e.separator).split(e.separator);
+    const l = k(n, e.separator).split(e.separator);
     if (l.length > 2) {
       d();
       return;
@@ -13,7 +13,7 @@ function N(e, a) {
     i === u.value ? d() : u.value = i, a("update:modelValue", i);
   }
   function d() {
-    f.value++, y(() => {
+    f.value++, K(() => {
       var n;
       (n = r.value) == null || n.focus();
     });
@@ -21,37 +21,41 @@ function N(e, a) {
   function v() {
     c((u.value || 0) + e.step);
   }
-  function s() {
+  function m() {
     c((u.value || 0) - e.step);
   }
-  function V() {
+  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();
+  }
   const o = t(!1);
-  function h() {
+  function p() {
     o.value = !0, u.value || (u.value = ""), a("focus");
   }
   function I() {
     o.value = !1, u.value || (u.value = 0), a("blur");
   }
-  const b = p(() => o.value || !!e.modelValue || e.dirty);
+  const w = b(() => o.value || !!e.modelValue || e.dirty);
   return g(() => e.modelValue, (n) => {
     u.value = n;
   }), {
     inputValue: u,
     numberInput: r,
-    rootRef: m,
+    rootRef: s,
     inputKey: f,
     updateValue: c,
     onIncrement: v,
-    onDecrement: s,
-    onClear: V,
+    onDecrement: m,
+    onClear: h,
+    validateKey: V,
     focus: o,
-    handleFocus: h,
-    isActive: b,
+    handleFocus: p,
+    isActive: w,
     handleBlur: I
   };
 }
 export {
-  N as useKunNumberField
+  C as useKunNumberField
 };

package/package.json

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