@glhrmoura/vue-virtualize 0.2.1 → 0.2.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { shallowRef as Xe, ref as _, toValue as l, watch as Te, onBeforeUnmount as Ce, computed as T, defineComponent as ve, openBlock as V, createBlock as ce, resolveDynamicComponent as ue, normalizeStyle as W, withCtx as de, renderSlot as Z, createElementBlock as B, Fragment as ne, renderList as ie, unref as N, mergeProps as we, createElementVNode as Ee, toDisplayString as Oe, createTextVNode as Ye } from "vue";
+import { shallowRef as Xe, ref as _, toValue as l, watch as Te, onBeforeUnmount as Ce, computed as T, defineComponent as we, openBlock as V, createBlock as ce, resolveDynamicComponent as ue, normalizeStyle as W, withCtx as de, renderSlot as Z, createElementBlock as B, Fragment as ne, renderList as ie, unref as N, mergeProps as ve, createElementVNode as Ee, toDisplayString as Oe, createTextVNode as Ye } from "vue";
 function he(e) {
   return !Number.isFinite(e) || e < 0 ? 0 : e;
 }
@@ -170,18 +170,18 @@ class nt {
       const o = this.laneLength(r);
       if (o <= 0) continue;
       const d = Qe(o, t, (c) => {
-        const v = this.ordinalIndex(r, c);
-        return this.getItemOffset(v) + this.getItemSize(v);
+        const w = this.ordinalIndex(r, c);
+        return this.getItemOffset(w) + this.getItemSize(w);
       }), O = et(
         o,
         i,
         (c) => this.getItemOffset(this.ordinalIndex(r, c))
       ), E = Math.max(0, Math.min(d, O) - this.overscan), p = Math.min(o - 1, Math.max(d, O) + this.overscan);
       for (let c = E; c <= p; c += 1) {
-        const v = this.ordinalIndex(r, c), k = this.getItemOffset(v), L = this.getItemSize(v);
+        const w = this.ordinalIndex(r, c), k = this.getItemOffset(w), L = this.getItemSize(w);
         n.push({
-          index: v,
-          key: this.getItemKey(v),
+          index: w,
+          key: this.getItemKey(w),
           start: k,
           size: L,
           end: k + L,
@@ -301,7 +301,7 @@ function dt(e, t) {
 }
 function ge(e) {
   const t = new nt(), i = Xe([]), n = _(0), r = _(0), o = _(0), d = _(!1), O = (s) => e.estimateSize(s);
-  let E = null, p = !1, c = null, v = null, k = 0, L = 0, m = 0, b = l(e.revision), w = l(e.count), S = e.getItemKey?.(0) ?? 0, y = !1, h = "";
+  let E = null, p = !1, c = null, w = null, k = 0, L = 0, m = 0, b = l(e.revision), v = l(e.count), S = e.getItemKey?.(0) ?? 0, y = !1, h = "";
   const C = /* @__PURE__ */ new Map(), M = /* @__PURE__ */ new Map(), H = [];
   function Q() {
     const s = l(e.container);
@@ -370,7 +370,7 @@ function ge(e) {
   function F() {
     const s = l(e.revision);
     Object.is(s, b) || (b = s, t.clearMeasurements());
-    const a = l(e.count), f = e.getItemKey?.(0) ?? 0, g = I() && w > 0 && a > w && f !== S, z = I() && w > 0 && a > w && f === S, R = g || z ? a - w : 0, K = I() && t.getViewportSize() > 0 && t.getScrollOffset() + t.getViewportSize() >= t.getTotalSize() - 64;
+    const a = l(e.count), f = e.getItemKey?.(0) ?? 0, g = I() && v > 0 && a > v && f !== S, z = I() && v > 0 && a > v && f === S, R = g || z ? a - v : 0, K = I() && t.getViewportSize() > 0 && t.getScrollOffset() + t.getViewportSize() >= t.getTotalSize() - 64;
     g && R > 0 && t.shiftMeasurements(R);
     const D = Q(), pe = ye(D), De = l(e.viewportInset) ?? 0, P = Math.max(0, (pe > 0 ? pe : x()) - De), Pe = l(e.itemSize);
     if (t.setOptions({
@@ -395,7 +395,7 @@ function ge(e) {
     let se = !1;
     I() && !y && G > 0 && P > 0 ? (y = !0, t.setScrollOffset(q), Y(D, q, G, P, "auto"), se = !0) : z && K ? (t.setScrollOffset(q), Y(D, q, G, P, "auto"), se = !0) : g && R > 0 && (Y(D, t.getScrollOffset(), G, P, "auto"), se = !0), !se && u() && D ? t.setScrollOffset(
       J(re(D, G, P), G, P)
-    ) : t.getScrollOffset() > q && (t.setScrollOffset(q), Y(D, q, G, P, "auto")), w = a, S = f;
+    ) : t.getScrollOffset() > q && (t.setScrollOffset(q), Y(D, q, G, P, "auto")), v = a, S = f;
     const be = t.getVirtualItems();
     dt(i.value, be) || (i.value = be), n.value !== G && (n.value = G);
     const me = t.getScrollOffset();
@@ -438,7 +438,7 @@ function ge(e) {
     t.getScrollOffset() > 0 ? Y(s, t.getScrollOffset(), g, f, "auto") : t.setScrollOffset(re(s, g, f)), s.addEventListener("scroll", A, { passive: !0 }), typeof ResizeObserver < "u" && (c = new ResizeObserver(() => F()), c.observe(s));
   }
   function Ge() {
-    return !U() || typeof ResizeObserver > "u" ? null : (v || (v = new ResizeObserver((s) => {
+    return !U() || typeof ResizeObserver > "u" ? null : (w || (w = new ResizeObserver((s) => {
       const a = $();
       let f = !1;
       if (!d.value) {
@@ -452,7 +452,7 @@ function ge(e) {
         }
         f && F();
       }
-    })), v);
+    })), w);
   }
   function ze() {
     if (k = 0, d.value) return;
@@ -504,7 +504,7 @@ function ge(e) {
     },
     { flush: "post", immediate: !0 }
   ), Ce(() => {
-    fe(), v?.disconnect(), ut(k), typeof window < "u" && window.clearTimeout(L), C.clear(), M.clear(), H.length = 0;
+    fe(), w?.disconnect(), ut(k), typeof window < "u" && window.clearTimeout(L), C.clear(), M.clear(), H.length = 0;
   }), {
     virtualItems: T(() => i.value),
     totalSize: T(() => n.value),
@@ -606,13 +606,13 @@ function mt(e) {
     windowScroll: e.windowScroll,
     scrollMargin: e.scrollMargin
   }), d = T(() => {
-    const m = l(e.items), b = t.value, w = [];
+    const m = l(e.items), b = t.value, v = [];
     for (const S of r.virtualItems.value)
       for (const y of o.virtualItems.value) {
         const h = S.index * b + y.index;
         if (h >= m.length) continue;
         const C = m[h];
-        w.push({
+        v.push({
           index: h,
           key: e.getItemKey?.(C, h) ?? h,
           item: C,
@@ -620,42 +620,42 @@ function mt(e) {
           column: y
         });
       }
-    return w;
+    return v;
   });
   function O(m, b) {
-    const w = l(e.items);
-    if (!w.length) return;
-    const S = Math.min(Math.max(m, 0), w.length - 1), y = t.value;
+    const v = l(e.items);
+    if (!v.length) return;
+    const S = Math.min(Math.max(m, 0), v.length - 1), y = t.value;
     r.scrollToIndex(Math.floor(S / y), b), o.scrollToIndex(S % y, b);
   }
   function E(m, b = "auto") {
     m.top !== void 0 && r.scrollToOffset(m.top, b), m.left !== void 0 && o.scrollToOffset(m.left, b);
   }
   function p(m, b) {
-    const w = Math.max(n.get(m) ?? 0, b);
-    w <= 0 || w === n.get(m) || (n.set(m, w), r.measure(m, w));
+    const v = Math.max(n.get(m) ?? 0, b);
+    v <= 0 || v === n.get(m) || (n.set(m, v), r.measure(m, v));
   }
   let c = null;
-  const v = /* @__PURE__ */ new Map();
+  const w = /* @__PURE__ */ new Map();
   function k() {
     return !U() || typeof ResizeObserver > "u" ? null : (c || (c = new ResizeObserver((m) => {
       for (const b of m) {
-        const w = v.get(b.target);
-        if (w === void 0) continue;
+        const v = w.get(b.target);
+        if (v === void 0) continue;
         const y = b.borderBoxSize?.[0]?.blockSize ?? b.contentRect.height;
-        y > 0 && p(w, y);
+        y > 0 && p(v, y);
       }
     })), c);
   }
   function L(m, b) {
-    const w = Ve(m), S = k();
-    if (!w) return;
-    v.set(w, b), S?.observe(w);
-    const y = w.getBoundingClientRect().height;
+    const v = Ve(m), S = k();
+    if (!v) return;
+    w.set(v, b), S?.observe(v);
+    const y = v.getBoundingClientRect().height;
     y > 0 && p(b, y);
   }
   return Ce(() => {
-    c?.disconnect(), v.clear();
+    c?.disconnect(), w.clear();
   }), {
     virtualRows: r.virtualItems,
     virtualColumns: o.virtualItems,
@@ -691,15 +691,15 @@ function ht(e) {
     const o = l(e.columns);
     let d = 0;
     const O = o.map((c) => {
-      const v = c.width ?? c.minWidth ?? 160, k = {
+      const w = c.width ?? c.minWidth ?? 160, k = {
         ...c,
         start: d,
-        size: v,
-        end: d + v,
+        size: w,
+        end: d + w,
         pinOffset: 0,
         stickyStyle: {}
       };
-      return d += v, k;
+      return d += w, k;
     });
     let E = 0;
     for (const c of O)
@@ -710,12 +710,12 @@ function ht(e) {
       }, E += c.size);
     let p = 0;
     for (let c = O.length - 1; c >= 0; c -= 1) {
-      const v = O[c];
-      !v || v.pin !== "end" || (v.pinOffset = p, v.stickyStyle = {
+      const w = O[c];
+      !w || w.pin !== "end" || (w.pinOffset = p, w.stickyStyle = {
         position: "sticky",
         right: `${p}px`,
         zIndex: 2
-      }, p += v.size);
+      }, p += w.size);
     }
     return O;
   }), n = T(() => {
@@ -770,20 +770,27 @@ function gt(e, t) {
     height: t ? "100%" : `${i}px`
   };
 }
-function vt(e, t, i) {
-  return {
+function wt(e, t, i, n) {
+  const r = n?.fixed ?? !1;
+  return t ? {
     position: "absolute",
     top: 0,
     left: 0,
-    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",
+    height: "100%",
+    transform: `translateX(${e}px)`,
     boxSizing: "border-box",
-    overflow: "hidden"
+    ...r && i !== void 0 ? { width: `${i}px`, overflow: "hidden", contain: "layout style" } : {}
+  } : {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    transform: `translateY(${e}px)`,
+    boxSizing: "border-box",
+    ...r && i !== void 0 ? { height: `${i}px`, overflow: "hidden", contain: "layout style" } : {}
   };
 }
-const zt = /* @__PURE__ */ ve({
+const zt = /* @__PURE__ */ we({
   __name: "VirtualList",
   props: {
     items: {},
@@ -806,7 +813,7 @@ const zt = /* @__PURE__ */ ve({
   },
   emits: ["visibleRangeChange", "scrollEnd"],
   setup(e, { expose: t, emit: i }) {
-    const n = e, r = i, o = _(null), { virtualItems: d, totalSize: O, scrollAdjust: E, scrollToIndex: p, scrollToOffset: c, measure: v, measureElement: k } = $e({
+    const n = e, r = i, o = _(null), { virtualItems: d, totalSize: O, scrollAdjust: E, scrollToIndex: p, scrollToOffset: c, measure: w, measureElement: k } = $e({
       items: () => n.items,
       estimateSize: (S, y) => {
         const h = n.estimateSize;
@@ -839,9 +846,11 @@ const zt = /* @__PURE__ */ ve({
       })
     ), m = T(() => gt(O.value, n.horizontal));
     function b(S, y) {
-      return vt(S, n.horizontal, y);
+      return wt(S, n.horizontal, y, {
+        fixed: typeof n.estimateSize == "number"
+      });
     }
-    function w(S) {
+    function v(S) {
       return (y) => {
         k(y, S);
       };
@@ -849,7 +858,7 @@ const zt = /* @__PURE__ */ ve({
     return t({
       scrollToIndex: p,
       scrollToOffset: c,
-      measure: v
+      measure: w
     }), (S, y) => (V(), ce(ue(e.tag), {
       ref_key: "container",
       ref: o,
@@ -863,10 +872,10 @@ const zt = /* @__PURE__ */ ve({
           "data-virtual-spacer": "",
           style: W(m.value)
         }, [
-          (V(!0), B(ne, null, ie(N(d), (h) => (V(), ce(ue(e.itemTag), we({
+          (V(!0), B(ne, null, ie(N(d), (h) => (V(), ce(ue(e.itemTag), ve({
             key: h.key,
             ref_for: !0,
-            ref: w(h.index),
+            ref: v(h.index),
             role: "listitem",
             "data-index": h.index,
             "data-key": String(h.key),
@@ -890,7 +899,7 @@ const zt = /* @__PURE__ */ ve({
       _: 3
     }, 8, ["style"]));
   }
-}), wt = ["data-index", "data-key"], xt = /* @__PURE__ */ ve({
+}), vt = ["data-index", "data-key"], xt = /* @__PURE__ */ we({
   __name: "VirtualGrid",
   props: {
     items: {},
@@ -919,7 +928,7 @@ const zt = /* @__PURE__ */ ve({
       totalHeight: E,
       scrollAdjustX: p,
       scrollAdjustY: c,
-      scrollToIndex: v,
+      scrollToIndex: w,
       scrollToOffset: k,
       measureRow: L,
       measureRowElement: m
@@ -951,7 +960,7 @@ const zt = /* @__PURE__ */ ve({
         horizontal: !1,
         windowScroll: n.windowScroll
       })
-    ), w = T(() => ({
+    ), v = T(() => ({
       position: "relative",
       width: `${X(O.value)}px`,
       height: `${X(E.value)}px`
@@ -975,7 +984,7 @@ const zt = /* @__PURE__ */ ve({
       };
     }
     return t({
-      scrollToIndex: v,
+      scrollToIndex: w,
       scrollToOffset: k,
       measureRow: L
     }), (h, C) => (V(), ce(ue(e.tag), {
@@ -989,9 +998,9 @@ const zt = /* @__PURE__ */ ve({
         e.items.length ? (V(), B("div", {
           key: 1,
           "data-virtual-spacer": "",
-          style: W(w.value)
+          style: W(v.value)
         }, [
-          (V(!0), B(ne, null, ie(N(d), (M) => (V(), B("div", we({
+          (V(!0), B(ne, null, ie(N(d), (M) => (V(), B("div", ve({
             key: M.key,
             ref_for: !0,
             ref: S(M.row.index),
@@ -1008,13 +1017,13 @@ const zt = /* @__PURE__ */ ve({
               row: M.row,
               column: M.column
             })
-          ], 16, wt))), 128))
+          ], 16, vt))), 128))
         ], 4)) : Z(h.$slots, "empty", {}, void 0, void 0, 0)
       ]),
       _: 3
     }, 8, ["style"]));
   }
-}), St = ["data-index", "data-key", "aria-rowindex"], pt = /* @__PURE__ */ ve({
+}), St = ["data-index", "data-key", "aria-rowindex"], pt = /* @__PURE__ */ we({
   __name: "VirtualTable",
   props: {
     rows: {},
@@ -1038,12 +1047,12 @@ const zt = /* @__PURE__ */ ve({
       virtualRows: E,
       columns: p,
       totalWidth: c,
-      totalHeight: v,
+      totalHeight: w,
       scrollAdjust: k,
       scrollToIndex: L,
       scrollToOffset: m,
       measure: b,
-      measureElement: w
+      measureElement: v
     } = ht({
       rows: () => n.rows,
       columns: () => n.columns,
@@ -1091,7 +1100,7 @@ const zt = /* @__PURE__ */ ve({
       width: `${c.value}px`
     })), C = T(() => ({
       position: "relative",
-      height: `${X(v.value)}px`,
+      height: `${X(w.value)}px`,
       width: `${X(c.value)}px`
     }));
     function M(u) {
@@ -1120,7 +1129,7 @@ const zt = /* @__PURE__ */ ve({
     }
     function Q(u) {
       return (I) => {
-        w(I, u);
+        v(I, u);
       };
     }
     function $(u, I, x) {
@@ -1161,7 +1170,7 @@ const zt = /* @__PURE__ */ ve({
             role: "rowgroup",
             style: W(C.value)
           }, [
-            (V(!0), B(ne, null, ie(N(E), (x) => (V(), B("div", we({
+            (V(!0), B(ne, null, ie(N(E), (x) => (V(), B("div", ve({
               key: x.key,
               ref_for: !0,
               ref: Q(x.index),