vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
146 lines (145 loc) • 4.68 kB
JavaScript
import { isVNode as G, createTextVNode as I, defineComponent as X, ref as E, computed as P, watch as $, nextTick as q, onMounted as B, createVNode as u, mergeProps as J, Fragment as K } from "vue";
import "../resize-observer/index.mjs";
import { useProps as Q, useNameHelper as U, emitEvent as A } from "@vexip-ui/config";
import { isDefined as Y } from "@vexip-ui/utils";
import { overflowProps as Z } from "./props.mjs";
import O from "../resize-observer/resize-observer.mjs";
function tt(m) {
return typeof m == "function" || Object.prototype.toString.call(m) === "[object Object]" && !G(m);
}
const et = I("").type, lt = /* @__PURE__ */ X({
name: "Overflow",
inheritAttrs: !1,
props: Z,
emits: [],
setup(m, {
attrs: D,
slots: f,
expose: H
}) {
const e = Q("overflow", m, {
items: {
default: null,
static: !0
},
tag: "div",
attrFlag: !1,
static: !1,
maxCount: 0
}), g = U("overflow"), s = E(0), v = E(), c = E(), T = E(), M = P(() => [g.b(), g.bs("vars"), {
[g.bm("inherit")]: e.inherit,
[g.bm("manual")]: e.maxCount > 0
}]), w = P(() => e.attrFlag ? e.attrFlag === !0 ? "hidden" : e.attrFlag : !1);
$([() => {
var t;
return (t = e.items) == null ? void 0 : t.length;
}, () => e.maxCount], () => {
q(d);
}), H({
refresh: d
}), B(d);
function h(t, n) {
w.value ? n ? t.removeAttribute(w.value) : t.setAttribute(w.value, "") : n ? t.style.display = "" : t.style.display = "none";
}
function z(t) {
const n = getComputedStyle(t), o = parseFloat(n.marginLeft) || 0, r = parseFloat(n.marginRight) || 0;
return o + r;
}
function S(t) {
const n = t instanceof Element ? getComputedStyle(t) : t, o = parseFloat(n.paddingLeft) || 0, r = parseFloat(n.paddingRight) || 0;
return o + r;
}
function V(t) {
return t.offsetWidth + z(t);
}
let k = !1, N = s.value;
function d() {
const t = c.value;
if (!v.value || !t) return;
h(t, !0);
const n = v.value.children, o = n.length;
let r = !1;
if (e.maxCount > 0) {
for (let i = 0, x = o - 1; i < x; ++i) {
const W = n[i];
W.style.display = i < e.maxCount ? "" : "none";
}
e.maxCount > o - 1 ? (h(t, !1), s.value = 0) : (s.value = o - 1 - e.maxCount - (f.suffix ? 1 : 0), r = s.value > 0), j(r);
return;
}
const a = T.value, b = getComputedStyle(v.value), R = v.value.offsetWidth - S(b), y = parseFloat(b.columnGap) || 0, F = [];
let l = a ? a.offsetWidth + z(a) + y : 0;
const C = z(t), L = o - (a ? 2 : 1);
for (let i = 0; i < L; ++i) {
if (i < 0) continue;
const x = n[i];
if (r) {
h(x, !1);
continue;
} else
h(x, !0);
const W = V(x) + y;
if (l += W, F[i] = W, l > R) {
for (let p = i; p >= 0; --p)
if (s.value = L - p, l -= F[p], l + t.offsetWidth + C <= R || !p) {
r = !0, i = p - 1, a && (a.style.maxWidth = i === -1 ? `${R - t.offsetWidth}px` : "");
break;
}
}
}
j(r);
}
function j(t) {
N !== s.value && (N = s.value, A(e.onRestChange, s.value)), c.value && h(c.value, t), t !== k && (k = t, A(e.onToggle, t));
}
function _(t) {
t ? c.value = t.nextElementSibling : c.value = void 0;
}
return () => {
var y;
let t;
const n = e.tag || "div", o = f.default, r = e.static, a = ((y = f.counter) == null ? void 0 : y.call(f, {
count: s.value
})[0]) || null, b = () => (a == null ? void 0 : a.type) === et ? u("span", null, [a]) : a;
return u(O, {
onResize: d
}, tt(t = u(n, J(D, {
ref: v,
class: M.value
}), {
default: () => [o && Y(e.items) ? e.items.map((F, l) => {
const C = o({
item: F,
index: l
})[0];
return r ? (C.key = l, C) : u(O, {
key: l,
onResize: d
}, {
default: () => C
});
}) : o == null ? void 0 : o(), a ? u(K, {
ref: _
}, [b()]) : u("span", {
ref: c,
style: {
display: "inline-block"
}
}, null), f.suffix ? u(O, {
onResize: d
}, {
default: () => [u("div", {
ref: T,
class: g.be("suffix")
}, [f.suffix()])]
}) : null]
})) ? t : {
default: () => [t]
});
};
}
});
export {
lt as default
};
//# sourceMappingURL=overflow.mjs.map