adverich-kun-ui 0.1.108 → 0.1.109

package/dist/components/KunSlider/src/components/KunThumb.vue.js

@@ -1,8 +1,8 @@
-import { createElementBlock as o, openBlock as l, normalizeStyle as m, normalizeClass as s, createCommentVNode as c, toDisplayString as b } from "vue";
-const d = ["aria-valuemin", "aria-valuemax", "aria-valuenow"], p = {
+import { createElementBlock as n, openBlock as o, normalizeStyle as s, normalizeClass as c, createCommentVNode as d, toDisplayString as b } from "vue";
+const y = ["aria-valuemin", "aria-valuemax", "aria-valuenow"], h = {
   key: 0,
   class: "absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-200/40 dark:bg-gray-800/40 text-black dark:text-white text-xs px-3 py-2 rounded-full whitespace-nowrap select-none"
-}, y = {
+}, f = {
   __name: "KunThumb",
   props: {
     value: Number,
@@ -12,34 +12,44 @@ const d = ["aria-valuemin", "aria-valuemax", "aria-valuenow"], p = {
       type: String,
       default: "bg-blue-500"
     },
-    min: Number,
-    max: Number
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    }
   },
   emits: ["update"],
-  setup(e, { emit: r }) {
-    const n = r;
-    function u(t) {
-      let a = 0;
-      if (t.key === "ArrowRight" || t.key === "ArrowUp") a = props.step;
-      else if (t.key === "ArrowLeft" || t.key === "ArrowDown") a = -props.step;
+  setup(e, { emit: u }) {
+    const t = e, r = u;
+    function i(a) {
+      let l = 0;
+      if (a.key === "ArrowRight" || a.key === "ArrowUp") l = t.step;
+      else if (a.key === "ArrowLeft" || a.key === "ArrowDown") l = -t.step;
       else return;
-      const i = Math.min(props.max, Math.max(props.min, props.value + a));
-      n("update", i);
+      const m = Math.min(t.max, Math.max(t.min, t.value + l));
+      r("update", m);
     }
-    return (t, a) => (l(), o("div", {
-      class: s(["absolute z-40 -top-1 w-4 h-4 rounded-full cursor-pointer touch-none", [e.thumbColor]]),
-      style: m([e.thumbStyle]),
+    return (a, l) => (o(), n("div", {
+      class: c(["absolute z-40 -top-1 w-4 h-4 rounded-full cursor-pointer touch-none", [e.thumbColor]]),
+      style: s([e.thumbStyle]),
       role: "slider",
       tabindex: "0",
       "aria-valuemin": e.min,
       "aria-valuemax": e.max,
       "aria-valuenow": e.value,
-      onKeydown: u
+      onKeydown: i
     }, [
-      e.thumbLabel ? (l(), o("div", p, b(e.value), 1)) : c("", !0)
-    ], 46, d));
+      e.thumbLabel ? (o(), n("div", h, b(e.value), 1)) : d("", !0)
+    ], 46, y));
   }
 };
 export {
-  y as default
+  f as default
 };

package/dist/components/KunSlider/src/composables/useSlider.js

@@ -1,31 +1,46 @@
-import { computed as c } from "vue";
-function v(e, m, b) {
-  const u = c({
+import { computed as u, watch as x } from "vue";
+function g(e, l, V) {
+  const m = u({
     get: () => e.range ? [...e.modelValue] : Number(e.modelValue),
-    set: (t) => m("update:modelValue", e.range ? t : t[0])
-  }), r = c(() => {
-    const t = Number(e.min), a = Number(e.max), n = Number(e.step);
-    return n > 0 ? Math.floor((a - t) / n) + 1 : 0;
-  }), l = (t) => {
-    const a = Number(e.min), n = Number(e.max);
-    return (t - a) / (n - a) * 97;
-  }, o = c(() => (e.range ? u.value : [u.value]).map((a) => ({
-    [e.vertical ? "bottom" : "left"]: `${l(a)}%`
-  }))), i = c(() => {
-    const t = e.range ? u.value : [u.value], a = `${l(Math.min(...t))}%`, n = `${l(Math.max(...t))}%`;
-    return e.vertical ? { bottom: a, top: `calc(100% - ${n})` } : { left: a, right: `calc(100% - ${n})` };
+    set: (t) => l("update:modelValue", e.range ? t : t[0])
   });
-  function s(t) {
-    m("update:modelValue", t);
+  x(
+    () => [e.min, e.max, e.modelValue],
+    () => {
+      const t = Number(e.min), n = Number(e.max);
+      if (e.range) {
+        const a = e.modelValue.map((f) => Math.min(n, Math.max(t, f)));
+        JSON.stringify(a) !== JSON.stringify(e.modelValue) && l("update:modelValue", a);
+      } else {
+        const a = Math.min(n, Math.max(t, e.modelValue));
+        a !== e.modelValue && l("update:modelValue", a);
+      }
+    },
+    { immediate: !0 }
+  );
+  const i = u(() => {
+    const t = Number(e.min), n = Number(e.max), a = Number(e.step);
+    return a > 0 ? Math.floor((n - t) / a) + 1 : 0;
+  }), c = (t) => {
+    const n = Number(e.min), a = Number(e.max);
+    return (t - n) / (a - n) * 97;
+  }, o = u(() => (e.range ? m.value : [m.value]).map((n) => ({
+    [e.vertical ? "bottom" : "left"]: `${c(n)}%`
+  }))), d = u(() => {
+    const t = e.range ? m.value : [m.value], n = `${c(Math.min(...t))}%`, a = `${c(Math.max(...t))}%`;
+    return e.vertical ? { bottom: n, top: `calc(100% - ${a})` } : { left: n, right: `calc(100% - ${a})` };
+  });
+  function r(t) {
+    l("update:modelValue", t);
   }
   return {
-    val: u,
-    updateValue: s,
+    val: m,
+    updateValue: r,
     thumbStyles: o,
-    trackFillStyle: i,
-    tickCount: r
+    trackFillStyle: d,
+    tickCount: i
   };
 }
 export {
-  v as useSlider
+  g as useSlider
 };

package/package.json

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