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