@glhrmoura/vue-virtualize 0.1.4 → 0.2.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { shallowRef as Me, ref as L, toValue as o, watch as ve, onBeforeUnmount as Se, computed as O, defineComponent as ie, openBlock as T, createBlock as q, resolveDynamicComponent as U, normalizeStyle as F, withCtx as Z, renderSlot as j, createElementBlock as V, Fragment as W, renderList as _, unref as K, mergeProps as ne, createElementVNode as le, toDisplayString as ue, createTextVNode as Re } from "vue";
-function ee(e) {
+import { shallowRef as _e, ref as W, toValue as l, watch as Ee, onBeforeUnmount as Ce, computed as C, defineComponent as ge, openBlock as V, createBlock as le, resolveDynamicComponent as ae, normalizeStyle as B, withCtx as ce, renderSlot as U, createElementBlock as K, Fragment as te, renderList as ne, unref as j, mergeProps as we, createElementVNode as Me, toDisplayString as Oe, createTextVNode as Xe } from "vue";
+function he(e) {
   return !Number.isFinite(e) || e < 0 ? 0 : e;
 }
-class Te {
+class Ye {
   sizes = /* @__PURE__ */ new Map();
   divergent = !1;
   get(t) {
@@ -29,28 +29,38 @@ class Te {
         }
     }
   }
+  shift(t) {
+    if (!t) return;
+    const i = /* @__PURE__ */ new Map();
+    for (const [n, r] of this.sizes) {
+      const s = n + t;
+      s >= 0 && i.set(s, r);
+    }
+    this.sizes.clear();
+    for (const [n, r] of i) this.sizes.set(n, r);
+  }
 }
-function ze(e, t, i) {
+function Te(e, t, i) {
   return Math.min(i, Math.max(t, e));
 }
-const Ee = 16777216;
-function B(e, t, i) {
+const qe = 16777216;
+function J(e, t, i) {
   const n = Math.max(0, t - Math.max(0, i));
-  return ze(Number.isFinite(e) ? e : 0, 0, n);
+  return Te(Number.isFinite(e) ? e : 0, 0, n);
 }
-function G(e, t) {
-  const i = Math.max(0, Number.isFinite(e) ? e : 0), n = Math.min(i, Ee);
+function H(e, t) {
+  const i = Math.max(0, Number.isFinite(e) ? e : 0), n = Math.min(i, qe);
   return t === void 0 || !Number.isFinite(t) || t <= 0 ? n : Math.min(n, t);
 }
-function Ce(e, t, i, n) {
+function Ue(e, t, i, n) {
   const r = Math.max(0, t - Math.max(0, n)), s = Math.max(0, i - Math.max(0, n));
-  return r <= 0 ? 0 : s <= 0 || s >= r ? B(e, t, n) : Math.max(0, e) / s * r;
+  return r <= 0 ? 0 : s <= 0 || s >= r ? J(e, t, n) : Math.max(0, e) / s * r;
 }
-function ke(e, t, i, n) {
+function Ze(e, t, i, n) {
   const r = Math.max(0, t - Math.max(0, n)), s = Math.max(0, i - Math.max(0, n));
-  return s <= 0 ? 0 : r <= 0 || s >= r ? B(e, t, n) : B(e, t, n) / r * s;
+  return s <= 0 ? 0 : r <= 0 || s >= r ? J(e, t, n) : J(e, t, n) / r * s;
 }
-function Ve(e, t, i) {
+function Je(e, t, i) {
   if (e <= 0) return 0;
   let n = 0, r = e - 1, s = e - 1;
   for (; n <= r; ) {
@@ -59,7 +69,7 @@ function Ve(e, t, i) {
   }
   return s;
 }
-function Ae(e, t, i) {
+function Qe(e, t, i) {
   if (e <= 0) return 0;
   let n = 0, r = e - 1, s = 0;
   for (; n <= r; ) {
@@ -68,7 +78,7 @@ function Ae(e, t, i) {
   }
   return s;
 }
-function $e(e) {
+function et(e) {
   const t = e.start + e.size;
   let i = e.align;
   if (i === "auto") {
@@ -78,7 +88,7 @@ function $e(e) {
   }
   return i === "center" ? e.start - (e.viewport - e.size) / 2 : i === "end" ? t - e.viewport : e.start;
 }
-class Fe {
+class tt {
   count = 0;
   estimateSize = () => 0;
   overscan = 0;
@@ -90,14 +100,14 @@ class Fe {
   viewportSize = 0;
   scrollOffset = 0;
   getItemKey = (t) => t;
-  measurements = new Te();
+  measurements = new Ye();
   built = 0;
   offsets = [];
   laneCursor = [];
   laneEnd = [];
   setOptions(t) {
-    const i = Math.max(1, Math.floor(t.lanes ?? 1)), n = t.gap ?? 0, r = t.paddingStart ?? 0, s = t.paddingEnd ?? 0, d = Math.max(0, Math.floor(t.count)), p = t.itemSize === void 0 || t.itemSize === null ? null : ee(t.itemSize), w = this.itemSize, I = i !== this.lanes || n !== this.gap || r !== this.paddingStart || s !== this.paddingEnd || t.estimateSize !== this.estimateSize || p !== this.itemSize;
-    this.count = d, this.lanes = i, this.gap = n, this.paddingStart = r, this.paddingEnd = s, this.overscan = Math.max(0, Math.floor(t.overscan ?? 0)), this.estimateSize = t.estimateSize, this.itemSize = p, this.getItemKey = t.getItemKey ?? ((y) => y), t.viewportSize !== void 0 && (this.viewportSize = Math.max(0, t.viewportSize)), p !== w && this.measurements.clear(), this.measurements.trim(this.count, this.itemSize), (I || this.built > this.count) && this.resetGeometry();
+    const i = Math.max(1, Math.floor(t.lanes ?? 1)), n = t.gap ?? 0, r = t.paddingStart ?? 0, s = t.paddingEnd ?? 0, d = Math.max(0, Math.floor(t.count)), I = t.itemSize === void 0 || t.itemSize === null ? null : he(t.itemSize), O = this.itemSize, p = i !== this.lanes || n !== this.gap || r !== this.paddingStart || s !== this.paddingEnd || t.estimateSize !== this.estimateSize || I !== this.itemSize;
+    this.count = d, this.lanes = i, this.gap = n, this.paddingStart = r, this.paddingEnd = s, this.overscan = Math.max(0, Math.floor(t.overscan ?? 0)), this.estimateSize = t.estimateSize, this.itemSize = I, this.getItemKey = t.getItemKey ?? ((c) => c), t.viewportSize !== void 0 && (this.viewportSize = Math.max(0, t.viewportSize)), I !== O && this.measurements.clear(), this.measurements.trim(this.count, this.itemSize), (p || this.built > this.count) && this.resetGeometry();
   }
   setScrollOffset(t) {
     this.scrollOffset = Number.isFinite(t) ? t : 0;
@@ -110,7 +120,7 @@ class Fe {
   }
   measure(t, i) {
     if (t < 0 || t >= this.count) return !1;
-    const n = ee(i), r = this.measurements.get(t);
+    const n = he(i), r = this.measurements.get(t);
     if (r !== void 0 && Math.abs(r - n) < 0.5) return !1;
     const s = this.getItemSize(t);
     return this.measurements.set(t, n, this.itemSize), Math.abs(s - n) < 0.5 ? !1 : (this.resetGeometry(), !0);
@@ -118,9 +128,12 @@ class Fe {
   clearMeasurements() {
     this.measurements.clear(), this.resetGeometry();
   }
+  shiftMeasurements(t) {
+    t && (this.measurements.shift(t), this.resetGeometry());
+  }
   getItemSize(t) {
     const i = this.measurements.get(t);
-    return i !== void 0 ? i : this.itemSize !== null ? this.itemSize : ee(this.estimateSize(t));
+    return i !== void 0 ? i : this.itemSize !== null ? this.itemSize : he(this.estimateSize(t));
   }
   getItemOffset(t) {
     if (t <= 0 || this.count <= 0) return this.paddingStart;
@@ -152,26 +165,26 @@ class Fe {
   }
   getVirtualItems() {
     if (this.count <= 0 || this.viewportSize <= 0) return [];
-    const t = B(this.scrollOffset, this.getTotalSize(), this.viewportSize), i = t + this.viewportSize, n = [];
+    const t = J(this.scrollOffset, this.getTotalSize(), this.viewportSize), i = t + this.viewportSize, n = [];
     for (let r = 0; r < this.lanes; r += 1) {
       const s = this.laneLength(r);
       if (s <= 0) continue;
-      const d = Ve(s, t, (y) => {
-        const b = this.ordinalIndex(r, y);
-        return this.getItemOffset(b) + this.getItemSize(b);
-      }), p = Ae(
+      const d = Je(s, t, (c) => {
+        const g = this.ordinalIndex(r, c);
+        return this.getItemOffset(g) + this.getItemSize(g);
+      }), I = Qe(
         s,
         i,
-        (y) => this.getItemOffset(this.ordinalIndex(r, y))
-      ), w = Math.max(0, Math.min(d, p) - this.overscan), I = Math.min(s - 1, Math.max(d, p) + this.overscan);
-      for (let y = w; y <= I; y += 1) {
-        const b = this.ordinalIndex(r, y), E = this.getItemOffset(b), C = this.getItemSize(b);
+        (c) => this.getItemOffset(this.ordinalIndex(r, c))
+      ), O = Math.max(0, Math.min(d, I) - this.overscan), p = Math.min(s - 1, Math.max(d, I) + this.overscan);
+      for (let c = O; c <= p; c += 1) {
+        const g = this.ordinalIndex(r, c), k = this.getItemOffset(g), A = this.getItemSize(g);
         n.push({
-          index: b,
-          key: this.getItemKey(b),
-          start: E,
-          size: C,
-          end: E + C,
+          index: g,
+          key: this.getItemKey(g),
+          start: k,
+          size: A,
+          end: k + A,
           lane: r
         });
       }
@@ -180,14 +193,14 @@ class Fe {
   }
   getOffsetForIndex(t, i = "auto") {
     if (this.count <= 0) return 0;
-    const n = ze(t, 0, this.count - 1), r = this.getItemOffset(n), s = this.getItemSize(n), d = $e({
+    const n = Te(t, 0, this.count - 1), r = this.getItemOffset(n), s = this.getItemSize(n), d = et({
       start: r,
       size: s,
       viewport: this.viewportSize,
       current: this.scrollOffset,
       align: i
     });
-    return B(d, this.getTotalSize(), this.viewportSize);
+    return J(d, this.getTotalSize(), this.viewportSize);
   }
   usesFixedPath() {
     return this.itemSize !== null && !this.measurements.hasDivergent;
@@ -212,13 +225,13 @@ class Fe {
     this.built = 0, this.offsets = [], this.laneCursor = Array.from({ length: this.lanes }, () => this.paddingStart), this.laneEnd = Array.from({ length: this.lanes }, () => this.paddingStart);
   }
 }
-function D() {
+function Z() {
   return typeof window < "u" && typeof document < "u";
 }
-function ye(e) {
+function ke(e) {
   return typeof Element > "u" ? null : e instanceof Element ? e : null;
 }
-function Ke(e, t, i, n) {
+function nt(e, t, i, n) {
   if (n === "smooth" && typeof e.scrollTo == "function") {
     e.scrollTo({
       top: i ? e.scrollTop : t,
@@ -229,22 +242,45 @@ function Ke(e, t, i, n) {
   }
   i ? e.scrollLeft = t : e.scrollTop = t;
 }
-function ce(e, t) {
+function it(e, t, i) {
+  if (!(typeof window > "u")) {
+    if (i === "smooth") {
+      window.scrollTo({
+        top: t ? window.scrollY : e,
+        left: t ? e : window.scrollX,
+        behavior: i
+      });
+      return;
+    }
+    t ? window.scrollTo(e, window.scrollY) : window.scrollTo(window.scrollX, e);
+  }
+}
+function Ie(e, t) {
   return t ? e.scrollLeft : e.scrollTop;
 }
-function fe(e, t) {
+function rt(e) {
+  return typeof window > "u" ? 0 : e ? window.scrollX : window.scrollY;
+}
+function st(e, t) {
   return t ? e.clientWidth : e.clientHeight;
 }
-function Le(e, t) {
+function ot(e) {
+  return typeof window > "u" ? 0 : e ? window.innerWidth : window.innerHeight;
+}
+function lt(e, t) {
   return t ? e.scrollWidth : e.scrollHeight;
 }
-function de(e) {
+function at(e, t) {
+  const i = e.getBoundingClientRect();
+  return typeof window > "u" ? t ? i.left : i.top : t ? i.left + window.scrollX : i.top + window.scrollY;
+}
+function ct(e) {
   return typeof requestAnimationFrame == "function" ? requestAnimationFrame(e) : setTimeout(e, 0);
 }
-function he(e) {
+function ut(e) {
   e && (typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(e) : clearTimeout(e));
 }
-function je(e, t) {
+function dt(e, t) {
   if (e.length !== t.length) return !1;
   for (let i = 0; i < e.length; i += 1) {
     const n = e[i], r = t[i];
@@ -253,176 +289,232 @@ function je(e, t) {
   }
   return !0;
 }
-function te(e) {
-  const t = new Fe(), i = Me([]), n = L(0), r = L(0), s = L(0), d = L(!1), p = (a) => e.estimateSize(a);
-  let w = null, I = null, y = null, b = 0, E = 0, C = 0, u = o(e.revision);
-  const c = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), l = [];
-  function S() {
-    const a = o(e.container);
-    return typeof HTMLElement > "u" ? null : a instanceof HTMLElement ? a : null;
-  }
-  function m() {
-    return o(e.horizontal) ?? !1;
-  }
-  function N() {
-    const a = o(e.initialRect);
-    return a ? m() ? a.width : a.height : 0;
-  }
-  function X(a, f) {
-    return a ? G(f, Le(a, m())) : G(f);
-  }
-  function P(a, f, g) {
-    return Ce(
-      ce(a, m()),
-      f,
-      X(a, f),
-      g
-    );
+function me(e) {
+  const t = new tt(), i = _e([]), n = W(0), r = W(0), s = W(0), d = W(!1), I = (o) => e.estimateSize(o);
+  let O = null, p = !1, c = null, g = null, k = 0, A = 0, f = 0, b = l(e.revision), S = l(e.count), v = e.getItemKey?.(0) ?? 0, z = !1, h = "";
+  const T = /* @__PURE__ */ new Map(), M = /* @__PURE__ */ new Map(), G = [];
+  function D() {
+    const o = l(e.container);
+    return typeof HTMLElement > "u" ? null : o instanceof HTMLElement ? o : null;
+  }
+  function $() {
+    return l(e.horizontal) ?? !1;
+  }
+  function u() {
+    return l(e.windowScroll) ?? !1;
+  }
+  function R() {
+    return l(e.reverse) ?? !1;
+  }
+  function y() {
+    const o = l(e.initialRect);
+    return o ? $() ? o.width : o.height : 0;
+  }
+  function L() {
+    const o = D(), a = l(e.scrollMargin) ?? 0;
+    return !o || !Z() ? a : at(o, $()) + a;
+  }
+  function ee(o, a) {
+    return u() || !o ? H(a) : H(a, lt(o, $()));
+  }
+  function $e(o) {
+    return u() ? Math.max(0, rt($()) - L()) : o ? Ie(o, $()) : 0;
+  }
+  function ve(o) {
+    return u() ? ot($()) : o ? st(o, $()) : 0;
+  }
+  function Ae(o, a, m) {
+    if (u()) {
+      it(a + L(), $(), m);
+      return;
+    }
+    o && nt(o, a, $(), m);
   }
-  function v(a, f, g, R, M) {
-    Ke(
+  function ue(o, a, m) {
+    return Ue(
+      $e(o),
       a,
-      ke(f, g, X(a, g), R),
-      m(),
-      M
+      ee(o, a),
+      m
     );
   }
-  function x() {
-    const a = o(e.revision);
-    Object.is(a, u) || (u = a, t.clearMeasurements());
-    const f = S(), g = f ? fe(f, m()) : 0, R = o(e.viewportInset) ?? 0, M = Math.max(0, (g > 0 ? g : N()) - R), A = o(e.itemSize);
-    t.setOptions({
-      count: o(e.count),
-      estimateSize: p,
-      overscan: o(e.overscan) ?? 5,
-      gap: o(e.gap) ?? 0,
-      paddingStart: o(e.paddingStart) ?? 0,
-      paddingEnd: o(e.paddingEnd) ?? 0,
-      lanes: o(e.lanes) ?? 1,
-      itemSize: A ?? null,
+  function P(o, a, m, w, x) {
+    Ae(
+      o,
+      Ze(a, m, ee(o, m), w),
+      x
+    );
+  }
+  function Fe() {
+    const o = e.onVisibleRangeChange;
+    if (!o) return;
+    const a = i.value, m = l(e.count), w = a.length ? {
+      startIndex: a[0]?.index ?? 0,
+      endIndex: a[a.length - 1]?.index ?? -1,
+      count: m
+    } : { startIndex: 0, endIndex: -1, count: m }, x = `${w.startIndex}:${w.endIndex}:${w.count}`;
+    x !== h && (h = x, o(w));
+  }
+  function F() {
+    const o = l(e.revision);
+    Object.is(o, b) || (b = o, t.clearMeasurements());
+    const a = l(e.count), m = e.getItemKey?.(0) ?? 0, w = R() && S > 0 && a > S && m !== v, x = R() && S > 0 && a > S && m === v, E = w || x ? a - S : 0, _ = R() && t.getViewportSize() > 0 && t.getScrollOffset() + t.getViewportSize() >= t.getTotalSize() - 64;
+    w && E > 0 && t.shiftMeasurements(E);
+    const X = D(), xe = ve(X), He = l(e.viewportInset) ?? 0, Y = Math.max(0, (xe > 0 ? xe : y()) - He), De = l(e.itemSize);
+    if (t.setOptions({
+      count: a,
+      estimateSize: I,
+      overscan: (l(e.overscan) ?? 8) + f,
+      gap: l(e.gap) ?? 0,
+      paddingStart: l(e.paddingStart) ?? 0,
+      paddingEnd: l(e.paddingEnd) ?? 0,
+      lanes: l(e.lanes) ?? 1,
+      itemSize: De ?? null,
       getItemKey: e.getItemKey,
-      viewportSize: M
-    });
-    const $ = t.getTotalSize(), J = Math.max(0, $ - M);
-    t.getScrollOffset() > J && (t.setScrollOffset(J), f && v(f, J, $, M, "auto"));
-    const oe = t.getVirtualItems();
-    je(i.value, oe) || (i.value = oe), n.value !== $ && (n.value = $);
-    const Q = t.getScrollOffset();
-    r.value !== Q && (r.value = Q);
-    const ae = f ? Q - ce(f, m()) : 0;
-    s.value !== ae && (s.value = ae);
-  }
-  function z() {
-    if (!D()) {
-      x();
+      viewportSize: Y
+    }), w && E > 0) {
+      let re = 0;
+      const Pe = l(e.gap) ?? 0;
+      for (let se = 0; se < E; se += 1)
+        re += t.getItemSize(se), se < E - 1 && (re += Pe);
+      re > 0 && t.setScrollOffset(t.getScrollOffset() + re);
+    }
+    const N = t.getTotalSize(), q = Math.max(0, N - Y);
+    R() && !z && N > 0 && Y > 0 ? (z = !0, t.setScrollOffset(q), P(X, q, N, Y, "auto")) : x && _ || t.getScrollOffset() > q ? (t.setScrollOffset(q), P(X, q, N, Y, "auto")) : w && E > 0 && P(X, t.getScrollOffset(), N, Y, "auto"), S = a, v = m;
+    const pe = t.getVirtualItems();
+    dt(i.value, pe) || (i.value = pe), n.value !== N && (n.value = N);
+    const fe = t.getScrollOffset();
+    r.value !== fe && (r.value = fe);
+    const be = X && !u() ? fe - Ie(X, $()) : 0;
+    s.value !== be && (s.value = be), Fe();
+  }
+  function Ke() {
+    d.value = !1, f = 0;
+    for (const [o, a] of T)
+      G.push({ element: o, index: a });
+    ze(), F(), e.onScrollEnd?.();
+  }
+  function Le() {
+    d.value = !0, !(typeof window > "u") && (window.clearTimeout(A), A = window.setTimeout(Ke, 120));
+  }
+  function ie() {
+    const o = D();
+    if (!u() && !o) return;
+    Le();
+    const a = t.getViewportSize(), m = t.getTotalSize(), w = ue(o, m, a), x = t.getScrollOffset(), E = Math.max(1, l(e.itemSize) ?? 48);
+    f = Math.min(24, Math.ceil(Math.abs(w - x) / E)), t.setScrollOffset(w), F();
+  }
+  function de() {
+    O && (O.removeEventListener("scroll", ie), O = null), p && typeof window < "u" && (window.removeEventListener("scroll", ie), window.removeEventListener("resize", F), p = !1), c?.disconnect(), c = null;
+  }
+  function Be() {
+    const o = D();
+    if (u()) {
+      if (p && O === o || (de(), O = o, !Z())) return;
+      p = !0;
+      const x = t.getViewportSize(), E = t.getTotalSize();
+      t.getScrollOffset() > 0 ? P(o, t.getScrollOffset(), E, x, "auto") : t.setScrollOffset(ue(o, E, x)), window.addEventListener("scroll", ie, { passive: !0 }), window.addEventListener("resize", F), o && typeof ResizeObserver < "u" && (c = new ResizeObserver(() => F()), c.observe(o));
       return;
     }
-    b || (b = de(() => {
-      b = 0, d.value = !0, x(), typeof window < "u" && (window.clearTimeout(C), C = window.setTimeout(() => {
-        d.value = !1;
-      }, 150));
-    }));
+    if (o === O && !p || (de(), O = o, !o || !Z())) return;
+    const m = t.getViewportSize(), w = t.getTotalSize();
+    t.getScrollOffset() > 0 ? P(o, t.getScrollOffset(), w, m, "auto") : t.setScrollOffset(ue(o, w, m)), o.addEventListener("scroll", ie, { passive: !0 }), typeof ResizeObserver < "u" && (c = new ResizeObserver(() => F()), c.observe(o));
   }
-  function k() {
-    const a = S();
-    if (!a) return;
-    const f = t.getViewportSize(), g = t.getTotalSize();
-    t.setScrollOffset(P(a, g, f)), z();
-  }
-  function Y() {
-    const a = S();
-    if (a === w || (w && (w.removeEventListener("scroll", k), I?.disconnect(), I = null), w = a, !a || !D())) return;
-    const f = t.getViewportSize(), g = t.getTotalSize();
-    t.getScrollOffset() > 0 ? v(a, t.getScrollOffset(), g, f, "auto") : t.setScrollOffset(P(a, g, f)), a.addEventListener("scroll", k, { passive: !0 }), typeof ResizeObserver < "u" && (I = new ResizeObserver(() => x()), I.observe(a));
-  }
-  function xe() {
-    return !D() || typeof ResizeObserver > "u" ? null : (y || (y = new ResizeObserver((a) => {
-      const f = m();
-      let g = !1;
-      for (const R of a) {
-        const M = c.get(R.target);
-        if (M === void 0) continue;
-        const A = R.borderBoxSize?.[0], $ = f ? A?.inlineSize ?? R.contentRect.width : A?.blockSize ?? R.contentRect.height;
-        $ > 0 && t.measure(M, $) && (g = !0);
+  function je() {
+    return !Z() || typeof ResizeObserver > "u" ? null : (g || (g = new ResizeObserver((o) => {
+      const a = $();
+      let m = !1;
+      if (!d.value) {
+        for (const w of o) {
+          const x = T.get(w.target);
+          if (x === void 0) continue;
+          const E = w.borderBoxSize?.[0], _ = Math.round(
+            a ? E?.inlineSize ?? w.contentRect.width : E?.blockSize ?? w.contentRect.height
+          );
+          _ > 0 && t.measure(x, _) && (m = !0);
+        }
+        m && F();
       }
-      g && x();
-    })), y);
-  }
-  function pe() {
-    E = 0;
-    const a = l.splice(0, l.length), f = m();
-    let g = !1;
-    for (const R of a) {
-      if (!R.element.isConnected) continue;
-      const M = R.element.getBoundingClientRect(), A = f ? M.width : M.height;
-      A > 0 && t.measure(R.index, A) && (g = !0);
+    })), g);
+  }
+  function ze() {
+    if (k = 0, d.value) return;
+    const o = G.splice(0, G.length), a = $();
+    let m = !1;
+    for (const w of o) {
+      if (!w.element.isConnected) continue;
+      const x = w.element.getBoundingClientRect(), E = Math.round(a ? x.width : x.height);
+      E > 0 && t.measure(w.index, E) && (m = !0);
     }
-    g && x();
+    m && F();
   }
-  function be(a, f) {
-    const g = ye(a), R = xe(), M = h.get(f);
-    M && M !== g && (R?.unobserve(M), c.delete(M), h.delete(f)), g && (h.set(f, g), c.set(g, f), R?.observe(g), l.push({ element: g, index: f }), !E && (E = de(pe)));
+  function Ge(o, a) {
+    const m = ke(o), w = je(), x = M.get(a);
+    x && x !== m && (w?.unobserve(x), T.delete(x), M.delete(a)), m && (M.set(a, m), T.set(m, a), w?.observe(m), G.push({ element: m, index: a }), !(d.value || k) && (k = ct(ze)));
   }
-  function se(a, f = "auto") {
-    const g = S(), R = g ? fe(g, m()) : 0, M = R > 0 ? R : t.getViewportSize(), A = t.getTotalSize(), $ = B(a, A, M);
-    t.setScrollOffset($), g && v(g, $, A, M, f), x();
+  function ye(o, a = "auto") {
+    const m = D(), w = ve(m), x = w > 0 ? w : t.getViewportSize(), E = t.getTotalSize(), _ = J(o, E, x);
+    t.setScrollOffset(_), P(m, _, E, x, a), F();
   }
-  function Ie(a, f) {
-    const g = t.getOffsetForIndex(a, f?.align ?? "auto");
-    se(g, f?.behavior ?? "auto");
+  function We(o, a) {
+    const m = t.getOffsetForIndex(o, a?.align ?? "auto");
+    ye(m, a?.behavior ?? "auto");
   }
-  function Oe(a, f) {
-    t.measure(a, f) && x();
+  function Ne(o, a) {
+    t.measure(o, a) && F();
   }
-  return x(), ve(
+  return F(), Ee(
     () => [
-      o(e.count),
-      o(e.overscan),
-      o(e.gap),
-      o(e.paddingStart),
-      o(e.paddingEnd),
-      o(e.lanes),
-      o(e.horizontal),
-      o(e.itemSize),
-      o(e.viewportInset),
-      o(e.revision),
-      o(e.container),
-      o(e.initialRect)?.width,
-      o(e.initialRect)?.height
+      l(e.count),
+      l(e.overscan),
+      l(e.gap),
+      l(e.paddingStart),
+      l(e.paddingEnd),
+      l(e.lanes),
+      l(e.horizontal),
+      l(e.itemSize),
+      l(e.viewportInset),
+      l(e.revision),
+      l(e.container),
+      l(e.windowScroll),
+      l(e.scrollMargin),
+      l(e.reverse),
+      l(e.initialRect)?.width,
+      l(e.initialRect)?.height
     ],
     () => {
-      Y(), x();
+      Be(), F();
     },
     { flush: "post" }
-  ), Se(() => {
-    w && w.removeEventListener("scroll", k), I?.disconnect(), y?.disconnect(), he(b), he(E), typeof window < "u" && window.clearTimeout(C), c.clear(), h.clear(), l.length = 0;
+  ), Ce(() => {
+    de(), g?.disconnect(), ut(k), typeof window < "u" && window.clearTimeout(A), T.clear(), M.clear(), G.length = 0;
   }), {
-    virtualItems: O(() => i.value),
-    totalSize: O(() => n.value),
-    scrollOffset: O(() => r.value),
-    scrollAdjust: O(() => s.value),
-    isScrolling: O(() => d.value),
-    scrollToIndex: Ie,
-    scrollToOffset: se,
-    measure: Oe,
-    measureElement: be
+    virtualItems: C(() => i.value),
+    totalSize: C(() => n.value),
+    scrollOffset: C(() => r.value),
+    scrollAdjust: C(() => s.value),
+    isScrolling: C(() => d.value),
+    scrollToIndex: We,
+    scrollToOffset: ye,
+    measure: Ne,
+    measureElement: Ge
   };
 }
-function Ge(e, t, i) {
+function ft(e, t, i) {
   return typeof e == "function" ? e(t, i) : typeof e == "number" ? e : 48;
 }
-function we(e) {
-  const t = te({
-    count: () => o(e.items).length,
+function Ve(e) {
+  const t = me({
+    count: () => l(e.items).length,
     estimateSize: (n) => {
-      const r = o(e.items);
-      return Ge(e.estimateSize, n, r[n]);
+      const r = l(e.items);
+      return ft(e.estimateSize, n, r[n]);
     },
     getItemKey: (n) => {
-      const s = o(e.items)[n];
+      const s = l(e.items)[n];
       return e.getItemKey?.(s, n) ?? n;
     },
-    itemSize: () => e.itemSize !== void 0 ? o(e.itemSize) : typeof e.estimateSize == "number" ? e.estimateSize : void 0,
+    itemSize: () => e.itemSize !== void 0 ? l(e.itemSize) : typeof e.estimateSize == "number" ? e.estimateSize : void 0,
     container: e.container,
     horizontal: e.horizontal,
     overscan: e.overscan,
@@ -431,11 +523,16 @@ function we(e) {
     paddingEnd: e.paddingEnd,
     initialRect: e.initialRect,
     viewportInset: e.viewportInset,
-    revision: e.revision
+    revision: e.revision,
+    windowScroll: e.windowScroll,
+    scrollMargin: e.scrollMargin,
+    reverse: e.reverse,
+    onVisibleRangeChange: e.onVisibleRangeChange,
+    onScrollEnd: e.onScrollEnd
   });
   return {
-    virtualItems: O(() => {
-      const n = o(e.items);
+    virtualItems: C(() => {
+      const n = l(e.items);
       return t.virtualItems.value.map((r) => {
         const s = n[r.index];
         return {
@@ -455,87 +552,93 @@ function we(e) {
     measureElement: t.measureElement
   };
 }
-function me(e, t, i) {
+function Re(e, t, i) {
   return typeof e == "function" ? e(t) : typeof e == "number" ? e : i;
 }
-function Ne(e) {
-  const t = O(() => Math.max(1, Math.floor(o(e.columnCount) || 1))), i = O(() => Math.ceil(o(e.items).length / t.value)), n = /* @__PURE__ */ new Map(), r = te({
+function ht(e) {
+  const t = C(() => Math.max(1, Math.floor(l(e.columnCount) || 1))), i = C(() => Math.ceil(l(e.items).length / t.value)), n = /* @__PURE__ */ new Map(), r = me({
     count: () => i.value,
-    estimateSize: (u) => me(o(e.estimateRowSize), u, 48),
+    estimateSize: (f) => Re(l(e.estimateRowSize), f, 48),
     itemSize: () => {
-      const u = o(e.estimateRowSize);
-      return typeof u == "number" ? u : void 0;
+      const f = l(e.estimateRowSize);
+      return typeof f == "number" ? f : void 0;
     },
-    overscan: () => o(e.overscanRows) ?? o(e.overscan) ?? 2,
-    gap: () => o(e.rowGap) ?? 0,
+    overscan: () => l(e.overscanRows) ?? l(e.overscan) ?? 2,
+    gap: () => l(e.rowGap) ?? 0,
     horizontal: !1,
     container: e.container,
     initialRect: e.initialRect,
-    revision: e.revision
-  }), s = te({
+    revision: e.revision,
+    windowScroll: e.windowScroll,
+    scrollMargin: e.scrollMargin,
+    onVisibleRangeChange: e.onVisibleRangeChange,
+    onScrollEnd: e.onScrollEnd
+  }), s = me({
     count: () => t.value,
-    estimateSize: (u) => me(o(e.estimateColumnSize), u, 160),
+    estimateSize: (f) => Re(l(e.estimateColumnSize), f, 160),
     itemSize: () => {
-      const u = o(e.estimateColumnSize);
-      return typeof u == "number" ? u : void 0;
+      const f = l(e.estimateColumnSize);
+      return typeof f == "number" ? f : void 0;
     },
-    overscan: () => o(e.overscanColumns) ?? o(e.overscan) ?? 1,
-    gap: () => o(e.columnGap) ?? 0,
+    overscan: () => l(e.overscanColumns) ?? l(e.overscan) ?? 1,
+    gap: () => l(e.columnGap) ?? 0,
     horizontal: !0,
     container: e.container,
     initialRect: e.initialRect,
-    revision: e.revision
-  }), d = O(() => {
-    const u = o(e.items), c = t.value, h = [];
-    for (const l of r.virtualItems.value)
-      for (const S of s.virtualItems.value) {
-        const m = l.index * c + S.index;
-        if (m >= u.length) continue;
-        const N = u[m];
-        h.push({
-          index: m,
-          key: e.getItemKey?.(N, m) ?? m,
-          item: N,
-          row: l,
-          column: S
+    revision: e.revision,
+    windowScroll: e.windowScroll,
+    scrollMargin: e.scrollMargin
+  }), d = C(() => {
+    const f = l(e.items), b = t.value, S = [];
+    for (const v of r.virtualItems.value)
+      for (const z of s.virtualItems.value) {
+        const h = v.index * b + z.index;
+        if (h >= f.length) continue;
+        const T = f[h];
+        S.push({
+          index: h,
+          key: e.getItemKey?.(T, h) ?? h,
+          item: T,
+          row: v,
+          column: z
         });
       }
-    return h;
+    return S;
   });
-  function p(u, c) {
-    const h = o(e.items);
-    if (!h.length) return;
-    const l = Math.min(Math.max(u, 0), h.length - 1), S = t.value;
-    r.scrollToIndex(Math.floor(l / S), c), s.scrollToIndex(l % S, c);
-  }
-  function w(u, c = "auto") {
-    u.top !== void 0 && r.scrollToOffset(u.top, c), u.left !== void 0 && s.scrollToOffset(u.left, c);
-  }
-  function I(u, c) {
-    const h = Math.max(n.get(u) ?? 0, c);
-    h <= 0 || h === n.get(u) || (n.set(u, h), r.measure(u, h));
-  }
-  let y = null;
-  const b = /* @__PURE__ */ new Map();
-  function E() {
-    return !D() || typeof ResizeObserver > "u" ? null : (y || (y = new ResizeObserver((u) => {
-      for (const c of u) {
-        const h = b.get(c.target);
-        if (h === void 0) continue;
-        const S = c.borderBoxSize?.[0]?.blockSize ?? c.contentRect.height;
-        S > 0 && I(h, S);
+  function I(f, b) {
+    const S = l(e.items);
+    if (!S.length) return;
+    const v = Math.min(Math.max(f, 0), S.length - 1), z = t.value;
+    r.scrollToIndex(Math.floor(v / z), b), s.scrollToIndex(v % z, b);
+  }
+  function O(f, b = "auto") {
+    f.top !== void 0 && r.scrollToOffset(f.top, b), f.left !== void 0 && s.scrollToOffset(f.left, b);
+  }
+  function p(f, b) {
+    const S = Math.max(n.get(f) ?? 0, b);
+    S <= 0 || S === n.get(f) || (n.set(f, S), r.measure(f, S));
+  }
+  let c = null;
+  const g = /* @__PURE__ */ new Map();
+  function k() {
+    return !Z() || typeof ResizeObserver > "u" ? null : (c || (c = new ResizeObserver((f) => {
+      for (const b of f) {
+        const S = g.get(b.target);
+        if (S === void 0) continue;
+        const z = b.borderBoxSize?.[0]?.blockSize ?? b.contentRect.height;
+        z > 0 && p(S, z);
       }
-    })), y);
+    })), c);
   }
-  function C(u, c) {
-    const h = ye(u), l = E();
-    if (!h) return;
-    b.set(h, c), l?.observe(h);
-    const S = h.getBoundingClientRect().height;
-    S > 0 && I(c, S);
+  function A(f, b) {
+    const S = ke(f), v = k();
+    if (!S) return;
+    g.set(S, b), v?.observe(S);
+    const z = S.getBoundingClientRect().height;
+    z > 0 && p(b, z);
   }
-  return Se(() => {
-    y?.disconnect(), b.clear();
+  return Ce(() => {
+    c?.disconnect(), g.clear();
   }), {
     virtualRows: r.virtualItems,
     virtualColumns: s.virtualItems,
@@ -544,15 +647,15 @@ function Ne(e) {
     totalWidth: s.totalSize,
     scrollAdjustX: s.scrollAdjust,
     scrollAdjustY: r.scrollAdjust,
-    scrollToIndex: p,
-    scrollToOffset: w,
-    measureRow: I,
-    measureRowElement: C,
+    scrollToIndex: I,
+    scrollToOffset: O,
+    measureRow: p,
+    measureRowElement: A,
     measureColumn: s.measure
   };
 }
-function Be(e) {
-  const t = we({
+function mt(e) {
+  const t = Ve({
     items: e.rows,
     estimateSize: e.estimateRowSize,
     container: e.container,
@@ -561,25 +664,49 @@ function Be(e) {
     initialRect: e.initialRect,
     viewportInset: e.viewportInset,
     revision: e.revision,
-    itemSize: e.itemSize
-  }), i = O(() => {
-    const s = o(e.columns);
+    itemSize: e.itemSize,
+    windowScroll: e.windowScroll,
+    scrollMargin: e.scrollMargin,
+    reverse: e.reverse,
+    onVisibleRangeChange: e.onVisibleRangeChange,
+    onScrollEnd: e.onScrollEnd
+  }), i = C(() => {
+    const s = l(e.columns);
     let d = 0;
-    return s.map((p) => {
-      const w = p.width ?? p.minWidth ?? 160, I = {
-        ...p,
+    const I = s.map((c) => {
+      const g = c.width ?? c.minWidth ?? 160, k = {
+        ...c,
         start: d,
-        size: w,
-        end: d + w
+        size: g,
+        end: d + g,
+        pinOffset: 0,
+        stickyStyle: {}
       };
-      return d += w, I;
+      return d += g, k;
     });
-  }), n = O(() => {
+    let O = 0;
+    for (const c of I)
+      c.pin === "start" && (c.pinOffset = O, c.stickyStyle = {
+        position: "sticky",
+        left: `${O}px`,
+        zIndex: 2
+      }, O += c.size);
+    let p = 0;
+    for (let c = I.length - 1; c >= 0; c -= 1) {
+      const g = I[c];
+      !g || g.pin !== "end" || (g.pinOffset = p, g.stickyStyle = {
+        position: "sticky",
+        right: `${p}px`,
+        zIndex: 2
+      }, p += g.size);
+    }
+    return I;
+  }), n = C(() => {
     const s = i.value;
     return s.length ? s[s.length - 1]?.end ?? 0 : 0;
   });
   return {
-    virtualRows: O(() => t.virtualItems.value),
+    virtualRows: C(() => t.virtualItems.value),
     columns: i,
     totalHeight: t.totalSize,
     totalWidth: n,
@@ -592,11 +719,11 @@ function Be(e) {
     measureElement: t.measureElement
   };
 }
-function ge(e) {
+function oe(e) {
   if (typeof e == "number" && Number.isFinite(e)) return `${e}px`;
   if (typeof e == "string" && e.trim()) return e;
 }
-function H(e) {
+function Q(e) {
   if (typeof e == "number" && Number.isFinite(e)) return e;
   if (typeof e != "string") return 0;
   const t = /^(-?\d+(?:\.\d+)?)px$/.exec(e.trim());
@@ -604,34 +731,42 @@ function H(e) {
   const i = Number(t[1]);
   return Number.isFinite(i) ? i : 0;
 }
-function re(e) {
-  return {
+function Se(e) {
+  return e.windowScroll ? {
+    position: "relative",
+    width: oe(e.width) ?? "100%",
+    height: oe(e.height),
+    overflowAnchor: "none"
+  } : {
     overflow: "auto",
     position: "relative",
-    height: ge(e.height) ?? (e.horizontal ? "100%" : void 0),
-    width: ge(e.width) ?? (e.horizontal ? void 0 : "100%"),
+    height: oe(e.height) ?? (e.horizontal ? "100%" : void 0),
+    width: oe(e.width) ?? (e.horizontal ? void 0 : "100%"),
     overflowAnchor: "none"
   };
 }
-function He(e, t) {
-  const i = G(e);
+function gt(e, t) {
+  const i = H(e);
   return {
     position: "relative",
     width: t ? `${i}px` : "100%",
     height: t ? "100%" : `${i}px`
   };
 }
-function Pe(e, t) {
+function wt(e, t, i) {
   return {
     position: "absolute",
     top: 0,
     left: 0,
-    width: t ? void 0 : "100%",
-    height: t ? "100%" : void 0,
-    transform: t ? `translateX(${e}px)` : `translateY(${e}px)`
+    width: t ? i === void 0 ? void 0 : `${i}px` : "100%",
+    height: t ? "100%" : i === void 0 ? void 0 : `${i}px`,
+    transform: t ? `translateX(${e}px)` : `translateY(${e}px)`,
+    contain: "layout style",
+    boxSizing: "border-box",
+    overflow: "hidden"
   };
 }
-const Xe = /* @__PURE__ */ ie({
+const yt = /* @__PURE__ */ ge({
   __name: "VirtualList",
   props: {
     items: {},
@@ -639,7 +774,7 @@ const Xe = /* @__PURE__ */ ie({
     height: {},
     width: {},
     horizontal: { type: Boolean, default: !1 },
-    overscan: { default: 5 },
+    overscan: { default: 8 },
     gap: { default: 0 },
     paddingStart: { default: 0 },
     paddingEnd: { default: 0 },
@@ -647,88 +782,98 @@ const Xe = /* @__PURE__ */ ie({
     tag: { default: "div" },
     itemTag: { default: "div" },
     itemAttrs: {},
-    revision: {}
+    revision: {},
+    windowScroll: { type: Boolean, default: !1 },
+    scrollMargin: { default: 0 },
+    reverse: { type: Boolean, default: !1 }
   },
-  setup(e, { expose: t }) {
-    const i = e, n = L(null), { virtualItems: r, totalSize: s, scrollAdjust: d, scrollToIndex: p, scrollToOffset: w, measure: I, measureElement: y } = we({
-      items: () => i.items,
-      estimateSize: (c, h) => {
-        const l = i.estimateSize;
-        return typeof l == "number" ? l : l(c, h);
+  emits: ["visibleRangeChange", "scrollEnd"],
+  setup(e, { expose: t, emit: i }) {
+    const n = e, r = i, s = W(null), { virtualItems: d, totalSize: I, scrollAdjust: O, scrollToIndex: p, scrollToOffset: c, measure: g, measureElement: k } = Ve({
+      items: () => n.items,
+      estimateSize: (v, z) => {
+        const h = n.estimateSize;
+        return typeof h == "number" ? h : h(v, z);
       },
-      itemSize: () => typeof i.estimateSize == "number" ? i.estimateSize : void 0,
-      container: n,
-      horizontal: () => i.horizontal,
-      overscan: () => i.overscan,
-      gap: () => i.gap,
-      paddingStart: () => i.paddingStart,
-      paddingEnd: () => i.paddingEnd,
-      getItemKey: (c, h) => i.getItemKey?.(c, h) ?? h,
+      itemSize: () => typeof n.estimateSize == "number" ? n.estimateSize : void 0,
+      container: s,
+      horizontal: () => n.horizontal,
+      overscan: () => n.overscan,
+      gap: () => n.gap,
+      paddingStart: () => n.paddingStart,
+      paddingEnd: () => n.paddingEnd,
+      getItemKey: (v, z) => n.getItemKey?.(v, z) ?? z,
       initialRect: () => ({
-        width: H(i.width),
-        height: H(i.height)
+        width: Q(n.width),
+        height: Q(n.height)
       }),
-      revision: () => i.revision
-    }), b = O(
-      () => re({
-        height: i.height,
-        width: i.width,
-        horizontal: i.horizontal
+      revision: () => n.revision,
+      windowScroll: () => n.windowScroll,
+      scrollMargin: () => n.scrollMargin,
+      reverse: () => n.reverse,
+      onVisibleRangeChange: (v) => r("visibleRangeChange", v),
+      onScrollEnd: () => r("scrollEnd")
+    }), A = C(
+      () => Se({
+        height: n.height,
+        width: n.width,
+        horizontal: n.horizontal,
+        windowScroll: n.windowScroll
       })
-    ), E = O(() => He(s.value, i.horizontal));
-    function C(c) {
-      return Pe(c, i.horizontal);
+    ), f = C(() => gt(I.value, n.horizontal));
+    function b(v, z) {
+      return wt(v, n.horizontal, z);
     }
-    function u(c) {
-      return (h) => {
-        y(h, c);
+    function S(v) {
+      return (z) => {
+        k(z, v);
       };
     }
     return t({
       scrollToIndex: p,
-      scrollToOffset: w,
-      measure: I
-    }), (c, h) => (T(), q(U(e.tag), {
+      scrollToOffset: c,
+      measure: g
+    }), (v, z) => (V(), le(ae(e.tag), {
       ref_key: "container",
-      ref: n,
+      ref: s,
       "data-virtual-container": "",
       role: "list",
-      style: F(b.value)
+      style: B(A.value)
     }, {
-      default: Z(() => [
-        e.items.length ? (T(), V("div", {
+      default: ce(() => [
+        e.items.length ? (V(), K("div", {
           key: 1,
           "data-virtual-spacer": "",
-          style: F(E.value)
+          style: B(f.value)
         }, [
-          (T(!0), V(W, null, _(K(r), (l) => (T(), q(U(e.itemTag), ne({
-            key: l.key,
+          (V(!0), K(te, null, ne(j(d), (h) => (V(), le(ae(e.itemTag), we({
+            key: h.key,
             ref_for: !0,
-            ref: u(l.index),
+            ref: S(h.index),
             role: "listitem",
-            "data-index": l.index,
-            "data-key": String(l.key),
+            "data-index": h.index,
+            "data-key": String(h.key),
             "aria-setsize": e.items.length,
-            "aria-posinset": l.index + 1,
-            style: C(l.start - K(d))
+            "aria-posinset": h.index + 1,
+            style: b(h.start - j(O), h.size)
           }, { ref_for: !0 }, e.itemAttrs), {
-            default: Z(() => [
-              j(c.$slots, "default", {
-                item: l.item,
-                index: l.index,
-                start: l.start,
-                size: l.size,
-                end: l.end
+            default: ce(() => [
+              U(v.$slots, "default", {
+                item: h.item,
+                index: h.index,
+                start: h.start,
+                size: h.size,
+                end: h.end
               })
             ]),
             _: 2
           }, 1040, ["data-index", "data-key", "aria-setsize", "aria-posinset", "style"]))), 128))
-        ], 4)) : j(c.$slots, "empty", {}, void 0, void 0, 0)
+        ], 4)) : U(v.$slots, "empty", {}, void 0, void 0, 0)
       ]),
       _: 3
     }, 8, ["style"]));
   }
-}), We = ["data-index", "data-key"], Ye = /* @__PURE__ */ ie({
+}), St = ["data-index", "data-key"], xt = /* @__PURE__ */ ge({
   __name: "VirtualGrid",
   props: {
     items: {},
@@ -745,102 +890,114 @@ const Xe = /* @__PURE__ */ ie({
     getItemKey: {},
     tag: { default: "div" },
     itemAttrs: {},
-    revision: {}
+    revision: {},
+    windowScroll: { type: Boolean, default: !1 },
+    scrollMargin: { default: 0 }
   },
-  setup(e, { expose: t }) {
-    const i = e, n = L(null), {
-      virtualCells: r,
-      totalWidth: s,
-      totalHeight: d,
+  emits: ["visibleRangeChange", "scrollEnd"],
+  setup(e, { expose: t, emit: i }) {
+    const n = e, r = i, s = W(null), {
+      virtualCells: d,
+      totalWidth: I,
+      totalHeight: O,
       scrollAdjustX: p,
-      scrollAdjustY: w,
-      scrollToIndex: I,
-      scrollToOffset: y,
-      measureRow: b,
-      measureRowElement: E
-    } = Ne({
-      items: () => i.items,
-      columnCount: () => i.columnCount,
-      estimateRowSize: () => i.estimateRowSize,
-      estimateColumnSize: () => i.estimateColumnSize,
-      container: n,
-      overscan: () => i.overscan,
-      overscanRows: () => i.overscanRows,
-      overscanColumns: () => i.overscanColumns,
-      rowGap: () => i.rowGap,
-      columnGap: () => i.columnGap,
-      getItemKey: (l, S) => i.getItemKey?.(l, S) ?? S,
+      scrollAdjustY: c,
+      scrollToIndex: g,
+      scrollToOffset: k,
+      measureRow: A,
+      measureRowElement: f
+    } = ht({
+      items: () => n.items,
+      columnCount: () => n.columnCount,
+      estimateRowSize: () => n.estimateRowSize,
+      estimateColumnSize: () => n.estimateColumnSize,
+      container: s,
+      overscan: () => n.overscan,
+      overscanRows: () => n.overscanRows,
+      overscanColumns: () => n.overscanColumns,
+      rowGap: () => n.rowGap,
+      columnGap: () => n.columnGap,
+      getItemKey: (h, T) => n.getItemKey?.(h, T) ?? T,
       initialRect: () => ({
-        width: H(i.width),
-        height: H(i.height)
+        width: Q(n.width),
+        height: Q(n.height)
       }),
-      revision: () => i.revision
-    }), C = O(
-      () => re({
-        height: i.height,
-        width: i.width,
-        horizontal: !1
+      revision: () => n.revision,
+      windowScroll: () => n.windowScroll,
+      scrollMargin: () => n.scrollMargin,
+      onVisibleRangeChange: (h) => r("visibleRangeChange", h),
+      onScrollEnd: () => r("scrollEnd")
+    }), b = C(
+      () => Se({
+        height: n.height,
+        width: n.width,
+        horizontal: !1,
+        windowScroll: n.windowScroll
       })
-    ), u = O(() => ({
+    ), S = C(() => ({
       position: "relative",
-      width: `${G(s.value)}px`,
-      height: `${G(d.value)}px`
+      width: `${H(I.value)}px`,
+      height: `${H(O.value)}px`
     }));
-    function c(l) {
-      return (S) => {
-        E(S, l);
+    function v(h) {
+      return (T) => {
+        f(T, h);
       };
     }
-    function h(l, S, m) {
+    function z(h, T, M, G) {
       return {
         position: "absolute",
         top: 0,
         left: 0,
-        width: `${S}px`,
-        transform: `translate(${l}px, ${m}px)`
+        width: `${T}px`,
+        height: `${G}px`,
+        transform: `translate(${h}px, ${M}px)`,
+        contain: "layout style",
+        boxSizing: "border-box",
+        overflow: "hidden"
       };
     }
     return t({
-      scrollToIndex: I,
-      scrollToOffset: y,
-      measureRow: b
-    }), (l, S) => (T(), q(U(e.tag), {
+      scrollToIndex: g,
+      scrollToOffset: k,
+      measureRow: A
+    }), (h, T) => (V(), le(ae(e.tag), {
       ref_key: "container",
-      ref: n,
+      ref: s,
       "data-virtual-container": "",
       role: "grid",
-      style: F(C.value)
+      style: B(b.value)
     }, {
-      default: Z(() => [
-        e.items.length ? (T(), V("div", {
+      default: ce(() => [
+        e.items.length ? (V(), K("div", {
           key: 1,
           "data-virtual-spacer": "",
-          style: F(u.value)
+          style: B(S.value)
         }, [
-          (T(!0), V(W, null, _(K(r), (m) => (T(), V("div", ne({
-            key: m.key,
+          (V(!0), K(te, null, ne(j(d), (M) => (V(), K("div", we({
+            key: M.key,
             ref_for: !0,
-            ref: c(m.row.index),
+            ref: v(M.row.index),
             role: "gridcell",
-            "data-index": m.index,
-            "data-key": String(m.key),
-            style: h(m.column.start - K(p), m.column.size, m.row.start - K(w))
+            "data-index": M.index,
+            "data-key": String(M.key),
+            style: z(M.column.start - j(p), M.column.size, M.row.start - j(c), M.row.size)
           }, { ref_for: !0 }, e.itemAttrs), [
-            j(l.$slots, "default", {
-              item: m.item,
-              index: m.index,
-              rowIndex: m.row.index,
-              columnIndex: m.column.index,
-              row: m.row,
-              column: m.column
+            U(h.$slots, "default", {
+              item: M.item,
+              index: M.index,
+              rowIndex: M.row.index,
+              columnIndex: M.column.index,
+              row: M.row,
+              column: M.column
             })
-          ], 16, We))), 128))
-        ], 4)) : j(l.$slots, "empty", {}, void 0, void 0, 0)
+          ], 16, St))), 128))
+        ], 4)) : U(h.$slots, "empty", {}, void 0, void 0, 0)
       ]),
       _: 3
     }, 8, ["style"]));
   }
-}), _e = ["data-index", "data-key", "aria-rowindex"], qe = /* @__PURE__ */ ie({
+}), vt = ["data-index", "data-key", "aria-rowindex"], pt = /* @__PURE__ */ ge({
   __name: "VirtualTable",
   props: {
     rows: {},
@@ -848,155 +1005,171 @@ const Xe = /* @__PURE__ */ ie({
     estimateRowSize: { type: [Number, Function], default: 44 },
     height: {},
     width: {},
-    overscan: { default: 5 },
+    overscan: { default: 8 },
     getRowKey: {},
     stickyHeader: { type: Boolean, default: !0 },
     tag: { default: "div" },
     rowAttrs: {},
-    revision: {}
+    revision: {},
+    windowScroll: { type: Boolean, default: !1 },
+    scrollMargin: { default: 0 },
+    reverse: { type: Boolean, default: !1 }
   },
-  setup(e, { expose: t }) {
-    const i = e, n = L(null), r = L(null), s = L(0), {
-      virtualRows: d,
+  emits: ["visibleRangeChange", "scrollEnd"],
+  setup(e, { expose: t, emit: i }) {
+    const n = e, r = i, s = W(null), d = W(null), I = W(0), {
+      virtualRows: O,
       columns: p,
-      totalWidth: w,
-      totalHeight: I,
-      scrollAdjust: y,
-      scrollToIndex: b,
-      scrollToOffset: E,
-      measure: C,
-      measureElement: u
-    } = Be({
-      rows: () => i.rows,
-      columns: () => i.columns,
-      estimateRowSize: (v, x) => {
-        const z = i.estimateRowSize;
-        return typeof z == "number" ? z : z(v, x);
+      totalWidth: c,
+      totalHeight: g,
+      scrollAdjust: k,
+      scrollToIndex: A,
+      scrollToOffset: f,
+      measure: b,
+      measureElement: S
+    } = mt({
+      rows: () => n.rows,
+      columns: () => n.columns,
+      estimateRowSize: (u, R) => {
+        const y = n.estimateRowSize;
+        return typeof y == "number" ? y : y(u, R);
       },
-      container: n,
-      overscan: () => i.overscan,
-      getRowKey: (v, x) => i.getRowKey?.(v, x) ?? x,
+      container: s,
+      overscan: () => n.overscan,
+      getRowKey: (u, R) => n.getRowKey?.(u, R) ?? R,
       initialRect: () => ({
-        width: H(i.width),
-        height: H(i.height)
+        width: Q(n.width),
+        height: Q(n.height)
       }),
-      viewportInset: s,
-      revision: () => i.revision,
-      itemSize: () => typeof i.estimateRowSize == "number" ? i.estimateRowSize : void 0
+      viewportInset: I,
+      revision: () => n.revision,
+      itemSize: () => typeof n.estimateRowSize == "number" ? n.estimateRowSize : void 0,
+      windowScroll: () => n.windowScroll,
+      scrollMargin: () => n.scrollMargin,
+      reverse: () => n.reverse,
+      onVisibleRangeChange: (u) => r("visibleRangeChange", u),
+      onScrollEnd: () => r("scrollEnd")
     });
-    ve(r, (v, x, z) => {
-      if (x === v && !v || !v || !D() || typeof ResizeObserver > "u") return;
-      const k = () => {
-        s.value = v.getBoundingClientRect().height;
-      }, Y = new ResizeObserver(k);
-      Y.observe(v), k(), z(() => Y.disconnect());
+    Ee(d, (u, R, y) => {
+      if (R === u && !u || !u || !Z() || typeof ResizeObserver > "u") return;
+      const L = () => {
+        I.value = u.getBoundingClientRect().height;
+      }, ee = new ResizeObserver(L);
+      ee.observe(u), L(), y(() => ee.disconnect());
     });
-    const c = O(
-      () => re({
-        height: i.height,
-        width: i.width,
-        horizontal: !1
+    const v = C(
+      () => Se({
+        height: n.height,
+        width: n.width,
+        horizontal: !1,
+        windowScroll: n.windowScroll
       })
-    ), h = O(() => ({
-      minWidth: `${w.value}px`
-    })), l = O(() => ({
-      position: i.stickyHeader ? "sticky" : "relative",
-      top: i.stickyHeader ? "0px" : void 0,
-      zIndex: 1,
+    ), z = C(() => ({
+      minWidth: `${c.value}px`
+    })), h = C(() => ({
+      position: n.stickyHeader ? "sticky" : "relative",
+      top: n.stickyHeader ? "0px" : void 0,
+      zIndex: 3,
       display: "flex",
-      width: `${w.value}px`
-    })), S = O(() => ({
+      width: `${c.value}px`
+    })), T = C(() => ({
       position: "relative",
-      height: `${G(I.value)}px`,
-      width: `${G(w.value)}px`
+      height: `${H(g.value)}px`,
+      width: `${H(c.value)}px`
     }));
-    function m(v) {
+    function M(u) {
       return {
-        width: `${v.size}px`,
-        minWidth: `${v.size}px`,
+        width: `${u.size}px`,
+        minWidth: `${u.size}px`,
         flex: "0 0 auto",
-        textAlign: v.align ?? "left"
+        textAlign: u.align ?? "left",
+        ...u.stickyStyle,
+        zIndex: u.pin ? n.stickyHeader ? 4 : 2 : u.stickyStyle.zIndex
       };
     }
-    function N(v) {
+    function G(u, R) {
       return {
         position: "absolute",
         top: 0,
         left: 0,
         width: "100%",
+        height: `${R}px`,
         display: "flex",
-        transform: `translateY(${v}px)`
+        transform: `translateY(${u}px)`,
+        contain: "layout style",
+        boxSizing: "border-box",
+        overflow: "hidden"
       };
     }
-    function X(v) {
-      return (x) => {
-        u(x, v);
+    function D(u) {
+      return (R) => {
+        S(R, u);
       };
     }
-    function P(v, x, z) {
-      return x.accessor ? x.accessor(v, z) : v && typeof v == "object" && x.id in v ? v[x.id] : "";
+    function $(u, R, y) {
+      return R.accessor ? R.accessor(u, y) : u && typeof u == "object" && R.id in u ? u[R.id] : "";
     }
     return t({
-      scrollToIndex: b,
-      scrollToOffset: E,
-      measure: C
-    }), (v, x) => (T(), q(U(e.tag), {
+      scrollToIndex: A,
+      scrollToOffset: f,
+      measure: b
+    }), (u, R) => (V(), le(ae(e.tag), {
       ref_key: "container",
-      ref: n,
+      ref: s,
       "data-virtual-container": "",
       role: "table",
-      style: F(c.value)
+      style: B(v.value)
     }, {
-      default: Z(() => [
-        le("div", {
-          style: F(h.value)
+      default: ce(() => [
+        Me("div", {
+          style: B(z.value)
         }, [
-          le("div", {
+          Me("div", {
             ref_key: "header",
-            ref: r,
+            ref: d,
             role: "row",
-            style: F(l.value)
+            style: B(h.value)
           }, [
-            j(v.$slots, "header", { columns: K(p) }, () => [
-              (T(!0), V(W, null, _(K(p), (z) => (T(), V("div", {
-                key: z.id,
+            U(u.$slots, "header", { columns: j(p) }, () => [
+              (V(!0), K(te, null, ne(j(p), (y) => (V(), K("div", {
+                key: y.id,
                 role: "columnheader",
-                style: F(m(z))
-              }, ue(z.header), 5))), 128))
+                style: B(M(y))
+              }, Oe(y.header), 5))), 128))
             ])
           ], 4),
-          e.rows.length ? (T(), V("div", {
+          e.rows.length ? (V(), K("div", {
             key: 1,
             "data-virtual-spacer": "",
             role: "rowgroup",
-            style: F(S.value)
+            style: B(T.value)
           }, [
-            (T(!0), V(W, null, _(K(d), (z) => (T(), V("div", ne({
-              key: z.key,
+            (V(!0), K(te, null, ne(j(O), (y) => (V(), K("div", we({
+              key: y.key,
               ref_for: !0,
-              ref: X(z.index),
+              ref: D(y.index),
               role: "row",
-              "data-index": z.index,
-              "data-key": String(z.key),
-              "aria-rowindex": z.index + 1,
-              style: N(z.start - K(y))
+              "data-index": y.index,
+              "data-key": String(y.key),
+              "aria-rowindex": y.index + 1,
+              style: G(y.start - j(k), y.size)
             }, { ref_for: !0 }, e.rowAttrs), [
-              (T(!0), V(W, null, _(K(p), (k) => (T(), V("div", {
-                key: k.id,
+              (V(!0), K(te, null, ne(j(p), (L) => (V(), K("div", {
+                key: L.id,
                 role: "cell",
-                style: F(m(k))
+                style: B(M(L))
               }, [
-                j(v.$slots, "cell", {
-                  row: z.item,
-                  column: k,
-                  rowIndex: z.index,
-                  value: P(z.item, k, z.index)
+                U(u.$slots, "cell", {
+                  row: y.item,
+                  column: L,
+                  rowIndex: y.index,
+                  value: $(y.item, L, y.index)
                 }, () => [
-                  Re(ue(P(z.item, k, z.index)), 1)
+                  Xe(Oe($(y.item, L, y.index)), 1)
                 ])
               ], 4))), 128))
-            ], 16, _e))), 128))
-          ], 4)) : j(v.$slots, "empty", {}, void 0, void 0, 0)
+            ], 16, vt))), 128))
+          ], 4)) : U(u.$slots, "empty", {}, void 0, void 0, 0)
         ], 4)
       ]),
       _: 3
@@ -1004,20 +1177,20 @@ const Xe = /* @__PURE__ */ ie({
   }
 });
 export {
-  Te as MeasurementCache,
-  Ye as VirtualGrid,
-  Xe as VirtualList,
-  qe as VirtualTable,
-  Fe as Virtualizer,
-  B as clampScrollOffset,
-  Ce as mapDomOffsetToVirtual,
-  ke as mapVirtualOffsetToDom,
-  ee as normalizeSize,
-  $e as resolveScrollOffset,
-  G as scrollContentSize,
-  Ne as useVirtualGrid,
-  we as useVirtualList,
-  Be as useVirtualTable,
-  te as useVirtualizer
+  Ye as MeasurementCache,
+  xt as VirtualGrid,
+  yt as VirtualList,
+  pt as VirtualTable,
+  tt as Virtualizer,
+  J as clampScrollOffset,
+  Ue as mapDomOffsetToVirtual,
+  Ze as mapVirtualOffsetToDom,
+  he as normalizeSize,
+  et as resolveScrollOffset,
+  H as scrollContentSize,
+  ht as useVirtualGrid,
+  Ve as useVirtualList,
+  mt as useVirtualTable,
+  me as useVirtualizer
 };
 //# sourceMappingURL=index.mjs.map