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