@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/README.md
CHANGED
|
@@ -182,123 +182,65 @@ The `VirtualScroll` component provides a declarative interface for virtualizing
|
|
|
182
182
|
| `direction` | `'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Scroll direction. |
|
|
183
183
|
| `gap` | `number` | `0` | Spacing between items. |
|
|
184
184
|
|
|
185
|
-
|
|
185
|
+
#### Grid Configuration (only for direction="both")
|
|
186
186
|
| Prop | Type | Default | Description |
|
|
187
187
|
|------|------|---------|-------------|
|
|
188
|
-
| `columnCount` | `number` | `0` | Number of columns. |
|
|
189
|
-
| `columnWidth` | `num \| num[] \| fn \| null` | `100` | Width for columns. |
|
|
188
|
+
| `columnCount` | `number` | `0` | Number of columns for grid mode. |
|
|
189
|
+
| `columnWidth` | `num \| num[] \| fn \| null` | `100` | Width for columns in grid mode. |
|
|
190
190
|
| `columnGap` | `number` | `0` | Spacing between columns. |
|
|
191
191
|
|
|
192
|
-
|
|
192
|
+
#### Features & Behavior
|
|
193
193
|
| Prop | Type | Default | Description |
|
|
194
194
|
|------|------|---------|-------------|
|
|
195
195
|
| `stickyIndices` | `number[]` | `[]` | Indices of items that should remain sticky. |
|
|
196
196
|
| `stickyHeader` / `stickyFooter` | `boolean` | `false` | If true, measures and adds slot size to padding. |
|
|
197
|
-
| `ssrRange` | `object` | `undefined` | Items to pre-render on server. |
|
|
197
|
+
| `ssrRange` | `object` | `undefined` | Items to pre-render on server. See [SSR Support](#ssr-support). |
|
|
198
198
|
| `loading` | `boolean` | `false` | Shows loading state and prevents duplicate events. |
|
|
199
199
|
| `loadDistance` | `number` | `200` | Distance from end to trigger `load` event. |
|
|
200
200
|
| `restoreScrollOnPrepend` | `boolean` | `false` | Maintain position when items added to top. |
|
|
201
201
|
| `initialScrollIndex` | `number` | `undefined` | Index to jump to on mount. |
|
|
202
|
-
| `initialScrollAlign` | `
|
|
202
|
+
| `initialScrollAlign` | `ScrollAlignment \| object` | `'start'` | Alignment for initial jump. |
|
|
203
203
|
|
|
204
|
-
|
|
204
|
+
#### Advanced & Performance
|
|
205
205
|
| Prop | Type | Default | Description |
|
|
206
206
|
|------|------|---------|-------------|
|
|
207
207
|
| `container` | `HTMLElement \| Window` | `host element` | The scrollable container element. |
|
|
208
208
|
| `scrollPaddingStart` / `End` | `num \| {x, y}` | `0` | Padding for scroll calculations. |
|
|
209
209
|
| `containerTag` / `wrapperTag` / `itemTag` | `string` | `'div'` | HTML tags for component parts. |
|
|
210
210
|
| `bufferBefore` / `bufferAfter` | `number` | `5` | Items to render outside the viewport. |
|
|
211
|
-
| `defaultItemSize` | `number` | `40` | Initial estimate for items. |
|
|
212
|
-
| `defaultColumnWidth` | `number` | `100` | Initial estimate for columns. |
|
|
211
|
+
| `defaultItemSize` | `number` | `40` | Initial estimate for dynamic items. |
|
|
212
|
+
| `defaultColumnWidth` | `number` | `100` | Initial estimate for dynamic columns. |
|
|
213
213
|
| `debug` | `boolean` | `false` | Enables debug visualization. |
|
|
214
214
|
|
|
215
215
|
## Slots
|
|
216
216
|
|
|
217
|
-
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
-
|
|
225
|
-
-
|
|
226
|
-
-
|
|
217
|
+
- `item`: Scoped slot for individual items.
|
|
218
|
+
- `item: T`: The source data item.
|
|
219
|
+
- `index: number`: The original 0-based index of the item.
|
|
220
|
+
- `columnRange: ColumnRange`: Visible column range and paddings.
|
|
221
|
+
- `getColumnWidth: (index: number) => number`: Helper to get width of any column.
|
|
222
|
+
- `isSticky: boolean`: True if the item is configured to be sticky.
|
|
223
|
+
- `isStickyActive: boolean`: True if the item is currently stuck at the threshold.
|
|
224
|
+
- `header`: Content rendered at the top of the scrollable area.
|
|
225
|
+
- `footer`: Content rendered at the bottom of the scrollable area.
|
|
226
|
+
- `loading`: Content shown at the end when `loading` prop is true.
|
|
227
227
|
|
|
228
228
|
## Events
|
|
229
229
|
|
|
230
|
-
-
|
|
231
|
-
|
|
232
|
-
-
|
|
233
|
-
- `direction`: `'vertical'` or `'horizontal'`.
|
|
234
|
-
- `visibleRangeChange`: Emitted when the rendered items range or column range changes.
|
|
235
|
-
- `range`: `{ start: number; end: number; colStart: number; colEnd: number; }`
|
|
230
|
+
- `scroll`: Emitted on every scroll change. Payload: `ScrollDetails<T>`.
|
|
231
|
+
- `load`: Triggered near the end of content. Payload: `'vertical' | 'horizontal'`.
|
|
232
|
+
- `visibleRangeChange`: Emitted when rendered indices change. Payload: `{ start, end, colStart, colEnd }`.
|
|
236
233
|
|
|
237
234
|
## Keyboard Navigation
|
|
238
235
|
|
|
239
|
-
When the container is focused
|
|
240
|
-
-
|
|
241
|
-
-
|
|
242
|
-
-
|
|
243
|
-
-
|
|
244
|
-
-
|
|
236
|
+
When the container is focused (it has `tabindex="0"`), it supports:
|
|
237
|
+
- `Home`: Scroll to the very beginning (Index 0,0).
|
|
238
|
+
- `End`: Scroll to the very last row and column.
|
|
239
|
+
- `ArrowUp` / `ArrowDown`: Scroll up/down by 40px (or `DEFAULT_ITEM_SIZE`).
|
|
240
|
+
- `ArrowLeft` / `ArrowRight`: Scroll left/right by 40px (or `DEFAULT_ITEM_SIZE`).
|
|
241
|
+
- `PageUp` / `PageDown`: Scroll by one full viewport height/width.
|
|
245
242
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
- `scrollToIndex(rowIndex: number | null, colIndex: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions)`
|
|
249
|
-
- `rowIndex`: Row index to scroll to. Pass `null` to only scroll horizontally.
|
|
250
|
-
- `colIndex`: Column index to scroll to. Pass `null` to only scroll vertically.
|
|
251
|
-
- `options`:
|
|
252
|
-
- `align`: `'start' | 'center' | 'end' | 'auto'` or `{ x: ScrollAlignment, y: ScrollAlignment }`.
|
|
253
|
-
- `behavior`: `'auto' | 'smooth'`.
|
|
254
|
-
- `scrollToOffset(x: number | null, y: number | null, options?: { behavior?: 'auto' | 'smooth' })`
|
|
255
|
-
- `x`: Pixel offset on X axis. Pass `null` to keep current position.
|
|
256
|
-
- `y`: Pixel offset on Y axis. Pass `null` to keep current position.
|
|
257
|
-
- `options`:
|
|
258
|
-
- `behavior`: `'auto' | 'smooth'`.
|
|
259
|
-
- `refresh()`: Resets all dynamic measurements and re-initializes sizes from current items and props.
|
|
260
|
-
- `stopProgrammaticScroll()`: Immediately stops any active smooth scroll.
|
|
261
|
-
|
|
262
|
-
## Types
|
|
263
|
-
|
|
264
|
-
### ScrollDetails<T>
|
|
265
|
-
|
|
266
|
-
The full state of the virtualizer, emitted in the `scroll` event and available via the `scrollDetails` ref.
|
|
267
|
-
|
|
268
|
-
| Property | Type | Description |
|
|
269
|
-
|----------|------|-------------|
|
|
270
|
-
| `items` | `RenderedItem<T>[]` | List of items currently rendered with their offsets and sizes. |
|
|
271
|
-
| `currentIndex` | `number` | Index of the first item partially or fully visible in the viewport. |
|
|
272
|
-
| `currentColIndex` | `number` | Index of the first column partially or fully visible. |
|
|
273
|
-
| `scrollOffset` | `{ x: number, y: number }` | Current scroll position relative to content start. |
|
|
274
|
-
| `viewportSize` | `{ width: number, height: number }` | Dimensions of the visible area. |
|
|
275
|
-
| `totalSize` | `{ width: number, height: number }` | Total calculated size of all items and gaps. |
|
|
276
|
-
| `isScrolling` | `boolean` | Whether the container is currently being scrolled. |
|
|
277
|
-
| `isProgrammaticScroll` | `boolean` | Whether the current scroll was initiated by a method call. |
|
|
278
|
-
| `range` | `{ start: number, end: number }` | Current rendered item indices. |
|
|
279
|
-
| `columnRange` | `{ start: number, end: number, padStart: number, padEnd: number }` | Visible column range and paddings. |
|
|
280
|
-
|
|
281
|
-
### RenderedItem<T>
|
|
282
|
-
|
|
283
|
-
| Property | Type | Description |
|
|
284
|
-
|----------|------|-------------|
|
|
285
|
-
| `item` | `T` | The data item. |
|
|
286
|
-
| `index` | `number` | The item's index in the original array. |
|
|
287
|
-
| `offset` | `{ x: number, y: number }` | Calculated position for rendering. |
|
|
288
|
-
| `size` | `{ width: number, height: number }` | Measured or estimated size. |
|
|
289
|
-
| `originalX` / `originalY` | `number` | Raw offsets before sticky adjustments. |
|
|
290
|
-
| `isSticky` | `boolean` | Whether the item is configured to be sticky. |
|
|
291
|
-
| `isStickyActive` | `boolean` | Whether the item is currently stuck. |
|
|
292
|
-
| `stickyOffset` | `{ x: number, y: number }` | Offset applied for the pushing effect. |
|
|
293
|
-
|
|
294
|
-
### ScrollAlignment
|
|
295
|
-
|
|
296
|
-
- `'start'`: Aligns the item to the top/left of the viewport.
|
|
297
|
-
- `'center'`: Aligns the item to the center of the viewport.
|
|
298
|
-
- `'end'`: Aligns the item to the bottom/right of the viewport.
|
|
299
|
-
- `'auto'`: Smart alignment - if the item is already visible, do nothing; if it's above/left, align to `start`; if it's below/right, align to `end`.
|
|
300
|
-
|
|
301
|
-
## CSS Classes
|
|
243
|
+
### CSS Classes
|
|
302
244
|
|
|
303
245
|
- `.virtual-scroll-container`: Root container.
|
|
304
246
|
- `.virtual-scroll--vertical`, `.virtual-scroll--horizontal`, `.virtual-scroll--both`: Direction modifier.
|
|
@@ -312,25 +254,17 @@ The full state of the virtualizer, emitted in the `scroll` event and available v
|
|
|
312
254
|
- `.virtual-scroll--table`: Applied when `containerTag="table"` is used.
|
|
313
255
|
- `.virtual-scroll--debug`: Applied when debug mode is enabled.
|
|
314
256
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
The component is designed to be SSR-friendly. You can pre-render a specific range of items on the server using the `ssrRange` prop.
|
|
257
|
+
### Exposed Members
|
|
318
258
|
|
|
319
|
-
|
|
320
|
-
<VirtualScroll
|
|
321
|
-
:items="items"
|
|
322
|
-
:ssr-range="{ start: 100, end: 120, colStart: 50, colEnd: 70 }"
|
|
323
|
-
>
|
|
324
|
-
<!-- ... -->
|
|
325
|
-
</VirtualScroll>
|
|
326
|
-
```
|
|
259
|
+
Access these via a template `ref` on the `VirtualScroll` component:
|
|
327
260
|
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
261
|
+
- `scrollDetails`: Full reactive state of the virtual scroll system.
|
|
262
|
+
- `columnRange`: Information about the current visible range of columns.
|
|
263
|
+
- `getColumnWidth(index: number)`: Helper to get the calculated width of a specific column.
|
|
264
|
+
- `scrollToIndex(rowIndex, colIndex, options)`: Programmatic scroll to a specific row and/or column (default `align: 'auto'`, `behavior: 'auto'`).
|
|
265
|
+
- `scrollToOffset(x, y, options)`: Programmatic scroll to a specific pixel position (default `behavior: 'auto'`).
|
|
266
|
+
- `refresh()`: Resets all dynamic measurements and re-initializes state.
|
|
267
|
+
- `stopProgrammaticScroll()`: Immediately halts any active smooth scroll animation.
|
|
334
268
|
|
|
335
269
|
## Composable API
|
|
336
270
|
|
|
@@ -356,21 +290,111 @@ const props = computed(() => ({
|
|
|
356
290
|
const { renderedItems, scrollDetails, totalHeight } = useVirtualScroll(props);
|
|
357
291
|
```
|
|
358
292
|
|
|
359
|
-
### Return
|
|
293
|
+
### Return Value
|
|
294
|
+
|
|
295
|
+
Returns a set of reactive references and methods for managing the virtual scroll state:
|
|
360
296
|
|
|
361
297
|
| Member | Type | Description |
|
|
362
298
|
|--------|------|-------------|
|
|
363
|
-
| `renderedItems` | `Ref<RenderedItem<T>[]>` | List of items to
|
|
364
|
-
| `scrollDetails` | `Ref<ScrollDetails<T>>` | Full state of the virtualizer. |
|
|
365
|
-
| `totalWidth` / `totalHeight` | `Ref<number>` | Calculated total dimensions. |
|
|
366
|
-
| `columnRange` | `Ref<
|
|
367
|
-
| `isHydrated` | `Ref<boolean>` |
|
|
368
|
-
| `scrollToIndex` | `Function` | Programmatic scroll to index. |
|
|
369
|
-
| `scrollToOffset` | `Function` | Programmatic scroll to offset. |
|
|
370
|
-
| `
|
|
371
|
-
| `updateItemSize` | `Function` |
|
|
372
|
-
|
|
373
|
-
|
|
299
|
+
| `renderedItems` | `Ref<RenderedItem<T>[]>` | List of items to render in the buffer. |
|
|
300
|
+
| `scrollDetails` | `Ref<ScrollDetails<T>>` | Full reactive state of the virtualizer. |
|
|
301
|
+
| `totalWidth` / `totalHeight` | `Ref<number>` | Calculated total content dimensions. |
|
|
302
|
+
| `columnRange` | `Ref<ColumnRange>` | Visible column indices and paddings. |
|
|
303
|
+
| `isHydrated` | `Ref<boolean>` | True after mount and hydration. |
|
|
304
|
+
| `scrollToIndex` | `Function` | Programmatic scroll to row/column index. |
|
|
305
|
+
| `scrollToOffset` | `Function` | Programmatic scroll to pixel offset. |
|
|
306
|
+
| `stopProgrammaticScroll` | `Function` | Cancel any active smooth scroll animation. |
|
|
307
|
+
| `updateItemSize` | `Function` | Register a new manual item measurement. |
|
|
308
|
+
| `updateItemSizes` | `Function` | Register multiple manual item measurements. |
|
|
309
|
+
| `updateHostOffset` | `Function` | Recalculate host element position. |
|
|
310
|
+
| `getColumnWidth` | `Function` | Helper to get a column's width. |
|
|
311
|
+
| `refresh` | `Function` | Resets all measurements and state. |
|
|
312
|
+
|
|
313
|
+
## API Reference
|
|
314
|
+
|
|
315
|
+
### Types
|
|
316
|
+
|
|
317
|
+
#### ScrollDetails<T>
|
|
318
|
+
| Property | Type | Description |
|
|
319
|
+
|----------|------|-------------|
|
|
320
|
+
| `items` | `RenderedItem<T>[]` | Rendered items in the buffer. |
|
|
321
|
+
| `currentIndex` | `number` | First visible row index. |
|
|
322
|
+
| `currentColIndex` | `number` | First visible column index. |
|
|
323
|
+
| `scrollOffset` | `{ x: number, y: number }` | Current pixel scroll position. |
|
|
324
|
+
| `viewportSize` | `{ width: number, height: number }` | Dimensions of the visible area. |
|
|
325
|
+
| `totalSize` | `{ width: number, height: number }` | Estimated total dimensions. |
|
|
326
|
+
| `isScrolling` | `boolean` | Active scrolling state. |
|
|
327
|
+
| `isProgrammaticScroll` | `boolean` | True if triggered by method. |
|
|
328
|
+
| `range` | `{ start: number, end: number }` | Visible row range. |
|
|
329
|
+
| `columnRange` | `ColumnRange` | Visible column range (grid). |
|
|
330
|
+
|
|
331
|
+
#### RenderedItem<T>
|
|
332
|
+
| Property | Type | Description |
|
|
333
|
+
|----------|------|-------------|
|
|
334
|
+
| `item` | `T` | The source data item. |
|
|
335
|
+
| `index` | `number` | Position in original array. |
|
|
336
|
+
| `offset` | `{ x: number, y: number }` | Position relative to wrapper. |
|
|
337
|
+
| `size` | `{ width, height }` | Current dimensions. |
|
|
338
|
+
| `originalX` / `originalY` | `number` | Offsets before sticky adjustments. |
|
|
339
|
+
| `isSticky` | `boolean` |configured as sticky. |
|
|
340
|
+
| `isStickyActive` | `boolean` | Currently stuck. |
|
|
341
|
+
| `stickyOffset` | `{ x, y }` | Translation for pushing effect. |
|
|
342
|
+
|
|
343
|
+
#### ColumnRange
|
|
344
|
+
| Property | Type | Description |
|
|
345
|
+
|----------|------|-------------|
|
|
346
|
+
| `start` | `number` | First rendered column index. |
|
|
347
|
+
| `end` | `number` | Last rendered column index (exclusive). |
|
|
348
|
+
| `padStart` | `number` | Pixel space before first column. |
|
|
349
|
+
| `padEnd` | `number` | Pixel space after last column. |
|
|
350
|
+
|
|
351
|
+
#### ScrollToIndexOptions
|
|
352
|
+
| Property | Type | Description |
|
|
353
|
+
|----------|------|-------------|
|
|
354
|
+
| `align` | `ScrollAlignment \| ScrollAlignmentOptions` | How to position the item (default: `'auto'`). |
|
|
355
|
+
| `behavior` | `'auto' \| 'smooth'` | Scroll animation behavior (default: `'auto'`). |
|
|
356
|
+
|
|
357
|
+
#### ScrollAlignmentOptions
|
|
358
|
+
| Property | Type | Description |
|
|
359
|
+
|----------|------|-------------|
|
|
360
|
+
| `x` | `ScrollAlignment` | Alignment on the horizontal axis. |
|
|
361
|
+
| `y` | `ScrollAlignment` | Alignment on the vertical axis. |
|
|
362
|
+
|
|
363
|
+
#### ScrollAlignment
|
|
364
|
+
Values: `'start' | 'center' | 'end' | 'auto'`
|
|
365
|
+
|
|
366
|
+
- `start`: Align to top/left edge.
|
|
367
|
+
- `center`: Align to viewport center.
|
|
368
|
+
- `end`: Align to bottom/right edge.
|
|
369
|
+
- `auto`: **Smart Alignment**. Only scrolls if item is not fully visible.
|
|
370
|
+
|
|
371
|
+
### Methods
|
|
372
|
+
|
|
373
|
+
#### `scrollToIndex(rowIndex, colIndex, options)`
|
|
374
|
+
Ensures a specific item is visible within the viewport. Corrects position if item sizes are dynamic.
|
|
375
|
+
|
|
376
|
+
#### `scrollToOffset(x, y, options)`
|
|
377
|
+
Scrolls the container to an absolute pixel position.
|
|
378
|
+
|
|
379
|
+
#### `stopProgrammaticScroll()`
|
|
380
|
+
Immediately halts any active smooth scroll animation.
|
|
381
|
+
|
|
382
|
+
#### `updateItemSize(index, width, height, element?)`
|
|
383
|
+
Manually registers a new measurement for a single item.
|
|
384
|
+
|
|
385
|
+
#### `updateItemSizes(updates)`
|
|
386
|
+
Batched version of `updateItemSize`.
|
|
387
|
+
|
|
388
|
+
#### `updateHostOffset()`
|
|
389
|
+
Forces a recalculation of the host element's position relative to the scroll container.
|
|
390
|
+
|
|
391
|
+
#### `getColumnWidth(index)`
|
|
392
|
+
Returns the currently calculated width for a specific column index.
|
|
393
|
+
|
|
394
|
+
#### `refresh()`
|
|
395
|
+
Invalidates all cached measurements and triggers a full re-initialization.
|
|
396
|
+
|
|
397
|
+
## Utility Functions
|
|
374
398
|
|
|
375
399
|
The library exports several utility functions and classes:
|
|
376
400
|
|
|
@@ -381,6 +405,26 @@ The library exports several utility functions and classes:
|
|
|
381
405
|
- `FenwickTree`: The underlying data structure for efficient size and offset management.
|
|
382
406
|
- `DEFAULT_ITEM_SIZE / DEFAULT_COLUMN_WIDTH / DEFAULT_BUFFER`: The default values used by the library.
|
|
383
407
|
|
|
408
|
+
## SSR Support
|
|
409
|
+
|
|
410
|
+
The component is designed to be SSR-friendly. You can pre-render a specific range of items on the server using the `ssrRange` prop.
|
|
411
|
+
|
|
412
|
+
```vue
|
|
413
|
+
<VirtualScroll
|
|
414
|
+
:items="items"
|
|
415
|
+
:ssr-range="{ start: 100, end: 120, colStart: 50, colEnd: 70 }"
|
|
416
|
+
>
|
|
417
|
+
<!-- ... -->
|
|
418
|
+
</VirtualScroll>
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
When `ssrRange` is provided:
|
|
422
|
+
1. **Server-Side**: Only the specified range of items is rendered. Items are rendered in-flow (relative positioning) with their offsets adjusted so the specified range appears at the top-left of the container.
|
|
423
|
+
2. **Client-Side Hydration**:
|
|
424
|
+
- The component initially renders the SSR content to match the server-generated HTML.
|
|
425
|
+
- On mount, it expands the container size and automatically scrolls to exactly match the pre-rendered range using `align: 'start'`.
|
|
426
|
+
- It then seamlessly transitions to virtual mode (absolute positioning) while maintaining the scroll position.
|
|
427
|
+
|
|
384
428
|
## License
|
|
385
429
|
|
|
386
430
|
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);var t=class{tree;values;constructor(e){this.tree=new Float64Array(e+1),this.values=new Float64Array(e)}update(e,t){if(!(e<0||e>=this.values.length))for(this.values[e]=this.values[e]+t,e++;e<this.tree.length;)this.tree[e]=this.tree[e]+t,e+=e&-e}query(e){let t=0;for(;e>0;)t+=this.tree[e]||0,e-=e&-e;return t}set(e,t){e<0||e>=this.values.length||(this.values[e]=t)}get length(){return this.values.length}get(e){return this.values[e]||0}getValues(){return this.values}findLowerBound(e){let t=0,n=this.tree.length,r=1<<Math.floor(Math.log2(n-1));for(;r>0;){let i=t+r;if(i<n){let n=this.tree[i]||0;n<=e&&(t=i,e-=n)}r>>=1}return t}rebuild(){this.tree.fill(0);for(let e=0;e<this.values.length;e++)this.tree[e+1]=this.values[e]||0;for(let e=1;e<this.tree.length;e++){let t=e+(e&-e);t<this.tree.length&&(this.tree[t]=this.tree[t]+this.tree[e])}}resize(e){if(e===this.values.length)return;let t=new Float64Array(e);t.set(this.values.subarray(0,Math.min(e,this.values.length))),this.values=t,this.tree=new Float64Array(e+1),this.rebuild()}shift(e){if(e===0)return;let t=this.values.length,n=new Float64Array(t);e>0?n.set(this.values.subarray(0,Math.min(t-e,this.values.length)),e):n.set(this.values.subarray(-e)),this.values=n,this.rebuild()}};function n(e){return!!e&&`getBoundingClientRect`in e}function r(e){return!!e&&`scrollLeft`in e}function i(e){return typeof e==`object`&&!!e&&(`align`in e||`behavior`in e||`isCorrection`in e)}function a(e,t){return typeof e==`object`&&e?e.x||0:t===`horizontal`&&e||0}function o(e,t){return typeof e==`object`&&e?e.y||0:(t===`vertical`||t===`both`)&&e||0}const s=40,c=100,l=5;function u(s){let c=(0,e.ref)(0),l=(0,e.ref)(0),u=(0,e.ref)(!1),d=(0,e.ref)(!1),f=(0,e.ref)(!1),p=(0,e.ref)(!1),m=(0,e.ref)(0),h=(0,e.ref)(0),g=(0,e.reactive)({x:0,y:0}),_,v=(0,e.ref)(!1),y=new t(s.value.items.length),b=new t(s.value.items.length),x=new t(s.value.columnCount||0),S=(0,e.ref)(0),C=new Uint8Array,w=new Uint8Array,T=new Uint8Array,E=(0,e.ref)(null),D=(0,e.ref)(!1),O=[],k=(0,e.computed)(()=>s.value.itemSize===void 0||s.value.itemSize===null||s.value.itemSize===0),A=(0,e.computed)(()=>s.value.columnWidth===void 0||s.value.columnWidth===null||s.value.columnWidth===0),j=(0,e.computed)(()=>typeof s.value.itemSize==`number`&&s.value.itemSize>0?s.value.itemSize:null),M=(0,e.computed)(()=>s.value.defaultItemSize||j.value||40),N=(0,e.computed)(()=>[...s.value.stickyIndices||[]].sort((e,t)=>e-t)),P=(0,e.computed)(()=>{if(S.value,!d.value&&s.value.ssrRange&&!p.value){let{start:e=0,end:t=0,colStart:n=0,colEnd:r=0}=s.value.ssrRange,i=s.value.columnCount||0;if(s.value.direction===`both`){if(i<=0)return 0;let e=r||i,t=x.query(e)-x.query(n);return Math.max(0,t-(e>n&&s.value.columnGap||0))}if(s.value.direction===`horizontal`){if(j.value!==null){let n=t-e;return Math.max(0,n*(j.value+(s.value.columnGap||0))-(n>0&&s.value.columnGap||0))}let n=y.query(t)-y.query(e);return Math.max(0,n-(t>e&&s.value.columnGap||0))}}if(s.value.direction===`both`){let e=s.value.columnCount||0;if(e<=0)return 0;let t=x.query(e);return Math.max(0,t-(s.value.columnGap||0))}if(s.value.direction===`vertical`)return 0;if(j.value!==null){let e=s.value.items.length;return Math.max(0,e*(j.value+(s.value.columnGap||0))-(e>0&&s.value.columnGap||0))}let e=y.query(s.value.items.length);return Math.max(0,e-(s.value.items.length>0&&s.value.columnGap||0))}),F=(0,e.computed)(()=>{if(S.value,!d.value&&s.value.ssrRange&&!p.value){let{start:e,end:t}=s.value.ssrRange;if(s.value.direction===`vertical`||s.value.direction===`both`){if(j.value!==null){let n=t-e;return Math.max(0,n*(j.value+(s.value.gap||0))-(n>0&&s.value.gap||0))}let n=b.query(t)-b.query(e);return Math.max(0,n-(t>e&&s.value.gap||0))}}if(s.value.direction===`horizontal`)return 0;if(j.value!==null){let e=s.value.items.length;return Math.max(0,e*(j.value+(s.value.gap||0))-(e>0&&s.value.gap||0))}let e=b.query(s.value.items.length);return Math.max(0,e-(s.value.items.length>0&&s.value.gap||0))}),I=(0,e.computed)(()=>{let e=s.value.direction===`horizontal`||s.value.direction===`both`?a(s.value.scrollPaddingStart,s.value.direction):0;return Math.max(0,c.value+e-g.x)}),L=(0,e.computed)(()=>{let e=s.value.direction===`vertical`||s.value.direction===`both`?o(s.value.scrollPaddingStart,s.value.direction):0;return Math.max(0,l.value+e-g.y)}),R=e=>{S.value;let t=s.value.columnWidth;if(typeof t==`number`&&t>0)return t;if(Array.isArray(t)&&t.length>0){let n=t[e%t.length];return n!=null&&n>0?n:s.value.defaultColumnWidth||100}return typeof t==`function`?t(e):x.get(e)||s.value.defaultColumnWidth||100},z=(e,t,d)=>{let f=typeof d==`object`&&d&&`isCorrection`in d?d.isCorrection:!1;f||(E.value={rowIndex:e,colIndex:t,options:d});let p=s.value.container||window,_=j.value,S=s.value.gap||0,C=s.value.columnGap||0,w,T;i(d)?(w=d.align,T=d.behavior):w=d;let D=(typeof w==`object`?w.x:w)||`auto`,O=(typeof w==`object`?w.y:w)||`auto`,k=a(s.value.scrollPaddingStart,s.value.direction),A=a(s.value.scrollPaddingEnd,s.value.direction),M=o(s.value.scrollPaddingStart,s.value.direction),N=o(s.value.scrollPaddingEnd,s.value.direction),R=s.value.direction===`vertical`||s.value.direction===`both`,z=s.value.direction===`horizontal`||s.value.direction===`both`,B=m.value-(z?k+A:0),V=h.value-(R?M+N:0),H=I.value,U=L.value,W=0,G=0;if(e!=null&&(e>=s.value.items.length?(U=F.value,G=0):(U=_===null?b.query(e):e*(_+S),G=_===null?b.get(e)-S:_),O===`start`||(O===`center`?U-=(V-G)/2:O===`end`?U-=V-G:U>=L.value&&U+G<=L.value+V||U<L.value||(U-=V-G))),t!=null){let e=s.value.columnCount||0;t>=e&&e>0?(H=P.value,W=0):s.value.direction===`horizontal`?(H=_===null?y.query(t):t*(_+C),W=_===null?y.get(t)-C:_):(H=x.query(t),W=x.get(t)-C),D===`start`||(D===`center`?H-=(B-W)/2:D===`end`?H-=B-W:H>=I.value&&H+W<=I.value+B||H<I.value||(H-=B-W))}H=Math.max(0,Math.min(H,Math.max(0,P.value-B))),U=Math.max(0,Math.min(U,Math.max(0,F.value-V)));let K=H+g.x-(z?k:0),q=U+g.y-(R?M:0),J=t==null||Math.abs(I.value-H)<1,Y=e==null||Math.abs(L.value-U)<1;if(!J||!Y){let r=0,i=0,a=0,o=0,s=0,c=0;if(typeof window<`u`){if(p===window?(r=window.scrollX,i=window.scrollY,a=document.documentElement.scrollWidth,o=document.documentElement.scrollHeight,s=window.innerWidth,c=window.innerHeight):n(p)&&(r=p.scrollLeft,i=p.scrollTop,a=p.scrollWidth,o=p.scrollHeight,s=p.clientWidth,c=p.clientHeight),!J&&t!=null){let e=r<=1&&K<=1,t=r>=a-s-1&&K>=a-s-1;(e||t)&&(J=!0)}if(!Y&&e!=null){let e=i<=1&&q<=1,t=i>=o-c-1&&q>=o-c-1;(e||t)&&(Y=!0)}}}let X=f?`auto`:T||`smooth`;if(v.value=!0,typeof window<`u`&&p===window)window.scrollTo({left:t==null?void 0:Math.max(0,K),top:e==null?void 0:Math.max(0,q),behavior:X});else if(r(p)){let n={behavior:X};t!=null&&(n.left=Math.max(0,K)),e!=null&&(n.top=Math.max(0,q)),typeof p.scrollTo==`function`?p.scrollTo(n):(n.left!==void 0&&(p.scrollLeft=n.left),n.top!==void 0&&(p.scrollTop=n.top))}(X===`auto`||X===void 0)&&(t!=null&&(c.value=Math.max(0,K)),e!=null&&(l.value=Math.max(0,q))),J&&Y&&!u.value&&(E.value=null)},B=(e,t,n)=>{let i=s.value.container||window;v.value=!0;let u=s.value.direction===`vertical`||s.value.direction===`both`,d=s.value.direction===`horizontal`||s.value.direction===`both`,f=a(s.value.scrollPaddingStart,s.value.direction),p=o(s.value.scrollPaddingStart,s.value.direction),_=a(s.value.scrollPaddingEnd,s.value.direction),y=o(s.value.scrollPaddingEnd,s.value.direction),b=m.value-(d?f+_:0),x=h.value-(u?p+y:0),S=e==null?null:d?Math.max(0,Math.min(e,Math.max(0,P.value-b))):Math.max(0,e),C=t==null?null:u?Math.max(0,Math.min(t,Math.max(0,F.value-x))):Math.max(0,t),w=typeof window<`u`&&i===window?window.scrollX:i.scrollLeft,T=typeof window<`u`&&i===window?window.scrollY:i.scrollTop,E=S===null?w:S+g.x-(d?f:0),D=C===null?T:C+g.y-(u?p:0);if(typeof window<`u`&&i===window)window.scrollTo({left:e==null?void 0:E,top:t==null?void 0:D,behavior:n?.behavior||`auto`});else if(r(i)){let r={behavior:n?.behavior||`auto`};e!=null&&(r.left=E),t!=null&&(r.top=D),typeof i.scrollTo==`function`?i.scrollTo(r):(r.left!==void 0&&(i.scrollLeft=r.left),r.top!==void 0&&(i.scrollTop=r.top))}(n?.behavior===`auto`||n?.behavior===void 0)&&(e!=null&&(c.value=E),t!=null&&(l.value=D))},V=()=>{let t=s.value.items,n=t.length,r=s.value.columnCount||0;if(y.resize(n),b.resize(n),x.resize(r),w.length!==n){let e=new Uint8Array(n);e.set(w.subarray(0,Math.min(n,w.length))),w=e}if(T.length!==n){let e=new Uint8Array(n);e.set(T.subarray(0,Math.min(n,T.length))),T=e}if(C.length!==r){let e=new Uint8Array(r);e.set(C.subarray(0,Math.min(r,C.length))),C=e}let i=0;if(s.value.restoreScrollOnPrepend&&O.length>0&&n>O.length){let e=O[0];if(e!==void 0){for(let r=1;r<=n-O.length;r++)if(t[r]===e){i=r;break}}}if(i>0){y.shift(i),b.shift(i),E.value&&E.value.rowIndex!==null&&E.value.rowIndex!==void 0&&(E.value.rowIndex+=i);let r=new Uint8Array(n),a=new Uint8Array(n);r.set(w.subarray(0,Math.min(n-i,w.length)),i),a.set(T.subarray(0,Math.min(n-i,T.length)),i),w=r,T=a;let o=s.value.gap||0,c=s.value.columnGap||0,l=0,u=0;for(let e=0;e<i;e++){let n=typeof s.value.itemSize==`function`?s.value.itemSize(t[e],e):M.value;s.value.direction===`horizontal`?l+=n+c:u+=n+o}(l>0||u>0)&&(0,e.nextTick)(()=>{B(l>0?I.value+l:null,u>0?L.value+u:null,{behavior:`auto`})})}if(r>0){let e=s.value.columnGap||0,t=!1;for(let n=0;n<r;n++){let r=R(n),i=x.get(n),a=C[n]===1;if(!A.value||!a||i===0){let a=r+e;Math.abs(i-a)>.5?(x.set(n,a),C[n]=A.value?0:1,t=!0):A.value||(C[n]=1)}}t&&x.rebuild()}let a=s.value.gap||0,o=s.value.columnGap||0,c=!1;for(let e=0;e<n;e++){let t=s.value.items[e],n=y.get(e),r=b.get(e),i=typeof s.value.itemSize==`function`?s.value.itemSize(t,e):M.value,l=s.value.direction===`vertical`,u=s.value.direction===`horizontal`,d=s.value.direction===`both`,f=u?i+o:0,p=l||d?i+a:0,m=w[e]===1,h=T[e]===1;u?(!k.value||!m||n===0)&&(Math.abs(n-f)>.5?(y.set(e,f),w[e]=k.value?0:1,c=!0):k.value||(w[e]=1)):n!==0&&(y.set(e,0),w[e]=0,c=!0),l||d?(!k.value||!h||r===0)&&(Math.abs(r-p)>.5?(b.set(e,p),T[e]=k.value?0:1,c=!0):k.value||(T[e]=1)):r!==0&&(b.set(e,0),T[e]=0,c=!0)}c&&(y.rebuild(),b.rebuild()),O=[...t],D.value=!0,S.value++},H=()=>{if(s.value.hostElement&&typeof window<`u`){let e=s.value.hostElement.getBoundingClientRect(),t=s.value.container||window,r=0,i=0;if(t===window)r=e.left+window.scrollX,i=e.top+window.scrollY;else if(t===s.value.hostElement)r=0,i=0;else if(n(t)){let n=t.getBoundingClientRect();r=e.left-n.left+t.scrollLeft,i=e.top-n.top+t.scrollTop}(Math.abs(g.x-r)>.1||Math.abs(g.y-i)>.1)&&(g.x=r,g.y=i)}};(0,e.watch)([()=>s.value.items,()=>s.value.direction,()=>s.value.columnCount,()=>s.value.columnWidth,()=>s.value.itemSize,()=>s.value.gap,()=>s.value.columnGap,()=>s.value.defaultItemSize,()=>s.value.defaultColumnWidth],V,{immediate:!0}),(0,e.watch)(()=>[s.value.container,s.value.hostElement],()=>{H()});let U=(0,e.computed)(()=>{if(S.value,(!d.value||f.value)&&s.value.ssrRange)return{start:s.value.ssrRange.start,end:s.value.ssrRange.end};let e=s.value.direction||`vertical`,t=s.value.ssrRange&&!u.value?0:s.value.bufferBefore??5,n=s.value.bufferAfter??5,r=s.value.gap||0,i=s.value.columnGap||0,c=j.value,l=a(s.value.scrollPaddingStart,e),p=a(s.value.scrollPaddingEnd,e),g=o(s.value.scrollPaddingStart,e),_=o(s.value.scrollPaddingEnd,e),v=e===`vertical`||e===`both`,x=e===`horizontal`||e===`both`,C=m.value-(x?l+p:0),w=h.value-(v?g+_:0),T=0,E=s.value.items.length;if(v)if(c!==null)T=Math.floor(L.value/(c+r)),E=Math.ceil((L.value+w)/(c+r));else{T=b.findLowerBound(L.value);let e=b.query(T),t=T;for(;t<s.value.items.length&&e<L.value+w;)e=b.query(++t);E=t}else if(c!==null)T=Math.floor(I.value/(c+i)),E=Math.ceil((I.value+C)/(c+i));else{T=y.findLowerBound(I.value);let e=y.query(T),t=T;for(;t<s.value.items.length&&e<I.value+C;)e=y.query(++t);E=t}return{start:Math.max(0,T-t),end:Math.min(s.value.items.length,E+n)}}),W=(0,e.computed)(()=>{S.value;let e=j.value,t=s.value.gap||0,n=s.value.columnGap||0;return s.value.direction===`horizontal`?e===null?y.findLowerBound(I.value):Math.floor(I.value/(e+n)):e===null?b.findLowerBound(L.value):Math.floor(L.value/(e+t))}),G=(0,e.computed)(()=>{S.value;let{start:e,end:t}=U.value,n=[],r=j.value,i=s.value.gap||0,a=s.value.columnGap||0,o=N.value,c=new Set;for(let n=e;n<t;n++)c.add(n);if(d.value||!s.value.ssrRange){let n=W.value,r,i=0,a=o.length-1;for(;i<=a;){let e=i+a>>>1;o[e]<n?(r=o[e],i=e+1):a=e-1}r!==void 0&&c.add(r);for(let n of o)n>=e&&n<t&&c.add(n)}let l=Array.from(c).sort((e,t)=>e-t),u=s.value.ssrRange?.start||0,f=s.value.ssrRange?.colStart||0,p=0,g=0;!d.value&&s.value.ssrRange&&(g=s.value.direction===`vertical`||s.value.direction===`both`?r===null?b.query(u):u*(r+i):0,s.value.direction===`horizontal`?p=r===null?y.query(f):f*(r+a):s.value.direction===`both`&&(p=x.query(f)));for(let e of l){let t=s.value.items[e];if(t===void 0)continue;let c=0,l=0,u=0,d=0;s.value.direction===`horizontal`?(c=r===null?y.query(e):e*(r+a),u=r===null?y.get(e)-a:r,d=h.value):(l=(s.value.direction===`vertical`||s.value.direction===`both`)&&r!==null?e*(r+i):b.query(e),d=r===null?b.get(e)-i:r,u=s.value.direction===`both`?P.value:m.value);let f=o.includes(e),_=c,v=l,x=!1,S={x:0,y:0};if(f){if(s.value.direction===`vertical`||s.value.direction===`both`){if(L.value>v){x=!0;let t,n=0,a=o.length-1;for(;n<=a;){let r=n+a>>>1;o[r]>e?(t=o[r],a=r-1):n=r+1}if(t!==void 0){let e=(r===null?b.query(t):t*(r+i))-L.value;e<d&&(S.y=-(d-e))}}}else if(s.value.direction===`horizontal`&&I.value>_){x=!0;let t,n=0,i=o.length-1;for(;n<=i;){let r=n+i>>>1;o[r]>e?(t=o[r],i=r-1):n=r+1}if(t!==void 0){let e=(r===null?y.query(t):t*(r+a))-I.value;e<u&&(S.x=-(u-e))}}}n.push({item:t,index:e,offset:{x:_-p,y:v-g},size:{width:u,height:d},originalX:_,originalY:v,isSticky:f,isStickyActive:x,stickyOffset:S})}return n}),K=(0,e.computed)(()=>{S.value;let e=s.value.columnCount||0;if(!e)return{start:0,end:0,padStart:0,padEnd:0};if((!d.value||f.value)&&s.value.ssrRange){let{colStart:t=0,colEnd:n=0}=s.value.ssrRange;return{start:Math.max(0,t),end:Math.min(e,n||e),padStart:0,padEnd:0}}let t=x.findLowerBound(I.value),n=x.query(t),r=t;for(;r<e&&n<I.value+m.value;)n=x.query(++r);let i=s.value.ssrRange&&!u.value?0:2,a=Math.max(0,t-i),o=Math.min(e,r+i);return{start:a,end:o,padStart:x.query(a),padEnd:x.query(e)-x.query(o)}}),q=(0,e.computed)(()=>{S.value;let e=j.value,t=s.value.columnGap||0,n=0;return(s.value.direction===`horizontal`||s.value.direction===`both`)&&(n=e===null?y.findLowerBound(I.value):Math.floor(I.value/(e+t))),{items:G.value,currentIndex:W.value,currentColIndex:n,scrollOffset:{x:I.value,y:L.value},viewportSize:{width:m.value,height:h.value},totalSize:{width:P.value,height:F.value},isScrolling:u.value,isProgrammaticScroll:v.value,range:U.value,columnRange:K.value}}),J=()=>{v.value=!1,E.value=null},Y=e=>{let t=e.target;typeof window>`u`||(t===window||t===document?(c.value=window.scrollX,l.value=window.scrollY):r(t)&&(c.value=t.scrollLeft,l.value=t.scrollTop),u.value||=(v.value||(E.value=null),!0),clearTimeout(_),_=setTimeout(()=>{u.value=!1,v.value=!1},250))},X=e=>{let t=!1,n=s.value.gap||0,r=s.value.columnGap||0;for(let{index:i,inlineSize:a,blockSize:o,element:c}of e){if((k.value||typeof s.value.itemSize==`function`)&&i>=0){if(s.value.direction===`horizontal`){let e=y.get(i),n=a+r;(!w[i]||Math.abs(n-e)>.5)&&(y.update(i,n-e),w[i]=1,t=!0)}if(s.value.direction===`vertical`||s.value.direction===`both`){let e=b.get(i),r=o+n;s.value.direction,(!T[i]||Math.abs(r-e)>.5)&&(b.update(i,r-e),T[i]=1,t=!0)}}let e=A.value||typeof s.value.columnWidth==`function`;if(s.value.direction===`both`&&c&&s.value.columnCount&&e){let e=c.dataset.colIndex===void 0?Array.from(c.querySelectorAll(`[data-col-index]`)):[c];for(let n of e){let e=Number.parseInt(n.dataset.colIndex,10);if(e>=0&&e<(s.value.columnCount||0)){let i=n.offsetWidth,a=x.get(e),o=i+r;Math.abs(a-o)>.5&&(x.update(e,o-a),C[e]=1,t=!0)}}}}t&&S.value++},ee=(e,t,n,r)=>{X([{index:e,inlineSize:t,blockSize:n,element:r}])},Z=()=>{if(E.value&&!f.value){let{rowIndex:e,colIndex:t,options:n}=E.value;z(e,t,i(n)?{...n,isCorrection:!0}:{align:n,isCorrection:!0})}};(0,e.watch)(S,Z),(0,e.watch)(u,e=>{e||Z()});let Q=null,te=e=>{if(!e||typeof window>`u`)return;let t=e===window?document:e;if(t.addEventListener(`scroll`,Y,{passive:!0}),e===window){m.value=window.innerWidth,h.value=window.innerHeight,c.value=window.scrollX,l.value=window.scrollY;let e=()=>{m.value=window.innerWidth,h.value=window.innerHeight,H()};return window.addEventListener(`resize`,e),()=>{t.removeEventListener(`scroll`,Y),window.removeEventListener(`resize`,e)}}else return m.value=e.clientWidth,h.value=e.clientHeight,c.value=e.scrollLeft,l.value=e.scrollTop,Q=new ResizeObserver(t=>{for(let n of t)n.target===e&&(m.value=e.clientWidth,h.value=e.clientHeight,H())}),Q.observe(e),()=>{t.removeEventListener(`scroll`,Y),Q?.disconnect()}},$;return(0,e.getCurrentInstance)()&&((0,e.onMounted)(()=>{p.value=!0,(0,e.watch)(()=>s.value.container,e=>{$?.(),$=te(e||null)},{immediate:!0}),H(),s.value.ssrRange||s.value.initialScrollIndex!==void 0?(0,e.nextTick)(()=>{H();let t=s.value.initialScrollIndex===void 0?s.value.ssrRange?.start:s.value.initialScrollIndex,n=s.value.initialScrollAlign||`start`;t!=null&&z(t,s.value.ssrRange?.colStart,{align:n,behavior:`auto`}),d.value=!0,f.value=!0,(0,e.nextTick)(()=>{f.value=!1})}):d.value=!0}),(0,e.onUnmounted)(()=>{$?.()})),{renderedItems:G,totalWidth:P,totalHeight:F,scrollDetails:q,scrollToIndex:z,scrollToOffset:B,stopProgrammaticScroll:J,updateItemSize:ee,updateItemSizes:X,updateHostOffset:H,columnRange:K,getColumnWidth:R,refresh:()=>{y.resize(0),b.resize(0),x.resize(0),C.fill(0),w.fill(0),T.fill(0),V()},isHydrated:d}}var d={key:0,class:`virtual-scroll-debug-info`},f=(0,e.defineComponent)({__name:`VirtualScroll`,props:{items:{},itemSize:{},direction:{default:`vertical`},bufferBefore:{default:5},bufferAfter:{default:5},container:{},ssrRange:{},columnCount:{default:0},columnWidth:{},containerTag:{default:`div`},wrapperTag:{default:`div`},itemTag:{default:`div`},scrollPaddingStart:{default:0},scrollPaddingEnd:{default:0},stickyHeader:{type:Boolean,default:!1},stickyFooter:{type:Boolean,default:!1},gap:{default:0},columnGap:{default:0},stickyIndices:{default:()=>[]},loadDistance:{default:200},loading:{type:Boolean,default:!1},restoreScrollOnPrepend:{type:Boolean,default:!1},initialScrollIndex:{},initialScrollAlign:{},defaultItemSize:{},defaultColumnWidth:{},debug:{type:Boolean,default:!1}},emits:[`scroll`,`load`,`visibleRangeChange`],setup(t,{expose:n,emit:r}){let i=t,s=r,c=(0,e.useSlots)(),l=(0,e.ref)(null),f=(0,e.ref)(null),p=(0,e.ref)(null),m=(0,e.ref)(null),h=new Map,g=(0,e.ref)(0),_=(0,e.ref)(0),v=(0,e.computed)(()=>{let e=i.container===void 0?l.value:i.container;return e===l.value||typeof window<`u`&&(e===window||e===null)}),{isHydrated:y,columnRange:b,renderedItems:x,scrollDetails:S,totalHeight:C,totalWidth:w,getColumnWidth:T,scrollToIndex:E,scrollToOffset:D,updateHostOffset:O,updateItemSizes:k,refresh:A,stopProgrammaticScroll:j}=u((0,e.computed)(()=>{let e=i.scrollPaddingStart,t=i.scrollPaddingEnd,n=typeof e==`object`?e.x||0:i.direction===`horizontal`&&e||0,r=typeof e==`object`?e.y||0:i.direction===`horizontal`?0:e||0,a=typeof t==`object`?t.x||0:i.direction===`horizontal`&&t||0,o=typeof t==`object`?t.y||0:i.direction===`horizontal`?0:t||0;return{items:i.items,itemSize:i.itemSize,direction:i.direction,bufferBefore:i.bufferBefore,bufferAfter:i.bufferAfter,container:i.container===void 0?l.value:i.container,hostElement:f.value,ssrRange:i.ssrRange,columnCount:i.columnCount,columnWidth:i.columnWidth,scrollPaddingStart:{x:n,y:r+(i.stickyHeader&&v.value?g.value:0)},scrollPaddingEnd:{x:a,y:o+(i.stickyFooter&&v.value?_.value:0)},gap:i.gap,columnGap:i.columnGap,stickyIndices:i.stickyIndices,loadDistance:i.loadDistance,loading:i.loading,restoreScrollOnPrepend:i.restoreScrollOnPrepend,initialScrollIndex:i.initialScrollIndex,initialScrollAlign:i.initialScrollAlign,defaultItemSize:i.defaultItemSize,defaultColumnWidth:i.defaultColumnWidth,debug:i.debug}}));function M(){A(),(0,e.nextTick)(()=>{let e=[];for(let[t,n]of h.entries())n&&e.push({index:t,inlineSize:n.offsetWidth,blockSize:n.offsetHeight,element:n});e.length>0&&k(e)})}(0,e.watch)(S,(e,t)=>{y.value&&(s(`scroll`,e),(!t||e.range.start!==t.range.start||e.range.end!==t.range.end||e.columnRange.start!==t.columnRange.start||e.columnRange.end!==t.columnRange.end)&&s(`visibleRangeChange`,{start:e.range.start,end:e.range.end,colStart:e.columnRange.start,colEnd:e.columnRange.end}),!i.loading&&(i.direction!==`horizontal`&&e.totalSize.height-(e.scrollOffset.y+e.viewportSize.height)<=i.loadDistance&&s(`load`,`vertical`),i.direction!==`vertical`&&e.totalSize.width-(e.scrollOffset.x+e.viewportSize.width)<=i.loadDistance&&s(`load`,`horizontal`)))}),(0,e.watch)(y,e=>{e&&s(`visibleRangeChange`,{start:S.value.range.start,end:S.value.range.end,colStart:S.value.columnRange.start,colEnd:S.value.columnRange.end})},{once:!0});let N=typeof window>`u`?null:new ResizeObserver(O),P=typeof window>`u`?null:new ResizeObserver(e=>{let t=[];for(let n of e){let e=n.target,r=Number(e.dataset.index);if(e.dataset.colIndex!==void 0)t.push({index:-1,inlineSize:0,blockSize:0,element:e});else if(!Number.isNaN(r)){let i=n.contentRect.width,a=n.contentRect.height;n.borderBoxSize&&n.borderBoxSize.length>0?(i=n.borderBoxSize[0].inlineSize,a=n.borderBoxSize[0].blockSize):(i=e.offsetWidth,a=e.offsetHeight),t.push({index:r,inlineSize:i,blockSize:a,element:e})}}t.length>0&&k(t)}),F=typeof window>`u`?null:new ResizeObserver(()=>{g.value=p.value?.offsetHeight||0,_.value=m.value?.offsetHeight||0,O()});(0,e.watch)(p,(e,t)=>{t&&F?.unobserve(t),e&&F?.observe(e)},{immediate:!0}),(0,e.watch)(m,(e,t)=>{t&&F?.unobserve(t),e&&F?.observe(e)},{immediate:!0});let I=(0,e.computed)(()=>x.value[0]?.index);(0,e.watch)(I,(e,t)=>{if(i.direction===`both`){if(t!==void 0){let e=h.get(t);e&&e.querySelectorAll(`[data-col-index]`).forEach(e=>P?.unobserve(e))}if(e!==void 0){let t=h.get(e);t&&t.querySelectorAll(`[data-col-index]`).forEach(e=>P?.observe(e))}}},{flush:`post`}),(0,e.onMounted)(()=>{l.value&&N?.observe(l.value);for(let e of h.values())P?.observe(e);if(I.value!==void 0){let e=h.get(I.value);e&&e.querySelectorAll(`[data-col-index]`).forEach(e=>P?.observe(e))}}),(0,e.watch)([l,f],([e],[t])=>{t&&N?.unobserve(t),e&&N?.observe(e)});function L(e,t){if(e)h.set(t,e),P?.observe(e);else{let e=h.get(t);e&&(P?.unobserve(e),h.delete(t))}}function R(e){j();let{viewportSize:t,scrollOffset:n}=S.value,r=i.direction!==`vertical`,a=i.direction!==`horizontal`;if(e.key===`Home`){e.preventDefault(),E(0,0,`start`);return}if(e.key===`End`){e.preventDefault();let t=i.items.length-1,n=(i.columnCount||0)>0?i.columnCount-1:0;r?a?E(t,n,`end`):E(0,t,`end`):E(t,0,`end`);return}if(e.key===`ArrowUp`){e.preventDefault(),D(null,n.y-40);return}if(e.key===`ArrowDown`){e.preventDefault(),D(null,n.y+40);return}if(e.key===`ArrowLeft`){e.preventDefault(),D(n.x-40,null);return}if(e.key===`ArrowRight`){e.preventDefault(),D(n.x+40,null);return}if(e.key===`PageUp`){e.preventDefault(),D(!a&&r?n.x-t.width:null,a?n.y-t.height:null);return}e.key===`PageDown`&&(e.preventDefault(),D(!a&&r?n.x+t.width:null,a?n.y+t.height:null))}(0,e.onUnmounted)(()=>{N?.disconnect(),P?.disconnect(),F?.disconnect()});let z=(0,e.computed)(()=>{let e=i.container;return e===null||typeof window<`u`&&e===window?!0:e&&typeof e==`object`&&`tagName`in e?e.tagName===`BODY`:!1}),B=(0,e.computed)(()=>z.value?{...i.direction===`vertical`?{}:{whiteSpace:`nowrap`}}:i.containerTag===`table`?{minInlineSize:i.direction===`vertical`?`100%`:`auto`}:{...i.direction===`vertical`?{}:{whiteSpace:`nowrap`}}),V=(0,e.computed)(()=>({inlineSize:i.direction===`vertical`?`100%`:`${w.value}px`,blockSize:i.direction===`horizontal`?`100%`:`${C.value}px`})),H=(0,e.computed)(()=>{let e=i.direction===`horizontal`;return{display:e?`inline-block`:`block`,...e?{blockSize:`100%`,verticalAlign:`top`}:{inlineSize:`100%`}}}),U=(0,e.computed)(()=>({inlineSize:i.direction===`vertical`?`1px`:`${w.value}px`,blockSize:i.direction===`horizontal`?`1px`:`${C.value}px`}));function W(e){let t=i.direction===`vertical`,n=i.direction===`horizontal`,r=i.direction===`both`,s=i.itemSize===void 0||i.itemSize===null||i.itemSize===0,c={blockSize:n?`100%`:s?`auto`:`${e.size.height}px`};return t&&i.containerTag===`table`?c.minInlineSize=`100%`:c.inlineSize=t?`100%`:s?`auto`:`${e.size.width}px`,s&&(t||(c.minInlineSize=`1px`),n||(c.minBlockSize=`1px`)),y.value&&(e.isStickyActive?((t||r)&&(c.insetBlockStart=`${o(i.scrollPaddingStart,i.direction)}px`),(n||r)&&(c.insetInlineStart=`${a(i.scrollPaddingStart,i.direction)}px`),c.transform=`translate(${e.stickyOffset.x}px, ${e.stickyOffset.y}px)`):c.transform=`translate(${e.offset.x}px, ${e.offset.y}px)`),c}let G=(0,e.computed)(()=>i.debug),K=(0,e.computed)(()=>i.containerTag===`table`),q=(0,e.computed)(()=>K.value?`thead`:`div`),J=(0,e.computed)(()=>K.value?`tfoot`:`div`);return n({scrollDetails:S,columnRange:b,getColumnWidth:T,scrollToIndex:E,scrollToOffset:D,refresh:M,stopProgrammaticScroll:j}),(n,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.containerTag),{ref_key:`hostRef`,ref:l,class:(0,e.normalizeClass)([`virtual-scroll-container`,[`virtual-scroll--${t.direction}`,{"virtual-scroll--hydrated":(0,e.unref)(y),"virtual-scroll--window":z.value,"virtual-scroll--table":K.value}]]),style:(0,e.normalizeStyle)(B.value),tabindex:`0`,onKeydown:R,onWheelPassive:(0,e.unref)(j),onPointerdownPassive:(0,e.unref)(j),onTouchstartPassive:(0,e.unref)(j)},{default:(0,e.withCtx)(()=>[c.header?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(q.value),{key:0,ref_key:`headerRef`,ref:p,class:(0,e.normalizeClass)([`virtual-scroll-header`,{"virtual-scroll--sticky":t.stickyHeader}])},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`header`,{},void 0,!0)]),_:3},8,[`class`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.wrapperTag),{ref_key:`wrapperRef`,ref:f,class:`virtual-scroll-wrapper`,style:(0,e.normalizeStyle)(V.value)},{default:(0,e.withCtx)(()=>[K.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.itemTag),{key:0,class:`virtual-scroll-spacer`,style:(0,e.normalizeStyle)(U.value)},{default:(0,e.withCtx)(()=>[...r[0]||=[(0,e.createElementVNode)(`td`,{style:{padding:`0`,border:`none`,"block-size":`inherit`}},null,-1)]]),_:1},8,[`style`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(x),r=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.itemTag),{key:r.index,ref_for:!0,ref:e=>L(e,r.index),"data-index":r.index,class:(0,e.normalizeClass)([`virtual-scroll-item`,{"virtual-scroll--sticky":r.isStickyActive,"virtual-scroll--debug":G.value}]),style:(0,e.normalizeStyle)(W(r))},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`item`,{item:r.item,index:r.index,columnRange:(0,e.unref)(b),getColumnWidth:(0,e.unref)(T),isSticky:r.isSticky,isStickyActive:r.isStickyActive},void 0,!0),G.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,d,` #`+(0,e.toDisplayString)(r.index)+` (`+(0,e.toDisplayString)(Math.round(r.offset.x))+`, `+(0,e.toDisplayString)(Math.round(r.offset.y))+`) `,1)):(0,e.createCommentVNode)(``,!0)]),_:2},1032,[`data-index`,`class`,`style`]))),128))]),_:3},8,[`style`])),t.loading&&c.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:1,class:`virtual-scroll-loading`,style:(0,e.normalizeStyle)(H.value)},[(0,e.renderSlot)(n.$slots,`loading`,{},void 0,!0)],4)):(0,e.createCommentVNode)(``,!0),c.footer?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(J.value),{key:2,ref_key:`footerRef`,ref:m,class:(0,e.normalizeClass)([`virtual-scroll-footer`,{"virtual-scroll--sticky":t.stickyFooter}])},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`footer`,{},void 0,!0)]),_:3},8,[`class`])):(0,e.createCommentVNode)(``,!0)]),_:3},40,[`class`,`style`,`onWheelPassive`,`onPointerdownPassive`,`onTouchstartPassive`]))}}),p=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},m=p(f,[[`__scopeId`,`data-v-d61a0f1d`]]);exports.DEFAULT_BUFFER=5,exports.DEFAULT_COLUMN_WIDTH=100,exports.DEFAULT_ITEM_SIZE=40,exports.FenwickTree=t,exports.VirtualScroll=m,exports.getPaddingX=a,exports.getPaddingY=o,exports.isElement=n,exports.isScrollToIndexOptions=i,exports.isScrollableElement=r,exports.useVirtualScroll=u;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);var t=class{tree;values;constructor(e){this.tree=new Float64Array(e+1),this.values=new Float64Array(e)}update(e,t){if(!(e<0||e>=this.values.length))for(this.values[e]=this.values[e]+t,e++;e<this.tree.length;)this.tree[e]=this.tree[e]+t,e+=e&-e}query(e){let t=0;for(;e>0;)t+=this.tree[e]||0,e-=e&-e;return t}set(e,t){e<0||e>=this.values.length||(this.values[e]=t)}get length(){return this.values.length}get(e){return this.values[e]||0}getValues(){return this.values}findLowerBound(e){let t=0,n=this.tree.length,r=1<<Math.floor(Math.log2(n-1));for(;r>0;){let i=t+r;if(i<n){let n=this.tree[i]||0;n<=e&&(t=i,e-=n)}r>>=1}return t}rebuild(){this.tree.fill(0);for(let e=0;e<this.values.length;e++)this.tree[e+1]=this.values[e]||0;for(let e=1;e<this.tree.length;e++){let t=e+(e&-e);t<this.tree.length&&(this.tree[t]=this.tree[t]+this.tree[e])}}resize(e){if(e===this.values.length)return;let t=new Float64Array(e);t.set(this.values.subarray(0,Math.min(e,this.values.length))),this.values=t,this.tree=new Float64Array(e+1),this.rebuild()}shift(e){if(e===0)return;let t=this.values.length,n=new Float64Array(t);e>0?n.set(this.values.subarray(0,Math.min(t-e,this.values.length)),e):n.set(this.values.subarray(-e)),this.values=n,this.rebuild()}};function n(e){return e===null||typeof window<`u`&&e===window}function r(e){return!!e&&typeof e==`object`&&`tagName`in e&&e.tagName===`BODY`}function i(e){return n(e)||r(e)}function a(e){return!!e&&`getBoundingClientRect`in e}function o(e){return!!e&&`scrollLeft`in e}function s(e){return typeof e==`object`&&!!e&&(`align`in e||`behavior`in e||`isCorrection`in e)}function c(e,t){return typeof e==`object`&&e?e.x||0:(t===`horizontal`||t===`both`)&&e||0}function l(e,t){return typeof e==`object`&&e?e.y||0:(t===`vertical`||t===`both`)&&e||0}function u(e){let{rowIndex:t,colIndex:n,options:r,itemsLength:i,columnCount:a,direction:o,usableWidth:c,usableHeight:l,totalWidth:u,totalHeight:d,gap:f,columnGap:p,fixedSize:m,fixedWidth:h,relativeScrollX:g,relativeScrollY:_,getItemSizeY:v,getItemSizeX:y,getItemQueryY:b,getItemQueryX:x,getColumnSize:S,getColumnQuery:C,stickyIndices:w}=e,T;T=s(r)?r.align:r;let E=(typeof T==`object`?T.x:T)||`auto`,D=(typeof T==`object`?T.y:T)||`auto`,O=o===`vertical`||o===`both`,k=o===`horizontal`||o===`both`,A=g,j=_,M=0,N=0,P=E===`auto`?`auto`:E,F=D===`auto`?`auto`:D;if(t!=null){let e=0;if(O&&w&&w.length>0){let n,r=0,i=w.length-1;for(;r<=i;){let e=r+i>>>1;w[e]<t?(n=w[e],r=e+1):i=e-1}n!==void 0&&(e=m===null?v(n)-f:m)}let n=0;if(t>=i?(n=d,N=0):(n=m===null?b(t):t*(m+f),N=m===null?v(t)-f:m),D===`start`)j=n-e;else if(D===`center`)j=n-(l-N)/2;else if(D===`end`)j=n-(l-N);else if(!(N<=l-e?n>=_+e-.5&&n+N<=_+l+.5:n<=_+e+.5&&n+N>=_+l-.5)){let t=n-e,r=n-(l-N);N<=l-e?n<_+e?(j=t,F=`start`):(j=r,F=`end`):Math.abs(t-_)<Math.abs(r-_)?(j=t,F=`start`):(j=r,F=`end`)}}if(n!=null){let e=0;if(k&&w&&w.length>0&&(o===`horizontal`||o===`both`)){let t,r=0,i=w.length-1;for(;r<=i;){let e=r+i>>>1;w[e]<n?(t=w[e],r=e+1):i=e-1}t!==void 0&&(e=o===`horizontal`?m===null?y(t)-p:m:h===null?S(t)-p:h)}let t=0;if(n>=a&&a>0?(t=u,M=0):o===`horizontal`?(t=m===null?x(n):n*(m+p),M=m===null?y(n)-p:m):(t=C(n),M=S(n)-p),E===`start`)A=t-e;else if(E===`center`)A=t-(c-M)/2;else if(E===`end`)A=t-(c-M);else if(!(M<=c-e?t>=g+e-.5&&t+M<=g+c+.5:t<=g+e+.5&&t+M>=g+c-.5)){let n=t-e,r=t-(c-M);M<=c-e?t<g+e?(A=n,P=`start`):(A=r,P=`end`):Math.abs(n-g)<Math.abs(r-g)?(A=n,P=`start`):(A=r,P=`end`)}}return A=Math.max(0,Math.min(A,Math.max(0,u-c))),j=Math.max(0,Math.min(j,Math.max(0,d-l))),{targetX:A,targetY:j,itemWidth:M,itemHeight:N,effectiveAlignX:P,effectiveAlignY:F}}function d(e){let{direction:t,relativeScrollX:n,relativeScrollY:r,usableWidth:i,usableHeight:a,itemsLength:o,bufferBefore:s,bufferAfter:c,gap:l,columnGap:u,fixedSize:d,findLowerBoundY:f,findLowerBoundX:p,queryY:m,queryX:h}=e,g=t===`vertical`||t===`both`,_=0,v=o;if(g)if(d!==null)_=Math.floor(r/(d+l)),v=Math.ceil((r+a)/(d+l));else{_=f(r);let e=r+a;v=f(e),v<o&&m(v)<e&&v++}else if(d!==null)_=Math.floor(n/(d+u)),v=Math.ceil((n+i)/(d+u));else{_=p(n);let e=n+i;v=p(e),v<o&&h(v)<e&&v++}return{start:Math.max(0,_-s),end:Math.min(o,v+c)}}function f(e){let{columnCount:t,relativeScrollX:n,usableWidth:r,colBuffer:i,fixedWidth:a,columnGap:o,findLowerBound:s,query:c,totalColsQuery:l}=e;if(!t)return{start:0,end:0,padStart:0,padEnd:0};let u=0,d=t;if(a!==null)u=Math.floor(n/(a+o)),d=Math.ceil((n+r)/(a+o));else{u=s(n);let e=c(u),i=u;for(;i<t&&e<n+r;)e=c(++i);d=i}let f=Math.max(0,u-i),p=Math.min(t,d+i),m=a===null?c(f):f*(a+o),h=a===null?Math.max(0,l()-o):t*(a+o)-o,g=a===null?c(p)-(p>=t?o:0):p*(a+o)-(p>=t?o:0);return{start:f,end:p,padStart:m,padEnd:Math.max(0,h-g)}}function p(e){let{index:t,isSticky:n,direction:r,relativeScrollX:i,relativeScrollY:a,originalX:o,originalY:s,width:c,height:l,stickyIndices:u,fixedSize:d,fixedWidth:f,gap:p,columnGap:m,getItemQueryY:h,getItemQueryX:g}=e,_=!1,v={x:0,y:0};if(!n)return{isStickyActive:_,stickyOffset:v};if((r===`vertical`||r===`both`)&&a>s){let e,n=0,r=u.length-1;for(;n<=r;){let i=n+r>>>1;u[i]>t?(e=u[i],r=i-1):n=i+1}if(e!==void 0){let t=d===null?h(e):e*(d+p);a>=t?_=!1:(_=!0,v.y=Math.max(0,Math.min(l,t-a))-l)}else _=!0}if((r===`horizontal`||r===`both`&&!_)&&i>o){let e,n=0,a=u.length-1;for(;n<=a;){let r=n+a>>>1;u[r]>t?(e=u[r],a=r-1):n=r+1}if(e!==void 0){let t=r===`horizontal`?d===null?g(e):e*(d+m):f===null?g(e):e*(f+m);i>=t?_=!1:(_=!0,v.x=Math.max(0,Math.min(c,t-i))-c)}else _=!0}return{isStickyActive:_,stickyOffset:v}}function m(e){let{index:t,direction:n,fixedSize:r,gap:i,columnGap:a,usableWidth:o,usableHeight:s,totalWidth:c,queryY:l,queryX:u,getSizeY:d,getSizeX:f}=e,p=0,m=0,h=0,g=0;return n===`horizontal`?(p=r===null?u(t):t*(r+a),h=r===null?f(t)-a:r,g=s):(m=(n===`vertical`||n===`both`)&&r!==null?t*(r+i):l(t),g=r===null?d(t)-i:r,h=n===`both`?c:o),{height:g,width:h,x:p,y:m}}function h(e){let{item:t,direction:n,itemSize:r,containerTag:i,paddingStartX:a,paddingStartY:o,isHydrated:s}=e,c=n===`vertical`,l=n===`horizontal`,u=n===`both`,d=r==null||r===0,f={blockSize:l?`100%`:d?`auto`:`${t.size.height}px`};return c&&i===`table`?f.minInlineSize=`100%`:f.inlineSize=c?`100%`:d?`auto`:`${t.size.width}px`,d&&(c||(f.minInlineSize=`1px`),l||(f.minBlockSize=`1px`)),s&&(t.isStickyActive?((c||u)&&(f.insetBlockStart=`${o}px`),(l||u)&&(f.insetInlineStart=`${a}px`),f.transform=`translate(${t.stickyOffset.x}px, ${t.stickyOffset.y}px)`):f.transform=`translate(${t.offset.x}px, ${t.offset.y}px)`),f}function g(e){let{direction:t,itemsLength:n,columnCount:r,fixedSize:i,fixedWidth:a,gap:o,columnGap:s,usableWidth:c,usableHeight:l,queryY:u,queryX:d,queryColumn:f}=e,p=0,m=0;return t===`both`?(r>0&&(p=a===null?Math.max(0,f(r)-s):r*(a+s)-s),m=i===null?Math.max(0,u(n)-(n>0?o:0)):Math.max(0,n*(i+o)-(n>0?o:0)),p=Math.max(p,c),m=Math.max(m,l)):t===`horizontal`?(p=i===null?Math.max(0,d(n)-(n>0?s:0)):Math.max(0,n*(i+s)-(n>0?s:0)),m=l):(p=c,m=i===null?Math.max(0,u(n)-(n>0?o:0)):Math.max(0,n*(i+o)-(n>0?o:0))),{width:p,height:m}}const _=40,v=100,y=5;function b(n){let r=(0,e.ref)(0),i=(0,e.ref)(0),h=(0,e.ref)(!1),_=(0,e.ref)(!1),v=(0,e.ref)(!1),y=(0,e.ref)(!1),b=(0,e.ref)(0),x=(0,e.ref)(0),S=(0,e.reactive)({x:0,y:0}),C,w=(0,e.ref)(!1),T=new t(n.value.items?.length||0),E=new t(n.value.items?.length||0),D=new t(n.value.columnCount||0),O=(0,e.ref)(0),k=new Uint8Array,A=new Uint8Array,j=new Uint8Array,M=(0,e.ref)(null),N=(0,e.ref)(!1),P=[],F=(0,e.computed)(()=>n.value.itemSize===void 0||n.value.itemSize===null||n.value.itemSize===0),I=(0,e.computed)(()=>n.value.columnWidth===void 0||n.value.columnWidth===null||n.value.columnWidth===0),L=(0,e.computed)(()=>typeof n.value.itemSize==`number`&&n.value.itemSize>0?n.value.itemSize:null),R=(0,e.computed)(()=>typeof n.value.columnWidth==`number`&&n.value.columnWidth>0?n.value.columnWidth:null),z=(0,e.computed)(()=>n.value.defaultItemSize||L.value||40),B=(0,e.computed)(()=>[...n.value.stickyIndices||[]].sort((e,t)=>e-t)),ee=(0,e.computed)(()=>new Set(B.value)),V=(0,e.computed)(()=>c(n.value.scrollPaddingStart,n.value.direction)),te=(0,e.computed)(()=>c(n.value.scrollPaddingEnd,n.value.direction)),H=(0,e.computed)(()=>l(n.value.scrollPaddingStart,n.value.direction)),U=(0,e.computed)(()=>l(n.value.scrollPaddingEnd,n.value.direction)),W=(0,e.computed)(()=>{let e=n.value.direction===`horizontal`||n.value.direction===`both`;return b.value-(e?V.value+te.value:0)}),G=(0,e.computed)(()=>{let e=n.value.direction===`vertical`||n.value.direction===`both`;return x.value-(e?H.value+U.value:0)}),K=(0,e.computed)(()=>{if(O.value,!_.value&&n.value.ssrRange&&!y.value){let{start:e=0,end:t=0,colStart:r=0,colEnd:i=0}=n.value.ssrRange,a=n.value.columnCount||0;if(n.value.direction===`both`){if(a<=0)return 0;let e=i||a,t=D.query(e)-D.query(r);return Math.max(0,t-(e>r&&n.value.columnGap||0))}if(n.value.direction===`horizontal`){if(L.value!==null){let r=t-e;return Math.max(0,r*(L.value+(n.value.columnGap||0))-(r>0&&n.value.columnGap||0))}let r=T.query(t)-T.query(e);return Math.max(0,r-(t>e&&n.value.columnGap||0))}}return g({direction:n.value.direction||`vertical`,itemsLength:n.value.items.length,columnCount:n.value.columnCount||0,fixedSize:L.value,fixedWidth:R.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,usableWidth:W.value,usableHeight:G.value,queryY:e=>E.query(e),queryX:e=>T.query(e),queryColumn:e=>D.query(e)}).width}),q=(0,e.computed)(()=>{if(O.value,!_.value&&n.value.ssrRange&&!y.value){let{start:e,end:t}=n.value.ssrRange;if(n.value.direction===`vertical`||n.value.direction===`both`){if(L.value!==null){let r=t-e;return Math.max(0,r*(L.value+(n.value.gap||0))-(r>0&&n.value.gap||0))}let r=E.query(t)-E.query(e);return Math.max(0,r-(t>e&&n.value.gap||0))}}return g({direction:n.value.direction||`vertical`,itemsLength:n.value.items.length,columnCount:n.value.columnCount||0,fixedSize:L.value,fixedWidth:R.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,usableWidth:W.value,usableHeight:G.value,queryY:e=>E.query(e),queryX:e=>T.query(e),queryColumn:e=>D.query(e)}).height}),J=(0,e.computed)(()=>{let e=n.value.direction===`horizontal`||n.value.direction===`both`?c(n.value.scrollPaddingStart,n.value.direction):0;return Math.max(0,r.value+e-S.x)}),Y=(0,e.computed)(()=>{let e=n.value.direction===`vertical`||n.value.direction===`both`?l(n.value.scrollPaddingStart,n.value.direction):0;return Math.max(0,i.value+e-S.y)}),ne=e=>{O.value;let t=n.value.columnWidth;if(typeof t==`number`&&t>0)return t;if(Array.isArray(t)&&t.length>0){let r=t[e%t.length];return r!=null&&r>0?r:n.value.defaultColumnWidth||100}return typeof t==`function`?t(e):D.get(e)||n.value.defaultColumnWidth||100},X=(e,t,a)=>{let c=typeof a==`object`&&a&&`isCorrection`in a?a.isCorrection:!1,l=n.value.container||window,d=n.value.direction===`vertical`||n.value.direction===`both`,f=n.value.direction===`horizontal`||n.value.direction===`both`,{targetX:p,targetY:m,effectiveAlignX:h,effectiveAlignY:g}=u({rowIndex:e,colIndex:t,options:a,itemsLength:n.value.items.length,columnCount:n.value.columnCount||0,direction:n.value.direction||`vertical`,usableWidth:W.value,usableHeight:G.value,totalWidth:K.value,totalHeight:q.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,fixedSize:L.value,fixedWidth:R.value,relativeScrollX:J.value,relativeScrollY:Y.value,getItemSizeY:e=>E.get(e),getItemSizeX:e=>T.get(e),getItemQueryY:e=>E.query(e),getItemQueryX:e=>T.query(e),getColumnSize:e=>D.get(e),getColumnQuery:e=>D.query(e),stickyIndices:B.value});if(!c){let n=s(a)?a.behavior:void 0;M.value={rowIndex:e,colIndex:t,options:{align:{x:h,y:g},...n==null?{}:{behavior:n}}}}let _=p+S.x-(f?V.value:0),v=m+S.y-(d?H.value:0),y;s(a)&&(y=a.behavior);let b=c?`auto`:y||`smooth`;if(w.value=!0,typeof window<`u`&&l===window)window.scrollTo({left:t==null?void 0:Math.max(0,_),top:e==null?void 0:Math.max(0,v),behavior:b});else if(o(l)){let n={behavior:b};t!=null&&(n.left=Math.max(0,_)),e!=null&&(n.top=Math.max(0,v)),typeof l.scrollTo==`function`?l.scrollTo(n):(n.left!==void 0&&(l.scrollLeft=n.left),n.top!==void 0&&(l.scrollTop=n.top))}(b===`auto`||b===void 0)&&(t!=null&&(r.value=Math.max(0,_)),e!=null&&(i.value=Math.max(0,v)))},Z=(e,t,a)=>{let s=n.value.container||window;w.value=!0;let c=n.value.direction===`vertical`||n.value.direction===`both`,l=n.value.direction===`horizontal`||n.value.direction===`both`,u=e==null?null:l?Math.max(0,Math.min(e,Math.max(0,K.value-W.value))):Math.max(0,e),d=t==null?null:c?Math.max(0,Math.min(t,Math.max(0,q.value-G.value))):Math.max(0,t),f=typeof window<`u`&&s===window?window.scrollX:s.scrollLeft,p=typeof window<`u`&&s===window?window.scrollY:s.scrollTop,m=u===null?f:u+S.x-(l?V.value:0),h=d===null?p:d+S.y-(c?H.value:0);if(typeof window<`u`&&s===window)window.scrollTo({left:e==null?void 0:m,top:t==null?void 0:h,behavior:a?.behavior||`auto`});else if(o(s)){let n={behavior:a?.behavior||`auto`};e!=null&&(n.left=m),t!=null&&(n.top=h),typeof s.scrollTo==`function`?s.scrollTo(n):(n.left!==void 0&&(s.scrollLeft=n.left),n.top!==void 0&&(s.scrollTop=n.top))}(a?.behavior===`auto`||a?.behavior===void 0)&&(e!=null&&(r.value=m),t!=null&&(i.value=h))},re=()=>{let t=n.value.items,r=t.length,i=n.value.columnCount||0;if(T.resize(r),E.resize(r),D.resize(i),A.length!==r){let e=new Uint8Array(r);e.set(A.subarray(0,Math.min(r,A.length))),A=e}if(j.length!==r){let e=new Uint8Array(r);e.set(j.subarray(0,Math.min(r,j.length))),j=e}if(k.length!==i){let e=new Uint8Array(i);e.set(k.subarray(0,Math.min(i,k.length))),k=e}let a=0;if(n.value.restoreScrollOnPrepend&&P.length>0&&r>P.length){let e=P[0];if(e!==void 0){for(let n=1;n<=r-P.length;n++)if(t[n]===e){a=n;break}}}if(a>0){T.shift(a),E.shift(a),M.value&&M.value.rowIndex!==null&&M.value.rowIndex!==void 0&&(M.value.rowIndex+=a);let i=new Uint8Array(r),o=new Uint8Array(r);i.set(A.subarray(0,Math.min(r-a,A.length)),a),o.set(j.subarray(0,Math.min(r-a,j.length)),a),A=i,j=o;let s=n.value.gap||0,c=n.value.columnGap||0,l=0,u=0;for(let e=0;e<a;e++){let r=typeof n.value.itemSize==`function`?n.value.itemSize(t[e],e):z.value;n.value.direction===`horizontal`?l+=r+c:u+=r+s}(l>0||u>0)&&(0,e.nextTick)(()=>{Z(l>0?J.value+l:null,u>0?Y.value+u:null,{behavior:`auto`})})}if(i>0){let e=n.value.columnGap||0,t=!1,r=n.value.columnWidth;for(let a=0;a<i;a++){let i=D.get(a),o=k[a]===1;if(!I.value||!o&&i===0){let o=0;o=typeof r==`number`&&r>0?r:Array.isArray(r)&&r.length>0?r[a%r.length]||n.value.defaultColumnWidth||100:typeof r==`function`?r(a):n.value.defaultColumnWidth||100;let s=o+e;Math.abs(i-s)>.5?(D.set(a,s),k[a]=I.value?0:1,t=!0):I.value||(k[a]=1)}}t&&D.rebuild()}let o=n.value.gap||0,s=n.value.columnGap||0,c=!1;for(let e=0;e<r;e++){let t=n.value.items[e],r=T.get(e),i=E.get(e),a=n.value.direction===`vertical`,l=n.value.direction===`horizontal`,u=n.value.direction===`both`,d=A[e]===1,f=j[e]===1;if(l){if(!F.value||!d&&r===0){let i=(typeof n.value.itemSize==`function`?n.value.itemSize(t,e):z.value)+s;Math.abs(r-i)>.5?(T.set(e,i),A[e]=F.value?0:1,c=!0):F.value||(A[e]=1)}}else r!==0&&(T.set(e,0),A[e]=0,c=!0);if(a||u){if(!F.value||!f&&i===0){let r=(typeof n.value.itemSize==`function`?n.value.itemSize(t,e):z.value)+o;Math.abs(i-r)>.5?(E.set(e,r),j[e]=F.value?0:1,c=!0):F.value||(j[e]=1)}}else i!==0&&(E.set(e,0),j[e]=0,c=!0)}c&&(T.rebuild(),E.rebuild()),P=[...t],N.value=!0,O.value++},Q=()=>{if(n.value.hostElement&&typeof window<`u`){let e=n.value.hostElement.getBoundingClientRect(),t=n.value.container||window,r=0,i=0;if(t===window)r=e.left+window.scrollX,i=e.top+window.scrollY;else if(t===n.value.hostElement)r=0,i=0;else if(a(t)){let n=t.getBoundingClientRect();r=e.left-n.left+t.scrollLeft,i=e.top-n.top+t.scrollTop}(Math.abs(S.x-r)>.1||Math.abs(S.y-i)>.1)&&(S.x=r,S.y=i)}};(0,e.watch)([()=>n.value.items,()=>n.value.items.length,()=>n.value.direction,()=>n.value.columnCount,()=>n.value.columnWidth,()=>n.value.itemSize,()=>n.value.gap,()=>n.value.columnGap,()=>n.value.defaultItemSize,()=>n.value.defaultColumnWidth],re,{immediate:!0}),(0,e.watch)(()=>[n.value.container,n.value.hostElement],()=>{Q()});let ie=(0,e.computed)(()=>{if(O.value,(!_.value||v.value)&&n.value.ssrRange)return{start:n.value.ssrRange.start,end:n.value.ssrRange.end};let e=n.value.ssrRange&&!h.value?0:n.value.bufferBefore??5,t=n.value.bufferAfter??5;return d({direction:n.value.direction||`vertical`,relativeScrollX:J.value,relativeScrollY:Y.value,usableWidth:W.value,usableHeight:G.value,itemsLength:n.value.items.length,bufferBefore:e,bufferAfter:t,gap:n.value.gap||0,columnGap:n.value.columnGap||0,fixedSize:L.value,findLowerBoundY:e=>E.findLowerBound(e),findLowerBoundX:e=>T.findLowerBound(e),queryY:e=>E.query(e),queryX:e=>T.query(e)})}),ae=(0,e.computed)(()=>{O.value;let e=L.value,t=n.value.gap||0,r=n.value.columnGap||0;return n.value.direction===`horizontal`?e===null?T.findLowerBound(J.value):Math.floor(J.value/(e+r)):e===null?E.findLowerBound(Y.value):Math.floor(Y.value/(e+t))}),oe=[],se=(0,e.computed)(()=>{O.value;let{start:e,end:t}=ie.value,r=[],i=L.value,a=n.value.gap||0,o=n.value.columnGap||0,s=B.value,c=ee.value,l=new Set;for(let n=e;n<t;n++)l.add(n);if(_.value||!n.value.ssrRange){let n=ae.value,r,i=0,a=s.length-1;for(;i<=a;){let e=i+a>>>1;s[e]<n?(r=s[e],i=e+1):a=e-1}r!==void 0&&l.add(r);let o=0,c=s.length-1,u=-1;for(;o<=c;){let t=o+c>>>1;s[t]>=e?(u=t,c=t-1):o=t+1}if(u!==-1)for(let e=u;e<s.length;e++){let n=s[e];if(n>=t)break;l.add(n)}}let u=Array.from(l).sort((e,t)=>e-t),d=n.value.ssrRange?.start||0,f=n.value.ssrRange?.colStart||0,h=0,g=0;!_.value&&n.value.ssrRange&&(g=n.value.direction===`vertical`||n.value.direction===`both`?i===null?E.query(d):d*(i+a):0,n.value.direction===`horizontal`?h=i===null?T.query(f):f*(i+o):n.value.direction===`both`&&(h=D.query(f)));let v=new Map(oe.map(e=>[e.index,e]));for(let e of u){let t=n.value.items[e];if(t===void 0)continue;let{x:i,y:a,width:o,height:l}=m({index:e,direction:n.value.direction||`vertical`,fixedSize:L.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,usableWidth:W.value,usableHeight:G.value,totalWidth:K.value,queryY:e=>E.query(e),queryX:e=>T.query(e),getSizeY:e=>E.get(e),getSizeX:e=>T.get(e)}),u=c.has(e),d=i,f=a,{isStickyActive:_,stickyOffset:y}=p({index:e,isSticky:u,direction:n.value.direction||`vertical`,relativeScrollX:J.value,relativeScrollY:Y.value,originalX:d,originalY:f,width:o,height:l,stickyIndices:s,fixedSize:L.value,fixedWidth:R.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,getItemQueryY:e=>E.query(e),getItemQueryX:e=>T.query(e)}),b=d-h,x=f-g,S=v.get(e);S&&S.item===t&&S.offset.x===b&&S.offset.y===x&&S.size.width===o&&S.size.height===l&&S.isSticky===u&&S.isStickyActive===_&&S.stickyOffset.x===y.x&&S.stickyOffset.y===y.y?r.push(S):r.push({item:t,index:e,offset:{x:b,y:x},size:{width:o,height:l},originalX:d,originalY:f,isSticky:u,isStickyActive:_,stickyOffset:y})}return oe=r,r}),ce=(0,e.computed)(()=>{O.value;let e=n.value.columnCount||0;if(!e)return{start:0,end:0,padStart:0,padEnd:0};if((!_.value||v.value)&&n.value.ssrRange){let{colStart:t=0,colEnd:r=0}=n.value.ssrRange;return{start:Math.max(0,t),end:Math.min(e,r||e),padStart:0,padEnd:0}}let t=n.value.ssrRange&&!h.value?0:2;return f({columnCount:e,relativeScrollX:J.value,usableWidth:W.value,colBuffer:t,fixedWidth:R.value,columnGap:n.value.columnGap||0,findLowerBound:e=>D.findLowerBound(e),query:e=>D.query(e),totalColsQuery:()=>D.query(e)})}),le=(0,e.computed)(()=>{O.value;let e=L.value,t=n.value.columnGap||0,r=0;return n.value.direction===`horizontal`?r=e===null?T.findLowerBound(J.value):Math.floor(J.value/(e+t)):n.value.direction===`both`&&(r=D.findLowerBound(J.value)),{items:se.value,currentIndex:ae.value,currentColIndex:r,scrollOffset:{x:J.value,y:Y.value},viewportSize:{width:b.value,height:x.value},totalSize:{width:K.value,height:q.value},isScrolling:h.value,isProgrammaticScroll:w.value,range:ie.value,columnRange:ce.value}}),ue=()=>{w.value=!1,M.value=null},$=e=>{let t=e.target;typeof window>`u`||(t===window||t===document?(r.value=window.scrollX,i.value=window.scrollY,b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight):o(t)&&(r.value=t.scrollLeft,i.value=t.scrollTop,b.value=t.clientWidth,x.value=t.clientHeight),h.value||=(w.value||(M.value=null),!0),clearTimeout(C),C=setTimeout(()=>{h.value=!1,w.value=!1},250))},de=e=>{let t=!1,r=0,i=0,a=n.value.gap||0,o=n.value.columnGap||0,s=J.value,c=Y.value,l=n.value.direction===`horizontal`?L.value===null?T.findLowerBound(s):Math.floor(s/(L.value+o)):L.value===null?E.findLowerBound(c):Math.floor(c/(L.value+a)),u=n.value.direction===`both`?D.findLowerBound(s):n.value.direction===`horizontal`?l:0,d=n.value.direction===`horizontal`,f=n.value.direction===`vertical`,p=n.value.direction===`both`,m=new Set,h=new Set;for(let{index:s,inlineSize:c,blockSize:g,element:_}of e){if(c<=0&&g<=0)continue;let e=F.value||typeof n.value.itemSize==`function`;if(s>=0&&!m.has(s)&&e&&g>0){if(m.add(s),d&&c>0){let e=T.get(s),n=c+o;if(!A[s]||Math.abs(n-e)>.1){let i=n-e;T.update(s,i),A[s]=1,t=!0,s<l&&(r+=i)}}if(f||p){let e=E.get(s),n=g+a;if(!j[s]||Math.abs(n-e)>.1){let r=n-e;E.update(s,r),j[s]=1,t=!0,s<l&&(i+=r)}}}let v=I.value||typeof n.value.columnWidth==`function`;if(p&&_&&n.value.columnCount&&v&&(c>0||_.dataset.colIndex===void 0)){let e=_.dataset.colIndex;if(e!=null){let i=Number.parseInt(e,10);if(i>=0&&i<(n.value.columnCount||0)&&!h.has(i)){h.add(i);let e=D.get(i),n=c+o;if(!k[i]||Math.abs(e-n)>.1){let a=n-e;Math.abs(a)>.1&&(D.update(i,a),t=!0,i<u&&(r+=a)),k[i]=1}}}else{let e=_.dataset.colIndex===void 0?Array.from(_.querySelectorAll(`[data-col-index]`)):[_];for(let i of e){let e=Number.parseInt(i.dataset.colIndex,10);if(e>=0&&e<(n.value.columnCount||0)&&!h.has(e)){h.add(e);let n=i.getBoundingClientRect().width,a=D.get(e),s=n+o;if(!k[e]||Math.abs(a-s)>.1){let n=s-a;Math.abs(n)>.1&&(D.update(e,n),t=!0,e<u&&(r+=n)),k[e]=1}}}}}}t&&(O.value++,!(M.value!==null||w.value)&&(r!==0||i!==0)&&Z(r===0?null:s+r,i===0?null:c+i,{behavior:`auto`}))},fe=(e,t,n,r)=>{de([{index:e,inlineSize:t,blockSize:n,element:r}])},pe=()=>{if(M.value&&!v.value){let{rowIndex:e,colIndex:t,options:r}=M.value;if(s(r)&&r.behavior===`smooth`&&h.value)return;let{targetX:i,targetY:a}=u({rowIndex:e,colIndex:t,options:r,itemsLength:n.value.items.length,columnCount:n.value.columnCount||0,direction:n.value.direction||`vertical`,usableWidth:W.value,usableHeight:G.value,totalWidth:K.value,totalHeight:q.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,fixedSize:L.value,fixedWidth:R.value,relativeScrollX:J.value,relativeScrollY:Y.value,getItemSizeY:e=>E.get(e),getItemSizeX:e=>T.get(e),getItemQueryY:e=>E.query(e),getItemQueryX:e=>T.query(e),getColumnSize:e=>D.get(e),getColumnQuery:e=>D.query(e),stickyIndices:B.value}),o=t==null||Math.abs(J.value-i)<1,c=e==null||Math.abs(Y.value-a)<1,l=t==null||t===void 0||k[t]===1,d=e==null||e===void 0||j[e]===1;o&&c?l&&d&&(M.value=null):X(e,t,s(r)?{...r,isCorrection:!0}:{align:r,isCorrection:!0})}};(0,e.watch)([O,b,x],pe),(0,e.watch)(h,e=>{e||pe()});let me=null,he=e=>{if(!e||typeof window>`u`)return;let t=e===window?document:e;if(t.addEventListener(`scroll`,$,{passive:!0}),e===window){b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight,r.value=window.scrollX,i.value=window.scrollY;let e=()=>{b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight,Q()};return window.addEventListener(`resize`,e),()=>{t.removeEventListener(`scroll`,$),window.removeEventListener(`resize`,e)}}else return b.value=e.clientWidth,x.value=e.clientHeight,r.value=e.scrollLeft,i.value=e.scrollTop,me=new ResizeObserver(t=>{for(let n of t)n.target===e&&(b.value=e.clientWidth,x.value=e.clientHeight,Q())}),me.observe(e),()=>{t.removeEventListener(`scroll`,$),me?.disconnect()}},ge;return(0,e.getCurrentInstance)()&&((0,e.onMounted)(()=>{y.value=!0,(0,e.watch)(()=>n.value.container,e=>{ge?.(),ge=he(e||null)},{immediate:!0}),Q(),n.value.ssrRange||n.value.initialScrollIndex!==void 0?(0,e.nextTick)(()=>{Q();let t=n.value.initialScrollIndex===void 0?n.value.ssrRange?.start:n.value.initialScrollIndex,r=n.value.initialScrollAlign||`start`;t!=null&&X(t,n.value.ssrRange?.colStart,{align:r,behavior:`auto`}),_.value=!0,v.value=!0,(0,e.nextTick)(()=>{v.value=!1})}):_.value=!0}),(0,e.onUnmounted)(()=>{ge?.()})),{renderedItems:se,totalWidth:K,totalHeight:q,scrollDetails:le,scrollToIndex:X,scrollToOffset:Z,stopProgrammaticScroll:ue,updateItemSize:fe,updateItemSizes:de,updateHostOffset:Q,columnRange:ce,getColumnWidth:ne,refresh:()=>{T.resize(0),E.resize(0),D.resize(0),k.fill(0),A.fill(0),j.fill(0),re()},isHydrated:_}}var x={key:0,class:`virtual-scroll-debug-info`},S=(0,e.defineComponent)({__name:`VirtualScroll`,props:{items:{},itemSize:{},direction:{default:`vertical`},bufferBefore:{default:5},bufferAfter:{default:5},container:{},ssrRange:{},columnCount:{default:0},columnWidth:{},containerTag:{default:`div`},wrapperTag:{default:`div`},itemTag:{default:`div`},scrollPaddingStart:{default:0},scrollPaddingEnd:{default:0},stickyHeader:{type:Boolean,default:!1},stickyFooter:{type:Boolean,default:!1},gap:{default:0},columnGap:{default:0},stickyIndices:{default:()=>[]},loadDistance:{default:200},loading:{type:Boolean,default:!1},restoreScrollOnPrepend:{type:Boolean,default:!1},initialScrollIndex:{},initialScrollAlign:{},defaultItemSize:{},defaultColumnWidth:{},debug:{type:Boolean,default:!1}},emits:[`scroll`,`load`,`visibleRangeChange`],setup(t,{expose:n,emit:r}){let a=t,o=r,s=(0,e.useSlots)(),c=(0,e.ref)(null),l=(0,e.ref)(null),u=(0,e.ref)(null),d=(0,e.ref)(null),f=new Map,p=(0,e.ref)(0),m=(0,e.ref)(0),g=(0,e.computed)(()=>{let e=a.container===void 0?c.value:a.container;return e===c.value||typeof window<`u`&&(e===window||e===null)}),_=(0,e.computed)(()=>{let e=a.scrollPaddingStart,t=a.scrollPaddingEnd;a.items.length;let n=typeof e==`object`?e.x||0:(a.direction===`horizontal`||a.direction===`both`)&&e||0,r=typeof e==`object`?e.y||0:(a.direction===`vertical`||a.direction===`both`)&&e||0,i=typeof t==`object`?t.x||0:(a.direction===`horizontal`||a.direction===`both`)&&t||0,o=typeof t==`object`?t.y||0:(a.direction===`vertical`||a.direction===`both`)&&t||0;return{items:a.items,itemSize:a.itemSize,direction:a.direction,bufferBefore:a.bufferBefore,bufferAfter:a.bufferAfter,container:a.container===void 0?c.value:a.container,hostElement:l.value,ssrRange:a.ssrRange,columnCount:a.columnCount,columnWidth:a.columnWidth,scrollPaddingStart:{x:n,y:r+(a.stickyHeader&&g.value?p.value:0)},scrollPaddingEnd:{x:i,y:o+(a.stickyFooter&&g.value?m.value:0)},gap:a.gap,columnGap:a.columnGap,stickyIndices:a.stickyIndices,loadDistance:a.loadDistance,loading:a.loading,restoreScrollOnPrepend:a.restoreScrollOnPrepend,initialScrollIndex:a.initialScrollIndex,initialScrollAlign:a.initialScrollAlign,defaultItemSize:a.defaultItemSize,defaultColumnWidth:a.defaultColumnWidth,debug:a.debug}}),{isHydrated:v,columnRange:y,renderedItems:S,scrollDetails:C,totalHeight:w,totalWidth:T,getColumnWidth:E,scrollToIndex:D,scrollToOffset:O,updateHostOffset:k,updateItemSizes:A,refresh:j,stopProgrammaticScroll:M}=b(_);function N(){j(),(0,e.nextTick)(()=>{let e=[];for(let[t,n]of f.entries())n&&e.push({index:t,inlineSize:n.offsetWidth,blockSize:n.offsetHeight,element:n});e.length>0&&A(e)})}(0,e.watch)(C,(e,t)=>{v.value&&(o(`scroll`,e),(!t||e.range.start!==t.range.start||e.range.end!==t.range.end||e.columnRange.start!==t.columnRange.start||e.columnRange.end!==t.columnRange.end)&&o(`visibleRangeChange`,{start:e.range.start,end:e.range.end,colStart:e.columnRange.start,colEnd:e.columnRange.end}),!a.loading&&(a.direction!==`horizontal`&&e.totalSize.height-(e.scrollOffset.y+e.viewportSize.height)<=a.loadDistance&&o(`load`,`vertical`),a.direction!==`vertical`&&e.totalSize.width-(e.scrollOffset.x+e.viewportSize.width)<=a.loadDistance&&o(`load`,`horizontal`)))}),(0,e.watch)(v,e=>{e&&o(`visibleRangeChange`,{start:C.value.range.start,end:C.value.range.end,colStart:C.value.columnRange.start,colEnd:C.value.columnRange.end})},{once:!0});let P=typeof window>`u`?null:new ResizeObserver(k),F=typeof window>`u`?null:new ResizeObserver(e=>{let t=[];for(let n of e){let e=n.target,r=Number(e.dataset.index),i=e.dataset.colIndex,a=n.contentRect.width,o=n.contentRect.height;n.borderBoxSize&&n.borderBoxSize.length>0?(a=n.borderBoxSize[0].inlineSize,o=n.borderBoxSize[0].blockSize):(a=e.offsetWidth,o=e.offsetHeight),i===void 0?Number.isNaN(r)||t.push({index:r,inlineSize:a,blockSize:o,element:e}):t.push({index:-1,inlineSize:a,blockSize:o,element:e})}t.length>0&&A(t)}),I=typeof window>`u`?null:new ResizeObserver(()=>{p.value=u.value?.offsetHeight||0,m.value=d.value?.offsetHeight||0,k()});(0,e.watch)(u,(e,t)=>{t&&I?.unobserve(t),e&&I?.observe(e)},{immediate:!0}),(0,e.watch)(d,(e,t)=>{t&&I?.unobserve(t),e&&I?.observe(e)},{immediate:!0}),(0,e.onMounted)(()=>{c.value&&P?.observe(c.value);for(let e of f.values())F?.observe(e),a.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>F?.observe(e))}),(0,e.watch)([c,l],([e],[t])=>{t&&P?.unobserve(t),e&&P?.observe(e)});function L(e,t){if(e)f.set(t,e),F?.observe(e),a.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>F?.observe(e));else{let e=f.get(t);e&&(F?.unobserve(e),a.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>F?.unobserve(e)),f.delete(t))}}function R(e){let{viewportSize:t,scrollOffset:n}=C.value,r=a.direction!==`vertical`,i=a.direction!==`horizontal`;switch(e.key){case`Home`:e.preventDefault(),M(),D(0,0,`start`);break;case`End`:{e.preventDefault(),M();let t=a.items.length-1,n=(a.columnCount||0)>0?a.columnCount-1:0;r?i?D(t,n,`end`):D(0,t,`end`):D(t,0,`end`);break}case`ArrowUp`:e.preventDefault(),M(),O(null,n.y-40);break;case`ArrowDown`:e.preventDefault(),M(),O(null,n.y+40);break;case`ArrowLeft`:e.preventDefault(),M(),O(n.x-40,null);break;case`ArrowRight`:e.preventDefault(),M(),O(n.x+40,null);break;case`PageUp`:e.preventDefault(),M(),O(!i&&r?n.x-t.width:null,i?n.y-t.height:null);break;case`PageDown`:e.preventDefault(),M(),O(!i&&r?n.x+t.width:null,i?n.y+t.height:null);break}}(0,e.onUnmounted)(()=>{P?.disconnect(),F?.disconnect(),I?.disconnect()});let z=(0,e.computed)(()=>i(a.container)),B=(0,e.computed)(()=>z.value?{...a.direction===`vertical`?{}:{whiteSpace:`nowrap`}}:a.containerTag===`table`?{minInlineSize:a.direction===`vertical`?`100%`:`auto`}:{...a.direction===`vertical`?{}:{whiteSpace:`nowrap`}}),ee=(0,e.computed)(()=>({inlineSize:a.direction===`vertical`?`100%`:`${T.value}px`,blockSize:a.direction===`horizontal`?`100%`:`${w.value}px`})),V=(0,e.computed)(()=>{let e=a.direction===`horizontal`;return{display:e?`inline-block`:`block`,...e?{blockSize:`100%`,verticalAlign:`top`}:{inlineSize:`100%`}}}),te=(0,e.computed)(()=>({inlineSize:a.direction===`vertical`?`1px`:`${T.value}px`,blockSize:a.direction===`horizontal`?`1px`:`${w.value}px`}));function H(e){return h({containerTag:a.containerTag,direction:a.direction,isHydrated:v.value,item:e,itemSize:a.itemSize,paddingStartX:_.value.scrollPaddingStart.x,paddingStartY:_.value.scrollPaddingStart.y})}let U=(0,e.computed)(()=>a.debug),W=(0,e.computed)(()=>a.containerTag===`table`),G=(0,e.computed)(()=>W.value?`thead`:`div`),K=(0,e.computed)(()=>W.value?`tfoot`:`div`);return n({scrollDetails:C,columnRange:y,getColumnWidth:E,scrollToIndex:D,scrollToOffset:O,refresh:N,stopProgrammaticScroll:M}),(n,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.containerTag),{ref_key:`hostRef`,ref:c,class:(0,e.normalizeClass)([`virtual-scroll-container`,[`virtual-scroll--${t.direction}`,{"virtual-scroll--hydrated":(0,e.unref)(v),"virtual-scroll--window":z.value,"virtual-scroll--table":W.value}]]),style:(0,e.normalizeStyle)(B.value),tabindex:`0`,onKeydown:R,onWheelPassive:(0,e.unref)(M),onPointerdownPassive:(0,e.unref)(M),onTouchstartPassive:(0,e.unref)(M)},{default:(0,e.withCtx)(()=>[s.header?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(G.value),{key:0,ref_key:`headerRef`,ref:u,class:(0,e.normalizeClass)([`virtual-scroll-header`,{"virtual-scroll--sticky":t.stickyHeader}])},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`header`,{},void 0,!0)]),_:3},8,[`class`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.wrapperTag),{ref_key:`wrapperRef`,ref:l,class:`virtual-scroll-wrapper`,style:(0,e.normalizeStyle)(ee.value)},{default:(0,e.withCtx)(()=>[W.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.itemTag),{key:0,class:`virtual-scroll-spacer`,style:(0,e.normalizeStyle)(te.value)},{default:(0,e.withCtx)(()=>[...r[0]||=[(0,e.createElementVNode)(`td`,{style:{padding:`0`,border:`none`,"block-size":`inherit`}},null,-1)]]),_:1},8,[`style`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(S),r=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.itemTag),{key:r.index,ref_for:!0,ref:e=>L(e,r.index),"data-index":r.index,class:(0,e.normalizeClass)([`virtual-scroll-item`,{"virtual-scroll--sticky":r.isStickyActive,"virtual-scroll--debug":U.value}]),style:(0,e.normalizeStyle)(H(r))},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`item`,{item:r.item,index:r.index,columnRange:(0,e.unref)(y),getColumnWidth:(0,e.unref)(E),isSticky:r.isSticky,isStickyActive:r.isStickyActive},void 0,!0),U.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,x,` #`+(0,e.toDisplayString)(r.index)+` (`+(0,e.toDisplayString)(Math.round(r.offset.x))+`, `+(0,e.toDisplayString)(Math.round(r.offset.y))+`) `,1)):(0,e.createCommentVNode)(``,!0)]),_:2},1032,[`data-index`,`class`,`style`]))),128))]),_:3},8,[`style`])),t.loading&&s.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:1,class:`virtual-scroll-loading`,style:(0,e.normalizeStyle)(V.value)},[(0,e.renderSlot)(n.$slots,`loading`,{},void 0,!0)],4)):(0,e.createCommentVNode)(``,!0),s.footer?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(K.value),{key:2,ref_key:`footerRef`,ref:d,class:(0,e.normalizeClass)([`virtual-scroll-footer`,{"virtual-scroll--sticky":t.stickyFooter}])},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`footer`,{},void 0,!0)]),_:3},8,[`class`])):(0,e.createCommentVNode)(``,!0)]),_:3},40,[`class`,`style`,`onWheelPassive`,`onPointerdownPassive`,`onTouchstartPassive`]))}}),C=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},w=C(S,[[`__scopeId`,`data-v-922485f2`]]);exports.DEFAULT_BUFFER=5,exports.DEFAULT_COLUMN_WIDTH=100,exports.DEFAULT_ITEM_SIZE=40,exports.FenwickTree=t,exports.VirtualScroll=w,exports.calculateColumnRange=f,exports.calculateItemPosition=m,exports.calculateItemStyle=h,exports.calculateRange=d,exports.calculateScrollTarget=u,exports.calculateStickyItem=p,exports.calculateTotalSize=g,exports.getPaddingX=c,exports.getPaddingY=l,exports.isBody=r,exports.isElement=a,exports.isScrollToIndexOptions=s,exports.isScrollableElement=o,exports.isWindow=n,exports.isWindowLike=i,exports.useVirtualScroll=b;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|