vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
116 lines (115 loc) • 3.8 kB
JavaScript
import { defineComponent as L, ref as o, computed as p, createBlock as N, openBlock as W, unref as t, withCtx as u, renderSlot as f, createVNode as h, createTextVNode as _, toDisplayString as k, createElementVNode as D, mergeProps as M } from "vue";
import "../tooltip/index.mjs";
import "../renderer/index.mjs";
import { useNameHelper as S, useProps as C, useHoverDelay as w } from "@vexip-ui/config";
import { placementWhileList as E, useSetTimeout as $ } from "@vexip-ui/hooks";
import { getRangeWidth as B } from "@vexip-ui/utils";
import { ellipsisProps as P } from "./props.mjs";
import R from "../tooltip/tooltip.mjs";
import g from "../renderer/renderer.mjs";
const O = /* @__PURE__ */ L({
name: "Ellipsis",
__name: "ellipsis",
props: P,
setup(x, { expose: b }) {
const a = S("ellipsis"), e = C("ellipsis", x, {
placement: {
default: "top",
validator: (r) => E.includes(r)
},
transfer: "body",
noHover: !1,
transitionName: () => a.ns("fade"),
tooltipTheme: {
default: "dark",
validator: (r) => ["light", "dark"].includes(r)
},
tipClass: null,
maxLines: null,
tipMaxWidth: 500,
tipDisabled: !1,
tipShift: !1,
slots: () => ({})
}), m = w(), l = o(!1), s = o(""), { timer: n } = $(), i = o(), T = p(() => ({
[a.b()]: !0,
[a.bm("inherit")]: e.inherit,
[a.bm("multiple")]: e.maxLines
})), y = p(() => e.maxLines > 0 ? { "-webkit-line-clamp": e.maxLines } : ""), H = p(() => ({
maxWidth: typeof e.tipMaxWidth == "string" ? parseFloat(e.tipMaxWidth) || e.tipMaxWidth : `${e.tipMaxWidth}px`
}));
b({
visible: l,
wrapper: i
});
function d() {
clearTimeout(n.hover), !e.tipDisabled && (n.hover = setTimeout(() => {
if (!i.value || !i.value.childNodes.length) {
l.value = !1;
return;
}
if (e.maxLines > 0) {
const r = i.value.scrollHeight, v = i.value.clientHeight;
l.value = r > v;
} else
l.value = B(i.value) > i.value.getBoundingClientRect().width;
s.value = l.value ? i.value.textContent ?? "" : "";
}, m.value));
}
function c() {
clearTimeout(n.hover), !e.tipDisabled && (n.hover = setTimeout(() => {
l.value = !1;
}, m.value));
}
return (r, v) => (W(), N(t(R), {
visible: l.value,
trigger: "custom",
disabled: t(e).tipDisabled,
transfer: t(e).transfer,
placement: t(e).placement,
"no-hover": t(e).noHover,
"transition-name": t(e).transitionName,
"tip-class": t(e).tipClass,
"tip-style": H.value,
reverse: t(e).tooltipTheme === "dark",
shift: t(e).tipShift,
onTipEnter: d,
onTipLeave: c
}, {
trigger: u(() => [
D("div", M({
ref_key: "wrapper",
ref: i
}, r.$attrs, {
class: T.value,
style: y.value,
onMouseenter: d,
onMouseleave: c
}), [
f(r.$slots, "default", {}, () => [
h(t(g), {
renderer: t(e).slots.default
}, null, 8, ["renderer"])
])
], 16)
]),
default: u(() => [
f(r.$slots, "content", { content: s.value }, () => [
h(t(g), {
renderer: t(e).slots.content,
data: { content: s.value }
}, {
default: u(() => [
_(k(s.value), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
_: 3
}, 8, ["visible", "disabled", "transfer", "placement", "no-hover", "transition-name", "tip-class", "tip-style", "reverse", "shift"]));
}
});
export {
O as default
};
//# sourceMappingURL=ellipsis.vue2.mjs.map