@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

package/dist/hooks/use-virtual-list.js

@@ -1,80 +1,88 @@
-import { ref as m, computed as a, onMounted as V, nextTick as M, onUnmounted as $, watch as k } from "vue";
-const C = (n, h) => {
-  const x = m(null), c = m(0), d = m(0), s = a(() => h.enabled?.value ?? !0), i = a(() => Math.max(h.overscan?.value ?? 0, 0)), u = a(() => h.dynamic?.value ?? !1), o = a(() => Math.max(h.itemHeight.value, 1)), g = m({}), w = (e) => u.value && g.value[e] || o.value, f = a(() => {
+import { ref as p, computed as a, onMounted as $, nextTick as w, onUnmounted as k, watch as I } from "vue";
+const C = (n, g) => {
+  const s = p(null), f = p(0), x = p(0);
+  let i = null;
+  const c = a(() => g.enabled?.value ?? !0), h = a(() => Math.max(g.overscan?.value ?? 0, 0)), r = a(() => g.dynamic?.value ?? !1), o = a(() => Math.max(g.itemHeight.value, 1)), m = p({}), H = (e) => r.value && m.value[e] || o.value, d = a(() => {
     const e = [];
     let t = 0;
     for (let l = 0; l < n.value.length; l++)
-      e[l] = t, t += w(l);
+      e[l] = t, t += H(l);
     return { offsets: e, total: t };
-  }), p = a(() => s.value ? u.value ? f.value.total : n.value.length * o.value : 0), r = () => {
-    const e = x.value;
+  }), M = a(() => c.value ? r.value ? d.value.total : n.value.length * o.value : 0), u = () => {
+    const e = s.value;
     if (!e) return;
-    const t = Math.max(p.value - e.clientHeight, 0);
-    e.scrollTop > t && (e.scrollTop = t), c.value = e.scrollTop, d.value = e.clientHeight;
+    const t = Math.max(M.value - e.clientHeight, 0);
+    e.scrollTop > t && (e.scrollTop = t), f.value = e.scrollTop, x.value = e.clientHeight;
   }, y = () => {
-    r();
+    u();
   }, v = a(() => {
-    if (!s.value) return 0;
-    if (u.value) {
-      const e = f.value.offsets.findIndex((t, l) => t + w(l) >= c.value);
-      return Math.max(e === -1 ? 0 : e - i.value, 0);
+    if (!c.value) return 0;
+    if (r.value) {
+      const e = d.value.offsets.findIndex((t, l) => t + H(l) >= f.value);
+      return Math.max(e === -1 ? 0 : e - h.value, 0);
     }
-    return Math.max(Math.floor(c.value / o.value) - i.value, 0);
-  }), H = a(() => {
-    if (!s.value) return n.value.length;
-    if (u.value) {
-      const t = c.value + d.value;
+    return Math.max(Math.floor(f.value / o.value) - h.value, 0);
+  }), T = a(() => {
+    if (!c.value) return n.value.length;
+    if (r.value) {
+      const t = f.value + x.value;
       let l = v.value;
-      for (; l < n.value.length && f.value.offsets[l] <= t; )
+      for (; l < n.value.length && d.value.offsets[l] <= t; )
         l++;
-      return Math.min(l + i.value, n.value.length);
+      return Math.min(l + h.value, n.value.length);
     }
-    const e = Math.ceil((c.value + d.value) / o.value) + i.value;
-    return Math.min(Math.max(e, v.value + i.value), n.value.length);
-  }), T = a(
-    () => u.value ? f.value.offsets[v.value] || 0 : v.value * o.value
-  ), z = a(() => s.value ? n.value.slice(v.value, H.value).map((e, t) => ({
+    const e = Math.ceil((f.value + x.value) / o.value) + h.value;
+    return Math.min(Math.max(e, v.value + h.value), n.value.length);
+  }), b = a(
+    () => r.value ? d.value.offsets[v.value] || 0 : v.value * o.value
+  ), O = a(() => c.value ? n.value.slice(v.value, T.value).map((e, t) => ({
     item: e,
     index: v.value + t
-  })) : n.value.map((e, t) => ({ item: e, index: t }))), E = a(() => ({
-    height: `${p.value}px`
-  })), L = a(() => ({
-    transform: `translateY(${T.value}px)`
-  })), S = (e) => {
-    const t = x.value;
-    if (!t || !s.value) return;
-    const l = Math.min(Math.max(e, 0), Math.max(n.value.length - 1, 0)), R = u.value ? f.value.offsets[l] || 0 : l * o.value;
-    t.scrollTop = R, r();
-  }, b = (e, t) => {
-    if (!u.value || !t) return;
+  })) : n.value.map((e, t) => ({ item: e, index: t }))), R = a(() => ({
+    height: `${M.value}px`
+  })), E = a(() => ({
+    transform: `translateY(${b.value}px)`
+  })), L = (e) => {
+    const t = s.value;
+    if (!t || !c.value) return;
+    const l = Math.min(Math.max(e, 0), Math.max(n.value.length - 1, 0)), V = r.value ? d.value.offsets[l] || 0 : l * o.value;
+    t.scrollTop = V, u();
+  }, S = (e, t) => {
+    if (!r.value || !t) return;
     const l = Math.ceil(t.getBoundingClientRect().height || t.offsetHeight);
-    !l || g.value[e] === l || (g.value = { ...g.value, [e]: l }, M(r));
-  }, I = () => {
-    r();
+    !l || m.value[e] === l || (m.value = { ...m.value, [e]: l }, w(u));
+  }, z = () => {
+    u();
   };
-  return V(() => {
-    M(r), typeof window < "u" && window.addEventListener("resize", I);
-  }), $(() => {
-    typeof window < "u" && window.removeEventListener("resize", I);
-  }), k(
-    () => [n.value.length, s.value, o.value, u.value],
+  return $(() => {
+    w(u), typeof window < "u" && (window.addEventListener("resize", z), "ResizeObserver" in window && (i = new ResizeObserver(u), s.value && i.observe(s.value)));
+  }), k(() => {
+    typeof window < "u" && window.removeEventListener("resize", z), i?.disconnect(), i = null;
+  }), I(
+    s,
+    (e, t) => {
+      t && i?.unobserve(t), e && i?.observe(e), w(u);
+    },
+    { flush: "post" }
+  ), I(
+    () => [n.value.length, c.value, o.value, r.value],
     () => {
-      M(r);
+      w(u);
     }
   ), {
-    containerRef: x,
-    contentStyle: L,
-    endIndex: H,
-    offsetTop: T,
-    refresh: r,
-    measureElement: b,
+    containerRef: s,
+    contentStyle: E,
+    endIndex: T,
+    offsetTop: b,
+    refresh: u,
+    measureElement: S,
     scrollHandler: y,
-    scrollToIndex: S,
-    spacerStyle: E,
+    scrollToIndex: L,
+    spacerStyle: R,
     startIndex: v,
-    totalHeight: p,
-    viewportHeight: d,
-    virtualItems: z
+    totalHeight: M,
+    viewportHeight: x,
+    virtualItems: O
   };
 };
 export {