adverich-kun-ui 0.1.601 → 0.1.602

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

@@ -1,68 +1,69 @@
-import { onMounted as P, nextTick as U, onUnmounted as x, watch as I, onBeforeUnmount as O, computed as g, openBlock as c, createElementBlock as k, Fragment as Y, createBlock as j, Teleport as q, createVNode as G, Transition as J, unref as o, withCtx as Q, withDirectives as X, createElementVNode as Z, withKeys as _, withModifiers as ee, normalizeStyle as te, normalizeClass as ne, renderSlot as C, vShow as oe, createCommentVNode as L } from "vue";
+import { computed as u, onMounted as R, nextTick as U, onUnmounted as x, watch as I, onBeforeUnmount as O, openBlock as d, createElementBlock as k, Fragment as Y, createBlock as j, Teleport as q, createVNode as G, Transition as J, unref as n, withCtx as Q, withDirectives as X, createElementVNode as Z, withKeys as _, withModifiers as ee, normalizeStyle as te, normalizeClass as ne, renderSlot as C, vShow as oe, createCommentVNode as L } from "vue";
 import { useKunMenu as se } from "../composables/useKunMenu.js";
 import { kunMenuProps as re } from "../composables/kunMenuProps.js";
 import { useKunMenuStyles as ae } from "../composables/useKunMenuStyles.js";
 import { useKunMenuComposable as le } from "../composables/useKunMenuComposable.js";
-const ve = {
+const me = {
   __name: "KunMenu",
   props: re,
   emits: ["update:modelValue", "click:outside", "handleEscape"],
   setup(M, { emit: T }) {
-    var E;
-    const n = M, u = T, {
-      menuVisible: d,
-      handleActivatorClick: m,
-      handleHover: a,
-      handleFocus: v,
-      handleEscape: p,
+    const s = M, v = T, a = u(() => {
+      const e = s.parentRef;
+      return (e == null ? void 0 : e.$el) ?? (e == null ? void 0 : e.value) ?? e ?? null;
+    }), {
+      menuVisible: m,
+      handleActivatorClick: f,
+      handleHover: l,
+      handleFocus: p,
+      handleEscape: h,
       hideMenu: b
-    } = se(n, u), {
+    } = se(s, v), {
       initializeMenu: S,
-      repositionMenu: l,
+      repositionMenu: i,
       startScrollTracking: H,
-      stopScrollTracking: f,
+      stopScrollTracking: y,
       contentEl: r,
-      activatorEl: h,
+      activatorEl: w,
       originClass: z,
       computedMaxHeight: B,
       menuPositionStyle: K
-    } = ae(n, m, a, v), { onClickOutside: V } = le(), { addEventListeners: $, removeEventListeners: F } = V(
+    } = ae(s, f, l, p), { onClickOutside: V } = le(), { addEventListeners: F, removeEventListeners: $ } = V(
       r,
       () => {
-        var s;
-        const e = n.parentRef || h.value, t = window.__lastClickEvent;
-        (s = e == null ? void 0 : e.contains) != null && s.call(e, t == null ? void 0 : t.target) || (b(), u("click:outside"));
+        var o;
+        const e = a.value || w.value, t = window.__lastClickEvent;
+        (o = e == null ? void 0 : e.contains) != null && o.call(e, t == null ? void 0 : t.target) || (b(), v("click:outside"));
       },
-      [(E = n.parentRef) == null ? void 0 : E.$el]
+      s.parentRef ? [{ value: a.value }] : []
     );
-    P(() => {
+    R(() => {
       U(() => {
-        S(), window.addEventListener("resize", l);
+        S(), window.addEventListener("resize", i);
       });
     }), x(() => {
-      f();
+      y();
       const e = r.value;
-      e && e.removeEventListener("wheel", i), window.removeEventListener("resize", l);
-    }), I(d, (e) => {
+      e && e.removeEventListener("wheel", c), window.removeEventListener("resize", i);
+    }), I(m, (e) => {
       const t = r.value;
-      t && (e ? (l(), H(n.parentRef), t.addEventListener("wheel", i, { passive: !1 }), $()) : (f(), t.removeEventListener("wheel", i), F()));
+      t && (e ? (i(), H(a.value), t.addEventListener("wheel", c, { passive: !1 }), F()) : (y(), t.removeEventListener("wheel", c), $()));
     });
-    function i(e) {
+    function c(e) {
       const t = r.value;
       if (!t) return;
-      const s = e.deltaY > 0, N = t.scrollTop + t.clientHeight >= t.scrollHeight, W = t.scrollTop <= 0;
-      (s && N || !s && W) && e.preventDefault();
+      const o = e.deltaY > 0, W = t.scrollTop + t.clientHeight >= t.scrollHeight, P = t.scrollTop <= 0;
+      (o && W || !o && P) && e.preventDefault();
     }
-    function R() {
-      var t;
-      const e = (t = n.parentRef) == null ? void 0 : t.$el;
-      e && (e.removeEventListener("click", m), e.removeEventListener("mouseenter", () => a("enter")), e.removeEventListener("mouseleave", () => a("leave")), e.removeEventListener("focus", v));
+    function A() {
+      const e = a.value;
+      e && (e.removeEventListener("click", f), e.removeEventListener("mouseenter", () => l("enter")), e.removeEventListener("mouseleave", () => l("leave")), e.removeEventListener("focus", p));
     }
     O(() => {
-      R();
+      A();
     });
-    const y = g(() => {
-      switch (n.transition) {
+    const E = u(() => {
+      switch (s.transition) {
         case "fade":
           return "opacity-0";
         case "fade-scale":
@@ -78,19 +79,19 @@ const ve = {
         default:
           return "";
       }
-    }), w = g(() => "opacity-100 scale-100 translate-x-0 translate-y-0"), A = w, D = y;
-    return (e, t) => (c(), k(Y, null, [
-      e.attach !== !0 ? (c(), j(q, {
+    }), g = u(() => "opacity-100 scale-100 translate-x-0 translate-y-0"), D = g, N = E;
+    return (e, t) => (d(), k(Y, null, [
+      e.attach !== !0 ? (d(), j(q, {
         key: 0,
         to: e.attach || "body"
       }, [
         G(J, {
           "enter-active-class": "transition ease-out duration-150",
           "leave-active-class": "transition ease-in duration-100",
-          "enter-from-class": y.value,
-          "enter-to-class": w.value,
-          "leave-from-class": o(A),
-          "leave-to-class": o(D)
+          "enter-from-class": E.value,
+          "enter-to-class": g.value,
+          "leave-from-class": n(D),
+          "leave-to-class": n(N)
         }, {
           default: Q(() => [
             X(Z("div", {
@@ -98,22 +99,22 @@ const ve = {
               ref: r,
               role: "menu",
               tabindex: "-1",
-              class: ne(["relative shadow-xl rounded-b overflow-y-auto focus:outline-none border border-gray-300 dark:border-gray-700", [n.class, o(z), e.width, e.minWidth, e.maxWidth, e.minHeight, e.height, e.maxHeight, e.zIndex, e.bgColor]]),
-              style: te({ ...o(K), maxHeight: o(B) }),
-              onKeydown: t[0] || (t[0] = _(ee((...s) => o(p) && o(p)(...s), ["stop"]), ["escape"]))
+              class: ne(["relative shadow-xl rounded-b overflow-y-auto focus:outline-none border border-gray-300 dark:border-gray-700", [s.class, n(z), e.width, e.minWidth, e.maxWidth, e.minHeight, e.height, e.maxHeight, e.zIndex, e.bgColor]]),
+              style: te({ ...n(K), maxHeight: n(B) }),
+              onKeydown: t[0] || (t[0] = _(ee((...o) => n(h) && n(h)(...o), ["stop"]), ["escape"]))
             }, [
               C(e.$slots, "default")
             ], 38), [
-              [oe, o(d)]
+              [oe, n(m)]
             ])
           ]),
           _: 3
         }, 8, ["enter-from-class", "enter-to-class", "leave-from-class", "leave-to-class"])
       ], 8, ["to"])) : L("", !0),
-      e.$slots.activator ? (c(), k("span", {
+      e.$slots.activator ? (d(), k("span", {
         key: 1,
         ref_key: "activatorEl",
-        ref: h
+        ref: w
       }, [
         C(e.$slots, "activator")
       ], 512)) : L("", !0)
@@ -121,5 +122,5 @@ const ve = {
   }
 };
 export {
-  ve as default
+  me as default
 };

package/dist/components/KunMenu/src/composables/useKunMenuStyles.js

@@ -1,16 +1,20 @@
-import { ref as d, computed as F } from "vue";
-function I(i, R, E, T) {
-  const H = d({}), w = d(null), L = d(null), m = d(null), x = d("bottom"), q = {
+import { ref as d, computed as T } from "vue";
+function Y(i, R, E, q) {
+  const H = d({}), w = d(null), L = d(null), m = d(null), x = d("bottom"), B = {
     top: { class: "origin-bottom" },
     bottom: { class: "origin-top" },
     left: { class: "origin-right" },
     right: { class: "origin-left" }
-  }, B = F(() => {
+  }, C = T(() => {
     var t;
-    return x.value === "top" ? "origin-bottom" : ((t = q[i.location]) == null ? void 0 : t.class) || "origin-top";
+    return x.value === "top" ? "origin-bottom" : ((t = B[i.location]) == null ? void 0 : t.class) || "origin-top";
   });
   let c = null, h = [];
-  function C(t) {
+  function A() {
+    const t = i.parentRef;
+    return t ? (t == null ? void 0 : t.$el) ?? (t == null ? void 0 : t.value) ?? t ?? null : L.value;
+  }
+  function W(t) {
     const o = [];
     let n = t.parentElement;
     for (; n; ) {
@@ -19,27 +23,27 @@ function I(i, R, E, T) {
     }
     return o;
   }
-  function W(t) {
-    A();
+  function k(t) {
+    M();
     const o = (t == null ? void 0 : t.$el) || t;
     if (!(o instanceof HTMLElement)) return;
-    const n = C(o), e = () => {
+    const n = W(o), e = () => {
       c || (c = requestAnimationFrame(() => {
         c = null, g();
       }));
     }, l = { capture: !0, passive: !0 };
     window.addEventListener("scroll", e, l), h.push({ target: window, handler: e, options: l }), n.forEach((r) => {
-      const u = { passive: !0 };
-      r.addEventListener("scroll", e, u), h.push({ target: r, handler: e, options: u });
+      const a = { passive: !0 };
+      r.addEventListener("scroll", e, a), h.push({ target: r, handler: e, options: a });
     });
   }
-  function A() {
+  function M() {
     c && (cancelAnimationFrame(c), c = null), h.forEach(({ target: t, handler: o, options: n }) => {
       t.removeEventListener("scroll", o, n);
     }), h = [];
   }
   function g(t = 0) {
-    const o = i.parentRef || L.value, n = w.value;
+    const o = A(), n = w.value;
     if (!(o instanceof HTMLElement) || !(n instanceof HTMLElement)) return;
     const e = o.getBoundingClientRect();
     if ((e.width < 1 || e.height < 1) && t < 10) {
@@ -52,20 +56,20 @@ function I(i, R, E, T) {
         requestAnimationFrame(() => g(t + 1));
         return;
       }
-      const r = window.innerHeight, u = window.innerWidth, a = 8, M = i.hideDetails ? 0 : 19, S = n.offsetHeight, v = i.width === "w-full" ? e.width : n.offsetWidth, p = r - e.bottom + M - a, b = e.top - a, D = p >= S, K = b >= S, y = !D && (K || b > p);
-      x.value = y ? "top" : "bottom";
-      const P = i.origin && i.origin !== "auto" ? i.origin : k(i.location), [, $] = P.split(" ");
+      const r = window.innerHeight, a = window.innerWidth, u = 8, S = i.hideDetails ? 0 : 19, y = n.offsetHeight, v = i.width === "w-full" ? e.width : n.offsetWidth, p = r - e.bottom + S - u, b = e.top - u, D = p >= y, K = b >= y, $ = !D && (K || b > p);
+      x.value = $ ? "top" : "bottom";
+      const _ = i.origin && i.origin !== "auto" ? i.origin : O(i.location), [, F] = _.split(" ");
       let s = 0;
-      $ === "right" ? s = e.right - v : $ === "center" ? s = e.left + e.width / 2 - v / 2 : s = e.left, i.width !== "w-full" && (s + v > u - a && (s = u - v - a), s < a && (s = a));
+      F === "right" ? s = e.right - v : F === "center" ? s = e.left + e.width / 2 - v / 2 : s = e.left, i.width !== "w-full" && (s + v > a - u && (s = a - v - u), s < u && (s = u));
       const f = {
         position: "fixed",
         left: `${s}px`,
         width: i.width === "w-full" ? `${e.width}px` : void 0
       };
-      y ? (f.top = "auto", f.bottom = `${r - e.top}px`, m.value = b) : (f.top = `${e.bottom - M}px`, f.bottom = "auto", m.value = p), H.value = f;
+      $ ? (f.top = "auto", f.bottom = `${r - e.top}px`, m.value = b) : (f.top = `${e.bottom - S}px`, f.bottom = "auto", m.value = p), H.value = f;
     });
   }
-  function k(t) {
+  function O(t) {
     switch (t) {
       case "top":
         return "top left";
@@ -79,31 +83,31 @@ function I(i, R, E, T) {
         return "bottom left";
     }
   }
-  function O() {
-    var o, n;
-    const t = ((o = i.parentRef) == null ? void 0 : o.$el) || ((n = w.value) == null ? void 0 : n.parentElement);
+  function P() {
+    var o;
+    const t = A() || ((o = w.value) == null ? void 0 : o.parentElement);
     if (!(t instanceof HTMLElement)) {
       console.warn("[KunMenu] Activator no válido:", t);
       return;
     }
-    t.addEventListener("click", R), t.addEventListener("mouseenter", () => E("enter")), t.addEventListener("mouseleave", () => E("leave")), t.addEventListener("focus", T);
+    t.addEventListener("click", R), t.addEventListener("mouseenter", () => E("enter")), t.addEventListener("mouseleave", () => E("leave")), t.addEventListener("focus", q);
   }
-  const z = F(() => {
+  const z = T(() => {
     if (!i.maxHeight && m.value !== null)
       return `${m.value}px`;
   });
   return {
-    initializeMenu: O,
+    initializeMenu: P,
     repositionMenu: g,
-    startScrollTracking: W,
-    stopScrollTracking: A,
+    startScrollTracking: k,
+    stopScrollTracking: M,
     contentEl: w,
     activatorEl: L,
-    originClass: B,
+    originClass: C,
     computedMaxHeight: z,
     menuPositionStyle: H
   };
 }
 export {
-  I as useKunMenuStyles
+  Y as useKunMenuStyles
 };

package/package.json

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