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