vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
343 lines (342 loc) • 13.3 kB
JavaScript
import { defineComponent as Rt, ref as r, computed as X, watch as Y, onMounted as Bt, onBeforeUnmount as Dt, nextTick as bt, createElementBlock as j, openBlock as W, createBlock as Lt, createElementVNode as tt, Teleport as Mt, createVNode as Wt, Transition as xt, withCtx as Ot, withDirectives as Vt, createCommentVNode as et, withKeys as q, normalizeStyle as F, normalizeClass as x, renderSlot as ot, createTextVNode as nt, toDisplayString as lt, vShow as Ht } from "vue";
import { useOptionsSupported as rt, useSlotsExist as Nt, useMutationObserver as Kt, useEventListener as At, useResizeObserver as Ut, cancelRaf as it, rafTimeout as ut } from "../utils/index.js";
const jt = /* @__PURE__ */ Rt({
__name: "Tooltip",
props: {
maxWidth: { default: 240 },
content: { default: void 0 },
contentClass: { default: void 0 },
contentStyle: { default: () => ({}) },
tooltip: { default: void 0 },
tooltipClass: { default: void 0 },
tooltipStyle: { default: () => ({}) },
bgColor: { default: "rgba(0, 0, 0, 0.85)" },
arrow: { type: Boolean, default: !0 },
placement: { default: "top" },
flip: { type: Boolean, default: !0 },
trigger: { default: "hover" },
keyboard: { type: Boolean, default: !1 },
to: { type: [String, Boolean], default: "body" },
transitionDuration: { default: 100 },
showDelay: { default: 100 },
hideDelay: { default: 100 },
show: { type: Boolean, default: !1 },
showControl: { type: Boolean, default: !1 }
},
emits: ["update:show", "openChange", "animationend"],
setup(at, { expose: ft, emit: st }) {
const e = at, O = r(!1), i = r(!1), y = r(), f = r(null), G = r(0), v = r(0), p = r(0), h = r("top"), D = r(null), s = r(), V = r(null), H = r(null), N = r(), K = r(null), u = r(), b = r(document.documentElement.clientWidth), L = r(document.documentElement.clientHeight), { isSupported: vt } = rt("passive"), { isSupported: I } = rt("capture"), S = st, pt = Nt(["tooltip"]), ct = X(() => typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth), c = X(() => pt.tooltip || e.tooltip), mt = X(() => {
const t = s.value?.top ?? 0, l = N.value?.top ?? 0, a = t - l, k = s.value?.left ?? 0, $ = N.value?.left ?? 0, m = k - $;
switch (h.value) {
case "top":
return {
transformOrigin: `50% ${v.value}px`,
top: `${a - v.value}px`,
left: `${m - p.value}px`
};
case "bottom":
return {
transformOrigin: `50% ${e.arrow ? -4 : -6}px`,
top: `${a + v.value}px`,
left: `${m - p.value}px`
};
case "left":
return {
transformOrigin: `${p.value}px 50%`,
top: `${a - v.value}px`,
left: `${m - p.value}px`
};
case "right":
return {
transformOrigin: `${e.arrow ? -4 : -6}px 50%`,
top: `${a - v.value}px`,
left: `${m + p.value}px`
};
default:
return {
transformOrigin: `50% ${v.value}px`,
top: `${a - v.value}px`,
left: `${m - p.value}px`
};
}
});
Y(
() => [e.placement, e.arrow, e.flip],
() => {
C();
},
{
deep: !0
}
), Y(
() => c.value && i.value,
(t) => {
t && !O.value && (O.value = !0);
},
{
immediate: !0
}
), Y(
() => e.show,
(t) => {
t && !i.value && E(), !t && i.value && g();
},
{
immediate: !0
}
), Bt(() => {
A();
}), Dt(() => {
Q();
});
const J = Kt(
f,
() => {
G.value !== f.value?.scrollTop && (G.value = f.value?.scrollTop ?? 0, C());
},
{ subtree: !0, attributes: !0 }
);
At(window, "resize", gt), Ut([K, D], (t) => {
if (c.value && i.value) {
if (t.length === 1 && t[0].target.classList.contains("tooltip-card")) {
const { blockSize: l, inlineSize: a } = t[0].borderBoxSize[0];
if (Math.round(l) === Math.round(u.value.height) && Math.round(a) === Math.round(u.value.width))
return;
}
C();
}
});
function ht() {
let t = V.value?.parentElement;
for (; t; ) {
if (t === document.documentElement) {
H.value = document.documentElement;
return;
}
const { position: l } = getComputedStyle(t);
if (l !== "static") {
H.value = t;
return;
}
t = t.parentElement;
}
}
function gt() {
b.value = document.documentElement.clientWidth, L.value = document.documentElement.clientHeight, A(), C();
}
function A() {
Q(), f.value = Z(D.value), f.value && f.value.addEventListener(
"scroll",
C,
vt.value ? { passive: !0 } : void 0
), f.value === document.documentElement ? J.start() : J.stop();
}
function Q() {
f.value && f.value.removeEventListener("scroll", C), f.value = null;
}
function dt(t) {
return t === document.documentElement ? null : t.parentElement;
}
function Z(t) {
if (t === null) return null;
const l = dt(t);
return l === null ? null : l === document.documentElement ? document.documentElement : ((k) => {
const { overflow: $, overflowX: m, overflowY: U } = getComputedStyle(k);
return /(auto|scroll|overlay)/.test($ + U + m);
})(l) ? l : Z(l);
}
function C() {
i.value && _();
}
async function _() {
await bt(), ht(), N.value = H.value?.getBoundingClientRect(), s.value = D.value?.getBoundingClientRect(), u.value = K.value?.getBoundingClientRect(), e.flip && (h.value = yt()), h.value === "top" ? (v.value = u.value.height + (e.arrow ? 16 : 6), p.value = (u.value.width - s.value.width) / 2) : h.value === "bottom" ? (v.value = s.value.height + (e.arrow ? 4 : 6), p.value = (u.value.width - s.value.width) / 2) : h.value === "left" ? (v.value = (u.value.height - s.value.height) / 2, p.value = u.value.width + (e.arrow ? 16 : 6)) : h.value === "right" && (v.value = (u.value.height - s.value.height) / 2, p.value = s.value.width + (e.arrow ? 4 : 6));
}
function wt() {
if (f.value) {
const t = f.value.getBoundingClientRect();
return {
top: t.top < 0 ? 0 : t.top,
left: t.left < 0 ? 0 : t.left,
bottom: t.bottom > L.value ? L.value : t.bottom,
right: t.right > b.value ? b.value : t.right
};
}
return {
top: 0,
left: 0,
bottom: L.value,
right: b.value
};
}
function yt() {
const { top: t, bottom: l, left: a, right: k } = s.value, { top: $, bottom: m, left: U, right: zt } = wt(), T = t - $ - (e.arrow ? 12 : 0), z = m - l - (e.arrow ? 12 : 0), R = a - U - (e.arrow ? 12 : 0), B = zt - k - (e.arrow ? 12 : 0), d = (u.value.width - s.value.width) / 2, w = (u.value.height - s.value.height) / 2;
return n(e.placement, []);
function n(M, o) {
if (M === "top") {
if (o.includes("top"))
return o.includes("bottom") ? o.includes("left") ? n("right", o) : n("left", o) : n("bottom", o);
if (T < u.value.height + (e.arrow ? 4 : 6) && o.length !== 3)
return n("bottom", [...o, "top"]);
if (R >= d && B >= d)
return "top";
if (o.length !== 3) {
if (R >= d)
return n("left", ["top", "bottom", "right"]);
if (B >= d)
return n("right", ["top", "bottom", "left"]);
}
} else if (M === "bottom") {
if (o.includes("bottom"))
return o.includes("top") ? o.includes("left") ? n("right", o) : n("left", o) : n("top", o);
if (z < u.value.height + (e.arrow ? 4 : 6) && o.length !== 3)
return n("top", [...o, "bottom"]);
if (R >= d && B >= d)
return "bottom";
if (o.length !== 3) {
if (R >= d)
return n("left", ["top", "bottom", "right"]);
if (B >= d)
return n("right", ["top", "bottom", "left"]);
}
} else if (M === "left") {
if (o.includes("left"))
return o.includes("right") ? o.includes("top") ? n("bottom", o) : n("top", o) : n("right", o);
if (R < u.value.width + (e.arrow ? 4 : 6) && o.length !== 3)
return n("right", [...o, "left"]);
if (T >= w && z >= w)
return "left";
if (o.length !== 3) {
if (T >= w)
return n("top", ["left", "right", "bottom"]);
if (z >= w)
return n("bottom", ["left", "right", "top"]);
}
} else if (M === "right") {
if (o.includes("right"))
return o.includes("left") ? o.includes("top") ? n("bottom", o) : n("top", o) : n("left", o);
if (B < u.value.width + (e.arrow ? 4 : 6) && o.length !== 3)
return n("left", [...o, "right"]);
if (T >= w && z >= w)
return "right";
if (o.length !== 3) {
if (T >= w)
return n("top", ["left", "right", "bottom"]);
if (z >= w)
return n("bottom", ["left", "right", "top"]);
}
}
return e.placement;
}
}
function E() {
y.value && it(y.value), i.value || (y.value = ut(() => {
i.value = !0, _(), S("update:show", !0), S("openChange", !0), c.value && e.trigger === "click" && document.addEventListener("click", P, I.value ? { capture: !0 } : !0);
}, e.showDelay));
}
function g() {
y.value && it(y.value), i.value && (y.value = ut(() => {
i.value = !1, S("update:show", !1), S("openChange", !1), c.value && e.trigger === "click" && document.removeEventListener("click", P, I.value ? { capture: !0 } : !0);
}, e.hideDelay));
}
function Ct() {
i.value ? g() : E();
}
function P(t) {
V.value?.contains(t.target) || g();
}
function Et() {
c.value && e.trigger === "hover" && !e.showControl && E();
}
function St() {
c.value && e.trigger === "hover" && !e.showControl && g();
}
function kt() {
S("animationend", i.value);
}
function $t() {
e.trigger === "hover" && !e.showControl && E();
}
function Tt() {
e.trigger === "hover" && !e.showControl && g();
}
return ft({
show: E,
hide: g,
observeScroll: A
}), (t, l) => (W(), j("div", {
class: "tooltip-wrap",
onMouseenter: Et,
onMouseleave: St
}, [
(W(), Lt(Mt, {
disabled: t.to === !1,
to: t.to === !1 ? null : t.to
}, [
Wt(xt, {
name: "zoom",
"enter-from-class": "zoom-enter",
"enter-active-class": "zoom-enter",
"enter-to-class": "zoom-enter zoom-enter-active",
"leave-from-class": "zoom-leave",
"leave-active-class": "zoom-leave zoom-leave-active",
"leave-to-class": "zoom-leave zoom-leave-active",
onAnimationend: kt
}, {
default: Ot(() => [
O.value ? Vt((W(), j("div", {
key: 0,
ref_key: "tooltipRef",
ref: V,
class: x(["tooltip-card-container", { [`tooltip-${h.value}-padding`]: t.arrow }]),
style: F({
...mt.value,
"--tooltip-max-width": ct.value,
"--tooltip-background-color": t.bgColor,
"--tooltip-transition-duration": `${t.transitionDuration}ms`
}),
onMouseenter: $t,
onMouseleave: Tt,
onKeydown: l[0] || (l[0] = q((a) => t.trigger === "click" && t.keyboard && i.value ? g() : () => !1, ["esc"]))
}, [
tt("div", {
ref_key: "tooltipCardRef",
ref: K,
class: x(["tooltip-card", t.tooltipClass]),
style: F(t.tooltipStyle)
}, [
ot(t.$slots, "tooltip", {}, () => [
nt(lt(t.tooltip), 1)
], !0)
], 6),
t.arrow ? (W(), j("div", {
key: 0,
class: x(["tooltip-arrow", `arrow-${h.value || "top"}`])
}, null, 2)) : et("", !0)
], 38)), [
[Ht, c.value && i.value]
]) : et("", !0)
]),
_: 3
})
], 8, ["disabled", "to"])),
tt("span", {
ref_key: "tooltipContentRef",
ref: D,
class: x(["tooltip-content", t.contentClass]),
style: F(t.contentStyle),
onClick: l[1] || (l[1] = (a) => c.value && t.trigger === "click" && !i.value ? E() : () => !1),
onKeydown: [
l[2] || (l[2] = q((a) => c.value && t.trigger === "click" && t.keyboard ? Ct() : () => !1, ["enter"])),
l[3] || (l[3] = q((a) => c.value && t.trigger === "click" && t.keyboard && i.value ? g() : () => !1, ["esc"]))
]
}, [
ot(t.$slots, "default", {}, () => [
nt(lt(t.content), 1)
], !0)
], 38)
], 32));
}
});
export {
jt as default
};