@pdanpdan/virtual-scroll 0.2.1 → 0.4.0

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.mjs ADDED
@@ -0,0 +1,1125 @@
1
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, 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 isWindow(e) {
60
+ return e === null || typeof window < "u" && e === window;
61
+ }
62
+ function isBody(e) {
63
+ return !!e && typeof e == "object" && "tagName" in e && e.tagName === "BODY";
64
+ }
65
+ function isWindowLike(e) {
66
+ return isWindow(e) || isBody(e);
67
+ }
68
+ function isElement(e) {
69
+ return !!e && "getBoundingClientRect" in e;
70
+ }
71
+ function isScrollableElement(e) {
72
+ return !!e && "scrollLeft" in e;
73
+ }
74
+ function isScrollToIndexOptions(e) {
75
+ return typeof e == "object" && !!e && ("align" in e || "behavior" in e || "isCorrection" in e);
76
+ }
77
+ function getPaddingX(e, t) {
78
+ return typeof e == "object" && e ? e.x || 0 : (t === "horizontal" || t === "both") && e || 0;
79
+ }
80
+ function getPaddingY(e, t) {
81
+ return typeof e == "object" && e ? e.y || 0 : (t === "vertical" || t === "both") && e || 0;
82
+ }
83
+ function calculateScrollTarget(e) {
84
+ let { rowIndex: t, colIndex: n, options: r, itemsLength: i, columnCount: a, direction: o, usableWidth: s, usableHeight: c, totalWidth: l, totalHeight: u, gap: d, columnGap: f, fixedSize: p, fixedWidth: m, relativeScrollX: h, relativeScrollY: g, getItemSizeY: _, getItemSizeX: v, getItemQueryY: y, getItemQueryX: b, getColumnSize: x, getColumnQuery: S, stickyIndices: C } = e, w;
85
+ w = isScrollToIndexOptions(r) ? r.align : r;
86
+ let T = (typeof w == "object" ? w.x : w) || "auto", E = (typeof w == "object" ? w.y : w) || "auto", D = o === "vertical" || o === "both", O = o === "horizontal" || o === "both", k = h, A = g, j = 0, M = 0, N = T === "auto" ? "auto" : T, P = E === "auto" ? "auto" : E;
87
+ if (t != null) {
88
+ let e = 0;
89
+ if (D && C && C.length > 0) {
90
+ let n, r = 0, i = C.length - 1;
91
+ for (; r <= i;) {
92
+ let e = r + i >>> 1;
93
+ C[e] < t ? (n = C[e], r = e + 1) : i = e - 1;
94
+ }
95
+ n !== void 0 && (e = p === null ? _(n) - d : p);
96
+ }
97
+ let n = 0;
98
+ if (t >= i ? (n = u, M = 0) : (n = p === null ? y(t) : t * (p + d), M = p === null ? _(t) - d : p), E === "start") A = n - e;
99
+ else if (E === "center") A = n - (c - M) / 2;
100
+ else if (E === "end") A = n - (c - M);
101
+ else if (!(M <= c - e ? n >= g + e - .5 && n + M <= g + c + .5 : n <= g + e + .5 && n + M >= g + c - .5)) {
102
+ let t = n - e, r = n - (c - M);
103
+ M <= c - e ? n < g + e ? (A = t, P = "start") : (A = r, P = "end") : Math.abs(t - g) < Math.abs(r - g) ? (A = t, P = "start") : (A = r, P = "end");
104
+ }
105
+ }
106
+ if (n != null) {
107
+ let e = 0;
108
+ if (O && C && C.length > 0 && (o === "horizontal" || o === "both")) {
109
+ let t, r = 0, i = C.length - 1;
110
+ for (; r <= i;) {
111
+ let e = r + i >>> 1;
112
+ C[e] < n ? (t = C[e], r = e + 1) : i = e - 1;
113
+ }
114
+ t !== void 0 && (e = o === "horizontal" ? p === null ? v(t) - f : p : m === null ? x(t) - f : m);
115
+ }
116
+ let t = 0;
117
+ if (n >= a && a > 0 ? (t = l, j = 0) : o === "horizontal" ? (t = p === null ? b(n) : n * (p + f), j = p === null ? v(n) - f : p) : (t = S(n), j = x(n) - f), T === "start") k = t - e;
118
+ else if (T === "center") k = t - (s - j) / 2;
119
+ else if (T === "end") k = t - (s - j);
120
+ else if (!(j <= s - e ? t >= h + e - .5 && t + j <= h + s + .5 : t <= h + e + .5 && t + j >= h + s - .5)) {
121
+ let n = t - e, r = t - (s - j);
122
+ j <= s - e ? t < h + e ? (k = n, N = "start") : (k = r, N = "end") : Math.abs(n - h) < Math.abs(r - h) ? (k = n, N = "start") : (k = r, N = "end");
123
+ }
124
+ }
125
+ return k = Math.max(0, Math.min(k, Math.max(0, l - s))), A = Math.max(0, Math.min(A, Math.max(0, u - c))), {
126
+ targetX: k,
127
+ targetY: A,
128
+ itemWidth: j,
129
+ itemHeight: M,
130
+ effectiveAlignX: N,
131
+ effectiveAlignY: P
132
+ };
133
+ }
134
+ function calculateRange(e) {
135
+ let { direction: t, relativeScrollX: n, relativeScrollY: r, usableWidth: i, usableHeight: a, itemsLength: o, bufferBefore: s, bufferAfter: c, gap: l, columnGap: u, fixedSize: d, findLowerBoundY: f, findLowerBoundX: p, queryY: m, queryX: h } = e, g = t === "vertical" || t === "both", _ = 0, v = o;
136
+ if (g) if (d !== null) _ = Math.floor(r / (d + l)), v = Math.ceil((r + a) / (d + l));
137
+ else {
138
+ _ = f(r);
139
+ let e = r + a;
140
+ v = f(e), v < o && m(v) < e && v++;
141
+ }
142
+ else if (d !== null) _ = Math.floor(n / (d + u)), v = Math.ceil((n + i) / (d + u));
143
+ else {
144
+ _ = p(n);
145
+ let e = n + i;
146
+ v = p(e), v < o && h(v) < e && v++;
147
+ }
148
+ return {
149
+ start: Math.max(0, _ - s),
150
+ end: Math.min(o, v + c)
151
+ };
152
+ }
153
+ function calculateColumnRange(e) {
154
+ let { columnCount: t, relativeScrollX: n, usableWidth: r, colBuffer: i, fixedWidth: a, columnGap: o, findLowerBound: s, query: c, totalColsQuery: l } = e;
155
+ if (!t) return {
156
+ start: 0,
157
+ end: 0,
158
+ padStart: 0,
159
+ padEnd: 0
160
+ };
161
+ let u = 0, d = t;
162
+ if (a !== null) u = Math.floor(n / (a + o)), d = Math.ceil((n + r) / (a + o));
163
+ else {
164
+ u = s(n);
165
+ let e = c(u), i = u;
166
+ for (; i < t && e < n + r;) e = c(++i);
167
+ d = i;
168
+ }
169
+ let f = Math.max(0, u - i), p = Math.min(t, d + i), m = a === null ? c(f) : f * (a + o), h = a === null ? Math.max(0, l() - o) : t * (a + o) - o, g = a === null ? c(p) - (p >= t ? o : 0) : p * (a + o) - (p >= t ? o : 0);
170
+ return {
171
+ start: f,
172
+ end: p,
173
+ padStart: m,
174
+ padEnd: Math.max(0, h - g)
175
+ };
176
+ }
177
+ function calculateStickyItem(e) {
178
+ let { index: t, isSticky: n, direction: r, relativeScrollX: i, relativeScrollY: a, originalX: o, originalY: s, width: c, height: l, stickyIndices: u, fixedSize: d, fixedWidth: f, gap: p, columnGap: m, getItemQueryY: h, getItemQueryX: g } = e, _ = !1, v = {
179
+ x: 0,
180
+ y: 0
181
+ };
182
+ if (!n) return {
183
+ isStickyActive: _,
184
+ stickyOffset: v
185
+ };
186
+ if ((r === "vertical" || r === "both") && a > s) {
187
+ let e, n = 0, r = u.length - 1;
188
+ for (; n <= r;) {
189
+ let i = n + r >>> 1;
190
+ u[i] > t ? (e = u[i], r = i - 1) : n = i + 1;
191
+ }
192
+ if (e !== void 0) {
193
+ let t = d === null ? h(e) : e * (d + p);
194
+ a >= t ? _ = !1 : (_ = !0, v.y = Math.max(0, Math.min(l, t - a)) - l);
195
+ } else _ = !0;
196
+ }
197
+ if ((r === "horizontal" || r === "both" && !_) && i > o) {
198
+ let e, n = 0, a = u.length - 1;
199
+ for (; n <= a;) {
200
+ let r = n + a >>> 1;
201
+ u[r] > t ? (e = u[r], a = r - 1) : n = r + 1;
202
+ }
203
+ if (e !== void 0) {
204
+ let t = r === "horizontal" ? d === null ? g(e) : e * (d + m) : f === null ? g(e) : e * (f + m);
205
+ i >= t ? _ = !1 : (_ = !0, v.x = Math.max(0, Math.min(c, t - i)) - c);
206
+ } else _ = !0;
207
+ }
208
+ return {
209
+ isStickyActive: _,
210
+ stickyOffset: v
211
+ };
212
+ }
213
+ function calculateItemPosition(e) {
214
+ let { index: t, direction: n, fixedSize: r, gap: i, columnGap: a, usableWidth: o, usableHeight: s, totalWidth: c, queryY: l, queryX: u, getSizeY: d, getSizeX: f } = e, p = 0, m = 0, h = 0, g = 0;
215
+ return n === "horizontal" ? (p = r === null ? u(t) : t * (r + a), h = r === null ? f(t) - a : r, g = s) : (m = (n === "vertical" || n === "both") && r !== null ? t * (r + i) : l(t), g = r === null ? d(t) - i : r, h = n === "both" ? c : o), {
216
+ height: g,
217
+ width: h,
218
+ x: p,
219
+ y: m
220
+ };
221
+ }
222
+ function calculateItemStyle(e) {
223
+ let { item: t, direction: n, itemSize: r, containerTag: i, paddingStartX: a, paddingStartY: o, isHydrated: s } = e, c = n === "vertical", l = n === "horizontal", u = n === "both", d = r == null || r === 0, f = { blockSize: l ? "100%" : d ? "auto" : `${t.size.height}px` };
224
+ return c && i === "table" ? f.minInlineSize = "100%" : f.inlineSize = c ? "100%" : d ? "auto" : `${t.size.width}px`, d && (c || (f.minInlineSize = "1px"), l || (f.minBlockSize = "1px")), s && (t.isStickyActive ? ((c || u) && (f.insetBlockStart = `${o}px`), (l || u) && (f.insetInlineStart = `${a}px`), f.transform = `translate(${t.stickyOffset.x}px, ${t.stickyOffset.y}px)`) : f.transform = `translate(${t.offset.x}px, ${t.offset.y}px)`), f;
225
+ }
226
+ function calculateTotalSize(e) {
227
+ let { direction: t, itemsLength: n, columnCount: r, fixedSize: i, fixedWidth: a, gap: o, columnGap: s, usableWidth: c, usableHeight: l, queryY: u, queryX: d, queryColumn: f } = e, p = 0, m = 0;
228
+ return t === "both" ? (r > 0 && (p = a === null ? Math.max(0, f(r) - s) : r * (a + s) - s), m = i === null ? Math.max(0, u(n) - (n > 0 ? o : 0)) : Math.max(0, n * (i + o) - (n > 0 ? o : 0)), p = Math.max(p, c), m = Math.max(m, l)) : t === "horizontal" ? (p = i === null ? Math.max(0, d(n) - (n > 0 ? s : 0)) : Math.max(0, n * (i + s) - (n > 0 ? s : 0)), m = l) : (p = c, m = i === null ? Math.max(0, u(n) - (n > 0 ? o : 0)) : Math.max(0, n * (i + o) - (n > 0 ? o : 0))), {
229
+ width: p,
230
+ height: m
231
+ };
232
+ }
233
+ const DEFAULT_ITEM_SIZE = 40, DEFAULT_COLUMN_WIDTH = 100, DEFAULT_BUFFER = 5;
234
+ function useVirtualScroll(e) {
235
+ 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({
236
+ x: 0,
237
+ y: 0
238
+ }), _, v = ref(!1), y = new FenwickTree(e.value.items?.length || 0), b = new FenwickTree(e.value.items?.length || 0), x = new FenwickTree(e.value.columnCount || 0), C = ref(0), T = new Uint8Array(), E = new Uint8Array(), D = new Uint8Array(), I = ref(null), re = ref(!1), L = [], R = computed(() => e.value.itemSize === void 0 || e.value.itemSize === null || e.value.itemSize === 0), ie = computed(() => e.value.columnWidth === void 0 || e.value.columnWidth === null || e.value.columnWidth === 0), z = computed(() => typeof e.value.itemSize == "number" && e.value.itemSize > 0 ? e.value.itemSize : null), B = computed(() => typeof e.value.columnWidth == "number" && e.value.columnWidth > 0 ? e.value.columnWidth : null), V = computed(() => e.value.defaultItemSize || z.value || 40), H = computed(() => [...e.value.stickyIndices || []].sort((e, t) => e - t)), U = computed(() => new Set(H.value)), W = computed(() => getPaddingX(e.value.scrollPaddingStart, e.value.direction)), ae = computed(() => getPaddingX(e.value.scrollPaddingEnd, e.value.direction)), oe = computed(() => getPaddingY(e.value.scrollPaddingStart, e.value.direction)), G = computed(() => getPaddingY(e.value.scrollPaddingEnd, e.value.direction)), K = computed(() => {
239
+ let t = e.value.direction === "horizontal" || e.value.direction === "both";
240
+ return u.value - (t ? W.value + ae.value : 0);
241
+ }), q = computed(() => {
242
+ let t = e.value.direction === "vertical" || e.value.direction === "both";
243
+ return p.value - (t ? oe.value + G.value : 0);
244
+ }), J = computed(() => {
245
+ if (C.value, !a.value && e.value.ssrRange && !l.value) {
246
+ let { start: t = 0, end: n = 0, colStart: r = 0, colEnd: i = 0 } = e.value.ssrRange, a = e.value.columnCount || 0;
247
+ if (e.value.direction === "both") {
248
+ if (a <= 0) return 0;
249
+ let t = i || a, n = x.query(t) - x.query(r);
250
+ return Math.max(0, n - (t > r && e.value.columnGap || 0));
251
+ }
252
+ if (e.value.direction === "horizontal") {
253
+ if (z.value !== null) {
254
+ let r = n - t;
255
+ return Math.max(0, r * (z.value + (e.value.columnGap || 0)) - (r > 0 && e.value.columnGap || 0));
256
+ }
257
+ let r = y.query(n) - y.query(t);
258
+ return Math.max(0, r - (n > t && e.value.columnGap || 0));
259
+ }
260
+ }
261
+ return calculateTotalSize({
262
+ direction: e.value.direction || "vertical",
263
+ itemsLength: e.value.items.length,
264
+ columnCount: e.value.columnCount || 0,
265
+ fixedSize: z.value,
266
+ fixedWidth: B.value,
267
+ gap: e.value.gap || 0,
268
+ columnGap: e.value.columnGap || 0,
269
+ usableWidth: K.value,
270
+ usableHeight: q.value,
271
+ queryY: (e) => b.query(e),
272
+ queryX: (e) => y.query(e),
273
+ queryColumn: (e) => x.query(e)
274
+ }).width;
275
+ }), Y = computed(() => {
276
+ if (C.value, !a.value && e.value.ssrRange && !l.value) {
277
+ let { start: t, end: n } = e.value.ssrRange;
278
+ if (e.value.direction === "vertical" || e.value.direction === "both") {
279
+ if (z.value !== null) {
280
+ let r = n - t;
281
+ return Math.max(0, r * (z.value + (e.value.gap || 0)) - (r > 0 && e.value.gap || 0));
282
+ }
283
+ let r = b.query(n) - b.query(t);
284
+ return Math.max(0, r - (n > t && e.value.gap || 0));
285
+ }
286
+ }
287
+ return calculateTotalSize({
288
+ direction: e.value.direction || "vertical",
289
+ itemsLength: e.value.items.length,
290
+ columnCount: e.value.columnCount || 0,
291
+ fixedSize: z.value,
292
+ fixedWidth: B.value,
293
+ gap: e.value.gap || 0,
294
+ columnGap: e.value.columnGap || 0,
295
+ usableWidth: K.value,
296
+ usableHeight: q.value,
297
+ queryY: (e) => b.query(e),
298
+ queryX: (e) => y.query(e),
299
+ queryColumn: (e) => x.query(e)
300
+ }).height;
301
+ }), X = computed(() => {
302
+ let t = e.value.direction === "horizontal" || e.value.direction === "both" ? getPaddingX(e.value.scrollPaddingStart, e.value.direction) : 0;
303
+ return Math.max(0, n.value + t - g.x);
304
+ }), Z = computed(() => {
305
+ let t = e.value.direction === "vertical" || e.value.direction === "both" ? getPaddingY(e.value.scrollPaddingStart, e.value.direction) : 0;
306
+ return Math.max(0, r.value + t - g.y);
307
+ }), se = (t) => {
308
+ C.value;
309
+ let n = e.value.columnWidth;
310
+ if (typeof n == "number" && n > 0) return n;
311
+ if (Array.isArray(n) && n.length > 0) {
312
+ let r = n[t % n.length];
313
+ return r != null && r > 0 ? r : e.value.defaultColumnWidth || 100;
314
+ }
315
+ return typeof n == "function" ? n(t) : x.get(t) || e.value.defaultColumnWidth || 100;
316
+ }, ce = (t, i, a) => {
317
+ let o = typeof a == "object" && a && "isCorrection" in a ? a.isCorrection : !1, s = e.value.container || window, c = e.value.direction === "vertical" || e.value.direction === "both", l = e.value.direction === "horizontal" || e.value.direction === "both", { targetX: u, targetY: d, effectiveAlignX: f, effectiveAlignY: p } = calculateScrollTarget({
318
+ rowIndex: t,
319
+ colIndex: i,
320
+ options: a,
321
+ itemsLength: e.value.items.length,
322
+ columnCount: e.value.columnCount || 0,
323
+ direction: e.value.direction || "vertical",
324
+ usableWidth: K.value,
325
+ usableHeight: q.value,
326
+ totalWidth: J.value,
327
+ totalHeight: Y.value,
328
+ gap: e.value.gap || 0,
329
+ columnGap: e.value.columnGap || 0,
330
+ fixedSize: z.value,
331
+ fixedWidth: B.value,
332
+ relativeScrollX: X.value,
333
+ relativeScrollY: Z.value,
334
+ getItemSizeY: (e) => b.get(e),
335
+ getItemSizeX: (e) => y.get(e),
336
+ getItemQueryY: (e) => b.query(e),
337
+ getItemQueryX: (e) => y.query(e),
338
+ getColumnSize: (e) => x.get(e),
339
+ getColumnQuery: (e) => x.query(e),
340
+ stickyIndices: H.value
341
+ });
342
+ if (!o) {
343
+ let e = isScrollToIndexOptions(a) ? a.behavior : void 0;
344
+ I.value = {
345
+ rowIndex: t,
346
+ colIndex: i,
347
+ options: {
348
+ align: {
349
+ x: f,
350
+ y: p
351
+ },
352
+ ...e == null ? {} : { behavior: e }
353
+ }
354
+ };
355
+ }
356
+ let m = u + g.x - (l ? W.value : 0), h = d + g.y - (c ? oe.value : 0), _;
357
+ isScrollToIndexOptions(a) && (_ = a.behavior);
358
+ let S = o ? "auto" : _ || "smooth";
359
+ if (v.value = !0, typeof window < "u" && s === window) window.scrollTo({
360
+ left: i == null ? void 0 : Math.max(0, m),
361
+ top: t == null ? void 0 : Math.max(0, h),
362
+ behavior: S
363
+ });
364
+ else if (isScrollableElement(s)) {
365
+ let e = { behavior: S };
366
+ i != null && (e.left = Math.max(0, m)), t != null && (e.top = Math.max(0, h)), typeof s.scrollTo == "function" ? s.scrollTo(e) : (e.left !== void 0 && (s.scrollLeft = e.left), e.top !== void 0 && (s.scrollTop = e.top));
367
+ }
368
+ (S === "auto" || S === void 0) && (i != null && (n.value = Math.max(0, m)), t != null && (r.value = Math.max(0, h)));
369
+ }, le = (t, i, a) => {
370
+ let o = e.value.container || window;
371
+ v.value = !0;
372
+ let s = e.value.direction === "vertical" || e.value.direction === "both", c = e.value.direction === "horizontal" || e.value.direction === "both", l = t == null ? null : c ? Math.max(0, Math.min(t, Math.max(0, J.value - K.value))) : Math.max(0, t), u = i == null ? null : s ? Math.max(0, Math.min(i, Math.max(0, Y.value - q.value))) : Math.max(0, i), d = typeof window < "u" && o === window ? window.scrollX : o.scrollLeft, f = typeof window < "u" && o === window ? window.scrollY : o.scrollTop, p = l === null ? d : l + g.x - (c ? W.value : 0), m = u === null ? f : u + g.y - (s ? oe.value : 0);
373
+ if (typeof window < "u" && o === window) window.scrollTo({
374
+ left: t == null ? void 0 : p,
375
+ top: i == null ? void 0 : m,
376
+ behavior: a?.behavior || "auto"
377
+ });
378
+ else if (isScrollableElement(o)) {
379
+ let e = { behavior: a?.behavior || "auto" };
380
+ t != null && (e.left = p), i != null && (e.top = m), typeof o.scrollTo == "function" ? o.scrollTo(e) : (e.left !== void 0 && (o.scrollLeft = e.left), e.top !== void 0 && (o.scrollTop = e.top));
381
+ }
382
+ (a?.behavior === "auto" || a?.behavior === void 0) && (t != null && (n.value = p), i != null && (r.value = m));
383
+ }, ue = () => {
384
+ let t = e.value.items, n = t.length, r = e.value.columnCount || 0;
385
+ if (y.resize(n), b.resize(n), x.resize(r), E.length !== n) {
386
+ let e = new Uint8Array(n);
387
+ e.set(E.subarray(0, Math.min(n, E.length))), E = e;
388
+ }
389
+ if (D.length !== n) {
390
+ let e = new Uint8Array(n);
391
+ e.set(D.subarray(0, Math.min(n, D.length))), D = e;
392
+ }
393
+ if (T.length !== r) {
394
+ let e = new Uint8Array(r);
395
+ e.set(T.subarray(0, Math.min(r, T.length))), T = e;
396
+ }
397
+ let i = 0;
398
+ if (e.value.restoreScrollOnPrepend && L.length > 0 && n > L.length) {
399
+ let e = L[0];
400
+ if (e !== void 0) {
401
+ for (let r = 1; r <= n - L.length; r++) if (t[r] === e) {
402
+ i = r;
403
+ break;
404
+ }
405
+ }
406
+ }
407
+ if (i > 0) {
408
+ y.shift(i), b.shift(i), I.value && I.value.rowIndex !== null && I.value.rowIndex !== void 0 && (I.value.rowIndex += i);
409
+ let r = new Uint8Array(n), a = new Uint8Array(n);
410
+ r.set(E.subarray(0, Math.min(n - i, E.length)), i), a.set(D.subarray(0, Math.min(n - i, D.length)), i), E = r, D = a;
411
+ let o = e.value.gap || 0, s = e.value.columnGap || 0, l = 0, u = 0;
412
+ for (let n = 0; n < i; n++) {
413
+ let r = typeof e.value.itemSize == "function" ? e.value.itemSize(t[n], n) : V.value;
414
+ e.value.direction === "horizontal" ? l += r + s : u += r + o;
415
+ }
416
+ (l > 0 || u > 0) && nextTick(() => {
417
+ le(l > 0 ? X.value + l : null, u > 0 ? Z.value + u : null, { behavior: "auto" });
418
+ });
419
+ }
420
+ if (r > 0) {
421
+ let t = e.value.columnGap || 0, n = !1, i = e.value.columnWidth;
422
+ for (let a = 0; a < r; a++) {
423
+ let r = x.get(a), o = T[a] === 1;
424
+ if (!ie.value || !o && r === 0) {
425
+ let o = 0;
426
+ o = typeof i == "number" && i > 0 ? i : Array.isArray(i) && i.length > 0 ? i[a % i.length] || e.value.defaultColumnWidth || 100 : typeof i == "function" ? i(a) : e.value.defaultColumnWidth || 100;
427
+ let s = o + t;
428
+ Math.abs(r - s) > .5 ? (x.set(a, s), T[a] = ie.value ? 0 : 1, n = !0) : ie.value || (T[a] = 1);
429
+ }
430
+ }
431
+ n && x.rebuild();
432
+ }
433
+ let a = e.value.gap || 0, o = e.value.columnGap || 0, s = !1;
434
+ for (let t = 0; t < n; t++) {
435
+ let n = e.value.items[t], r = y.get(t), i = b.get(t), c = e.value.direction === "vertical", l = e.value.direction === "horizontal", u = e.value.direction === "both", d = E[t] === 1, f = D[t] === 1;
436
+ if (l) {
437
+ if (!R.value || !d && r === 0) {
438
+ let i = (typeof e.value.itemSize == "function" ? e.value.itemSize(n, t) : V.value) + o;
439
+ Math.abs(r - i) > .5 ? (y.set(t, i), E[t] = R.value ? 0 : 1, s = !0) : R.value || (E[t] = 1);
440
+ }
441
+ } else r !== 0 && (y.set(t, 0), E[t] = 0, s = !0);
442
+ if (c || u) {
443
+ if (!R.value || !f && i === 0) {
444
+ let r = (typeof e.value.itemSize == "function" ? e.value.itemSize(n, t) : V.value) + a;
445
+ Math.abs(i - r) > .5 ? (b.set(t, r), D[t] = R.value ? 0 : 1, s = !0) : R.value || (D[t] = 1);
446
+ }
447
+ } else i !== 0 && (b.set(t, 0), D[t] = 0, s = !0);
448
+ }
449
+ s && (y.rebuild(), b.rebuild()), L = [...t], re.value = !0, C.value++;
450
+ }, Q = () => {
451
+ if (e.value.hostElement && typeof window < "u") {
452
+ let t = e.value.hostElement.getBoundingClientRect(), n = e.value.container || window, r = 0, i = 0;
453
+ if (n === window) r = t.left + window.scrollX, i = t.top + window.scrollY;
454
+ else if (n === e.value.hostElement) r = 0, i = 0;
455
+ else if (isElement(n)) {
456
+ let e = n.getBoundingClientRect();
457
+ r = t.left - e.left + n.scrollLeft, i = t.top - e.top + n.scrollTop;
458
+ }
459
+ (Math.abs(g.x - r) > .1 || Math.abs(g.y - i) > .1) && (g.x = r, g.y = i);
460
+ }
461
+ };
462
+ watch([
463
+ () => e.value.items,
464
+ () => e.value.items.length,
465
+ () => e.value.direction,
466
+ () => e.value.columnCount,
467
+ () => e.value.columnWidth,
468
+ () => e.value.itemSize,
469
+ () => e.value.gap,
470
+ () => e.value.columnGap,
471
+ () => e.value.defaultItemSize,
472
+ () => e.value.defaultColumnWidth
473
+ ], ue, { immediate: !0 }), watch(() => [e.value.container, e.value.hostElement], () => {
474
+ Q();
475
+ });
476
+ let de = computed(() => {
477
+ if (C.value, (!a.value || o.value) && e.value.ssrRange) return {
478
+ start: e.value.ssrRange.start,
479
+ end: e.value.ssrRange.end
480
+ };
481
+ let t = e.value.ssrRange && !i.value ? 0 : e.value.bufferBefore ?? 5, n = e.value.bufferAfter ?? 5;
482
+ return calculateRange({
483
+ direction: e.value.direction || "vertical",
484
+ relativeScrollX: X.value,
485
+ relativeScrollY: Z.value,
486
+ usableWidth: K.value,
487
+ usableHeight: q.value,
488
+ itemsLength: e.value.items.length,
489
+ bufferBefore: t,
490
+ bufferAfter: n,
491
+ gap: e.value.gap || 0,
492
+ columnGap: e.value.columnGap || 0,
493
+ fixedSize: z.value,
494
+ findLowerBoundY: (e) => b.findLowerBound(e),
495
+ findLowerBoundX: (e) => y.findLowerBound(e),
496
+ queryY: (e) => b.query(e),
497
+ queryX: (e) => y.query(e)
498
+ });
499
+ }), fe = computed(() => {
500
+ C.value;
501
+ let t = z.value, n = e.value.gap || 0, r = e.value.columnGap || 0;
502
+ return e.value.direction === "horizontal" ? t === null ? y.findLowerBound(X.value) : Math.floor(X.value / (t + r)) : t === null ? b.findLowerBound(Z.value) : Math.floor(Z.value / (t + n));
503
+ }), $ = [], pe = computed(() => {
504
+ C.value;
505
+ let { start: t, end: n } = de.value, r = [], i = z.value, o = e.value.gap || 0, s = e.value.columnGap || 0, c = H.value, l = U.value, u = /* @__PURE__ */ new Set();
506
+ for (let e = t; e < n; e++) u.add(e);
507
+ if (a.value || !e.value.ssrRange) {
508
+ let e = fe.value, r, i = 0, a = c.length - 1;
509
+ for (; i <= a;) {
510
+ let t = i + a >>> 1;
511
+ c[t] < e ? (r = c[t], i = t + 1) : a = t - 1;
512
+ }
513
+ r !== void 0 && u.add(r);
514
+ let o = 0, s = c.length - 1, l = -1;
515
+ for (; o <= s;) {
516
+ let e = o + s >>> 1;
517
+ c[e] >= t ? (l = e, s = e - 1) : o = e + 1;
518
+ }
519
+ if (l !== -1) for (let e = l; e < c.length; e++) {
520
+ let t = c[e];
521
+ if (t >= n) break;
522
+ u.add(t);
523
+ }
524
+ }
525
+ let d = Array.from(u).sort((e, t) => e - t), f = e.value.ssrRange?.start || 0, p = e.value.ssrRange?.colStart || 0, m = 0, h = 0;
526
+ !a.value && e.value.ssrRange && (h = e.value.direction === "vertical" || e.value.direction === "both" ? i === null ? b.query(f) : f * (i + o) : 0, e.value.direction === "horizontal" ? m = i === null ? y.query(p) : p * (i + s) : e.value.direction === "both" && (m = x.query(p)));
527
+ let g = new Map($.map((e) => [e.index, e]));
528
+ for (let t of d) {
529
+ let n = e.value.items[t];
530
+ if (n === void 0) continue;
531
+ let { x: i, y: a, width: o, height: s } = calculateItemPosition({
532
+ index: t,
533
+ direction: e.value.direction || "vertical",
534
+ fixedSize: z.value,
535
+ gap: e.value.gap || 0,
536
+ columnGap: e.value.columnGap || 0,
537
+ usableWidth: K.value,
538
+ usableHeight: q.value,
539
+ totalWidth: J.value,
540
+ queryY: (e) => b.query(e),
541
+ queryX: (e) => y.query(e),
542
+ getSizeY: (e) => b.get(e),
543
+ getSizeX: (e) => y.get(e)
544
+ }), u = l.has(t), d = i, f = a, { isStickyActive: p, stickyOffset: _ } = calculateStickyItem({
545
+ index: t,
546
+ isSticky: u,
547
+ direction: e.value.direction || "vertical",
548
+ relativeScrollX: X.value,
549
+ relativeScrollY: Z.value,
550
+ originalX: d,
551
+ originalY: f,
552
+ width: o,
553
+ height: s,
554
+ stickyIndices: c,
555
+ fixedSize: z.value,
556
+ fixedWidth: B.value,
557
+ gap: e.value.gap || 0,
558
+ columnGap: e.value.columnGap || 0,
559
+ getItemQueryY: (e) => b.query(e),
560
+ getItemQueryX: (e) => y.query(e)
561
+ }), v = d - m, x = f - h, S = g.get(t);
562
+ S && S.item === n && S.offset.x === v && S.offset.y === x && S.size.width === o && S.size.height === s && S.isSticky === u && S.isStickyActive === p && S.stickyOffset.x === _.x && S.stickyOffset.y === _.y ? r.push(S) : r.push({
563
+ item: n,
564
+ index: t,
565
+ offset: {
566
+ x: v,
567
+ y: x
568
+ },
569
+ size: {
570
+ width: o,
571
+ height: s
572
+ },
573
+ originalX: d,
574
+ originalY: f,
575
+ isSticky: u,
576
+ isStickyActive: p,
577
+ stickyOffset: _
578
+ });
579
+ }
580
+ return $ = r, r;
581
+ }), me = computed(() => {
582
+ C.value;
583
+ let t = e.value.columnCount || 0;
584
+ if (!t) return {
585
+ start: 0,
586
+ end: 0,
587
+ padStart: 0,
588
+ padEnd: 0
589
+ };
590
+ if ((!a.value || o.value) && e.value.ssrRange) {
591
+ let { colStart: n = 0, colEnd: r = 0 } = e.value.ssrRange;
592
+ return {
593
+ start: Math.max(0, n),
594
+ end: Math.min(t, r || t),
595
+ padStart: 0,
596
+ padEnd: 0
597
+ };
598
+ }
599
+ let n = e.value.ssrRange && !i.value ? 0 : 2;
600
+ return calculateColumnRange({
601
+ columnCount: t,
602
+ relativeScrollX: X.value,
603
+ usableWidth: K.value,
604
+ colBuffer: n,
605
+ fixedWidth: B.value,
606
+ columnGap: e.value.columnGap || 0,
607
+ findLowerBound: (e) => x.findLowerBound(e),
608
+ query: (e) => x.query(e),
609
+ totalColsQuery: () => x.query(t)
610
+ });
611
+ }), he = computed(() => {
612
+ C.value;
613
+ let t = z.value, n = e.value.columnGap || 0, r = 0;
614
+ return e.value.direction === "horizontal" ? r = t === null ? y.findLowerBound(X.value) : Math.floor(X.value / (t + n)) : e.value.direction === "both" && (r = x.findLowerBound(X.value)), {
615
+ items: pe.value,
616
+ currentIndex: fe.value,
617
+ currentColIndex: r,
618
+ scrollOffset: {
619
+ x: X.value,
620
+ y: Z.value
621
+ },
622
+ viewportSize: {
623
+ width: u.value,
624
+ height: p.value
625
+ },
626
+ totalSize: {
627
+ width: J.value,
628
+ height: Y.value
629
+ },
630
+ isScrolling: i.value,
631
+ isProgrammaticScroll: v.value,
632
+ range: de.value,
633
+ columnRange: me.value
634
+ };
635
+ }), ge = () => {
636
+ v.value = !1, I.value = null;
637
+ }, _e = (e) => {
638
+ let t = e.target;
639
+ typeof window > "u" || (t === window || t === document ? (n.value = window.scrollX, r.value = window.scrollY, u.value = document.documentElement.clientWidth, p.value = document.documentElement.clientHeight) : isScrollableElement(t) && (n.value = t.scrollLeft, r.value = t.scrollTop, u.value = t.clientWidth, p.value = t.clientHeight), i.value ||= (v.value || (I.value = null), !0), clearTimeout(_), _ = setTimeout(() => {
640
+ i.value = !1, v.value = !1;
641
+ }, 250));
642
+ }, ve = (t) => {
643
+ let n = !1, r = 0, i = 0, a = e.value.gap || 0, o = e.value.columnGap || 0, s = X.value, c = Z.value, l = e.value.direction === "horizontal" ? z.value === null ? y.findLowerBound(s) : Math.floor(s / (z.value + o)) : z.value === null ? b.findLowerBound(c) : Math.floor(c / (z.value + a)), u = e.value.direction === "both" ? x.findLowerBound(s) : e.value.direction === "horizontal" ? l : 0, d = e.value.direction === "horizontal", f = e.value.direction === "vertical", p = e.value.direction === "both", m = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
644
+ for (let { index: s, inlineSize: c, blockSize: g, element: _ } of t) {
645
+ if (c <= 0 && g <= 0) continue;
646
+ let t = R.value || typeof e.value.itemSize == "function";
647
+ if (s >= 0 && !m.has(s) && t && g > 0) {
648
+ if (m.add(s), d && c > 0) {
649
+ let e = y.get(s), t = c + o;
650
+ if (!E[s] || Math.abs(t - e) > .1) {
651
+ let i = t - e;
652
+ y.update(s, i), E[s] = 1, n = !0, s < l && (r += i);
653
+ }
654
+ }
655
+ if (f || p) {
656
+ let e = b.get(s), t = g + a;
657
+ if (!D[s] || Math.abs(t - e) > .1) {
658
+ let r = t - e;
659
+ b.update(s, r), D[s] = 1, n = !0, s < l && (i += r);
660
+ }
661
+ }
662
+ }
663
+ let v = ie.value || typeof e.value.columnWidth == "function";
664
+ if (p && _ && e.value.columnCount && v && (c > 0 || _.dataset.colIndex === void 0)) {
665
+ let t = _.dataset.colIndex;
666
+ if (t != null) {
667
+ let i = Number.parseInt(t, 10);
668
+ if (i >= 0 && i < (e.value.columnCount || 0) && !h.has(i)) {
669
+ h.add(i);
670
+ let e = x.get(i), t = c + o;
671
+ if (!T[i] || Math.abs(e - t) > .1) {
672
+ let a = t - e;
673
+ Math.abs(a) > .1 && (x.update(i, a), n = !0, i < u && (r += a)), T[i] = 1;
674
+ }
675
+ }
676
+ } else {
677
+ let t = _.dataset.colIndex === void 0 ? Array.from(_.querySelectorAll("[data-col-index]")) : [_];
678
+ for (let i of t) {
679
+ let t = Number.parseInt(i.dataset.colIndex, 10);
680
+ if (t >= 0 && t < (e.value.columnCount || 0) && !h.has(t)) {
681
+ h.add(t);
682
+ let e = i.getBoundingClientRect().width, a = x.get(t), s = e + o;
683
+ if (!T[t] || Math.abs(a - s) > .1) {
684
+ let e = s - a;
685
+ Math.abs(e) > .1 && (x.update(t, e), n = !0, t < u && (r += e)), T[t] = 1;
686
+ }
687
+ }
688
+ }
689
+ }
690
+ }
691
+ }
692
+ n && (C.value++, !(I.value !== null || v.value) && (r !== 0 || i !== 0) && le(r === 0 ? null : s + r, i === 0 ? null : c + i, { behavior: "auto" }));
693
+ }, ye = (e, t, n, r) => {
694
+ ve([{
695
+ index: e,
696
+ inlineSize: t,
697
+ blockSize: n,
698
+ element: r
699
+ }]);
700
+ }, be = () => {
701
+ if (I.value && !o.value) {
702
+ let { rowIndex: t, colIndex: n, options: r } = I.value;
703
+ if (isScrollToIndexOptions(r) && r.behavior === "smooth" && i.value) return;
704
+ let { targetX: a, targetY: o } = calculateScrollTarget({
705
+ rowIndex: t,
706
+ colIndex: n,
707
+ options: r,
708
+ itemsLength: e.value.items.length,
709
+ columnCount: e.value.columnCount || 0,
710
+ direction: e.value.direction || "vertical",
711
+ usableWidth: K.value,
712
+ usableHeight: q.value,
713
+ totalWidth: J.value,
714
+ totalHeight: Y.value,
715
+ gap: e.value.gap || 0,
716
+ columnGap: e.value.columnGap || 0,
717
+ fixedSize: z.value,
718
+ fixedWidth: B.value,
719
+ relativeScrollX: X.value,
720
+ relativeScrollY: Z.value,
721
+ getItemSizeY: (e) => b.get(e),
722
+ getItemSizeX: (e) => y.get(e),
723
+ getItemQueryY: (e) => b.query(e),
724
+ getItemQueryX: (e) => y.query(e),
725
+ getColumnSize: (e) => x.get(e),
726
+ getColumnQuery: (e) => x.query(e),
727
+ stickyIndices: H.value
728
+ }), s = n == null || Math.abs(X.value - a) < 1, c = t == null || Math.abs(Z.value - o) < 1, l = n == null || n === void 0 || T[n] === 1, u = t == null || t === void 0 || D[t] === 1;
729
+ s && c ? l && u && (I.value = null) : ce(t, n, isScrollToIndexOptions(r) ? {
730
+ ...r,
731
+ isCorrection: !0
732
+ } : {
733
+ align: r,
734
+ isCorrection: !0
735
+ });
736
+ }
737
+ };
738
+ watch([
739
+ C,
740
+ u,
741
+ p
742
+ ], be), watch(i, (e) => {
743
+ e || be();
744
+ });
745
+ let xe = null, Se = (e) => {
746
+ if (!e || typeof window > "u") return;
747
+ let t = e === window ? document : e;
748
+ if (t.addEventListener("scroll", _e, { passive: !0 }), e === window) {
749
+ u.value = document.documentElement.clientWidth, p.value = document.documentElement.clientHeight, n.value = window.scrollX, r.value = window.scrollY;
750
+ let e = () => {
751
+ u.value = document.documentElement.clientWidth, p.value = document.documentElement.clientHeight, Q();
752
+ };
753
+ return window.addEventListener("resize", e), () => {
754
+ t.removeEventListener("scroll", _e), window.removeEventListener("resize", e);
755
+ };
756
+ } else return u.value = e.clientWidth, p.value = e.clientHeight, n.value = e.scrollLeft, r.value = e.scrollTop, xe = new ResizeObserver((t) => {
757
+ for (let n of t) n.target === e && (u.value = e.clientWidth, p.value = e.clientHeight, Q());
758
+ }), xe.observe(e), () => {
759
+ t.removeEventListener("scroll", _e), xe?.disconnect();
760
+ };
761
+ }, Ce;
762
+ return getCurrentInstance() && (onMounted(() => {
763
+ l.value = !0, watch(() => e.value.container, (e) => {
764
+ Ce?.(), Ce = Se(e || null);
765
+ }, { immediate: !0 }), Q(), e.value.ssrRange || e.value.initialScrollIndex !== void 0 ? nextTick(() => {
766
+ Q();
767
+ let t = e.value.initialScrollIndex === void 0 ? e.value.ssrRange?.start : e.value.initialScrollIndex, n = e.value.initialScrollAlign || "start";
768
+ t != null && ce(t, e.value.ssrRange?.colStart, {
769
+ align: n,
770
+ behavior: "auto"
771
+ }), a.value = !0, o.value = !0, nextTick(() => {
772
+ o.value = !1;
773
+ });
774
+ }) : a.value = !0;
775
+ }), onUnmounted(() => {
776
+ Ce?.();
777
+ })), {
778
+ renderedItems: pe,
779
+ totalWidth: J,
780
+ totalHeight: Y,
781
+ scrollDetails: he,
782
+ scrollToIndex: ce,
783
+ scrollToOffset: le,
784
+ stopProgrammaticScroll: ge,
785
+ updateItemSize: ye,
786
+ updateItemSizes: ve,
787
+ updateHostOffset: Q,
788
+ columnRange: me,
789
+ getColumnWidth: se,
790
+ refresh: () => {
791
+ y.resize(0), b.resize(0), x.resize(0), T.fill(0), E.fill(0), D.fill(0), ue();
792
+ },
793
+ isHydrated: a
794
+ };
795
+ }
796
+ var _hoisted_1 = {
797
+ key: 0,
798
+ class: "virtual-scroll-debug-info"
799
+ }, VirtualScroll_default = /* @__PURE__ */ ((e, t) => {
800
+ let n = e.__vccOpts || e;
801
+ for (let [e, r] of t) n[e] = r;
802
+ return n;
803
+ })(/* @__PURE__ */ defineComponent({
804
+ __name: "VirtualScroll",
805
+ props: {
806
+ items: {},
807
+ itemSize: {},
808
+ direction: { default: "vertical" },
809
+ bufferBefore: { default: 5 },
810
+ bufferAfter: { default: 5 },
811
+ container: {},
812
+ ssrRange: {},
813
+ columnCount: { default: 0 },
814
+ columnWidth: {},
815
+ containerTag: { default: "div" },
816
+ wrapperTag: { default: "div" },
817
+ itemTag: { default: "div" },
818
+ scrollPaddingStart: { default: 0 },
819
+ scrollPaddingEnd: { default: 0 },
820
+ stickyHeader: {
821
+ type: Boolean,
822
+ default: !1
823
+ },
824
+ stickyFooter: {
825
+ type: Boolean,
826
+ default: !1
827
+ },
828
+ gap: { default: 0 },
829
+ columnGap: { default: 0 },
830
+ stickyIndices: { default: () => [] },
831
+ loadDistance: { default: 200 },
832
+ loading: {
833
+ type: Boolean,
834
+ default: !1
835
+ },
836
+ restoreScrollOnPrepend: {
837
+ type: Boolean,
838
+ default: !1
839
+ },
840
+ initialScrollIndex: {},
841
+ initialScrollAlign: {},
842
+ defaultItemSize: {},
843
+ defaultColumnWidth: {},
844
+ debug: {
845
+ type: Boolean,
846
+ default: !1
847
+ }
848
+ },
849
+ emits: [
850
+ "scroll",
851
+ "load",
852
+ "visibleRangeChange"
853
+ ],
854
+ setup(o, { expose: s, emit: m }) {
855
+ let w = o, T = m, E = useSlots(), O = ref(null), k = ref(null), ee = ref(null), A = ref(null), j = /* @__PURE__ */ new Map(), M = ref(0), N = ref(0), P = computed(() => {
856
+ let e = w.container === void 0 ? O.value : w.container;
857
+ return e === O.value || typeof window < "u" && (e === window || e === null);
858
+ }), te = computed(() => {
859
+ let e = w.scrollPaddingStart, t = w.scrollPaddingEnd;
860
+ w.items.length;
861
+ let n = typeof e == "object" ? e.x || 0 : (w.direction === "horizontal" || w.direction === "both") && e || 0, r = typeof e == "object" ? e.y || 0 : (w.direction === "vertical" || w.direction === "both") && e || 0, i = typeof t == "object" ? t.x || 0 : (w.direction === "horizontal" || w.direction === "both") && t || 0, a = typeof t == "object" ? t.y || 0 : (w.direction === "vertical" || w.direction === "both") && t || 0;
862
+ return {
863
+ items: w.items,
864
+ itemSize: w.itemSize,
865
+ direction: w.direction,
866
+ bufferBefore: w.bufferBefore,
867
+ bufferAfter: w.bufferAfter,
868
+ container: w.container === void 0 ? O.value : w.container,
869
+ hostElement: k.value,
870
+ ssrRange: w.ssrRange,
871
+ columnCount: w.columnCount,
872
+ columnWidth: w.columnWidth,
873
+ scrollPaddingStart: {
874
+ x: n,
875
+ y: r + (w.stickyHeader && P.value ? M.value : 0)
876
+ },
877
+ scrollPaddingEnd: {
878
+ x: i,
879
+ y: a + (w.stickyFooter && P.value ? N.value : 0)
880
+ },
881
+ gap: w.gap,
882
+ columnGap: w.columnGap,
883
+ stickyIndices: w.stickyIndices,
884
+ loadDistance: w.loadDistance,
885
+ loading: w.loading,
886
+ restoreScrollOnPrepend: w.restoreScrollOnPrepend,
887
+ initialScrollIndex: w.initialScrollIndex,
888
+ initialScrollAlign: w.initialScrollAlign,
889
+ defaultItemSize: w.defaultItemSize,
890
+ defaultColumnWidth: w.defaultColumnWidth,
891
+ debug: w.debug
892
+ };
893
+ }), { isHydrated: F, columnRange: ne, renderedItems: re, scrollDetails: L, totalHeight: R, totalWidth: B, getColumnWidth: V, scrollToIndex: H, scrollToOffset: U, updateHostOffset: W, updateItemSizes: ae, refresh: oe, stopProgrammaticScroll: G } = useVirtualScroll(te);
894
+ function K() {
895
+ oe(), nextTick(() => {
896
+ let e = [];
897
+ for (let [t, n] of j.entries()) n && e.push({
898
+ index: t,
899
+ inlineSize: n.offsetWidth,
900
+ blockSize: n.offsetHeight,
901
+ element: n
902
+ });
903
+ e.length > 0 && ae(e);
904
+ });
905
+ }
906
+ watch(L, (e, t) => {
907
+ F.value && (T("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) && T("visibleRangeChange", {
908
+ start: e.range.start,
909
+ end: e.range.end,
910
+ colStart: e.columnRange.start,
911
+ colEnd: e.columnRange.end
912
+ }), !w.loading && (w.direction !== "horizontal" && e.totalSize.height - (e.scrollOffset.y + e.viewportSize.height) <= w.loadDistance && T("load", "vertical"), w.direction !== "vertical" && e.totalSize.width - (e.scrollOffset.x + e.viewportSize.width) <= w.loadDistance && T("load", "horizontal")));
913
+ }), watch(F, (e) => {
914
+ e && T("visibleRangeChange", {
915
+ start: L.value.range.start,
916
+ end: L.value.range.end,
917
+ colStart: L.value.columnRange.start,
918
+ colEnd: L.value.columnRange.end
919
+ });
920
+ }, { once: !0 });
921
+ let q = typeof window > "u" ? null : new ResizeObserver(W), J = typeof window > "u" ? null : new ResizeObserver((e) => {
922
+ let t = [];
923
+ for (let n of e) {
924
+ let e = n.target, r = Number(e.dataset.index), i = e.dataset.colIndex, a = n.contentRect.width, o = n.contentRect.height;
925
+ n.borderBoxSize && n.borderBoxSize.length > 0 ? (a = n.borderBoxSize[0].inlineSize, o = n.borderBoxSize[0].blockSize) : (a = e.offsetWidth, o = e.offsetHeight), i === void 0 ? Number.isNaN(r) || t.push({
926
+ index: r,
927
+ inlineSize: a,
928
+ blockSize: o,
929
+ element: e
930
+ }) : t.push({
931
+ index: -1,
932
+ inlineSize: a,
933
+ blockSize: o,
934
+ element: e
935
+ });
936
+ }
937
+ t.length > 0 && ae(t);
938
+ }), Y = typeof window > "u" ? null : new ResizeObserver(() => {
939
+ M.value = ee.value?.offsetHeight || 0, N.value = A.value?.offsetHeight || 0, W();
940
+ });
941
+ watch(ee, (e, t) => {
942
+ t && Y?.unobserve(t), e && Y?.observe(e);
943
+ }, { immediate: !0 }), watch(A, (e, t) => {
944
+ t && Y?.unobserve(t), e && Y?.observe(e);
945
+ }, { immediate: !0 }), onMounted(() => {
946
+ O.value && q?.observe(O.value);
947
+ for (let e of j.values()) J?.observe(e), w.direction === "both" && e.querySelectorAll("[data-col-index]").forEach((e) => J?.observe(e));
948
+ }), watch([O, k], ([e], [t]) => {
949
+ t && q?.unobserve(t), e && q?.observe(e);
950
+ });
951
+ function X(e, t) {
952
+ if (e) j.set(t, e), J?.observe(e), w.direction === "both" && e.querySelectorAll("[data-col-index]").forEach((e) => J?.observe(e));
953
+ else {
954
+ let e = j.get(t);
955
+ e && (J?.unobserve(e), w.direction === "both" && e.querySelectorAll("[data-col-index]").forEach((e) => J?.unobserve(e)), j.delete(t));
956
+ }
957
+ }
958
+ function Z(e) {
959
+ let { viewportSize: t, scrollOffset: n } = L.value, r = w.direction !== "vertical", i = w.direction !== "horizontal";
960
+ switch (e.key) {
961
+ case "Home":
962
+ e.preventDefault(), G(), H(0, 0, "start");
963
+ break;
964
+ case "End": {
965
+ e.preventDefault(), G();
966
+ let t = w.items.length - 1, n = (w.columnCount || 0) > 0 ? w.columnCount - 1 : 0;
967
+ r ? i ? H(t, n, "end") : H(0, t, "end") : H(t, 0, "end");
968
+ break;
969
+ }
970
+ case "ArrowUp":
971
+ e.preventDefault(), G(), U(null, n.y - 40);
972
+ break;
973
+ case "ArrowDown":
974
+ e.preventDefault(), G(), U(null, n.y + 40);
975
+ break;
976
+ case "ArrowLeft":
977
+ e.preventDefault(), G(), U(n.x - 40, null);
978
+ break;
979
+ case "ArrowRight":
980
+ e.preventDefault(), G(), U(n.x + 40, null);
981
+ break;
982
+ case "PageUp":
983
+ e.preventDefault(), G(), U(!i && r ? n.x - t.width : null, i ? n.y - t.height : null);
984
+ break;
985
+ case "PageDown":
986
+ e.preventDefault(), G(), U(!i && r ? n.x + t.width : null, i ? n.y + t.height : null);
987
+ break;
988
+ }
989
+ }
990
+ onUnmounted(() => {
991
+ q?.disconnect(), J?.disconnect(), Y?.disconnect();
992
+ });
993
+ let se = computed(() => isWindowLike(w.container)), ce = computed(() => se.value ? { ...w.direction === "vertical" ? {} : { whiteSpace: "nowrap" } } : w.containerTag === "table" ? { minInlineSize: w.direction === "vertical" ? "100%" : "auto" } : { ...w.direction === "vertical" ? {} : { whiteSpace: "nowrap" } }), le = computed(() => ({
994
+ inlineSize: w.direction === "vertical" ? "100%" : `${B.value}px`,
995
+ blockSize: w.direction === "horizontal" ? "100%" : `${R.value}px`
996
+ })), ue = computed(() => {
997
+ let e = w.direction === "horizontal";
998
+ return {
999
+ display: e ? "inline-block" : "block",
1000
+ ...e ? {
1001
+ blockSize: "100%",
1002
+ verticalAlign: "top"
1003
+ } : { inlineSize: "100%" }
1004
+ };
1005
+ }), Q = computed(() => ({
1006
+ inlineSize: w.direction === "vertical" ? "1px" : `${B.value}px`,
1007
+ blockSize: w.direction === "horizontal" ? "1px" : `${R.value}px`
1008
+ }));
1009
+ function de(e) {
1010
+ return calculateItemStyle({
1011
+ containerTag: w.containerTag,
1012
+ direction: w.direction,
1013
+ isHydrated: F.value,
1014
+ item: e,
1015
+ itemSize: w.itemSize,
1016
+ paddingStartX: te.value.scrollPaddingStart.x,
1017
+ paddingStartY: te.value.scrollPaddingStart.y
1018
+ });
1019
+ }
1020
+ let fe = computed(() => w.debug), $ = computed(() => w.containerTag === "table"), pe = computed(() => $.value ? "thead" : "div"), me = computed(() => $.value ? "tfoot" : "div");
1021
+ return s({
1022
+ scrollDetails: L,
1023
+ columnRange: ne,
1024
+ getColumnWidth: V,
1025
+ scrollToIndex: H,
1026
+ scrollToOffset: U,
1027
+ refresh: K,
1028
+ stopProgrammaticScroll: G
1029
+ }), (t, s) => (openBlock(), createBlock(resolveDynamicComponent(o.containerTag), {
1030
+ ref_key: "hostRef",
1031
+ ref: O,
1032
+ class: normalizeClass(["virtual-scroll-container", [`virtual-scroll--${o.direction}`, {
1033
+ "virtual-scroll--hydrated": unref(F),
1034
+ "virtual-scroll--window": se.value,
1035
+ "virtual-scroll--table": $.value
1036
+ }]]),
1037
+ style: normalizeStyle(ce.value),
1038
+ tabindex: "0",
1039
+ onKeydown: Z,
1040
+ onWheelPassive: unref(G),
1041
+ onPointerdownPassive: unref(G),
1042
+ onTouchstartPassive: unref(G)
1043
+ }, {
1044
+ default: withCtx(() => [
1045
+ E.header ? (openBlock(), createBlock(resolveDynamicComponent(pe.value), {
1046
+ key: 0,
1047
+ ref_key: "headerRef",
1048
+ ref: ee,
1049
+ class: normalizeClass(["virtual-scroll-header", { "virtual-scroll--sticky": o.stickyHeader }])
1050
+ }, {
1051
+ default: withCtx(() => [renderSlot(t.$slots, "header", {}, void 0, !0)]),
1052
+ _: 3
1053
+ }, 8, ["class"])) : createCommentVNode("", !0),
1054
+ (openBlock(), createBlock(resolveDynamicComponent(o.wrapperTag), {
1055
+ ref_key: "wrapperRef",
1056
+ ref: k,
1057
+ class: "virtual-scroll-wrapper",
1058
+ style: normalizeStyle(le.value)
1059
+ }, {
1060
+ default: withCtx(() => [$.value ? (openBlock(), createBlock(resolveDynamicComponent(o.itemTag), {
1061
+ key: 0,
1062
+ class: "virtual-scroll-spacer",
1063
+ style: normalizeStyle(Q.value)
1064
+ }, {
1065
+ default: withCtx(() => [...s[0] ||= [createElementVNode("td", { style: {
1066
+ padding: "0",
1067
+ border: "none",
1068
+ "block-size": "inherit"
1069
+ } }, null, -1)]]),
1070
+ _: 1
1071
+ }, 8, ["style"])) : createCommentVNode("", !0), (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(re), (e) => (openBlock(), createBlock(resolveDynamicComponent(o.itemTag), {
1072
+ key: e.index,
1073
+ ref_for: !0,
1074
+ ref: (t) => X(t, e.index),
1075
+ "data-index": e.index,
1076
+ class: normalizeClass(["virtual-scroll-item", {
1077
+ "virtual-scroll--sticky": e.isStickyActive,
1078
+ "virtual-scroll--debug": fe.value
1079
+ }]),
1080
+ style: normalizeStyle(de(e))
1081
+ }, {
1082
+ default: withCtx(() => [renderSlot(t.$slots, "item", {
1083
+ item: e.item,
1084
+ index: e.index,
1085
+ columnRange: unref(ne),
1086
+ getColumnWidth: unref(V),
1087
+ isSticky: e.isSticky,
1088
+ isStickyActive: e.isStickyActive
1089
+ }, void 0, !0), fe.value ? (openBlock(), createElementBlock("div", _hoisted_1, " #" + toDisplayString(e.index) + " (" + toDisplayString(Math.round(e.offset.x)) + ", " + toDisplayString(Math.round(e.offset.y)) + ") ", 1)) : createCommentVNode("", !0)]),
1090
+ _: 2
1091
+ }, 1032, [
1092
+ "data-index",
1093
+ "class",
1094
+ "style"
1095
+ ]))), 128))]),
1096
+ _: 3
1097
+ }, 8, ["style"])),
1098
+ o.loading && E.loading ? (openBlock(), createElementBlock("div", {
1099
+ key: 1,
1100
+ class: "virtual-scroll-loading",
1101
+ style: normalizeStyle(ue.value)
1102
+ }, [renderSlot(t.$slots, "loading", {}, void 0, !0)], 4)) : createCommentVNode("", !0),
1103
+ E.footer ? (openBlock(), createBlock(resolveDynamicComponent(me.value), {
1104
+ key: 2,
1105
+ ref_key: "footerRef",
1106
+ ref: A,
1107
+ class: normalizeClass(["virtual-scroll-footer", { "virtual-scroll--sticky": o.stickyFooter }])
1108
+ }, {
1109
+ default: withCtx(() => [renderSlot(t.$slots, "footer", {}, void 0, !0)]),
1110
+ _: 3
1111
+ }, 8, ["class"])) : createCommentVNode("", !0)
1112
+ ]),
1113
+ _: 3
1114
+ }, 40, [
1115
+ "class",
1116
+ "style",
1117
+ "onWheelPassive",
1118
+ "onPointerdownPassive",
1119
+ "onTouchstartPassive"
1120
+ ]));
1121
+ }
1122
+ }), [["__scopeId", "data-v-922485f2"]]);
1123
+ export { DEFAULT_BUFFER, DEFAULT_COLUMN_WIDTH, DEFAULT_ITEM_SIZE, FenwickTree, VirtualScroll_default as VirtualScroll, calculateColumnRange, calculateItemPosition, calculateItemStyle, calculateRange, calculateScrollTarget, calculateStickyItem, calculateTotalSize, getPaddingX, getPaddingY, isBody, isElement, isScrollToIndexOptions, isScrollableElement, isWindow, isWindowLike, useVirtualScroll };
1124
+
1125
+ //# sourceMappingURL=index.mjs.map