adverich-kun-ui 0.1.447 → 0.1.449

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

@@ -1,6 +1,6 @@
-import { ref as c, computed as r, onMounted as O, onBeforeUnmount as R, watch as q, createElementBlock as k, openBlock as g, Fragment as J, withDirectives as Q, createVNode as Y, createBlock as Z, resolveDynamicComponent as _, withModifiers as ee, normalizeStyle as N, normalizeClass as te, withCtx as $, createTextVNode as ne, renderSlot as b, vShow as oe, Transition as ae, createCommentVNode as le, nextTick as re } from "vue";
-import { useAppbarHeight as ie } from "../../../../utils/useLayout.js";
-const de = {
+import { ref as c, computed as i, onMounted as ee, onBeforeUnmount as te, watch as ne, createElementBlock as X, openBlock as V, Fragment as oe, withDirectives as ae, createVNode as ie, createBlock as le, resolveDynamicComponent as re, withModifiers as ue, normalizeStyle as L, normalizeClass as se, withCtx as P, renderSlot as E, vShow as de, Transition as ce, createCommentVNode as fe, nextTick as pe } from "vue";
+import { useAppbarHeight as me } from "../../../../utils/useLayout.js";
+const he = {
   __name: "KunDrawer",
   props: {
     modelValue: Boolean,
@@ -11,7 +11,6 @@ const de = {
     floating: Boolean,
     image: String,
     location: { type: String, default: "start" },
-    // start|end|left|right|top|bottom
     permanent: Boolean,
     persistent: Boolean,
     rail: Boolean,
@@ -23,32 +22,42 @@ const de = {
     width: { type: String, default: "w-[256px]" },
     fullHeight: Boolean,
     scrollable: { type: Boolean, default: !0 },
-    /* --- NUEVAS / ya tenías --- */
+    /* Swipe */
     swipeable: { type: Boolean, default: !1 },
     swipeThreshold: { type: Number, default: 50 },
-    // px para decidir apertura/cierre
     swipeEdgeSize: { type: Number, default: 30 },
-    // px desde el borde para iniciar si está cerrado
     swipeTransition: { type: String, default: "transition-transform duration-300 ease-in-out" },
-    /* --- extras (opcionales) --- */
     swipeHandleSize: { type: Number, default: 24 },
-    // zona interna para comenzar drag cuando está abierto
     swipeMinVelocity: { type: Number, default: 0.35 },
-    // px/ms para "flick" (abrir/cerrar aunque no llegue al threshold)
-    scrimTransition: { type: String, default: "opacity 200ms ease" }
+    scrimTransition: { type: String, default: "opacity 200ms ease" },
+    animationDuration: { type: Number, default: 300 },
+    animationEasing: { type: String, default: "ease-in-out" },
+    /* Nuevo */
+    peekSize: { type: Number, default: 0 }
+    // borde visible cuando está cerrado
   },
-  emits: ["update:model-value", "update:modelValue"],
-  setup(o, { emit: X }) {
-    const y = X;
-    function i(t) {
-      y("update:model-value", t), y("update:modelValue", t);
-    }
-    const e = o, M = ie(), S = c(null), z = r(
-      () => e.fullHeight ? "0px" : `${M.value}px`
-    ), D = r(
-      () => e.fullHeight ? typeof window < "u" && window.innerWidth < 768 ? "100dvh" : "100vh" : `calc(100vh - ${M.value}px)`
-    ), H = r(() => e.rail ? e.railWidth : e.width), L = r(() => {
-      switch (e.location) {
+  emits: [
+    "update:model-value",
+    "update:modelValue",
+    "swipe-start",
+    "swipe-move",
+    "swipe-end"
+  ],
+  setup(a, { emit: A }) {
+    const s = A;
+    function d(e) {
+      s("update:model-value", e), s("update:modelValue", e);
+    }
+    const t = a, B = me(), x = c(null), r = c(256);
+    let v = 256;
+    function w() {
+      var e;
+      v = ((e = x.value) == null ? void 0 : e.offsetWidth) || v, r.value = v;
+    }
+    const F = i(() => t.fullHeight ? "0px" : `${B.value}px`), G = i(
+      () => t.fullHeight ? typeof window < "u" && window.innerWidth < 768 ? "100dvh" : "100vh" : `calc(100vh - ${B.value}px)`
+    ), O = i(() => t.rail ? t.railWidth : t.width), u = i(() => ["start", "left"].includes(t.location)), U = i(() => ["end", "right"].includes(t.location)), j = i(() => {
+      switch (t.location) {
         case "start":
         case "left":
           return "left-0 top-0 h-full";
@@ -62,126 +71,143 @@ const de = {
         default:
           return "left-0 top-0 h-full";
       }
-    }), u = r(() => ["start", "left"].includes(e.location)), p = r(() => ["end", "right"].includes(e.location)), W = r(() => e.border ? typeof e.border == "string" ? `border-${e.border}` : "border" : ""), P = r(() => e.rounded === !0 ? u.value ? "rounded-r" : "rounded-l" : typeof e.rounded == "string" ? e.rounded : typeof e.rounded == "number" ? `rounded-[${e.rounded}px]` : ""), G = r(() => [
-      L.value,
-      H.value,
-      W.value,
-      e.elevation ? `shadow-${e.elevation}` : "",
-      P.value,
-      e.color ?? "bg-surface-dark",
-      e.scrollable ? "overflow-auto" : ""
-    ]), v = c(0), f = c(0), a = c(!1), l = c(0);
-    let m = 0, w = 0, h = 0;
-    const U = r(() => {
-      const t = V(), n = l.value || 1;
-      return u.value || p.value ? Math.min(1, Math.max(0, 1 - Math.abs(t) / n)) : e.modelValue ? 1 : 0;
+    }), q = i(() => t.border ? typeof t.border == "string" ? `border-${t.border}` : "border" : ""), I = i(() => t.rounded === !0 ? u.value ? "rounded-r" : "rounded-l" : typeof t.rounded == "string" ? t.rounded : typeof t.rounded == "number" ? `rounded-[${t.rounded}px]` : ""), K = i(() => [
+      j.value,
+      O.value,
+      q.value,
+      t.elevation ? `shadow-${t.elevation}` : "",
+      I.value,
+      t.color ?? "bg-surface-dark",
+      t.scrollable ? "overflow-auto" : ""
+    ]), h = c(0), f = c(0), o = c(!1);
+    let g = 0, b = 0, y = 0;
+    const S = i(() => {
+      const e = C(), n = r.value || 1;
+      return Math.min(1, Math.max(0, 1 - Math.abs(e) / n));
+    });
+    function p() {
+      const e = o.value ? 0 : t.peekSize;
+      return u.value ? -r.value + e : r.value - e;
+    }
+    function k() {
+      return 0;
+    }
+    function C() {
+      if (!t.swipeable)
+        return t.modelValue ? k() : p();
+      if (o.value) {
+        const e = f.value - h.value;
+        return t.modelValue ? u.value ? Math.min(0, e) : Math.max(0, e) : u.value ? Math.min(r.value, p() + e) : Math.max(-r.value, p() + e);
+      }
+      return t.modelValue ? k() : p();
+    }
+    const R = i(() => {
+      let e = t.animationDuration;
+      if (!o.value) {
+        const n = r.value * (1 - S.value);
+        e = Math.max(120, Math.min(300, n * 1.2));
+      }
+      return {
+        transform: `translateX(${C()}px)`,
+        top: F.value,
+        height: G.value,
+        transition: o.value ? "none" : `transform ${e}ms ${t.animationEasing}`
+      };
     });
-    function V() {
-      if (!e.swipeable) return e.modelValue ? 0 : u.value ? -(l.value || 0) : l.value || 0;
-      let t = 0;
-      if (a.value) {
-        const n = f.value - v.value;
-        u.value ? t = e.modelValue ? Math.min(0, n) : Math.min(l.value, -(l.value - n)) : p.value && (t = e.modelValue ? Math.max(0, n) : Math.max(-l.value, l.value + n));
-      } else e.modelValue || (t = u.value ? -l.value : l.value);
-      return t;
-    }
-    const j = r(() => ({
-      transform: `translateX(${V()}px)`,
-      top: z.value,
-      height: D.value
-    }));
-    function x(t) {
-      var n, s;
-      return (n = t == null ? void 0 : t.touches) != null && n.length ? t.touches[0].clientX : (s = t == null ? void 0 : t.changedTouches) != null && s.length ? t.changedTouches[0].clientX : t.clientX;
-    }
-    function A(t) {
-      var s;
-      return !!t && ((s = t.closest) == null ? void 0 : s.call(t, 'input,textarea,select,button,a,[role="button"],[data-no-drag]'));
-    }
-    function T(t) {
-      if (!e.swipeable || e.permanent || e.modelValue || A(t.target)) return;
-      const n = x(t);
-      (u.value ? n <= e.swipeEdgeSize : n >= window.innerWidth - e.swipeEdgeSize) && (a.value = !0, v.value = n, f.value = n, w = n, m = performance.now(), h = 0, re(() => {
-        var d, C;
-        l.value = ((C = (d = S.value) == null ? void 0 : d.getBoundingClientRect) == null ? void 0 : C.call(d).width) || l.value || 256;
-      }));
-    }
-    function B(t) {
-      if (!a.value) return;
-      const n = x(t);
-      F(n);
-    }
-    function E() {
-      a.value && I();
-    }
-    function F(t) {
-      const n = performance.now(), s = t - w, d = Math.max(1, n - m);
-      h = s / d, w = t, m = n, f.value = t;
-    }
-    function I() {
-      const t = f.value - v.value, n = h;
-      a.value = !1, u.value ? e.modelValue ? t < -e.swipeThreshold || n < -e.swipeMinVelocity ? i(!1) : i(!0) : t > e.swipeThreshold || n > e.swipeMinVelocity ? i(!0) : i(!1) : p.value && (e.modelValue ? t > e.swipeThreshold || n > e.swipeMinVelocity ? i(!1) : i(!0) : t < -e.swipeThreshold || n < -e.swipeMinVelocity ? i(!0) : i(!1));
-    }
-    const K = () => {
-      e.persistent || i(!1);
-    };
-    return O(() => {
-      e.swipeable && (window.addEventListener("pointerdown", T, { passive: !0 }), window.addEventListener("pointermove", B, { passive: !0 }), window.addEventListener("pointerup", E, { passive: !0 }));
-    }), R(() => {
-      e.swipeable && (window.removeEventListener("pointerdown", T), window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", E), a.value = !1);
-    }), q(() => e.modelValue, () => {
-      a.value = !1;
-    }), (t, n) => (g(), k(J, null, [
-      Q((g(), Z(_(o.tag), {
+    function m(e) {
+      var n, l;
+      return (n = e == null ? void 0 : e.touches) != null && n.length ? e.touches[0].clientX : (l = e == null ? void 0 : e.changedTouches) != null && l.length ? e.changedTouches[0].clientX : e.clientX;
+    }
+    function D(e) {
+      var l;
+      return !!e && ((l = e.closest) == null ? void 0 : l.call(e, 'input,textarea,select,button,a,[role="button"],[data-no-drag]'));
+    }
+    function T(e) {
+      o.value = !0, h.value = e, f.value = e, b = e, g = performance.now(), y = 0, w(), s("swipe-start", { x: e, width: r.value });
+    }
+    let M = null;
+    function z(e) {
+      M && cancelAnimationFrame(M), M = requestAnimationFrame(() => {
+        const n = performance.now(), l = e - b, _ = Math.max(1, n - g);
+        y = l / _, b = e, g = n, f.value = e, s("swipe-move", { x: e, progress: S.value });
+      });
+    }
+    function N() {
+      const e = f.value - h.value, n = y;
+      o.value = !1, u.value ? t.modelValue ? d(!(e < -t.swipeThreshold || n < -t.swipeMinVelocity)) : d(e > t.swipeThreshold || n > t.swipeMinVelocity) : U.value && (t.modelValue ? d(!(e > t.swipeThreshold || n > t.swipeMinVelocity)) : d(e < -t.swipeThreshold || n < -t.swipeMinVelocity)), s("swipe-end", { opened: t.modelValue });
+    }
+    function J(e) {
+      if (!t.swipeable || D(e.target)) return;
+      const n = m(e);
+      pe(() => {
+        if (w(), t.modelValue) {
+          T(n);
+          return;
+        }
+        (u.value ? n <= t.swipeEdgeSize : n >= window.innerWidth - t.swipeEdgeSize) && T(n);
+      });
+    }
+    function Q(e) {
+      o.value && (e.preventDefault(), z(m(e)));
+    }
+    function Y() {
+      o.value && N();
+    }
+    function $(e) {
+      if (!t.swipeable || t.permanent || t.modelValue || D(e.target)) return;
+      const n = m(e);
+      (u.value ? n <= t.swipeEdgeSize : n >= window.innerWidth - t.swipeEdgeSize) && T(n);
+    }
+    function H(e) {
+      o.value && z(m(e));
+    }
+    function W() {
+      o.value && N();
+    }
+    function Z() {
+      t.persistent || d(!1);
+    }
+    return ee(() => {
+      w(), t.swipeable && (window.addEventListener("pointerdown", $, { passive: !0 }), window.addEventListener("pointermove", H, { passive: !0 }), window.addEventListener("pointerup", W, { passive: !0 }));
+    }), te(() => {
+      t.swipeable && (window.removeEventListener("pointerdown", $), window.removeEventListener("pointermove", H), window.removeEventListener("pointerup", W)), o.value = !1;
+    }), ne(() => t.modelValue, () => {
+      o.value = !1;
+    }), (e, n) => (V(), X(oe, null, [
+      ae((V(), le(re(a.tag), {
         ref_key: "drawerEl",
-        ref: S,
-        class: te(["fixed z-[2001] flex flex-col select-none will-change-transform", [
-          G.value,
-          o.absolute ? "absolute" : "fixed",
-          o.floating ? "border-none" : "",
-          // cuando arrastro: sin transición; cuando suelto/aprieto: usa la transición configurable
-          a.value ? "transition-none" : o.swipeTransition,
-          // permite scroll vertical dentro, pero gestos horizontales del drawer
+        ref: x,
+        class: se(["z-[2001] flex flex-col select-none will-change-transform", [
+          K.value,
+          a.absolute ? "absolute" : "fixed",
+          a.floating ? "border-none" : "",
+          o.value ? "transition-none" : a.swipeTransition,
           "touch-pan-y"
         ]]),
-        style: N(j.value),
-        onClick: n[0] || (n[0] = ee(() => {
+        style: L(R.value),
+        onClick: n[0] || (n[0] = ue(() => {
         }, ["stop"])),
-        "<!--": "",
-        listeners: "",
-        locales: "",
-        "(cuando": "",
-        está: "",
-        abierto: "",
-        o: "",
-        ya: "",
-        se: "",
-        activó: "",
-        "isDragging)": "",
-        "--": ""
+        onTouchstartPassive: J,
+        onTouchmove: Q,
+        onTouchendPassive: Y
       }, {
-        default: $(() => [
-          n[1] || (n[1] = ne(' @touchstart.passive="onTouchStart" @touchmove.passive="onTouchMove" @touchend.passive="onTouchEnd" > ')),
-          b(t.$slots, "prepend"),
-          b(t.$slots, "default"),
-          b(t.$slots, "append")
+        default: P(() => [
+          E(e.$slots, "prepend"),
+          E(e.$slots, "default"),
+          E(e.$slots, "append")
         ]),
-        _: 3,
-        __: [1]
-      }, 8, ["class", "style"])), [
-        [oe, o.modelValue || o.permanent || a.value]
+        _: 3
+      }, 40, ["class", "style"])), [
+        [de, a.modelValue || a.permanent || o.value]
       ]),
-      Y(ae, { name: "kun-scrim" }, {
-        default: $(() => [
-          o.scrim && (o.modelValue || a.value) && !o.permanent && !o.persistent ? (g(), k("div", {
+      ie(ce, { name: "kun-scrim" }, {
+        default: P(() => [
+          a.scrim && (a.modelValue || o.value) && !a.permanent && !a.persistent ? (V(), X("div", {
             key: 0,
-            class: "fixed inset-0 z-30",
-            style: N({
-              backgroundColor: `rgba(0,0,0,${0.4 * U.value})`,
-              transition: a.value ? "none" : o.scrimTransition
-            }),
-            onClick: K
-          }, null, 4)) : le("", !0)
+            class: "fixed inset-0 bg-black",
+            style: L({ opacity: 0.4 * (1 - S.value) }),
+            onClick: Z
+          }, null, 4)) : fe("", !0)
         ]),
         _: 1
       })
@@ -189,5 +215,5 @@ const de = {
   }
 };
 export {
-  de as default
+  he as default
 };

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

@@ -0,0 +1,51 @@
+import { computed as t, createElementBlock as u, renderSlot as s, openBlock as d, normalizeStyle as m, normalizeClass as p } from "vue";
+const h = {
+  __name: "KunSkeleton",
+  props: {
+    loading: { type: Boolean, default: !0 },
+    variant: { type: String, default: "rect" },
+    // rect, circle, text
+    width: { type: [String, Number], default: "100%" },
+    height: { type: [String, Number], default: "1rem" },
+    rounded: { type: String, default: "md" },
+    // none, sm, md, lg, full
+    animation: { type: String, default: "shimmer" },
+    // shimmer, pulse, shimmer-vertical, none
+    duration: { type: Number, default: 1500 },
+    // ms
+    colorFrom: { type: String, default: "bg-gray-200" },
+    colorTo: { type: String, default: "bg-gray-300" },
+    repeat: { type: Boolean, default: !0 },
+    class: { type: [String, Array, Object], default: "" }
+  },
+  setup(r) {
+    const e = r, a = t(() => {
+      switch (e.variant) {
+        case "circle":
+          return "rounded-full aspect-square";
+        case "text":
+          return "rounded-sm";
+        default:
+          return `rounded-${e.rounded}`;
+      }
+    }), n = t(() => e.animation === "none" ? "" : e.animation === "pulse" ? "animate-pulse" : e.animation === "shimmer" ? "bg-gradient-to-r from-transparent via-white/50 to-transparent bg-[length:200%_100%] animate-[shimmerX_var]".replace("var", `${e.duration}ms`) : e.animation === "shimmer-vertical" ? "bg-gradient-to-b from-transparent via-white/50 to-transparent bg-[length:100%_200%] animate-[shimmerY_var]".replace("var", `${e.duration}ms`) : ""), i = t(() => [
+      "relative overflow-hidden",
+      e.colorFrom,
+      e.colorTo,
+      a.value,
+      n.value,
+      e.class
+    ]), o = t(() => ({
+      width: typeof e.width == "number" ? `${e.width}px` : e.width,
+      height: typeof e.height == "number" ? `${e.height}px` : e.height
+    }));
+    return (l, c) => r.loading ? (d(), u("div", {
+      key: 0,
+      class: p(i.value),
+      style: m(o.value)
+    }, null, 6)) : s(l.$slots, "default", { key: 1 });
+  }
+};
+export {
+  h as default
+};