vuux/dist/es/Fold/src/hook/useFold.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as f, computed as w, watch as U, onMounted as q, onUnmounted as B, nextTick as D } from "vue";
import { Utils as G } from "@vuux/utils";
const K = (t, v, y, C) => {
  const i = f(t.max), n = f(t.text.length), u = f(!1), r = f(null), z = w(() => (t.text.slice(0, n.value) || "").trim() + t.ellipsis), h = w(() => t.text && n.value !== t.text.length), A = w(() => h.value && !u.value ? z.value : t.text);
  let g = 0, s = [];
  const T = () => {
    C.value && (C.value.textContent = A.value);
  }, m = () => {
    if (!y.value)
      return 0;
    const e = Array.from(y.value.getClientRects());
    if (s.length === e.length && s.every((l, x) => l.top === e[x].top && l.bottom === e[x].bottom))
      return g;
    s = e;
    const a = Object.keys(
      e.reduce(
        (l, { top: x, bottom: j }) => {
          const L = `${x}/${j}`;
          return l[L] || (l[L] = !0), l;
        },
        {}
      )
    ).length;
    return g = a, a;
  }, c = () => !i.value || !v.value ? !1 : !!(i.value && m() > i.value || v.value.scrollHeight > v.value.offsetHeight), d = (e) => {
    n.value = e, T();
  }, O = (e) => {
    d(n.value + e);
  }, F = () => {
    for (; (!c() || m() < 2) && n.value < t.text.length; )
      O(1);
  }, H = () => {
    for (; c() && m() > 1 && n.value > 0; )
      O(-1);
  }, M = () => {
    F(), H();
  }, b = (e = 0, a = n.value) => {
    if (a - e <= 3) {
      M();
      return;
    }
    const l = Math.floor((a + e) / 2);
    d(l), c() ? b(e, l) : b(l, a);
  }, k = () => {
    r.value && (r.value.disconnect(), r.value = null), s = [], g = 0;
  }, o = G.debounce(() => {
    u.value || (T(), (c() || h.value) && b());
  }, 10), E = () => {
    t.text && (n.value = t.text.length, k(), D(() => {
      o();
    }));
  }, $ = () => {
    u.value = !u.value, i.value = u.value ? void 0 : t.max, u.value ? d(t.text.length) : o();
  };
  return U(() => t.text, E), U(
    () => t.max,
    (e) => {
      i.value = e, u.value || o();
    }
  ), q(() => {
    E(), v.value && (r.value = new ResizeObserver(() => {
      o();
    }), r.value.observe(v.value));
  }), B(() => {
    k();
  }), {
    localExpanded: u,
    isClamped: h,
    handleToggleExpand: $
  };
};
export {
  K as useFold
};