@pdanpdan/virtual-scroll 0.8.0 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -11
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +299 -32
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +954 -898
- package/dist/index.mjs.map +1 -1
- package/dist/virtual-scroll.css +1 -1
- package/package.json +1 -1
- package/src/components/VirtualScroll.vue +301 -209
- package/src/components/VirtualScrollbar.vue +8 -8
- package/src/composables/useVirtualScroll.ts +277 -524
- package/src/composables/useVirtualScrollSizes.ts +459 -0
- package/src/composables/useVirtualScrollbar.ts +30 -35
- package/src/index.ts +1 -0
- package/src/types.ts +25 -2
- package/src/utils/scroll.ts +14 -14
- package/src/utils/virtual-scroll-logic.ts +316 -3
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { DefineComponent } from 'vue';
|
|
|
7
7
|
import { MaybeRefOrGetter } from 'vue';
|
|
8
8
|
import { PublicProps } from 'vue';
|
|
9
9
|
import { Ref } from 'vue';
|
|
10
|
+
import { ShallowRef } from 'vue';
|
|
10
11
|
import { ShallowUnwrapRef } from 'vue';
|
|
11
12
|
import { VNode } from 'vue';
|
|
12
13
|
import { VNodeChild } from 'vue';
|
|
@@ -23,6 +24,17 @@ declare type __VLS_PrettifyLocal<T> = {
|
|
|
23
24
|
*/
|
|
24
25
|
export declare const BROWSER_MAX_SIZE = 10000000;
|
|
25
26
|
|
|
27
|
+
/**
|
|
28
|
+
* Helper to calculate total size for a single axis.
|
|
29
|
+
*
|
|
30
|
+
* @param count - Item count.
|
|
31
|
+
* @param fixedSize - Fixed size if any.
|
|
32
|
+
* @param gap - Gap size.
|
|
33
|
+
* @param query - Prefix sum resolver.
|
|
34
|
+
* @returns Total size.
|
|
35
|
+
*/
|
|
36
|
+
export declare function calculateAxisSize(count: number, fixedSize: number | null, gap: number, query: (index: number) => number): number;
|
|
37
|
+
|
|
26
38
|
/**
|
|
27
39
|
* Calculates the range of columns to render for bidirectional scroll.
|
|
28
40
|
*
|
|
@@ -47,6 +59,64 @@ export declare function calculateColumnRange({ columnCount, relativeScrollX, usa
|
|
|
47
59
|
padEnd: number;
|
|
48
60
|
};
|
|
49
61
|
|
|
62
|
+
/**
|
|
63
|
+
* Helper to get the index at a virtual offset.
|
|
64
|
+
*
|
|
65
|
+
* @param offset - Virtual offset.
|
|
66
|
+
* @param fixedSize - Fixed size if any.
|
|
67
|
+
* @param gap - Gap size.
|
|
68
|
+
* @param findLowerBound - Binary search resolver.
|
|
69
|
+
* @returns Index at offset.
|
|
70
|
+
*/
|
|
71
|
+
export declare function calculateIndexAt(offset: number, fixedSize: number | null, gap: number, findLowerBound: (offset: number) => number): number;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Calculates the next step in an inertia animation.
|
|
75
|
+
*
|
|
76
|
+
* @param velocity - Current velocity.
|
|
77
|
+
* @param velocity.x - Horizontal velocity.
|
|
78
|
+
* @param velocity.y - Vertical velocity.
|
|
79
|
+
* @param friction - Friction coefficient (0-1).
|
|
80
|
+
* @param frameTime - Time elapsed since last frame in ms (default 16ms).
|
|
81
|
+
* @returns Next velocity and distance to move.
|
|
82
|
+
*/
|
|
83
|
+
export declare function calculateInertiaStep(velocity: {
|
|
84
|
+
x: number;
|
|
85
|
+
y: number;
|
|
86
|
+
}, friction: number, frameTime?: number): {
|
|
87
|
+
nextVelocity: {
|
|
88
|
+
x: number;
|
|
89
|
+
y: number;
|
|
90
|
+
};
|
|
91
|
+
delta: {
|
|
92
|
+
x: number;
|
|
93
|
+
y: number;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Calculates instantaneous velocity from position change.
|
|
99
|
+
*
|
|
100
|
+
* @param lastPos - Previous position.
|
|
101
|
+
* @param lastPos.x - Horizontal position.
|
|
102
|
+
* @param lastPos.y - Vertical position.
|
|
103
|
+
* @param currentPos - Current position.
|
|
104
|
+
* @param currentPos.x - Horizontal position.
|
|
105
|
+
* @param currentPos.y - Vertical position.
|
|
106
|
+
* @param dt - Time delta in ms.
|
|
107
|
+
* @returns Calculated velocity {x, y}.
|
|
108
|
+
*/
|
|
109
|
+
export declare function calculateInstantaneousVelocity(lastPos: {
|
|
110
|
+
x: number;
|
|
111
|
+
y: number;
|
|
112
|
+
}, currentPos: {
|
|
113
|
+
x: number;
|
|
114
|
+
y: number;
|
|
115
|
+
}, dt: number): {
|
|
116
|
+
x: number;
|
|
117
|
+
y: number;
|
|
118
|
+
};
|
|
119
|
+
|
|
50
120
|
/**
|
|
51
121
|
* Calculates the position and size of a single item.
|
|
52
122
|
*
|
|
@@ -91,6 +161,26 @@ export declare function calculateItemPosition({ index, direction, fixedSize, gap
|
|
|
91
161
|
*/
|
|
92
162
|
export declare function calculateItemStyle<T = unknown>({ item, direction, itemSize, containerTag, paddingStartX, paddingStartY, isHydrated, isRtl, }: ItemStyleParams<T>): Record<string, string | number | undefined>;
|
|
93
163
|
|
|
164
|
+
/**
|
|
165
|
+
* Helper to calculate offset at a specific index.
|
|
166
|
+
*
|
|
167
|
+
* @param index - Item index.
|
|
168
|
+
* @param fixedSize - Fixed size if any.
|
|
169
|
+
* @param gap - Gap size.
|
|
170
|
+
* @param query - Prefix sum resolver.
|
|
171
|
+
* @returns Offset at index.
|
|
172
|
+
*/
|
|
173
|
+
export declare function calculateOffsetAt(index: number, fixedSize: number | null, gap: number, query: (index: number) => number): number;
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* Detects how many items were prepended to the list based on item identity.
|
|
177
|
+
*
|
|
178
|
+
* @param oldItems - Previous items list.
|
|
179
|
+
* @param newItems - Current items list.
|
|
180
|
+
* @returns Number of prepended items.
|
|
181
|
+
*/
|
|
182
|
+
export declare function calculatePrependCount<T>(oldItems: T[], newItems: T[]): number;
|
|
183
|
+
|
|
94
184
|
/**
|
|
95
185
|
* Calculates the range of items to render based on scroll position and viewport size.
|
|
96
186
|
*
|
|
@@ -118,6 +208,37 @@ export declare function calculateRange({ direction, relativeScrollX, relativeScr
|
|
|
118
208
|
end: number;
|
|
119
209
|
};
|
|
120
210
|
|
|
211
|
+
/**
|
|
212
|
+
* Helper to calculate size for a range on a single axis.
|
|
213
|
+
*
|
|
214
|
+
* @param start - Start index.
|
|
215
|
+
* @param end - End index.
|
|
216
|
+
* @param fixedSize - Fixed size if any.
|
|
217
|
+
* @param gap - Gap size.
|
|
218
|
+
* @param query - Prefix sum resolver.
|
|
219
|
+
* @returns Range size.
|
|
220
|
+
*/
|
|
221
|
+
export declare function calculateRangeSize(start: number, end: number, fixedSize: number | null, gap: number, query: (index: number) => number): number;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Calculates the physical size to be rendered in the DOM.
|
|
225
|
+
*
|
|
226
|
+
* @param isWindow - If the container is the window.
|
|
227
|
+
* @param totalSize - Total virtual size (VU).
|
|
228
|
+
* @returns Physical size (DU).
|
|
229
|
+
*/
|
|
230
|
+
export declare function calculateRenderedSize(isWindow: boolean, totalSize: number): number;
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* Calculates the coordinate scaling factor between virtual and display units.
|
|
234
|
+
*
|
|
235
|
+
* @param isWindow - If the container is the window.
|
|
236
|
+
* @param totalSize - Total virtual size (VU).
|
|
237
|
+
* @param viewportSize - Viewport size (DU).
|
|
238
|
+
* @returns Scaling factor (VU/DU).
|
|
239
|
+
*/
|
|
240
|
+
export declare function calculateScale(isWindow: boolean, totalSize: number, viewportSize: number): number;
|
|
241
|
+
|
|
121
242
|
/**
|
|
122
243
|
* Calculates the target scroll position (relative to content) for a given row/column index and alignment.
|
|
123
244
|
*
|
|
@@ -163,6 +284,25 @@ export declare function calculateRange({ direction, relativeScrollX, relativeScr
|
|
|
163
284
|
*/
|
|
164
285
|
export declare function calculateScrollTarget({ rowIndex, colIndex, options, direction, viewportWidth, viewportHeight, totalWidth, totalHeight, gap, columnGap, fixedSize, fixedWidth, relativeScrollX, relativeScrollY, getItemSizeY, getItemSizeX, getItemQueryY, getItemQueryX, getColumnSize, getColumnQuery, scaleX, scaleY, hostOffsetX, hostOffsetY, stickyIndices, stickyStartX, stickyStartY, stickyEndX, stickyEndY, flowPaddingStartX, flowPaddingStartY, paddingStartX, paddingStartY, paddingEndX, paddingEndY, }: ScrollTargetParams): ScrollTargetResult;
|
|
165
286
|
|
|
287
|
+
/**
|
|
288
|
+
* Calculates the SSR offsets for items based on the configured SSR range and direction.
|
|
289
|
+
*
|
|
290
|
+
* @param direction - Scroll direction.
|
|
291
|
+
* @param ssrRange - SSR configuration.
|
|
292
|
+
* @param fixedItemSize - Fixed item size (VU).
|
|
293
|
+
* @param fixedColumnWidth - Fixed column width (VU).
|
|
294
|
+
* @param gap - Item gap (VU).
|
|
295
|
+
* @param columnGap - Column gap (VU).
|
|
296
|
+
* @param queryY - Resolver for vertical offset (VU).
|
|
297
|
+
* @param queryX - Resolver for horizontal offset (VU).
|
|
298
|
+
* @param queryColumn - Resolver for column offset (VU).
|
|
299
|
+
* @returns Offset X and Y (VU).
|
|
300
|
+
*/
|
|
301
|
+
export declare function calculateSSROffsets(direction: ScrollDirection, ssrRange: SSRRange, fixedItemSize: number | null, fixedColumnWidth: number | null, gap: number, columnGap: number, queryY: (index: number) => number, queryX: (index: number) => number, queryColumn: (index: number) => number): {
|
|
302
|
+
x: number;
|
|
303
|
+
y: number;
|
|
304
|
+
};
|
|
305
|
+
|
|
166
306
|
/**
|
|
167
307
|
* Calculates the sticky state and offset for a single item.
|
|
168
308
|
*
|
|
@@ -182,10 +322,13 @@ export declare function calculateScrollTarget({ rowIndex, colIndex, options, dir
|
|
|
182
322
|
* @param params.columnGap - Column gap (VU).
|
|
183
323
|
* @param params.getItemQueryY - Resolver for vertical offset (VU).
|
|
184
324
|
* @param params.getItemQueryX - Resolver for horizontal offset (VU).
|
|
325
|
+
* @param params.nextStickyIndex - Optional pre-calculated next sticky index.
|
|
185
326
|
* @returns Sticky state and offset (VU).
|
|
186
327
|
* @see StickyParams
|
|
187
328
|
*/
|
|
188
|
-
export declare function calculateStickyItem({ index, isSticky, direction, relativeScrollX, relativeScrollY, originalX, originalY, width, height, stickyIndices, fixedSize, gap, columnGap, getItemQueryY, getItemQueryX, }: StickyParams
|
|
329
|
+
export declare function calculateStickyItem({ index, isSticky, direction, relativeScrollX, relativeScrollY, originalX, originalY, width, height, stickyIndices, fixedSize, gap, columnGap, getItemQueryY, getItemQueryX, nextStickyIndex, }: StickyParams & {
|
|
330
|
+
nextStickyIndex?: number | undefined;
|
|
331
|
+
}): {
|
|
189
332
|
isStickyActiveX: boolean;
|
|
190
333
|
isStickyActiveY: boolean;
|
|
191
334
|
isStickyActive: boolean;
|
|
@@ -372,42 +515,42 @@ export declare type GetItemAriaProps = (index: number) => Record<string, string
|
|
|
372
515
|
/**
|
|
373
516
|
* Extracts the horizontal padding from a padding configuration.
|
|
374
517
|
*
|
|
375
|
-
* @param p - The padding value (number or object with x/y).
|
|
518
|
+
* @param p - The padding value (number or object with x/y). Optional.
|
|
376
519
|
* @param direction - The current scroll direction.
|
|
377
520
|
* @returns The horizontal padding in pixels.
|
|
378
521
|
*/
|
|
379
|
-
export declare function getPaddingX(p
|
|
522
|
+
export declare function getPaddingX(p?: number | {
|
|
380
523
|
x?: number;
|
|
381
524
|
y?: number;
|
|
382
|
-
} |
|
|
525
|
+
} | null, direction?: ScrollDirection): number;
|
|
383
526
|
|
|
384
527
|
/**
|
|
385
528
|
* Extracts the vertical padding from a padding configuration.
|
|
386
529
|
*
|
|
387
|
-
* @param p - The padding value (number or object with x/y).
|
|
530
|
+
* @param p - The padding value (number or object with x/y). Optional.
|
|
388
531
|
* @param direction - The current scroll direction.
|
|
389
532
|
* @returns The vertical padding in pixels.
|
|
390
533
|
*/
|
|
391
|
-
export declare function getPaddingY(p
|
|
534
|
+
export declare function getPaddingY(p?: number | {
|
|
392
535
|
x?: number;
|
|
393
536
|
y?: number;
|
|
394
|
-
} |
|
|
537
|
+
} | null, direction?: ScrollDirection): number;
|
|
395
538
|
|
|
396
539
|
/**
|
|
397
540
|
* Checks if the container is the document body element.
|
|
398
541
|
*
|
|
399
|
-
* @param container - The container element or window to check.
|
|
542
|
+
* @param container - The container element or window to check. Optional.
|
|
400
543
|
* @returns `true` if the container is the `<body>` element.
|
|
401
544
|
*/
|
|
402
|
-
export declare function isBody(container
|
|
545
|
+
export declare function isBody(container?: HTMLElement | Window | null): container is HTMLElement;
|
|
403
546
|
|
|
404
547
|
/**
|
|
405
548
|
* Checks if the container is a valid HTML Element with bounding rect support.
|
|
406
549
|
*
|
|
407
|
-
* @param container - The container to check.
|
|
550
|
+
* @param container - The container to check. Optional.
|
|
408
551
|
* @returns `true` if the container is an `HTMLElement`.
|
|
409
552
|
*/
|
|
410
|
-
export declare function isElement(container
|
|
553
|
+
export declare function isElement(container?: HTMLElement | Window | null): container is HTMLElement;
|
|
411
554
|
|
|
412
555
|
/**
|
|
413
556
|
* Determines if an item is visible within the usable viewport.
|
|
@@ -425,10 +568,10 @@ export declare function isItemVisible(itemPos: number, itemSize: number, scrollP
|
|
|
425
568
|
/**
|
|
426
569
|
* Checks if the target is an element that supports scrolling.
|
|
427
570
|
*
|
|
428
|
-
* @param target - The event target to check.
|
|
571
|
+
* @param target - The event target to check. Optional.
|
|
429
572
|
* @returns `true` if the target is an `HTMLElement` with scroll properties.
|
|
430
573
|
*/
|
|
431
|
-
export declare function isScrollableElement(target
|
|
574
|
+
export declare function isScrollableElement(target?: EventTarget | null): target is HTMLElement;
|
|
432
575
|
|
|
433
576
|
/**
|
|
434
577
|
* Helper to determine if an options argument is a full `ScrollToIndexOptions` object.
|
|
@@ -441,18 +584,18 @@ export declare function isScrollToIndexOptions(options: unknown): options is Scr
|
|
|
441
584
|
/**
|
|
442
585
|
* Checks if the container is the window object.
|
|
443
586
|
*
|
|
444
|
-
* @param container - The container element or window to check.
|
|
587
|
+
* @param container - The container element or window to check. Optional.
|
|
445
588
|
* @returns `true` if the container is the global window object.
|
|
446
589
|
*/
|
|
447
|
-
export declare function isWindow(container
|
|
590
|
+
export declare function isWindow(container?: HTMLElement | Window | null): container is Window;
|
|
448
591
|
|
|
449
592
|
/**
|
|
450
593
|
* Checks if the container is window-like (global window or document body).
|
|
451
594
|
*
|
|
452
|
-
* @param container - The container element or window to check.
|
|
595
|
+
* @param container - The container element or window to check. Optional.
|
|
453
596
|
* @returns `true` if the container is window or body.
|
|
454
597
|
*/
|
|
455
|
-
export declare function isWindowLike(container
|
|
598
|
+
export declare function isWindowLike(container?: HTMLElement | Window | null): boolean;
|
|
456
599
|
|
|
457
600
|
/** Parameters for calculating an item's position and size. */
|
|
458
601
|
export declare interface ItemPositionParams {
|
|
@@ -619,6 +762,23 @@ export declare interface RenderedItem<T = unknown> {
|
|
|
619
762
|
stickyOffset: Point;
|
|
620
763
|
}
|
|
621
764
|
|
|
765
|
+
/**
|
|
766
|
+
* Resolves the target index and alignment for snapping on a single axis.
|
|
767
|
+
*
|
|
768
|
+
* @param mode - The snap mode ('start', 'center', 'end', 'auto').
|
|
769
|
+
* @param dir - The scroll direction on this axis.
|
|
770
|
+
* @param currentIdx - The current first visible index.
|
|
771
|
+
* @param currentEndIdx - The current last visible index.
|
|
772
|
+
* @param relScroll - The current virtual scroll offset.
|
|
773
|
+
* @param viewSize - The viewport dimension.
|
|
774
|
+
* @param count - Total number of items/columns.
|
|
775
|
+
* @param getSize - Resolver for item size.
|
|
776
|
+
* @param getQuery - Resolver for item prefix sum.
|
|
777
|
+
* @param getIndexAt - Resolver for index at a virtual offset.
|
|
778
|
+
* @returns Snap result or null.
|
|
779
|
+
*/
|
|
780
|
+
export declare function resolveSnap(mode: SnapMode, dir: 'start' | 'end' | null, currentIdx: number, currentEndIdx: number, relScroll: number, viewSize: number, count: number, getSize: (i: number) => number, getQuery: (i: number) => number, getIndexAt: (o: number) => number): SnapResult | null;
|
|
781
|
+
|
|
622
782
|
/**
|
|
623
783
|
* Alignment of an item within the viewport after a scroll operation.
|
|
624
784
|
* - 'start': Aligns item to the top or left edge.
|
|
@@ -840,6 +1000,25 @@ export declare interface Size {
|
|
|
840
1000
|
height: number;
|
|
841
1001
|
}
|
|
842
1002
|
|
|
1003
|
+
/**
|
|
1004
|
+
* Snap mode for automatic alignment after scrolling stops.
|
|
1005
|
+
* - `false`: No snapping.
|
|
1006
|
+
* - `true`: Same as 'auto'.
|
|
1007
|
+
* - 'start': Aligns the first visible item to the viewport start if at least 50% visible, otherwise aligns the next item.
|
|
1008
|
+
* - 'center': Aligns the item that intersects the viewport center to the center.
|
|
1009
|
+
* - 'end': Aligns the last visible item to the viewport end if at least 50% visible, otherwise aligns the previous item.
|
|
1010
|
+
* - 'auto': Intelligent snapping based on scroll direction. Acts as 'end' when scrolling towards start, and 'start' when scrolling towards end.
|
|
1011
|
+
*/
|
|
1012
|
+
export declare type SnapMode = boolean | 'start' | 'center' | 'end' | 'auto';
|
|
1013
|
+
|
|
1014
|
+
/** Snap result. */
|
|
1015
|
+
export declare interface SnapResult {
|
|
1016
|
+
/** Target index. */
|
|
1017
|
+
index: number;
|
|
1018
|
+
/** Alignment. */
|
|
1019
|
+
align: 'start' | 'center' | 'end';
|
|
1020
|
+
}
|
|
1021
|
+
|
|
843
1022
|
/**
|
|
844
1023
|
* Configuration for Server-Side Rendering.
|
|
845
1024
|
* Defines which items are rendered statically on the server.
|
|
@@ -1006,7 +1185,7 @@ export declare function useVirtualScroll<T = unknown>(propsInput: MaybeRefOrGett
|
|
|
1006
1185
|
* @see ScrollAlignment
|
|
1007
1186
|
* @see ScrollToIndexOptions
|
|
1008
1187
|
*/
|
|
1009
|
-
scrollToIndex: (rowIndex
|
|
1188
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
|
|
1010
1189
|
/**
|
|
1011
1190
|
* Programmatically scroll to a specific pixel offset relative to the content start.
|
|
1012
1191
|
*
|
|
@@ -1100,15 +1279,23 @@ export declare function useVirtualScroll<T = unknown>(propsInput: MaybeRefOrGett
|
|
|
1100
1279
|
* Physical height of the items wrapper in the DOM (clamped to browser limits, in DU).
|
|
1101
1280
|
*/
|
|
1102
1281
|
renderedVirtualHeight: ComputedRef<number>;
|
|
1282
|
+
/**
|
|
1283
|
+
* Helper to get the row index at a specific virtual offset.
|
|
1284
|
+
*/
|
|
1285
|
+
getRowIndexAt: (offset: number) => number;
|
|
1286
|
+
/**
|
|
1287
|
+
* Helper to get the column index at a specific virtual offset.
|
|
1288
|
+
*/
|
|
1289
|
+
getColIndexAt: (offset: number) => number;
|
|
1103
1290
|
};
|
|
1104
1291
|
|
|
1105
1292
|
/**
|
|
1106
1293
|
* Composable for virtual scrollbar logic.
|
|
1107
1294
|
* Provides attributes and event listeners for track and thumb elements.
|
|
1108
1295
|
*
|
|
1109
|
-
* @param
|
|
1296
|
+
* @param propsInput - Configuration properties.
|
|
1110
1297
|
*/
|
|
1111
|
-
export declare function useVirtualScrollbar(
|
|
1298
|
+
export declare function useVirtualScrollbar(propsInput: MaybeRefOrGetter<UseVirtualScrollbarProps>): {
|
|
1112
1299
|
/** Viewport size as a percentage of total size (0 to 1). */
|
|
1113
1300
|
viewportPercent: ComputedRef<number>;
|
|
1114
1301
|
/** Current scroll position as a percentage of the scrollable range (0 to 1). */
|
|
@@ -1185,24 +1372,80 @@ export declare function useVirtualScrollbar(props: UseVirtualScrollbarProps): {
|
|
|
1185
1372
|
/** Configuration properties for the `useVirtualScrollbar` composable. */
|
|
1186
1373
|
export declare interface UseVirtualScrollbarProps {
|
|
1187
1374
|
/** The axis for this scrollbar. */
|
|
1188
|
-
axis:
|
|
1375
|
+
axis: ScrollAxis;
|
|
1189
1376
|
/** Total size of the scrollable content area in display pixels (DU). */
|
|
1190
|
-
totalSize:
|
|
1377
|
+
totalSize: number;
|
|
1191
1378
|
/** Current scroll position in display pixels (DU). */
|
|
1192
|
-
position:
|
|
1379
|
+
position: number;
|
|
1193
1380
|
/** Viewport size in display pixels (DU). */
|
|
1194
|
-
viewportSize:
|
|
1381
|
+
viewportSize: number;
|
|
1195
1382
|
/**
|
|
1196
1383
|
* Function to scroll to a specific display pixel offset (DU) on this axis.
|
|
1197
1384
|
* @param offset - The display pixel offset to scroll to.
|
|
1198
1385
|
*/
|
|
1199
1386
|
scrollToOffset: (offset: number) => void;
|
|
1200
1387
|
/** The ID of the container element this scrollbar controls. */
|
|
1201
|
-
containerId?:
|
|
1388
|
+
containerId?: string | undefined;
|
|
1202
1389
|
/** Whether the scrollbar is in Right-to-Left (RTL) mode. */
|
|
1203
|
-
isRtl?:
|
|
1390
|
+
isRtl?: boolean;
|
|
1204
1391
|
/** Accessible label for the scrollbar. */
|
|
1205
|
-
ariaLabel?:
|
|
1392
|
+
ariaLabel?: string | undefined;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
/**
|
|
1396
|
+
* Composable for managing item and column sizes using Fenwick Trees.
|
|
1397
|
+
* Handles prefix sum calculations, size updates, and scroll correction adjustments.
|
|
1398
|
+
*/
|
|
1399
|
+
export declare function useVirtualScrollSizes<T>(propsInput: MaybeRefOrGetter<UseVirtualScrollSizesProps<T>>): {
|
|
1400
|
+
/** Fenwick Tree for horizontal item sizes. */
|
|
1401
|
+
itemSizesX: FenwickTree;
|
|
1402
|
+
/** Fenwick Tree for vertical item sizes. */
|
|
1403
|
+
itemSizesY: FenwickTree;
|
|
1404
|
+
/** Fenwick Tree for column widths. */
|
|
1405
|
+
columnSizes: FenwickTree;
|
|
1406
|
+
/** Measured item widths. */
|
|
1407
|
+
measuredItemsX: ShallowRef<Uint8Array<ArrayBuffer>, Uint8Array<ArrayBuffer>>;
|
|
1408
|
+
/** Measured item heights. */
|
|
1409
|
+
measuredItemsY: ShallowRef<Uint8Array<ArrayBuffer>, Uint8Array<ArrayBuffer>>;
|
|
1410
|
+
/** Measured column widths. */
|
|
1411
|
+
measuredColumns: ShallowRef<Uint8Array<ArrayBuffer>, Uint8Array<ArrayBuffer>>;
|
|
1412
|
+
/** Flag that updates when any tree changes. */
|
|
1413
|
+
treeUpdateFlag: Ref<number, number>;
|
|
1414
|
+
/** Whether sizes have been initialized. */
|
|
1415
|
+
sizesInitialized: Ref<boolean, boolean>;
|
|
1416
|
+
/** Base size of an item from props. */
|
|
1417
|
+
getItemBaseSize: (item: T, index: number) => number;
|
|
1418
|
+
/** Helper to get current size at index. */
|
|
1419
|
+
getSizeAt: (index: number, sizeProp: number | number[] | ((...args: any[]) => number) | null | undefined, defaultSize: number, gap: number, tree: FenwickTree, isX: boolean) => number;
|
|
1420
|
+
/** Initialize or update sizes from props. */
|
|
1421
|
+
initializeSizes: (onScrollCorrection?: (addedX: number, addedY: number) => void) => void;
|
|
1422
|
+
/** Update sizes of multiple items from measurements. */
|
|
1423
|
+
updateItemSizes: (updates: Array<{
|
|
1424
|
+
index: number;
|
|
1425
|
+
inlineSize: number;
|
|
1426
|
+
blockSize: number;
|
|
1427
|
+
element?: HTMLElement | undefined;
|
|
1428
|
+
}>, getRowIndexAt: (offset: number) => number, getColIndexAt: (offset: number) => number, relativeScrollX: number, relativeScrollY: number, onScrollCorrection: (deltaX: number, deltaY: number) => void) => void;
|
|
1429
|
+
/** Reset all measurements. */
|
|
1430
|
+
refresh: (onScrollCorrection?: (addedX: number, addedY: number) => void) => void;
|
|
1431
|
+
};
|
|
1432
|
+
|
|
1433
|
+
/**
|
|
1434
|
+
* Configuration properties for the `useVirtualScrollSizes` composable.
|
|
1435
|
+
*/
|
|
1436
|
+
export declare interface UseVirtualScrollSizesProps<T> {
|
|
1437
|
+
/** Reactive reference to the virtual scroll configuration. */
|
|
1438
|
+
props: VirtualScrollProps<T>;
|
|
1439
|
+
/** Whether items have dynamic heights/widths. */
|
|
1440
|
+
isDynamicItemSize: boolean;
|
|
1441
|
+
/** Whether columns have dynamic widths. */
|
|
1442
|
+
isDynamicColumnWidth: boolean;
|
|
1443
|
+
/** Fallback size for items before they are measured. */
|
|
1444
|
+
defaultSize: number;
|
|
1445
|
+
/** Fixed item size if applicable. */
|
|
1446
|
+
fixedItemSize: number | null;
|
|
1447
|
+
/** Scroll direction. */
|
|
1448
|
+
direction: 'vertical' | 'horizontal' | 'both';
|
|
1206
1449
|
}
|
|
1207
1450
|
|
|
1208
1451
|
export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
@@ -1281,16 +1524,28 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1281
1524
|
*/
|
|
1282
1525
|
getItemSize: (index: number) => number;
|
|
1283
1526
|
/**
|
|
1527
|
+
* Helper to get the row (or item) index at a specific vertical (or horizontal in horizontal mode) virtual offset (VU).
|
|
1528
|
+
* @param offset - The virtual pixel offset.
|
|
1529
|
+
* @see useVirtualScroll
|
|
1530
|
+
*/
|
|
1531
|
+
getRowIndexAt: (offset: number) => number;
|
|
1532
|
+
/**
|
|
1533
|
+
* Helper to get the column index at a specific horizontal virtual offset (VU).
|
|
1534
|
+
* @param offset - The virtual pixel offset.
|
|
1535
|
+
* @see useVirtualScroll
|
|
1536
|
+
*/
|
|
1537
|
+
getColIndexAt: (offset: number) => number;
|
|
1538
|
+
/**
|
|
1284
1539
|
* Programmatically scroll to a specific row and/or column.
|
|
1285
1540
|
*
|
|
1286
|
-
* @param rowIndex - The row index to scroll to. Pass null to only scroll horizontally.
|
|
1287
|
-
* @param colIndex - The column index to scroll to. Pass null to only scroll vertically.
|
|
1541
|
+
* @param rowIndex - The row index to scroll to. Pass null to only scroll horizontally. Optional.
|
|
1542
|
+
* @param colIndex - The column index to scroll to. Pass null to only scroll vertically. Optional.
|
|
1288
1543
|
* @param options - Alignment and behavior options. Defaults to { align: 'auto', behavior: 'auto' }.
|
|
1289
1544
|
* @see ScrollAlignment
|
|
1290
1545
|
* @see ScrollToIndexOptions
|
|
1291
1546
|
* @see useVirtualScroll
|
|
1292
1547
|
*/
|
|
1293
|
-
scrollToIndex: (rowIndex
|
|
1548
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
|
|
1294
1549
|
/**
|
|
1295
1550
|
* Programmatically scroll to a specific pixel offset.
|
|
1296
1551
|
*
|
|
@@ -1369,6 +1624,7 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1369
1624
|
role: Ref<string | undefined, string | undefined>;
|
|
1370
1625
|
ariaLabel: Ref<string | undefined, string | undefined>;
|
|
1371
1626
|
ariaLabelledby: Ref<string | undefined, string | undefined>;
|
|
1627
|
+
snap: Ref<SnapMode | undefined, SnapMode | undefined>;
|
|
1372
1628
|
direction: Ref<ScrollDirection, ScrollDirection>;
|
|
1373
1629
|
bufferBefore: Ref<number, number>;
|
|
1374
1630
|
bufferAfter: Ref<number, number>;
|
|
@@ -1563,7 +1819,7 @@ export declare interface VirtualScrollBaseProps<T = unknown> {
|
|
|
1563
1819
|
*/
|
|
1564
1820
|
gap?: number | undefined;
|
|
1565
1821
|
/**
|
|
1566
|
-
* Gap between columns in VU.
|
|
1822
|
+
* Gap between columns in virtual units (VU).
|
|
1567
1823
|
* Applied in horizontal and bidirectional grid modes.
|
|
1568
1824
|
*/
|
|
1569
1825
|
columnGap?: number | undefined;
|
|
@@ -1624,6 +1880,11 @@ export declare interface VirtualScrollBaseProps<T = unknown> {
|
|
|
1624
1880
|
* Set to 'none' or 'presentation' to disable automatic role assignment on the wrapper.
|
|
1625
1881
|
*/
|
|
1626
1882
|
itemRole?: string | undefined;
|
|
1883
|
+
/**
|
|
1884
|
+
* Whether to snap to items after scrolling stops.
|
|
1885
|
+
* @default false
|
|
1886
|
+
*/
|
|
1887
|
+
snap?: SnapMode | undefined;
|
|
1627
1888
|
}
|
|
1628
1889
|
|
|
1629
1890
|
/** Configuration properties for the `VirtualScroll` component. */
|
|
@@ -1654,6 +1915,12 @@ export declare interface VirtualScrollInstance<T = unknown> extends VirtualScrol
|
|
|
1654
1915
|
getRowHeight: (index: number) => number;
|
|
1655
1916
|
/** Helper to get ARIA attributes for a cell. */
|
|
1656
1917
|
getCellAriaProps: (colIndex: number) => Record<string, string | number | undefined>;
|
|
1918
|
+
/** Helper to get ARIA attributes for an item. */
|
|
1919
|
+
getItemAriaProps: (index: number) => Record<string, string | number | undefined>;
|
|
1920
|
+
/** The ARIA role of the items wrapper. */
|
|
1921
|
+
wrapperRole: string | null;
|
|
1922
|
+
/** The ARIA role of each cell. */
|
|
1923
|
+
cellRole: string | null;
|
|
1657
1924
|
/** Helper to get the virtual offset of a specific row. */
|
|
1658
1925
|
getRowOffset: (index: number) => number;
|
|
1659
1926
|
/** Helper to get the virtual offset of a specific column. */
|
|
@@ -1663,7 +1930,7 @@ export declare interface VirtualScrollInstance<T = unknown> extends VirtualScrol
|
|
|
1663
1930
|
/** Helper to get the size of a specific item along the scroll axis. */
|
|
1664
1931
|
getItemSize: (index: number) => number;
|
|
1665
1932
|
/** Programmatically scroll to a specific row and/or column. */
|
|
1666
|
-
scrollToIndex: (rowIndex
|
|
1933
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
|
|
1667
1934
|
/** Programmatically scroll to a specific pixel offset. */
|
|
1668
1935
|
scrollToOffset: (x?: number | null, y?: number | null, options?: {
|
|
1669
1936
|
behavior?: 'auto' | 'smooth';
|