@glhrmoura/vue-virtualize 0.1.3 → 0.1.5
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 +4 -2
- package/dist/components/VirtualTable.vue.d.ts +3 -3
- package/dist/composables/useVirtualGrid.d.ts +4 -2
- package/dist/composables/useVirtualList.d.ts +4 -3
- package/dist/composables/useVirtualTable.d.ts +2 -1
- package/dist/composables/useVirtualizer.d.ts +2 -1
- package/dist/core/scrolling.d.ts +5 -1
- package/dist/core/virtualizer.d.ts +1 -1
- package/dist/index.d.ts +15 -15
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +485 -422
- package/dist/index.mjs.map +1 -1
- package/dist/utils/dom.d.ts +1 -0
- package/dist/utils/layout.d.ts +1 -1
- package/dist/utils/same-items.d.ts +1 -1
- package/package.json +3 -2
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { shallowRef as
|
|
2
|
-
function
|
|
1
|
+
import { shallowRef as Me, ref as L, toValue as o, watch as ge, onBeforeUnmount as ve, computed as R, defineComponent as ie, openBlock as T, createBlock as Y, resolveDynamicComponent as q, normalizeStyle as F, withCtx as U, renderSlot as G, createElementBlock as $, Fragment as D, renderList as P, unref as K, mergeProps as ne, createElementVNode as ue, toDisplayString as ce, createTextVNode as Oe } from "vue";
|
|
2
|
+
function ee(e) {
|
|
3
3
|
return !Number.isFinite(e) || e < 0 ? 0 : e;
|
|
4
4
|
}
|
|
5
|
-
class
|
|
5
|
+
class Re {
|
|
6
6
|
sizes = /* @__PURE__ */ new Map();
|
|
7
7
|
divergent = !1;
|
|
8
8
|
get(t) {
|
|
@@ -30,32 +30,45 @@ class be {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
function
|
|
33
|
+
function Se(e, t, i) {
|
|
34
34
|
return Math.min(i, Math.max(t, e));
|
|
35
35
|
}
|
|
36
|
-
|
|
36
|
+
const Te = 16777216;
|
|
37
|
+
function H(e, t, i) {
|
|
37
38
|
const n = Math.max(0, t - Math.max(0, i));
|
|
38
|
-
return
|
|
39
|
+
return Se(Number.isFinite(e) ? e : 0, 0, n);
|
|
39
40
|
}
|
|
40
|
-
function
|
|
41
|
+
function N(e, t) {
|
|
42
|
+
const i = Math.max(0, Number.isFinite(e) ? e : 0), n = Math.min(i, Te);
|
|
43
|
+
return t === void 0 || !Number.isFinite(t) || t <= 0 ? n : Math.min(n, t);
|
|
44
|
+
}
|
|
45
|
+
function Ee(e, t, i, n) {
|
|
46
|
+
const r = Math.max(0, t - Math.max(0, n)), s = Math.max(0, i - Math.max(0, n));
|
|
47
|
+
return r <= 0 ? 0 : s <= 0 || s >= r ? H(e, t, n) : Math.max(0, e) / s * r;
|
|
48
|
+
}
|
|
49
|
+
function ke(e, t, i, n) {
|
|
50
|
+
const r = Math.max(0, t - Math.max(0, n)), s = Math.max(0, i - Math.max(0, n));
|
|
51
|
+
return s <= 0 ? 0 : r <= 0 || s >= r ? H(e, t, n) : H(e, t, n) / r * s;
|
|
52
|
+
}
|
|
53
|
+
function Ce(e, t, i) {
|
|
41
54
|
if (e <= 0) return 0;
|
|
42
55
|
let n = 0, r = e - 1, s = e - 1;
|
|
43
56
|
for (; n <= r; ) {
|
|
44
|
-
const
|
|
45
|
-
i(
|
|
57
|
+
const u = n + r >>> 1;
|
|
58
|
+
i(u) > t ? (s = u, r = u - 1) : n = u + 1;
|
|
46
59
|
}
|
|
47
60
|
return s;
|
|
48
61
|
}
|
|
49
|
-
function
|
|
62
|
+
function $e(e, t, i) {
|
|
50
63
|
if (e <= 0) return 0;
|
|
51
64
|
let n = 0, r = e - 1, s = 0;
|
|
52
65
|
for (; n <= r; ) {
|
|
53
|
-
const
|
|
54
|
-
i(
|
|
66
|
+
const u = n + r >>> 1;
|
|
67
|
+
i(u) < t ? (s = u, n = u + 1) : r = u - 1;
|
|
55
68
|
}
|
|
56
69
|
return s;
|
|
57
70
|
}
|
|
58
|
-
function
|
|
71
|
+
function Ve(e) {
|
|
59
72
|
const t = e.start + e.size;
|
|
60
73
|
let i = e.align;
|
|
61
74
|
if (i === "auto") {
|
|
@@ -65,7 +78,7 @@ function Re(e) {
|
|
|
65
78
|
}
|
|
66
79
|
return i === "center" ? e.start - (e.viewport - e.size) / 2 : i === "end" ? t - e.viewport : e.start;
|
|
67
80
|
}
|
|
68
|
-
class
|
|
81
|
+
class Ae {
|
|
69
82
|
count = 0;
|
|
70
83
|
estimateSize = () => 0;
|
|
71
84
|
overscan = 0;
|
|
@@ -77,14 +90,14 @@ class Te {
|
|
|
77
90
|
viewportSize = 0;
|
|
78
91
|
scrollOffset = 0;
|
|
79
92
|
getItemKey = (t) => t;
|
|
80
|
-
measurements = new
|
|
93
|
+
measurements = new Re();
|
|
81
94
|
built = 0;
|
|
82
95
|
offsets = [];
|
|
83
96
|
laneCursor = [];
|
|
84
97
|
laneEnd = [];
|
|
85
98
|
setOptions(t) {
|
|
86
|
-
const i = Math.max(1, Math.floor(t.lanes ?? 1)), n = t.gap ?? 0, r = t.paddingStart ?? 0, s = t.paddingEnd ?? 0,
|
|
87
|
-
this.count =
|
|
99
|
+
const i = Math.max(1, Math.floor(t.lanes ?? 1)), n = t.gap ?? 0, r = t.paddingStart ?? 0, s = t.paddingEnd ?? 0, u = Math.max(0, Math.floor(t.count)), p = t.itemSize === void 0 || t.itemSize === null ? null : ee(t.itemSize), x = this.itemSize, I = i !== this.lanes || n !== this.gap || r !== this.paddingStart || s !== this.paddingEnd || t.estimateSize !== this.estimateSize || p !== this.itemSize;
|
|
100
|
+
this.count = u, this.lanes = i, this.gap = n, this.paddingStart = r, this.paddingEnd = s, this.overscan = Math.max(0, Math.floor(t.overscan ?? 0)), this.estimateSize = t.estimateSize, this.itemSize = p, this.getItemKey = t.getItemKey ?? ((w) => w), t.viewportSize !== void 0 && (this.viewportSize = Math.max(0, t.viewportSize)), p !== x && this.measurements.clear(), this.measurements.trim(this.count, this.itemSize), (I || this.built > this.count) && this.resetGeometry();
|
|
88
101
|
}
|
|
89
102
|
setScrollOffset(t) {
|
|
90
103
|
this.scrollOffset = Number.isFinite(t) ? t : 0;
|
|
@@ -97,7 +110,7 @@ class Te {
|
|
|
97
110
|
}
|
|
98
111
|
measure(t, i) {
|
|
99
112
|
if (t < 0 || t >= this.count) return !1;
|
|
100
|
-
const n =
|
|
113
|
+
const n = ee(i), r = this.measurements.get(t);
|
|
101
114
|
if (r !== void 0 && Math.abs(r - n) < 0.5) return !1;
|
|
102
115
|
const s = this.getItemSize(t);
|
|
103
116
|
return this.measurements.set(t, n, this.itemSize), Math.abs(s - n) < 0.5 ? !1 : (this.resetGeometry(), !0);
|
|
@@ -107,7 +120,7 @@ class Te {
|
|
|
107
120
|
}
|
|
108
121
|
getItemSize(t) {
|
|
109
122
|
const i = this.measurements.get(t);
|
|
110
|
-
return i !== void 0 ? i : this.itemSize !== null ? this.itemSize :
|
|
123
|
+
return i !== void 0 ? i : this.itemSize !== null ? this.itemSize : ee(this.estimateSize(t));
|
|
111
124
|
}
|
|
112
125
|
getItemOffset(t) {
|
|
113
126
|
if (t <= 0 || this.count <= 0) return this.paddingStart;
|
|
@@ -124,8 +137,8 @@ class Te {
|
|
|
124
137
|
let i = this.paddingStart;
|
|
125
138
|
const n = this.itemSize ?? 0;
|
|
126
139
|
for (let r = 0; r < this.lanes && r < this.count; r += 1) {
|
|
127
|
-
const s = this.laneLength(r),
|
|
128
|
-
|
|
140
|
+
const s = this.laneLength(r), u = this.paddingStart + s * n + Math.max(0, s - 1) * this.gap;
|
|
141
|
+
u > i && (i = u);
|
|
129
142
|
}
|
|
130
143
|
return i + this.paddingEnd;
|
|
131
144
|
}
|
|
@@ -139,23 +152,23 @@ class Te {
|
|
|
139
152
|
}
|
|
140
153
|
getVirtualItems() {
|
|
141
154
|
if (this.count <= 0 || this.viewportSize <= 0) return [];
|
|
142
|
-
const t =
|
|
155
|
+
const t = H(this.scrollOffset, this.getTotalSize(), this.viewportSize), i = t + this.viewportSize, n = [];
|
|
143
156
|
for (let r = 0; r < this.lanes; r += 1) {
|
|
144
157
|
const s = this.laneLength(r);
|
|
145
158
|
if (s <= 0) continue;
|
|
146
|
-
const
|
|
147
|
-
const
|
|
148
|
-
return this.getItemOffset(
|
|
149
|
-
}),
|
|
159
|
+
const u = Ce(s, t, (w) => {
|
|
160
|
+
const b = this.ordinalIndex(r, w);
|
|
161
|
+
return this.getItemOffset(b) + this.getItemSize(b);
|
|
162
|
+
}), p = $e(
|
|
150
163
|
s,
|
|
151
164
|
i,
|
|
152
|
-
(
|
|
153
|
-
),
|
|
154
|
-
for (let
|
|
155
|
-
const
|
|
165
|
+
(w) => this.getItemOffset(this.ordinalIndex(r, w))
|
|
166
|
+
), x = Math.max(0, Math.min(u, p) - this.overscan), I = Math.min(s - 1, Math.max(u, p) + this.overscan);
|
|
167
|
+
for (let w = x; w <= I; w += 1) {
|
|
168
|
+
const b = this.ordinalIndex(r, w), E = this.getItemOffset(b), k = this.getItemSize(b);
|
|
156
169
|
n.push({
|
|
157
|
-
index:
|
|
158
|
-
key: this.getItemKey(
|
|
170
|
+
index: b,
|
|
171
|
+
key: this.getItemKey(b),
|
|
159
172
|
start: E,
|
|
160
173
|
size: k,
|
|
161
174
|
end: E + k,
|
|
@@ -167,14 +180,14 @@ class Te {
|
|
|
167
180
|
}
|
|
168
181
|
getOffsetForIndex(t, i = "auto") {
|
|
169
182
|
if (this.count <= 0) return 0;
|
|
170
|
-
const n =
|
|
183
|
+
const n = Se(t, 0, this.count - 1), r = this.getItemOffset(n), s = this.getItemSize(n), u = Ve({
|
|
171
184
|
start: r,
|
|
172
185
|
size: s,
|
|
173
186
|
viewport: this.viewportSize,
|
|
174
187
|
current: this.scrollOffset,
|
|
175
188
|
align: i
|
|
176
189
|
});
|
|
177
|
-
return
|
|
190
|
+
return H(u, this.getTotalSize(), this.viewportSize);
|
|
178
191
|
}
|
|
179
192
|
usesFixedPath() {
|
|
180
193
|
return this.itemSize !== null && !this.measurements.hasDivergent;
|
|
@@ -199,13 +212,13 @@ class Te {
|
|
|
199
212
|
this.built = 0, this.offsets = [], this.laneCursor = Array.from({ length: this.lanes }, () => this.paddingStart), this.laneEnd = Array.from({ length: this.lanes }, () => this.paddingStart);
|
|
200
213
|
}
|
|
201
214
|
}
|
|
202
|
-
function
|
|
215
|
+
function Z() {
|
|
203
216
|
return typeof window < "u" && typeof document < "u";
|
|
204
217
|
}
|
|
205
|
-
function
|
|
218
|
+
function ze(e) {
|
|
206
219
|
return typeof Element > "u" ? null : e instanceof Element ? e : null;
|
|
207
220
|
}
|
|
208
|
-
function
|
|
221
|
+
function Fe(e, t, i, n) {
|
|
209
222
|
if (n === "smooth" && typeof e.scrollTo == "function") {
|
|
210
223
|
e.scrollTo({
|
|
211
224
|
top: i ? e.scrollTop : t,
|
|
@@ -216,19 +229,22 @@ function X(e, t, i, n) {
|
|
|
216
229
|
}
|
|
217
230
|
i ? e.scrollLeft = t : e.scrollTop = t;
|
|
218
231
|
}
|
|
219
|
-
function
|
|
232
|
+
function fe(e, t) {
|
|
220
233
|
return t ? e.scrollLeft : e.scrollTop;
|
|
221
234
|
}
|
|
222
|
-
function
|
|
235
|
+
function de(e, t) {
|
|
223
236
|
return t ? e.clientWidth : e.clientHeight;
|
|
224
237
|
}
|
|
225
|
-
function
|
|
238
|
+
function Ke(e, t) {
|
|
239
|
+
return t ? e.scrollWidth : e.scrollHeight;
|
|
240
|
+
}
|
|
241
|
+
function Le(e) {
|
|
226
242
|
return typeof requestAnimationFrame == "function" ? requestAnimationFrame(e) : setTimeout(e, 0);
|
|
227
243
|
}
|
|
228
|
-
function
|
|
244
|
+
function je(e) {
|
|
229
245
|
e && (typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(e) : clearTimeout(e));
|
|
230
246
|
}
|
|
231
|
-
function
|
|
247
|
+
function Ge(e, t) {
|
|
232
248
|
if (e.length !== t.length) return !1;
|
|
233
249
|
for (let i = 0; i < e.length; i += 1) {
|
|
234
250
|
const n = e[i], r = t[i];
|
|
@@ -237,154 +253,179 @@ function Ee(e, t) {
|
|
|
237
253
|
}
|
|
238
254
|
return !0;
|
|
239
255
|
}
|
|
240
|
-
function
|
|
241
|
-
const t = new
|
|
242
|
-
let
|
|
243
|
-
const
|
|
244
|
-
function
|
|
245
|
-
const
|
|
246
|
-
return typeof HTMLElement > "u" ? null :
|
|
256
|
+
function te(e) {
|
|
257
|
+
const t = new Ae(), i = Me([]), n = L(0), r = L(0), s = L(0), u = L(!1), p = (a) => e.estimateSize(a);
|
|
258
|
+
let x = null, I = null, w = null, b = 0, E = 0, k = 0, f = o(e.revision);
|
|
259
|
+
const d = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), l = [];
|
|
260
|
+
function z() {
|
|
261
|
+
const a = o(e.container);
|
|
262
|
+
return typeof HTMLElement > "u" ? null : a instanceof HTMLElement ? a : null;
|
|
247
263
|
}
|
|
248
|
-
function
|
|
249
|
-
return
|
|
264
|
+
function m() {
|
|
265
|
+
return o(e.horizontal) ?? !1;
|
|
266
|
+
}
|
|
267
|
+
function j() {
|
|
268
|
+
const a = o(e.initialRect);
|
|
269
|
+
return a ? m() ? a.width : a.height : 0;
|
|
250
270
|
}
|
|
251
|
-
function
|
|
252
|
-
|
|
253
|
-
return c ? S() ? c.width : c.height : 0;
|
|
271
|
+
function X(a, c) {
|
|
272
|
+
return a ? N(c, Ke(a, m())) : N(c);
|
|
254
273
|
}
|
|
255
|
-
function
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
274
|
+
function _(a, c, g) {
|
|
275
|
+
return Ee(
|
|
276
|
+
fe(a, m()),
|
|
277
|
+
c,
|
|
278
|
+
X(a, c),
|
|
279
|
+
g
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
function v(a, c, g, M, O) {
|
|
283
|
+
Fe(
|
|
284
|
+
a,
|
|
285
|
+
ke(c, g, X(a, g), M),
|
|
286
|
+
m(),
|
|
287
|
+
O
|
|
288
|
+
);
|
|
289
|
+
}
|
|
290
|
+
function y() {
|
|
291
|
+
const a = o(e.revision);
|
|
292
|
+
Object.is(a, f) || (f = a, t.clearMeasurements());
|
|
293
|
+
const c = z(), g = c ? de(c, m()) : 0, M = o(e.viewportInset) ?? 0, O = Math.max(0, (g > 0 ? g : j()) - M), C = o(e.itemSize);
|
|
259
294
|
t.setOptions({
|
|
260
|
-
count:
|
|
261
|
-
estimateSize:
|
|
262
|
-
overscan:
|
|
263
|
-
gap:
|
|
264
|
-
paddingStart:
|
|
265
|
-
paddingEnd:
|
|
266
|
-
lanes:
|
|
267
|
-
itemSize:
|
|
295
|
+
count: o(e.count),
|
|
296
|
+
estimateSize: p,
|
|
297
|
+
overscan: (o(e.overscan) ?? 8) + k,
|
|
298
|
+
gap: o(e.gap) ?? 0,
|
|
299
|
+
paddingStart: o(e.paddingStart) ?? 0,
|
|
300
|
+
paddingEnd: o(e.paddingEnd) ?? 0,
|
|
301
|
+
lanes: o(e.lanes) ?? 1,
|
|
302
|
+
itemSize: C ?? null,
|
|
268
303
|
getItemKey: e.getItemKey,
|
|
269
|
-
viewportSize:
|
|
304
|
+
viewportSize: O
|
|
270
305
|
});
|
|
271
|
-
const
|
|
272
|
-
t.getScrollOffset() >
|
|
273
|
-
const
|
|
274
|
-
|
|
275
|
-
const
|
|
276
|
-
|
|
277
|
-
const
|
|
278
|
-
|
|
279
|
-
}
|
|
280
|
-
function
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
v || (v = ce(() => {
|
|
286
|
-
v = 0, s.value = !0, M(), typeof window < "u" && (window.clearTimeout(E), E = window.setTimeout(() => {
|
|
287
|
-
s.value = !1;
|
|
288
|
-
}, 150));
|
|
289
|
-
}));
|
|
306
|
+
const A = t.getTotalSize(), J = Math.max(0, A - O);
|
|
307
|
+
t.getScrollOffset() > J && (t.setScrollOffset(J), c && v(c, J, A, O, "auto"));
|
|
308
|
+
const ae = t.getVirtualItems();
|
|
309
|
+
Ge(i.value, ae) || (i.value = ae), n.value !== A && (n.value = A);
|
|
310
|
+
const Q = t.getScrollOffset();
|
|
311
|
+
r.value !== Q && (r.value = Q);
|
|
312
|
+
const le = c ? Q - fe(c, m()) : 0;
|
|
313
|
+
s.value !== le && (s.value = le);
|
|
314
|
+
}
|
|
315
|
+
function S() {
|
|
316
|
+
u.value = !1, k = 0;
|
|
317
|
+
for (const [a, c] of d)
|
|
318
|
+
l.push({ element: a, index: c });
|
|
319
|
+
se(), y();
|
|
290
320
|
}
|
|
291
|
-
function
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
const
|
|
299
|
-
|
|
300
|
-
}
|
|
301
|
-
function
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
321
|
+
function V() {
|
|
322
|
+
u.value = !0, !(typeof window > "u") && (window.clearTimeout(E), E = window.setTimeout(S, 120));
|
|
323
|
+
}
|
|
324
|
+
function B() {
|
|
325
|
+
const a = z();
|
|
326
|
+
if (!a) return;
|
|
327
|
+
V();
|
|
328
|
+
const c = t.getViewportSize(), g = t.getTotalSize(), M = _(a, g, c), O = t.getScrollOffset(), C = Math.max(1, o(e.itemSize) ?? 48);
|
|
329
|
+
k = Math.min(24, Math.ceil(Math.abs(M - O) / C)), t.setScrollOffset(M), y();
|
|
330
|
+
}
|
|
331
|
+
function we() {
|
|
332
|
+
const a = z();
|
|
333
|
+
if (a === x || (x && (x.removeEventListener("scroll", B), I?.disconnect(), I = null), x = a, !a || !Z())) return;
|
|
334
|
+
const c = t.getViewportSize(), g = t.getTotalSize();
|
|
335
|
+
t.getScrollOffset() > 0 ? v(a, t.getScrollOffset(), g, c, "auto") : t.setScrollOffset(_(a, g, c)), a.addEventListener("scroll", B, { passive: !0 }), typeof ResizeObserver < "u" && (I = new ResizeObserver(() => y()), I.observe(a));
|
|
336
|
+
}
|
|
337
|
+
function xe() {
|
|
338
|
+
return !Z() || typeof ResizeObserver > "u" ? null : (w || (w = new ResizeObserver((a) => {
|
|
339
|
+
const c = m();
|
|
340
|
+
let g = !1;
|
|
341
|
+
if (!u.value) {
|
|
342
|
+
for (const M of a) {
|
|
343
|
+
const O = d.get(M.target);
|
|
344
|
+
if (O === void 0) continue;
|
|
345
|
+
const C = M.borderBoxSize?.[0], A = Math.round(
|
|
346
|
+
c ? C?.inlineSize ?? M.contentRect.width : C?.blockSize ?? M.contentRect.height
|
|
347
|
+
);
|
|
348
|
+
A > 0 && t.measure(O, A) && (g = !0);
|
|
349
|
+
}
|
|
350
|
+
g && y();
|
|
310
351
|
}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
F > 0 && t.measure(O.index, F) && (x = !0);
|
|
352
|
+
})), w);
|
|
353
|
+
}
|
|
354
|
+
function se() {
|
|
355
|
+
if (b = 0, u.value) return;
|
|
356
|
+
const a = l.splice(0, l.length), c = m();
|
|
357
|
+
let g = !1;
|
|
358
|
+
for (const M of a) {
|
|
359
|
+
if (!M.element.isConnected) continue;
|
|
360
|
+
const O = M.element.getBoundingClientRect(), C = Math.round(c ? O.width : O.height);
|
|
361
|
+
C > 0 && t.measure(M.index, C) && (g = !0);
|
|
322
362
|
}
|
|
323
|
-
|
|
363
|
+
g && y();
|
|
324
364
|
}
|
|
325
|
-
function
|
|
326
|
-
const
|
|
327
|
-
|
|
365
|
+
function pe(a, c) {
|
|
366
|
+
const g = ze(a), M = xe(), O = h.get(c);
|
|
367
|
+
O && O !== g && (M?.unobserve(O), d.delete(O), h.delete(c)), g && (h.set(c, g), d.set(g, c), M?.observe(g), l.push({ element: g, index: c }), !(u.value || b) && (b = Le(se)));
|
|
328
368
|
}
|
|
329
|
-
function
|
|
330
|
-
const
|
|
331
|
-
t.setScrollOffset(
|
|
369
|
+
function oe(a, c = "auto") {
|
|
370
|
+
const g = z(), M = g ? de(g, m()) : 0, O = M > 0 ? M : t.getViewportSize(), C = t.getTotalSize(), A = H(a, C, O);
|
|
371
|
+
t.setScrollOffset(A), g && v(g, A, C, O, c), y();
|
|
332
372
|
}
|
|
333
|
-
function
|
|
334
|
-
const
|
|
335
|
-
|
|
373
|
+
function be(a, c) {
|
|
374
|
+
const g = t.getOffsetForIndex(a, c?.align ?? "auto");
|
|
375
|
+
oe(g, c?.behavior ?? "auto");
|
|
336
376
|
}
|
|
337
|
-
function
|
|
338
|
-
t.measure(
|
|
377
|
+
function Ie(a, c) {
|
|
378
|
+
t.measure(a, c) && y();
|
|
339
379
|
}
|
|
340
|
-
return
|
|
380
|
+
return y(), ge(
|
|
341
381
|
() => [
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
382
|
+
o(e.count),
|
|
383
|
+
o(e.overscan),
|
|
384
|
+
o(e.gap),
|
|
385
|
+
o(e.paddingStart),
|
|
386
|
+
o(e.paddingEnd),
|
|
387
|
+
o(e.lanes),
|
|
388
|
+
o(e.horizontal),
|
|
389
|
+
o(e.itemSize),
|
|
390
|
+
o(e.viewportInset),
|
|
391
|
+
o(e.revision),
|
|
392
|
+
o(e.container),
|
|
393
|
+
o(e.initialRect)?.width,
|
|
394
|
+
o(e.initialRect)?.height
|
|
355
395
|
],
|
|
356
396
|
() => {
|
|
357
|
-
|
|
397
|
+
we(), y();
|
|
358
398
|
},
|
|
359
399
|
{ flush: "post" }
|
|
360
|
-
),
|
|
361
|
-
|
|
400
|
+
), ve(() => {
|
|
401
|
+
x && x.removeEventListener("scroll", B), I?.disconnect(), w?.disconnect(), je(b), typeof window < "u" && window.clearTimeout(E), d.clear(), h.clear(), l.length = 0;
|
|
362
402
|
}), {
|
|
363
|
-
virtualItems:
|
|
364
|
-
totalSize:
|
|
365
|
-
scrollOffset:
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
403
|
+
virtualItems: R(() => i.value),
|
|
404
|
+
totalSize: R(() => n.value),
|
|
405
|
+
scrollOffset: R(() => r.value),
|
|
406
|
+
scrollAdjust: R(() => s.value),
|
|
407
|
+
isScrolling: R(() => u.value),
|
|
408
|
+
scrollToIndex: be,
|
|
409
|
+
scrollToOffset: oe,
|
|
410
|
+
measure: Ie,
|
|
411
|
+
measureElement: pe
|
|
371
412
|
};
|
|
372
413
|
}
|
|
373
|
-
function
|
|
414
|
+
function Ne(e, t, i) {
|
|
374
415
|
return typeof e == "function" ? e(t, i) : typeof e == "number" ? e : 48;
|
|
375
416
|
}
|
|
376
|
-
function
|
|
377
|
-
const t =
|
|
378
|
-
count: () =>
|
|
417
|
+
function ye(e) {
|
|
418
|
+
const t = te({
|
|
419
|
+
count: () => o(e.items).length,
|
|
379
420
|
estimateSize: (n) => {
|
|
380
|
-
const r =
|
|
381
|
-
return
|
|
421
|
+
const r = o(e.items);
|
|
422
|
+
return Ne(e.estimateSize, n, r[n]);
|
|
382
423
|
},
|
|
383
424
|
getItemKey: (n) => {
|
|
384
|
-
const s =
|
|
425
|
+
const s = o(e.items)[n];
|
|
385
426
|
return e.getItemKey?.(s, n) ?? n;
|
|
386
427
|
},
|
|
387
|
-
itemSize: () => e.itemSize !== void 0 ?
|
|
428
|
+
itemSize: () => e.itemSize !== void 0 ? o(e.itemSize) : typeof e.estimateSize == "number" ? e.estimateSize : void 0,
|
|
388
429
|
container: e.container,
|
|
389
430
|
horizontal: e.horizontal,
|
|
390
431
|
overscan: e.overscan,
|
|
@@ -396,8 +437,8 @@ function ze(e) {
|
|
|
396
437
|
revision: e.revision
|
|
397
438
|
});
|
|
398
439
|
return {
|
|
399
|
-
virtualItems:
|
|
400
|
-
const n =
|
|
440
|
+
virtualItems: R(() => {
|
|
441
|
+
const n = o(e.items);
|
|
401
442
|
return t.virtualItems.value.map((r) => {
|
|
402
443
|
const s = n[r.index];
|
|
403
444
|
return {
|
|
@@ -409,6 +450,7 @@ function ze(e) {
|
|
|
409
450
|
}),
|
|
410
451
|
totalSize: t.totalSize,
|
|
411
452
|
scrollOffset: t.scrollOffset,
|
|
453
|
+
scrollAdjust: t.scrollAdjust,
|
|
412
454
|
isScrolling: t.isScrolling,
|
|
413
455
|
scrollToIndex: t.scrollToIndex,
|
|
414
456
|
scrollToOffset: t.scrollToOffset,
|
|
@@ -416,102 +458,104 @@ function ze(e) {
|
|
|
416
458
|
measureElement: t.measureElement
|
|
417
459
|
};
|
|
418
460
|
}
|
|
419
|
-
function
|
|
461
|
+
function he(e, t, i) {
|
|
420
462
|
return typeof e == "function" ? e(t) : typeof e == "number" ? e : i;
|
|
421
463
|
}
|
|
422
|
-
function
|
|
423
|
-
const t =
|
|
464
|
+
function Be(e) {
|
|
465
|
+
const t = R(() => Math.max(1, Math.floor(o(e.columnCount) || 1))), i = R(() => Math.ceil(o(e.items).length / t.value)), n = /* @__PURE__ */ new Map(), r = te({
|
|
424
466
|
count: () => i.value,
|
|
425
|
-
estimateSize: (
|
|
467
|
+
estimateSize: (f) => he(o(e.estimateRowSize), f, 48),
|
|
426
468
|
itemSize: () => {
|
|
427
|
-
const
|
|
428
|
-
return typeof
|
|
469
|
+
const f = o(e.estimateRowSize);
|
|
470
|
+
return typeof f == "number" ? f : void 0;
|
|
429
471
|
},
|
|
430
|
-
overscan: () =>
|
|
431
|
-
gap: () =>
|
|
472
|
+
overscan: () => o(e.overscanRows) ?? o(e.overscan) ?? 2,
|
|
473
|
+
gap: () => o(e.rowGap) ?? 0,
|
|
432
474
|
horizontal: !1,
|
|
433
475
|
container: e.container,
|
|
434
476
|
initialRect: e.initialRect,
|
|
435
477
|
revision: e.revision
|
|
436
|
-
}), s =
|
|
478
|
+
}), s = te({
|
|
437
479
|
count: () => t.value,
|
|
438
|
-
estimateSize: (
|
|
480
|
+
estimateSize: (f) => he(o(e.estimateColumnSize), f, 160),
|
|
439
481
|
itemSize: () => {
|
|
440
|
-
const
|
|
441
|
-
return typeof
|
|
482
|
+
const f = o(e.estimateColumnSize);
|
|
483
|
+
return typeof f == "number" ? f : void 0;
|
|
442
484
|
},
|
|
443
|
-
overscan: () =>
|
|
444
|
-
gap: () =>
|
|
485
|
+
overscan: () => o(e.overscanColumns) ?? o(e.overscan) ?? 1,
|
|
486
|
+
gap: () => o(e.columnGap) ?? 0,
|
|
445
487
|
horizontal: !0,
|
|
446
488
|
container: e.container,
|
|
447
489
|
initialRect: e.initialRect,
|
|
448
490
|
revision: e.revision
|
|
449
|
-
}),
|
|
450
|
-
const
|
|
451
|
-
for (const
|
|
452
|
-
for (const
|
|
453
|
-
const
|
|
454
|
-
if (
|
|
455
|
-
const
|
|
456
|
-
|
|
457
|
-
index:
|
|
458
|
-
key: e.getItemKey?.(
|
|
459
|
-
item:
|
|
460
|
-
row:
|
|
461
|
-
column:
|
|
491
|
+
}), u = R(() => {
|
|
492
|
+
const f = o(e.items), d = t.value, h = [];
|
|
493
|
+
for (const l of r.virtualItems.value)
|
|
494
|
+
for (const z of s.virtualItems.value) {
|
|
495
|
+
const m = l.index * d + z.index;
|
|
496
|
+
if (m >= f.length) continue;
|
|
497
|
+
const j = f[m];
|
|
498
|
+
h.push({
|
|
499
|
+
index: m,
|
|
500
|
+
key: e.getItemKey?.(j, m) ?? m,
|
|
501
|
+
item: j,
|
|
502
|
+
row: l,
|
|
503
|
+
column: z
|
|
462
504
|
});
|
|
463
505
|
}
|
|
464
|
-
return
|
|
506
|
+
return h;
|
|
465
507
|
});
|
|
466
|
-
function
|
|
467
|
-
const
|
|
468
|
-
if (!
|
|
469
|
-
const
|
|
470
|
-
r.scrollToIndex(Math.floor(
|
|
508
|
+
function p(f, d) {
|
|
509
|
+
const h = o(e.items);
|
|
510
|
+
if (!h.length) return;
|
|
511
|
+
const l = Math.min(Math.max(f, 0), h.length - 1), z = t.value;
|
|
512
|
+
r.scrollToIndex(Math.floor(l / z), d), s.scrollToIndex(l % z, d);
|
|
471
513
|
}
|
|
472
|
-
function
|
|
473
|
-
|
|
514
|
+
function x(f, d = "auto") {
|
|
515
|
+
f.top !== void 0 && r.scrollToOffset(f.top, d), f.left !== void 0 && s.scrollToOffset(f.left, d);
|
|
474
516
|
}
|
|
475
|
-
function
|
|
476
|
-
const
|
|
477
|
-
|
|
517
|
+
function I(f, d) {
|
|
518
|
+
const h = Math.max(n.get(f) ?? 0, d);
|
|
519
|
+
h <= 0 || h === n.get(f) || (n.set(f, h), r.measure(f, h));
|
|
478
520
|
}
|
|
479
|
-
let
|
|
480
|
-
const
|
|
521
|
+
let w = null;
|
|
522
|
+
const b = /* @__PURE__ */ new Map();
|
|
481
523
|
function E() {
|
|
482
|
-
return !
|
|
483
|
-
for (const
|
|
484
|
-
const
|
|
485
|
-
if (
|
|
486
|
-
const
|
|
487
|
-
|
|
524
|
+
return !Z() || typeof ResizeObserver > "u" ? null : (w || (w = new ResizeObserver((f) => {
|
|
525
|
+
for (const d of f) {
|
|
526
|
+
const h = b.get(d.target);
|
|
527
|
+
if (h === void 0) continue;
|
|
528
|
+
const z = d.borderBoxSize?.[0]?.blockSize ?? d.contentRect.height;
|
|
529
|
+
z > 0 && I(h, z);
|
|
488
530
|
}
|
|
489
|
-
})),
|
|
531
|
+
})), w);
|
|
490
532
|
}
|
|
491
|
-
function k(
|
|
492
|
-
const
|
|
493
|
-
if (!
|
|
494
|
-
|
|
495
|
-
const
|
|
496
|
-
|
|
533
|
+
function k(f, d) {
|
|
534
|
+
const h = ze(f), l = E();
|
|
535
|
+
if (!h) return;
|
|
536
|
+
b.set(h, d), l?.observe(h);
|
|
537
|
+
const z = h.getBoundingClientRect().height;
|
|
538
|
+
z > 0 && I(d, z);
|
|
497
539
|
}
|
|
498
|
-
return
|
|
499
|
-
|
|
540
|
+
return ve(() => {
|
|
541
|
+
w?.disconnect(), b.clear();
|
|
500
542
|
}), {
|
|
501
543
|
virtualRows: r.virtualItems,
|
|
502
544
|
virtualColumns: s.virtualItems,
|
|
503
|
-
virtualCells:
|
|
545
|
+
virtualCells: u,
|
|
504
546
|
totalHeight: r.totalSize,
|
|
505
547
|
totalWidth: s.totalSize,
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
548
|
+
scrollAdjustX: s.scrollAdjust,
|
|
549
|
+
scrollAdjustY: r.scrollAdjust,
|
|
550
|
+
scrollToIndex: p,
|
|
551
|
+
scrollToOffset: x,
|
|
552
|
+
measureRow: I,
|
|
509
553
|
measureRowElement: k,
|
|
510
554
|
measureColumn: s.measure
|
|
511
555
|
};
|
|
512
556
|
}
|
|
513
|
-
function
|
|
514
|
-
const t =
|
|
557
|
+
function He(e) {
|
|
558
|
+
const t = ye({
|
|
515
559
|
items: e.rows,
|
|
516
560
|
estimateSize: e.estimateRowSize,
|
|
517
561
|
container: e.container,
|
|
@@ -521,28 +565,29 @@ function Ce(e) {
|
|
|
521
565
|
viewportInset: e.viewportInset,
|
|
522
566
|
revision: e.revision,
|
|
523
567
|
itemSize: e.itemSize
|
|
524
|
-
}), i =
|
|
525
|
-
const s =
|
|
526
|
-
let
|
|
527
|
-
return s.map((
|
|
528
|
-
const
|
|
529
|
-
...
|
|
530
|
-
start:
|
|
531
|
-
size:
|
|
532
|
-
end:
|
|
568
|
+
}), i = R(() => {
|
|
569
|
+
const s = o(e.columns);
|
|
570
|
+
let u = 0;
|
|
571
|
+
return s.map((p) => {
|
|
572
|
+
const x = p.width ?? p.minWidth ?? 160, I = {
|
|
573
|
+
...p,
|
|
574
|
+
start: u,
|
|
575
|
+
size: x,
|
|
576
|
+
end: u + x
|
|
533
577
|
};
|
|
534
|
-
return
|
|
578
|
+
return u += x, I;
|
|
535
579
|
});
|
|
536
|
-
}), n =
|
|
580
|
+
}), n = R(() => {
|
|
537
581
|
const s = i.value;
|
|
538
582
|
return s.length ? s[s.length - 1]?.end ?? 0 : 0;
|
|
539
583
|
});
|
|
540
584
|
return {
|
|
541
|
-
virtualRows:
|
|
585
|
+
virtualRows: R(() => t.virtualItems.value),
|
|
542
586
|
columns: i,
|
|
543
587
|
totalHeight: t.totalSize,
|
|
544
588
|
totalWidth: n,
|
|
545
589
|
scrollOffset: t.scrollOffset,
|
|
590
|
+
scrollAdjust: t.scrollAdjust,
|
|
546
591
|
isScrolling: t.isScrolling,
|
|
547
592
|
scrollToIndex: t.scrollToIndex,
|
|
548
593
|
scrollToOffset: t.scrollToOffset,
|
|
@@ -550,11 +595,11 @@ function Ce(e) {
|
|
|
550
595
|
measureElement: t.measureElement
|
|
551
596
|
};
|
|
552
597
|
}
|
|
553
|
-
function
|
|
598
|
+
function me(e) {
|
|
554
599
|
if (typeof e == "number" && Number.isFinite(e)) return `${e}px`;
|
|
555
600
|
if (typeof e == "string" && e.trim()) return e;
|
|
556
601
|
}
|
|
557
|
-
function
|
|
602
|
+
function W(e) {
|
|
558
603
|
if (typeof e == "number" && Number.isFinite(e)) return e;
|
|
559
604
|
if (typeof e != "string") return 0;
|
|
560
605
|
const t = /^(-?\d+(?:\.\d+)?)px$/.exec(e.trim());
|
|
@@ -562,33 +607,37 @@ function N(e) {
|
|
|
562
607
|
const i = Number(t[1]);
|
|
563
608
|
return Number.isFinite(i) ? i : 0;
|
|
564
609
|
}
|
|
565
|
-
function
|
|
610
|
+
function re(e) {
|
|
566
611
|
return {
|
|
567
612
|
overflow: "auto",
|
|
568
613
|
position: "relative",
|
|
569
|
-
height:
|
|
570
|
-
width:
|
|
614
|
+
height: me(e.height) ?? (e.horizontal ? "100%" : void 0),
|
|
615
|
+
width: me(e.width) ?? (e.horizontal ? void 0 : "100%"),
|
|
571
616
|
overflowAnchor: "none"
|
|
572
617
|
};
|
|
573
618
|
}
|
|
574
|
-
function
|
|
619
|
+
function We(e, t) {
|
|
620
|
+
const i = N(e);
|
|
575
621
|
return {
|
|
576
622
|
position: "relative",
|
|
577
|
-
width: t ? `${
|
|
578
|
-
height: t ? "100%" : `${
|
|
623
|
+
width: t ? `${i}px` : "100%",
|
|
624
|
+
height: t ? "100%" : `${i}px`
|
|
579
625
|
};
|
|
580
626
|
}
|
|
581
|
-
function
|
|
627
|
+
function _e(e, t, i) {
|
|
582
628
|
return {
|
|
583
629
|
position: "absolute",
|
|
584
630
|
top: 0,
|
|
585
631
|
left: 0,
|
|
586
|
-
width: t ? void 0 : "100%",
|
|
587
|
-
height: t ? "100%" : void 0
|
|
588
|
-
transform: t ? `translateX(${e}px)` : `translateY(${e}px)
|
|
632
|
+
width: t ? i === void 0 ? void 0 : `${i}px` : "100%",
|
|
633
|
+
height: t ? "100%" : i === void 0 ? void 0 : `${i}px`,
|
|
634
|
+
transform: t ? `translateX(${e}px)` : `translateY(${e}px)`,
|
|
635
|
+
contain: "layout style",
|
|
636
|
+
boxSizing: "border-box",
|
|
637
|
+
overflow: "hidden"
|
|
589
638
|
};
|
|
590
639
|
}
|
|
591
|
-
const
|
|
640
|
+
const Ye = /* @__PURE__ */ ie({
|
|
592
641
|
__name: "VirtualList",
|
|
593
642
|
props: {
|
|
594
643
|
items: {},
|
|
@@ -596,7 +645,7 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
596
645
|
height: {},
|
|
597
646
|
width: {},
|
|
598
647
|
horizontal: { type: Boolean, default: !1 },
|
|
599
|
-
overscan: { default:
|
|
648
|
+
overscan: { default: 8 },
|
|
600
649
|
gap: { default: 0 },
|
|
601
650
|
paddingStart: { default: 0 },
|
|
602
651
|
paddingEnd: { default: 0 },
|
|
@@ -607,11 +656,11 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
607
656
|
revision: {}
|
|
608
657
|
},
|
|
609
658
|
setup(e, { expose: t }) {
|
|
610
|
-
const i = e, n = L(null), { virtualItems: r, totalSize: s, scrollToIndex:
|
|
659
|
+
const i = e, n = L(null), { virtualItems: r, totalSize: s, scrollAdjust: u, scrollToIndex: p, scrollToOffset: x, measure: I, measureElement: w } = ye({
|
|
611
660
|
items: () => i.items,
|
|
612
|
-
estimateSize: (
|
|
613
|
-
const
|
|
614
|
-
return typeof
|
|
661
|
+
estimateSize: (d, h) => {
|
|
662
|
+
const l = i.estimateSize;
|
|
663
|
+
return typeof l == "number" ? l : l(d, h);
|
|
615
664
|
},
|
|
616
665
|
itemSize: () => typeof i.estimateSize == "number" ? i.estimateSize : void 0,
|
|
617
666
|
container: n,
|
|
@@ -620,72 +669,72 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
620
669
|
gap: () => i.gap,
|
|
621
670
|
paddingStart: () => i.paddingStart,
|
|
622
671
|
paddingEnd: () => i.paddingEnd,
|
|
623
|
-
getItemKey: (
|
|
672
|
+
getItemKey: (d, h) => i.getItemKey?.(d, h) ?? h,
|
|
624
673
|
initialRect: () => ({
|
|
625
|
-
width:
|
|
626
|
-
height:
|
|
674
|
+
width: W(i.width),
|
|
675
|
+
height: W(i.height)
|
|
627
676
|
}),
|
|
628
677
|
revision: () => i.revision
|
|
629
|
-
}),
|
|
630
|
-
() =>
|
|
678
|
+
}), b = R(
|
|
679
|
+
() => re({
|
|
631
680
|
height: i.height,
|
|
632
681
|
width: i.width,
|
|
633
682
|
horizontal: i.horizontal
|
|
634
683
|
})
|
|
635
|
-
),
|
|
636
|
-
function
|
|
637
|
-
return
|
|
684
|
+
), E = R(() => We(s.value, i.horizontal));
|
|
685
|
+
function k(d, h) {
|
|
686
|
+
return _e(d, i.horizontal, h);
|
|
638
687
|
}
|
|
639
|
-
function
|
|
640
|
-
return (
|
|
641
|
-
|
|
688
|
+
function f(d) {
|
|
689
|
+
return (h) => {
|
|
690
|
+
w(h, d);
|
|
642
691
|
};
|
|
643
692
|
}
|
|
644
693
|
return t({
|
|
645
|
-
scrollToIndex:
|
|
646
|
-
scrollToOffset:
|
|
647
|
-
measure:
|
|
648
|
-
}), (
|
|
694
|
+
scrollToIndex: p,
|
|
695
|
+
scrollToOffset: x,
|
|
696
|
+
measure: I
|
|
697
|
+
}), (d, h) => (T(), Y(q(e.tag), {
|
|
649
698
|
ref_key: "container",
|
|
650
699
|
ref: n,
|
|
651
700
|
"data-virtual-container": "",
|
|
652
701
|
role: "list",
|
|
653
|
-
style:
|
|
702
|
+
style: F(b.value)
|
|
654
703
|
}, {
|
|
655
|
-
default:
|
|
656
|
-
e.items.length ? (
|
|
704
|
+
default: U(() => [
|
|
705
|
+
e.items.length ? (T(), $("div", {
|
|
657
706
|
key: 1,
|
|
658
707
|
"data-virtual-spacer": "",
|
|
659
|
-
style:
|
|
708
|
+
style: F(E.value)
|
|
660
709
|
}, [
|
|
661
|
-
(
|
|
662
|
-
key:
|
|
710
|
+
(T(!0), $(D, null, P(K(r), (l) => (T(), Y(q(e.itemTag), ne({
|
|
711
|
+
key: l.key,
|
|
663
712
|
ref_for: !0,
|
|
664
|
-
ref:
|
|
713
|
+
ref: f(l.index),
|
|
665
714
|
role: "listitem",
|
|
666
|
-
"data-index":
|
|
667
|
-
"data-key": String(
|
|
715
|
+
"data-index": l.index,
|
|
716
|
+
"data-key": String(l.key),
|
|
668
717
|
"aria-setsize": e.items.length,
|
|
669
|
-
"aria-posinset":
|
|
670
|
-
style:
|
|
718
|
+
"aria-posinset": l.index + 1,
|
|
719
|
+
style: k(l.start - K(u), l.size)
|
|
671
720
|
}, { ref_for: !0 }, e.itemAttrs), {
|
|
672
|
-
default:
|
|
673
|
-
|
|
674
|
-
item:
|
|
675
|
-
index:
|
|
676
|
-
start:
|
|
677
|
-
size:
|
|
678
|
-
end:
|
|
721
|
+
default: U(() => [
|
|
722
|
+
G(d.$slots, "default", {
|
|
723
|
+
item: l.item,
|
|
724
|
+
index: l.index,
|
|
725
|
+
start: l.start,
|
|
726
|
+
size: l.size,
|
|
727
|
+
end: l.end
|
|
679
728
|
})
|
|
680
729
|
]),
|
|
681
730
|
_: 2
|
|
682
731
|
}, 1040, ["data-index", "data-key", "aria-setsize", "aria-posinset", "style"]))), 128))
|
|
683
|
-
], 4)) :
|
|
732
|
+
], 4)) : G(d.$slots, "empty", {}, void 0, void 0, 0)
|
|
684
733
|
]),
|
|
685
734
|
_: 3
|
|
686
735
|
}, 8, ["style"]));
|
|
687
736
|
}
|
|
688
|
-
}),
|
|
737
|
+
}), De = ["data-index", "data-key"], qe = /* @__PURE__ */ ie({
|
|
689
738
|
__name: "VirtualGrid",
|
|
690
739
|
props: {
|
|
691
740
|
items: {},
|
|
@@ -708,12 +757,14 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
708
757
|
const i = e, n = L(null), {
|
|
709
758
|
virtualCells: r,
|
|
710
759
|
totalWidth: s,
|
|
711
|
-
totalHeight:
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
760
|
+
totalHeight: u,
|
|
761
|
+
scrollAdjustX: p,
|
|
762
|
+
scrollAdjustY: x,
|
|
763
|
+
scrollToIndex: I,
|
|
764
|
+
scrollToOffset: w,
|
|
765
|
+
measureRow: b,
|
|
766
|
+
measureRowElement: E
|
|
767
|
+
} = Be({
|
|
717
768
|
items: () => i.items,
|
|
718
769
|
columnCount: () => i.columnCount,
|
|
719
770
|
estimateRowSize: () => i.estimateRowSize,
|
|
@@ -724,78 +775,82 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
724
775
|
overscanColumns: () => i.overscanColumns,
|
|
725
776
|
rowGap: () => i.rowGap,
|
|
726
777
|
columnGap: () => i.columnGap,
|
|
727
|
-
getItemKey: (
|
|
778
|
+
getItemKey: (l, z) => i.getItemKey?.(l, z) ?? z,
|
|
728
779
|
initialRect: () => ({
|
|
729
|
-
width:
|
|
730
|
-
height:
|
|
780
|
+
width: W(i.width),
|
|
781
|
+
height: W(i.height)
|
|
731
782
|
}),
|
|
732
783
|
revision: () => i.revision
|
|
733
|
-
}),
|
|
734
|
-
() =>
|
|
784
|
+
}), k = R(
|
|
785
|
+
() => re({
|
|
735
786
|
height: i.height,
|
|
736
787
|
width: i.width,
|
|
737
788
|
horizontal: !1
|
|
738
789
|
})
|
|
739
|
-
),
|
|
790
|
+
), f = R(() => ({
|
|
740
791
|
position: "relative",
|
|
741
|
-
width: `${s.value}px`,
|
|
742
|
-
height: `${
|
|
792
|
+
width: `${N(s.value)}px`,
|
|
793
|
+
height: `${N(u.value)}px`
|
|
743
794
|
}));
|
|
744
|
-
function
|
|
745
|
-
return (
|
|
746
|
-
|
|
795
|
+
function d(l) {
|
|
796
|
+
return (z) => {
|
|
797
|
+
E(z, l);
|
|
747
798
|
};
|
|
748
799
|
}
|
|
749
|
-
function
|
|
800
|
+
function h(l, z, m, j) {
|
|
750
801
|
return {
|
|
751
802
|
position: "absolute",
|
|
752
803
|
top: 0,
|
|
753
804
|
left: 0,
|
|
754
|
-
width: `${
|
|
755
|
-
|
|
805
|
+
width: `${z}px`,
|
|
806
|
+
height: `${j}px`,
|
|
807
|
+
transform: `translate(${l}px, ${m}px)`,
|
|
808
|
+
contain: "layout style",
|
|
809
|
+
boxSizing: "border-box",
|
|
810
|
+
overflow: "hidden"
|
|
756
811
|
};
|
|
757
812
|
}
|
|
758
813
|
return t({
|
|
759
|
-
scrollToIndex:
|
|
760
|
-
scrollToOffset:
|
|
761
|
-
measureRow:
|
|
762
|
-
}), (
|
|
814
|
+
scrollToIndex: I,
|
|
815
|
+
scrollToOffset: w,
|
|
816
|
+
measureRow: b
|
|
817
|
+
}), (l, z) => (T(), Y(q(e.tag), {
|
|
763
818
|
ref_key: "container",
|
|
764
819
|
ref: n,
|
|
765
820
|
"data-virtual-container": "",
|
|
766
821
|
role: "grid",
|
|
767
|
-
style:
|
|
822
|
+
style: F(k.value)
|
|
768
823
|
}, {
|
|
769
|
-
default:
|
|
770
|
-
e.items.length ? (
|
|
824
|
+
default: U(() => [
|
|
825
|
+
e.items.length ? (T(), $("div", {
|
|
771
826
|
key: 1,
|
|
772
827
|
"data-virtual-spacer": "",
|
|
773
|
-
style:
|
|
828
|
+
style: F(f.value)
|
|
774
829
|
}, [
|
|
775
|
-
(
|
|
776
|
-
key:
|
|
830
|
+
(T(!0), $(D, null, P(K(r), (m) => (T(), $("div", ne({
|
|
831
|
+
key: m.key,
|
|
777
832
|
ref_for: !0,
|
|
778
|
-
ref:
|
|
833
|
+
ref: d(m.row.index),
|
|
779
834
|
role: "gridcell",
|
|
780
|
-
"data-index":
|
|
781
|
-
"data-key": String(
|
|
782
|
-
style:
|
|
835
|
+
"data-index": m.index,
|
|
836
|
+
"data-key": String(m.key),
|
|
837
|
+
style: h(m.column.start - K(p), m.column.size, m.row.start - K(x), m.row.size)
|
|
783
838
|
}, { ref_for: !0 }, e.itemAttrs), [
|
|
784
|
-
|
|
785
|
-
item:
|
|
786
|
-
index:
|
|
787
|
-
rowIndex:
|
|
788
|
-
columnIndex:
|
|
789
|
-
row:
|
|
790
|
-
column:
|
|
839
|
+
G(l.$slots, "default", {
|
|
840
|
+
item: m.item,
|
|
841
|
+
index: m.index,
|
|
842
|
+
rowIndex: m.row.index,
|
|
843
|
+
columnIndex: m.column.index,
|
|
844
|
+
row: m.row,
|
|
845
|
+
column: m.column
|
|
791
846
|
})
|
|
792
|
-
], 16,
|
|
793
|
-
], 4)) :
|
|
847
|
+
], 16, De))), 128))
|
|
848
|
+
], 4)) : G(l.$slots, "empty", {}, void 0, void 0, 0)
|
|
794
849
|
]),
|
|
795
850
|
_: 3
|
|
796
851
|
}, 8, ["style"]));
|
|
797
852
|
}
|
|
798
|
-
}),
|
|
853
|
+
}), Pe = ["data-index", "data-key", "aria-rowindex"], Ue = /* @__PURE__ */ ie({
|
|
799
854
|
__name: "VirtualTable",
|
|
800
855
|
props: {
|
|
801
856
|
rows: {},
|
|
@@ -803,7 +858,7 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
803
858
|
estimateRowSize: { type: [Number, Function], default: 44 },
|
|
804
859
|
height: {},
|
|
805
860
|
width: {},
|
|
806
|
-
overscan: { default:
|
|
861
|
+
overscan: { default: 8 },
|
|
807
862
|
getRowKey: {},
|
|
808
863
|
stickyHeader: { type: Boolean, default: !0 },
|
|
809
864
|
tag: { default: "div" },
|
|
@@ -812,145 +867,150 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
812
867
|
},
|
|
813
868
|
setup(e, { expose: t }) {
|
|
814
869
|
const i = e, n = L(null), r = L(null), s = L(0), {
|
|
815
|
-
virtualRows:
|
|
816
|
-
columns:
|
|
817
|
-
totalWidth:
|
|
818
|
-
totalHeight:
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
870
|
+
virtualRows: u,
|
|
871
|
+
columns: p,
|
|
872
|
+
totalWidth: x,
|
|
873
|
+
totalHeight: I,
|
|
874
|
+
scrollAdjust: w,
|
|
875
|
+
scrollToIndex: b,
|
|
876
|
+
scrollToOffset: E,
|
|
877
|
+
measure: k,
|
|
878
|
+
measureElement: f
|
|
879
|
+
} = He({
|
|
824
880
|
rows: () => i.rows,
|
|
825
881
|
columns: () => i.columns,
|
|
826
|
-
estimateRowSize: (
|
|
827
|
-
const
|
|
828
|
-
return typeof
|
|
882
|
+
estimateRowSize: (v, y) => {
|
|
883
|
+
const S = i.estimateRowSize;
|
|
884
|
+
return typeof S == "number" ? S : S(v, y);
|
|
829
885
|
},
|
|
830
886
|
container: n,
|
|
831
887
|
overscan: () => i.overscan,
|
|
832
|
-
getRowKey: (
|
|
888
|
+
getRowKey: (v, y) => i.getRowKey?.(v, y) ?? y,
|
|
833
889
|
initialRect: () => ({
|
|
834
|
-
width:
|
|
835
|
-
height:
|
|
890
|
+
width: W(i.width),
|
|
891
|
+
height: W(i.height)
|
|
836
892
|
}),
|
|
837
893
|
viewportInset: s,
|
|
838
894
|
revision: () => i.revision,
|
|
839
895
|
itemSize: () => typeof i.estimateRowSize == "number" ? i.estimateRowSize : void 0
|
|
840
896
|
});
|
|
841
|
-
|
|
842
|
-
if (
|
|
843
|
-
const
|
|
844
|
-
s.value =
|
|
845
|
-
},
|
|
846
|
-
|
|
897
|
+
ge(r, (v, y, S) => {
|
|
898
|
+
if (y === v && !v || !v || !Z() || typeof ResizeObserver > "u") return;
|
|
899
|
+
const V = () => {
|
|
900
|
+
s.value = v.getBoundingClientRect().height;
|
|
901
|
+
}, B = new ResizeObserver(V);
|
|
902
|
+
B.observe(v), V(), S(() => B.disconnect());
|
|
847
903
|
});
|
|
848
|
-
const
|
|
849
|
-
() =>
|
|
904
|
+
const d = R(
|
|
905
|
+
() => re({
|
|
850
906
|
height: i.height,
|
|
851
907
|
width: i.width,
|
|
852
908
|
horizontal: !1
|
|
853
909
|
})
|
|
854
|
-
),
|
|
855
|
-
minWidth: `${
|
|
856
|
-
})),
|
|
910
|
+
), h = R(() => ({
|
|
911
|
+
minWidth: `${x.value}px`
|
|
912
|
+
})), l = R(() => ({
|
|
857
913
|
position: i.stickyHeader ? "sticky" : "relative",
|
|
858
914
|
top: i.stickyHeader ? "0px" : void 0,
|
|
859
915
|
zIndex: 1,
|
|
860
916
|
display: "flex",
|
|
861
|
-
width: `${
|
|
862
|
-
})),
|
|
917
|
+
width: `${x.value}px`
|
|
918
|
+
})), z = R(() => ({
|
|
863
919
|
position: "relative",
|
|
864
|
-
height: `${
|
|
865
|
-
width: `${
|
|
920
|
+
height: `${N(I.value)}px`,
|
|
921
|
+
width: `${N(x.value)}px`
|
|
866
922
|
}));
|
|
867
|
-
function
|
|
923
|
+
function m(v) {
|
|
868
924
|
return {
|
|
869
|
-
width: `${
|
|
870
|
-
minWidth: `${
|
|
925
|
+
width: `${v.size}px`,
|
|
926
|
+
minWidth: `${v.size}px`,
|
|
871
927
|
flex: "0 0 auto",
|
|
872
|
-
textAlign:
|
|
928
|
+
textAlign: v.align ?? "left"
|
|
873
929
|
};
|
|
874
930
|
}
|
|
875
|
-
function
|
|
931
|
+
function j(v, y) {
|
|
876
932
|
return {
|
|
877
933
|
position: "absolute",
|
|
878
934
|
top: 0,
|
|
879
935
|
left: 0,
|
|
880
936
|
width: "100%",
|
|
937
|
+
height: `${y}px`,
|
|
881
938
|
display: "flex",
|
|
882
|
-
transform: `translateY(${
|
|
939
|
+
transform: `translateY(${v}px)`,
|
|
940
|
+
contain: "layout style",
|
|
941
|
+
boxSizing: "border-box",
|
|
942
|
+
overflow: "hidden"
|
|
883
943
|
};
|
|
884
944
|
}
|
|
885
|
-
function
|
|
886
|
-
return (
|
|
887
|
-
|
|
945
|
+
function X(v) {
|
|
946
|
+
return (y) => {
|
|
947
|
+
f(y, v);
|
|
888
948
|
};
|
|
889
949
|
}
|
|
890
|
-
function _(
|
|
891
|
-
return
|
|
950
|
+
function _(v, y, S) {
|
|
951
|
+
return y.accessor ? y.accessor(v, S) : v && typeof v == "object" && y.id in v ? v[y.id] : "";
|
|
892
952
|
}
|
|
893
953
|
return t({
|
|
894
|
-
scrollToIndex:
|
|
895
|
-
scrollToOffset:
|
|
896
|
-
measure:
|
|
897
|
-
}), (
|
|
954
|
+
scrollToIndex: b,
|
|
955
|
+
scrollToOffset: E,
|
|
956
|
+
measure: k
|
|
957
|
+
}), (v, y) => (T(), Y(q(e.tag), {
|
|
898
958
|
ref_key: "container",
|
|
899
959
|
ref: n,
|
|
900
960
|
"data-virtual-container": "",
|
|
901
961
|
role: "table",
|
|
902
|
-
style:
|
|
962
|
+
style: F(d.value)
|
|
903
963
|
}, {
|
|
904
|
-
default:
|
|
905
|
-
|
|
906
|
-
style:
|
|
964
|
+
default: U(() => [
|
|
965
|
+
ue("div", {
|
|
966
|
+
style: F(h.value)
|
|
907
967
|
}, [
|
|
908
|
-
|
|
968
|
+
ue("div", {
|
|
909
969
|
ref_key: "header",
|
|
910
970
|
ref: r,
|
|
911
971
|
role: "row",
|
|
912
|
-
style:
|
|
972
|
+
style: F(l.value)
|
|
913
973
|
}, [
|
|
914
|
-
|
|
915
|
-
(
|
|
916
|
-
key:
|
|
974
|
+
G(v.$slots, "header", { columns: K(p) }, () => [
|
|
975
|
+
(T(!0), $(D, null, P(K(p), (S) => (T(), $("div", {
|
|
976
|
+
key: S.id,
|
|
917
977
|
role: "columnheader",
|
|
918
|
-
style:
|
|
919
|
-
},
|
|
978
|
+
style: F(m(S))
|
|
979
|
+
}, ce(S.header), 5))), 128))
|
|
920
980
|
])
|
|
921
981
|
], 4),
|
|
922
|
-
e.rows.length ? (
|
|
982
|
+
e.rows.length ? (T(), $("div", {
|
|
923
983
|
key: 1,
|
|
924
984
|
"data-virtual-spacer": "",
|
|
925
985
|
role: "rowgroup",
|
|
926
|
-
style:
|
|
986
|
+
style: F(z.value)
|
|
927
987
|
}, [
|
|
928
|
-
(
|
|
929
|
-
key:
|
|
988
|
+
(T(!0), $(D, null, P(K(u), (S) => (T(), $("div", ne({
|
|
989
|
+
key: S.key,
|
|
930
990
|
ref_for: !0,
|
|
931
|
-
ref:
|
|
991
|
+
ref: X(S.index),
|
|
932
992
|
role: "row",
|
|
933
|
-
"data-index":
|
|
934
|
-
"data-key": String(
|
|
935
|
-
"aria-rowindex":
|
|
936
|
-
style:
|
|
993
|
+
"data-index": S.index,
|
|
994
|
+
"data-key": String(S.key),
|
|
995
|
+
"aria-rowindex": S.index + 1,
|
|
996
|
+
style: j(S.start - K(w), S.size)
|
|
937
997
|
}, { ref_for: !0 }, e.rowAttrs), [
|
|
938
|
-
(
|
|
939
|
-
key:
|
|
998
|
+
(T(!0), $(D, null, P(K(p), (V) => (T(), $("div", {
|
|
999
|
+
key: V.id,
|
|
940
1000
|
role: "cell",
|
|
941
|
-
style:
|
|
1001
|
+
style: F(m(V))
|
|
942
1002
|
}, [
|
|
943
|
-
|
|
944
|
-
row:
|
|
945
|
-
column:
|
|
946
|
-
rowIndex:
|
|
947
|
-
value: _(
|
|
1003
|
+
G(v.$slots, "cell", {
|
|
1004
|
+
row: S.item,
|
|
1005
|
+
column: V,
|
|
1006
|
+
rowIndex: S.index,
|
|
1007
|
+
value: _(S.item, V, S.index)
|
|
948
1008
|
}, () => [
|
|
949
|
-
|
|
1009
|
+
Oe(ce(_(S.item, V, S.index)), 1)
|
|
950
1010
|
])
|
|
951
1011
|
], 4))), 128))
|
|
952
|
-
], 16,
|
|
953
|
-
], 4)) :
|
|
1012
|
+
], 16, Pe))), 128))
|
|
1013
|
+
], 4)) : G(v.$slots, "empty", {}, void 0, void 0, 0)
|
|
954
1014
|
], 4)
|
|
955
1015
|
]),
|
|
956
1016
|
_: 3
|
|
@@ -958,17 +1018,20 @@ const Ae = /* @__PURE__ */ ee({
|
|
|
958
1018
|
}
|
|
959
1019
|
});
|
|
960
1020
|
export {
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
1021
|
+
Re as MeasurementCache,
|
|
1022
|
+
qe as VirtualGrid,
|
|
1023
|
+
Ye as VirtualList,
|
|
1024
|
+
Ue as VirtualTable,
|
|
1025
|
+
Ae as Virtualizer,
|
|
1026
|
+
H as clampScrollOffset,
|
|
1027
|
+
Ee as mapDomOffsetToVirtual,
|
|
1028
|
+
ke as mapVirtualOffsetToDom,
|
|
1029
|
+
ee as normalizeSize,
|
|
1030
|
+
Ve as resolveScrollOffset,
|
|
1031
|
+
N as scrollContentSize,
|
|
1032
|
+
Be as useVirtualGrid,
|
|
1033
|
+
ye as useVirtualList,
|
|
1034
|
+
He as useVirtualTable,
|
|
1035
|
+
te as useVirtualizer
|
|
973
1036
|
};
|
|
974
1037
|
//# sourceMappingURL=index.mjs.map
|