@indielayer/ui 1.15.2 → 1.15.3

package/lib/components/tooltip/Tooltip.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as M, ref as n, useSlots as W, computed as r, openBlock as p, createElementBlock as w, Fragment as F, createBlock as y, resolveDynamicComponent as O, normalizeClass as f, unref as k, withCtx as C, renderSlot as T, Teleport as X, createVNode as j, Transition as q, normalizeStyle as A, createTextVNode as G, toDisplayString as I, createElementVNode as R, createCommentVNode as S } from "vue";
-import { useTheme as J } from "../../composables/useTheme.js";
-const K = {
+import { defineComponent as H, ref as r, useSlots as M, computed as c, openBlock as v, createBlock as w, resolveDynamicComponent as W, normalizeClass as u, unref as y, withCtx as k, renderSlot as C, Teleport as O, createVNode as X, Transition as j, createElementBlock as q, normalizeStyle as A, createTextVNode as F, toDisplayString as G, createElementVNode as T, createCommentVNode as R } from "vue";
+import { useTheme as I } from "../../composables/useTheme.js";
+const J = {
   tag: {
     type: String,
     default: "div"
@@ -11,112 +11,110 @@ const K = {
     type: String,
     default: "bottom"
   }
-}, L = { name: "XTooltip" }, Y = /* @__PURE__ */ M({
-  ...L,
-  props: K,
-  setup(_) {
-    const a = _, u = n(null), h = n(null), g = n(!1), b = n({}), c = n(a.position), B = W(), N = r(() => a.tooltip || B.tooltip), d = r(() => a.disabled || !N.value), V = r(() => ({
+}, K = { name: "XTooltip" }, U = /* @__PURE__ */ H({
+  ...K,
+  props: J,
+  setup(S) {
+    const n = S, f = r(null), h = r(null), g = r(!1), b = r({}), p = r(n.position), _ = M(), B = c(() => n.tooltip || _.tooltip), a = c(() => n.disabled || !B.value), N = c(() => a.value ? "" : {
       top: "-bottom-2.5 left-1/2 -translate-x-1/2 w-3.5",
       bottom: "-top-2.5 left-1/2 -translate-x-1/2 w-3.5",
       left: "-right-2.5 top-1/2 -translate-y-1/2 h-3.5",
       right: "-left-2.5 top-1/2 -translate-y-1/2 h-3.5"
-    })[c.value]), $ = r(() => ({
+    }[p.value]), V = c(() => a.value ? "" : {
       top: "-rotate-45 origin-top-left",
       bottom: "rotate-45 origin-bottom-left",
       left: "rotate-45 origin-top-left",
       right: "-rotate-45 origin-top-right"
-    })[c.value]), x = r(() => ({
+    }[p.value]), $ = c(() => a.value ? "" : {
       top: "origin-bottom",
       bottom: "origin-top",
       left: "origin-right",
       right: "origin-left"
-    })[c.value]), z = () => {
-      if (!u.value || !h.value)
+    }[p.value]), x = () => {
+      if (!f.value || !h.value)
         return;
-      const t = u.value.getBoundingClientRect(), e = h.value.getBoundingClientRect(), l = 8, m = window.innerWidth, v = window.innerHeight;
-      let s = a.position, o = 0, i = 0;
+      const t = f.value.getBoundingClientRect(), e = h.value.getBoundingClientRect(), l = 8, d = window.innerWidth, m = window.innerHeight;
+      let s = n.position, o = 0, i = 0;
       switch (s) {
         case "top":
           o = t.top - e.height - l, i = t.left + t.width / 2 - e.width / 2, o < 0 && (s = "bottom", o = t.bottom + l);
           break;
         case "bottom":
-          o = t.bottom + l, i = t.left + t.width / 2 - e.width / 2, o + e.height > v && (s = "top", o = t.top - e.height - l);
+          o = t.bottom + l, i = t.left + t.width / 2 - e.width / 2, o + e.height > m && (s = "top", o = t.top - e.height - l);
           break;
         case "left":
           o = t.top + t.height / 2 - e.height / 2, i = t.left - e.width - l, i < 0 && (s = "right", i = t.right + l);
           break;
         case "right":
-          o = t.top + t.height / 2 - e.height / 2, i = t.right + l, i + e.width > m && (s = "left", i = t.left - e.width - l);
+          o = t.top + t.height / 2 - e.height / 2, i = t.right + l, i + e.width > d && (s = "left", i = t.left - e.width - l);
           break;
       }
-      (s === "top" || s === "bottom") && (i < 0 && (i = l), i + e.width > m && (i = m - e.width - l)), (s === "left" || s === "right") && (o < 0 && (o = l), o + e.height > v && (o = v - e.height - l)), c.value = s, b.value = {
+      (s === "top" || s === "bottom") && (i < 0 && (i = l), i + e.width > d && (i = d - e.width - l)), (s === "left" || s === "right") && (o < 0 && (o = l), o + e.height > m && (o = m - e.height - l)), p.value = s, b.value = {
         top: `${o}px`,
         left: `${i}px`
       };
+    }, z = () => {
+      a.value || (g.value = !0, setTimeout(x, 0));
     }, P = () => {
-      d.value || (g.value = !0, setTimeout(z, 0));
-    }, D = () => {
-      d.value || (g.value = !1);
-    }, { classes: E, className: H } = J("Tooltip", {}, a);
-    return (t, e) => (p(), w(F, null, [
-      (p(), y(O(t.tag), {
-        ref_key: "triggerRef",
-        ref: u,
-        class: f([
-          k(H),
-          {
-            "inline-block": !t.$attrs.class
-          }
-        ]),
-        onMouseenter: P,
-        onMouseleave: D
-      }, {
-        default: C(() => [
-          T(t.$slots, "default")
-        ]),
-        _: 3
-      }, 40, ["class"])),
-      d.value ? S("", !0) : (p(), y(X, {
-        key: 0,
-        to: "body"
-      }, [
-        j(q, {
-          "enter-active-class": "transition-opacity duration-150 ease-out",
-          "leave-active-class": "transition-opacity duration-150 ease-in",
-          "enter-from-class": "opacity-0",
-          "enter-to-class": "opacity-100",
-          "leave-from-class": "opacity-100",
-          "leave-to-class": "opacity-0"
-        }, {
-          default: C(() => [
-            g.value ? (p(), w("div", {
-              key: 0,
-              ref_key: "tooltipRef",
-              ref: h,
-              style: A(b.value),
-              class: f(["fixed z-[9999] pointer-events-none", [
-                k(E).tooltip,
-                x.value
-              ]])
-            }, [
-              T(t.$slots, "tooltip", {}, () => [
-                G(I(t.tooltip), 1)
-              ]),
-              R("div", {
-                class: f(["absolute overflow-hidden shadow-lg z-10", V.value])
+      a.value || (g.value = !1);
+    }, { classes: D, className: E } = I("Tooltip", {}, n);
+    return (t, e) => (v(), w(W(t.tag), {
+      ref_key: "triggerRef",
+      ref: f,
+      class: u([
+        y(E),
+        {
+          "inline-block": !t.$attrs.class
+        }
+      ]),
+      onMouseenter: z,
+      onMouseleave: P
+    }, {
+      default: k(() => [
+        C(t.$slots, "default"),
+        a.value ? R("", !0) : (v(), w(O, {
+          key: 0,
+          to: "body"
+        }, [
+          X(j, {
+            "enter-active-class": "transition-opacity duration-150 ease-out",
+            "leave-active-class": "transition-opacity duration-150 ease-in",
+            "enter-from-class": "opacity-0",
+            "enter-to-class": "opacity-100",
+            "leave-from-class": "opacity-100",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: k(() => [
+              g.value ? (v(), q("div", {
+                key: 0,
+                ref_key: "tooltipRef",
+                ref: h,
+                style: A(b.value),
+                class: u(["fixed z-[10001] pointer-events-none", [
+                  y(D).tooltip,
+                  $.value
+                ]])
               }, [
-                R("div", {
-                  class: f(["h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800", $.value])
-                }, null, 2)
-              ], 2)
-            ], 6)) : S("", !0)
-          ]),
-          _: 3
-        })
-      ]))
-    ], 64));
+                C(t.$slots, "tooltip", {}, () => [
+                  F(G(t.tooltip), 1)
+                ]),
+                T("div", {
+                  class: u(["absolute overflow-hidden shadow-lg z-10", N.value])
+                }, [
+                  T("div", {
+                    class: u(["h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800", V.value])
+                  }, null, 2)
+                ], 2)
+              ], 6)) : R("", !0)
+            ]),
+            _: 3
+          })
+        ]))
+      ]),
+      _: 3
+    }, 40, ["class"]));
   }
 });
 export {
-  Y as default
+  U as default
 };

package/lib/components/tooltip/index.d.ts

@@ -1,4 +1,4 @@
 export { default as XTooltip } from './Tooltip.vue';
-export type { TooltipProps, TooltipTheme } from './Tooltip.vue';
+export type { TooltipProps, TooltipPosition, TooltipTheme } from './Tooltip.vue';
 export { default as XToggleTip } from './ToggleTip.vue';
 export type { ToggleTipProps } from './ToggleTip.vue';