vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
215 lines (214 loc) • 6.89 kB
JavaScript
import { isVNode as ie, createTextVNode as oe, defineComponent as ne, toRef as $, ref as c, computed as s, shallowReadonly as le, watch as I, Fragment as M, createVNode as p, mergeProps as _, renderSlot as ae } from "vue";
import "../popper/index.mjs";
import { useNameHelper as se, useProps as ue, useId as pe, useHoverDelay as fe, emitEvent as g } from "@vexip-ui/config";
import { placementWhileList as ce, useSetTimeout as de, usePopper as ve, useClickOutside as z, useListener as f } from "@vexip-ui/hooks";
import { isElement as ge } from "@vexip-ui/utils";
import { tooltipProps as me } from "./props.mjs";
import he from "../popper/popper.vue.mjs";
function be(d) {
return typeof d == "function" || Object.prototype.toString.call(d) === "[object Object]" && !ie(d);
}
const ye = oe("").type, Pe = /* @__PURE__ */ ne({
name: "Tooltip",
inheritAttrs: !0,
props: me,
emits: ["clickoutside", "update:visible"],
setup(d, {
attrs: T,
slots: m,
emit: X,
expose: q
}) {
const t = se("tooltip"), e = ue("tooltip", d, {
trigger: {
default: "hover",
validator: (r) => ["hover", "click", "focus", "hover-focus", "custom"].includes(r)
},
wrapper: !1,
noArrow: !1,
transitionName: () => t.ns("fade"),
visible: !1,
placement: {
default: "top",
validator: (r) => ce.includes(r)
},
outsideClose: !0,
noHover: !1,
tipClass: null,
tipStyle: null,
transfer: !1,
disabled: !1,
raw: !1,
delay: 250,
tipAlive: !1,
reverse: !1,
width: "auto",
virtual: null,
shift: !1
}), x = pe(), P = fe(), {
timer: h
} = de(), N = $(e, "placement"), n = c(e.visible), v = c(e.visible), G = $(e, "transfer"), O = c(100);
let A = !1, C = !1;
const S = s(() => e.trigger === "hover" || e.trigger === "hover-focus"), k = s(() => e.trigger === "focus" || e.trigger === "hover-focus"), u = c(), E = s(() => {
var a;
const r = ((a = e.virtual) == null ? void 0 : a.$el) ?? e.virtual;
if (r) {
if ("getBoundingClientRect" in r)
return r;
if ("x" in r && "y" in r)
return {
getBoundingClientRect: () => ({
x: r.x,
y: r.y,
left: r.x,
top: r.y,
width: 0,
height: 0
})
};
}
return u.value;
}), l = s(() => ge(E.value) ? E.value : null), V = s(() => typeof e.delay == "number" ? new Array(2).fill(Math.max(e.delay, 0)) : e.delay.map((r) => Math.max(r, 0))), R = c(), b = s(() => {
var r;
return (r = R.value) == null ? void 0 : r.wrapper;
}), H = c(), J = s(() => {
if (!e.shift)
return {
mainAxis: !1,
crossAxis: !1
};
if (e.shift === !0 || e.shift === "both")
return {
mainAxis: !0,
crossAxis: !0
};
const r = N.value.split("-")[0];
return e.shift === (r === "top" || r === "bottom" ? "vertical" : "horizontal") ? {
mainAxis: !1,
crossAxis: !0
} : {
mainAxis: !0,
crossAxis: !1
};
}), {
transferTo: K,
updatePopper: y
} = ve({
placement: N,
transfer: G,
arrow: H,
reference: E,
shift: J,
wrapper: u,
popper: b
});
z(B, u), z(() => {
n.value && !u.value && B();
}, b);
const Q = s(() => e.width === "auto" ? e.tipStyle : e.width === "trigger" ? [{
width: `${O.value}px`
}, e.tipStyle] : [{
width: `${e.width}px`
}, e.tipStyle]), W = le({
toggleVisible: i,
updatePopper: y
});
f(l, "mouseenter", L), f(l, "mouseleave", j), f(l, "click", Y), f(l, "focus", Z), f(l, "blur", ee), f(b, "mouseenter", L), f(b, "mouseleave", j), I(() => e.visible, (r) => {
n.value = r, r && (v.value = !0, y());
}), I(() => e.disabled, (r) => {
r && i(!1);
}), q({
rendering: v,
trigger: l,
toggleVisible: i,
updatePopper: y
});
function i(r = !n.value) {
n.value !== r && (n.value = r, r && (U(), v.value = !0, y()), X("update:visible", r), g(e.onToggle, r));
}
function U() {
l.value && (O.value = l.value.offsetWidth);
}
function w() {
return S.value && A || k.value && C;
}
function L() {
e.disabled || (S.value && (clearTimeout(h.hover), h.hover = setTimeout(() => {
A = !0, i(w());
}, V.value[0] ?? P.value)), g(e.onTipEnter));
}
function j() {
e.disabled || (S.value && (clearTimeout(h.hover), h.hover = setTimeout(() => {
A = !1, i(w());
}, V.value[1] ?? P.value)), g(e.onTipLeave));
}
function Y() {
e.disabled || e.trigger === "click" && i();
}
function Z() {
e.disabled || k.value && (C = !0, i(w()));
}
function ee() {
e.disabled || k.value && (C = !1, i(w()));
}
function B() {
e.disabled || (g(e.onClickOutside), e.outsideClose && e.trigger !== "custom" && n.value && (i(!1), g(e.onOutsideClose)));
}
function re(r) {
r ? u.value = r.nextElementSibling : u.value = void 0;
}
function D() {
v.value = n.value;
}
function te(r) {
r.stopPropagation();
}
return () => {
var F;
const r = e.wrapper ? e.wrapper === !0 ? "span" : e.wrapper : null, a = (F = m.trigger) == null ? void 0 : F.call(m, W), o = a ? a[0] : null;
return [o && (r ? p(r, _(T, {
ref: u,
class: [t.b(), t.bs("vars"), e.inherit && t.bm("inherit")],
"aria-describedby": x.value
}), be(a) ? a : {
default: () => [a]
}) : p(M, {
ref: re
}, [o ? o.type === ye || o.type === M ? r ? p("span", null, [o]) : p("span", T, [o]) : (r || (o.props = _(o.props || {}, T, {
"aria-describedby": x.value
})), o) : null])), !e.disabled && (e.tipAlive || v.value) && p(he, {
ref: R,
id: x.value,
class: {
[t.be("popper")]: !0,
[t.bs("vars")]: !0,
[t.bem("popper", e.reverse ? "dark" : "light")]: !0,
[t.bem("popper", "no-hover")]: e.noHover,
[t.bem("popper", "no-arrow")]: e.noArrow
},
appear: !0,
visible: n.value,
alive: e.tipAlive,
to: K.value,
transition: e.transitionName,
role: "tooltip",
tabindex: -1,
onClick: te,
onAnimationend: D,
onTransitionend: D
}, {
default: () => [p("div", {
class: [!e.raw && t.be("tip"), e.tipClass],
style: Q.value
}, [ae(m, "default", W)]), !e.raw && !e.noArrow && p("div", {
ref: H,
class: t.be("arrow")
}, null)]
})];
};
}
});
export {
Pe as default
};
//# sourceMappingURL=tooltip.mjs.map