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