ucc-ui
Version:
ucc-ui components library
207 lines (206 loc) • 6.75 kB
JavaScript
import { defineComponent as ee, getCurrentInstance as te, computed as d, ref as n, isRef as oe, mergeProps as v, watch as k, watchEffect as ne, onBeforeUnmount as re, openBlock as r, createElementBlock as i, toHandlers as w, unref as C, renderSlot as E, toDisplayString as I, createBlock as ie, Teleport as ae, createElementVNode as le, normalizeClass as se, createVNode as ue, Transition as pe, withCtx as fe, Fragment as ce, createTextVNode as de, createCommentVNode as M } from "vue";
import { createPopper as ve } from "@popperjs/core";
import { f as me } from "./hooks-Dj9Dthmd.js";
import { p as A } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { C as s, b as ge } from "./CodeEditor-CoBtVBCt.js";
import { d as O, r as W, k as he } from "./vendors-PY6Ic9FA.js";
const ye = ["data-popper-uid"], Te = ["innerHTML"], _e = {
key: 1,
class: "u-tooltip__trigger-content"
}, Re = ["id"], ke = ["innerHTML"], we = {
key: 0,
class: "u-tooltip__popper--arrow",
"data-popper-arrow": ""
}, Le = /* @__PURE__ */ ee({
name: "UTooltip",
__name: "Tooltip",
props: {
appendTo: {},
effect: { default: "dark" },
content: {},
rawContent: { type: Boolean, default: !1 },
placement: { default: "bottom" },
visible: { type: Boolean },
disabled: { type: Boolean },
offset: {},
showTimeout: { default: 0 },
hideTimeout: { default: 300 },
showArrow: { type: Boolean },
autoCloseTimeout: {},
popperClass: {},
popperOptions: { default: () => ({}) },
trigger: { default: "hover" },
virtualTriggering: { type: Boolean },
virtualRef: {},
triggerKeys: {},
persistent: { type: Boolean },
ariaLabel: {},
transition: { default: "fade" },
manual: { type: Boolean },
width: { default: 200 },
transitionProps: {}
},
emits: ["visible-change", "click-outside", "update:visible"],
setup(S, { expose: U, emit: F }) {
const B = te(), t = S, h = F, K = d(() => ({
width: t.width ? A(t.width, { unit: "rem" }) : "auto",
padding: A(t.padding, { unit: "rem" })
})), u = n(!!t.visible), z = n(null), H = n(null), y = n(null), V = n(null), T = d(() => t.virtualTriggering ? (oe(t.virtualRef) ? t.virtualRef.value : t.virtualRef) ?? T.value : H.value), p = n({}), _ = n({}), m = n({}), X = d(() => {
const e = {
placement: t.placement,
modifiers: {
name: "offset",
options: { offset: [0, 9] }
}
};
return v(e, t.popperOptions || {});
});
let o, a;
const j = d(
() => t.trigger === s.HOVER ? t.showTimeout : 0
), q = d(
() => t.trigger === s.HOVER ? t.hideTimeout : 0
);
let l = n(null);
function f() {
a == null || a.cancel(), o == null || o();
}
function c() {
o == null || o.cancel(), a == null || a();
}
function G() {
o == null || o.cancel(), g(!1);
}
function J() {
u.value ? c() : f();
}
function g(e) {
t.disabled || (u.value = e, h("visible-change", e), h("update:visible", e));
}
function b() {
he(l.value) || (l.value.destroy(), l.value = null);
}
function R() {
if (!(t.disabled || t.manual)) {
if (t.trigger === s.HOVER) {
p.value.mouseenter = f, _.value.mouseleave = c, m.value.mouseenter = f, m.value.mouseleave = c;
return;
}
if (t.trigger === s.CLICK) {
p.value.click = J;
return;
}
t.trigger === s.CONTEXTMENU && (p.value.contextmenu = (e) => {
e.preventDefault(), f();
});
}
}
function $() {
p.value = {}, _.value = {}, m.value = {}, R();
}
function Q() {
l.value && l.value.update();
}
me(V, () => {
t.trigger === s.HOVER || t.manual || u.value && c();
});
const Y = k(
u,
(e) => {
e && T.value && y.value && (l.value = ve(
T.value,
y.value,
X.value
));
},
{ flush: "post" }
), Z = k(
() => t.manual,
(e) => {
e ? $() : R();
}
), D = k(
() => t.trigger,
(e, L) => {
e !== L && (o == null || o.cancel(), g(!1), h("visible-change", !1), $());
}
), x = ne(() => {
t.manual || R(), o = O(W(g, null, !0), j.value), a = O(W(g, null, !1), q.value);
});
return re(() => {
Y(), Z(), D(), x(), b();
}), U({
onOpen: f,
onClose: c,
hide: G,
updatePopper: Q,
popperRef: l,
contentRef: n(null),
isFocusInsideContent: () => {
}
}), (e, L) => {
var N, P;
return r(), i("div", v({
class: ["u-tooltip", `u-tooltip--${e.effect}`],
ref_key: "containerRef",
ref: z
}, w(_.value, !0)), [
e.virtualTriggering ? E(e.$slots, "default", { key: 1 }) : (r(), i("div", v({
key: 0,
"data-popper-uid": (N = C(B)) == null ? void 0 : N.uid,
class: "u-tooltip__trigger",
ref_key: "_triggerRef",
ref: H
}, w(p.value, !0)), [
E(e.$slots, "default", {}, () => [
e.rawContent ? (r(), i("span", {
key: 0,
innerHTML: e.content,
class: "u-tooltip__trigger-content"
}, null, 8, Te)) : (r(), i("span", _e, I(e.content), 1))
])
], 16, ye)),
(r(), ie(ae, {
to: `#${C(ge)}`
}, [
le("div", {
ref_key: "popperContainerRef",
ref: V,
id: `popper-uid-${(P = C(B)) == null ? void 0 : P.uid}`,
class: se(["u-tooltip", `u-tooltip--${e.effect}`])
}, [
ue(pe, v({
name: e.transition,
onAfterLeave: b
}, e.transitionProps ?? void 0), {
default: fe(() => [
u.value ? (r(), i("div", v({
key: 0,
ref_key: "popperRef",
ref: y,
class: ["u-tooltip__popper", `u-tooltip__popper--${e.placement}`],
style: K.value
}, w(m.value, !0)), [
E(e.$slots, "content", {}, () => [
e.rawContent ? (r(), i("span", {
key: 0,
innerHTML: e.content
}, null, 8, ke)) : (r(), i(ce, { key: 1 }, [
de(I(e.content), 1)
], 64))
]),
e.showArrow ? (r(), i("div", we)) : M("", !0)
], 16)) : M("", !0)
]),
_: 3
}, 16, ["name"])
], 10, Re)
], 8, ["to"]))
], 16);
};
}
});
export {
Le as _
};