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