vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
203 lines (202 loc) • 6.61 kB
JavaScript
import { isVNode as ie, createTextVNode as oe, defineComponent as ne, toRef as F, ref as c, computed as u, shallowReadonly as le, watch as $, Fragment as I, createVNode as p, mergeProps as M, renderSlot as ae } from "vue";
import "../popper/index.mjs";
import { useNameHelper as ue, useProps as se, 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 _, 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: z,
expose: X
}) {
const t = ue("tooltip"), e = se("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(), q = F(e, "placement"), n = c(e.visible), v = c(e.visible), G = F(e, "transfer"), N = c(100);
let A = !1, C = !1;
const S = u(() => e.trigger === "hover" || e.trigger === "hover-focus"), k = u(() => e.trigger === "focus" || e.trigger === "hover-focus"), s = c(), E = u(() => {
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 s.value;
}), l = u(() => ge(E.value) ? E.value : null), O = u(() => typeof e.delay == "number" ? new Array(2).fill(Math.max(e.delay, 0)) : e.delay.map((r) => Math.max(r, 0))), V = c(), b = u(() => {
var r;
return (r = V.value) == null ? void 0 : r.wrapper;
}), R = c(), J = u(() => e.shift ? e.shift === !0 || e.shift === "both" ? {
crossAxis: !0
} : e.shift === "horizontal" ? {
mainAxis: !1,
crossAxis: !0
} : {} : {
mainAxis: !1
}), {
transferTo: K,
updatePopper: y
} = ve({
placement: q,
transfer: G,
arrow: R,
reference: E,
shift: J,
wrapper: s,
popper: b
});
_(j, s), _(() => {
n.value && !s.value && j();
}, b);
const Q = u(() => e.width === "auto" ? e.tipStyle : e.width === "trigger" ? [{
width: `${N.value}px`
}, e.tipStyle] : [{
width: `${e.width}px`
}, e.tipStyle]), H = le({
toggleVisible: i,
updatePopper: y
});
f(l, "mouseenter", W), f(l, "mouseleave", L), f(l, "click", Y), f(l, "focus", Z), f(l, "blur", ee), f(b, "mouseenter", W), f(b, "mouseleave", L), $(() => e.visible, (r) => {
n.value = r, r && (v.value = !0, y());
}), $(() => e.disabled, (r) => {
r && i(!1);
}), X({
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()), z("update:visible", r), g(e.onToggle, r));
}
function U() {
l.value && (N.value = l.value.offsetWidth);
}
function w() {
return S.value && A || k.value && C;
}
function W() {
e.disabled || (S.value && (clearTimeout(h.hover), h.hover = setTimeout(() => {
A = !0, i(w());
}, O.value[0] ?? P.value)), g(e.onTipEnter));
}
function L() {
e.disabled || (S.value && (clearTimeout(h.hover), h.hover = setTimeout(() => {
A = !1, i(w());
}, O.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 j() {
e.disabled || (g(e.onClickOutside), e.outsideClose && e.trigger !== "custom" && n.value && (i(!1), g(e.onOutsideClose)));
}
function re(r) {
r ? s.value = r.nextElementSibling : s.value = void 0;
}
function B() {
v.value = n.value;
}
function te(r) {
r.stopPropagation();
}
return () => {
var D;
const r = e.wrapper ? e.wrapper === !0 ? "span" : e.wrapper : null, a = (D = m.trigger) == null ? void 0 : D.call(m, H), o = a ? a[0] : null;
return [o && (r ? p(r, M(T, {
ref: s,
class: [t.b(), t.bs("vars"), e.inherit && t.bm("inherit")],
"aria-describedby": x.value
}), be(a) ? a : {
default: () => [a]
}) : p(I, {
ref: re
}, [o ? o.type === ye || o.type === I ? r ? p("span", null, [o]) : p("span", T, [o]) : (r || (o.props = M(o.props || {}, T, {
"aria-describedby": x.value
})), o) : null])), !e.disabled && (e.tipAlive || v.value) && p(he, {
ref: V,
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: B,
onTransitionend: B
}, {
default: () => [p("div", {
class: [!e.raw && t.be("tip"), e.tipClass],
style: Q.value
}, [ae(m, "default", H)]), !e.raw && !e.noArrow && p("div", {
ref: R,
class: t.be("arrow")
}, null)]
})];
};
}
});
export {
Pe as default
};
//# sourceMappingURL=tooltip.mjs.map