@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
133 lines (132 loc) • 5.08 kB
JavaScript
import { defineComponent as W, ref as c, useSlots as X, computed as f, openBlock as b, createBlock as C, resolveDynamicComponent as L, normalizeClass as u, unref as T, withCtx as k, renderSlot as R, Teleport as Y, createVNode as j, Transition as q, createElementBlock as A, normalizeStyle as x, createTextVNode as G, toDisplayString as I, createElementVNode as S, createCommentVNode as _ } from "vue";
import { useTheme as J } from "../../composables/useTheme.js";
const K = {
tag: {
type: String,
default: "div"
},
tooltip: String,
disabled: Boolean,
position: {
type: String,
default: "bottom"
}
}, Q = { name: "XTooltip" }, tt = /* @__PURE__ */ W({
...Q,
props: K,
setup($) {
const n = $, g = c(null), h = c(null), d = c(!1), y = c({}), s = c(n.position), B = X(), N = f(() => n.tooltip || B.tooltip), a = f(() => n.disabled || !N.value), V = f(() => a.value ? "" : {
top: "-bottom-2.5 w-3.5",
bottom: "-top-2.5 w-3.5",
left: "-right-2.5 h-3.5",
right: "-left-2.5 h-3.5"
}[s.value]), z = f(() => 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"
}[s.value]), P = f(() => a.value ? "" : {
top: "origin-bottom",
bottom: "origin-top",
left: "origin-right",
right: "origin-left"
}[s.value]), D = () => {
if (!g.value || !h.value)
return;
const t = g.value.getBoundingClientRect(), e = h.value.getBoundingClientRect(), l = 8, m = window.innerWidth, v = window.innerHeight;
let o = n.position, i = 0, r = 0;
switch (o) {
case "top":
i = t.top - e.height - l, r = t.left + t.width / 2 - e.width / 2, i < 0 && (o = "bottom", i = t.bottom + l);
break;
case "bottom":
i = t.bottom + l, r = t.left + t.width / 2 - e.width / 2, i + e.height > v && (o = "top", i = t.top - e.height - l);
break;
case "left":
i = t.top + t.height / 2 - e.height / 2, r = t.left - e.width - l, r < 0 && (o = "right", r = t.right + l);
break;
case "right":
i = t.top + t.height / 2 - e.height / 2, r = t.right + l, r + e.width > m && (o = "left", r = t.left - e.width - l);
break;
}
(o === "top" || o === "bottom") && (r < 0 && (r = l), r + e.width > m && (r = m - e.width - l)), (o === "left" || o === "right") && (i < 0 && (i = l), i + e.height > v && (i = v - e.height - l));
const p = {};
if (o === "top" || o === "bottom") {
const w = t.left + t.width / 2 - r;
p.left = `${w}px`;
} else if (o === "left" || o === "right") {
const w = t.top + t.height / 2 - i;
p.top = `${w}px`;
}
s.value = o, y.value = {
top: `${i}px`,
left: `${r}px`,
"--arrow-offset-x": p.left || "0px",
"--arrow-offset-y": p.top || "0px"
};
}, E = () => {
a.value || (d.value = !0, setTimeout(D, 0));
}, F = () => {
a.value || (d.value = !1);
}, { classes: H, className: M } = J("Tooltip", {}, n);
return (t, e) => (b(), C(L(t.tag), {
ref_key: "triggerRef",
ref: g,
class: u([
T(M),
{
"inline-block": !t.$attrs.class
}
]),
onMouseenter: E,
onMouseleave: F
}, {
default: k(() => [
R(t.$slots, "default"),
a.value ? _("", !0) : (b(), C(Y, {
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: k(() => [
d.value ? (b(), A("div", {
key: 0,
ref_key: "tooltipRef",
ref: h,
style: x(y.value),
class: u(["fixed z-[10001] pointer-events-none", [
T(H).tooltip,
P.value
]])
}, [
R(t.$slots, "tooltip", {}, () => [
G(I(t.tooltip), 1)
]),
S("div", {
class: u(["absolute overflow-hidden shadow-lg z-10", V.value]),
style: x(s.value === "top" || s.value === "bottom" ? { left: "var(--arrow-offset-x)", transform: "translateX(-50%)" } : { top: "var(--arrow-offset-y)", transform: "translateY(-50%)" })
}, [
S("div", {
class: u(["h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800", z.value])
}, null, 2)
], 6)
], 6)) : _("", !0)
]),
_: 3
})
]))
]),
_: 3
}, 40, ["class"]));
}
});
export {
tt as default
};