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 t, computed as T, watch as y, onMounted as B, createBlock as H, openBlock as M, unref as z, normalizeStyle as w, withCtx as $, createElementVNode as A, normalizeClass as N, renderSlot as v, createCommentVNode as O } from "vue";
import V from "../tooltip/index.js";
import { useResizeObserver as _ } 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(c, { expose: g, emit: C }) {
const e = c, n = t(), m = t(), o = t(!1), s = t(!1), d = t(!1), i = t(), h = t(), a = t(), p = t(!1), x = C, r = T(() => typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth);
y(
() => e.line,
(l) => {
l !== void 0 ? a.value = l : a.value = "none";
},
{
immediate: !0
}
), y(
() => [e.maxWidth, e.line, e.tooltip],
() => {
f();
},
{
deep: !0,
flush: "post"
}
), _(i, () => {
p.value ? setTimeout(() => {
p.value = !1;
}) : f();
}), B(() => {
f(), m.value = n.value.observeScroll;
});
function f() {
const l = i.value.scrollWidth, u = i.value.scrollHeight, W = i.value.clientWidth, E = i.value.clientHeight, R = i.value.offsetWidth;
h.value = `${R + 24}px`, l > W || u > E ? (e.expand && (s.value = !0), e.tooltip && (o.value = !0)) : (e.expand && (s.value = !1), e.tooltip && (o.value = !1));
}
function k() {
p.value = !0, a.value !== "none" ? (a.value = "none", e.tooltip && o.value && (d.value = !0, n.value.hide()), x("expandChange", !0)) : (a.value = e.line ?? "none", e.tooltip && !o.value && (d.value = !1, o.value = !0, n.value.show()), x("expandChange", !1));
}
function b() {
d.value && (o.value = !1);
}
return g({
observeScroll: m
}), (l, u) => (M(), H(z(V), {
ref_key: "tooltipRef",
ref: n,
style: w(`max-width: ${r.value}`),
"max-width": h.value,
"content-style": { maxWidth: r.value },
"tooltip-style": { padding: "8px 12px" },
"transition-duration": 200,
onAnimationend: b
}, {
tooltip: $(() => [
o.value ? v(l.$slots, "tooltip", { key: 0 }, () => [
v(l.$slots, "default", {}, void 0, !0)
], !0) : O("", !0)
]),
default: $(() => [
A("div", {
ref_key: "ellipsisRef",
ref: i,
class: N(["ellipsis-container", [c.line ? "ellipsis-line" : "not-ellipsis-line", { "ellipsis-cursor-pointer": s.value }]]),
style: w(`--ellipsis-max-width: ${r.value}; --ellipsis-line: ${a.value};`),
onClick: u[0] || (u[0] = (W) => s.value ? k() : () => !1)
}, [
v(l.$slots, "default", {}, void 0, !0)
], 6)
]),
_: 3
}, 8, ["style", "max-width", "content-style"]));
}
});
export {
D as default
};