@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
121 lines (120 loc) • 4.62 kB
JavaScript
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"
},
tooltip: String,
disabled: Boolean,
position: {
type: String,
default: "bottom"
}
}, 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"
}[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"
}[p.value]), $ = c(() => a.value ? "" : {
top: "origin-bottom",
bottom: "origin-top",
left: "origin-right",
right: "origin-left"
}[p.value]), x = () => {
if (!f.value || !h.value)
return;
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 > 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 > d && (s = "left", i = t.left - e.width - l);
break;
}
(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 = () => {
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
]])
}, [
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 {
U as default
};