sci-pro
Version:
136 lines (135 loc) • 4.98 kB
JavaScript
import { defineComponent as S, ref as a, watch as V, onUnmounted as M, openBlock as _, createBlock as T, withCtx as E, createVNode as R, unref as U, renderSlot as X, Teleport as D, createElementBlock as I, normalizeClass as O, normalizeStyle as L, createElementVNode as N, toDisplayString as P, createCommentVNode as j } from "vue";
import "./style/index.css";
import q from "./trigger.vue.mjs";
import { OnlyChild as A } from "./only-child.mjs";
const G = ["data-popper-placement"], J = S({ name: "sci-tooltip" }), te = /* @__PURE__ */ S({
...J,
props: {
content: { default: "" },
effect: { default: "dark" },
trigger: { default: "hover" },
placement: { default: "bottom" }
},
setup($, { expose: z }) {
const s = $, r = a(!1), g = a(s.content), y = a(s.effect), f = a(s.trigger), x = a(s.placement), l = a(x), c = a(0), v = a(0), i = a(0), b = a(0), u = a(null), d = a("none"), m = (e, t = "hover", n) => {
if (f.value == t && (u.value = (e == null ? void 0 : e.target) || e, B(), n || (r.value = !r.value), r.value && u.value instanceof HTMLElement)) {
const {
y: k,
left: o,
height: p,
width: w
} = u.value.getBoundingClientRect(), h = k + window.scrollY;
switch (l.value) {
case "bottom":
c.value = o, v.value = h + p + 10, i.value = Number((w.toFixed() / 2).toFixed()) - 5, i.value >= 0 || (i.value = 2), d.value = window.innerWidth - o - 42 + "px";
break;
case "right":
c.value = o + w + 10, v.value = p / 2 + h - 15, b.value = Number(
(p.toFixed() / 2).toFixed()
), d.value = window.innerWidth - (o + w) - 42 + "px";
break;
case "left":
c.value = -(window.innerWidth - o), v.value = p / 2 + h - 15, b.value = Number(
(p.toFixed() / 2).toFixed()
), d.value = o - 42 + "px";
break;
case "top":
c.value = o, v.value = -(window.innerHeight - h + 10), i.value = Number((w.toFixed() / 2).toFixed()) - 5, i.value >= 0 || (i.value = 2), d.value = window.innerWidth - o - 42 + "px";
break;
}
}
}, W = () => {
f.value == "hover" && (r.value = !1);
}, B = () => {
const {
y: e,
left: t,
height: n,
width: k
} = u.value.getBoundingClientRect(), o = e + window.scrollY;
switch (x.value) {
case "top":
o >= 50 ? l.value = "top" : l.value = "bottom";
break;
case "bottom":
window.innerHeight - (o + n) >= 50 ? l.value = "bottom" : l.value = "top";
break;
case "left":
t >= 50 ? l.value = "left" : l.value = "right";
break;
case "right":
window.innerWidth - (t + k) >= 50 ? l.value = "right" : l.value = "left";
break;
}
}, Y = () => {
switch (l.value) {
case "bottom":
return "0px auto auto 0px";
case "right":
return "0px auto auto 0px";
case "left":
return "0 0 auto auto";
case "top":
return "auto auto 0px 0px";
}
}, H = (e) => {
g.value = e.content, y.value = e.effect ? e.effect : "dark", f.value = e.trigger ? e.trigger : "hover", x.value = e.placement ? e.placement : "bottom";
};
V(
() => s.content,
(e, t) => {
g.value = e;
}
), M(() => {
window.removeEventListener("click", C), window.removeEventListener("resize", F);
});
const C = (e) => {
u.value != e.target && (r.value = !1);
}, F = () => {
r.value && m(u.value, f.value, "resize");
};
return window.addEventListener("click", C), window.addEventListener("resize", F), z({
openTooltip: m,
closeTooltip: W,
directiveUpdateState: H
}), (e, t) => (_(), T(q, null, {
default: E(() => [
R(U(A), {
onClick: t[0] || (t[0] = (n) => m(n, "click")),
onMouseenter: t[1] || (t[1] = (n) => m(n, "hover")),
onMouseleave: t[2] || (t[2] = (n) => W())
}, {
default: E(() => [
X(e.$slots, "default")
]),
_: 3
}),
(_(), T(D, { to: "body" }, [
r.value ? (_(), I("div", {
key: 0,
class: O(["tooltip", ["is-" + y.value]]),
ref: "tooltip",
style: L({
transform: `translate(${c.value}px,${v.value}px)`,
inset: Y(),
maxWidth: d.value
})
}, [
N("span", null, P(g.value), 1),
N("span", {
class: "tooltip-arrow",
"data-popper-placement": l.value,
style: L({
transform: `translate(${i.value}px,${b.value}px)`
})
}, null, 12, G)
], 6)) : j("", !0)
]))
]),
_: 3
}));
}
});
export {
te as default
};