vexip-ui/es/components/overflow/overflow.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

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