@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
203 lines (202 loc) • 6.63 kB
JavaScript
import { isVNode as ie, createTextVNode as oe, defineComponent as ne, computed as o, toRef as D, ref as c, shallowReadonly as le, watch as F, createVNode as p, mergeProps as I, Fragment as ae, renderSlot as ue } from "vue";
import "../popper/index.mjs";
import { useNameHelper as se, useProps as pe, useHoverDelay as fe, emitEvent as g } from "@vexip-ui/config";
import { placementWhileList as ce, useSetTimeout as de, usePopper as ve, useClickOutside as M, useListener as f } from "@vexip-ui/hooks";
import { getGlobalCount as ge, isElement as me } from "@vexip-ui/utils";
import { tooltipProps as he } from "./props.mjs";
import be from "../popper/popper.vue.mjs";
function ye(d) {
return typeof d == "function" || Object.prototype.toString.call(d) === "[object Object]" && !ie(d);
}
const we = oe("").type, Ne = /* @__PURE__ */ ne({
name: "Tooltip",
inheritAttrs: !0,
props: he,
emits: ["clickoutside", "update:visible"],
setup(d, {
attrs: T,
slots: m,
emit: _,
expose: z
}) {
const t = se("tooltip"), e = pe("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
}), G = `${ge()}`, x = o(() => t.bs(G)), P = fe(), {
timer: h
} = de(), X = D(e, "placement"), n = c(e.visible), v = c(e.visible), q = D(e, "transfer"), N = c(100);
let A = !1, C = !1;
const S = o(() => e.trigger === "hover" || e.trigger === "hover-focus"), k = o(() => e.trigger === "focus" || e.trigger === "hover-focus"), s = c(), E = o(() => {
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 = o(() => me(E.value) ? E.value : null), O = o(() => typeof e.delay == "number" ? new Array(2).fill(Math.max(e.delay, 0)) : e.delay.map((r) => Math.max(r, 0))), V = c(), b = o(() => {
var r;
return (r = V.value) == null ? void 0 : r.wrapper;
}), R = c(), J = o(() => 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: X,
transfer: q,
arrow: R,
reference: E,
shift: J,
wrapper: s,
popper: b
});
M($, s), M(() => {
n.value && !s.value && $();
}, b);
const Q = o(() => 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), F(() => e.visible, (r) => {
n.value = r, r && (v.value = !0, y());
}), F(() => e.disabled, (r) => {
r && i(!1);
}), z({
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()), _("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 $() {
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 j() {
v.value = n.value;
}
function te(r) {
r.stopPropagation();
}
return () => {
var B;
const r = e.wrapper ? e.wrapper === !0 ? "span" : e.wrapper : null, a = (B = m.trigger) == null ? void 0 : B.call(m, H), u = a ? a[0] : null;
return [u && (r ? p(r, I(T, {
ref: s,
class: [t.b(), t.bs("vars"), e.inherit && t.bm("inherit")],
"aria-describedby": x.value
}), ye(a) ? a : {
default: () => [a]
}) : p(ae, {
ref: re
}, [u ? u.type === we ? r ? p("span", null, [u]) : p("span", T, [u]) : (r || (u.props = I(u.props || {}, T, {
"aria-describedby": x.value
})), u) : null])), !e.disabled && (e.tipAlive || v.value) && p(be, {
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: j,
onTransitionend: j
}, {
default: () => [p("div", {
class: [!e.raw && t.be("tip"), e.tipClass],
style: Q.value
}, [ue(m, "default", H)]), !e.raw && !e.noArrow && p("div", {
ref: R,
class: t.be("arrow")
}, null)]
})];
};
}
});
export {
Ne as default
};
//# sourceMappingURL=tooltip.mjs.map