@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/README.md +278 -140
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +866 -112
- package/dist/index.js +1 -844
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1125 -0
- package/dist/index.mjs.map +1 -0
- package/dist/virtual-scroll.css +2 -0
- package/package.json +8 -5
- package/src/components/VirtualScroll.test.ts +527 -688
- package/src/components/VirtualScroll.vue +402 -209
- package/src/composables/useVirtualScroll.test.ts +241 -1447
- package/src/composables/useVirtualScroll.ts +544 -531
- package/src/index.ts +2 -0
- package/src/types.ts +535 -0
- package/src/utils/fenwick-tree.ts +38 -18
- package/src/utils/scroll.test.ts +148 -0
- package/src/utils/scroll.ts +40 -10
- package/src/utils/virtual-scroll-logic.test.ts +2517 -0
- package/src/utils/virtual-scroll-logic.ts +605 -0
- package/dist/index.css +0 -2
package/dist/index.js
CHANGED
|
@@ -1,845 +1,2 @@
|
|
|
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;
|
|
61
|
-
}
|
|
62
|
-
function isScrollableElement(e) {
|
|
63
|
-
return !!e && "scrollLeft" in e;
|
|
64
|
-
}
|
|
65
|
-
function isScrollToIndexOptions(e) {
|
|
66
|
-
return typeof e == "object" && !!e && ("align" in e || "behavior" in e || "isCorrection" in e);
|
|
67
|
-
}
|
|
68
|
-
function getPaddingX(e, t) {
|
|
69
|
-
return typeof e == "object" && e ? e.x || 0 : t === "horizontal" && e || 0;
|
|
70
|
-
}
|
|
71
|
-
function getPaddingY(e, t) {
|
|
72
|
-
return typeof e == "object" && e ? e.y || 0 : (t === "vertical" || t === "both") && e || 0;
|
|
73
|
-
}
|
|
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
|
-
};
|
|
500
|
-
}
|
|
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
|
-
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VirtualScroll={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=class{tree;values;constructor(e){this.tree=new Float64Array(e+1),this.values=new Float64Array(e)}update(e,t){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}query(e){let t=0;for(;e>0;)t+=this.tree[e]||0,e-=e&-e;return t}set(e,t){e<0||e>=this.values.length||(this.values[e]=t)}get length(){return this.values.length}get(e){return this.values[e]||0}getValues(){return this.values}findLowerBound(e){let t=0,n=this.tree.length,r=1<<Math.floor(Math.log2(n-1));for(;r>0;){let i=t+r;if(i<n){let n=this.tree[i]||0;n<=e&&(t=i,e-=n)}r>>=1}return t}rebuild(){this.tree.fill(0);for(let e=0;e<this.values.length;e++)this.tree[e+1]=this.values[e]||0;for(let e=1;e<this.tree.length;e++){let t=e+(e&-e);t<this.tree.length&&(this.tree[t]=this.tree[t]+this.tree[e])}}resize(e){if(e===this.values.length)return;let t=new Float64Array(e);t.set(this.values.subarray(0,Math.min(e,this.values.length))),this.values=t,this.tree=new Float64Array(e+1),this.rebuild()}shift(e){if(e===0)return;let t=this.values.length,n=new Float64Array(t);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()}};function r(e){return e===null||typeof window<`u`&&e===window}function i(e){return!!e&&typeof e==`object`&&`tagName`in e&&e.tagName===`BODY`}function a(e){return r(e)||i(e)}function o(e){return!!e&&`getBoundingClientRect`in e}function s(e){return!!e&&`scrollLeft`in e}function c(e){return typeof e==`object`&&!!e&&(`align`in e||`behavior`in e||`isCorrection`in e)}function l(e,t){return typeof e==`object`&&e?e.x||0:(t===`horizontal`||t===`both`)&&e||0}function u(e,t){return typeof e==`object`&&e?e.y||0:(t===`vertical`||t===`both`)&&e||0}function d(e){let{rowIndex:t,colIndex:n,options:r,itemsLength:i,columnCount:a,direction:o,usableWidth:s,usableHeight:l,totalWidth:u,totalHeight:d,gap:f,columnGap:p,fixedSize:m,fixedWidth:h,relativeScrollX:g,relativeScrollY:_,getItemSizeY:v,getItemSizeX:y,getItemQueryY:b,getItemQueryX:x,getColumnSize:S,getColumnQuery:C,stickyIndices:w}=e,T;T=c(r)?r.align:r;let E=(typeof T==`object`?T.x:T)||`auto`,D=(typeof T==`object`?T.y:T)||`auto`,O=o===`vertical`||o===`both`,k=o===`horizontal`||o===`both`,A=g,j=_,M=0,N=0,P=E===`auto`?`auto`:E,F=D===`auto`?`auto`:D;if(t!=null){let e=0;if(O&&w&&w.length>0){let n,r=0,i=w.length-1;for(;r<=i;){let e=r+i>>>1;w[e]<t?(n=w[e],r=e+1):i=e-1}n!==void 0&&(e=m===null?v(n)-f:m)}let n=0;if(t>=i?(n=d,N=0):(n=m===null?b(t):t*(m+f),N=m===null?v(t)-f:m),D===`start`)j=n-e;else if(D===`center`)j=n-(l-N)/2;else if(D===`end`)j=n-(l-N);else if(!(N<=l-e?n>=_+e-.5&&n+N<=_+l+.5:n<=_+e+.5&&n+N>=_+l-.5)){let t=n-e,r=n-(l-N);N<=l-e?n<_+e?(j=t,F=`start`):(j=r,F=`end`):Math.abs(t-_)<Math.abs(r-_)?(j=t,F=`start`):(j=r,F=`end`)}}if(n!=null){let e=0;if(k&&w&&w.length>0&&(o===`horizontal`||o===`both`)){let t,r=0,i=w.length-1;for(;r<=i;){let e=r+i>>>1;w[e]<n?(t=w[e],r=e+1):i=e-1}t!==void 0&&(e=o===`horizontal`?m===null?y(t)-p:m:h===null?S(t)-p:h)}let t=0;if(n>=a&&a>0?(t=u,M=0):o===`horizontal`?(t=m===null?x(n):n*(m+p),M=m===null?y(n)-p:m):(t=C(n),M=S(n)-p),E===`start`)A=t-e;else if(E===`center`)A=t-(s-M)/2;else if(E===`end`)A=t-(s-M);else if(!(M<=s-e?t>=g+e-.5&&t+M<=g+s+.5:t<=g+e+.5&&t+M>=g+s-.5)){let n=t-e,r=t-(s-M);M<=s-e?t<g+e?(A=n,P=`start`):(A=r,P=`end`):Math.abs(n-g)<Math.abs(r-g)?(A=n,P=`start`):(A=r,P=`end`)}}return A=Math.max(0,Math.min(A,Math.max(0,u-s))),j=Math.max(0,Math.min(j,Math.max(0,d-l))),{targetX:A,targetY:j,itemWidth:M,itemHeight:N,effectiveAlignX:P,effectiveAlignY:F}}function f(e){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;if(g)if(d!==null)_=Math.floor(r/(d+l)),v=Math.ceil((r+a)/(d+l));else{_=f(r);let e=r+a;v=f(e),v<o&&m(v)<e&&v++}else if(d!==null)_=Math.floor(n/(d+u)),v=Math.ceil((n+i)/(d+u));else{_=p(n);let e=n+i;v=p(e),v<o&&h(v)<e&&v++}return{start:Math.max(0,_-s),end:Math.min(o,v+c)}}function p(e){let{columnCount:t,relativeScrollX:n,usableWidth:r,colBuffer:i,fixedWidth:a,columnGap:o,findLowerBound:s,query:c,totalColsQuery:l}=e;if(!t)return{start:0,end:0,padStart:0,padEnd:0};let u=0,d=t;if(a!==null)u=Math.floor(n/(a+o)),d=Math.ceil((n+r)/(a+o));else{u=s(n);let e=c(u),i=u;for(;i<t&&e<n+r;)e=c(++i);d=i}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);return{start:f,end:p,padStart:m,padEnd:Math.max(0,h-g)}}function m(e){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={x:0,y:0};if(!n)return{isStickyActive:_,stickyOffset:v};if((r===`vertical`||r===`both`)&&a>s){let e,n=0,r=u.length-1;for(;n<=r;){let i=n+r>>>1;u[i]>t?(e=u[i],r=i-1):n=i+1}if(e!==void 0){let t=d===null?h(e):e*(d+p);a>=t?_=!1:(_=!0,v.y=Math.max(0,Math.min(l,t-a))-l)}else _=!0}if((r===`horizontal`||r===`both`&&!_)&&i>o){let e,n=0,a=u.length-1;for(;n<=a;){let r=n+a>>>1;u[r]>t?(e=u[r],a=r-1):n=r+1}if(e!==void 0){let t=r===`horizontal`?d===null?g(e):e*(d+m):f===null?g(e):e*(f+m);i>=t?_=!1:(_=!0,v.x=Math.max(0,Math.min(c,t-i))-c)}else _=!0}return{isStickyActive:_,stickyOffset:v}}function h(e){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;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),{height:g,width:h,x:p,y:m}}function g(e){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`};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}function _(e){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;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))),{width:p,height:m}}function v(e){let r=(0,t.ref)(0),i=(0,t.ref)(0),a=(0,t.ref)(!1),g=(0,t.ref)(!1),v=(0,t.ref)(!1),y=(0,t.ref)(!1),b=(0,t.ref)(0),x=(0,t.ref)(0),S=(0,t.reactive)({x:0,y:0}),C,w=(0,t.ref)(!1),T=new n(e.value.items?.length||0),E=new n(e.value.items?.length||0),D=new n(e.value.columnCount||0),O=(0,t.ref)(0),k=new Uint8Array,A=new Uint8Array,j=new Uint8Array,M=(0,t.ref)(null),N=(0,t.ref)(!1),P=[],F=(0,t.computed)(()=>e.value.itemSize===void 0||e.value.itemSize===null||e.value.itemSize===0),I=(0,t.computed)(()=>e.value.columnWidth===void 0||e.value.columnWidth===null||e.value.columnWidth===0),L=(0,t.computed)(()=>typeof e.value.itemSize==`number`&&e.value.itemSize>0?e.value.itemSize:null),R=(0,t.computed)(()=>typeof e.value.columnWidth==`number`&&e.value.columnWidth>0?e.value.columnWidth:null),z=(0,t.computed)(()=>e.value.defaultItemSize||L.value||40),B=(0,t.computed)(()=>[...e.value.stickyIndices||[]].sort((e,t)=>e-t)),ee=(0,t.computed)(()=>new Set(B.value)),V=(0,t.computed)(()=>l(e.value.scrollPaddingStart,e.value.direction)),te=(0,t.computed)(()=>l(e.value.scrollPaddingEnd,e.value.direction)),H=(0,t.computed)(()=>u(e.value.scrollPaddingStart,e.value.direction)),U=(0,t.computed)(()=>u(e.value.scrollPaddingEnd,e.value.direction)),W=(0,t.computed)(()=>{let t=e.value.direction===`horizontal`||e.value.direction===`both`;return b.value-(t?V.value+te.value:0)}),G=(0,t.computed)(()=>{let t=e.value.direction===`vertical`||e.value.direction===`both`;return x.value-(t?H.value+U.value:0)}),K=(0,t.computed)(()=>{if(O.value,!g.value&&e.value.ssrRange&&!y.value){let{start:t=0,end:n=0,colStart:r=0,colEnd:i=0}=e.value.ssrRange,a=e.value.columnCount||0;if(e.value.direction===`both`){if(a<=0)return 0;let t=i||a,n=D.query(t)-D.query(r);return Math.max(0,n-(t>r&&e.value.columnGap||0))}if(e.value.direction===`horizontal`){if(L.value!==null){let r=n-t;return Math.max(0,r*(L.value+(e.value.columnGap||0))-(r>0&&e.value.columnGap||0))}let r=T.query(n)-T.query(t);return Math.max(0,r-(n>t&&e.value.columnGap||0))}}return _({direction:e.value.direction||`vertical`,itemsLength:e.value.items.length,columnCount:e.value.columnCount||0,fixedSize:L.value,fixedWidth:R.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,usableWidth:W.value,usableHeight:G.value,queryY:e=>E.query(e),queryX:e=>T.query(e),queryColumn:e=>D.query(e)}).width}),q=(0,t.computed)(()=>{if(O.value,!g.value&&e.value.ssrRange&&!y.value){let{start:t,end:n}=e.value.ssrRange;if(e.value.direction===`vertical`||e.value.direction===`both`){if(L.value!==null){let r=n-t;return Math.max(0,r*(L.value+(e.value.gap||0))-(r>0&&e.value.gap||0))}let r=E.query(n)-E.query(t);return Math.max(0,r-(n>t&&e.value.gap||0))}}return _({direction:e.value.direction||`vertical`,itemsLength:e.value.items.length,columnCount:e.value.columnCount||0,fixedSize:L.value,fixedWidth:R.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,usableWidth:W.value,usableHeight:G.value,queryY:e=>E.query(e),queryX:e=>T.query(e),queryColumn:e=>D.query(e)}).height}),J=(0,t.computed)(()=>{let t=e.value.direction===`horizontal`||e.value.direction===`both`?l(e.value.scrollPaddingStart,e.value.direction):0;return Math.max(0,r.value+t-S.x)}),Y=(0,t.computed)(()=>{let t=e.value.direction===`vertical`||e.value.direction===`both`?u(e.value.scrollPaddingStart,e.value.direction):0;return Math.max(0,i.value+t-S.y)}),ne=t=>{O.value;let n=e.value.columnWidth;if(typeof n==`number`&&n>0)return n;if(Array.isArray(n)&&n.length>0){let r=n[t%n.length];return r!=null&&r>0?r:e.value.defaultColumnWidth||100}return typeof n==`function`?n(t):D.get(t)||e.value.defaultColumnWidth||100},X=(t,n,a)=>{let o=typeof a==`object`&&a&&`isCorrection`in a?a.isCorrection:!1,l=e.value.container||window,u=e.value.direction===`vertical`||e.value.direction===`both`,f=e.value.direction===`horizontal`||e.value.direction===`both`,{targetX:p,targetY:m,effectiveAlignX:h,effectiveAlignY:g}=d({rowIndex:t,colIndex:n,options:a,itemsLength:e.value.items.length,columnCount:e.value.columnCount||0,direction:e.value.direction||`vertical`,usableWidth:W.value,usableHeight:G.value,totalWidth:K.value,totalHeight:q.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,fixedSize:L.value,fixedWidth:R.value,relativeScrollX:J.value,relativeScrollY:Y.value,getItemSizeY:e=>E.get(e),getItemSizeX:e=>T.get(e),getItemQueryY:e=>E.query(e),getItemQueryX:e=>T.query(e),getColumnSize:e=>D.get(e),getColumnQuery:e=>D.query(e),stickyIndices:B.value});if(!o){let e=c(a)?a.behavior:void 0;M.value={rowIndex:t,colIndex:n,options:{align:{x:h,y:g},...e==null?{}:{behavior:e}}}}let _=p+S.x-(f?V.value:0),v=m+S.y-(u?H.value:0),y;c(a)&&(y=a.behavior);let b=o?`auto`:y||`smooth`;if(w.value=!0,typeof window<`u`&&l===window)window.scrollTo({left:n==null?void 0:Math.max(0,_),top:t==null?void 0:Math.max(0,v),behavior:b});else if(s(l)){let e={behavior:b};n!=null&&(e.left=Math.max(0,_)),t!=null&&(e.top=Math.max(0,v)),typeof l.scrollTo==`function`?l.scrollTo(e):(e.left!==void 0&&(l.scrollLeft=e.left),e.top!==void 0&&(l.scrollTop=e.top))}(b===`auto`||b===void 0)&&(n!=null&&(r.value=Math.max(0,_)),t!=null&&(i.value=Math.max(0,v)))},Z=(t,n,a)=>{let o=e.value.container||window;w.value=!0;let c=e.value.direction===`vertical`||e.value.direction===`both`,l=e.value.direction===`horizontal`||e.value.direction===`both`,u=t==null?null:l?Math.max(0,Math.min(t,Math.max(0,K.value-W.value))):Math.max(0,t),d=n==null?null:c?Math.max(0,Math.min(n,Math.max(0,q.value-G.value))):Math.max(0,n),f=typeof window<`u`&&o===window?window.scrollX:o.scrollLeft,p=typeof window<`u`&&o===window?window.scrollY:o.scrollTop,m=u===null?f:u+S.x-(l?V.value:0),h=d===null?p:d+S.y-(c?H.value:0);if(typeof window<`u`&&o===window)window.scrollTo({left:t==null?void 0:m,top:n==null?void 0:h,behavior:a?.behavior||`auto`});else if(s(o)){let e={behavior:a?.behavior||`auto`};t!=null&&(e.left=m),n!=null&&(e.top=h),typeof o.scrollTo==`function`?o.scrollTo(e):(e.left!==void 0&&(o.scrollLeft=e.left),e.top!==void 0&&(o.scrollTop=e.top))}(a?.behavior===`auto`||a?.behavior===void 0)&&(t!=null&&(r.value=m),n!=null&&(i.value=h))},re=()=>{let n=e.value.items,r=n.length,i=e.value.columnCount||0;if(T.resize(r),E.resize(r),D.resize(i),A.length!==r){let e=new Uint8Array(r);e.set(A.subarray(0,Math.min(r,A.length))),A=e}if(j.length!==r){let e=new Uint8Array(r);e.set(j.subarray(0,Math.min(r,j.length))),j=e}if(k.length!==i){let e=new Uint8Array(i);e.set(k.subarray(0,Math.min(i,k.length))),k=e}let a=0;if(e.value.restoreScrollOnPrepend&&P.length>0&&r>P.length){let e=P[0];if(e!==void 0){for(let t=1;t<=r-P.length;t++)if(n[t]===e){a=t;break}}}if(a>0){T.shift(a),E.shift(a),M.value&&M.value.rowIndex!==null&&M.value.rowIndex!==void 0&&(M.value.rowIndex+=a);let i=new Uint8Array(r),o=new Uint8Array(r);i.set(A.subarray(0,Math.min(r-a,A.length)),a),o.set(j.subarray(0,Math.min(r-a,j.length)),a),A=i,j=o;let s=e.value.gap||0,c=e.value.columnGap||0,l=0,u=0;for(let t=0;t<a;t++){let r=typeof e.value.itemSize==`function`?e.value.itemSize(n[t],t):z.value;e.value.direction===`horizontal`?l+=r+c:u+=r+s}(l>0||u>0)&&(0,t.nextTick)(()=>{Z(l>0?J.value+l:null,u>0?Y.value+u:null,{behavior:`auto`})})}if(i>0){let t=e.value.columnGap||0,n=!1,r=e.value.columnWidth;for(let a=0;a<i;a++){let i=D.get(a),o=k[a]===1;if(!I.value||!o&&i===0){let o=0;o=typeof r==`number`&&r>0?r:Array.isArray(r)&&r.length>0?r[a%r.length]||e.value.defaultColumnWidth||100:typeof r==`function`?r(a):e.value.defaultColumnWidth||100;let s=o+t;Math.abs(i-s)>.5?(D.set(a,s),k[a]=I.value?0:1,n=!0):I.value||(k[a]=1)}}n&&D.rebuild()}let o=e.value.gap||0,s=e.value.columnGap||0,c=!1;for(let t=0;t<r;t++){let n=e.value.items[t],r=T.get(t),i=E.get(t),a=e.value.direction===`vertical`,l=e.value.direction===`horizontal`,u=e.value.direction===`both`,d=A[t]===1,f=j[t]===1;if(l){if(!F.value||!d&&r===0){let i=(typeof e.value.itemSize==`function`?e.value.itemSize(n,t):z.value)+s;Math.abs(r-i)>.5?(T.set(t,i),A[t]=F.value?0:1,c=!0):F.value||(A[t]=1)}}else r!==0&&(T.set(t,0),A[t]=0,c=!0);if(a||u){if(!F.value||!f&&i===0){let r=(typeof e.value.itemSize==`function`?e.value.itemSize(n,t):z.value)+o;Math.abs(i-r)>.5?(E.set(t,r),j[t]=F.value?0:1,c=!0):F.value||(j[t]=1)}}else i!==0&&(E.set(t,0),j[t]=0,c=!0)}c&&(T.rebuild(),E.rebuild()),P=[...n],N.value=!0,O.value++},Q=()=>{if(e.value.hostElement&&typeof window<`u`){let t=e.value.hostElement.getBoundingClientRect(),n=e.value.container||window,r=0,i=0;if(n===window)r=t.left+window.scrollX,i=t.top+window.scrollY;else if(n===e.value.hostElement)r=0,i=0;else if(o(n)){let e=n.getBoundingClientRect();r=t.left-e.left+n.scrollLeft,i=t.top-e.top+n.scrollTop}(Math.abs(S.x-r)>.1||Math.abs(S.y-i)>.1)&&(S.x=r,S.y=i)}};(0,t.watch)([()=>e.value.items,()=>e.value.items.length,()=>e.value.direction,()=>e.value.columnCount,()=>e.value.columnWidth,()=>e.value.itemSize,()=>e.value.gap,()=>e.value.columnGap,()=>e.value.defaultItemSize,()=>e.value.defaultColumnWidth],re,{immediate:!0}),(0,t.watch)(()=>[e.value.container,e.value.hostElement],()=>{Q()});let ie=(0,t.computed)(()=>{if(O.value,(!g.value||v.value)&&e.value.ssrRange)return{start:e.value.ssrRange.start,end:e.value.ssrRange.end};let t=e.value.ssrRange&&!a.value?0:e.value.bufferBefore??5,n=e.value.bufferAfter??5;return f({direction:e.value.direction||`vertical`,relativeScrollX:J.value,relativeScrollY:Y.value,usableWidth:W.value,usableHeight:G.value,itemsLength:e.value.items.length,bufferBefore:t,bufferAfter:n,gap:e.value.gap||0,columnGap:e.value.columnGap||0,fixedSize:L.value,findLowerBoundY:e=>E.findLowerBound(e),findLowerBoundX:e=>T.findLowerBound(e),queryY:e=>E.query(e),queryX:e=>T.query(e)})}),ae=(0,t.computed)(()=>{O.value;let t=L.value,n=e.value.gap||0,r=e.value.columnGap||0;return e.value.direction===`horizontal`?t===null?T.findLowerBound(J.value):Math.floor(J.value/(t+r)):t===null?E.findLowerBound(Y.value):Math.floor(Y.value/(t+n))}),oe=[],se=(0,t.computed)(()=>{O.value;let{start:t,end:n}=ie.value,r=[],i=L.value,a=e.value.gap||0,o=e.value.columnGap||0,s=B.value,c=ee.value,l=new Set;for(let e=t;e<n;e++)l.add(e);if(g.value||!e.value.ssrRange){let e=ae.value,r,i=0,a=s.length-1;for(;i<=a;){let t=i+a>>>1;s[t]<e?(r=s[t],i=t+1):a=t-1}r!==void 0&&l.add(r);let o=0,c=s.length-1,u=-1;for(;o<=c;){let e=o+c>>>1;s[e]>=t?(u=e,c=e-1):o=e+1}if(u!==-1)for(let e=u;e<s.length;e++){let t=s[e];if(t>=n)break;l.add(t)}}let u=Array.from(l).sort((e,t)=>e-t),d=e.value.ssrRange?.start||0,f=e.value.ssrRange?.colStart||0,p=0,_=0;!g.value&&e.value.ssrRange&&(_=e.value.direction===`vertical`||e.value.direction===`both`?i===null?E.query(d):d*(i+a):0,e.value.direction===`horizontal`?p=i===null?T.query(f):f*(i+o):e.value.direction===`both`&&(p=D.query(f)));let v=new Map(oe.map(e=>[e.index,e]));for(let t of u){let n=e.value.items[t];if(n===void 0)continue;let{x:i,y:a,width:o,height:l}=h({index:t,direction:e.value.direction||`vertical`,fixedSize:L.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,usableWidth:W.value,usableHeight:G.value,totalWidth:K.value,queryY:e=>E.query(e),queryX:e=>T.query(e),getSizeY:e=>E.get(e),getSizeX:e=>T.get(e)}),u=c.has(t),d=i,f=a,{isStickyActive:g,stickyOffset:y}=m({index:t,isSticky:u,direction:e.value.direction||`vertical`,relativeScrollX:J.value,relativeScrollY:Y.value,originalX:d,originalY:f,width:o,height:l,stickyIndices:s,fixedSize:L.value,fixedWidth:R.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,getItemQueryY:e=>E.query(e),getItemQueryX:e=>T.query(e)}),b=d-p,x=f-_,S=v.get(t);S&&S.item===n&&S.offset.x===b&&S.offset.y===x&&S.size.width===o&&S.size.height===l&&S.isSticky===u&&S.isStickyActive===g&&S.stickyOffset.x===y.x&&S.stickyOffset.y===y.y?r.push(S):r.push({item:n,index:t,offset:{x:b,y:x},size:{width:o,height:l},originalX:d,originalY:f,isSticky:u,isStickyActive:g,stickyOffset:y})}return oe=r,r}),ce=(0,t.computed)(()=>{O.value;let t=e.value.columnCount||0;if(!t)return{start:0,end:0,padStart:0,padEnd:0};if((!g.value||v.value)&&e.value.ssrRange){let{colStart:n=0,colEnd:r=0}=e.value.ssrRange;return{start:Math.max(0,n),end:Math.min(t,r||t),padStart:0,padEnd:0}}let n=e.value.ssrRange&&!a.value?0:2;return p({columnCount:t,relativeScrollX:J.value,usableWidth:W.value,colBuffer:n,fixedWidth:R.value,columnGap:e.value.columnGap||0,findLowerBound:e=>D.findLowerBound(e),query:e=>D.query(e),totalColsQuery:()=>D.query(t)})}),le=(0,t.computed)(()=>{O.value;let t=L.value,n=e.value.columnGap||0,r=0;return e.value.direction===`horizontal`?r=t===null?T.findLowerBound(J.value):Math.floor(J.value/(t+n)):e.value.direction===`both`&&(r=D.findLowerBound(J.value)),{items:se.value,currentIndex:ae.value,currentColIndex:r,scrollOffset:{x:J.value,y:Y.value},viewportSize:{width:b.value,height:x.value},totalSize:{width:K.value,height:q.value},isScrolling:a.value,isProgrammaticScroll:w.value,range:ie.value,columnRange:ce.value}}),ue=()=>{w.value=!1,M.value=null},$=e=>{let t=e.target;typeof window>`u`||(t===window||t===document?(r.value=window.scrollX,i.value=window.scrollY,b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight):s(t)&&(r.value=t.scrollLeft,i.value=t.scrollTop,b.value=t.clientWidth,x.value=t.clientHeight),a.value||=(w.value||(M.value=null),!0),clearTimeout(C),C=setTimeout(()=>{a.value=!1,w.value=!1},250))},de=t=>{let n=!1,r=0,i=0,a=e.value.gap||0,o=e.value.columnGap||0,s=J.value,c=Y.value,l=e.value.direction===`horizontal`?L.value===null?T.findLowerBound(s):Math.floor(s/(L.value+o)):L.value===null?E.findLowerBound(c):Math.floor(c/(L.value+a)),u=e.value.direction===`both`?D.findLowerBound(s):e.value.direction===`horizontal`?l:0,d=e.value.direction===`horizontal`,f=e.value.direction===`vertical`,p=e.value.direction===`both`,m=new Set,h=new Set;for(let{index:s,inlineSize:c,blockSize:g,element:_}of t){if(c<=0&&g<=0)continue;let t=F.value||typeof e.value.itemSize==`function`;if(s>=0&&!m.has(s)&&t&&g>0){if(m.add(s),d&&c>0){let e=T.get(s),t=c+o;if(!A[s]||Math.abs(t-e)>.1){let i=t-e;T.update(s,i),A[s]=1,n=!0,s<l&&(r+=i)}}if(f||p){let e=E.get(s),t=g+a;if(!j[s]||Math.abs(t-e)>.1){let r=t-e;E.update(s,r),j[s]=1,n=!0,s<l&&(i+=r)}}}let v=I.value||typeof e.value.columnWidth==`function`;if(p&&_&&e.value.columnCount&&v&&(c>0||_.dataset.colIndex===void 0)){let t=_.dataset.colIndex;if(t!=null){let i=Number.parseInt(t,10);if(i>=0&&i<(e.value.columnCount||0)&&!h.has(i)){h.add(i);let e=D.get(i),t=c+o;if(!k[i]||Math.abs(e-t)>.1){let a=t-e;Math.abs(a)>.1&&(D.update(i,a),n=!0,i<u&&(r+=a)),k[i]=1}}}else{let t=_.dataset.colIndex===void 0?Array.from(_.querySelectorAll(`[data-col-index]`)):[_];for(let i of t){let t=Number.parseInt(i.dataset.colIndex,10);if(t>=0&&t<(e.value.columnCount||0)&&!h.has(t)){h.add(t);let e=i.getBoundingClientRect().width,a=D.get(t),s=e+o;if(!k[t]||Math.abs(a-s)>.1){let e=s-a;Math.abs(e)>.1&&(D.update(t,e),n=!0,t<u&&(r+=e)),k[t]=1}}}}}}n&&(O.value++,!(M.value!==null||w.value)&&(r!==0||i!==0)&&Z(r===0?null:s+r,i===0?null:c+i,{behavior:`auto`}))},fe=(e,t,n,r)=>{de([{index:e,inlineSize:t,blockSize:n,element:r}])},pe=()=>{if(M.value&&!v.value){let{rowIndex:t,colIndex:n,options:r}=M.value;if(c(r)&&r.behavior===`smooth`&&a.value)return;let{targetX:i,targetY:o}=d({rowIndex:t,colIndex:n,options:r,itemsLength:e.value.items.length,columnCount:e.value.columnCount||0,direction:e.value.direction||`vertical`,usableWidth:W.value,usableHeight:G.value,totalWidth:K.value,totalHeight:q.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,fixedSize:L.value,fixedWidth:R.value,relativeScrollX:J.value,relativeScrollY:Y.value,getItemSizeY:e=>E.get(e),getItemSizeX:e=>T.get(e),getItemQueryY:e=>E.query(e),getItemQueryX:e=>T.query(e),getColumnSize:e=>D.get(e),getColumnQuery:e=>D.query(e),stickyIndices:B.value}),s=n==null||Math.abs(J.value-i)<1,l=t==null||Math.abs(Y.value-o)<1,u=n==null||n===void 0||k[n]===1,f=t==null||t===void 0||j[t]===1;s&&l?u&&f&&(M.value=null):X(t,n,c(r)?{...r,isCorrection:!0}:{align:r,isCorrection:!0})}};(0,t.watch)([O,b,x],pe),(0,t.watch)(a,e=>{e||pe()});let me=null,he=e=>{if(!e||typeof window>`u`)return;let t=e===window?document:e;if(t.addEventListener(`scroll`,$,{passive:!0}),e===window){b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight,r.value=window.scrollX,i.value=window.scrollY;let e=()=>{b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight,Q()};return window.addEventListener(`resize`,e),()=>{t.removeEventListener(`scroll`,$),window.removeEventListener(`resize`,e)}}else return b.value=e.clientWidth,x.value=e.clientHeight,r.value=e.scrollLeft,i.value=e.scrollTop,me=new ResizeObserver(t=>{for(let n of t)n.target===e&&(b.value=e.clientWidth,x.value=e.clientHeight,Q())}),me.observe(e),()=>{t.removeEventListener(`scroll`,$),me?.disconnect()}},ge;return(0,t.getCurrentInstance)()&&((0,t.onMounted)(()=>{y.value=!0,(0,t.watch)(()=>e.value.container,e=>{ge?.(),ge=he(e||null)},{immediate:!0}),Q(),e.value.ssrRange||e.value.initialScrollIndex!==void 0?(0,t.nextTick)(()=>{Q();let n=e.value.initialScrollIndex===void 0?e.value.ssrRange?.start:e.value.initialScrollIndex,r=e.value.initialScrollAlign||`start`;n!=null&&X(n,e.value.ssrRange?.colStart,{align:r,behavior:`auto`}),g.value=!0,v.value=!0,(0,t.nextTick)(()=>{v.value=!1})}):g.value=!0}),(0,t.onUnmounted)(()=>{ge?.()})),{renderedItems:se,totalWidth:K,totalHeight:q,scrollDetails:le,scrollToIndex:X,scrollToOffset:Z,stopProgrammaticScroll:ue,updateItemSize:fe,updateItemSizes:de,updateHostOffset:Q,columnRange:ce,getColumnWidth:ne,refresh:()=>{T.resize(0),E.resize(0),D.resize(0),k.fill(0),A.fill(0),j.fill(0),re()},isHydrated:g}}var y={key:0,class:`virtual-scroll-debug-info`},b=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`VirtualScroll`,props:{items:{},itemSize:{},direction:{default:`vertical`},bufferBefore:{default:5},bufferAfter:{default:5},container:{},ssrRange:{},columnCount:{default:0},columnWidth:{},containerTag:{default:`div`},wrapperTag:{default:`div`},itemTag:{default:`div`},scrollPaddingStart:{default:0},scrollPaddingEnd:{default:0},stickyHeader:{type:Boolean,default:!1},stickyFooter:{type:Boolean,default:!1},gap:{default:0},columnGap:{default:0},stickyIndices:{default:()=>[]},loadDistance:{default:200},loading:{type:Boolean,default:!1},restoreScrollOnPrepend:{type:Boolean,default:!1},initialScrollIndex:{},initialScrollAlign:{},defaultItemSize:{},defaultColumnWidth:{},debug:{type:Boolean,default:!1}},emits:[`scroll`,`load`,`visibleRangeChange`],setup(e,{expose:n,emit:r}){let i=e,o=r,s=(0,t.useSlots)(),c=(0,t.ref)(null),l=(0,t.ref)(null),u=(0,t.ref)(null),d=(0,t.ref)(null),f=new Map,p=(0,t.ref)(0),m=(0,t.ref)(0),h=(0,t.computed)(()=>{let e=i.container===void 0?c.value:i.container;return e===c.value||typeof window<`u`&&(e===window||e===null)}),_=(0,t.computed)(()=>{let e=i.scrollPaddingStart,t=i.scrollPaddingEnd;i.items.length;let n=typeof e==`object`?e.x||0:(i.direction===`horizontal`||i.direction===`both`)&&e||0,r=typeof e==`object`?e.y||0:(i.direction===`vertical`||i.direction===`both`)&&e||0,a=typeof t==`object`?t.x||0:(i.direction===`horizontal`||i.direction===`both`)&&t||0,o=typeof t==`object`?t.y||0:(i.direction===`vertical`||i.direction===`both`)&&t||0;return{items:i.items,itemSize:i.itemSize,direction:i.direction,bufferBefore:i.bufferBefore,bufferAfter:i.bufferAfter,container:i.container===void 0?c.value:i.container,hostElement:l.value,ssrRange:i.ssrRange,columnCount:i.columnCount,columnWidth:i.columnWidth,scrollPaddingStart:{x:n,y:r+(i.stickyHeader&&h.value?p.value:0)},scrollPaddingEnd:{x:a,y:o+(i.stickyFooter&&h.value?m.value:0)},gap:i.gap,columnGap:i.columnGap,stickyIndices:i.stickyIndices,loadDistance:i.loadDistance,loading:i.loading,restoreScrollOnPrepend:i.restoreScrollOnPrepend,initialScrollIndex:i.initialScrollIndex,initialScrollAlign:i.initialScrollAlign,defaultItemSize:i.defaultItemSize,defaultColumnWidth:i.defaultColumnWidth,debug:i.debug}}),{isHydrated:b,columnRange:x,renderedItems:S,scrollDetails:C,totalHeight:w,totalWidth:T,getColumnWidth:E,scrollToIndex:D,scrollToOffset:O,updateHostOffset:k,updateItemSizes:A,refresh:j,stopProgrammaticScroll:M}=v(_);function N(){j(),(0,t.nextTick)(()=>{let e=[];for(let[t,n]of f.entries())n&&e.push({index:t,inlineSize:n.offsetWidth,blockSize:n.offsetHeight,element:n});e.length>0&&A(e)})}(0,t.watch)(C,(e,t)=>{b.value&&(o(`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)&&o(`visibleRangeChange`,{start:e.range.start,end:e.range.end,colStart:e.columnRange.start,colEnd:e.columnRange.end}),!i.loading&&(i.direction!==`horizontal`&&e.totalSize.height-(e.scrollOffset.y+e.viewportSize.height)<=i.loadDistance&&o(`load`,`vertical`),i.direction!==`vertical`&&e.totalSize.width-(e.scrollOffset.x+e.viewportSize.width)<=i.loadDistance&&o(`load`,`horizontal`)))}),(0,t.watch)(b,e=>{e&&o(`visibleRangeChange`,{start:C.value.range.start,end:C.value.range.end,colStart:C.value.columnRange.start,colEnd:C.value.columnRange.end})},{once:!0});let P=typeof window>`u`?null:new ResizeObserver(k),F=typeof window>`u`?null:new ResizeObserver(e=>{let t=[];for(let n of e){let e=n.target,r=Number(e.dataset.index),i=e.dataset.colIndex,a=n.contentRect.width,o=n.contentRect.height;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({index:r,inlineSize:a,blockSize:o,element:e}):t.push({index:-1,inlineSize:a,blockSize:o,element:e})}t.length>0&&A(t)}),I=typeof window>`u`?null:new ResizeObserver(()=>{p.value=u.value?.offsetHeight||0,m.value=d.value?.offsetHeight||0,k()});(0,t.watch)(u,(e,t)=>{t&&I?.unobserve(t),e&&I?.observe(e)},{immediate:!0}),(0,t.watch)(d,(e,t)=>{t&&I?.unobserve(t),e&&I?.observe(e)},{immediate:!0}),(0,t.onMounted)(()=>{c.value&&P?.observe(c.value);for(let e of f.values())F?.observe(e),i.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>F?.observe(e))}),(0,t.watch)([c,l],([e],[t])=>{t&&P?.unobserve(t),e&&P?.observe(e)});function L(e,t){if(e)f.set(t,e),F?.observe(e),i.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>F?.observe(e));else{let e=f.get(t);e&&(F?.unobserve(e),i.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>F?.unobserve(e)),f.delete(t))}}function R(e){let{viewportSize:t,scrollOffset:n}=C.value,r=i.direction!==`vertical`,a=i.direction!==`horizontal`;switch(e.key){case`Home`:e.preventDefault(),M(),D(0,0,`start`);break;case`End`:{e.preventDefault(),M();let t=i.items.length-1,n=(i.columnCount||0)>0?i.columnCount-1:0;r?a?D(t,n,`end`):D(0,t,`end`):D(t,0,`end`);break}case`ArrowUp`:e.preventDefault(),M(),O(null,n.y-40);break;case`ArrowDown`:e.preventDefault(),M(),O(null,n.y+40);break;case`ArrowLeft`:e.preventDefault(),M(),O(n.x-40,null);break;case`ArrowRight`:e.preventDefault(),M(),O(n.x+40,null);break;case`PageUp`:e.preventDefault(),M(),O(!a&&r?n.x-t.width:null,a?n.y-t.height:null);break;case`PageDown`:e.preventDefault(),M(),O(!a&&r?n.x+t.width:null,a?n.y+t.height:null);break}}(0,t.onUnmounted)(()=>{P?.disconnect(),F?.disconnect(),I?.disconnect()});let z=(0,t.computed)(()=>a(i.container)),B=(0,t.computed)(()=>z.value?{...i.direction===`vertical`?{}:{whiteSpace:`nowrap`}}:i.containerTag===`table`?{minInlineSize:i.direction===`vertical`?`100%`:`auto`}:{...i.direction===`vertical`?{}:{whiteSpace:`nowrap`}}),ee=(0,t.computed)(()=>({inlineSize:i.direction===`vertical`?`100%`:`${T.value}px`,blockSize:i.direction===`horizontal`?`100%`:`${w.value}px`})),V=(0,t.computed)(()=>{let e=i.direction===`horizontal`;return{display:e?`inline-block`:`block`,...e?{blockSize:`100%`,verticalAlign:`top`}:{inlineSize:`100%`}}}),te=(0,t.computed)(()=>({inlineSize:i.direction===`vertical`?`1px`:`${T.value}px`,blockSize:i.direction===`horizontal`?`1px`:`${w.value}px`}));function H(e){return g({containerTag:i.containerTag,direction:i.direction,isHydrated:b.value,item:e,itemSize:i.itemSize,paddingStartX:_.value.scrollPaddingStart.x,paddingStartY:_.value.scrollPaddingStart.y})}let U=(0,t.computed)(()=>i.debug),W=(0,t.computed)(()=>i.containerTag===`table`),G=(0,t.computed)(()=>W.value?`thead`:`div`),K=(0,t.computed)(()=>W.value?`tfoot`:`div`);return n({scrollDetails:C,columnRange:x,getColumnWidth:E,scrollToIndex:D,scrollToOffset:O,refresh:N,stopProgrammaticScroll:M}),(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.containerTag),{ref_key:`hostRef`,ref:c,class:(0,t.normalizeClass)([`virtual-scroll-container`,[`virtual-scroll--${e.direction}`,{"virtual-scroll--hydrated":(0,t.unref)(b),"virtual-scroll--window":z.value,"virtual-scroll--table":W.value}]]),style:(0,t.normalizeStyle)(B.value),tabindex:`0`,onKeydown:R,onWheelPassive:(0,t.unref)(M),onPointerdownPassive:(0,t.unref)(M),onTouchstartPassive:(0,t.unref)(M)},{default:(0,t.withCtx)(()=>[s.header?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(G.value),{key:0,ref_key:`headerRef`,ref:u,class:(0,t.normalizeClass)([`virtual-scroll-header`,{"virtual-scroll--sticky":e.stickyHeader}])},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`header`,{},void 0,!0)]),_:3},8,[`class`])):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.wrapperTag),{ref_key:`wrapperRef`,ref:l,class:`virtual-scroll-wrapper`,style:(0,t.normalizeStyle)(ee.value)},{default:(0,t.withCtx)(()=>[W.value?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.itemTag),{key:0,class:`virtual-scroll-spacer`,style:(0,t.normalizeStyle)(te.value)},{default:(0,t.withCtx)(()=>[...r[0]||=[(0,t.createElementVNode)(`td`,{style:{padding:`0`,border:`none`,"block-size":`inherit`}},null,-1)]]),_:1},8,[`style`])):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(S),r=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.itemTag),{key:r.index,ref_for:!0,ref:e=>L(e,r.index),"data-index":r.index,class:(0,t.normalizeClass)([`virtual-scroll-item`,{"virtual-scroll--sticky":r.isStickyActive,"virtual-scroll--debug":U.value}]),style:(0,t.normalizeStyle)(H(r))},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`item`,{item:r.item,index:r.index,columnRange:(0,t.unref)(x),getColumnWidth:(0,t.unref)(E),isSticky:r.isSticky,isStickyActive:r.isStickyActive},void 0,!0),U.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,y,` #`+(0,t.toDisplayString)(r.index)+` (`+(0,t.toDisplayString)(Math.round(r.offset.x))+`, `+(0,t.toDisplayString)(Math.round(r.offset.y))+`) `,1)):(0,t.createCommentVNode)(``,!0)]),_:2},1032,[`data-index`,`class`,`style`]))),128))]),_:3},8,[`style`])),e.loading&&s.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`virtual-scroll-loading`,style:(0,t.normalizeStyle)(V.value)},[(0,t.renderSlot)(n.$slots,`loading`,{},void 0,!0)],4)):(0,t.createCommentVNode)(``,!0),s.footer?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(K.value),{key:2,ref_key:`footerRef`,ref:d,class:(0,t.normalizeClass)([`virtual-scroll-footer`,{"virtual-scroll--sticky":e.stickyFooter}])},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`footer`,{},void 0,!0)]),_:3},8,[`class`])):(0,t.createCommentVNode)(``,!0)]),_:3},40,[`class`,`style`,`onWheelPassive`,`onPointerdownPassive`,`onTouchstartPassive`]))}}),[[`__scopeId`,`data-v-922485f2`]]);e.DEFAULT_BUFFER=5,e.DEFAULT_COLUMN_WIDTH=100,e.DEFAULT_ITEM_SIZE=40,e.FenwickTree=n,e.VirtualScroll=b,e.calculateColumnRange=p,e.calculateItemPosition=h,e.calculateItemStyle=g,e.calculateRange=f,e.calculateScrollTarget=d,e.calculateStickyItem=m,e.calculateTotalSize=_,e.getPaddingX=l,e.getPaddingY=u,e.isBody=i,e.isElement=o,e.isScrollToIndexOptions=c,e.isScrollableElement=s,e.isWindow=r,e.isWindowLike=a,e.useVirtualScroll=v});
|
|
845
2
|
//# sourceMappingURL=index.js.map
|