@pdanpdan/virtual-scroll 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,961 +1,845 @@
1
- import { ref as P, reactive as ot, computed as E, watch as ie, getCurrentInstance as ut, onMounted as it, nextTick as Ke, onUnmounted as nt, defineComponent as rt, createBlock as xe, openBlock as se, resolveDynamicComponent as Me, unref as ye, normalizeStyle as We, normalizeClass as $e, withCtx as Ce, createCommentVNode as Ae, createElementBlock as Ze, renderSlot as Ve, createElementVNode as ct, Fragment as st, renderList as dt, toDisplayString as Je } from "vue";
2
- class Qe {
3
- tree;
4
- values;
5
- constructor(a) {
6
- this.tree = new Float64Array(a + 1), this.values = new Float64Array(a);
7
- }
8
- /**
9
- * Update the value at a specific index and propagate changes.
10
- * @param index 0-based index
11
- * @param delta The change in value (new value - old value)
12
- */
13
- update(a, g) {
14
- if (!(a < 0 || a >= this.values.length))
15
- for (this.values[a] = this.values[a] + g, a++; a < this.tree.length; )
16
- this.tree[a] = this.tree[a] + g, a += a & -a;
17
- }
18
- /**
19
- * Get the prefix sum up to a specific index (exclusive).
20
- * @param index 0-based index. query(n) returns sum of values from 0 to n-1.
21
- * @returns Sum of values in range [0, index)
22
- */
23
- query(a) {
24
- let g = 0;
25
- for (; a > 0; )
26
- g += this.tree[a] || 0, a -= a & -a;
27
- return g;
28
- }
29
- /**
30
- * Set the individual value at an index without updating the tree.
31
- * Call rebuild() after multiple sets to update the tree efficiently.
32
- */
33
- set(a, g) {
34
- a < 0 || a >= this.values.length || (this.values[a] = g);
35
- }
36
- /**
37
- * Get the number of items in the tree.
38
- */
39
- get length() {
40
- return this.values.length;
41
- }
42
- /**
43
- * Get the individual value at an index.
44
- */
45
- get(a) {
46
- return this.values[a] || 0;
47
- }
48
- /**
49
- * Get the underlying values array.
50
- */
51
- getValues() {
52
- return this.values;
53
- }
54
- /**
55
- * Find the largest index such that the prefix sum is less than or equal to the given value.
56
- * Useful for finding which item is at a specific scroll offset.
57
- * @param value The prefix sum value to search for
58
- * @returns The 0-based index
59
- */
60
- findLowerBound(a) {
61
- let g = 0;
62
- const n = this.tree.length;
63
- let W = 1 << Math.floor(Math.log2(n - 1));
64
- for (; W > 0; ) {
65
- const Z = g + W;
66
- if (Z < n) {
67
- const U = this.tree[Z] || 0;
68
- U <= a && (g = Z, a -= U);
69
- }
70
- W >>= 1;
71
- }
72
- return g;
73
- }
74
- /**
75
- * Rebuild the entire tree from the current values array in O(N).
76
- * Useful after bulk updates to the values array.
77
- */
78
- rebuild() {
79
- this.tree.fill(0);
80
- for (let a = 0; a < this.values.length; a++)
81
- this.tree[a + 1] = this.values[a] || 0;
82
- for (let a = 1; a < this.tree.length; a++) {
83
- const g = a + (a & -a);
84
- g < this.tree.length && (this.tree[g] = this.tree[g] + this.tree[a]);
85
- }
86
- }
87
- /**
88
- * Resize the tree while preserving existing values.
89
- * @param size New size of the tree
90
- */
91
- resize(a) {
92
- if (a === this.values.length)
93
- return;
94
- const g = new Float64Array(a);
95
- g.set(this.values.subarray(0, Math.min(a, this.values.length))), this.values = g, this.tree = new Float64Array(a + 1), this.rebuild();
96
- }
97
- /**
98
- * Shift values by a given offset and rebuild the tree.
99
- * Useful when items are prepended to the list.
100
- * @param offset Number of positions to shift (positive for prepending)
101
- */
102
- shift(a) {
103
- if (a === 0)
104
- return;
105
- const g = this.values.length, n = new Float64Array(g);
106
- a > 0 ? n.set(this.values.subarray(0, Math.min(g - a, this.values.length)), a) : n.set(this.values.subarray(-a)), this.values = n, this.rebuild();
107
- }
108
- }
109
- function pe(e) {
110
- return !!e && "getBoundingClientRect" in e;
1
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
2
+ var FenwickTree = class {
3
+ tree;
4
+ values;
5
+ constructor(e) {
6
+ this.tree = new Float64Array(e + 1), this.values = new Float64Array(e);
7
+ }
8
+ update(e, t) {
9
+ if (!(e < 0 || e >= this.values.length)) for (this.values[e] = this.values[e] + t, e++; e < this.tree.length;) this.tree[e] = this.tree[e] + t, e += e & -e;
10
+ }
11
+ query(e) {
12
+ let t = 0;
13
+ for (; e > 0;) t += this.tree[e] || 0, e -= e & -e;
14
+ return t;
15
+ }
16
+ set(e, t) {
17
+ e < 0 || e >= this.values.length || (this.values[e] = t);
18
+ }
19
+ get length() {
20
+ return this.values.length;
21
+ }
22
+ get(e) {
23
+ return this.values[e] || 0;
24
+ }
25
+ getValues() {
26
+ return this.values;
27
+ }
28
+ findLowerBound(e) {
29
+ let t = 0, n = this.tree.length, r = 1 << Math.floor(Math.log2(n - 1));
30
+ for (; r > 0;) {
31
+ let i = t + r;
32
+ if (i < n) {
33
+ let n = this.tree[i] || 0;
34
+ n <= e && (t = i, e -= n);
35
+ }
36
+ r >>= 1;
37
+ }
38
+ return t;
39
+ }
40
+ rebuild() {
41
+ this.tree.fill(0);
42
+ for (let e = 0; e < this.values.length; e++) this.tree[e + 1] = this.values[e] || 0;
43
+ for (let e = 1; e < this.tree.length; e++) {
44
+ let t = e + (e & -e);
45
+ t < this.tree.length && (this.tree[t] = this.tree[t] + this.tree[e]);
46
+ }
47
+ }
48
+ resize(e) {
49
+ if (e === this.values.length) return;
50
+ let t = new Float64Array(e);
51
+ t.set(this.values.subarray(0, Math.min(e, this.values.length))), this.values = t, this.tree = new Float64Array(e + 1), this.rebuild();
52
+ }
53
+ shift(e) {
54
+ if (e === 0) return;
55
+ let t = this.values.length, n = new Float64Array(t);
56
+ e > 0 ? n.set(this.values.subarray(0, Math.min(t - e, this.values.length)), e) : n.set(this.values.subarray(-e)), this.values = n, this.rebuild();
57
+ }
58
+ };
59
+ function isElement(e) {
60
+ return !!e && "getBoundingClientRect" in e;
111
61
  }
112
- function _e(e) {
113
- return !!e && "scrollLeft" in e;
62
+ function isScrollableElement(e) {
63
+ return !!e && "scrollLeft" in e;
114
64
  }
115
- function et(e) {
116
- return typeof e == "object" && e !== null && ("align" in e || "behavior" in e || "isCorrection" in e);
65
+ function isScrollToIndexOptions(e) {
66
+ return typeof e == "object" && !!e && ("align" in e || "behavior" in e || "isCorrection" in e);
117
67
  }
118
- function we(e, a) {
119
- return typeof e == "object" && e !== null ? e.x || 0 : a === "horizontal" && e || 0;
68
+ function getPaddingX(e, t) {
69
+ return typeof e == "object" && e ? e.x || 0 : t === "horizontal" && e || 0;
120
70
  }
121
- function Se(e, a) {
122
- return typeof e == "object" && e !== null ? e.y || 0 : (a === "vertical" || a === "both") && e || 0;
71
+ function getPaddingY(e, t) {
72
+ return typeof e == "object" && e ? e.y || 0 : (t === "vertical" || t === "both") && e || 0;
123
73
  }
124
- const vt = 50, tt = 150, lt = 5;
125
- function ft(e) {
126
- const a = P(0), g = P(0), n = P(!1), W = P(!1), Z = P(!1), U = P(!1), j = P(0), te = P(0), N = ot({ x: 0, y: 0 });
127
- let ne;
128
- const ce = P(!1), R = new Qe(e.value.items.length), x = new Qe(e.value.items.length), T = new Qe(e.value.columnCount || 0), L = P(0);
129
- let ae = new Uint8Array(0), J = new Uint8Array(0), A = new Uint8Array(0);
130
- const Q = P(null), de = P(0), ve = P(0), be = P(!1);
131
- let _ = [];
132
- const Ee = E(
133
- () => e.value.itemSize === void 0 || e.value.itemSize === null || e.value.itemSize === 0
134
- ), Pe = E(
135
- () => e.value.columnWidth === void 0 || e.value.columnWidth === null || e.value.columnWidth === 0
136
- ), D = E(
137
- () => typeof e.value.itemSize == "number" && e.value.itemSize > 0 ? e.value.itemSize : null
138
- ), fe = E(() => D.value || e.value.defaultItemSize || vt), ze = E(
139
- () => [...e.value.stickyIndices || []].sort((l, t) => l - t)
140
- ), p = E(() => {
141
- if (L.value, !W.value && e.value.ssrRange && !U.value) {
142
- const { start: l = 0, end: t = 0, colStart: u = 0, colEnd: o = 0 } = e.value.ssrRange, s = e.value.columnCount || 0;
143
- if (e.value.direction === "both" && s > 0)
144
- return T.query(o || s) - T.query(u);
145
- if (e.value.direction === "horizontal")
146
- return D.value !== null ? (t - l) * (D.value + (e.value.columnGap || 0)) : R.query(t) - R.query(l);
147
- }
148
- return e.value.direction === "both" && e.value.columnCount ? T.query(e.value.columnCount) : e.value.direction === "vertical" ? 0 : D.value !== null ? e.value.items.length * (D.value + (e.value.columnGap || 0)) : R.query(e.value.items.length);
149
- }), oe = E(() => {
150
- if (L.value, !W.value && e.value.ssrRange && !U.value) {
151
- const { start: l, end: t } = e.value.ssrRange;
152
- if (e.value.direction === "vertical" || e.value.direction === "both")
153
- return D.value !== null ? (t - l) * (D.value + (e.value.gap || 0)) : x.query(t) - x.query(l);
154
- }
155
- return e.value.direction === "horizontal" ? 0 : D.value !== null ? e.value.items.length * (D.value + (e.value.gap || 0)) : x.query(e.value.items.length);
156
- }), M = E(() => {
157
- const t = e.value.direction === "horizontal" || e.value.direction === "both" ? we(e.value.scrollPaddingStart, e.value.direction) : 0;
158
- return Math.max(0, a.value + t - N.x);
159
- }), B = E(() => {
160
- const t = e.value.direction === "vertical" || e.value.direction === "both" ? Se(e.value.scrollPaddingStart, e.value.direction) : 0;
161
- return Math.max(0, g.value + t - N.y);
162
- }), He = (l) => {
163
- L.value;
164
- const t = e.value.columnWidth;
165
- return typeof t == "number" && t > 0 ? t : Array.isArray(t) && t.length > 0 ? t[l % t.length] || tt : typeof t == "function" ? t(l) : T.get(l) || e.value.defaultColumnWidth || tt;
166
- }, ke = (l, t, u) => {
167
- const o = typeof u == "object" && u !== null && "isCorrection" in u ? u.isCorrection : !1;
168
- o || (Q.value = { rowIndex: l, colIndex: t, options: u });
169
- const s = e.value.container || window, m = D.value, S = e.value.gap || 0, d = e.value.columnGap || 0;
170
- let v, f;
171
- et(u) ? (v = u.align, f = u.behavior) : v = u;
172
- const y = (typeof v == "object" ? v.x : v) || "auto", b = (typeof v == "object" ? v.y : v) || "auto", w = we(e.value.scrollPaddingStart, e.value.direction), h = we(e.value.scrollPaddingEnd, e.value.direction), z = Se(e.value.scrollPaddingStart, e.value.direction), q = Se(e.value.scrollPaddingEnd, e.value.direction), X = e.value.direction === "vertical" || e.value.direction === "both", k = e.value.direction === "horizontal" || e.value.direction === "both", K = j.value - (k ? w + h : 0), ge = te.value - (X ? z + q : 0);
173
- let O = M.value, I = B.value, le = 0, ue = 0;
174
- if (l != null && (l >= e.value.items.length ? (I = oe.value, ue = 0) : (I = m !== null ? l * (m + S) : x.query(l), ue = m !== null ? m : x.get(l) - S), b === "start" || (b === "center" ? I -= (ge - ue) / 2 : b === "end" ? I -= ge - ue : I >= B.value && I + ue <= B.value + ge || I < B.value || (I -= ge - ue))), t != null) {
175
- const V = e.value.columnCount || 0;
176
- t >= V && V > 0 ? (O = p.value, le = 0) : e.value.direction === "horizontal" ? (O = m !== null ? t * (m + d) : R.query(t), le = m !== null ? m : R.get(t) - d) : (O = T.query(t), le = T.get(t)), y === "start" || (y === "center" ? O -= (K - le) / 2 : y === "end" ? O -= K - le : O >= M.value && O + le <= M.value + K || O < M.value || (O -= K - le));
177
- }
178
- O = Math.max(0, Math.min(O, Math.max(0, p.value - K))), I = Math.max(0, Math.min(I, Math.max(0, oe.value - ge)));
179
- const F = O + N.x - (k ? w : 0), ee = I + N.y - (X ? z : 0), Y = 1;
180
- let $ = t == null || Math.abs(M.value - O) < Y, re = l == null || Math.abs(B.value - I) < Y;
181
- if (!$ || !re) {
182
- let V = 0, Te = 0, Le = 0, De = 0, Ge = 0, Ie = 0;
183
- if (typeof window < "u") {
184
- if (s === window ? (V = window.scrollX, Te = window.scrollY, Le = document.documentElement.scrollWidth, De = document.documentElement.scrollHeight, Ge = window.innerWidth, Ie = window.innerHeight) : pe(s) && (V = s.scrollLeft, Te = s.scrollTop, Le = s.scrollWidth, De = s.scrollHeight, Ge = s.clientWidth, Ie = s.clientHeight), !$ && t !== null && t !== void 0) {
185
- const je = V <= Y && F <= Y, Ne = V >= Le - Ge - Y && F >= Le - Ge - Y;
186
- (je || Ne) && ($ = !0);
187
- }
188
- if (!re && l !== null && l !== void 0) {
189
- const je = Te <= Y && ee <= Y, Ne = Te >= De - Ie - Y && ee >= De - Ie - Y;
190
- (je || Ne) && (re = !0);
191
- }
192
- }
193
- }
194
- const Oe = o ? "auto" : f || "smooth";
195
- if (ce.value = !0, typeof window < "u" && s === window)
196
- window.scrollTo({
197
- left: t == null ? void 0 : Math.max(0, F),
198
- top: l == null ? void 0 : Math.max(0, ee),
199
- behavior: Oe
200
- });
201
- else if (_e(s)) {
202
- const V = {
203
- behavior: Oe
204
- };
205
- t != null && (V.left = Math.max(0, F)), l != null && (V.top = Math.max(0, ee)), typeof s.scrollTo == "function" ? s.scrollTo(V) : (V.left !== void 0 && (s.scrollLeft = V.left), V.top !== void 0 && (s.scrollTop = V.top));
206
- }
207
- (Oe === "auto" || Oe === void 0) && (t != null && (a.value = Math.max(0, F)), l != null && (g.value = Math.max(0, ee))), $ && re && !n.value && (Q.value = null);
208
- }, Xe = (l, t, u) => {
209
- const o = e.value.container || window;
210
- ce.value = !0;
211
- const s = e.value.direction === "vertical" || e.value.direction === "both", m = e.value.direction === "horizontal" || e.value.direction === "both", S = we(e.value.scrollPaddingStart, e.value.direction), d = Se(e.value.scrollPaddingStart, e.value.direction), v = typeof window < "u" && o === window ? window.scrollX : o.scrollLeft, f = typeof window < "u" && o === window ? window.scrollY : o.scrollTop, y = l != null ? l + N.x - (m ? S : 0) : v, b = t != null ? t + N.y - (s ? d : 0) : f;
212
- if (typeof window < "u" && o === window)
213
- window.scrollTo({
214
- left: l != null ? y : void 0,
215
- top: t != null ? b : void 0,
216
- behavior: u?.behavior || "auto"
217
- });
218
- else if (_e(o)) {
219
- const w = {
220
- behavior: u?.behavior || "auto"
221
- };
222
- l != null && (w.left = y), t != null && (w.top = b), typeof o.scrollTo == "function" ? o.scrollTo(w) : (w.left !== void 0 && (o.scrollLeft = w.left), w.top !== void 0 && (o.scrollTop = w.top));
223
- }
224
- (u?.behavior === "auto" || u?.behavior === void 0) && (l != null && (a.value = y), t != null && (g.value = b));
225
- }, Ye = () => {
226
- const l = e.value.items, t = l.length, u = e.value.columnCount || 0;
227
- if (R.resize(t), x.resize(t), T.resize(u), J.length !== t) {
228
- const d = new Uint8Array(t);
229
- d.set(J.subarray(0, Math.min(t, J.length))), J = d;
230
- }
231
- if (A.length !== t) {
232
- const d = new Uint8Array(t);
233
- d.set(A.subarray(0, Math.min(t, A.length))), A = d;
234
- }
235
- if (ae.length !== u) {
236
- const d = new Uint8Array(u);
237
- d.set(ae.subarray(0, Math.min(u, ae.length))), ae = d;
238
- }
239
- let o = 0;
240
- if (e.value.restoreScrollOnPrepend && _.length > 0 && t > _.length) {
241
- const d = _[0];
242
- if (d !== void 0) {
243
- for (let v = 1; v <= t - _.length; v++)
244
- if (l[v] === d) {
245
- o = v;
246
- break;
247
- }
248
- }
249
- }
250
- if (o > 0) {
251
- R.shift(o), x.shift(o), Q.value && Q.value.rowIndex !== null && Q.value.rowIndex !== void 0 && (Q.value.rowIndex += o);
252
- const d = new Uint8Array(t), v = new Uint8Array(t);
253
- d.set(J.subarray(0, Math.min(t - o, J.length)), o), v.set(A.subarray(0, Math.min(t - o, A.length)), o), J = d, A = v;
254
- const f = e.value.gap || 0, y = e.value.columnGap || 0;
255
- let b = 0, w = 0;
256
- for (let h = 0; h < o; h++) {
257
- const z = typeof e.value.itemSize == "function" ? e.value.itemSize(l[h], h) : fe.value;
258
- e.value.direction === "horizontal" ? b += z + y : w += z + f;
259
- }
260
- (b > 0 || w > 0) && Ke(() => {
261
- Xe(
262
- b > 0 ? M.value + b : null,
263
- w > 0 ? B.value + w : null,
264
- { behavior: "auto" }
265
- );
266
- });
267
- }
268
- if (u > 0) {
269
- const d = e.value.columnGap || 0;
270
- let v = !1;
271
- for (let f = 0; f < u; f++) {
272
- const y = He(f), b = T.get(f);
273
- if (!Pe.value || b === 0) {
274
- const w = y + d;
275
- Math.abs(b - w) > 0.5 && (T.set(f, w), v = !0);
276
- }
277
- }
278
- v && T.rebuild();
279
- }
280
- const s = e.value.gap || 0, m = e.value.columnGap || 0;
281
- let S = !1;
282
- for (let d = 0; d < t; d++) {
283
- const v = e.value.items[d], f = R.get(d), y = x.get(d);
284
- if (Ee.value && (f > 0 || y > 0))
285
- continue;
286
- const b = typeof e.value.itemSize == "function" ? e.value.itemSize(v, d) : fe.value, w = e.value.direction === "vertical", h = e.value.direction === "horizontal", z = e.value.direction === "both", q = h ? b + m : 0, X = w || z ? b + s : 0;
287
- Math.abs(f - q) > 0.5 && (R.set(d, q), S = !0), Math.abs(y - X) > 0.5 && (x.set(d, X), S = !0);
288
- const k = h ? b : z ? Math.max(b, j.value) : 0, K = w || z ? b : 0;
289
- k > de.value && (de.value = k), K > ve.value && (ve.value = K);
290
- }
291
- S && (R.rebuild(), x.rebuild()), _ = [...l], be.value = !0, L.value++;
292
- }, he = () => {
293
- if (e.value.hostElement && typeof window < "u") {
294
- const l = e.value.hostElement.getBoundingClientRect(), t = e.value.container || window;
295
- let u = 0, o = 0;
296
- if (t === window)
297
- u = l.left + window.scrollX, o = l.top + window.scrollY;
298
- else if (t === e.value.hostElement)
299
- u = 0, o = 0;
300
- else if (pe(t)) {
301
- const s = t.getBoundingClientRect();
302
- u = l.left - s.left + t.scrollLeft, o = l.top - s.top + t.scrollTop;
303
- }
304
- (Math.abs(N.x - u) > 0.1 || Math.abs(N.y - o) > 0.1) && (N.x = u, N.y = o);
305
- }
306
- };
307
- ie([
308
- () => e.value.items.length,
309
- () => e.value.columnCount,
310
- () => e.value.columnWidth,
311
- () => e.value.itemSize,
312
- () => e.value.gap,
313
- () => e.value.columnGap
314
- ], Ye, { immediate: !0 }), ie(() => [e.value.container, e.value.hostElement], () => {
315
- he();
316
- });
317
- const Be = E(() => {
318
- if (L.value, (!W.value || Z.value) && e.value.ssrRange)
319
- return {
320
- start: e.value.ssrRange.start,
321
- end: e.value.ssrRange.end
322
- };
323
- const l = e.value.direction || "vertical", t = e.value.ssrRange && !n.value ? 0 : e.value.bufferBefore ?? lt, u = e.value.bufferAfter ?? lt, o = e.value.gap || 0, s = e.value.columnGap || 0, m = D.value, S = we(e.value.scrollPaddingStart, l), d = we(e.value.scrollPaddingEnd, l), v = Se(e.value.scrollPaddingStart, l), f = Se(e.value.scrollPaddingEnd, l), y = l === "vertical" || l === "both", b = l === "horizontal" || l === "both", w = j.value - (b ? S + d : 0), h = te.value - (y ? v + f : 0);
324
- let z = 0, q = e.value.items.length;
325
- if (y)
326
- if (m !== null)
327
- z = Math.floor(B.value / (m + o)), q = Math.ceil((B.value + h) / (m + o));
328
- else {
329
- z = x.findLowerBound(B.value);
330
- let X = x.query(z), k = z;
331
- for (; k < e.value.items.length && X < B.value + h; )
332
- X = x.query(++k);
333
- q = k;
334
- }
335
- else if (m !== null)
336
- z = Math.floor(M.value / (m + s)), q = Math.ceil((M.value + w) / (m + s));
337
- else {
338
- z = R.findLowerBound(M.value);
339
- let X = R.query(z), k = z;
340
- for (; k < e.value.items.length && X < M.value + w; )
341
- X = R.query(++k);
342
- q = k;
343
- }
344
- return {
345
- start: Math.max(0, z - t),
346
- end: Math.min(e.value.items.length, q + u)
347
- };
348
- }), qe = E(() => {
349
- L.value;
350
- const l = D.value, t = e.value.gap || 0, u = e.value.columnGap || 0;
351
- return e.value.direction === "horizontal" ? l !== null ? Math.floor(M.value / (l + u)) : R.findLowerBound(M.value) : l !== null ? Math.floor(B.value / (l + t)) : x.findLowerBound(B.value);
352
- }), i = E(() => {
353
- L.value;
354
- const { start: l, end: t } = Be.value, u = [], o = D.value, s = e.value.gap || 0, m = e.value.columnGap || 0, S = ze.value, d = /* @__PURE__ */ new Set();
355
- for (let h = l; h < t; h++)
356
- d.add(h);
357
- if (W.value || !e.value.ssrRange) {
358
- const h = qe.value;
359
- let z, q = 0, X = S.length - 1;
360
- for (; q <= X; ) {
361
- const k = q + X >>> 1;
362
- S[k] < h ? (z = S[k], q = k + 1) : X = k - 1;
363
- }
364
- z !== void 0 && d.add(z);
365
- for (const k of S)
366
- k >= l && k < t && d.add(k);
367
- }
368
- const v = Array.from(d).sort((h, z) => h - z), f = e.value.ssrRange?.start || 0, y = e.value.ssrRange?.colStart || 0;
369
- let b = 0, w = 0;
370
- !W.value && e.value.ssrRange && (w = e.value.direction === "vertical" || e.value.direction === "both" ? o !== null ? f * (o + s) : x.query(f) : 0, e.value.direction === "horizontal" ? b = o !== null ? y * (o + m) : R.query(y) : e.value.direction === "both" && (b = T.query(y)));
371
- for (const h of v) {
372
- const z = e.value.items[h];
373
- if (z === void 0)
374
- continue;
375
- let q = 0, X = 0, k = 0, K = 0;
376
- e.value.direction === "horizontal" ? (q = o !== null ? h * (o + m) : R.query(h), k = o !== null ? o : R.get(h) - m, K = te.value) : (X = (e.value.direction === "vertical" || e.value.direction === "both") && o !== null ? h * (o + s) : x.query(h), K = o !== null ? o : x.get(h) - s, k = e.value.direction === "both" ? p.value : j.value);
377
- const ge = S.includes(h), O = q, I = X;
378
- let le = !1;
379
- const ue = { x: 0, y: 0 };
380
- if (ge) {
381
- if (e.value.direction === "vertical" || e.value.direction === "both") {
382
- if (B.value > I) {
383
- le = !0;
384
- let F, ee = 0, Y = S.length - 1;
385
- for (; ee <= Y; ) {
386
- const $ = ee + Y >>> 1;
387
- S[$] > h ? (F = S[$], Y = $ - 1) : ee = $ + 1;
388
- }
389
- if (F !== void 0) {
390
- const re = (o !== null ? F * (o + s) : x.query(F)) - B.value;
391
- re < K && (ue.y = -(K - re));
392
- }
393
- }
394
- } else if (e.value.direction === "horizontal" && M.value > O) {
395
- le = !0;
396
- let F, ee = 0, Y = S.length - 1;
397
- for (; ee <= Y; ) {
398
- const $ = ee + Y >>> 1;
399
- S[$] > h ? (F = S[$], Y = $ - 1) : ee = $ + 1;
400
- }
401
- if (F !== void 0) {
402
- const re = (o !== null ? F * (o + m) : R.query(F)) - M.value;
403
- re < k && (ue.x = -(k - re));
404
- }
405
- }
406
- }
407
- u.push({
408
- item: z,
409
- index: h,
410
- offset: { x: O - b, y: I - w },
411
- size: { width: k, height: K },
412
- originalX: O,
413
- originalY: I,
414
- isSticky: ge,
415
- isStickyActive: le,
416
- stickyOffset: ue
417
- });
418
- }
419
- return u;
420
- }), r = E(() => {
421
- L.value;
422
- const l = e.value.columnCount || 0;
423
- if (!l)
424
- return { start: 0, end: 0, padStart: 0, padEnd: 0 };
425
- if ((!W.value || Z.value) && e.value.ssrRange) {
426
- const { colStart: d = 0, colEnd: v = 0 } = e.value.ssrRange, f = Math.max(0, d), y = Math.min(l, v || l);
427
- return {
428
- start: f,
429
- end: y,
430
- padStart: 0,
431
- padEnd: 0
432
- };
433
- }
434
- const t = T.findLowerBound(M.value);
435
- let u = T.query(t), o = t;
436
- for (; o < l && u < M.value + j.value; )
437
- u = T.query(++o);
438
- const s = e.value.ssrRange && !n.value ? 0 : 2, m = Math.max(0, t - s), S = Math.min(l, o + s);
439
- return {
440
- start: m,
441
- end: S,
442
- padStart: T.query(m),
443
- padEnd: T.query(l) - T.query(S)
444
- };
445
- }), c = E(() => {
446
- L.value;
447
- const l = D.value, t = e.value.columnGap || 0;
448
- let u = 0;
449
- return (e.value.direction === "horizontal" || e.value.direction === "both") && (l !== null ? u = Math.floor(M.value / (l + t)) : u = R.findLowerBound(M.value)), {
450
- items: i.value,
451
- currentIndex: qe.value,
452
- currentColIndex: u,
453
- scrollOffset: { x: M.value, y: B.value },
454
- viewportSize: { width: j.value, height: te.value },
455
- totalSize: { width: p.value, height: oe.value },
456
- isScrolling: n.value,
457
- isProgrammaticScroll: ce.value,
458
- range: Be.value,
459
- columnRange: r.value
460
- };
461
- }), C = () => {
462
- ce.value = !1, Q.value = null;
463
- }, G = (l) => {
464
- const t = l.target;
465
- typeof window > "u" || (t === window || t === document ? (a.value = window.scrollX, g.value = window.scrollY) : _e(t) && (a.value = t.scrollLeft, g.value = t.scrollTop), n.value || (ce.value || (Q.value = null), n.value = !0), clearTimeout(ne), ne = setTimeout(() => {
466
- n.value = !1, ce.value = !1;
467
- }, 250));
468
- }, H = (l) => {
469
- let t = !1;
470
- const u = e.value.gap || 0, o = e.value.columnGap || 0;
471
- for (const { index: s, inlineSize: m, blockSize: S, element: d } of l) {
472
- if (Ee.value) {
473
- if (m > de.value && (de.value = m), S > ve.value && (ve.value = S), e.value.direction === "horizontal") {
474
- const v = R.get(s), f = m + o;
475
- Math.abs(v - f) > 0.5 && (f > v || !J[s]) && (R.update(s, f - v), J[s] = 1, t = !0);
476
- }
477
- if (e.value.direction === "vertical" || e.value.direction === "both") {
478
- const v = x.get(s), f = S + u;
479
- e.value.direction === "both" ? (f > v || !A[s]) && (x.update(s, f - v), A[s] = 1, t = !0) : Math.abs(v - f) > 0.5 && (f > v || !A[s]) && (x.update(s, f - v), A[s] = 1, t = !0);
480
- }
481
- }
482
- if (e.value.direction === "both" && d && e.value.columnCount && Pe.value) {
483
- const v = d.dataset.colIndex !== void 0 ? [d] : Array.from(d.querySelectorAll("[data-col-index]"));
484
- for (const f of v) {
485
- const y = Number.parseInt(f.dataset.colIndex, 10);
486
- if (y >= 0 && y < (e.value.columnCount || 0)) {
487
- const b = f.offsetWidth, w = T.get(y), h = b + o;
488
- (h > w || !ae[y]) && (T.update(y, h - w), ae[y] = 1, t = !0);
489
- }
490
- }
491
- }
492
- }
493
- t && L.value++;
494
- }, me = (l, t, u, o) => {
495
- H([{ index: l, inlineSize: t, blockSize: u, element: o }]);
496
- }, Re = () => {
497
- if (Q.value && !Z.value) {
498
- const { rowIndex: l, colIndex: t, options: u } = Q.value, o = et(u) ? { ...u, isCorrection: !0 } : { align: u, isCorrection: !0 };
499
- ke(l, t, o);
500
- }
501
- };
502
- ie(L, Re), ie(n, (l) => {
503
- l || Re();
504
- });
505
- let Fe = null;
506
- const at = (l) => {
507
- if (!l || typeof window > "u")
508
- return;
509
- const t = l === window ? document : l;
510
- if (t.addEventListener("scroll", G, { passive: !0 }), l === window) {
511
- j.value = window.innerWidth, te.value = window.innerHeight, a.value = window.scrollX, g.value = window.scrollY;
512
- const u = () => {
513
- j.value = window.innerWidth, te.value = window.innerHeight, he();
514
- };
515
- return window.addEventListener("resize", u), () => {
516
- t.removeEventListener("scroll", G), window.removeEventListener("resize", u);
517
- };
518
- } else
519
- return j.value = l.clientWidth, te.value = l.clientHeight, a.value = l.scrollLeft, g.value = l.scrollTop, Fe = new ResizeObserver((u) => {
520
- for (const o of u)
521
- o.target === l && (j.value = l.clientWidth, te.value = l.clientHeight, he());
522
- }), Fe.observe(l), () => {
523
- t.removeEventListener("scroll", G), Fe?.disconnect();
524
- };
525
- };
526
- let Ue;
527
- return ut() && (it(() => {
528
- U.value = !0, ie(() => e.value.container, (l) => {
529
- Ue?.(), Ue = at(l || null);
530
- }, { immediate: !0 }), he(), e.value.ssrRange || e.value.initialScrollIndex !== void 0 ? Ke(() => {
531
- he();
532
- const l = e.value.initialScrollIndex !== void 0 ? e.value.initialScrollIndex : e.value.ssrRange?.start, t = e.value.initialScrollAlign || "start";
533
- l != null && ke(l, e.value.ssrRange?.colStart, { align: t, behavior: "auto" }), W.value = !0, Z.value = !0, Ke(() => {
534
- Z.value = !1;
535
- });
536
- }) : W.value = !0;
537
- }), nt(() => {
538
- Ue?.();
539
- })), {
540
- /**
541
- * Array of items to be rendered with their calculated offsets and sizes.
542
- */
543
- renderedItems: i,
544
- /**
545
- * Total calculated width of all items including gaps.
546
- */
547
- totalWidth: p,
548
- /**
549
- * Total calculated height of all items including gaps.
550
- */
551
- totalHeight: oe,
552
- /**
553
- * Detailed information about the current scroll state.
554
- * Includes currentIndex, scrollOffset, viewportSize, totalSize, and isScrolling.
555
- */
556
- scrollDetails: c,
557
- /**
558
- * Programmatically scroll to a specific row and/or column.
559
- * @param rowIndex - The row index to scroll to
560
- * @param colIndex - The column index to scroll to
561
- * @param options - Alignment and behavior options
562
- */
563
- scrollToIndex: ke,
564
- /**
565
- * Programmatically scroll to a specific pixel offset.
566
- * @param x - The pixel offset to scroll to on the X axis
567
- * @param y - The pixel offset to scroll to on the Y axis
568
- * @param options - Behavior options
569
- */
570
- scrollToOffset: Xe,
571
- /**
572
- * Stops any currently active programmatic scroll and clears pending corrections.
573
- */
574
- stopProgrammaticScroll: C,
575
- /**
576
- * Updates the stored size of an item. Should be called when an item is measured (e.g., via ResizeObserver).
577
- * @param index - The item index
578
- * @param width - The measured width
579
- * @param height - The measured height
580
- * @param element - The measured element (optional, used for grid column detection)
581
- */
582
- updateItemSize: me,
583
- /**
584
- * Updates the stored size of multiple items. Should be called when items are measured (e.g., via ResizeObserver).
585
- * @param updates - Array of item updates
586
- */
587
- updateItemSizes: H,
588
- /**
589
- * Recalculates the host element's offset relative to the scroll container.
590
- */
591
- updateHostOffset: he,
592
- /**
593
- * Information about the current visible range of columns.
594
- */
595
- columnRange: r,
596
- /**
597
- * Helper to get the width of a specific column based on current configuration.
598
- * @param index - The column index
599
- */
600
- getColumnWidth: He,
601
- /**
602
- * Resets all dynamic measurements and re-initializes from props.
603
- */
604
- refresh: () => {
605
- R.resize(0), x.resize(0), T.resize(0), ae.fill(0), J.fill(0), A.fill(0), de.value = 0, ve.value = 0, Ye();
606
- },
607
- /**
608
- * Whether the component has finished its first client-side mount and hydration.
609
- */
610
- isHydrated: W
611
- };
74
+ const DEFAULT_ITEM_SIZE = 50, DEFAULT_COLUMN_WIDTH = 150, DEFAULT_BUFFER = 5;
75
+ function useVirtualScroll(e) {
76
+ let n = ref(0), r = ref(0), i = ref(!1), a = ref(!1), o = ref(!1), l = ref(!1), u = ref(0), p = ref(0), g = reactive({
77
+ x: 0,
78
+ y: 0
79
+ }), _, v = ref(!1), y = new FenwickTree(e.value.items.length), b = new FenwickTree(e.value.items.length), S = new FenwickTree(e.value.columnCount || 0), D = ref(0), O = new Uint8Array(), k = new Uint8Array(), A = new Uint8Array(), j = ref(null), M = ref(!1), N = [], P = computed(() => e.value.itemSize === void 0 || e.value.itemSize === null || e.value.itemSize === 0), F = computed(() => e.value.columnWidth === void 0 || e.value.columnWidth === null || e.value.columnWidth === 0), I = computed(() => typeof e.value.itemSize == "number" && e.value.itemSize > 0 ? e.value.itemSize : null), L = computed(() => I.value || e.value.defaultItemSize || 50), R = computed(() => [...e.value.stickyIndices || []].sort((e, t) => e - t)), z = computed(() => {
80
+ if (D.value, !a.value && e.value.ssrRange && !l.value) {
81
+ let { start: t = 0, end: n = 0, colStart: r = 0, colEnd: i = 0 } = e.value.ssrRange, a = e.value.columnCount || 0;
82
+ if (e.value.direction === "both" && a > 0) return S.query(i || a) - S.query(r);
83
+ /* v8 ignore else -- @preserve */
84
+ if (e.value.direction === "horizontal") return I.value === null ? y.query(n) - y.query(t) : (n - t) * (I.value + (e.value.columnGap || 0));
85
+ }
86
+ return e.value.direction === "both" && e.value.columnCount ? S.query(e.value.columnCount) : e.value.direction === "vertical" ? 0 : I.value === null ? y.query(e.value.items.length) : e.value.items.length * (I.value + (e.value.columnGap || 0));
87
+ }), B = computed(() => {
88
+ if (D.value, !a.value && e.value.ssrRange && !l.value) {
89
+ let { start: t, end: n } = e.value.ssrRange;
90
+ /* v8 ignore else -- @preserve */
91
+ if (e.value.direction === "vertical" || e.value.direction === "both") return I.value === null ? b.query(n) - b.query(t) : (n - t) * (I.value + (e.value.gap || 0));
92
+ }
93
+ return e.value.direction === "horizontal" ? 0 : I.value === null ? b.query(e.value.items.length) : e.value.items.length * (I.value + (e.value.gap || 0));
94
+ }), V = computed(() => {
95
+ let t = e.value.direction === "horizontal" || e.value.direction === "both" ? getPaddingX(e.value.scrollPaddingStart, e.value.direction) : 0;
96
+ return Math.max(0, n.value + t - g.x);
97
+ }), H = computed(() => {
98
+ let t = e.value.direction === "vertical" || e.value.direction === "both" ? getPaddingY(e.value.scrollPaddingStart, e.value.direction) : 0;
99
+ return Math.max(0, r.value + t - g.y);
100
+ }), U = (t) => {
101
+ D.value;
102
+ let n = e.value.columnWidth;
103
+ return typeof n == "number" && n > 0 ? n : Array.isArray(n) && n.length > 0 ? n[t % n.length] || 150 : typeof n == "function" ? n(t) : S.get(t) || e.value.defaultColumnWidth || 150;
104
+ }, W = (t, a, o) => {
105
+ let s = typeof o == "object" && o && "isCorrection" in o ? o.isCorrection : !1;
106
+ s || (j.value = {
107
+ rowIndex: t,
108
+ colIndex: a,
109
+ options: o
110
+ });
111
+ let c = e.value.container || window, l = I.value, d = e.value.gap || 0, f = e.value.columnGap || 0, m, h;
112
+ isScrollToIndexOptions(o) ? (m = o.align, h = o.behavior) : m = o;
113
+ let _ = (typeof m == "object" ? m.x : m) || "auto", x = (typeof m == "object" ? m.y : m) || "auto", C = getPaddingX(e.value.scrollPaddingStart, e.value.direction), D = getPaddingX(e.value.scrollPaddingEnd, e.value.direction), O = getPaddingY(e.value.scrollPaddingStart, e.value.direction), k = getPaddingY(e.value.scrollPaddingEnd, e.value.direction), A = e.value.direction === "vertical" || e.value.direction === "both", M = e.value.direction === "horizontal" || e.value.direction === "both", N = u.value - (M ? C + D : 0), P = p.value - (A ? O + k : 0), F = V.value, L = H.value, R = 0, U = 0;
114
+ if (t != null && (t >= e.value.items.length ? (L = B.value, U = 0) : (L = l === null ? b.query(t) : t * (l + d), U = l === null ? b.get(t) - d : l), x === "start" || (x === "center" ? L -= (P - U) / 2 : x === "end" ? L -= P - U : L >= H.value && L + U <= H.value + P || L < H.value || (L -= P - U))), a != null) {
115
+ let t = e.value.columnCount || 0;
116
+ a >= t && t > 0 ? (F = z.value, R = 0) : e.value.direction === "horizontal" ? (F = l === null ? y.query(a) : a * (l + f), R = l === null ? y.get(a) - f : l) : (F = S.query(a), R = S.get(a)), _ === "start" || (_ === "center" ? F -= (N - R) / 2 : _ === "end" ? F -= N - R : F >= V.value && F + R <= V.value + N || F < V.value || (F -= N - R));
117
+ }
118
+ F = Math.max(0, Math.min(F, Math.max(0, z.value - N))), L = Math.max(0, Math.min(L, Math.max(0, B.value - P)));
119
+ let W = F + g.x - (M ? C : 0), G = L + g.y - (A ? O : 0), K = a == null || Math.abs(V.value - F) < 1, q = t == null || Math.abs(H.value - L) < 1;
120
+ if (!K || !q) {
121
+ let e = 0, n = 0, r = 0, i = 0, o = 0, s = 0;
122
+ /* v8 ignore else -- @preserve */
123
+ if (typeof window < "u") {
124
+ if (c === window ? (e = window.scrollX, n = window.scrollY, r = document.documentElement.scrollWidth, i = document.documentElement.scrollHeight, o = window.innerWidth, s = window.innerHeight) : isElement(c) && (e = c.scrollLeft, n = c.scrollTop, r = c.scrollWidth, i = c.scrollHeight, o = c.clientWidth, s = c.clientHeight), !K && a != null) {
125
+ let t = e <= 1 && W <= 1, n = e >= r - o - 1 && W >= r - o - 1;
126
+ /* v8 ignore else -- @preserve */
127
+ (t || n) && (K = !0);
128
+ }
129
+ if (!q && t != null) {
130
+ let e = n <= 1 && G <= 1, t = n >= i - s - 1 && G >= i - s - 1;
131
+ (e || t) && (q = !0);
132
+ }
133
+ }
134
+ }
135
+ let J = s ? "auto" : h || "smooth";
136
+ if (v.value = !0, typeof window < "u" && c === window) window.scrollTo({
137
+ left: a == null ? void 0 : Math.max(0, W),
138
+ top: t == null ? void 0 : Math.max(0, G),
139
+ behavior: J
140
+ });
141
+ else if (isScrollableElement(c)) {
142
+ let e = { behavior: J };
143
+ a != null && (e.left = Math.max(0, W)), t != null && (e.top = Math.max(0, G)), typeof c.scrollTo == "function" ? c.scrollTo(e) : (e.left !== void 0 && (c.scrollLeft = e.left), e.top !== void 0 && (c.scrollTop = e.top));
144
+ }
145
+ (J === "auto" || J === void 0) && (a != null && (n.value = Math.max(0, W)), t != null && (r.value = Math.max(0, G))), K && q && !i.value && (j.value = null);
146
+ }, G = (t, i, a) => {
147
+ let o = e.value.container || window;
148
+ v.value = !0;
149
+ let s = e.value.direction === "vertical" || e.value.direction === "both", c = e.value.direction === "horizontal" || e.value.direction === "both", l = getPaddingX(e.value.scrollPaddingStart, e.value.direction), d = getPaddingY(e.value.scrollPaddingStart, e.value.direction), f = getPaddingX(e.value.scrollPaddingEnd, e.value.direction), m = getPaddingY(e.value.scrollPaddingEnd, e.value.direction), h = u.value - (c ? l + f : 0), _ = p.value - (s ? d + m : 0), y = t == null ? null : c ? Math.max(0, Math.min(t, Math.max(0, z.value - h))) : Math.max(0, t), b = i == null ? null : s ? Math.max(0, Math.min(i, Math.max(0, B.value - _))) : Math.max(0, i), x = typeof window < "u" && o === window ? window.scrollX : o.scrollLeft, S = typeof window < "u" && o === window ? window.scrollY : o.scrollTop, C = y === null ? x : y + g.x - (c ? l : 0), w = b === null ? S : b + g.y - (s ? d : 0);
150
+ if (typeof window < "u" && o === window) window.scrollTo({
151
+ left: t == null ? void 0 : C,
152
+ top: i == null ? void 0 : w,
153
+ behavior: a?.behavior || "auto"
154
+ });
155
+ else if (isScrollableElement(o)) {
156
+ let e = { behavior: a?.behavior || "auto" };
157
+ t != null && (e.left = C), i != null && (e.top = w), typeof o.scrollTo == "function" ? o.scrollTo(e) : (e.left !== void 0 && (o.scrollLeft = e.left), e.top !== void 0 && (o.scrollTop = e.top));
158
+ }
159
+ (a?.behavior === "auto" || a?.behavior === void 0) && (t != null && (n.value = C), i != null && (r.value = w));
160
+ }, K = () => {
161
+ let t = e.value.items, n = t.length, r = e.value.columnCount || 0;
162
+ if (y.resize(n), b.resize(n), S.resize(r), k.length !== n) {
163
+ let e = new Uint8Array(n);
164
+ e.set(k.subarray(0, Math.min(n, k.length))), k = e;
165
+ }
166
+ if (A.length !== n) {
167
+ let e = new Uint8Array(n);
168
+ e.set(A.subarray(0, Math.min(n, A.length))), A = e;
169
+ }
170
+ if (O.length !== r) {
171
+ let e = new Uint8Array(r);
172
+ e.set(O.subarray(0, Math.min(r, O.length))), O = e;
173
+ }
174
+ let i = 0;
175
+ if (e.value.restoreScrollOnPrepend && N.length > 0 && n > N.length) {
176
+ let e = N[0];
177
+ /* v8 ignore else -- @preserve */
178
+ if (e !== void 0) {
179
+ for (let r = 1; r <= n - N.length; r++) if (t[r] === e) {
180
+ i = r;
181
+ break;
182
+ }
183
+ }
184
+ }
185
+ if (i > 0) {
186
+ y.shift(i), b.shift(i), j.value && j.value.rowIndex !== null && j.value.rowIndex !== void 0 && (j.value.rowIndex += i);
187
+ let r = new Uint8Array(n), a = new Uint8Array(n);
188
+ r.set(k.subarray(0, Math.min(n - i, k.length)), i), a.set(A.subarray(0, Math.min(n - i, A.length)), i), k = r, A = a;
189
+ let o = e.value.gap || 0, s = e.value.columnGap || 0, l = 0, u = 0;
190
+ for (let n = 0; n < i; n++) {
191
+ let r = typeof e.value.itemSize == "function" ? e.value.itemSize(t[n], n) : L.value;
192
+ e.value.direction === "horizontal" ? l += r + s : u += r + o;
193
+ }
194
+ /* v8 ignore else -- @preserve */
195
+ (l > 0 || u > 0) && nextTick(() => {
196
+ G(l > 0 ? V.value + l : null, u > 0 ? H.value + u : null, { behavior: "auto" });
197
+ });
198
+ }
199
+ if (r > 0) {
200
+ let t = e.value.columnGap || 0, n = !1;
201
+ for (let e = 0; e < r; e++) {
202
+ let r = U(e), i = S.get(e);
203
+ if (!F.value || i === 0) {
204
+ let a = r + t;
205
+ /* v8 ignore else -- @preserve */
206
+ Math.abs(i - a) > .5 && (S.set(e, a), n = !0);
207
+ }
208
+ }
209
+ n && S.rebuild();
210
+ }
211
+ let a = e.value.gap || 0, o = e.value.columnGap || 0, s = !1;
212
+ for (let t = 0; t < n; t++) {
213
+ let n = e.value.items[t], r = y.get(t), i = b.get(t);
214
+ if (P.value && (r > 0 || i > 0)) continue;
215
+ let c = typeof e.value.itemSize == "function" ? e.value.itemSize(n, t) : L.value, l = e.value.direction === "vertical", u = e.value.direction === "horizontal", d = e.value.direction === "both", f = u ? c + o : 0, p = l || d ? c + a : 0;
216
+ Math.abs(r - f) > .5 && (y.set(t, f), s = !0), Math.abs(i - p) > .5 && (b.set(t, p), s = !0);
217
+ }
218
+ s && (y.rebuild(), b.rebuild()), N = [...t], M.value = !0, D.value++;
219
+ }, q = () => {
220
+ if (e.value.hostElement && typeof window < "u") {
221
+ let t = e.value.hostElement.getBoundingClientRect(), n = e.value.container || window, r = 0, i = 0;
222
+ if (n === window) r = t.left + window.scrollX, i = t.top + window.scrollY;
223
+ else if (n === e.value.hostElement) r = 0, i = 0;
224
+ else if (isElement(n)) {
225
+ let e = n.getBoundingClientRect();
226
+ r = t.left - e.left + n.scrollLeft, i = t.top - e.top + n.scrollTop;
227
+ }
228
+ (Math.abs(g.x - r) > .1 || Math.abs(g.y - i) > .1) && (g.x = r, g.y = i);
229
+ }
230
+ };
231
+ watch([
232
+ () => e.value.items.length,
233
+ () => e.value.columnCount,
234
+ () => e.value.columnWidth,
235
+ () => e.value.itemSize,
236
+ () => e.value.gap,
237
+ () => e.value.columnGap
238
+ ], K, { immediate: !0 }), watch(() => [e.value.container, e.value.hostElement], () => {
239
+ q();
240
+ });
241
+ let J = computed(() => {
242
+ if (D.value, (!a.value || o.value) && e.value.ssrRange) return {
243
+ start: e.value.ssrRange.start,
244
+ end: e.value.ssrRange.end
245
+ };
246
+ let t = e.value.direction || "vertical", n = e.value.ssrRange && !i.value ? 0 : e.value.bufferBefore ?? 5, r = e.value.bufferAfter ?? 5, s = e.value.gap || 0, c = e.value.columnGap || 0, l = I.value, d = getPaddingX(e.value.scrollPaddingStart, t), f = getPaddingX(e.value.scrollPaddingEnd, t), m = getPaddingY(e.value.scrollPaddingStart, t), h = getPaddingY(e.value.scrollPaddingEnd, t), g = t === "vertical" || t === "both", _ = t === "horizontal" || t === "both", v = u.value - (_ ? d + f : 0), x = p.value - (g ? m + h : 0), S = 0, C = e.value.items.length;
247
+ if (g) if (l !== null) S = Math.floor(H.value / (l + s)), C = Math.ceil((H.value + x) / (l + s));
248
+ else {
249
+ S = b.findLowerBound(H.value);
250
+ let t = b.query(S), n = S;
251
+ for (; n < e.value.items.length && t < H.value + x;) t = b.query(++n);
252
+ C = n;
253
+ }
254
+ else if (l !== null) S = Math.floor(V.value / (l + c)), C = Math.ceil((V.value + v) / (l + c));
255
+ else {
256
+ S = y.findLowerBound(V.value);
257
+ let t = y.query(S), n = S;
258
+ for (; n < e.value.items.length && t < V.value + v;) t = y.query(++n);
259
+ C = n;
260
+ }
261
+ return {
262
+ start: Math.max(0, S - n),
263
+ end: Math.min(e.value.items.length, C + r)
264
+ };
265
+ }), Y = computed(() => {
266
+ D.value;
267
+ let t = I.value, n = e.value.gap || 0, r = e.value.columnGap || 0;
268
+ return e.value.direction === "horizontal" ? t === null ? y.findLowerBound(V.value) : Math.floor(V.value / (t + r)) : t === null ? b.findLowerBound(H.value) : Math.floor(H.value / (t + n));
269
+ }), X = computed(() => {
270
+ D.value;
271
+ let { start: t, end: n } = J.value, r = [], i = I.value, o = e.value.gap || 0, s = e.value.columnGap || 0, c = R.value, l = /* @__PURE__ */ new Set();
272
+ for (let e = t; e < n; e++) l.add(e);
273
+ if (a.value || !e.value.ssrRange) {
274
+ let e = Y.value, r, i = 0, a = c.length - 1;
275
+ for (; i <= a;) {
276
+ let t = i + a >>> 1;
277
+ c[t] < e ? (r = c[t], i = t + 1) : a = t - 1;
278
+ }
279
+ r !== void 0 && l.add(r);
280
+ for (let e of c) e >= t && e < n && l.add(e);
281
+ }
282
+ let d = Array.from(l).sort((e, t) => e - t), f = e.value.ssrRange?.start || 0, m = e.value.ssrRange?.colStart || 0, h = 0, g = 0;
283
+ !a.value && e.value.ssrRange && (g = e.value.direction === "vertical" || e.value.direction === "both" ? i === null ? b.query(f) : f * (i + o) : 0, e.value.direction === "horizontal" ? h = i === null ? y.query(m) : m * (i + s) : e.value.direction === "both" && (h = S.query(m)));
284
+ for (let t of d) {
285
+ let n = e.value.items[t];
286
+ if (n === void 0) continue;
287
+ let a = 0, l = 0, d = 0, f = 0;
288
+ e.value.direction === "horizontal" ? (a = i === null ? y.query(t) : t * (i + s), d = i === null ? y.get(t) - s : i, f = p.value) : (l = (e.value.direction === "vertical" || e.value.direction === "both") && i !== null ? t * (i + o) : b.query(t), f = i === null ? b.get(t) - o : i, d = e.value.direction === "both" ? z.value : u.value);
289
+ let m = c.includes(t), _ = a, v = l, x = !1, S = {
290
+ x: 0,
291
+ y: 0
292
+ };
293
+ if (m) {
294
+ if (e.value.direction === "vertical" || e.value.direction === "both") {
295
+ if (H.value > v) {
296
+ x = !0;
297
+ let e, n = 0, r = c.length - 1;
298
+ for (; n <= r;) {
299
+ let i = n + r >>> 1;
300
+ c[i] > t ? (e = c[i], r = i - 1) : n = i + 1;
301
+ }
302
+ if (e !== void 0) {
303
+ let t = (i === null ? b.query(e) : e * (i + o)) - H.value;
304
+ /* v8 ignore else -- @preserve */
305
+ t < f && (S.y = -(f - t));
306
+ }
307
+ }
308
+ } else if (e.value.direction === "horizontal" && V.value > _) {
309
+ x = !0;
310
+ let e, n = 0, r = c.length - 1;
311
+ for (; n <= r;) {
312
+ let i = n + r >>> 1;
313
+ c[i] > t ? (e = c[i], r = i - 1) : n = i + 1;
314
+ }
315
+ if (e !== void 0) {
316
+ let t = (i === null ? y.query(e) : e * (i + s)) - V.value;
317
+ /* v8 ignore else -- @preserve */
318
+ t < d && (S.x = -(d - t));
319
+ }
320
+ }
321
+ }
322
+ r.push({
323
+ item: n,
324
+ index: t,
325
+ offset: {
326
+ x: _ - h,
327
+ y: v - g
328
+ },
329
+ size: {
330
+ width: d,
331
+ height: f
332
+ },
333
+ originalX: _,
334
+ originalY: v,
335
+ isSticky: m,
336
+ isStickyActive: x,
337
+ stickyOffset: S
338
+ });
339
+ }
340
+ return r;
341
+ }), Z = computed(() => {
342
+ D.value;
343
+ let t = e.value.columnCount || 0;
344
+ if (!t) return {
345
+ start: 0,
346
+ end: 0,
347
+ padStart: 0,
348
+ padEnd: 0
349
+ };
350
+ if ((!a.value || o.value) && e.value.ssrRange) {
351
+ let { colStart: n = 0, colEnd: r = 0 } = e.value.ssrRange;
352
+ return {
353
+ start: Math.max(0, n),
354
+ end: Math.min(t, r || t),
355
+ padStart: 0,
356
+ padEnd: 0
357
+ };
358
+ }
359
+ let n = S.findLowerBound(V.value), r = S.query(n), s = n;
360
+ for (; s < t && r < V.value + u.value;) r = S.query(++s);
361
+ let c = e.value.ssrRange && !i.value ? 0 : 2, l = Math.max(0, n - c), d = Math.min(t, s + c);
362
+ return {
363
+ start: l,
364
+ end: d,
365
+ padStart: S.query(l),
366
+ padEnd: S.query(t) - S.query(d)
367
+ };
368
+ }), ne = computed(() => {
369
+ D.value;
370
+ let t = I.value, n = e.value.columnGap || 0, r = 0;
371
+ return (e.value.direction === "horizontal" || e.value.direction === "both") && (r = t === null ? y.findLowerBound(V.value) : Math.floor(V.value / (t + n))), {
372
+ items: X.value,
373
+ currentIndex: Y.value,
374
+ currentColIndex: r,
375
+ scrollOffset: {
376
+ x: V.value,
377
+ y: H.value
378
+ },
379
+ viewportSize: {
380
+ width: u.value,
381
+ height: p.value
382
+ },
383
+ totalSize: {
384
+ width: z.value,
385
+ height: B.value
386
+ },
387
+ isScrolling: i.value,
388
+ isProgrammaticScroll: v.value,
389
+ range: J.value,
390
+ columnRange: Z.value
391
+ };
392
+ }), re = () => {
393
+ v.value = !1, j.value = null;
394
+ }, Q = (e) => {
395
+ let t = e.target;
396
+ typeof window > "u" || (t === window || t === document ? (n.value = window.scrollX, r.value = window.scrollY) : isScrollableElement(t) && (n.value = t.scrollLeft, r.value = t.scrollTop), i.value ||= (v.value || (j.value = null), !0), clearTimeout(_), _ = setTimeout(() => {
397
+ i.value = !1, v.value = !1;
398
+ }, 250));
399
+ }, ie = (t) => {
400
+ let n = !1, r = e.value.gap || 0, i = e.value.columnGap || 0;
401
+ for (let { index: a, inlineSize: o, blockSize: s, element: c } of t) {
402
+ if (P.value) {
403
+ if (e.value.direction === "horizontal") {
404
+ let e = y.get(a), t = o + i;
405
+ Math.abs(e - t) > .5 && (t > e || !k[a]) && (y.update(a, t - e), k[a] = 1, n = !0);
406
+ }
407
+ if (e.value.direction === "vertical" || e.value.direction === "both") {
408
+ let t = b.get(a), i = s + r;
409
+ e.value.direction === "both" ? (i > t || !A[a]) && (b.update(a, i - t), A[a] = 1, n = !0) : Math.abs(t - i) > .5 && (i > t || !A[a]) && (b.update(a, i - t), A[a] = 1, n = !0);
410
+ }
411
+ }
412
+ if (e.value.direction === "both" && c && e.value.columnCount && F.value) {
413
+ let t = c.dataset.colIndex === void 0 ? Array.from(c.querySelectorAll("[data-col-index]")) : [c];
414
+ for (let r of t) {
415
+ let t = Number.parseInt(r.dataset.colIndex, 10);
416
+ /* v8 ignore else -- @preserve */
417
+ if (t >= 0 && t < (e.value.columnCount || 0)) {
418
+ let e = r.offsetWidth, a = S.get(t), o = e + i;
419
+ /* v8 ignore else -- @preserve */
420
+ (o > a || !O[t]) && (S.update(t, o - a), O[t] = 1, n = !0);
421
+ }
422
+ }
423
+ }
424
+ }
425
+ n && D.value++;
426
+ }, ae = (e, t, n, r) => {
427
+ ie([{
428
+ index: e,
429
+ inlineSize: t,
430
+ blockSize: n,
431
+ element: r
432
+ }]);
433
+ }, oe = () => {
434
+ if (j.value && !o.value) {
435
+ let { rowIndex: e, colIndex: t, options: n } = j.value;
436
+ W(e, t, isScrollToIndexOptions(n) ? {
437
+ ...n,
438
+ isCorrection: !0
439
+ } : {
440
+ align: n,
441
+ isCorrection: !0
442
+ });
443
+ }
444
+ };
445
+ watch(D, oe), watch(i, (e) => {
446
+ e || oe();
447
+ });
448
+ let $ = null, se = (e) => {
449
+ if (!e || typeof window > "u") return;
450
+ let t = e === window ? document : e;
451
+ if (t.addEventListener("scroll", Q, { passive: !0 }), e === window) {
452
+ u.value = window.innerWidth, p.value = window.innerHeight, n.value = window.scrollX, r.value = window.scrollY;
453
+ let e = () => {
454
+ u.value = window.innerWidth, p.value = window.innerHeight, q();
455
+ };
456
+ return window.addEventListener("resize", e), () => {
457
+ t.removeEventListener("scroll", Q), window.removeEventListener("resize", e);
458
+ };
459
+ } else return u.value = e.clientWidth, p.value = e.clientHeight, n.value = e.scrollLeft, r.value = e.scrollTop, $ = new ResizeObserver((t) => {
460
+ for (let n of t)
461
+ /* v8 ignore else -- @preserve */
462
+ n.target === e && (u.value = e.clientWidth, p.value = e.clientHeight, q());
463
+ }), $.observe(e), () => {
464
+ t.removeEventListener("scroll", Q), $?.disconnect();
465
+ };
466
+ }, ce;
467
+ return getCurrentInstance() && (onMounted(() => {
468
+ l.value = !0, watch(() => e.value.container, (e) => {
469
+ ce?.(), ce = se(e || null);
470
+ }, { immediate: !0 }), q(), e.value.ssrRange || e.value.initialScrollIndex !== void 0 ? nextTick(() => {
471
+ q();
472
+ let t = e.value.initialScrollIndex === void 0 ? e.value.ssrRange?.start : e.value.initialScrollIndex, n = e.value.initialScrollAlign || "start";
473
+ t != null && W(t, e.value.ssrRange?.colStart, {
474
+ align: n,
475
+ behavior: "auto"
476
+ }), a.value = !0, o.value = !0, nextTick(() => {
477
+ o.value = !1;
478
+ });
479
+ }) : a.value = !0;
480
+ }), onUnmounted(() => {
481
+ ce?.();
482
+ })), {
483
+ renderedItems: X,
484
+ totalWidth: z,
485
+ totalHeight: B,
486
+ scrollDetails: ne,
487
+ scrollToIndex: W,
488
+ scrollToOffset: G,
489
+ stopProgrammaticScroll: re,
490
+ updateItemSize: ae,
491
+ updateItemSizes: ie,
492
+ updateHostOffset: q,
493
+ columnRange: Z,
494
+ getColumnWidth: U,
495
+ refresh: () => {
496
+ y.resize(0), b.resize(0), S.resize(0), O.fill(0), k.fill(0), A.fill(0), K();
497
+ },
498
+ isHydrated: a
499
+ };
612
500
  }
613
- const ht = {
614
- key: 0,
615
- class: "virtual-scroll-debug-info"
616
- }, gt = /* @__PURE__ */ rt({
617
- __name: "VirtualScroll",
618
- props: {
619
- items: {},
620
- itemSize: {},
621
- direction: { default: "vertical" },
622
- bufferBefore: { default: 5 },
623
- bufferAfter: { default: 5 },
624
- container: {},
625
- ssrRange: {},
626
- columnCount: { default: 0 },
627
- columnWidth: {},
628
- containerTag: { default: "div" },
629
- wrapperTag: { default: "div" },
630
- itemTag: { default: "div" },
631
- scrollPaddingStart: { default: 0 },
632
- scrollPaddingEnd: { default: 0 },
633
- stickyHeader: { type: Boolean, default: !1 },
634
- stickyFooter: { type: Boolean, default: !1 },
635
- gap: { default: 0 },
636
- columnGap: { default: 0 },
637
- stickyIndices: { default: () => [] },
638
- loadDistance: { default: 50 },
639
- loading: { type: Boolean, default: !1 },
640
- restoreScrollOnPrepend: { type: Boolean, default: !1 },
641
- initialScrollIndex: {},
642
- initialScrollAlign: {},
643
- defaultItemSize: {},
644
- defaultColumnWidth: {},
645
- debug: { type: Boolean, default: !1 }
646
- },
647
- emits: ["scroll", "load", "visibleRangeChange"],
648
- setup(e, { expose: a, emit: g }) {
649
- const n = e, W = g, Z = E(() => n.debug), U = P(null), j = P(null), te = P(null), N = P(null), ne = /* @__PURE__ */ new Map(), ce = P(0), R = P(0), x = E(() => {
650
- const i = n.container === void 0 ? U.value : n.container;
651
- return i === U.value || typeof window < "u" && (i === window || i === null);
652
- }), T = E(() => {
653
- const i = n.scrollPaddingStart, r = n.scrollPaddingEnd, c = typeof i == "object" ? i.x || 0 : n.direction === "horizontal" && i || 0, C = typeof i == "object" ? i.y || 0 : n.direction !== "horizontal" && i || 0, G = typeof r == "object" ? r.x || 0 : n.direction === "horizontal" && r || 0, H = typeof r == "object" ? r.y || 0 : n.direction !== "horizontal" && r || 0;
654
- return {
655
- items: n.items,
656
- itemSize: n.itemSize,
657
- direction: n.direction,
658
- bufferBefore: n.bufferBefore,
659
- bufferAfter: n.bufferAfter,
660
- container: n.container === void 0 ? U.value : n.container,
661
- hostElement: j.value,
662
- ssrRange: n.ssrRange,
663
- columnCount: n.columnCount,
664
- columnWidth: n.columnWidth,
665
- scrollPaddingStart: {
666
- x: c,
667
- y: C + (n.stickyHeader && x.value ? ce.value : 0)
668
- },
669
- scrollPaddingEnd: {
670
- x: G,
671
- y: H + (n.stickyFooter && x.value ? R.value : 0)
672
- },
673
- gap: n.gap,
674
- columnGap: n.columnGap,
675
- stickyIndices: n.stickyIndices,
676
- loadDistance: n.loadDistance,
677
- loading: n.loading,
678
- restoreScrollOnPrepend: n.restoreScrollOnPrepend,
679
- initialScrollIndex: n.initialScrollIndex,
680
- initialScrollAlign: n.initialScrollAlign,
681
- defaultItemSize: n.defaultItemSize,
682
- defaultColumnWidth: n.defaultColumnWidth,
683
- debug: Z.value
684
- };
685
- }), {
686
- isHydrated: L,
687
- columnRange: ae,
688
- renderedItems: J,
689
- scrollDetails: A,
690
- totalHeight: Q,
691
- totalWidth: de,
692
- getColumnWidth: ve,
693
- scrollToIndex: be,
694
- scrollToOffset: _,
695
- updateHostOffset: Ee,
696
- updateItemSizes: Pe,
697
- refresh: D,
698
- stopProgrammaticScroll: fe
699
- } = ft(T);
700
- ie(A, (i, r) => {
701
- L.value && (W("scroll", i), (!r || i.range.start !== r.range.start || i.range.end !== r.range.end || i.columnRange.start !== r.columnRange.start || i.columnRange.end !== r.columnRange.end) && W("visibleRangeChange", {
702
- start: i.range.start,
703
- end: i.range.end,
704
- colStart: i.columnRange.start,
705
- colEnd: i.columnRange.end
706
- }), !n.loading && (n.direction !== "horizontal" && i.totalSize.height - (i.scrollOffset.y + i.viewportSize.height) <= n.loadDistance && W("load", "vertical"), n.direction !== "vertical" && i.totalSize.width - (i.scrollOffset.x + i.viewportSize.width) <= n.loadDistance && W("load", "horizontal")));
707
- }), ie(L, (i) => {
708
- i && W("visibleRangeChange", {
709
- start: A.value.range.start,
710
- end: A.value.range.end,
711
- colStart: A.value.columnRange.start,
712
- colEnd: A.value.columnRange.end
713
- });
714
- }, { once: !0 });
715
- const ze = typeof window > "u" ? null : new ResizeObserver(Ee), p = typeof window > "u" ? null : new ResizeObserver((i) => {
716
- const r = [];
717
- for (const c of i) {
718
- const C = c.target, G = Number(C.dataset.index);
719
- if (C.dataset.colIndex !== void 0)
720
- r.push({ index: -1, inlineSize: 0, blockSize: 0, element: C });
721
- else if (!Number.isNaN(G)) {
722
- let me = c.contentRect.width, Re = c.contentRect.height;
723
- c.borderBoxSize && c.borderBoxSize.length > 0 ? (me = c.borderBoxSize[0].inlineSize, Re = c.borderBoxSize[0].blockSize) : (me = C.offsetWidth, Re = C.offsetHeight), r.push({ index: G, inlineSize: me, blockSize: Re, element: C });
724
- }
725
- }
726
- r.length > 0 && Pe(r);
727
- }), oe = typeof window > "u" ? null : new ResizeObserver(() => {
728
- ce.value = te.value?.offsetHeight || 0, R.value = N.value?.offsetHeight || 0, Ee();
729
- });
730
- ie(te, (i, r) => {
731
- r && oe?.unobserve(r), i && oe?.observe(i);
732
- }, { immediate: !0 }), ie(N, (i, r) => {
733
- r && oe?.unobserve(r), i && oe?.observe(i);
734
- }, { immediate: !0 });
735
- const M = E(() => J.value[0]?.index);
736
- ie(M, (i, r) => {
737
- if (n.direction === "both") {
738
- if (r !== void 0) {
739
- const c = ne.get(r);
740
- c && c.querySelectorAll("[data-col-index]").forEach((C) => p?.unobserve(C));
741
- }
742
- if (i !== void 0) {
743
- const c = ne.get(i);
744
- c && c.querySelectorAll("[data-col-index]").forEach((C) => p?.observe(C));
745
- }
746
- }
747
- }, { flush: "post" }), it(() => {
748
- U.value && ze?.observe(U.value);
749
- for (const i of ne.values())
750
- p?.observe(i);
751
- if (M.value !== void 0) {
752
- const i = ne.get(M.value);
753
- i && i.querySelectorAll("[data-col-index]").forEach((r) => p?.observe(r));
754
- }
755
- }), ie([U, j], ([i], [r]) => {
756
- r && ze?.unobserve(r), i && ze?.observe(i);
757
- });
758
- function B(i, r) {
759
- if (i)
760
- ne.set(r, i), p?.observe(i);
761
- else {
762
- const c = ne.get(r);
763
- c && (p?.unobserve(c), ne.delete(r));
764
- }
765
- }
766
- function He(i) {
767
- fe();
768
- const { viewportSize: r, scrollOffset: c } = A.value, C = n.direction !== "vertical", G = n.direction !== "horizontal";
769
- if (i.key === "Home") {
770
- i.preventDefault(), be(0, 0, "start");
771
- return;
772
- }
773
- if (i.key === "End") {
774
- i.preventDefault();
775
- const H = n.items.length - 1, me = (n.columnCount || 0) > 0 ? n.columnCount - 1 : 0;
776
- C && G ? be(H, me, "end") : be(0, H, "end");
777
- return;
778
- }
779
- if (i.key === "ArrowUp") {
780
- i.preventDefault(), _(null, c.y - 40);
781
- return;
782
- }
783
- if (i.key === "ArrowDown") {
784
- i.preventDefault(), _(null, c.y + 40);
785
- return;
786
- }
787
- if (i.key === "ArrowLeft") {
788
- i.preventDefault(), _(c.x - 40, null);
789
- return;
790
- }
791
- if (i.key === "ArrowRight") {
792
- i.preventDefault(), _(c.x + 40, null);
793
- return;
794
- }
795
- if (i.key === "PageUp") {
796
- i.preventDefault(), _(
797
- C ? c.x - r.width : null,
798
- G ? c.y - r.height : null
799
- );
800
- return;
801
- }
802
- i.key === "PageDown" && (i.preventDefault(), _(
803
- C ? c.x + r.width : null,
804
- G ? c.y + r.height : null
805
- ));
806
- }
807
- nt(() => {
808
- ze?.disconnect(), p?.disconnect(), oe?.disconnect();
809
- });
810
- const ke = E(() => {
811
- const i = n.container;
812
- return i === null || typeof window < "u" && i === window ? !0 : i && typeof i == "object" && "tagName" in i ? i.tagName === "BODY" : !1;
813
- }), Xe = E(() => ke.value ? {
814
- ...n.direction !== "vertical" ? { whiteSpace: "nowrap" } : {}
815
- } : n.containerTag === "table" ? {
816
- minInlineSize: n.direction === "vertical" ? "100%" : "auto"
817
- } : {
818
- ...n.direction !== "vertical" ? { whiteSpace: "nowrap" } : {}
819
- }), Ye = E(() => ({
820
- inlineSize: n.direction === "vertical" ? "100%" : `${de.value}px`,
821
- blockSize: n.direction === "horizontal" ? "100%" : `${Q.value}px`
822
- })), he = E(() => {
823
- const i = n.direction === "horizontal";
824
- return {
825
- display: i ? "inline-block" : "block",
826
- ...i ? { blockSize: "100%", verticalAlign: "top" } : { inlineSize: "100%" }
827
- };
828
- }), Be = E(() => ({
829
- inlineSize: n.direction === "vertical" ? "1px" : `${de.value}px`,
830
- blockSize: n.direction === "horizontal" ? "1px" : `${Q.value}px`
831
- }));
832
- function qe(i) {
833
- const r = n.direction === "vertical", c = n.direction === "horizontal", C = n.direction === "both", G = n.itemSize === void 0 || n.itemSize === null || n.itemSize === 0, H = {
834
- blockSize: c ? "100%" : G ? "auto" : `${i.size.height}px`
835
- };
836
- return r && n.containerTag === "table" ? H.minInlineSize = "100%" : H.inlineSize = r ? "100%" : G ? "auto" : `${i.size.width}px`, G && (r || (H.minInlineSize = `${i.size.width}px`), c || (H.minBlockSize = `${i.size.height}px`)), L.value && (i.isStickyActive ? ((r || C) && (H.insetBlockStart = `${Se(n.scrollPaddingStart, n.direction)}px`), (c || C) && (H.insetInlineStart = `${we(n.scrollPaddingStart, n.direction)}px`), H.transform = `translate(${i.stickyOffset.x}px, ${i.stickyOffset.y}px)`) : H.transform = `translate(${i.offset.x}px, ${i.offset.y}px)`), H;
837
- }
838
- return a({
839
- scrollDetails: A,
840
- columnRange: ae,
841
- getColumnWidth: ve,
842
- scrollToIndex: be,
843
- scrollToOffset: _,
844
- refresh: D,
845
- stopProgrammaticScroll: fe
846
- }), (i, r) => (se(), xe(Me(e.containerTag), {
847
- ref_key: "hostRef",
848
- ref: U,
849
- class: $e(["virtual-scroll-container", [
850
- `virtual-scroll--${e.direction}`,
851
- {
852
- "virtual-scroll--hydrated": ye(L),
853
- "virtual-scroll--window": ke.value,
854
- "virtual-scroll--table": e.containerTag === "table"
855
- }
856
- ]]),
857
- style: We(Xe.value),
858
- tabindex: "0",
859
- onKeydown: He,
860
- onWheelPassive: ye(fe),
861
- onPointerdownPassive: ye(fe),
862
- onTouchstartPassive: ye(fe)
863
- }, {
864
- default: Ce(() => [
865
- i.$slots.header ? (se(), xe(Me(e.containerTag === "table" ? "thead" : "div"), {
866
- key: 0,
867
- ref_key: "headerRef",
868
- ref: te,
869
- class: $e(["virtual-scroll-header", { "virtual-scroll--sticky": e.stickyHeader }])
870
- }, {
871
- default: Ce(() => [
872
- Ve(i.$slots, "header", {}, void 0, !0)
873
- ]),
874
- _: 3
875
- }, 8, ["class"])) : Ae("", !0),
876
- (se(), xe(Me(e.wrapperTag), {
877
- ref_key: "wrapperRef",
878
- ref: j,
879
- class: "virtual-scroll-wrapper",
880
- style: We(Ye.value)
881
- }, {
882
- default: Ce(() => [
883
- e.containerTag === "table" ? (se(), xe(Me(e.itemTag), {
884
- key: 0,
885
- class: "virtual-scroll-spacer",
886
- style: We(Be.value)
887
- }, {
888
- default: Ce(() => [...r[0] || (r[0] = [
889
- ct("td", { style: { padding: "0", border: "none", "block-size": "inherit" } }, null, -1)
890
- ])]),
891
- _: 1
892
- }, 8, ["style"])) : Ae("", !0),
893
- (se(!0), Ze(st, null, dt(ye(J), (c) => (se(), xe(Me(e.itemTag), {
894
- key: c.index,
895
- ref_for: !0,
896
- ref: (C) => B(C, c.index),
897
- "data-index": c.index,
898
- class: $e(["virtual-scroll-item", {
899
- "virtual-scroll--sticky": c.isStickyActive,
900
- "virtual-scroll--debug": Z.value
901
- }]),
902
- style: We(qe(c))
903
- }, {
904
- default: Ce(() => [
905
- Ve(i.$slots, "item", {
906
- item: c.item,
907
- index: c.index,
908
- columnRange: ye(ae),
909
- getColumnWidth: ye(ve),
910
- isSticky: c.isSticky,
911
- isStickyActive: c.isStickyActive
912
- }, void 0, !0),
913
- Z.value ? (se(), Ze("div", ht, " #" + Je(c.index) + " (" + Je(Math.round(c.offset.x)) + ", " + Je(Math.round(c.offset.y)) + ") ", 1)) : Ae("", !0)
914
- ]),
915
- _: 2
916
- }, 1032, ["data-index", "class", "style"]))), 128))
917
- ]),
918
- _: 3
919
- }, 8, ["style"])),
920
- e.loading && i.$slots.loading ? (se(), Ze("div", {
921
- key: 1,
922
- class: "virtual-scroll-loading",
923
- style: We(he.value)
924
- }, [
925
- Ve(i.$slots, "loading", {}, void 0, !0)
926
- ], 4)) : Ae("", !0),
927
- i.$slots.footer ? (se(), xe(Me(e.containerTag === "table" ? "tfoot" : "div"), {
928
- key: 2,
929
- ref_key: "footerRef",
930
- ref: N,
931
- class: $e(["virtual-scroll-footer", { "virtual-scroll--sticky": e.stickyFooter }])
932
- }, {
933
- default: Ce(() => [
934
- Ve(i.$slots, "footer", {}, void 0, !0)
935
- ]),
936
- _: 3
937
- }, 8, ["class"])) : Ae("", !0)
938
- ]),
939
- _: 3
940
- }, 40, ["class", "style", "onWheelPassive", "onPointerdownPassive", "onTouchstartPassive"]));
941
- }
942
- }), mt = (e, a) => {
943
- const g = e.__vccOpts || e;
944
- for (const [n, W] of a)
945
- g[n] = W;
946
- return g;
947
- }, St = /* @__PURE__ */ mt(gt, [["__scopeId", "data-v-654a1d54"]]);
948
- export {
949
- lt as DEFAULT_BUFFER,
950
- tt as DEFAULT_COLUMN_WIDTH,
951
- vt as DEFAULT_ITEM_SIZE,
952
- Qe as FenwickTree,
953
- St as VirtualScroll,
954
- we as getPaddingX,
955
- Se as getPaddingY,
956
- pe as isElement,
957
- et as isScrollToIndexOptions,
958
- _e as isScrollableElement,
959
- ft as useVirtualScroll
960
- };
961
- //# sourceMappingURL=index.js.map
501
+ var _hoisted_1 = {
502
+ key: 0,
503
+ class: "virtual-scroll-debug-info"
504
+ }, VirtualScroll_default = /* @__PURE__ */ ((e, t) => {
505
+ let n = e.__vccOpts || e;
506
+ for (let [e, r] of t) n[e] = r;
507
+ return n;
508
+ })(/* @__PURE__ */ defineComponent({
509
+ __name: "VirtualScroll",
510
+ props: {
511
+ items: {},
512
+ itemSize: {},
513
+ direction: { default: "vertical" },
514
+ bufferBefore: { default: 5 },
515
+ bufferAfter: { default: 5 },
516
+ container: {},
517
+ ssrRange: {},
518
+ columnCount: { default: 0 },
519
+ columnWidth: {},
520
+ containerTag: { default: "div" },
521
+ wrapperTag: { default: "div" },
522
+ itemTag: { default: "div" },
523
+ scrollPaddingStart: { default: 0 },
524
+ scrollPaddingEnd: { default: 0 },
525
+ stickyHeader: {
526
+ type: Boolean,
527
+ default: !1
528
+ },
529
+ stickyFooter: {
530
+ type: Boolean,
531
+ default: !1
532
+ },
533
+ gap: { default: 0 },
534
+ columnGap: { default: 0 },
535
+ stickyIndices: { default: () => [] },
536
+ loadDistance: { default: 50 },
537
+ loading: {
538
+ type: Boolean,
539
+ default: !1
540
+ },
541
+ restoreScrollOnPrepend: {
542
+ type: Boolean,
543
+ default: !1
544
+ },
545
+ initialScrollIndex: {},
546
+ initialScrollAlign: {},
547
+ defaultItemSize: {},
548
+ defaultColumnWidth: {},
549
+ debug: {
550
+ type: Boolean,
551
+ default: !1
552
+ }
553
+ },
554
+ emits: [
555
+ "scroll",
556
+ "load",
557
+ "visibleRangeChange"
558
+ ],
559
+ setup(o, { expose: s, emit: c }) {
560
+ let m = o, C = c, w = computed(() => m.debug), T = ref(null), E = ref(null), D = ref(null), O = ref(null), k = /* @__PURE__ */ new Map(), M = ref(0), N = ref(0), P = computed(() => {
561
+ let e = m.container === void 0 ? T.value : m.container;
562
+ return e === T.value || typeof window < "u" && (e === window || e === null);
563
+ }), { isHydrated: F, columnRange: I, renderedItems: L, scrollDetails: R, totalHeight: z, totalWidth: B, getColumnWidth: V, scrollToIndex: H, scrollToOffset: U, updateHostOffset: W, updateItemSizes: G, refresh: K, stopProgrammaticScroll: q } = useVirtualScroll(computed(() => {
564
+ let e = m.scrollPaddingStart, t = m.scrollPaddingEnd, n = typeof e == "object" ? e.x || 0 : m.direction === "horizontal" && e || 0, r = typeof e == "object" ? e.y || 0 : m.direction === "horizontal" ? 0 : e || 0, i = typeof t == "object" ? t.x || 0 : m.direction === "horizontal" && t || 0, a = typeof t == "object" ? t.y || 0 : m.direction === "horizontal" ? 0 : t || 0;
565
+ /* v8 ignore stop -- @preserve */
566
+ return {
567
+ items: m.items,
568
+ itemSize: m.itemSize,
569
+ direction: m.direction,
570
+ bufferBefore: m.bufferBefore,
571
+ bufferAfter: m.bufferAfter,
572
+ container: m.container === void 0 ? T.value : m.container,
573
+ hostElement: E.value,
574
+ ssrRange: m.ssrRange,
575
+ columnCount: m.columnCount,
576
+ columnWidth: m.columnWidth,
577
+ scrollPaddingStart: {
578
+ x: n,
579
+ y: r + (m.stickyHeader && P.value ? M.value : 0)
580
+ },
581
+ scrollPaddingEnd: {
582
+ x: i,
583
+ y: a + (m.stickyFooter && P.value ? N.value : 0)
584
+ },
585
+ gap: m.gap,
586
+ columnGap: m.columnGap,
587
+ stickyIndices: m.stickyIndices,
588
+ loadDistance: m.loadDistance,
589
+ loading: m.loading,
590
+ restoreScrollOnPrepend: m.restoreScrollOnPrepend,
591
+ initialScrollIndex: m.initialScrollIndex,
592
+ initialScrollAlign: m.initialScrollAlign,
593
+ defaultItemSize: m.defaultItemSize,
594
+ defaultColumnWidth: m.defaultColumnWidth,
595
+ debug: w.value
596
+ };
597
+ }));
598
+ watch(R, (e, t) => {
599
+ F.value && (C("scroll", e), (!t || e.range.start !== t.range.start || e.range.end !== t.range.end || e.columnRange.start !== t.columnRange.start || e.columnRange.end !== t.columnRange.end) && C("visibleRangeChange", {
600
+ start: e.range.start,
601
+ end: e.range.end,
602
+ colStart: e.columnRange.start,
603
+ colEnd: e.columnRange.end
604
+ }), !m.loading && (m.direction !== "horizontal" && e.totalSize.height - (e.scrollOffset.y + e.viewportSize.height) <= m.loadDistance && C("load", "vertical"), m.direction !== "vertical" && e.totalSize.width - (e.scrollOffset.x + e.viewportSize.width) <= m.loadDistance && C("load", "horizontal")));
605
+ }), watch(F, (e) => {
606
+ /* v8 ignore else -- @preserve */
607
+ e && C("visibleRangeChange", {
608
+ start: R.value.range.start,
609
+ end: R.value.range.end,
610
+ colStart: R.value.columnRange.start,
611
+ colEnd: R.value.columnRange.end
612
+ });
613
+ }, { once: !0 });
614
+ /* v8 ignore next 2 -- @preserve */
615
+ let J = typeof window > "u" ? null : new ResizeObserver(W), Y = typeof window > "u" ? null : new ResizeObserver((e) => {
616
+ let t = [];
617
+ for (let n of e) {
618
+ let e = n.target, r = Number(e.dataset.index);
619
+ if (e.dataset.colIndex !== void 0) t.push({
620
+ index: -1,
621
+ inlineSize: 0,
622
+ blockSize: 0,
623
+ element: e
624
+ });
625
+ else if (!Number.isNaN(r)) {
626
+ let i = n.contentRect.width, a = n.contentRect.height;
627
+ n.borderBoxSize && n.borderBoxSize.length > 0 ? (i = n.borderBoxSize[0].inlineSize, a = n.borderBoxSize[0].blockSize) : (i = e.offsetWidth, a = e.offsetHeight), t.push({
628
+ index: r,
629
+ inlineSize: i,
630
+ blockSize: a,
631
+ element: e
632
+ });
633
+ }
634
+ }
635
+ /* v8 ignore else -- @preserve */
636
+ t.length > 0 && G(t);
637
+ }), X = typeof window > "u" ? null : new ResizeObserver(() => {
638
+ M.value = D.value?.offsetHeight || 0, N.value = O.value?.offsetHeight || 0, W();
639
+ });
640
+ watch(D, (e, t) => {
641
+ t && X?.unobserve(t), e && X?.observe(e);
642
+ }, { immediate: !0 }), watch(O, (e, t) => {
643
+ t && X?.unobserve(t), e && X?.observe(e);
644
+ }, { immediate: !0 });
645
+ let Z = computed(() => L.value[0]?.index);
646
+ watch(Z, (e, t) => {
647
+ if (m.direction === "both") {
648
+ /* v8 ignore else -- @preserve */
649
+ if (t !== void 0) {
650
+ let e = k.get(t);
651
+ e && e.querySelectorAll("[data-col-index]").forEach((e) => Y?.unobserve(e));
652
+ }
653
+ if (e !== void 0) {
654
+ let t = k.get(e);
655
+ /* v8 ignore else -- @preserve */
656
+ t && t.querySelectorAll("[data-col-index]").forEach((e) => Y?.observe(e));
657
+ }
658
+ }
659
+ }, { flush: "post" }), onMounted(() => {
660
+ /* v8 ignore else -- @preserve */
661
+ T.value && J?.observe(T.value);
662
+ for (let e of k.values()) Y?.observe(e);
663
+ /* v8 ignore else -- @preserve */
664
+ if (Z.value !== void 0) {
665
+ let e = k.get(Z.value);
666
+ /* v8 ignore else -- @preserve */
667
+ e && e.querySelectorAll("[data-col-index]").forEach((e) => Y?.observe(e));
668
+ }
669
+ }), watch([T, E], ([e], [t]) => {
670
+ t && J?.unobserve(t), e && J?.observe(e);
671
+ });
672
+ function ne(e, t) {
673
+ if (e) k.set(t, e), Y?.observe(e);
674
+ else {
675
+ let e = k.get(t);
676
+ /* v8 ignore else -- @preserve */
677
+ e && (Y?.unobserve(e), k.delete(t));
678
+ }
679
+ }
680
+ function re(e) {
681
+ q();
682
+ let { viewportSize: t, scrollOffset: n } = R.value, r = m.direction !== "vertical", i = m.direction !== "horizontal";
683
+ if (e.key === "Home") {
684
+ e.preventDefault(), H(0, 0, "start");
685
+ return;
686
+ }
687
+ if (e.key === "End") {
688
+ e.preventDefault();
689
+ let t = m.items.length - 1, n = (m.columnCount || 0) > 0 ? m.columnCount - 1 : 0;
690
+ r ? i ? H(t, n, "end") : H(0, t, "end") : H(t, 0, "end");
691
+ return;
692
+ }
693
+ if (e.key === "ArrowUp") {
694
+ e.preventDefault(), U(null, n.y - 40);
695
+ return;
696
+ }
697
+ if (e.key === "ArrowDown") {
698
+ e.preventDefault(), U(null, n.y + 40);
699
+ return;
700
+ }
701
+ if (e.key === "ArrowLeft") {
702
+ e.preventDefault(), U(n.x - 40, null);
703
+ return;
704
+ }
705
+ if (e.key === "ArrowRight") {
706
+ e.preventDefault(), U(n.x + 40, null);
707
+ return;
708
+ }
709
+ if (e.key === "PageUp") {
710
+ e.preventDefault(), U(!i && r ? n.x - t.width : null, i ? n.y - t.height : null);
711
+ return;
712
+ }
713
+ e.key === "PageDown" && (e.preventDefault(), U(!i && r ? n.x + t.width : null, i ? n.y + t.height : null));
714
+ }
715
+ onUnmounted(() => {
716
+ J?.disconnect(), Y?.disconnect(), X?.disconnect();
717
+ });
718
+ let Q = computed(() => {
719
+ let e = m.container;
720
+ return e === null || typeof window < "u" && e === window ? !0 : e && typeof e == "object" && "tagName" in e ? e.tagName === "BODY" : !1;
721
+ }), ie = computed(() => Q.value ? { ...m.direction === "vertical" ? {} : { whiteSpace: "nowrap" } } : m.containerTag === "table" ? { minInlineSize: m.direction === "vertical" ? "100%" : "auto" } : { ...m.direction === "vertical" ? {} : { whiteSpace: "nowrap" } }), ae = computed(() => ({
722
+ inlineSize: m.direction === "vertical" ? "100%" : `${B.value}px`,
723
+ blockSize: m.direction === "horizontal" ? "100%" : `${z.value}px`
724
+ })), oe = computed(() => {
725
+ let e = m.direction === "horizontal";
726
+ return {
727
+ display: e ? "inline-block" : "block",
728
+ ...e ? {
729
+ blockSize: "100%",
730
+ verticalAlign: "top"
731
+ } : { inlineSize: "100%" }
732
+ };
733
+ }), $ = computed(() => ({
734
+ inlineSize: m.direction === "vertical" ? "1px" : `${B.value}px`,
735
+ blockSize: m.direction === "horizontal" ? "1px" : `${z.value}px`
736
+ }));
737
+ function se(e) {
738
+ let t = m.direction === "vertical", n = m.direction === "horizontal", r = m.direction === "both", i = m.itemSize === void 0 || m.itemSize === null || m.itemSize === 0, a = { blockSize: n ? "100%" : i ? "auto" : `${e.size.height}px` };
739
+ return t && m.containerTag === "table" ? a.minInlineSize = "100%" : a.inlineSize = t ? "100%" : i ? "auto" : `${e.size.width}px`, i && (t || (a.minInlineSize = `${e.size.width}px`), n || (a.minBlockSize = `${e.size.height}px`)), F.value && (e.isStickyActive ? ((t || r) && (a.insetBlockStart = `${getPaddingY(m.scrollPaddingStart, m.direction)}px`), (n || r) && (a.insetInlineStart = `${getPaddingX(m.scrollPaddingStart, m.direction)}px`), a.transform = `translate(${e.stickyOffset.x}px, ${e.stickyOffset.y}px)`) : a.transform = `translate(${e.offset.x}px, ${e.offset.y}px)`), a;
740
+ }
741
+ return s({
742
+ scrollDetails: R,
743
+ columnRange: I,
744
+ getColumnWidth: V,
745
+ scrollToIndex: H,
746
+ scrollToOffset: U,
747
+ refresh: K,
748
+ stopProgrammaticScroll: q
749
+ }), (t, s) => (openBlock(), createBlock(resolveDynamicComponent(o.containerTag), {
750
+ ref_key: "hostRef",
751
+ ref: T,
752
+ class: normalizeClass(["virtual-scroll-container", [`virtual-scroll--${o.direction}`, {
753
+ "virtual-scroll--hydrated": unref(F),
754
+ "virtual-scroll--window": Q.value,
755
+ "virtual-scroll--table": o.containerTag === "table"
756
+ }]]),
757
+ style: normalizeStyle(ie.value),
758
+ tabindex: "0",
759
+ onKeydown: re,
760
+ onWheelPassive: unref(q),
761
+ onPointerdownPassive: unref(q),
762
+ onTouchstartPassive: unref(q)
763
+ }, {
764
+ default: withCtx(() => [
765
+ t.$slots.header ? (openBlock(), createBlock(resolveDynamicComponent(o.containerTag === "table" ? "thead" : "div"), {
766
+ key: 0,
767
+ ref_key: "headerRef",
768
+ ref: D,
769
+ class: normalizeClass(["virtual-scroll-header", { "virtual-scroll--sticky": o.stickyHeader }])
770
+ }, {
771
+ default: withCtx(() => [renderSlot(t.$slots, "header", {}, void 0, !0)]),
772
+ _: 3
773
+ }, 8, ["class"])) : createCommentVNode("", !0),
774
+ (openBlock(), createBlock(resolveDynamicComponent(o.wrapperTag), {
775
+ ref_key: "wrapperRef",
776
+ ref: E,
777
+ class: "virtual-scroll-wrapper",
778
+ style: normalizeStyle(ae.value)
779
+ }, {
780
+ default: withCtx(() => [o.containerTag === "table" ? (openBlock(), createBlock(resolveDynamicComponent(o.itemTag), {
781
+ key: 0,
782
+ class: "virtual-scroll-spacer",
783
+ style: normalizeStyle($.value)
784
+ }, {
785
+ default: withCtx(() => [...s[0] ||= [createElementVNode("td", { style: {
786
+ padding: "0",
787
+ border: "none",
788
+ "block-size": "inherit"
789
+ } }, null, -1)]]),
790
+ _: 1
791
+ }, 8, ["style"])) : createCommentVNode("", !0), (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(L), (e) => (openBlock(), createBlock(resolveDynamicComponent(o.itemTag), {
792
+ key: e.index,
793
+ ref_for: !0,
794
+ ref: (t) => ne(t, e.index),
795
+ "data-index": e.index,
796
+ class: normalizeClass(["virtual-scroll-item", {
797
+ "virtual-scroll--sticky": e.isStickyActive,
798
+ "virtual-scroll--debug": w.value
799
+ }]),
800
+ style: normalizeStyle(se(e))
801
+ }, {
802
+ default: withCtx(() => [renderSlot(t.$slots, "item", {
803
+ item: e.item,
804
+ index: e.index,
805
+ columnRange: unref(I),
806
+ getColumnWidth: unref(V),
807
+ isSticky: e.isSticky,
808
+ isStickyActive: e.isStickyActive
809
+ }, void 0, !0), w.value ? (openBlock(), createElementBlock("div", _hoisted_1, " #" + toDisplayString(e.index) + " (" + toDisplayString(Math.round(e.offset.x)) + ", " + toDisplayString(Math.round(e.offset.y)) + ") ", 1)) : createCommentVNode("", !0)]),
810
+ _: 2
811
+ }, 1032, [
812
+ "data-index",
813
+ "class",
814
+ "style"
815
+ ]))), 128))]),
816
+ _: 3
817
+ }, 8, ["style"])),
818
+ o.loading && t.$slots.loading ? (openBlock(), createElementBlock("div", {
819
+ key: 1,
820
+ class: "virtual-scroll-loading",
821
+ style: normalizeStyle(oe.value)
822
+ }, [renderSlot(t.$slots, "loading", {}, void 0, !0)], 4)) : createCommentVNode("", !0),
823
+ t.$slots.footer ? (openBlock(), createBlock(resolveDynamicComponent(o.containerTag === "table" ? "tfoot" : "div"), {
824
+ key: 2,
825
+ ref_key: "footerRef",
826
+ ref: O,
827
+ class: normalizeClass(["virtual-scroll-footer", { "virtual-scroll--sticky": o.stickyFooter }])
828
+ }, {
829
+ default: withCtx(() => [renderSlot(t.$slots, "footer", {}, void 0, !0)]),
830
+ _: 3
831
+ }, 8, ["class"])) : createCommentVNode("", !0)
832
+ ]),
833
+ _: 3
834
+ }, 40, [
835
+ "class",
836
+ "style",
837
+ "onWheelPassive",
838
+ "onPointerdownPassive",
839
+ "onTouchstartPassive"
840
+ ]));
841
+ }
842
+ }), [["__scopeId", "data-v-105a0cd5"]]);
843
+ export { DEFAULT_BUFFER, DEFAULT_COLUMN_WIDTH, DEFAULT_ITEM_SIZE, FenwickTree, VirtualScroll_default as VirtualScroll, getPaddingX, getPaddingY, isElement, isScrollToIndexOptions, isScrollableElement, useVirtualScroll };
844
+
845
+ //# sourceMappingURL=index.js.map