@pdanpdan/virtual-scroll 0.9.1 → 0.10.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 +82 -4
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +192 -156
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +862 -695
- package/dist/index.mjs.map +1 -1
- package/dist/virtual-scroll.css +1 -1
- package/package.json +1 -1
- package/src/components/VirtualScroll.vue +30 -20
- package/src/composables/useVirtualScroll.ts +394 -813
- package/src/composables/useVirtualScrollSizes.ts +28 -37
- package/src/composables/useVirtualScrollbar.ts +16 -0
- package/src/extensions/all.ts +7 -0
- package/src/extensions/coordinate-scaling.ts +30 -0
- package/src/extensions/index.ts +88 -0
- package/src/extensions/infinite-loading.ts +47 -0
- package/src/extensions/prepend-restoration.ts +49 -0
- package/src/extensions/rtl.ts +42 -0
- package/src/extensions/snapping.ts +95 -0
- package/src/extensions/sticky.ts +43 -0
- package/src/types.ts +47 -8
- package/src/utils/scroll.ts +2 -2
- package/src/utils/virtual-scroll-logic.ts +42 -0
package/dist/index.d.ts
CHANGED
|
@@ -418,6 +418,81 @@ export declare function displayToVirtual(displayPos: number, hostOffset: number,
|
|
|
418
418
|
/** Initial empty state for scroll details. */
|
|
419
419
|
export declare const EMPTY_SCROLL_DETAILS: ScrollDetails<unknown>;
|
|
420
420
|
|
|
421
|
+
/**
|
|
422
|
+
* Hook context provided to extensions.
|
|
423
|
+
*/
|
|
424
|
+
declare interface ExtensionContext<T = unknown> {
|
|
425
|
+
/** Reactive reference to the component props. */
|
|
426
|
+
props: Ref<VirtualScrollProps<T>>;
|
|
427
|
+
/** Reactive reference to the current scroll details. */
|
|
428
|
+
scrollDetails: Ref<ScrollDetails<T>>;
|
|
429
|
+
/** Total calculated or estimated size of the scrollable area (DU). */
|
|
430
|
+
totalSize: Ref<Size>;
|
|
431
|
+
/** Reactive reference to the current rendered item range. */
|
|
432
|
+
range: Ref<{
|
|
433
|
+
start: number;
|
|
434
|
+
end: number;
|
|
435
|
+
}>;
|
|
436
|
+
/** Reactive reference to the first visible item index. */
|
|
437
|
+
currentIndex: Ref<number>;
|
|
438
|
+
/** Reactive references to internal component state variables. */
|
|
439
|
+
internalState: {
|
|
440
|
+
/** Horizontal display scroll position (DU). */
|
|
441
|
+
scrollX: Ref<number>;
|
|
442
|
+
/** Vertical display scroll position (DU). */
|
|
443
|
+
scrollY: Ref<number>;
|
|
444
|
+
/** Horizontal virtual scroll position (VU). */
|
|
445
|
+
internalScrollX: Ref<number>;
|
|
446
|
+
/** Vertical virtual scroll position (VU). */
|
|
447
|
+
internalScrollY: Ref<number>;
|
|
448
|
+
/** Right-to-Left text direction state. */
|
|
449
|
+
isRtl: Ref<boolean>;
|
|
450
|
+
/** Scrolling activity state. */
|
|
451
|
+
isScrolling: Ref<boolean>;
|
|
452
|
+
/** Programmatic scroll activity state. */
|
|
453
|
+
isProgrammaticScroll: Ref<boolean>;
|
|
454
|
+
/** Viewport width (DU). */
|
|
455
|
+
viewportWidth: Ref<number>;
|
|
456
|
+
/** Viewport height (DU). */
|
|
457
|
+
viewportHeight: Ref<number>;
|
|
458
|
+
/** Coordinate scale factor for X axis. */
|
|
459
|
+
scaleX: Ref<number>;
|
|
460
|
+
/** Coordinate scale factor for Y axis. */
|
|
461
|
+
scaleY: Ref<number>;
|
|
462
|
+
/** Horizontal scroll direction. */
|
|
463
|
+
scrollDirectionX: Ref<'start' | 'end' | null>;
|
|
464
|
+
/** Vertical scroll direction. */
|
|
465
|
+
scrollDirectionY: Ref<'start' | 'end' | null>;
|
|
466
|
+
/** Relative horizontal virtual scroll position (VU). */
|
|
467
|
+
relativeScrollX: Ref<number>;
|
|
468
|
+
/** Relative vertical virtual scroll position (VU). */
|
|
469
|
+
relativeScrollY: Ref<number>;
|
|
470
|
+
};
|
|
471
|
+
/** Direct access to core component methods. */
|
|
472
|
+
methods: {
|
|
473
|
+
/** Scroll to a specific row and/or column. */
|
|
474
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => ScrollToIndexResult;
|
|
475
|
+
/** Scroll to a specific virtual pixel offset. */
|
|
476
|
+
scrollToOffset: (x?: number | null, y?: number | null, options?: {
|
|
477
|
+
behavior?: 'auto' | 'smooth';
|
|
478
|
+
}) => void;
|
|
479
|
+
/** Detect and update text direction. */
|
|
480
|
+
updateDirection: () => void;
|
|
481
|
+
/** Get row index at virtual offset. */
|
|
482
|
+
getRowIndexAt: (offset: number) => number;
|
|
483
|
+
/** Get column index at virtual offset. */
|
|
484
|
+
getColIndexAt: (offset: number) => number;
|
|
485
|
+
/** Get actual size of item (measured or estimated). */
|
|
486
|
+
getItemSize: (index: number) => number;
|
|
487
|
+
/** Get base configuration size of item. */
|
|
488
|
+
getItemBaseSize: (item: T, index: number) => number;
|
|
489
|
+
/** Get virtual offset of item. */
|
|
490
|
+
getItemOffset: (index: number) => number;
|
|
491
|
+
/** Adjust scroll position for measurement changes. */
|
|
492
|
+
handleScrollCorrection: (addedX: number, addedY: number) => void;
|
|
493
|
+
};
|
|
494
|
+
}
|
|
495
|
+
|
|
421
496
|
/**
|
|
422
497
|
* Fenwick Tree (Binary Indexed Tree) implementation for efficient
|
|
423
498
|
* prefix sum calculations and updates.
|
|
@@ -669,7 +744,7 @@ export declare interface ItemStyleParams<T = unknown> {
|
|
|
669
744
|
/** Scroll direction. */
|
|
670
745
|
direction: ScrollDirection;
|
|
671
746
|
/** Configured item size logic. */
|
|
672
|
-
itemSize: number | ((item: T, index: number) => number) | null | undefined;
|
|
747
|
+
itemSize: number | (number | null | undefined)[] | ((item: T, index: number) => number) | null | undefined;
|
|
673
748
|
/** Parent container tag. */
|
|
674
749
|
containerTag: string;
|
|
675
750
|
/** Padding start on X axis. */
|
|
@@ -716,6 +791,8 @@ export declare interface RangeParams {
|
|
|
716
791
|
usableHeight: number;
|
|
717
792
|
/** Total item count. */
|
|
718
793
|
itemsLength: number;
|
|
794
|
+
/** Column count (for grid mode). */
|
|
795
|
+
columnCount?: number;
|
|
719
796
|
/** Buffer items before. */
|
|
720
797
|
bufferBefore: number;
|
|
721
798
|
/** Buffer items after. */
|
|
@@ -990,6 +1067,24 @@ export declare interface ScrollToIndexOptions {
|
|
|
990
1067
|
*/
|
|
991
1068
|
behavior?: 'auto' | 'smooth';
|
|
992
1069
|
/* Excluded from this release type: isCorrection */
|
|
1070
|
+
/**
|
|
1071
|
+
* If true, only calculates the target position without performing the actual scroll.
|
|
1072
|
+
* Useful for extensions that need to validate if a snap is necessary.
|
|
1073
|
+
* @default false
|
|
1074
|
+
*/
|
|
1075
|
+
dryRun?: boolean;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
/** Result of the `scrollToIndex` method. */
|
|
1079
|
+
export declare interface ScrollToIndexResult {
|
|
1080
|
+
/** Target relative horizontal position in virtual units (VU). */
|
|
1081
|
+
targetX: number;
|
|
1082
|
+
/** Target relative vertical position in virtual units (VU). */
|
|
1083
|
+
targetY: number;
|
|
1084
|
+
/** Target display horizontal position (DU). */
|
|
1085
|
+
displayTargetX: number;
|
|
1086
|
+
/** Target display vertical position (DU). */
|
|
1087
|
+
displayTargetY: number;
|
|
993
1088
|
}
|
|
994
1089
|
|
|
995
1090
|
/** Represents dimensions in 2D space. */
|
|
@@ -1007,9 +1102,10 @@ export declare interface Size {
|
|
|
1007
1102
|
* - 'start': Aligns the first visible item to the viewport start if at least 50% visible, otherwise aligns the next item.
|
|
1008
1103
|
* - 'center': Aligns the item that intersects the viewport center to the center.
|
|
1009
1104
|
* - 'end': Aligns the last visible item to the viewport end if at least 50% visible, otherwise aligns the previous item.
|
|
1105
|
+
* - 'next': Snaps to the next (closest) snap position in the direction of the scroll.
|
|
1010
1106
|
* - 'auto': Intelligent snapping based on scroll direction. Acts as 'end' when scrolling towards start, and 'start' when scrolling towards end.
|
|
1011
1107
|
*/
|
|
1012
|
-
export declare type SnapMode = boolean | 'start' | 'center' | 'end' | 'auto';
|
|
1108
|
+
export declare type SnapMode = boolean | 'start' | 'center' | 'end' | 'next' | 'auto';
|
|
1013
1109
|
|
|
1014
1110
|
/** Snap result. */
|
|
1015
1111
|
export declare interface SnapResult {
|
|
@@ -1103,190 +1199,90 @@ export declare interface TotalSizeParams {
|
|
|
1103
1199
|
* Handles calculation of visible items, scroll events, dynamic item sizes, and programmatic scrolling.
|
|
1104
1200
|
*
|
|
1105
1201
|
* @param propsInput - The configuration properties. Can be a plain object, a Ref, or a getter function.
|
|
1202
|
+
* @param extensions - Optional list of extensions to enhance functionality (RTL, Snapping, Sticky, etc.).
|
|
1106
1203
|
* @see VirtualScrollProps
|
|
1107
1204
|
*/
|
|
1108
|
-
export declare function useVirtualScroll<T = unknown>(propsInput:
|
|
1109
|
-
/**
|
|
1110
|
-
* Array of items currently rendered in the DOM with their calculated offsets and sizes.
|
|
1111
|
-
* Offsets are in Display Units (DU), sizes are in Virtual Units (VU).
|
|
1112
|
-
* @see RenderedItem
|
|
1113
|
-
*/
|
|
1205
|
+
export declare function useVirtualScroll<T = unknown>(propsInput: Ref<VirtualScrollProps<T>> | (() => VirtualScrollProps<T>), extensions?: VirtualScrollExtension<T>[]): {
|
|
1206
|
+
/** Reactive list of items to render in the current viewport. */
|
|
1114
1207
|
renderedItems: ComputedRef<RenderedItem<T>[]>;
|
|
1115
|
-
/**
|
|
1116
|
-
* Total calculated width of all items including gaps (in VU).
|
|
1117
|
-
*/
|
|
1208
|
+
/** Total calculated width of the scrollable content area (DU). */
|
|
1118
1209
|
totalWidth: ComputedRef<number>;
|
|
1119
|
-
/**
|
|
1120
|
-
* Total calculated height of all items including gaps (in VU).
|
|
1121
|
-
*/
|
|
1210
|
+
/** Total calculated height of the scrollable content area (DU). */
|
|
1122
1211
|
totalHeight: ComputedRef<number>;
|
|
1123
|
-
/**
|
|
1124
|
-
* Total width to be rendered in the DOM (clamped to browser limits, in DU).
|
|
1125
|
-
*/
|
|
1212
|
+
/** Physical width of the content in the DOM (clamped to browser limits). */
|
|
1126
1213
|
renderedWidth: ComputedRef<number>;
|
|
1127
|
-
/**
|
|
1128
|
-
* Total height to be rendered in the DOM (clamped to browser limits, in DU).
|
|
1129
|
-
*/
|
|
1214
|
+
/** Physical height of the content in the DOM (clamped to browser limits). */
|
|
1130
1215
|
renderedHeight: ComputedRef<number>;
|
|
1131
|
-
/**
|
|
1132
|
-
* Detailed information about the current scroll state.
|
|
1133
|
-
* Includes currentIndex, scrollOffset (VU), displayScrollOffset (DU), viewportSize (DU), totalSize (VU), and scrolling status.
|
|
1134
|
-
* @see ScrollDetails
|
|
1135
|
-
*/
|
|
1216
|
+
/** Detailed information about the current scroll state. */
|
|
1136
1217
|
scrollDetails: ComputedRef<ScrollDetails<T>>;
|
|
1137
|
-
/**
|
|
1138
|
-
* Helper to get the height of a specific row based on current configuration and measurements.
|
|
1139
|
-
*
|
|
1140
|
-
* @param index - The row index.
|
|
1141
|
-
* @returns The height in VU (excluding gap).
|
|
1142
|
-
*/
|
|
1218
|
+
/** Helper to get the height of a specific row. */
|
|
1143
1219
|
getRowHeight: (index: number) => number;
|
|
1144
|
-
/**
|
|
1145
|
-
* Helper to get the width of a specific column based on current configuration and measurements.
|
|
1146
|
-
*
|
|
1147
|
-
* @param index - The column index.
|
|
1148
|
-
* @returns The width in VU (excluding gap).
|
|
1149
|
-
*/
|
|
1220
|
+
/** Helper to get the width of a specific column. */
|
|
1150
1221
|
getColumnWidth: (index: number) => number;
|
|
1151
|
-
/**
|
|
1152
|
-
* Helper to get the virtual offset of a specific row.
|
|
1153
|
-
*
|
|
1154
|
-
* @param index - The row index.
|
|
1155
|
-
* @returns The virtual offset in VU.
|
|
1156
|
-
*/
|
|
1222
|
+
/** Helper to get the virtual offset of a specific row. */
|
|
1157
1223
|
getRowOffset: (index: number) => number;
|
|
1158
|
-
/**
|
|
1159
|
-
* Helper to get the virtual offset of a specific column.
|
|
1160
|
-
*
|
|
1161
|
-
* @param index - The column index.
|
|
1162
|
-
* @returns The virtual offset in VU.
|
|
1163
|
-
*/
|
|
1224
|
+
/** Helper to get the virtual offset of a specific column. */
|
|
1164
1225
|
getColumnOffset: (index: number) => number;
|
|
1165
|
-
/**
|
|
1166
|
-
* Helper to get the virtual offset of a specific item along the scroll axis.
|
|
1167
|
-
*
|
|
1168
|
-
* @param index - The item index.
|
|
1169
|
-
* @returns The virtual offset in VU.
|
|
1170
|
-
*/
|
|
1226
|
+
/** Helper to get the virtual offset of a specific item. */
|
|
1171
1227
|
getItemOffset: (index: number) => number;
|
|
1172
|
-
/**
|
|
1173
|
-
* Helper to get the size of a specific item along the scroll axis.
|
|
1174
|
-
*
|
|
1175
|
-
* @param index - The item index.
|
|
1176
|
-
* @returns The size in VU (excluding gap).
|
|
1177
|
-
*/
|
|
1228
|
+
/** Helper to get the size of a specific item along the scroll axis. */
|
|
1178
1229
|
getItemSize: (index: number) => number;
|
|
1179
|
-
/**
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
* @param rowIndex - The row index to scroll to. Pass null to only scroll horizontally.
|
|
1183
|
-
* @param colIndex - The column index to scroll to. Pass null to only scroll vertically.
|
|
1184
|
-
* @param options - Alignment and behavior options.
|
|
1185
|
-
* @see ScrollAlignment
|
|
1186
|
-
* @see ScrollToIndexOptions
|
|
1187
|
-
*/
|
|
1188
|
-
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
|
|
1189
|
-
/**
|
|
1190
|
-
* Programmatically scroll to a specific pixel offset relative to the content start.
|
|
1191
|
-
*
|
|
1192
|
-
* @param x - The pixel offset to scroll to on the X axis (VU). Pass null to keep current position.
|
|
1193
|
-
* @param y - The pixel offset to scroll to on the Y axis (VU). Pass null to keep current position.
|
|
1194
|
-
* @param options - Scroll options (behavior).
|
|
1195
|
-
*/
|
|
1230
|
+
/** Programmatically scroll to a specific row and/or column. */
|
|
1231
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => ScrollToIndexResult;
|
|
1232
|
+
/** Programmatically scroll to a specific virtual pixel offset. */
|
|
1196
1233
|
scrollToOffset: (x?: number | null, y?: number | null, options?: {
|
|
1197
1234
|
behavior?: "auto" | "smooth";
|
|
1198
1235
|
}) => void;
|
|
1199
|
-
/**
|
|
1200
|
-
* Stops any currently active smooth scroll animation and clears pending corrections.
|
|
1201
|
-
*/
|
|
1236
|
+
/** Immediately stops any currently active smooth scroll animation and clears pending corrections. */
|
|
1202
1237
|
stopProgrammaticScroll: () => void;
|
|
1203
|
-
/**
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
* @param index - The item index.
|
|
1207
|
-
* @param width - The measured inlineSize (width in DU).
|
|
1208
|
-
* @param height - The measured blockSize (height in DU).
|
|
1209
|
-
* @param element - The measured element (optional, used for robust grid column detection).
|
|
1210
|
-
*/
|
|
1238
|
+
/** Adjusts the scroll position to compensate for measurement changes. */
|
|
1239
|
+
handleScrollCorrection: (addedX: number, addedY: number) => void;
|
|
1240
|
+
/** Updates the size of a single item from measurements. */
|
|
1211
1241
|
updateItemSize: (index: number, inlineSize: number, blockSize: number, element?: HTMLElement) => void;
|
|
1212
|
-
/**
|
|
1213
|
-
* Updates the stored size of multiple items simultaneously.
|
|
1214
|
-
*
|
|
1215
|
-
* @param updates - Array of measurement updates (sizes in DU).
|
|
1216
|
-
*/
|
|
1242
|
+
/** Updates the size of multiple items from measurements. */
|
|
1217
1243
|
updateItemSizes: (updates: Array<{
|
|
1218
1244
|
index: number;
|
|
1219
1245
|
inlineSize: number;
|
|
1220
1246
|
blockSize: number;
|
|
1221
1247
|
element?: HTMLElement | undefined;
|
|
1222
1248
|
}>) => void;
|
|
1223
|
-
/**
|
|
1224
|
-
* Recalculates the host element's offset relative to the scroll container.
|
|
1225
|
-
* Useful if the container or host moves without a resize event.
|
|
1226
|
-
*/
|
|
1249
|
+
/** Updates the physical offset of the component relative to its scroll container. */
|
|
1227
1250
|
updateHostOffset: () => void;
|
|
1228
|
-
/**
|
|
1229
|
-
* Detects the current direction (LTR/RTL) of the scroll container.
|
|
1230
|
-
*/
|
|
1251
|
+
/** Detects the current direction (LTR/RTL) of the scroll container. */
|
|
1231
1252
|
updateDirection: () => void;
|
|
1232
|
-
/**
|
|
1233
|
-
* Information about the current visible range of columns and their paddings.
|
|
1234
|
-
* @see ColumnRange
|
|
1235
|
-
*/
|
|
1253
|
+
/** Information about the currently visible range of columns. */
|
|
1236
1254
|
columnRange: ComputedRef< {
|
|
1237
1255
|
start: number;
|
|
1238
1256
|
end: number;
|
|
1239
1257
|
padStart: number;
|
|
1240
1258
|
padEnd: number;
|
|
1241
1259
|
}>;
|
|
1242
|
-
/**
|
|
1243
|
-
* Resets all dynamic measurements and re-initializes from props.
|
|
1244
|
-
* Useful if item sizes have changed externally.
|
|
1245
|
-
*/
|
|
1260
|
+
/** Resets all dynamic measurements and re-initializes from current props. */
|
|
1246
1261
|
refresh: () => void;
|
|
1247
|
-
/**
|
|
1248
|
-
* Whether the component has finished its first client-side mount and hydration.
|
|
1249
|
-
*/
|
|
1262
|
+
/** Whether the component has finished its first client-side mount. */
|
|
1250
1263
|
isHydrated: Ref<boolean, boolean>;
|
|
1251
|
-
/**
|
|
1252
|
-
* Whether the container is the window or body.
|
|
1253
|
-
*/
|
|
1264
|
+
/** Whether the scroll container is the window object. */
|
|
1254
1265
|
isWindowContainer: ComputedRef<boolean>;
|
|
1255
|
-
/**
|
|
1256
|
-
* Whether the scroll container is in Right-to-Left (RTL) mode.
|
|
1257
|
-
*/
|
|
1266
|
+
/** Whether the scroll container is in Right-to-Left (RTL) mode. */
|
|
1258
1267
|
isRtl: Ref<boolean, boolean>;
|
|
1259
|
-
/**
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
/**
|
|
1264
|
-
* Coordinate scaling factor for Y axis (VU/DU).
|
|
1265
|
-
*/
|
|
1266
|
-
scaleY: ComputedRef<number>;
|
|
1267
|
-
/**
|
|
1268
|
-
* Absolute offset of the component within its container (DU).
|
|
1269
|
-
*/
|
|
1268
|
+
/** Coordinate scaling factor for X axis. */
|
|
1269
|
+
scaleX: Ref<number, number>;
|
|
1270
|
+
/** Coordinate scaling factor for Y axis. */
|
|
1271
|
+
scaleY: Ref<number, number>;
|
|
1272
|
+
/** Absolute offset of the component within its container. */
|
|
1270
1273
|
componentOffset: {
|
|
1271
1274
|
x: number;
|
|
1272
1275
|
y: number;
|
|
1273
1276
|
};
|
|
1274
|
-
/**
|
|
1275
|
-
* Physical width of the items wrapper in the DOM (clamped to browser limits, in DU).
|
|
1276
|
-
*/
|
|
1277
|
+
/** Physical width of the virtualized content area (clamped). */
|
|
1277
1278
|
renderedVirtualWidth: ComputedRef<number>;
|
|
1278
|
-
/**
|
|
1279
|
-
* Physical height of the items wrapper in the DOM (clamped to browser limits, in DU).
|
|
1280
|
-
*/
|
|
1279
|
+
/** Physical height of the virtualized content area (clamped). */
|
|
1281
1280
|
renderedVirtualHeight: ComputedRef<number>;
|
|
1282
|
-
/**
|
|
1283
|
-
* Helper to get the row index at a specific virtual offset.
|
|
1284
|
-
*/
|
|
1281
|
+
/** Helper to get the row (or item) index at a specific virtual offset (VU). */
|
|
1285
1282
|
getRowIndexAt: (offset: number) => number;
|
|
1286
|
-
/**
|
|
1287
|
-
* Helper to get the column index at a specific virtual offset.
|
|
1288
|
-
*/
|
|
1283
|
+
/** Helper to get the column index at a specific virtual offset (VU). */
|
|
1289
1284
|
getColIndexAt: (offset: number) => number;
|
|
1285
|
+
/* Excluded from this release type: __internalState */
|
|
1290
1286
|
};
|
|
1291
1287
|
|
|
1292
1288
|
/**
|
|
@@ -1416,9 +1412,9 @@ export declare function useVirtualScrollSizes<T>(propsInput: MaybeRefOrGetter<Us
|
|
|
1416
1412
|
/** Base size of an item from props. */
|
|
1417
1413
|
getItemBaseSize: (item: T, index: number) => number;
|
|
1418
1414
|
/** 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;
|
|
1415
|
+
getSizeAt: (index: number, sizeProp: number | (number | null | undefined)[] | ((...args: any[]) => number) | null | undefined, defaultSize: number, gap: number, tree: FenwickTree, isX: boolean) => number;
|
|
1420
1416
|
/** Initialize or update sizes from props. */
|
|
1421
|
-
initializeSizes: (
|
|
1417
|
+
initializeSizes: () => void;
|
|
1422
1418
|
/** Update sizes of multiple items from measurements. */
|
|
1423
1419
|
updateItemSizes: (updates: Array<{
|
|
1424
1420
|
index: number;
|
|
@@ -1427,7 +1423,7 @@ export declare function useVirtualScrollSizes<T>(propsInput: MaybeRefOrGetter<Us
|
|
|
1427
1423
|
element?: HTMLElement | undefined;
|
|
1428
1424
|
}>, getRowIndexAt: (offset: number) => number, getColIndexAt: (offset: number) => number, relativeScrollX: number, relativeScrollY: number, onScrollCorrection: (deltaX: number, deltaY: number) => void) => void;
|
|
1429
1425
|
/** Reset all measurements. */
|
|
1430
|
-
refresh: (
|
|
1426
|
+
refresh: () => void;
|
|
1431
1427
|
};
|
|
1432
1428
|
|
|
1433
1429
|
/**
|
|
@@ -1524,6 +1520,14 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1524
1520
|
*/
|
|
1525
1521
|
getItemSize: (index: number) => number;
|
|
1526
1522
|
/**
|
|
1523
|
+
* Whether the component is in table mode.
|
|
1524
|
+
*/
|
|
1525
|
+
isTable: ComputedRef<boolean>;
|
|
1526
|
+
/**
|
|
1527
|
+
* The tag used for rendering items.
|
|
1528
|
+
*/
|
|
1529
|
+
itemTag: ComputedRef<string>;
|
|
1530
|
+
/**
|
|
1527
1531
|
* Helper to get the row (or item) index at a specific vertical (or horizontal in horizontal mode) virtual offset (VU).
|
|
1528
1532
|
* @param offset - The virtual pixel offset.
|
|
1529
1533
|
* @see useVirtualScroll
|
|
@@ -1545,7 +1549,7 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1545
1549
|
* @see ScrollToIndexOptions
|
|
1546
1550
|
* @see useVirtualScroll
|
|
1547
1551
|
*/
|
|
1548
|
-
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) =>
|
|
1552
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => ScrollToIndexResult;
|
|
1549
1553
|
/**
|
|
1550
1554
|
* Programmatically scroll to a specific pixel offset.
|
|
1551
1555
|
*
|
|
@@ -1582,11 +1586,11 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1582
1586
|
/**
|
|
1583
1587
|
* Coordinate scaling factor for X axis.
|
|
1584
1588
|
*/
|
|
1585
|
-
scaleX:
|
|
1589
|
+
scaleX: Ref<number, number>;
|
|
1586
1590
|
/**
|
|
1587
1591
|
* Coordinate scaling factor for Y axis.
|
|
1588
1592
|
*/
|
|
1589
|
-
scaleY:
|
|
1593
|
+
scaleY: Ref<number, number>;
|
|
1590
1594
|
/**
|
|
1591
1595
|
* Physical width of the content in the DOM (clamped to browser limits).
|
|
1592
1596
|
*/
|
|
@@ -1613,10 +1617,10 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1613
1617
|
*/
|
|
1614
1618
|
scrollbarPropsHorizontal: ComputedRef<ScrollbarSlotProps | null>;
|
|
1615
1619
|
items: Ref<T[], T[]>;
|
|
1616
|
-
itemSize: Ref<number | ((item: T, index: number) => number) | null | undefined, number | ((item: T, index: number) => number) | null | undefined>;
|
|
1620
|
+
itemSize: Ref<number | (number | null | undefined)[] | ((item: T, index: number) => number) | null | undefined, number | (number | null | undefined)[] | ((item: T, index: number) => number) | null | undefined>;
|
|
1617
1621
|
container: Ref<HTMLElement | Window | null | undefined, HTMLElement | Window | null | undefined>;
|
|
1618
1622
|
ssrRange: Ref<SSRRange | undefined, SSRRange | undefined>;
|
|
1619
|
-
columnWidth: Ref<number | number[] | ((index: number) => number) | null | undefined, number | number[] | ((index: number) => number) | null | undefined>;
|
|
1623
|
+
columnWidth: Ref<number | (number | null | undefined)[] | ((index: number) => number) | null | undefined, number | (number | null | undefined)[] | ((index: number) => number) | null | undefined>;
|
|
1620
1624
|
initialScrollIndex: Ref<number | undefined, number | undefined>;
|
|
1621
1625
|
initialScrollAlign: Ref<ScrollAlignment | ScrollAlignmentOptions | undefined, ScrollAlignment | ScrollAlignmentOptions | undefined>;
|
|
1622
1626
|
defaultItemSize: Ref<number | undefined, number | undefined>;
|
|
@@ -1631,7 +1635,6 @@ export declare const VirtualScroll: <T>(__VLS_props: NonNullable<Awaited<typeof
|
|
|
1631
1635
|
columnCount: Ref<number, number>;
|
|
1632
1636
|
containerTag: Ref<string, string>;
|
|
1633
1637
|
wrapperTag: Ref<string, string>;
|
|
1634
|
-
itemTag: Ref<string, string>;
|
|
1635
1638
|
scrollPaddingStart: Ref<PaddingValue, PaddingValue>;
|
|
1636
1639
|
scrollPaddingEnd: Ref<PaddingValue, PaddingValue>;
|
|
1637
1640
|
stickyHeader: Ref<boolean, boolean>;
|
|
@@ -1770,7 +1773,7 @@ export declare interface VirtualScrollBaseProps<T = unknown> {
|
|
|
1770
1773
|
* Fixed size of each item in virtual units (VU) or a function that returns the size of an item.
|
|
1771
1774
|
* Pass `0`, `null` or `undefined` for automatic dynamic size detection via `ResizeObserver`.
|
|
1772
1775
|
*/
|
|
1773
|
-
itemSize?: number | ((item: T, index: number) => number) | null | undefined;
|
|
1776
|
+
itemSize?: number | (number | null | undefined)[] | ((item: T, index: number) => number) | null | undefined;
|
|
1774
1777
|
/**
|
|
1775
1778
|
* Direction of the virtual scroll.
|
|
1776
1779
|
* @default 'vertical'
|
|
@@ -1804,7 +1807,7 @@ export declare interface VirtualScrollBaseProps<T = unknown> {
|
|
|
1804
1807
|
* Fixed width of columns in VU, an array of widths, or a function returning widths.
|
|
1805
1808
|
* Pass `0`, `null` or `undefined` for dynamic column detection.
|
|
1806
1809
|
*/
|
|
1807
|
-
columnWidth?: number | number[] | ((index: number) => number) | null | undefined;
|
|
1810
|
+
columnWidth?: number | (number | null | undefined)[] | ((index: number) => number) | null | undefined;
|
|
1808
1811
|
/**
|
|
1809
1812
|
* Pixel padding at the start of the scroll container in display pixels (DU).
|
|
1810
1813
|
*/
|
|
@@ -1834,10 +1837,12 @@ export declare interface VirtualScrollBaseProps<T = unknown> {
|
|
|
1834
1837
|
loadDistance?: number | undefined;
|
|
1835
1838
|
/**
|
|
1836
1839
|
* Whether data is currently loading.
|
|
1840
|
+
* While true, the loading slot is shown and `load` events are suppressed.
|
|
1837
1841
|
*/
|
|
1838
1842
|
loading?: boolean | undefined;
|
|
1839
1843
|
/**
|
|
1840
|
-
* Whether to automatically
|
|
1844
|
+
* Whether to automatically maintain scroll position when items are prepended to the array.
|
|
1845
|
+
* Useful for "load more" chat interfaces.
|
|
1841
1846
|
*/
|
|
1842
1847
|
restoreScrollOnPrepend?: boolean | undefined;
|
|
1843
1848
|
/**
|
|
@@ -1882,6 +1887,7 @@ export declare interface VirtualScrollBaseProps<T = unknown> {
|
|
|
1882
1887
|
itemRole?: string | undefined;
|
|
1883
1888
|
/**
|
|
1884
1889
|
* Whether to snap to items after scrolling stops.
|
|
1890
|
+
* Options: false, true, 'auto', 'next', 'start', 'center', 'end'.
|
|
1885
1891
|
* @default false
|
|
1886
1892
|
*/
|
|
1887
1893
|
snap?: SnapMode | undefined;
|
|
@@ -1896,13 +1902,39 @@ export declare interface VirtualScrollComponentProps<T = unknown> extends Virtua
|
|
|
1896
1902
|
/** The HTML tag to use for each item. */
|
|
1897
1903
|
itemTag?: string;
|
|
1898
1904
|
/** Whether the content in the 'header' slot is sticky. */
|
|
1905
|
+
/**
|
|
1906
|
+
* If true, measures the header slot size and adds it to the scroll padding.
|
|
1907
|
+
* Can be combined with CSS for sticky headers.
|
|
1908
|
+
*/
|
|
1899
1909
|
stickyHeader?: boolean;
|
|
1900
|
-
/**
|
|
1910
|
+
/**
|
|
1911
|
+
* If true, measures the footer slot size and adds it to the scroll padding.
|
|
1912
|
+
* Can be combined with CSS for sticky footers.
|
|
1913
|
+
*/
|
|
1901
1914
|
stickyFooter?: boolean;
|
|
1902
|
-
/**
|
|
1915
|
+
/**
|
|
1916
|
+
* Whether to use virtual scrollbars.
|
|
1917
|
+
* Automatically enabled when content size exceeds browser limits.
|
|
1918
|
+
*/
|
|
1903
1919
|
virtualScrollbar?: boolean;
|
|
1904
1920
|
}
|
|
1905
1921
|
|
|
1922
|
+
/**
|
|
1923
|
+
* Base interface for Virtual Scroll extensions.
|
|
1924
|
+
*/
|
|
1925
|
+
declare interface VirtualScrollExtension<T = unknown> {
|
|
1926
|
+
/** Unique name of the extension. */
|
|
1927
|
+
name: string;
|
|
1928
|
+
/** Called when the component is initialized. */
|
|
1929
|
+
onInit?: (ctx: ExtensionContext<T>) => void;
|
|
1930
|
+
/** Called on every scroll event. */
|
|
1931
|
+
onScroll?: (ctx: ExtensionContext<T>, event: Event) => void;
|
|
1932
|
+
/** Called when scrolling activity stops. */
|
|
1933
|
+
onScrollEnd?: (ctx: ExtensionContext<T>) => void;
|
|
1934
|
+
/** Post-processor for the list of rendered items. */
|
|
1935
|
+
transformRenderedItems?: (items: RenderedItem<T>[], ctx: ExtensionContext<T>) => RenderedItem<T>[];
|
|
1936
|
+
}
|
|
1937
|
+
|
|
1906
1938
|
/** Exposed methods and properties of the `VirtualScroll` component instance. */
|
|
1907
1939
|
export declare interface VirtualScrollInstance<T = unknown> extends VirtualScrollComponentProps<T> {
|
|
1908
1940
|
/** Detailed information about the current scroll state. */
|
|
@@ -1929,8 +1961,12 @@ export declare interface VirtualScrollInstance<T = unknown> extends VirtualScrol
|
|
|
1929
1961
|
getItemOffset: (index: number) => number;
|
|
1930
1962
|
/** Helper to get the size of a specific item along the scroll axis. */
|
|
1931
1963
|
getItemSize: (index: number) => number;
|
|
1964
|
+
/** Whether the component is in table mode. */
|
|
1965
|
+
isTable: boolean;
|
|
1966
|
+
/** The tag used for rendering items. */
|
|
1967
|
+
itemTag: string;
|
|
1932
1968
|
/** Programmatically scroll to a specific row and/or column. */
|
|
1933
|
-
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) =>
|
|
1969
|
+
scrollToIndex: (rowIndex?: number | null, colIndex?: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => ScrollToIndexResult;
|
|
1934
1970
|
/** Programmatically scroll to a specific pixel offset. */
|
|
1935
1971
|
scrollToOffset: (x?: number | null, y?: number | null, options?: {
|
|
1936
1972
|
behavior?: 'auto' | 'smooth';
|