vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
85 lines (84 loc) • 3.1 kB
JavaScript
import { defineComponent as S, ref as l, computed as T, watch as W, onMounted as B, createBlock as H, openBlock as M, unref as z, normalizeStyle as y, withCtx as w, createElementVNode as _, normalizeClass as A, renderSlot as v, createCommentVNode as N } from "vue";
import O from "../tooltip/index.js";
import { useResizeObserver as V } from "../utils/index.js";
const D = /* @__PURE__ */ S({
__name: "Ellipsis",
props: {
maxWidth: { default: "100%" },
tooltipMaxWidth: { default: void 0 },
line: { default: void 0 },
expand: { type: Boolean, default: !1 },
tooltip: { type: Boolean, default: !0 }
},
emits: ["expandChange"],
setup($, { expose: g, emit: C }) {
const e = $, n = l(), c = l(), o = l(!1), s = l(!1), p = l(!1), i = l(), m = l(), a = l(), r = l(!1), h = C, d = T(() => typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth);
W(
() => e.line,
(t) => {
t !== void 0 ? a.value = t : a.value = "none";
},
{
immediate: !0
}
), W(
() => [e.maxWidth, e.line, e.tooltip],
() => {
f();
},
{
deep: !0,
flush: "post"
}
), V(i, () => {
r.value ? setTimeout(() => {
r.value = !1;
}) : f();
}), B(() => {
f(), c.value = n.value.observeScroll;
});
function f() {
const t = i.value.scrollWidth, u = i.value.scrollHeight, x = i.value.clientWidth, E = i.value.clientHeight, R = i.value.offsetWidth;
m.value = `${R + 24}px`, t > x || u > E ? (e.expand && (s.value = !0), e.tooltip && (o.value = !0)) : (e.expand && (s.value = !1), e.tooltip && (o.value = !1));
}
function k() {
r.value = !0, a.value !== "none" ? (a.value = "none", e.tooltip && o.value && (p.value = !0, n.value.hide()), h("expandChange", !0)) : (a.value = e.line ?? "none", e.tooltip && !o.value && (p.value = !1, o.value = !0, n.value.show()), h("expandChange", !1));
}
function b() {
p.value && (o.value = !1);
}
return g({
observeScroll: c
}), (t, u) => (M(), H(z(O), {
ref_key: "tooltipRef",
ref: n,
style: y(`max-width: ${d.value}`),
"max-width": m.value,
"content-style": { maxWidth: d.value },
"tooltip-style": { padding: "8px 12px" },
"transition-duration": 200,
onAnimationend: b
}, {
tooltip: w(() => [
o.value ? v(t.$slots, "tooltip", { key: 0 }, () => [
v(t.$slots, "default", {}, void 0, !0)
], !0) : N("", !0)
]),
default: w(() => [
_("div", {
ref_key: "ellipsisRef",
ref: i,
class: A(["ellipsis-container", [t.line ? "ellipsis-line" : "not-ellipsis-line", { "ellipsis-cursor-pointer": s.value }]]),
style: y(`--ellipsis-max-width: ${d.value}; --ellipsis-line: ${a.value};`),
onClick: u[0] || (u[0] = (x) => s.value ? k() : () => !1)
}, [
v(t.$slots, "default", {}, void 0, !0)
], 6)
]),
_: 3
}, 8, ["style", "max-width", "content-style"]));
}
});
export {
D as default
};