@zealsolutions/zeal-ui 1.0.0-alpha.359 → 1.0.0-alpha.361

package/dist/Tooltip-9q1tA0wI.js

@@ -0,0 +1,110 @@
+import { ref as i, onUnmounted as z, openBlock as y, createElementBlock as D, Fragment as N, createElementVNode as a, renderSlot as Y, createBlock as $, Teleport as F, withDirectives as P, normalizeStyle as V, createTextVNode as W, toDisplayString as _, vShow as q, nextTick as C } from "vue";
+const l = i(null);
+function H() {
+  function s(n) {
+    l.value && l.value !== n && l.value.hideImmediate(), l.value = n;
+  }
+  function c(n) {
+    l.value === n && (l.value = null);
+  }
+  return {
+    register: s,
+    unregister: c
+  };
+}
+const I = { class: "px-4 py-2 text-center pointer-events-none" }, R = /* @__PURE__ */ a("span", { class: "fixed left-1/2 -bottom-1 w-2 h-2 bg-black-950 rotate-45 -translate-x-1/2 pointer-events-none" }, null, -1), j = {
+  __name: "Tooltip",
+  props: {
+    text: {
+      type: String,
+      required: !0
+    },
+    position: {
+      type: String,
+      default: "top"
+      // 'top', 'bottom', 'left', 'right'
+    },
+    offset: {
+      type: Number,
+      default: 20
+      // Offset from the trigger element
+    }
+  },
+  setup(s) {
+    const c = s, { register: n, unregister: k } = H(), f = {
+      hideImmediate: p
+    }, d = i(!1);
+    let v = null, m = null;
+    const r = i(!1), w = i(null), g = i(null), T = i({ top: "0px", left: "0px" });
+    function h() {
+      const e = w.value, t = g.value;
+      if (!e || !t)
+        return;
+      const o = e.getBoundingClientRect(), E = t.offsetWidth, M = window.scrollY || document.documentElement.scrollTop, S = window.scrollX || document.documentElement.scrollLeft, L = o.left + S + o.width / 2, B = o.top + M - c.offset, X = L - E / 2;
+      T.value = {
+        top: `${Math.round(B)}px`,
+        left: `${Math.round(X)}px`,
+        transform: "translateY(-100%) translateX(-50%) translateX(" + (E - 16) / 2 + "px)",
+        // Adjust for tooltip width and padding
+        position: "absolute",
+        pointerEvents: "none"
+      };
+    }
+    function u() {
+      clearTimeout(m), m = setTimeout(() => {
+        h();
+      }, 50);
+    }
+    function x() {
+      r.value || (clearTimeout(v), n(f), d.value = !0, r.value = !0, C(() => {
+        setTimeout(() => {
+          h();
+        }, 0);
+      }), window.addEventListener("scroll", u), window.addEventListener("resize", u));
+    }
+    function b() {
+      d.value = !1, v = setTimeout(() => {
+        d.value || p();
+      }, 100);
+    }
+    function p() {
+      r.value = !1, k(f), window.removeEventListener("scroll", u), window.removeEventListener("resize", u);
+    }
+    return z(() => {
+      p();
+    }), (e, t) => (y(), D(N, null, [
+      a("span", {
+        ref_key: "triggerEl",
+        ref: w,
+        onMouseenter: x,
+        onMouseleave: b,
+        onFocus: t[0] || (t[0] = (...o) => e.showTooltip && e.showTooltip(...o)),
+        onBlur: t[1] || (t[1] = (...o) => e.hideTooltip && e.hideTooltip(...o)),
+        tabindex: "0",
+        class: "inline-block will-change"
+      }, [
+        Y(e.$slots, "default")
+      ], 544),
+      (y(), $(F, { to: "body" }, [
+        P(a("div", {
+          class: "absolute z-50 bg-black-950 text-white font-semibold text-xs text-center rounded whitespace-nowrap pointer-events-none transition-none",
+          style: V(T.value),
+          ref_key: "tooltipEl",
+          ref: g,
+          onMouseenter: x,
+          onMouseleave: b
+        }, [
+          a("div", I, [
+            W(_(s.text) + " ", 1),
+            R
+          ])
+        ], 36), [
+          [q, r.value]
+        ])
+      ]))
+    ], 64));
+  }
+};
+export {
+  j as _
+};