adverich-kun-ui/dist/components/kunMenu/src/composables/useKunMenuStyles.js

Una librería de componentes Vue.js con Tailwind CSS

import { ref as a, computed as x } from "vue";
function q(n, p, u, w) {
  const f = a({}), c = a(null), g = a(null), H = {
    top: { class: "origin-bottom" },
    bottom: { class: "origin-top" },
    left: { class: "origin-right" },
    right: { class: "origin-left" }
  }, M = x(() => {
    var t;
    return ((t = H[n.location]) == null ? void 0 : t.class) || "origin-top";
  });
  function s(t = 0) {
    const o = n.parentRef || g.value, i = c.value;
    if (!(o instanceof HTMLElement) || !(i instanceof HTMLElement)) return;
    const e = o.getBoundingClientRect();
    if ((e.width < 1 || e.height < 1) && t < 10) {
      requestAnimationFrame(() => s(t + 1));
      return;
    }
    requestAnimationFrame(() => {
      const h = i.getBoundingClientRect();
      if ((h.width < 1 || h.height < 1) && t < 10) {
        requestAnimationFrame(() => s(t + 1));
        return;
      }
      const A = n.origin || L(n.location), [d, m] = A.split(" "), F = n.hideDetails ? 0 : 19, v = i.offsetWidth, E = i.offsetHeight;
      let l = 0, r = 0;
      m === "right" ? r = e.right - v : m === "center" ? r = e.left + e.width / 2 - v / 2 : r = e.left, d === "top" ? l = e.top - E : d === "center" ? l = e.top + e.height / 2 - E / 2 : l = e.bottom - F, f.value = {
        position: "fixed",
        top: `${l}px`,
        left: `${r}px`,
        width: n.width === "w-full" ? `${e.width}px` : void 0
      };
    });
  }
  function L(t) {
    switch (t) {
      case "top":
        return "top left";
      case "bottom":
        return "bottom left";
      case "left":
        return "left top";
      case "right":
        return "right top";
      default:
        return "bottom left";
    }
  }
  function b() {
    var o, i;
    const t = ((o = n.parentRef) == null ? void 0 : o.$el) || ((i = c.value) == null ? void 0 : i.parentElement);
    if (!(t instanceof HTMLElement)) {
      console.warn("[KunMenu] Activator no válido:", t);
      return;
    }
    t.addEventListener("click", p), t.addEventListener("mouseenter", () => u("enter")), t.addEventListener("mouseleave", () => u("leave")), t.addEventListener("focus", w);
  }
  const R = x(() => typeof n.maxHeight == "number" ? n.maxHeight + "px" : n.maxHeight);
  return {
    initializeMenu: b,
    repositionMenu: s,
    contentEl: c,
    activatorEl: g,
    originClass: M,
    computedMaxHeight: R,
    menuPositionStyle: f
  };
}
export {
  q as useKunMenuStyles
};