@pdanpdan/virtual-scroll 0.3.0 → 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 +160 -116
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +834 -145
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +639 -416
- package/dist/index.mjs.map +1 -1
- package/dist/virtual-scroll.css +1 -1
- package/package.json +1 -1
- package/src/components/VirtualScroll.test.ts +523 -731
- package/src/components/VirtualScroll.vue +343 -214
- package/src/composables/useVirtualScroll.test.ts +240 -1879
- package/src/composables/useVirtualScroll.ts +482 -554
- 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.d.ts
CHANGED
|
@@ -12,6 +12,115 @@ declare type __VLS_PrettifyLocal<T> = {
|
|
|
12
12
|
[K in keyof T]: T[K];
|
|
13
13
|
} & {};
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Calculates the range of columns to render for bidirectional scroll.
|
|
17
|
+
*
|
|
18
|
+
* @param params - The parameters for calculation.
|
|
19
|
+
* @returns The start and end indices and paddings for columns.
|
|
20
|
+
* @see ColumnRangeParams
|
|
21
|
+
* @see ColumnRange
|
|
22
|
+
*/
|
|
23
|
+
export declare function calculateColumnRange(params: ColumnRangeParams): {
|
|
24
|
+
start: number;
|
|
25
|
+
end: number;
|
|
26
|
+
padStart: number;
|
|
27
|
+
padEnd: number;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Calculates the position and size of a single item.
|
|
32
|
+
*
|
|
33
|
+
* @param params - The parameters for calculation.
|
|
34
|
+
* @returns Item position and size.
|
|
35
|
+
* @see ItemPositionParams
|
|
36
|
+
*/
|
|
37
|
+
export declare function calculateItemPosition(params: ItemPositionParams): {
|
|
38
|
+
height: number;
|
|
39
|
+
width: number;
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Calculates the style object for a rendered item.
|
|
46
|
+
*
|
|
47
|
+
* @param params - The parameters for calculation.
|
|
48
|
+
* @returns Style object.
|
|
49
|
+
* @see ItemStyleParams
|
|
50
|
+
*/
|
|
51
|
+
export declare function calculateItemStyle<T = unknown>(params: ItemStyleParams<T>): Record<string, string | number | undefined>;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Calculates the range of items to render based on scroll position and viewport size.
|
|
55
|
+
*
|
|
56
|
+
* @param params - The parameters for calculation.
|
|
57
|
+
* @returns The start and end indices of the items to render.
|
|
58
|
+
* @see RangeParams
|
|
59
|
+
*/
|
|
60
|
+
export declare function calculateRange(params: RangeParams): {
|
|
61
|
+
start: number;
|
|
62
|
+
end: number;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Calculates the target scroll position (relative to content) for a given row/column index and alignment.
|
|
67
|
+
*
|
|
68
|
+
* @param params - The parameters for calculation.
|
|
69
|
+
* @returns The target X and Y positions and item dimensions.
|
|
70
|
+
* @see ScrollTargetParams
|
|
71
|
+
* @see ScrollTargetResult
|
|
72
|
+
*/
|
|
73
|
+
export declare function calculateScrollTarget(params: ScrollTargetParams): ScrollTargetResult;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Calculates the sticky state and offset for a single item.
|
|
77
|
+
*
|
|
78
|
+
* @param params - The parameters for calculation.
|
|
79
|
+
* @returns Sticky state and offset.
|
|
80
|
+
* @see StickyParams
|
|
81
|
+
*/
|
|
82
|
+
export declare function calculateStickyItem(params: StickyParams): {
|
|
83
|
+
isStickyActive: boolean;
|
|
84
|
+
stickyOffset: {
|
|
85
|
+
x: number;
|
|
86
|
+
y: number;
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Calculates the total width and height of the virtualized content.
|
|
92
|
+
*
|
|
93
|
+
* @param params - The parameters for calculation.
|
|
94
|
+
* @returns Total width and height.
|
|
95
|
+
* @see TotalSizeParams
|
|
96
|
+
*/
|
|
97
|
+
export declare function calculateTotalSize(params: TotalSizeParams): {
|
|
98
|
+
width: number;
|
|
99
|
+
height: number;
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
/** Parameters for calculating the visible range of columns in grid mode. */
|
|
103
|
+
export declare interface ColumnRangeParams {
|
|
104
|
+
/** Column count. */
|
|
105
|
+
columnCount: number;
|
|
106
|
+
/** Relative horizontal scroll position. */
|
|
107
|
+
relativeScrollX: number;
|
|
108
|
+
/** Usable viewport width. */
|
|
109
|
+
usableWidth: number;
|
|
110
|
+
/** Column buffer count. */
|
|
111
|
+
colBuffer: number;
|
|
112
|
+
/** Fixed column width. */
|
|
113
|
+
fixedWidth: number | null;
|
|
114
|
+
/** Column gap. */
|
|
115
|
+
columnGap: number;
|
|
116
|
+
/** Binary search for column index. */
|
|
117
|
+
findLowerBound: (offset: number) => number;
|
|
118
|
+
/** Prefix sum for column width. */
|
|
119
|
+
query: (index: number) => number;
|
|
120
|
+
/** Resolver for total column width. */
|
|
121
|
+
totalColsQuery: () => number;
|
|
122
|
+
}
|
|
123
|
+
|
|
15
124
|
export declare const DEFAULT_BUFFER = 5;
|
|
16
125
|
|
|
17
126
|
export declare const DEFAULT_COLUMN_WIDTH = 100;
|
|
@@ -21,26 +130,38 @@ export declare const DEFAULT_ITEM_SIZE = 40;
|
|
|
21
130
|
/**
|
|
22
131
|
* Fenwick Tree (Binary Indexed Tree) implementation for efficient
|
|
23
132
|
* prefix sum calculations and updates.
|
|
133
|
+
*
|
|
134
|
+
* Provides O(log n) time complexity for both point updates and prefix sum queries.
|
|
24
135
|
*/
|
|
25
136
|
export declare class FenwickTree {
|
|
26
137
|
private tree;
|
|
27
138
|
private values;
|
|
139
|
+
/**
|
|
140
|
+
* Creates a new Fenwick Tree with the specified size.
|
|
141
|
+
*
|
|
142
|
+
* @param size - The number of elements in the tree.
|
|
143
|
+
*/
|
|
28
144
|
constructor(size: number);
|
|
29
145
|
/**
|
|
30
|
-
* Update the value at a specific index and propagate changes.
|
|
31
|
-
*
|
|
32
|
-
* @param
|
|
146
|
+
* Update the value at a specific index and propagate changes throughout the tree.
|
|
147
|
+
*
|
|
148
|
+
* @param index - The 0-based index to update.
|
|
149
|
+
* @param delta - The change in value (new value - old value).
|
|
33
150
|
*/
|
|
34
151
|
update(index: number, delta: number): void;
|
|
35
152
|
/**
|
|
36
153
|
* Get the prefix sum up to a specific index (exclusive).
|
|
37
|
-
*
|
|
38
|
-
* @returns
|
|
154
|
+
*
|
|
155
|
+
* @param index - 0-based index. `query(n)` returns sum of values from index 0 to n-1.
|
|
156
|
+
* @returns Sum of values in range [0, index).
|
|
39
157
|
*/
|
|
40
158
|
query(index: number): number;
|
|
41
159
|
/**
|
|
42
|
-
* Set the individual value at an index without updating the tree.
|
|
43
|
-
* Call rebuild() after multiple sets to update the tree efficiently.
|
|
160
|
+
* Set the individual value at an index without updating the prefix sum tree.
|
|
161
|
+
* Call `rebuild()` after multiple sets to update the tree efficiently in O(n).
|
|
162
|
+
*
|
|
163
|
+
* @param index - The 0-based index.
|
|
164
|
+
* @param value - The new value.
|
|
44
165
|
*/
|
|
45
166
|
set(index: number, value: number): void;
|
|
46
167
|
/**
|
|
@@ -48,40 +169,48 @@ export declare class FenwickTree {
|
|
|
48
169
|
*/
|
|
49
170
|
get length(): number;
|
|
50
171
|
/**
|
|
51
|
-
* Get the individual value at
|
|
172
|
+
* Get the individual value at a specific index.
|
|
173
|
+
*
|
|
174
|
+
* @param index - The 0-based index.
|
|
175
|
+
* @returns The value at the specified index.
|
|
52
176
|
*/
|
|
53
177
|
get(index: number): number;
|
|
54
178
|
/**
|
|
55
|
-
* Get the underlying values array.
|
|
179
|
+
* Get the underlying values array as a read-only Float64Array.
|
|
180
|
+
*
|
|
181
|
+
* @returns The read-only values array.
|
|
56
182
|
*/
|
|
57
183
|
getValues(): Readonly<Float64Array>;
|
|
58
184
|
/**
|
|
59
185
|
* Find the largest index such that the prefix sum is less than or equal to the given value.
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
* @
|
|
186
|
+
* Highly efficient search used to find which item is at a specific scroll offset.
|
|
187
|
+
*
|
|
188
|
+
* @param value - The prefix sum value to search for.
|
|
189
|
+
* @returns The 0-based index.
|
|
63
190
|
*/
|
|
64
191
|
findLowerBound(value: number): number;
|
|
65
192
|
/**
|
|
66
|
-
* Rebuild the entire tree from the current values array
|
|
67
|
-
*
|
|
193
|
+
* Rebuild the entire prefix sum tree from the current values array.
|
|
194
|
+
* Time complexity: O(n).
|
|
68
195
|
*/
|
|
69
196
|
rebuild(): void;
|
|
70
197
|
/**
|
|
71
|
-
* Resize the tree while preserving existing values.
|
|
72
|
-
*
|
|
198
|
+
* Resize the tree while preserving existing values and rebuilding the prefix sums.
|
|
199
|
+
*
|
|
200
|
+
* @param size - The new size of the tree.
|
|
73
201
|
*/
|
|
74
202
|
resize(size: number): void;
|
|
75
203
|
/**
|
|
76
204
|
* Shift values by a given offset and rebuild the tree.
|
|
77
|
-
* Useful when items are prepended to the list.
|
|
78
|
-
*
|
|
205
|
+
* Useful when items are prepended to the list to maintain existing measurements.
|
|
206
|
+
*
|
|
207
|
+
* @param offset - Number of positions to shift. Positive for prepending (shifts right).
|
|
79
208
|
*/
|
|
80
209
|
shift(offset: number): void;
|
|
81
210
|
}
|
|
82
211
|
|
|
83
212
|
/**
|
|
84
|
-
* Extracts the horizontal padding from a padding
|
|
213
|
+
* Extracts the horizontal padding from a padding configuration.
|
|
85
214
|
*
|
|
86
215
|
* @param p - The padding value (number or object with x/y).
|
|
87
216
|
* @param direction - The current scroll direction.
|
|
@@ -93,7 +222,7 @@ export declare function getPaddingX(p: number | {
|
|
|
93
222
|
} | undefined, direction?: ScrollDirection): number;
|
|
94
223
|
|
|
95
224
|
/**
|
|
96
|
-
* Extracts the vertical padding from a padding
|
|
225
|
+
* Extracts the vertical padding from a padding configuration.
|
|
97
226
|
*
|
|
98
227
|
* @param p - The padding value (number or object with x/y).
|
|
99
228
|
* @param direction - The current scroll direction.
|
|
@@ -105,246 +234,657 @@ export declare function getPaddingY(p: number | {
|
|
|
105
234
|
} | undefined, direction?: ScrollDirection): number;
|
|
106
235
|
|
|
107
236
|
/**
|
|
108
|
-
* Checks if the container
|
|
237
|
+
* Checks if the container is the document body element.
|
|
109
238
|
*
|
|
110
239
|
* @param container - The container element or window to check.
|
|
111
|
-
* @returns
|
|
240
|
+
* @returns `true` if the container is the `<body>` element.
|
|
241
|
+
*/
|
|
242
|
+
export declare function isBody(container: HTMLElement | Window | null | undefined): container is HTMLElement;
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* Checks if the container is a valid HTML Element with bounding rect support.
|
|
246
|
+
*
|
|
247
|
+
* @param container - The container to check.
|
|
248
|
+
* @returns `true` if the container is an `HTMLElement`.
|
|
112
249
|
*/
|
|
113
250
|
export declare function isElement(container: HTMLElement | Window | null | undefined): container is HTMLElement;
|
|
114
251
|
|
|
115
252
|
/**
|
|
116
|
-
* Checks if the target is an element
|
|
253
|
+
* Checks if the target is an element that supports scrolling.
|
|
117
254
|
*
|
|
118
255
|
* @param target - The event target to check.
|
|
119
|
-
* @returns
|
|
256
|
+
* @returns `true` if the target is an `HTMLElement` with scroll properties.
|
|
120
257
|
*/
|
|
121
258
|
export declare function isScrollableElement(target: EventTarget | null): target is HTMLElement;
|
|
122
259
|
|
|
123
260
|
/**
|
|
124
|
-
* Helper to determine if an options argument is
|
|
261
|
+
* Helper to determine if an options argument is a full `ScrollToIndexOptions` object.
|
|
125
262
|
*
|
|
126
263
|
* @param options - The options object to check.
|
|
127
|
-
* @returns
|
|
264
|
+
* @returns `true` if the options object contains scroll-to-index specific properties.
|
|
128
265
|
*/
|
|
129
266
|
export declare function isScrollToIndexOptions(options: unknown): options is ScrollToIndexOptions;
|
|
130
267
|
|
|
268
|
+
/**
|
|
269
|
+
* Checks if the container is the window object.
|
|
270
|
+
*
|
|
271
|
+
* @param container - The container element or window to check.
|
|
272
|
+
* @returns `true` if the container is the global window object.
|
|
273
|
+
*/
|
|
274
|
+
export declare function isWindow(container: HTMLElement | Window | null | undefined): container is Window;
|
|
275
|
+
|
|
276
|
+
/**
|
|
277
|
+
* Checks if the container is window-like (global window or document body).
|
|
278
|
+
*
|
|
279
|
+
* @param container - The container element or window to check.
|
|
280
|
+
* @returns `true` if the container is window or body.
|
|
281
|
+
*/
|
|
282
|
+
export declare function isWindowLike(container: HTMLElement | Window | null | undefined): boolean;
|
|
283
|
+
|
|
284
|
+
/** Parameters for calculating an item's position and size. */
|
|
285
|
+
export declare interface ItemPositionParams {
|
|
286
|
+
/** Item index. */
|
|
287
|
+
index: number;
|
|
288
|
+
/** Scroll direction. */
|
|
289
|
+
direction: ScrollDirection;
|
|
290
|
+
/** Fixed item size. */
|
|
291
|
+
fixedSize: number | null;
|
|
292
|
+
/** Item gap. */
|
|
293
|
+
gap: number;
|
|
294
|
+
/** Column gap. */
|
|
295
|
+
columnGap: number;
|
|
296
|
+
/** Usable viewport width. */
|
|
297
|
+
usableWidth: number;
|
|
298
|
+
/** Usable viewport height. */
|
|
299
|
+
usableHeight: number;
|
|
300
|
+
/** Total estimated width. */
|
|
301
|
+
totalWidth: number;
|
|
302
|
+
/** Prefix sum for row height. */
|
|
303
|
+
queryY: (idx: number) => number;
|
|
304
|
+
/** Prefix sum for row width. */
|
|
305
|
+
queryX: (idx: number) => number;
|
|
306
|
+
/** Height resolver. */
|
|
307
|
+
getSizeY: (idx: number) => number;
|
|
308
|
+
/** Width resolver. */
|
|
309
|
+
getSizeX: (idx: number) => number;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/** Properties passed to the 'item' scoped slot. */
|
|
313
|
+
export declare interface ItemSlotProps<T = unknown> {
|
|
314
|
+
/** The original data item being rendered. */
|
|
315
|
+
item: T;
|
|
316
|
+
/** The 0-based index of the item. */
|
|
317
|
+
index: number;
|
|
318
|
+
/** Information about the currently visible range of columns. */
|
|
319
|
+
columnRange: {
|
|
320
|
+
/** First rendered column. */
|
|
321
|
+
start: number;
|
|
322
|
+
/** Last rendered column (exclusive). */
|
|
323
|
+
end: number;
|
|
324
|
+
/** Pixel space before first column. */
|
|
325
|
+
padStart: number;
|
|
326
|
+
/** Pixel space after last column. */
|
|
327
|
+
padEnd: number;
|
|
328
|
+
};
|
|
329
|
+
/** Helper to get the current calculated width of any column index. */
|
|
330
|
+
getColumnWidth: (index: number) => number;
|
|
331
|
+
/** Whether this item index is configured as sticky. */
|
|
332
|
+
isSticky?: boolean | undefined;
|
|
333
|
+
/** Whether this item is currently in a sticky state at the edge. */
|
|
334
|
+
isStickyActive?: boolean | undefined;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/** Parameters for calculating an item's style object. */
|
|
338
|
+
export declare interface ItemStyleParams<T = unknown> {
|
|
339
|
+
/** The rendered item state. */
|
|
340
|
+
item: RenderedItem<T>;
|
|
341
|
+
/** Scroll direction. */
|
|
342
|
+
direction: ScrollDirection;
|
|
343
|
+
/** Configured item size logic. */
|
|
344
|
+
itemSize: number | ((item: T, index: number) => number) | null | undefined;
|
|
345
|
+
/** Parent container tag. */
|
|
346
|
+
containerTag: string;
|
|
347
|
+
/** Padding start on X axis. */
|
|
348
|
+
paddingStartX: number;
|
|
349
|
+
/** Padding start on Y axis. */
|
|
350
|
+
paddingStartY: number;
|
|
351
|
+
/** Hydration state. */
|
|
352
|
+
isHydrated: boolean;
|
|
353
|
+
}
|
|
354
|
+
|
|
131
355
|
declare interface Props<T = unknown> {
|
|
132
|
-
/**
|
|
356
|
+
/**
|
|
357
|
+
* Array of items to be virtualized.
|
|
358
|
+
* Required.
|
|
359
|
+
*/
|
|
133
360
|
items: T[];
|
|
134
|
-
/**
|
|
361
|
+
/**
|
|
362
|
+
* Fixed size of each item (in pixels) or a function that returns the size of an item.
|
|
363
|
+
* Pass 0, null or undefined for dynamic size detection via ResizeObserver.
|
|
364
|
+
* @default 40
|
|
365
|
+
*/
|
|
135
366
|
itemSize?: number | ((item: T, index: number) => number) | null;
|
|
136
|
-
/**
|
|
367
|
+
/**
|
|
368
|
+
* Direction of the scroll.
|
|
369
|
+
* - 'vertical': Standard vertical list.
|
|
370
|
+
* - 'horizontal': Standard horizontal list.
|
|
371
|
+
* - 'both': Grid mode virtualizing both rows and columns.
|
|
372
|
+
* @default 'vertical'
|
|
373
|
+
*/
|
|
137
374
|
direction?: 'vertical' | 'horizontal' | 'both';
|
|
138
|
-
/**
|
|
375
|
+
/**
|
|
376
|
+
* Number of items to render before the visible viewport.
|
|
377
|
+
* Useful for smoother scrolling and keyboard navigation.
|
|
378
|
+
* @default 5
|
|
379
|
+
*/
|
|
139
380
|
bufferBefore?: number;
|
|
140
|
-
/**
|
|
381
|
+
/**
|
|
382
|
+
* Number of items to render after the visible viewport.
|
|
383
|
+
* @default 5
|
|
384
|
+
*/
|
|
141
385
|
bufferAfter?: number;
|
|
142
|
-
/**
|
|
386
|
+
/**
|
|
387
|
+
* The scrollable container element or window.
|
|
388
|
+
* If not provided, the host element (root of VirtualScroll) is used.
|
|
389
|
+
* @default hostRef
|
|
390
|
+
*/
|
|
143
391
|
container?: HTMLElement | Window | null;
|
|
144
|
-
/**
|
|
392
|
+
/**
|
|
393
|
+
* Range of items to render during Server-Side Rendering.
|
|
394
|
+
* When provided, these items will be rendered in-flow before hydration.
|
|
395
|
+
* @see SSRRange
|
|
396
|
+
*/
|
|
145
397
|
ssrRange?: {
|
|
398
|
+
/** First row index to render. */
|
|
146
399
|
start: number;
|
|
400
|
+
/** Last row index to render (exclusive). */
|
|
147
401
|
end: number;
|
|
402
|
+
/** First column index to render (for grid mode). */
|
|
148
403
|
colStart?: number;
|
|
404
|
+
/** Last column index to render (exclusive, for grid mode). */
|
|
149
405
|
colEnd?: number;
|
|
150
406
|
};
|
|
151
|
-
/**
|
|
407
|
+
/**
|
|
408
|
+
* Number of columns for bidirectional (grid) scroll.
|
|
409
|
+
* Only applicable when direction="both".
|
|
410
|
+
* @default 0
|
|
411
|
+
*/
|
|
152
412
|
columnCount?: number;
|
|
153
|
-
/**
|
|
413
|
+
/**
|
|
414
|
+
* Fixed width of columns (in pixels), an array of widths, or a function for column widths.
|
|
415
|
+
* Pass 0, null or undefined for dynamic width detection via ResizeObserver.
|
|
416
|
+
* Only applicable when direction="both".
|
|
417
|
+
* @default 100
|
|
418
|
+
*/
|
|
154
419
|
columnWidth?: number | number[] | ((index: number) => number) | null;
|
|
155
|
-
/**
|
|
420
|
+
/**
|
|
421
|
+
* The HTML tag to use for the root container.
|
|
422
|
+
* @default 'div'
|
|
423
|
+
*/
|
|
156
424
|
containerTag?: string;
|
|
157
|
-
/**
|
|
425
|
+
/**
|
|
426
|
+
* The HTML tag to use for the items wrapper.
|
|
427
|
+
* Useful for <table> integration (e.g. 'tbody').
|
|
428
|
+
* @default 'div'
|
|
429
|
+
*/
|
|
158
430
|
wrapperTag?: string;
|
|
159
|
-
/**
|
|
431
|
+
/**
|
|
432
|
+
* The HTML tag to use for each item.
|
|
433
|
+
* Useful for <table> integration (e.g. 'tr').
|
|
434
|
+
* @default 'div'
|
|
435
|
+
*/
|
|
160
436
|
itemTag?: string;
|
|
161
|
-
/**
|
|
437
|
+
/**
|
|
438
|
+
* Additional padding at the start of the scroll container (top or left).
|
|
439
|
+
* Can be a number (applied to current direction) or an object with x/y.
|
|
440
|
+
* @default 0
|
|
441
|
+
*/
|
|
162
442
|
scrollPaddingStart?: number | {
|
|
163
443
|
x?: number;
|
|
164
444
|
y?: number;
|
|
165
445
|
};
|
|
166
|
-
/**
|
|
446
|
+
/**
|
|
447
|
+
* Additional padding at the end of the scroll container (bottom or right).
|
|
448
|
+
* @default 0
|
|
449
|
+
*/
|
|
167
450
|
scrollPaddingEnd?: number | {
|
|
168
451
|
x?: number;
|
|
169
452
|
y?: number;
|
|
170
453
|
};
|
|
171
|
-
/**
|
|
454
|
+
/**
|
|
455
|
+
* Whether the content in the 'header' slot is sticky.
|
|
456
|
+
* If true, the header size is measured and accounted for in scroll padding.
|
|
457
|
+
* @default false
|
|
458
|
+
*/
|
|
172
459
|
stickyHeader?: boolean;
|
|
173
|
-
/**
|
|
460
|
+
/**
|
|
461
|
+
* Whether the content in the 'footer' slot is sticky.
|
|
462
|
+
* @default false
|
|
463
|
+
*/
|
|
174
464
|
stickyFooter?: boolean;
|
|
175
|
-
/**
|
|
465
|
+
/**
|
|
466
|
+
* Gap between items in pixels (vertical gap in vertical/grid mode, horizontal gap in horizontal mode).
|
|
467
|
+
* @default 0
|
|
468
|
+
*/
|
|
176
469
|
gap?: number;
|
|
177
|
-
/**
|
|
470
|
+
/**
|
|
471
|
+
* Gap between columns in pixels. Only applicable when direction="both" or "horizontal".
|
|
472
|
+
* @default 0
|
|
473
|
+
*/
|
|
178
474
|
columnGap?: number;
|
|
179
|
-
/**
|
|
475
|
+
/**
|
|
476
|
+
* Indices of items that should stick to the top/start of the viewport.
|
|
477
|
+
* Supports iOS-style pushing effect where the next sticky item pushes the previous one.
|
|
478
|
+
* @default []
|
|
479
|
+
*/
|
|
180
480
|
stickyIndices?: number[];
|
|
181
|
-
/**
|
|
481
|
+
/**
|
|
482
|
+
* Distance from the end of the scrollable area (in pixels) to trigger the 'load' event.
|
|
483
|
+
* @default 200
|
|
484
|
+
*/
|
|
182
485
|
loadDistance?: number;
|
|
183
|
-
/**
|
|
486
|
+
/**
|
|
487
|
+
* Whether items are currently being loaded.
|
|
488
|
+
* Prevents multiple 'load' events from triggering and shows the 'loading' slot.
|
|
489
|
+
* @default false
|
|
490
|
+
*/
|
|
184
491
|
loading?: boolean;
|
|
185
|
-
/**
|
|
492
|
+
/**
|
|
493
|
+
* Whether to automatically restore and maintain scroll position when items are prepended to the list.
|
|
494
|
+
* Perfect for chat applications.
|
|
495
|
+
* @default false
|
|
496
|
+
*/
|
|
186
497
|
restoreScrollOnPrepend?: boolean;
|
|
187
|
-
/**
|
|
498
|
+
/**
|
|
499
|
+
* Initial scroll index to jump to immediately after mount.
|
|
500
|
+
*/
|
|
188
501
|
initialScrollIndex?: number;
|
|
189
|
-
/**
|
|
502
|
+
/**
|
|
503
|
+
* Alignment for the initial scroll index.
|
|
504
|
+
* @default 'start'
|
|
505
|
+
* @see ScrollAlignment
|
|
506
|
+
*/
|
|
190
507
|
initialScrollAlign?: ScrollAlignment | ScrollAlignmentOptions;
|
|
191
|
-
/**
|
|
508
|
+
/**
|
|
509
|
+
* Default size for items before they are measured by ResizeObserver.
|
|
510
|
+
* Only used when itemSize is dynamic.
|
|
511
|
+
* @default 40
|
|
512
|
+
*/
|
|
192
513
|
defaultItemSize?: number;
|
|
193
|
-
/**
|
|
514
|
+
/**
|
|
515
|
+
* Default width for columns before they are measured by ResizeObserver.
|
|
516
|
+
* Only used when columnWidth is dynamic.
|
|
517
|
+
* @default 100
|
|
518
|
+
*/
|
|
194
519
|
defaultColumnWidth?: number;
|
|
195
|
-
/**
|
|
520
|
+
/**
|
|
521
|
+
* Whether to show debug information (visible offsets and indices) over items.
|
|
522
|
+
* @default false
|
|
523
|
+
*/
|
|
196
524
|
debug?: boolean;
|
|
197
525
|
}
|
|
198
526
|
|
|
527
|
+
/** Parameters for calculating the visible range of items. */
|
|
528
|
+
export declare interface RangeParams {
|
|
529
|
+
/** Scroll direction. */
|
|
530
|
+
direction: ScrollDirection;
|
|
531
|
+
/** Relative horizontal scroll position. */
|
|
532
|
+
relativeScrollX: number;
|
|
533
|
+
/** Relative vertical scroll position. */
|
|
534
|
+
relativeScrollY: number;
|
|
535
|
+
/** Usable viewport width. */
|
|
536
|
+
usableWidth: number;
|
|
537
|
+
/** Usable viewport height. */
|
|
538
|
+
usableHeight: number;
|
|
539
|
+
/** Total item count. */
|
|
540
|
+
itemsLength: number;
|
|
541
|
+
/** Buffer items before. */
|
|
542
|
+
bufferBefore: number;
|
|
543
|
+
/** Buffer items after. */
|
|
544
|
+
bufferAfter: number;
|
|
545
|
+
/** Item gap. */
|
|
546
|
+
gap: number;
|
|
547
|
+
/** Column gap. */
|
|
548
|
+
columnGap: number;
|
|
549
|
+
/** Fixed item size. */
|
|
550
|
+
fixedSize: number | null;
|
|
551
|
+
/** Binary search for row index. */
|
|
552
|
+
findLowerBoundY: (offset: number) => number;
|
|
553
|
+
/** Binary search for row index (horizontal). */
|
|
554
|
+
findLowerBoundX: (offset: number) => number;
|
|
555
|
+
/** Prefix sum for row height. */
|
|
556
|
+
queryY: (index: number) => number;
|
|
557
|
+
/** Prefix sum for row width. */
|
|
558
|
+
queryX: (index: number) => number;
|
|
559
|
+
}
|
|
560
|
+
|
|
199
561
|
/** Represents an item currently rendered in the virtual scroll area. */
|
|
200
562
|
export declare interface RenderedItem<T = unknown> {
|
|
201
|
-
/** The original data item. */
|
|
563
|
+
/** The original data item from the provided source array. */
|
|
202
564
|
item: T;
|
|
203
|
-
/** The index of the item in the original array. */
|
|
565
|
+
/** The 0-based index of the item in the original array. */
|
|
204
566
|
index: number;
|
|
205
|
-
/** The calculated offset relative to the
|
|
567
|
+
/** The calculated pixel offset relative to the items wrapper. */
|
|
206
568
|
offset: {
|
|
569
|
+
/** Horizontal offset (left). */
|
|
207
570
|
x: number;
|
|
571
|
+
/** Vertical offset (top). */
|
|
208
572
|
y: number;
|
|
209
573
|
};
|
|
210
|
-
/** The current measured or estimated size. */
|
|
574
|
+
/** The current measured or estimated size of the item. */
|
|
211
575
|
size: {
|
|
576
|
+
/** Pixel width. */
|
|
212
577
|
width: number;
|
|
578
|
+
/** Pixel height. */
|
|
213
579
|
height: number;
|
|
214
580
|
};
|
|
215
|
-
/** The original
|
|
581
|
+
/** The original horizontal pixel offset before any sticky adjustments. */
|
|
216
582
|
originalX: number;
|
|
217
|
-
/** The original
|
|
583
|
+
/** The original vertical pixel offset before any sticky adjustments. */
|
|
218
584
|
originalY: number;
|
|
219
|
-
/** Whether this item is configured to be sticky. */
|
|
585
|
+
/** Whether this item is configured to be sticky via the `stickyIndices` property. */
|
|
220
586
|
isSticky?: boolean;
|
|
221
|
-
/** Whether this item is currently stuck at the
|
|
587
|
+
/** Whether this item is currently in a stuck state at the viewport edge. */
|
|
222
588
|
isStickyActive?: boolean;
|
|
223
|
-
/** The
|
|
589
|
+
/** The relative translation applied to the item for the sticky pushing effect. */
|
|
224
590
|
stickyOffset: {
|
|
591
|
+
/** Horizontal translation. */
|
|
225
592
|
x: number;
|
|
593
|
+
/** Vertical translation. */
|
|
226
594
|
y: number;
|
|
227
595
|
};
|
|
228
596
|
}
|
|
229
597
|
|
|
598
|
+
/**
|
|
599
|
+
* Alignment of an item within the viewport after a scroll operation.
|
|
600
|
+
* - 'start': Aligns item to the top or left edge.
|
|
601
|
+
* - 'center': Aligns item to the center of the viewport.
|
|
602
|
+
* - 'end': Aligns item to the bottom or right edge.
|
|
603
|
+
* - 'auto': Smart alignment. If visible, stays. If not, aligns to nearest edge.
|
|
604
|
+
*/
|
|
230
605
|
export declare type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
|
|
231
606
|
|
|
232
607
|
/** Options for scroll alignment in a single axis or both axes. */
|
|
233
608
|
export declare interface ScrollAlignmentOptions {
|
|
234
|
-
/** Alignment on the X axis. */
|
|
609
|
+
/** Alignment on the X (horizontal) axis. */
|
|
235
610
|
x?: ScrollAlignment;
|
|
236
|
-
/** Alignment on the Y axis. */
|
|
611
|
+
/** Alignment on the Y (vertical) axis. */
|
|
237
612
|
y?: ScrollAlignment;
|
|
238
613
|
}
|
|
239
614
|
|
|
240
615
|
/** Comprehensive state of the virtual scroll system. */
|
|
241
616
|
export declare interface ScrollDetails<T = unknown> {
|
|
242
|
-
/** List of items currently rendered. */
|
|
617
|
+
/** List of items currently rendered in the DOM buffer. */
|
|
243
618
|
items: RenderedItem<T>[];
|
|
244
619
|
/** Index of the first item partially or fully visible in the viewport. */
|
|
245
620
|
currentIndex: number;
|
|
246
|
-
/** Index of the first column partially or fully visible. */
|
|
621
|
+
/** Index of the first column partially or fully visible (grid mode). */
|
|
247
622
|
currentColIndex: number;
|
|
248
|
-
/** Current scroll position
|
|
623
|
+
/** Current relative pixel scroll position from the content start. */
|
|
249
624
|
scrollOffset: {
|
|
625
|
+
/** Horizontal position (X). */
|
|
250
626
|
x: number;
|
|
627
|
+
/** Vertical position (Y). */
|
|
251
628
|
y: number;
|
|
252
629
|
};
|
|
253
|
-
/**
|
|
630
|
+
/** Current dimensions of the visible viewport area. */
|
|
254
631
|
viewportSize: {
|
|
632
|
+
/** Pixel width. */
|
|
255
633
|
width: number;
|
|
634
|
+
/** Pixel height. */
|
|
256
635
|
height: number;
|
|
257
636
|
};
|
|
258
|
-
/** Total calculated size of all items and gaps. */
|
|
637
|
+
/** Total calculated or estimated size of all items and gaps. */
|
|
259
638
|
totalSize: {
|
|
639
|
+
/** Total pixel width. */
|
|
260
640
|
width: number;
|
|
641
|
+
/** Total pixel height. */
|
|
261
642
|
height: number;
|
|
262
643
|
};
|
|
263
|
-
/** Whether the container is currently being scrolled. */
|
|
644
|
+
/** Whether the container is currently being scrolled by the user or an animation. */
|
|
264
645
|
isScrolling: boolean;
|
|
265
|
-
/** Whether the current scroll was initiated
|
|
646
|
+
/** Whether the current scroll operation was initiated programmatically. */
|
|
266
647
|
isProgrammaticScroll: boolean;
|
|
267
|
-
/**
|
|
648
|
+
/** The range of item indices currently being rendered. */
|
|
268
649
|
range: {
|
|
650
|
+
/** Inclusive start index. */
|
|
269
651
|
start: number;
|
|
652
|
+
/** Exclusive end index. */
|
|
270
653
|
end: number;
|
|
271
654
|
};
|
|
272
|
-
/**
|
|
655
|
+
/** The range of column indices and associated paddings currently being rendered. */
|
|
273
656
|
columnRange: {
|
|
657
|
+
/** Inclusive start index. */
|
|
274
658
|
start: number;
|
|
659
|
+
/** Exclusive end index. */
|
|
275
660
|
end: number;
|
|
661
|
+
/** Pixel padding to maintain at the start of the row. */
|
|
276
662
|
padStart: number;
|
|
663
|
+
/** Pixel padding to maintain at the end of the row. */
|
|
277
664
|
padEnd: number;
|
|
278
665
|
};
|
|
279
666
|
}
|
|
280
667
|
|
|
668
|
+
/**
|
|
669
|
+
* The direction of the virtual scroll.
|
|
670
|
+
* - 'vertical': Single-column vertical scrolling.
|
|
671
|
+
* - 'horizontal': Single-row horizontal scrolling.
|
|
672
|
+
* - 'both': Bidirectional grid-based scrolling.
|
|
673
|
+
*/
|
|
281
674
|
export declare type ScrollDirection = 'vertical' | 'horizontal' | 'both';
|
|
282
675
|
|
|
283
|
-
/**
|
|
676
|
+
/** Parameters for calculating the scroll target position. */
|
|
677
|
+
export declare interface ScrollTargetParams {
|
|
678
|
+
/** Row index to target. */
|
|
679
|
+
rowIndex: number | null | undefined;
|
|
680
|
+
/** Column index to target. */
|
|
681
|
+
colIndex: number | null | undefined;
|
|
682
|
+
/** Scroll options. */
|
|
683
|
+
options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions | undefined;
|
|
684
|
+
/** Total items count. */
|
|
685
|
+
itemsLength: number;
|
|
686
|
+
/** Total columns count. */
|
|
687
|
+
columnCount: number;
|
|
688
|
+
/** Current scroll direction. */
|
|
689
|
+
direction: ScrollDirection;
|
|
690
|
+
/** Usable viewport width (excluding padding). */
|
|
691
|
+
usableWidth: number;
|
|
692
|
+
/** Usable viewport height (excluding padding). */
|
|
693
|
+
usableHeight: number;
|
|
694
|
+
/** Current total estimated width. */
|
|
695
|
+
totalWidth: number;
|
|
696
|
+
/** Current total estimated height. */
|
|
697
|
+
totalHeight: number;
|
|
698
|
+
/** Item gap. */
|
|
699
|
+
gap: number;
|
|
700
|
+
/** Column gap. */
|
|
701
|
+
columnGap: number;
|
|
702
|
+
/** Fixed item size. */
|
|
703
|
+
fixedSize: number | null;
|
|
704
|
+
/** Fixed column width. */
|
|
705
|
+
fixedWidth: number | null;
|
|
706
|
+
/** Current relative X scroll. */
|
|
707
|
+
relativeScrollX: number;
|
|
708
|
+
/** Current relative Y scroll. */
|
|
709
|
+
relativeScrollY: number;
|
|
710
|
+
/** Resolver for item height. */
|
|
711
|
+
getItemSizeY: (index: number) => number;
|
|
712
|
+
/** Resolver for item width. */
|
|
713
|
+
getItemSizeX: (index: number) => number;
|
|
714
|
+
/** Prefix sum resolver for item height. */
|
|
715
|
+
getItemQueryY: (index: number) => number;
|
|
716
|
+
/** Prefix sum resolver for item width. */
|
|
717
|
+
getItemQueryX: (index: number) => number;
|
|
718
|
+
/** Resolver for column size. */
|
|
719
|
+
getColumnSize: (index: number) => number;
|
|
720
|
+
/** Prefix sum resolver for column width. */
|
|
721
|
+
getColumnQuery: (index: number) => number;
|
|
722
|
+
/** List of sticky indices. */
|
|
723
|
+
stickyIndices?: number[] | undefined;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
/** Calculated scroll target result. */
|
|
727
|
+
export declare interface ScrollTargetResult {
|
|
728
|
+
/** Target relative horizontal position. */
|
|
729
|
+
targetX: number;
|
|
730
|
+
/** Target relative vertical position. */
|
|
731
|
+
targetY: number;
|
|
732
|
+
/** Resolved width of the target item. */
|
|
733
|
+
itemWidth: number;
|
|
734
|
+
/** Resolved height of the target item. */
|
|
735
|
+
itemHeight: number;
|
|
736
|
+
/** Effective alignment used for X axis. */
|
|
737
|
+
effectiveAlignX: ScrollAlignment;
|
|
738
|
+
/** Effective alignment used for Y axis. */
|
|
739
|
+
effectiveAlignY: ScrollAlignment;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
/** Options for the `scrollToIndex` method. */
|
|
284
743
|
export declare interface ScrollToIndexOptions {
|
|
285
|
-
/**
|
|
744
|
+
/**
|
|
745
|
+
* Where to align the item in the viewport.
|
|
746
|
+
* Can be a single value for both axes or an object for individual control.
|
|
747
|
+
* @default 'auto'
|
|
748
|
+
*/
|
|
286
749
|
align?: ScrollAlignment | ScrollAlignmentOptions;
|
|
287
|
-
/**
|
|
750
|
+
/**
|
|
751
|
+
* Scroll behavior.
|
|
752
|
+
* - 'auto': Instant jump.
|
|
753
|
+
* - 'smooth': Animated transition.
|
|
754
|
+
* @default 'smooth'
|
|
755
|
+
*/
|
|
288
756
|
behavior?: 'auto' | 'smooth';
|
|
289
|
-
|
|
290
|
-
|
|
757
|
+
/* Excluded from this release type: isCorrection */
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
/** Parameters for calculating sticky item offsets. */
|
|
761
|
+
export declare interface StickyParams {
|
|
762
|
+
/** Item index. */
|
|
763
|
+
index: number;
|
|
764
|
+
/** Is sticky configured. */
|
|
765
|
+
isSticky: boolean;
|
|
766
|
+
/** Scroll direction. */
|
|
767
|
+
direction: ScrollDirection;
|
|
768
|
+
/** Relative horizontal scroll. */
|
|
769
|
+
relativeScrollX: number;
|
|
770
|
+
/** Relative vertical scroll. */
|
|
771
|
+
relativeScrollY: number;
|
|
772
|
+
/** Original X offset. */
|
|
773
|
+
originalX: number;
|
|
774
|
+
/** Original Y offset. */
|
|
775
|
+
originalY: number;
|
|
776
|
+
/** Current width. */
|
|
777
|
+
width: number;
|
|
778
|
+
/** Current height. */
|
|
779
|
+
height: number;
|
|
780
|
+
/** All sticky indices. */
|
|
781
|
+
stickyIndices: number[];
|
|
782
|
+
/** Fixed item size. */
|
|
783
|
+
fixedSize: number | null;
|
|
784
|
+
/** Fixed column width. */
|
|
785
|
+
fixedWidth: number | null;
|
|
786
|
+
/** Item gap. */
|
|
787
|
+
gap: number;
|
|
788
|
+
/** Column gap. */
|
|
789
|
+
columnGap: number;
|
|
790
|
+
/** Prefix sum resolver for rows. */
|
|
791
|
+
getItemQueryY: (index: number) => number;
|
|
792
|
+
/** Prefix sum resolver for rows (horizontal). */
|
|
793
|
+
getItemQueryX: (index: number) => number;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
/** Parameters for calculating the total size of the scrollable area. */
|
|
797
|
+
export declare interface TotalSizeParams {
|
|
798
|
+
/** The scroll direction. */
|
|
799
|
+
direction: ScrollDirection;
|
|
800
|
+
/** The number of items in the list. */
|
|
801
|
+
itemsLength: number;
|
|
802
|
+
/** The number of columns (for grid mode). */
|
|
803
|
+
columnCount: number;
|
|
804
|
+
/** The fixed size of items, if applicable. */
|
|
805
|
+
fixedSize: number | null;
|
|
806
|
+
/** The fixed width of columns, if applicable. */
|
|
807
|
+
fixedWidth: number | null;
|
|
808
|
+
/** The gap between items. */
|
|
809
|
+
gap: number;
|
|
810
|
+
/** The gap between columns. */
|
|
811
|
+
columnGap: number;
|
|
812
|
+
/** Usable viewport width. */
|
|
813
|
+
usableWidth: number;
|
|
814
|
+
/** Usable viewport height. */
|
|
815
|
+
usableHeight: number;
|
|
816
|
+
/** Function to query the prefix sum of item heights. */
|
|
817
|
+
queryY: (index: number) => number;
|
|
818
|
+
/** Function to query the prefix sum of item widths. */
|
|
819
|
+
queryX: (index: number) => number;
|
|
820
|
+
/** Function to query the prefix sum of column widths. */
|
|
821
|
+
queryColumn: (index: number) => number;
|
|
291
822
|
}
|
|
292
823
|
|
|
293
824
|
/**
|
|
294
825
|
* Composable for virtual scrolling logic.
|
|
295
|
-
* Handles calculation of visible items, scroll events,
|
|
826
|
+
* Handles calculation of visible items, scroll events, dynamic item sizes, and programmatic scrolling.
|
|
296
827
|
*
|
|
297
|
-
* @param props -
|
|
828
|
+
* @param props - A Ref to the configuration properties.
|
|
829
|
+
* @see VirtualScrollProps
|
|
298
830
|
*/
|
|
299
831
|
export declare function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollProps<T>>): {
|
|
300
832
|
/**
|
|
301
|
-
* Array of items
|
|
833
|
+
* Array of items currently rendered in the DOM with their calculated offsets and sizes.
|
|
834
|
+
* @see RenderedItem
|
|
302
835
|
*/
|
|
303
836
|
renderedItems: ComputedRef<RenderedItem<T>[]>;
|
|
304
837
|
/**
|
|
305
|
-
* Total calculated width of all items including gaps.
|
|
838
|
+
* Total calculated width of all items including gaps (in pixels).
|
|
306
839
|
*/
|
|
307
840
|
totalWidth: ComputedRef<number>;
|
|
308
841
|
/**
|
|
309
|
-
* Total calculated height of all items including gaps.
|
|
842
|
+
* Total calculated height of all items including gaps (in pixels).
|
|
310
843
|
*/
|
|
311
844
|
totalHeight: ComputedRef<number>;
|
|
312
845
|
/**
|
|
313
846
|
* Detailed information about the current scroll state.
|
|
314
|
-
* Includes currentIndex, scrollOffset, viewportSize, totalSize, and
|
|
847
|
+
* Includes currentIndex, scrollOffset, viewportSize, totalSize, and scrolling status.
|
|
848
|
+
* @see ScrollDetails
|
|
315
849
|
*/
|
|
316
850
|
scrollDetails: ComputedRef<ScrollDetails<T>>;
|
|
317
851
|
/**
|
|
318
852
|
* Programmatically scroll to a specific row and/or column.
|
|
319
|
-
*
|
|
320
|
-
* @param
|
|
321
|
-
* @param
|
|
853
|
+
*
|
|
854
|
+
* @param rowIndex - The row index to scroll to. Pass null to only scroll horizontally.
|
|
855
|
+
* @param colIndex - The column index to scroll to. Pass null to only scroll vertically.
|
|
856
|
+
* @param options - Alignment and behavior options.
|
|
857
|
+
* @see ScrollAlignment
|
|
858
|
+
* @see ScrollToIndexOptions
|
|
322
859
|
*/
|
|
323
860
|
scrollToIndex: (rowIndex: number | null | undefined, colIndex: number | null | undefined, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
|
|
324
861
|
/**
|
|
325
|
-
* Programmatically scroll to a specific pixel offset.
|
|
326
|
-
*
|
|
327
|
-
* @param
|
|
328
|
-
* @param
|
|
862
|
+
* Programmatically scroll to a specific pixel offset relative to the content start.
|
|
863
|
+
*
|
|
864
|
+
* @param x - The pixel offset to scroll to on the X axis. Pass null to keep current position.
|
|
865
|
+
* @param y - The pixel offset to scroll to on the Y axis. Pass null to keep current position.
|
|
866
|
+
* @param options - Scroll options (behavior).
|
|
329
867
|
*/
|
|
330
868
|
scrollToOffset: (x?: number | null, y?: number | null, options?: {
|
|
331
869
|
behavior?: "auto" | "smooth";
|
|
332
870
|
}) => void;
|
|
333
871
|
/**
|
|
334
|
-
* Stops any currently active
|
|
872
|
+
* Stops any currently active smooth scroll animation and clears pending corrections.
|
|
335
873
|
*/
|
|
336
874
|
stopProgrammaticScroll: () => void;
|
|
337
875
|
/**
|
|
338
876
|
* Updates the stored size of an item. Should be called when an item is measured (e.g., via ResizeObserver).
|
|
339
|
-
*
|
|
340
|
-
* @param
|
|
341
|
-
* @param
|
|
342
|
-
* @param
|
|
877
|
+
*
|
|
878
|
+
* @param index - The item index.
|
|
879
|
+
* @param width - The measured inlineSize (width).
|
|
880
|
+
* @param height - The measured blockSize (height).
|
|
881
|
+
* @param element - The measured element (optional, used for robust grid column detection).
|
|
343
882
|
*/
|
|
344
883
|
updateItemSize: (index: number, inlineSize: number, blockSize: number, element?: HTMLElement) => void;
|
|
345
884
|
/**
|
|
346
|
-
* Updates the stored size of multiple items
|
|
347
|
-
*
|
|
885
|
+
* Updates the stored size of multiple items simultaneously.
|
|
886
|
+
*
|
|
887
|
+
* @param updates - Array of measurement updates.
|
|
348
888
|
*/
|
|
349
889
|
updateItemSizes: (updates: Array<{
|
|
350
890
|
index: number;
|
|
@@ -354,10 +894,12 @@ export declare function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollPr
|
|
|
354
894
|
}>) => void;
|
|
355
895
|
/**
|
|
356
896
|
* Recalculates the host element's offset relative to the scroll container.
|
|
897
|
+
* Useful if the container or host moves without a resize event.
|
|
357
898
|
*/
|
|
358
899
|
updateHostOffset: () => void;
|
|
359
900
|
/**
|
|
360
|
-
* Information about the current visible range of columns.
|
|
901
|
+
* Information about the current visible range of columns and their paddings.
|
|
902
|
+
* @see ColumnRange
|
|
361
903
|
*/
|
|
362
904
|
columnRange: ComputedRef< {
|
|
363
905
|
start: number;
|
|
@@ -366,12 +908,14 @@ export declare function useVirtualScroll<T = unknown>(props: Ref<VirtualScrollPr
|
|
|
366
908
|
padEnd: number;
|
|
367
909
|
}>;
|
|
368
910
|
/**
|
|
369
|
-
* Helper to get the width of a specific column based on current configuration.
|
|
370
|
-
*
|
|
911
|
+
* Helper to get the width of a specific column based on current configuration and measurements.
|
|
912
|
+
*
|
|
913
|
+
* @param index - The column index.
|
|
371
914
|
*/
|
|
372
915
|
getColumnWidth: (index: number) => number;
|
|
373
916
|
/**
|
|
374
917
|
* Resets all dynamic measurements and re-initializes from props.
|
|
918
|
+
* Useful if item sizes have changed externally.
|
|
375
919
|
*/
|
|
376
920
|
refresh: () => void;
|
|
377
921
|
/**
|
|
@@ -392,75 +936,158 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
392
936
|
}) => any;
|
|
393
937
|
} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onLoad" | "onScroll" | "onVisibleRangeChange"> & Props<T> & Partial<{}>> & PublicProps;
|
|
394
938
|
expose(exposed: ShallowUnwrapRef< {
|
|
939
|
+
/**
|
|
940
|
+
* Detailed information about the current scroll state.
|
|
941
|
+
* @see ScrollDetails
|
|
942
|
+
* @see useVirtualScroll
|
|
943
|
+
*/
|
|
395
944
|
scrollDetails: ComputedRef<ScrollDetails<T>>;
|
|
945
|
+
/**
|
|
946
|
+
* Information about the current visible range of columns.
|
|
947
|
+
* @see ColumnRange
|
|
948
|
+
* @see useVirtualScroll
|
|
949
|
+
*/
|
|
396
950
|
columnRange: ComputedRef< {
|
|
397
951
|
start: number;
|
|
398
952
|
end: number;
|
|
399
953
|
padStart: number;
|
|
400
954
|
padEnd: number;
|
|
401
955
|
}>;
|
|
956
|
+
/**
|
|
957
|
+
* Helper to get the width of a specific column.
|
|
958
|
+
* @param index - The column index.
|
|
959
|
+
* @see useVirtualScroll
|
|
960
|
+
*/
|
|
402
961
|
getColumnWidth: (index: number) => number;
|
|
962
|
+
/**
|
|
963
|
+
* Programmatically scroll to a specific row and/or column.
|
|
964
|
+
*
|
|
965
|
+
* @param rowIndex - The row index to scroll to. Pass null to only scroll horizontally.
|
|
966
|
+
* @param colIndex - The column index to scroll to. Pass null to only scroll vertically.
|
|
967
|
+
* @param options - Alignment and behavior options. Defaults to { align: 'auto', behavior: 'auto' }.
|
|
968
|
+
* @see ScrollAlignment
|
|
969
|
+
* @see ScrollToIndexOptions
|
|
970
|
+
* @see useVirtualScroll
|
|
971
|
+
*/
|
|
403
972
|
scrollToIndex: (rowIndex: number | null | undefined, colIndex: number | null | undefined, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
|
|
973
|
+
/**
|
|
974
|
+
* Programmatically scroll to a specific pixel offset.
|
|
975
|
+
*
|
|
976
|
+
* @param x - The pixel offset to scroll to on the X axis. Pass null to keep current position.
|
|
977
|
+
* @param y - The pixel offset to scroll to on the Y axis. Pass null to keep current position.
|
|
978
|
+
* @param options - Scroll options (behavior). Defaults to { behavior: 'auto' }.
|
|
979
|
+
* @see useVirtualScroll
|
|
980
|
+
*/
|
|
404
981
|
scrollToOffset: (x?: number | null, y?: number | null, options?: {
|
|
405
982
|
behavior?: "auto" | "smooth";
|
|
406
983
|
} | undefined) => void;
|
|
984
|
+
/**
|
|
985
|
+
* Resets all dynamic measurements and re-initializes from props.
|
|
986
|
+
* @see useVirtualScroll
|
|
987
|
+
*/
|
|
407
988
|
refresh: () => void;
|
|
989
|
+
/**
|
|
990
|
+
* Immediately stops any currently active smooth scroll animation and clears pending corrections.
|
|
991
|
+
* @see useVirtualScroll
|
|
992
|
+
*/
|
|
408
993
|
stopProgrammaticScroll: () => void;
|
|
409
994
|
}>): void;
|
|
410
995
|
attrs: any;
|
|
411
996
|
slots: Readonly<{
|
|
412
|
-
/**
|
|
997
|
+
/**
|
|
998
|
+
* Content rendered at the top of the scrollable area.
|
|
999
|
+
* Can be made sticky using the `stickyHeader` prop.
|
|
1000
|
+
*/
|
|
413
1001
|
header?: (props: Record<string, never>) => VNodeChild;
|
|
414
|
-
/**
|
|
1002
|
+
/**
|
|
1003
|
+
* Scoped slot for rendering each individual item.
|
|
1004
|
+
*/
|
|
415
1005
|
item?: (props: {
|
|
416
|
-
/** The data item
|
|
1006
|
+
/** The original data item from the `items` array. */
|
|
417
1007
|
item: T;
|
|
418
|
-
/** The index of the item in the items array. */
|
|
1008
|
+
/** The original index of the item in the `items` array. */
|
|
419
1009
|
index: number;
|
|
420
|
-
/**
|
|
1010
|
+
/**
|
|
1011
|
+
* Information about the current visible range of columns (for grid mode).
|
|
1012
|
+
* @see ColumnRange
|
|
1013
|
+
*/
|
|
421
1014
|
columnRange: {
|
|
1015
|
+
/** Index of the first rendered column. */
|
|
422
1016
|
start: number;
|
|
1017
|
+
/** Index of the last rendered column (exclusive). */
|
|
423
1018
|
end: number;
|
|
1019
|
+
/** Pixel offset from the start of the row to the first rendered cell. */
|
|
424
1020
|
padStart: number;
|
|
1021
|
+
/** Pixel offset from the last rendered cell to the end of the row. */
|
|
425
1022
|
padEnd: number;
|
|
426
1023
|
};
|
|
427
|
-
/**
|
|
1024
|
+
/**
|
|
1025
|
+
* Helper function to get the width of a specific column.
|
|
1026
|
+
* Useful for setting consistent widths in grid mode.
|
|
1027
|
+
*/
|
|
428
1028
|
getColumnWidth: (index: number) => number;
|
|
429
|
-
/** Whether this item is configured to be sticky
|
|
1029
|
+
/** Whether this item is configured to be sticky via `stickyIndices`. */
|
|
430
1030
|
isSticky?: boolean | undefined;
|
|
431
|
-
/** Whether this item is currently in a sticky state. */
|
|
1031
|
+
/** Whether this item is currently in a sticky state (stuck at the top/start). */
|
|
432
1032
|
isStickyActive?: boolean | undefined;
|
|
433
1033
|
}) => VNodeChild;
|
|
434
|
-
/**
|
|
1034
|
+
/**
|
|
1035
|
+
* Content shown at the end of the list when the `loading` prop is true.
|
|
1036
|
+
* Also prevents additional 'load' events from triggering while visible.
|
|
1037
|
+
*/
|
|
435
1038
|
loading?: (props: Record<string, never>) => VNodeChild;
|
|
436
|
-
/**
|
|
1039
|
+
/**
|
|
1040
|
+
* Content rendered at the bottom of the scrollable area.
|
|
1041
|
+
* Can be made sticky using the `stickyFooter` prop.
|
|
1042
|
+
*/
|
|
437
1043
|
footer?: (props: Record<string, never>) => VNodeChild;
|
|
438
1044
|
}> & {
|
|
439
|
-
/**
|
|
1045
|
+
/**
|
|
1046
|
+
* Content rendered at the top of the scrollable area.
|
|
1047
|
+
* Can be made sticky using the `stickyHeader` prop.
|
|
1048
|
+
*/
|
|
440
1049
|
header?: (props: Record<string, never>) => VNodeChild;
|
|
441
|
-
/**
|
|
1050
|
+
/**
|
|
1051
|
+
* Scoped slot for rendering each individual item.
|
|
1052
|
+
*/
|
|
442
1053
|
item?: (props: {
|
|
443
|
-
/** The data item
|
|
1054
|
+
/** The original data item from the `items` array. */
|
|
444
1055
|
item: T;
|
|
445
|
-
/** The index of the item in the items array. */
|
|
1056
|
+
/** The original index of the item in the `items` array. */
|
|
446
1057
|
index: number;
|
|
447
|
-
/**
|
|
1058
|
+
/**
|
|
1059
|
+
* Information about the current visible range of columns (for grid mode).
|
|
1060
|
+
* @see ColumnRange
|
|
1061
|
+
*/
|
|
448
1062
|
columnRange: {
|
|
1063
|
+
/** Index of the first rendered column. */
|
|
449
1064
|
start: number;
|
|
1065
|
+
/** Index of the last rendered column (exclusive). */
|
|
450
1066
|
end: number;
|
|
1067
|
+
/** Pixel offset from the start of the row to the first rendered cell. */
|
|
451
1068
|
padStart: number;
|
|
1069
|
+
/** Pixel offset from the last rendered cell to the end of the row. */
|
|
452
1070
|
padEnd: number;
|
|
453
1071
|
};
|
|
454
|
-
/**
|
|
1072
|
+
/**
|
|
1073
|
+
* Helper function to get the width of a specific column.
|
|
1074
|
+
* Useful for setting consistent widths in grid mode.
|
|
1075
|
+
*/
|
|
455
1076
|
getColumnWidth: (index: number) => number;
|
|
456
|
-
/** Whether this item is configured to be sticky
|
|
1077
|
+
/** Whether this item is configured to be sticky via `stickyIndices`. */
|
|
457
1078
|
isSticky?: boolean | undefined;
|
|
458
|
-
/** Whether this item is currently in a sticky state. */
|
|
1079
|
+
/** Whether this item is currently in a sticky state (stuck at the top/start). */
|
|
459
1080
|
isStickyActive?: boolean | undefined;
|
|
460
1081
|
}) => VNodeChild;
|
|
461
|
-
/**
|
|
1082
|
+
/**
|
|
1083
|
+
* Content shown at the end of the list when the `loading` prop is true.
|
|
1084
|
+
* Also prevents additional 'load' events from triggering while visible.
|
|
1085
|
+
*/
|
|
462
1086
|
loading?: (props: Record<string, never>) => VNodeChild;
|
|
463
|
-
/**
|
|
1087
|
+
/**
|
|
1088
|
+
* Content rendered at the bottom of the scrollable area.
|
|
1089
|
+
* Can be made sticky using the `stickyFooter` prop.
|
|
1090
|
+
*/
|
|
464
1091
|
footer?: (props: Record<string, never>) => VNodeChild;
|
|
465
1092
|
};
|
|
466
1093
|
emit: {
|
|
@@ -477,64 +1104,126 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
477
1104
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
478
1105
|
};
|
|
479
1106
|
|
|
480
|
-
/** Configuration properties for the useVirtualScroll composable. */
|
|
1107
|
+
/** Configuration properties for the `useVirtualScroll` composable. */
|
|
481
1108
|
export declare interface VirtualScrollProps<T = unknown> {
|
|
482
|
-
/**
|
|
1109
|
+
/**
|
|
1110
|
+
* Array of data items to virtualize.
|
|
1111
|
+
*/
|
|
483
1112
|
items: T[];
|
|
484
|
-
/**
|
|
1113
|
+
/**
|
|
1114
|
+
* Fixed size of each item (in pixels) or a function that returns the size of an item.
|
|
1115
|
+
* Pass `0`, `null` or `undefined` for automatic dynamic size detection via `ResizeObserver`.
|
|
1116
|
+
*/
|
|
485
1117
|
itemSize?: number | ((item: T, index: number) => number) | undefined;
|
|
486
|
-
/**
|
|
1118
|
+
/**
|
|
1119
|
+
* Direction of the virtual scroll.
|
|
1120
|
+
* @default 'vertical'
|
|
1121
|
+
*/
|
|
487
1122
|
direction?: ScrollDirection | undefined;
|
|
488
|
-
/**
|
|
1123
|
+
/**
|
|
1124
|
+
* Number of items to render before the visible viewport.
|
|
1125
|
+
* @default 5
|
|
1126
|
+
*/
|
|
489
1127
|
bufferBefore?: number | undefined;
|
|
490
|
-
/**
|
|
1128
|
+
/**
|
|
1129
|
+
* Number of items to render after the visible viewport.
|
|
1130
|
+
* @default 5
|
|
1131
|
+
*/
|
|
491
1132
|
bufferAfter?: number | undefined;
|
|
492
|
-
/**
|
|
1133
|
+
/**
|
|
1134
|
+
* The scrollable element or window object.
|
|
1135
|
+
* If not provided, virtualization usually happens relative to the `hostElement`.
|
|
1136
|
+
*/
|
|
493
1137
|
container?: HTMLElement | Window | null | undefined;
|
|
494
|
-
/**
|
|
1138
|
+
/**
|
|
1139
|
+
* The host element that directly wraps the absolute-positioned items.
|
|
1140
|
+
* Used for calculating relative offsets.
|
|
1141
|
+
*/
|
|
495
1142
|
hostElement?: HTMLElement | null | undefined;
|
|
496
|
-
/**
|
|
1143
|
+
/**
|
|
1144
|
+
* Configuration for Server-Side Rendering.
|
|
1145
|
+
* Defines which items are rendered statically on the server.
|
|
1146
|
+
*/
|
|
497
1147
|
ssrRange?: {
|
|
1148
|
+
/** First row index. */
|
|
498
1149
|
start: number;
|
|
1150
|
+
/** Exclusive last row index. */
|
|
499
1151
|
end: number;
|
|
1152
|
+
/** First column index (grid mode). */
|
|
500
1153
|
colStart?: number;
|
|
1154
|
+
/** Exclusive last column index (grid mode). */
|
|
501
1155
|
colEnd?: number;
|
|
502
1156
|
} | undefined;
|
|
503
|
-
/**
|
|
1157
|
+
/**
|
|
1158
|
+
* Number of columns for bidirectional grid scrolling.
|
|
1159
|
+
*/
|
|
504
1160
|
columnCount?: number | undefined;
|
|
505
|
-
/**
|
|
1161
|
+
/**
|
|
1162
|
+
* Fixed width of columns (in pixels), an array of widths, or a function returning widths.
|
|
1163
|
+
* Pass `0`, `null` or `undefined` for dynamic column detection.
|
|
1164
|
+
*/
|
|
506
1165
|
columnWidth?: number | number[] | ((index: number) => number) | undefined;
|
|
507
|
-
/**
|
|
1166
|
+
/**
|
|
1167
|
+
* Pixel padding at the start of the scroll container.
|
|
1168
|
+
*/
|
|
508
1169
|
scrollPaddingStart?: number | {
|
|
509
1170
|
x?: number;
|
|
510
1171
|
y?: number;
|
|
511
1172
|
} | undefined;
|
|
512
|
-
/**
|
|
1173
|
+
/**
|
|
1174
|
+
* Pixel padding at the end of the scroll container.
|
|
1175
|
+
*/
|
|
513
1176
|
scrollPaddingEnd?: number | {
|
|
514
1177
|
x?: number;
|
|
515
1178
|
y?: number;
|
|
516
1179
|
} | undefined;
|
|
517
|
-
/**
|
|
1180
|
+
/**
|
|
1181
|
+
* Gap between items in pixels.
|
|
1182
|
+
* Applied vertically in list/grid mode, horizontally in horizontal list mode.
|
|
1183
|
+
*/
|
|
518
1184
|
gap?: number | undefined;
|
|
519
|
-
/**
|
|
1185
|
+
/**
|
|
1186
|
+
* Gap between columns in pixels.
|
|
1187
|
+
* Applied in horizontal and bidirectional grid modes.
|
|
1188
|
+
*/
|
|
520
1189
|
columnGap?: number | undefined;
|
|
521
|
-
/**
|
|
1190
|
+
/**
|
|
1191
|
+
* List of indices that should stick to the viewport edge.
|
|
1192
|
+
*/
|
|
522
1193
|
stickyIndices?: number[] | undefined;
|
|
523
|
-
/**
|
|
1194
|
+
/**
|
|
1195
|
+
* Threshold distance from the end (in pixels) to emit the 'load' event.
|
|
1196
|
+
* @default 200
|
|
1197
|
+
*/
|
|
524
1198
|
loadDistance?: number | undefined;
|
|
525
|
-
/**
|
|
1199
|
+
/**
|
|
1200
|
+
* Whether data is currently loading.
|
|
1201
|
+
*/
|
|
526
1202
|
loading?: boolean | undefined;
|
|
527
|
-
/**
|
|
1203
|
+
/**
|
|
1204
|
+
* Whether to automatically restore and lock scroll position when items are prepended to the array.
|
|
1205
|
+
*/
|
|
528
1206
|
restoreScrollOnPrepend?: boolean | undefined;
|
|
529
|
-
/**
|
|
1207
|
+
/**
|
|
1208
|
+
* Initial row index to jump to on mount.
|
|
1209
|
+
*/
|
|
530
1210
|
initialScrollIndex?: number | undefined;
|
|
531
|
-
/**
|
|
1211
|
+
/**
|
|
1212
|
+
* Initial scroll alignment logic.
|
|
1213
|
+
* @default 'start'
|
|
1214
|
+
*/
|
|
532
1215
|
initialScrollAlign?: ScrollAlignment | ScrollAlignmentOptions | undefined;
|
|
533
|
-
/**
|
|
1216
|
+
/**
|
|
1217
|
+
* Default fallback size for items before they are measured.
|
|
1218
|
+
*/
|
|
534
1219
|
defaultItemSize?: number | undefined;
|
|
535
|
-
/**
|
|
1220
|
+
/**
|
|
1221
|
+
* Default fallback width for columns before they are measured.
|
|
1222
|
+
*/
|
|
536
1223
|
defaultColumnWidth?: number | undefined;
|
|
537
|
-
/**
|
|
1224
|
+
/**
|
|
1225
|
+
* Enable debug visualization of buffers and indices.
|
|
1226
|
+
*/
|
|
538
1227
|
debug?: boolean | undefined;
|
|
539
1228
|
}
|
|
540
1229
|
|