@pdanpdan/virtual-scroll 0.5.0 → 0.6.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 +73 -174
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +192 -348
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1691 -2198
- package/dist/index.mjs.map +1 -1
- package/dist/virtual-scroll.css +2 -1
- package/package.json +4 -2
- package/src/components/VirtualScroll.vue +25 -55
- package/src/composables/useVirtualScroll.ts +81 -145
- package/src/composables/useVirtualScrollbar.ts +5 -0
- package/src/index.ts +7 -0
- package/src/types.ts +132 -170
- package/src/utils/scroll.ts +31 -0
- package/src/utils/virtual-scroll-logic.ts +82 -49
- package/src/components/VirtualScroll.test.ts +0 -2332
- package/src/components/VirtualScrollbar.test.ts +0 -174
- package/src/composables/useVirtualScroll.test.ts +0 -1627
- package/src/composables/useVirtualScrollbar.test.ts +0 -526
- package/src/utils/fenwick-tree.test.ts +0 -134
- package/src/utils/scroll.test.ts +0 -174
- package/src/utils/virtual-scroll-logic.test.ts +0 -2850
package/README.md
CHANGED
|
@@ -2,26 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
A high-performance, flexible virtual scrolling component for Vue 3.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## What is it?
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`@pdanpdan/virtual-scroll` is a Vue 3 library designed to handle massive datasets with ease. Whether you have thousands or billions of items, it ensures smooth scrolling and minimal memory usage by only rendering what's visible on the screen.
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
* **DU (Display Units)**: The browser's physical coordinate system (limited to `BROWSER_MAX_SIZE`).
|
|
9
|
+
### The Problem it Solves
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
1. **Performance with Large Lists:** Rendering thousands of DOM elements simultaneously can slow down the browser, lead to high memory consumption, and cause "janky" scrolling.
|
|
12
|
+
2. **Browser Scroll Limits:** Most browsers have a maximum limit for the height/width of a scrollable element (typically around 10 to 30 million pixels). If your content exceeds this, it simply stops working or becomes buggy.
|
|
13
13
|
|
|
14
|
-
###
|
|
15
|
-
|
|
16
|
-
- **
|
|
17
|
-
- **
|
|
18
|
-
- **
|
|
19
|
-
- **Multi-Directional**: Works in `vertical`, `horizontal`, or `both` (grid) directions.
|
|
20
|
-
- **Container Flexibility**: Can use a custom element or the browser `window`/`body` as the scroll container.
|
|
21
|
-
- **SSR Support**: Built-in support for pre-rendering specific ranges for Server-Side Rendering.
|
|
22
|
-
- **Feature Rich**: Supports infinite scroll, loading states, sticky sections, headers, footers, buffers, and programmatic scrolling.
|
|
23
|
-
- **Scroll Restoration**: Automatically maintains scroll position when items are prepended to the list.
|
|
24
|
-
- **RTL Support**: Full support for Right-to-Left (RTL) layouts with automatic detection.
|
|
14
|
+
### Our Solution
|
|
15
|
+
|
|
16
|
+
- **Virtualization:** We only render the items currently in the viewport (plus a small buffer), keeping the DOM light and the UI responsive.
|
|
17
|
+
- **Coordinate Scaling:** To bypass browser scroll limits, we use a dual-coordinate system. We can virtually scroll through billions of pixels by scaling internal "Virtual Units" to "Display Units" within the browser's supported range.
|
|
18
|
+
- **1:1 Movement:** Unlike many other scaled virtual scroll implementations, we ensure that 1 pixel of movement on the wheel or touch results in exactly 1 pixel of movement in the viewport, maintaining a natural feel regardless of the scale.
|
|
25
19
|
|
|
26
20
|
## Installation
|
|
27
21
|
|
|
@@ -31,13 +25,11 @@ pnpm add @pdanpdan/virtual-scroll
|
|
|
31
25
|
|
|
32
26
|
## Usage Modes
|
|
33
27
|
|
|
34
|
-
The package provides
|
|
28
|
+
The package provides several ways to integrate the component into your project.
|
|
35
29
|
|
|
36
30
|
### 1. Compiled Component (Recommended)
|
|
37
31
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
**Important:** You must manually import the CSS file for styles to work.
|
|
32
|
+
Standard way for most modern bundlers (Vite, Webpack). You must manually import the CSS file.
|
|
41
33
|
|
|
42
34
|
```vue
|
|
43
35
|
<script setup>
|
|
@@ -49,12 +41,12 @@ import '@pdanpdan/virtual-scroll/style.css';
|
|
|
49
41
|
|
|
50
42
|
### 2. Original Vue SFC
|
|
51
43
|
|
|
52
|
-
|
|
44
|
+
Import the raw `.vue` file if you want to use your own Vue compiler configuration.
|
|
53
45
|
|
|
54
46
|
```vue
|
|
55
47
|
<script setup>
|
|
56
48
|
import VirtualScroll from '@pdanpdan/virtual-scroll/VirtualScroll.vue';
|
|
57
|
-
// No need to import CSS
|
|
49
|
+
// No need to import CSS separately
|
|
58
50
|
</script>
|
|
59
51
|
```
|
|
60
52
|
|
|
@@ -94,14 +86,37 @@ const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, label: `Item ${
|
|
|
94
86
|
</style>
|
|
95
87
|
```
|
|
96
88
|
|
|
97
|
-
##
|
|
89
|
+
## Technical Overview
|
|
98
90
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
91
|
+
### Scaled Virtual Scroll
|
|
92
|
+
|
|
93
|
+
To support massive datasets (billions of pixels) while staying within browser scroll limits, the library uses a dual-unit coordinate system:
|
|
94
|
+
|
|
95
|
+
* **VU (Virtual Units)**: The internal coordinate system representing the actual size of your content.
|
|
96
|
+
* **DU (Display Units)**: The browser's physical coordinate system (limited to `BROWSER_MAX_SIZE`).
|
|
97
|
+
|
|
98
|
+
The library automatically calculates a scaling factor and applies a specialized formula to ensure **1:1 movement** in the viewport during wheel and touch scrolling, while maintaining proportional positioning during scrollbar interaction.
|
|
99
|
+
|
|
100
|
+
### Core Rendering Rule
|
|
101
|
+
|
|
102
|
+
Items are rendered at their VU size and positioned using `translateY()` (or `translateX()` / `translate()`) based on the current display scroll position and their virtual offset. This prevents "jumping" and maintains sub-pixel precision even at extreme scales.
|
|
103
|
+
|
|
104
|
+
### Performance
|
|
105
|
+
|
|
106
|
+
- **Fenwick Tree:** Uses a Fenwick Tree (Binary Indexed Tree) for *O(log N)* prefix sum and point updates, allowing for extremely fast calculation of item offsets even in dynamic lists with millions of items.
|
|
107
|
+
- **ResizeObserver:** Automatically handles dynamic item sizes by measuring them when they change.
|
|
108
|
+
- **Style Isolation:** Uses CSS `@layer` for style isolation and `contain: layout` for improved rendering performance.
|
|
109
|
+
|
|
110
|
+
## Key Features
|
|
111
|
+
|
|
112
|
+
- **Dynamic & Fixed Sizes**: Supports uniform item sizes, variable sizes via function/array, or fully dynamic sizes via `ResizeObserver`.
|
|
113
|
+
- **Multi-Directional**: Works in `vertical`, `horizontal`, or `both` (grid) directions.
|
|
114
|
+
- **Virtual Scrollbars**: Optimized virtual scrollbars that handle massive scales and provide consistent cross-browser styling.
|
|
115
|
+
- **Container Flexibility**: Can use a custom element or the browser `window`/`body` as the scroll container.
|
|
116
|
+
- **SSR Support**: Built-in support for pre-rendering specific ranges for Server-Side Rendering.
|
|
117
|
+
- **Sticky Sections**: Support for sticky headers, footers, and indices.
|
|
118
|
+
- **Scroll Restoration**: Automatically maintains scroll position when items are prepended to the list.
|
|
119
|
+
- **RTL Support**: Full support for Right-to-Left layouts with automatic detection.
|
|
105
120
|
|
|
106
121
|
## Component Reference: VirtualScroll
|
|
107
122
|
|
|
@@ -110,41 +125,39 @@ const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, label: `Item ${
|
|
|
110
125
|
| Prop | Type | Default | Description |
|
|
111
126
|
|------|------|---------|-------------|
|
|
112
127
|
| `items` | `T[]` | Required | Array of items to be virtualized. |
|
|
113
|
-
| `itemSize` | `number
|
|
114
|
-
| `direction` | `'vertical'
|
|
128
|
+
| `itemSize` | `number | fn | null` | `40` | Fixed size or function. Pass `0`/`null` for dynamic. |
|
|
129
|
+
| `direction` | `'vertical' | 'horizontal' | 'both'` | `'vertical'` | Scroll direction. |
|
|
115
130
|
| `columnCount` | `number` | `0` | Number of columns for grid mode. |
|
|
116
|
-
| `columnWidth` | `num
|
|
131
|
+
| `columnWidth` | `num | num[] | fn | null` | `100` | Width for columns in grid mode. |
|
|
117
132
|
| `gap` / `columnGap` | `number` | `0` | Spacing between items/columns. |
|
|
118
133
|
| `stickyIndices` | `number[]` | `[]` | Indices of items that should remain sticky. |
|
|
119
134
|
| `stickyHeader` / `stickyFooter` | `boolean` | `false` | If true, measures and adds slot size to padding. |
|
|
135
|
+
| `ssrRange` | `object` | - | Range of items to pre-render for SSR. |
|
|
120
136
|
| `virtualScrollbar` | `boolean` | `false` | Whether to force virtual scrollbars. |
|
|
121
137
|
| `restoreScrollOnPrepend` | `boolean` | `false` | Maintain position when items added to top. |
|
|
122
|
-
| `container` | `HTMLElement
|
|
123
|
-
| `scrollPaddingStart` / `End` | `num
|
|
138
|
+
| `container` | `HTMLElement | Window` | `hostRef` | The scrollable container element. |
|
|
139
|
+
| `scrollPaddingStart` / `End` | `num | {x, y}` | `0` | Padding for scroll calculations. |
|
|
124
140
|
| `bufferBefore` / `bufferAfter` | `number` | `5` | Items to render outside the viewport. |
|
|
125
141
|
| `initialScrollIndex` | `number` | `undefined` | Index to jump to on mount. |
|
|
126
|
-
| `initialScrollAlign` | `
|
|
142
|
+
| `initialScrollAlign` | `'start' | 'center' | 'end' | 'auto'` | `'start'` | Alignment for initial jump. |
|
|
127
143
|
| `defaultItemSize` / `defaultColumnWidth` | `number` | `40 / 100` | Estimate for dynamic items/columns. |
|
|
144
|
+
| `debug` | `boolean` | `false` | Enable debug visualization. |
|
|
128
145
|
|
|
129
146
|
### Slots
|
|
130
147
|
|
|
131
|
-
- `item`: Scoped slot for individual items. Provides `item`, `index`, `columnRange`, `getColumnWidth`, `gap`, `columnGap`, `isSticky`, `isStickyActive`.
|
|
148
|
+
- `item`: Scoped slot for individual items. Provides `item`, `index`, `columnRange`, `getColumnWidth`, `gap`, `columnGap`, `isSticky`, `isStickyActive`, `isStickyActiveX`, `isStickyActiveY`, `offset`.
|
|
132
149
|
- `header` / `footer`: Content rendered at the top/bottom of the scrollable area.
|
|
133
150
|
- `loading`: Content shown at the end when `loading` prop is true.
|
|
134
151
|
- `scrollbar`: Scoped slot for custom scrollbar. Called once for each active axis.
|
|
135
152
|
- `axis`: `'vertical' | 'horizontal'`
|
|
136
153
|
- `positionPercent`: current position (0-1).
|
|
137
154
|
- `viewportPercent`: viewport percentage (0-1).
|
|
155
|
+
- `thumbSizePercent`: Calculated thumb size (0-100).
|
|
156
|
+
- `thumbPositionPercent`: Calculated thumb position (0-100).
|
|
138
157
|
- `trackProps`: Attributes/listeners for the track. Bind with `v-bind="trackProps"`.
|
|
139
158
|
- `thumbProps`: Attributes/listeners for the thumb. Bind with `v-bind="thumbProps"`.
|
|
140
159
|
- `scrollbarProps`: Grouped props for the `VirtualScrollbar` component.
|
|
141
|
-
|
|
142
|
-
- `totalSize`: virtual content size in pixels.
|
|
143
|
-
- `position`: current virtual scroll offset.
|
|
144
|
-
- `viewportSize`: virtual visible area size.
|
|
145
|
-
- `scrollToOffset`: `(offset: number) => void`
|
|
146
|
-
- `containerId`: unique ID of the container.
|
|
147
|
-
- `isRtl`: `boolean` (current RTL state).
|
|
160
|
+
- `isDragging`: Whether the thumb is currently being dragged.
|
|
148
161
|
|
|
149
162
|
### Exposed Members
|
|
150
163
|
|
|
@@ -152,11 +165,11 @@ The following properties and methods are available on the `VirtualScroll` compon
|
|
|
152
165
|
|
|
153
166
|
#### Properties
|
|
154
167
|
- **All Props**: All properties defined in [Props](#props) are available on the instance.
|
|
155
|
-
-
|
|
156
|
-
-
|
|
168
|
+
- `scrollDetails`: Full reactive state of the virtual scroll system.
|
|
169
|
+
- `columnRange`: Information about the current visible range of columns.
|
|
157
170
|
- `isHydrated`: `true` when the component is mounted and hydrated.
|
|
158
171
|
- `isRtl`: `true` if the container is in Right-to-Left mode.
|
|
159
|
-
-
|
|
172
|
+
- `scrollbarPropsVertical` / `scrollbarPropsHorizontal`: Reactive `ScrollbarSlotProps`.
|
|
160
173
|
- `scaleX` / `scaleY`: Current coordinate scaling factors (VU/DU).
|
|
161
174
|
- `renderedWidth` / `renderedHeight`: Physical dimensions in DOM (clamped, DU).
|
|
162
175
|
- `componentOffset`: Absolute offset of the component within its container (DU).
|
|
@@ -167,6 +180,9 @@ The following properties and methods are available on the `VirtualScroll` compon
|
|
|
167
180
|
- `refresh()`: Resets all measurements and state.
|
|
168
181
|
- `stopProgrammaticScroll()`: Halt smooth scroll animations.
|
|
169
182
|
- `updateDirection()`: Manually trigger direction detection.
|
|
183
|
+
- `updateHostOffset()`: Recalculate component position.
|
|
184
|
+
- `updateItemSize(index, w, h, el?)`: Register single measurement.
|
|
185
|
+
- `updateItemSizes(updates)`: Batch register measurements.
|
|
170
186
|
- `getRowHeight(index)`: Returns the calculated height of a row.
|
|
171
187
|
- `getColumnWidth(index)`: Returns the calculated width of a column.
|
|
172
188
|
- `getRowOffset(index)`: Returns the virtual offset of a row.
|
|
@@ -174,6 +190,15 @@ The following properties and methods are available on the `VirtualScroll` compon
|
|
|
174
190
|
- `getItemOffset(index)`: Returns the virtual offset of an item.
|
|
175
191
|
- `getItemSize(index)`: Returns the size of an item along the scroll axis.
|
|
176
192
|
|
|
193
|
+
## Sizing Guide
|
|
194
|
+
|
|
195
|
+
| Option Type | `itemSize` / `columnWidth` | Performance | Description |
|
|
196
|
+
|-------------|----------------------------|-------------|-------------|
|
|
197
|
+
| **Fixed** | `number` (e.g., `50`) | **Best** | Every item has the exact same size. Calculations are *O(1)*. |
|
|
198
|
+
| **Array** | `number[]` (cols only) | **Great** | Each column has a fixed size from the array (cycles if shorter). |
|
|
199
|
+
| **Function** | `(item, index) => number` | **Good** | Size is known but varies per item. |
|
|
200
|
+
| **Dynamic** | `0`, `null`, or `undefined` | **Fair** | Sizes are measured automatically via `ResizeObserver`. |
|
|
201
|
+
|
|
177
202
|
## Virtual Scrollbars
|
|
178
203
|
|
|
179
204
|
Virtual scrollbars are automatically enabled when content size exceeds browser limits, but can be forced via the `virtualScrollbar` prop.
|
|
@@ -235,8 +260,6 @@ The `scrollbar` slot provides everything needed to build a fully custom interfac
|
|
|
235
260
|
|
|
236
261
|
### CSS Variables for Default Scrollbar
|
|
237
262
|
|
|
238
|
-
The default scrollbar uses CSS `@layer components` for better isolation and customization.
|
|
239
|
-
|
|
240
263
|
| Variable | Default (Light/Dark) | Description |
|
|
241
264
|
|----------|-----------------|-------------|
|
|
242
265
|
| `--vs-scrollbar-bg` | `rgba(230,230,230,0.9) / rgba(30,30,30,0.9)` | Track background color. |
|
|
@@ -244,135 +267,11 @@ The default scrollbar uses CSS `@layer components` for better isolation and cust
|
|
|
244
267
|
| `--vs-scrollbar-thumb-hover-bg` | `rgba(0,0,0,0.6) / rgba(255,255,255,0.6)` | Thumb background on hover/active. |
|
|
245
268
|
| `--vs-scrollbar-size` | `8px` | Width/height of the scrollbar. |
|
|
246
269
|
| `--vs-scrollbar-radius` | `4px` | Border radius for track and thumb. |
|
|
247
|
-
| `--vs-scrollbar-cross-gap` | `var(--vs-scrollbar-size)` | Size of gap to use where scrollbars meet. |
|
|
248
|
-
| `--vs-scrollbar-has-cross-gap` | `0` | If gap should be shown where scrollbars meet. |
|
|
249
270
|
|
|
250
271
|
## Composables
|
|
251
272
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
Provides the core logic for virtualization.
|
|
255
|
-
|
|
256
|
-
```ts
|
|
257
|
-
/* eslint-disable unused-imports/no-unused-vars, no-undef */
|
|
258
|
-
const { renderedItems, scrollDetails, scrollToIndex } = useVirtualScroll(props);
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
### `useVirtualScrollbar`
|
|
262
|
-
|
|
263
|
-
Provides the logic for scrollbar interactions.
|
|
264
|
-
|
|
265
|
-
```ts
|
|
266
|
-
/* eslint-disable unused-imports/no-unused-vars, no-undef */
|
|
267
|
-
const { trackProps, thumbProps } = useVirtualScrollbar(props);
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
## Utility Functions
|
|
271
|
-
|
|
272
|
-
- **Type Guards**:
|
|
273
|
-
- `isElement(val: any): val is HTMLElement`: Checks if value is a standard `HTMLElement` (excludes `window`).
|
|
274
|
-
- `isWindow(val: any): val is Window`: Checks for the global `window` object.
|
|
275
|
-
- `isBody(val: any): val is HTMLElement`: Checks for the `document.body` element.
|
|
276
|
-
- `isWindowLike(val: any): boolean`: Returns `true` if the value is `window` or `body`.
|
|
277
|
-
- `isScrollableElement(val: any): val is HTMLElement | Window`: Checks if value has scroll properties.
|
|
278
|
-
- `isScrollToIndexOptions(val: any): val is ScrollToIndexOptions`: Type guard for scroll options.
|
|
279
|
-
- `getPaddingX(p: number | object, dir: string): number`: Internal helper for padding.
|
|
280
|
-
- `getPaddingY(p: number | object, dir: string): number`: Internal helper for padding.
|
|
281
|
-
- **Coordinate Mapping**:
|
|
282
|
-
- `displayToVirtual(displayPos, hostOffset, scale): number`: Display pixels to virtual pixels.
|
|
283
|
-
- `virtualToDisplay(virtualPos, hostOffset, scale): number`: Virtual pixels to display pixels.
|
|
284
|
-
- `isItemVisible(itemPos, itemSize, scrollPos, viewSize, stickyOffset?): boolean`: Check item visibility.
|
|
285
|
-
- `FenwickTree`: Highly efficient data structure for size and offset management.
|
|
286
|
-
- **Default Constants**:
|
|
287
|
-
- `BROWSER_MAX_SIZE`: 10,000,000 (coordinate scaling threshold).
|
|
288
|
-
- `DEFAULT_ITEM_SIZE`: 40px (default row height).
|
|
289
|
-
- `DEFAULT_COLUMN_WIDTH`: 100px (default column width).
|
|
290
|
-
- `DEFAULT_BUFFER`: 5 items (default buffer before/after).
|
|
291
|
-
|
|
292
|
-
## API Reference
|
|
293
|
-
|
|
294
|
-
### Types
|
|
295
|
-
|
|
296
|
-
#### `ScrollDirection`
|
|
297
|
-
Values: `'vertical' | 'horizontal' | 'both'`
|
|
298
|
-
|
|
299
|
-
#### `ScrollAxis`
|
|
300
|
-
Values: `'vertical' | 'horizontal'`
|
|
301
|
-
|
|
302
|
-
#### `ScrollAlignment`
|
|
303
|
-
Values: `'start' | 'center' | 'end' | 'auto'`
|
|
304
|
-
|
|
305
|
-
#### `ScrollToIndexOptions`
|
|
306
|
-
- `align`: `ScrollAlignment | ScrollAlignmentOptions`
|
|
307
|
-
- `behavior`: `'auto' | 'smooth'`
|
|
308
|
-
|
|
309
|
-
#### `ScrollAlignmentOptions`
|
|
310
|
-
- `x`: `ScrollAlignment`
|
|
311
|
-
- `y`: `ScrollAlignment`
|
|
312
|
-
|
|
313
|
-
#### `ScrollbarSlotProps`
|
|
314
|
-
- `positionPercent`: current position as a percentage (0 to 1).
|
|
315
|
-
- `viewportPercent`: viewport as a percentage of total size (0 to 1).
|
|
316
|
-
- `thumbSizePercent`: calculated thumb size as a percentage of the track (0 to 100).
|
|
317
|
-
- `thumbPositionPercent`: calculated thumb position as a percentage of the track (0 to 100).
|
|
318
|
-
- `trackProps`: attributes/listeners for track. Bind with `v-bind="trackProps"`.
|
|
319
|
-
- `thumbProps`: attributes/listeners for thumb. Bind with `v-bind="thumbProps"`.
|
|
320
|
-
- `scrollbarProps`: grouped props for `VirtualScrollbar` component.
|
|
321
|
-
- `axis`: `'vertical' | 'horizontal'`
|
|
322
|
-
- `totalSize`: virtual content size in pixels.
|
|
323
|
-
- `position`: current virtual scroll offset.
|
|
324
|
-
- `viewportSize`: virtual visible area size.
|
|
325
|
-
- `scrollToOffset`: `(offset: number) => void`
|
|
326
|
-
- `containerId`: unique ID of the container.
|
|
327
|
-
- `isRtl`: `boolean`
|
|
328
|
-
- `isDragging`: whether the scrollbar thumb is currently being dragged.
|
|
329
|
-
|
|
330
|
-
#### `ScrollDetails`
|
|
331
|
-
- `items`: `RenderedItem<T>[]`
|
|
332
|
-
- `currentIndex`: number (first visible row index below header)
|
|
333
|
-
- `currentColIndex`: number (first visible column index after sticky)
|
|
334
|
-
- `currentEndIndex`: number
|
|
335
|
-
- `currentEndColIndex`: number
|
|
336
|
-
- `scrollOffset`: `{ x, y }` (VU)
|
|
337
|
-
- `displayScrollOffset`: `{ x, y }` (DU)
|
|
338
|
-
- `viewportSize`: `{ width, height }` (VU)
|
|
339
|
-
- `displayViewportSize`: `{ width, height }` (DU)
|
|
340
|
-
- `totalSize`: `{ width, height }` (VU)
|
|
341
|
-
- `isScrolling`: boolean
|
|
342
|
-
- `isProgrammaticScroll`: boolean
|
|
343
|
-
- `range`: `{ start, end }`
|
|
344
|
-
- `columnRange`: `ColumnRange`
|
|
345
|
-
|
|
346
|
-
#### `ColumnRange`
|
|
347
|
-
- `start`: number
|
|
348
|
-
- `end`: number
|
|
349
|
-
- `padStart`: number (VU)
|
|
350
|
-
- `padEnd`: number (VU)
|
|
351
|
-
|
|
352
|
-
#### `RenderedItem`
|
|
353
|
-
- `item`: `T`
|
|
354
|
-
- `index`: number
|
|
355
|
-
- `offset`: `{ x, y }` (DU)
|
|
356
|
-
- `size`: `{ width, height }` (VU)
|
|
357
|
-
- `originalX` / `originalY`: number (VU)
|
|
358
|
-
- `isSticky`: boolean
|
|
359
|
-
- `isStickyActive`: boolean
|
|
360
|
-
- `stickyOffset`: `{ x, y }` (DU)
|
|
361
|
-
|
|
362
|
-
### Methods
|
|
363
|
-
|
|
364
|
-
The following methods are exposed by the `VirtualScroll` component and the `useVirtualScroll` composable:
|
|
365
|
-
|
|
366
|
-
- `scrollToIndex(rowIndex, colIndex, options)`: Ensures a specific item is visible.
|
|
367
|
-
- `scrollToOffset(x, y, options)`: Scrolls to an absolute pixel position.
|
|
368
|
-
- `refresh()`: Resets all dynamic measurements and state.
|
|
369
|
-
- `getRowHeight(index)` / `getColumnWidth(index)`: Returns calculated sizes.
|
|
370
|
-
- `updateItemSize` / `updateItemSizes`: Manually registers new measurements.
|
|
371
|
-
- `updateHostOffset()`: Recalculates the component's relative position.
|
|
372
|
-
- `updateDirection()`: Manually triggers RTL/LTR detection.
|
|
373
|
-
- `stopProgrammaticScroll()`: Halts any active smooth scroll animation.
|
|
374
|
-
|
|
375
|
-
For detailed type definitions and utility functions, see the [Full API Reference](https://pdandev.github.io/virtual-scroll/docs).
|
|
273
|
+
- `useVirtualScroll(props)`: Core logic for virtualization.
|
|
274
|
+
- `useVirtualScrollbar(props)`: Logic for scrollbar interactions.
|
|
376
275
|
|
|
377
276
|
## License
|
|
378
277
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue");class Ct{tree;values;constructor(e){this.tree=new Float64Array(e+1),this.values=new Float64Array(e)}update(e,r){if(!(e<0||e>=this.values.length))for(this.values[e]=this.values[e]+r,e++;e<this.tree.length;)this.tree[e]=this.tree[e]+r,e+=e&-e}query(e){let r=0;for(;e>0;)r+=this.tree[e]||0,e-=e&-e;return r}set(e,r){e<0||e>=this.values.length||(this.values[e]=r)}get length(){return this.values.length}get(e){return this.values[e]||0}getValues(){return this.values}findLowerBound(e){let r=0;const l=this.tree.length;let s=1<<Math.floor(Math.log2(l-1));for(;s>0;){const d=r+s;if(d<l){const S=this.tree[d]||0;S<=e&&(r=d,e-=S)}s>>=1}return r}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++){const r=e+(e&-e);r<this.tree.length&&(this.tree[r]=this.tree[r]+this.tree[e])}}resize(e){if(e===this.values.length)return;const r=new Float64Array(e);r.set(this.values.subarray(0,Math.min(e,this.values.length))),this.values=r,this.tree=new Float64Array(e+1),this.rebuild()}shift(e){if(e===0)return;const r=this.values.length,l=new Float64Array(r);e>0?l.set(this.values.subarray(0,Math.min(r-e,this.values.length)),e):l.set(this.values.subarray(-e)),this.values=l,this.rebuild()}}const ot=1e7;function Ut(n){return n===null||n===document.documentElement||typeof window<"u"&&n===window}function _t(n){return n!=null&&typeof n=="object"&&"tagName"in n&&n.tagName==="BODY"}function jt(n){return Ut(n)||_t(n)}function Rt(n){return n!=null&&"getBoundingClientRect"in n}function Et(n){return n!=null&&"scrollLeft"in n}function nt(n){return typeof n=="object"&&n!=null&&("align"in n||"behavior"in n||"isCorrection"in n)}function Ue(n,e){return typeof n=="object"&&n!==null?n.x||0:(e==="horizontal"||e==="both")&&n||0}function _e(n,e){return typeof n=="object"&&n!==null?n.y||0:(e==="vertical"||e==="both")&&n||0}function Qt({scrollPos:n,containerSize:e,count:r,bufferBefore:l,bufferAfter:s,gap:d,fixedSize:S,findLowerBound:b,query:g}){let z=0,h=r;const T=n+e;if(S!==null){const w=S+d;z=Math.floor(n/w),h=Math.ceil(T/w)}else z=b(n),h=b(T),h<r&&g(h)<T&&h++;return{start:Math.max(0,z-l),end:Math.min(r,h+s)}}function $t(n,e){let r=0,l=n.length-1,s;for(;r<=l;){const d=r+l>>>1;n[d]>e?(s=n[d],l=d-1):r=d+1}return s}function Dt(n,e){let r=0,l=n.length-1,s;for(;r<=l;){const d=r+l>>>1;n[d]<e?(s=n[d],r=d+1):l=d-1}return s}function ol({align:n,targetPos:e,itemSize:r,scrollPos:l,viewSize:s,stickyOffsetStart:d,stickyOffsetEnd:S}){const b=e-d,g=e-(s-S-r);if(n==="start")return{target:b,effectiveAlign:"start"};if(n==="center")return{target:e-d-(s-d-S-r)/2,effectiveAlign:"center"};if(n==="end")return{target:g,effectiveAlign:"end"};if(Zt(e,r,l,s,d,S))return{target:l,effectiveAlign:"auto"};const z=s-d-S;return r<=z?e<l+d?{target:b,effectiveAlign:"start"}:{target:g,effectiveAlign:"end"}:Math.abs(b-l)<Math.abs(g-l)?{target:b,effectiveAlign:"start"}:{target:g,effectiveAlign:"end"}}function ht(n,e,r,l){return n<=0?0:e!==null?Math.max(0,n*(e+r)-r):Math.max(0,l(n)-r)}function Ft({index:n,align:e,viewSize:r,scrollPos:l,fixedSize:s,gap:d,query:S,getSize:b,stickyIndices:g,stickyStart:z,stickyEnd:h=0}){let T=z;if(g&&g.length>0){const Y=Dt(g,n);Y!==void 0&&(T+=ht(1,s,0,()=>b(Y)))}const w=s!==null?n*(s+d):S(n),q=s!==null?s:b(n)-d,{target:R,effectiveAlign:C}=ol({align:e,targetPos:w,itemSize:q,scrollPos:l,viewSize:r,stickyOffsetStart:T,stickyOffsetEnd:h});return{target:R,itemSize:q,effectiveAlign:C}}function Zt(n,e,r,l,s=0,d=0){const S=r+s,b=r+l-d,g=l-s-d;return e<=g?n>=S-.5&&n+e<=b+.5:n<=S+.5&&n+e>=b-.5}function Ke(n,e,r){return(n-e)*r}function mt(n,e,r){return n/r+e}function Wt({rowIndex:n,colIndex:e,options:r,direction:l,viewportWidth:s,viewportHeight:d,totalWidth:S,totalHeight:b,gap:g,columnGap:z,fixedSize:h,fixedWidth:T,relativeScrollX:w,relativeScrollY:q,getItemSizeY:R,getItemSizeX:C,getItemQueryY:Y,getItemQueryX:$,getColumnSize:L,getColumnQuery:M,scaleX:E,scaleY:B,hostOffsetX:P,hostOffsetY:x,stickyIndices:W,stickyStartX:D=0,stickyStartY:Z=0,stickyEndX:Q=0,stickyEndY:K=0,flowPaddingStartX:X=0,flowPaddingStartY:ie=0,paddingStartX:ve=0,paddingStartY:G=0,paddingEndX:te=0,paddingEndY:Ae=0}){let re;nt(r)?re=r.align:re=r;const st=(re&&typeof re=="object"?re.x:re)||"auto",ee=(re&&typeof re=="object"?re.y:re)||"auto";let ze=w,se=q,qe=0,le=0,Ee="auto",oe="auto";const ke=E===1?S:ot,de=B===1?b:ot,Fe=Math.max(0,P+ke-s),ge=Math.max(0,x+de-d),Se=(Fe-P)*E,pe=(ge-x)*B,De=X+D+ve,Je=ie+Z+G;if(n!=null){const ae=Ft({index:n,align:ee,viewSize:d,scrollPos:q,fixedSize:h,gap:g,query:Y,getSize:R,stickyIndices:W,stickyStart:Z+G,stickyEnd:K+Ae});se=ae.target+Je,le=ae.itemSize,oe=ae.effectiveAlign}if(e!=null){const ae=l==="both",Pe=Ft({index:e,align:st,viewSize:s,scrollPos:w,fixedSize:ae?T:h,gap:ae||l==="horizontal"?z:g,query:ae?M:$,getSize:ae?L:C,stickyIndices:W,stickyStart:D+ve,stickyEnd:Q+te});ze=Pe.target+De,qe=Pe.itemSize,Ee=Pe.effectiveAlign}return ze=Math.max(0,Math.min(ze,Se)),se=Math.max(0,Math.min(se,pe)),{targetX:ze,targetY:se,itemWidth:qe,itemHeight:le,effectiveAlignX:Ee,effectiveAlignY:oe}}function Kt({direction:n,relativeScrollX:e,relativeScrollY:r,usableWidth:l,usableHeight:s,itemsLength:d,bufferBefore:S,bufferAfter:b,gap:g,columnGap:z,fixedSize:h,findLowerBoundY:T,findLowerBoundX:w,queryY:q,queryX:R}){const C=n==="vertical"||n==="both";return Qt({scrollPos:C?r:e,containerSize:C?s:l,count:d,bufferBefore:S,bufferAfter:b,gap:C?g:z,fixedSize:h,findLowerBound:C?T:w,query:C?q:R})}function Jt({columnCount:n,relativeScrollX:e,usableWidth:r,colBuffer:l,fixedWidth:s,columnGap:d,findLowerBound:S,query:b,totalColsQuery:g}){if(!n)return{start:0,end:0,padStart:0,padEnd:0};const{start:z,end:h}=Qt({scrollPos:e,containerSize:r,count:n,bufferBefore:l,bufferAfter:l,gap:d,fixedSize:s,findLowerBound:S,query:b}),T=z,w=h,q=s!==null?T*(s+d):b(T),R=s!==null?n*(s+d)-d:Math.max(0,g()-d),C=s!==null?w*(s+d)-(w>0?d:0):b(w)-(w>0?d:0);return{start:T,end:w,padStart:q,padEnd:Math.max(0,R-C)}}function el({index:n,isSticky:e,direction:r,relativeScrollX:l,relativeScrollY:s,originalX:d,originalY:S,width:b,height:g,stickyIndices:z,fixedSize:h,fixedWidth:T,gap:w,columnGap:q,getItemQueryY:R,getItemQueryX:C}){let Y=!1;const $={x:0,y:0};if(!e)return{isStickyActive:Y,stickyOffset:$};if((r==="vertical"||r==="both")&&s>S){const L=$t(z,n);if(L!==void 0){const M=h!==null?L*(h+w):R(L);s>=M?Y=!1:(Y=!0,$.y=Math.max(0,Math.min(g,M-s))-g)}else Y=!0}if((r==="horizontal"||r==="both"&&!Y)&&l>d){const L=$t(z,n);if(L!==void 0){const M=r==="horizontal"?h!==null?L*(h+q):C(L):T!==null?L*(T+q):C(L);l>=M?Y=!1:(Y=!0,$.x=Math.max(0,Math.min(b,M-l))-b)}else Y=!0}return{isStickyActive:Y,stickyOffset:$}}function tl({index:n,direction:e,fixedSize:r,gap:l,columnGap:s,usableWidth:d,usableHeight:S,totalWidth:b,queryY:g,queryX:z,getSizeY:h,getSizeX:T,columnRange:w}){let q=0,R=0,C=0,Y=0;return e==="horizontal"?(q=r!==null?n*(r+s):z(n),C=r!==null?r:T(n)-s,Y=S):e==="both"&&w?(R=r!==null?n*(r+l):g(n),Y=r!==null?r:h(n)-l,q=w.padStart,C=Math.max(0,b-w.padStart-w.padEnd)):(R=r!==null?n*(r+l):g(n),Y=r!==null?r:h(n)-l,C=e==="both"?b:d),{height:Y,width:C,x:q,y:R}}function ll({item:n,direction:e,itemSize:r,containerTag:l,paddingStartX:s,paddingStartY:d,isHydrated:S,isRtl:b}){const g=e==="vertical",z=e==="horizontal",h=e==="both",T=r==null||r===0,w={blockSize:z?"100%":T?"auto":`${n.size.height}px`};if(g&&l==="table"?w.minInlineSize="100%":w.inlineSize=g?"100%":T?"auto":`${n.size.width}px`,T&&(g||(w.minInlineSize="1px"),z||(w.minBlockSize="1px")),S){const q=b?-(n.isStickyActive?n.stickyOffset.x:n.offset.x):n.isStickyActive?n.stickyOffset.x:n.offset.x;n.isStickyActive?((g||h)&&(w.insetBlockStart=`${d}px`),(z||h)&&(w.insetInlineStart=`${s}px`),w.transform=`translate(${q}px, ${n.stickyOffset.y}px)`):w.transform=`translate(${q}px, ${n.offset.y}px)`}return w}function al({direction:n,itemsLength:e,columnCount:r,fixedSize:l,fixedWidth:s,gap:d,columnGap:S,usableWidth:b,usableHeight:g,queryY:z,queryX:h,queryColumn:T}){const w=n==="both",q=n==="horizontal";let R=0,C=0;return w?(R=ht(r,s,S,T),C=ht(e,l,d,z)):q?(R=ht(e,l,S,h),C=g):(R=b,C=ht(e,l,d,z)),{width:w?Math.max(R,b):R,height:w?Math.max(C,g):C}}const gt=40,pt=100,Vt=5;function nl(n){const e=t.computed(()=>t.toValue(n)),r=t.ref(0),l=t.ref(0),s=t.ref(!1),d=t.ref(!1),S=t.ref(!1),b=t.ref(!1),g=t.ref(!1),z=t.ref(0),h=t.ref(0),T=t.reactive({x:0,y:0}),w=t.reactive({x:0,y:0});let q;const R=t.ref(!1),C=t.ref(0),Y=t.ref(0);let $=null;const L=()=>{if(typeof window>"u")return;const a=e.value.container||e.value.hostRef||window,u=Rt(a)?a:document.documentElement;(!$||!("direction"in $))&&($=window.getComputedStyle(u));const i=$.direction==="rtl";g.value!==i&&(g.value=i)},M=new Ct(e.value.items?.length||0),E=new Ct(e.value.items?.length||0),B=new Ct(e.value.columnCount||0),P=t.ref(0);let x=new Uint8Array(0),W=new Uint8Array(0),D=new Uint8Array(0);const Z=t.ref(null),Q=t.ref(!1);let K=[];const X=t.computed(()=>["vertical","horizontal","both"].includes(e.value.direction)?e.value.direction:"vertical"),ie=t.computed(()=>e.value.itemSize===void 0||e.value.itemSize===null||e.value.itemSize===0),ve=t.computed(()=>e.value.columnWidth===void 0||e.value.columnWidth===null||e.value.columnWidth===0),G=t.computed(()=>typeof e.value.itemSize=="number"&&e.value.itemSize>0?e.value.itemSize:null),te=t.computed(()=>typeof e.value.columnWidth=="number"&&e.value.columnWidth>0?e.value.columnWidth:null),Ae=t.computed(()=>e.value.defaultItemSize||G.value||gt),re=t.computed(()=>[...e.value.stickyIndices||[]].sort((a,u)=>a-u)),st=t.computed(()=>new Set(re.value)),ee=t.computed(()=>Ue(e.value.scrollPaddingStart,e.value.direction)),ze=t.computed(()=>Ue(e.value.scrollPaddingEnd,e.value.direction)),se=t.computed(()=>_e(e.value.scrollPaddingStart,e.value.direction)),qe=t.computed(()=>_e(e.value.scrollPaddingEnd,e.value.direction)),le=t.computed(()=>Ue(e.value.stickyStart,e.value.direction)),Ee=t.computed(()=>Ue(e.value.stickyEnd,e.value.direction)),oe=t.computed(()=>_e(e.value.stickyStart,e.value.direction)),ke=t.computed(()=>_e(e.value.stickyEnd,e.value.direction)),de=t.computed(()=>Ue(e.value.flowPaddingStart,e.value.direction)),Fe=t.computed(()=>Ue(e.value.flowPaddingEnd,e.value.direction)),ge=t.computed(()=>_e(e.value.flowPaddingStart,e.value.direction)),Se=t.computed(()=>_e(e.value.flowPaddingEnd,e.value.direction)),pe=t.computed(()=>z.value-(X.value!=="vertical"?le.value+Ee.value:0)),De=t.computed(()=>h.value-(X.value!=="horizontal"?oe.value+ke.value:0)),Je=t.computed(()=>{if(P.value,!d.value&&e.value.ssrRange&&!b.value){const{start:a=0,end:u=0,colStart:i=0,colEnd:f=0}=e.value.ssrRange,p=e.value.columnCount||0,y=e.value.gap||0,V=e.value.columnGap||0;let F=0,m=0;if(X.value==="both"){if(p>0){const I=f||p,N=B.query(I)-B.query(i);F=Math.max(0,N-(I>i?V:0))}if(G.value!==null){const I=u-a;m=Math.max(0,I*(G.value+y)-(I>0?y:0))}else{const I=E.query(u)-E.query(a);m=Math.max(0,I-(u>a?y:0))}}else if(X.value==="horizontal"){if(G.value!==null){const I=u-a;F=Math.max(0,I*(G.value+V)-(I>0?V:0))}else{const I=M.query(u)-M.query(a);F=Math.max(0,I-(u>a?V:0))}m=De.value}else if(F=pe.value,G.value!==null){const I=u-a;m=Math.max(0,I*(G.value+y)-(I>0?y:0))}else{const I=E.query(u)-E.query(a);m=Math.max(0,I-(u>a?y:0))}return{width:Math.max(F,pe.value),height:Math.max(m,De.value)}}return al({direction:X.value,itemsLength:e.value.items.length,columnCount:e.value.columnCount||0,fixedSize:G.value,fixedWidth:te.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,usableWidth:pe.value,usableHeight:De.value,queryY:a=>E.query(a),queryX:a=>M.query(a),queryColumn:a=>B.query(a)})}),ae=t.computed(()=>jt(e.value.container)),Xe=t.computed(()=>Je.value.width+ee.value+ze.value),Pe=t.computed(()=>Je.value.height+se.value+qe.value),Be=t.computed(()=>de.value+le.value+Ee.value+Fe.value+Xe.value),we=t.computed(()=>ge.value+oe.value+ke.value+Se.value+Pe.value),ye=t.reactive({x:t.computed(()=>Math.max(0,T.x-(de.value+le.value))),y:t.computed(()=>Math.max(0,T.y-(ge.value+oe.value)))}),et=t.computed(()=>ae.value?Be.value:Math.min(Be.value,ot)),je=t.computed(()=>ae.value?we.value:Math.min(we.value,ot)),ct=t.computed(()=>ae.value?Xe.value:Math.max(0,et.value-(de.value+le.value+Ee.value+Fe.value))),ne=t.computed(()=>ae.value?Pe.value:Math.max(0,je.value-(ge.value+oe.value+ke.value+Se.value))),fe=t.computed(()=>{if(ae.value||Be.value<=ot)return 1;const a=Be.value-z.value,u=et.value-z.value;return u>0?a/u:1}),Te=t.computed(()=>{if(ae.value||we.value<=ot)return 1;const a=we.value-h.value,u=je.value-h.value;return u>0?a/u:1}),Me=t.computed(()=>{if(X.value==="vertical")return 0;const a=de.value+le.value+ee.value;return C.value-a}),He=t.computed(()=>{if(X.value==="horizontal")return 0;const a=ge.value+oe.value+se.value;return Y.value-a}),Tt=a=>{P.value;const u=e.value.columnGap||0,i=e.value.columnWidth;if(typeof i=="number"&&i>0)return i;if(Array.isArray(i)&&i.length>0){const p=i[a%i.length];return p!=null&&p>0?p:e.value.defaultColumnWidth||pt}if(typeof i=="function")return i(a);const f=B.get(a);return f>0?f-u:e.value.defaultColumnWidth||pt},yt=a=>{if(P.value,X.value==="horizontal")return De.value;const u=e.value.gap||0,i=e.value.itemSize;if(typeof i=="number"&&i>0)return i;if(typeof i=="function"){const p=e.value.items[a];return p!==void 0?i(p,a):e.value.defaultItemSize||gt}const f=E.get(a);return f>0?f-u:e.value.defaultItemSize||gt};function it(a,u,i){const f=typeof i=="object"&&i!==null&&"isCorrection"in i?i.isCorrection:!1,p=e.value.container||window,{targetX:y,targetY:V,effectiveAlignX:F,effectiveAlignY:m}=Wt({rowIndex:a,colIndex:u,options:i,direction:X.value,viewportWidth:z.value,viewportHeight:h.value,totalWidth:Be.value,totalHeight:we.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,fixedSize:G.value,fixedWidth:te.value,relativeScrollX:Me.value,relativeScrollY:He.value,getItemSizeY:k=>E.get(k),getItemSizeX:k=>M.get(k),getItemQueryY:k=>E.query(k),getItemQueryX:k=>M.query(k),getColumnSize:k=>B.get(k),getColumnQuery:k=>B.query(k),scaleX:fe.value,scaleY:Te.value,hostOffsetX:ye.x,hostOffsetY:ye.y,stickyIndices:re.value,stickyStartX:le.value,stickyStartY:oe.value,stickyEndX:Ee.value,stickyEndY:ke.value,flowPaddingStartX:de.value,flowPaddingStartY:ge.value,flowPaddingEndX:Fe.value,flowPaddingEndY:Se.value,paddingStartX:ee.value,paddingStartY:se.value,paddingEndX:ze.value,paddingEndY:qe.value});if(!f){const k=nt(i)?i.behavior:void 0;Z.value={rowIndex:a,colIndex:u,options:{align:{x:F,y:m},...k!=null?{behavior:k}:{}}}}const I=mt(y,ye.x,fe.value),N=mt(V,ye.y,Te.value),H=g.value?-I:I,J=N;let Ie;nt(i)&&(Ie=i.behavior);const U=f?"auto":Ie||"smooth";if(R.value=!0,typeof window<"u"&&p===window)window.scrollTo({left:u==null?void 0:g.value?H:Math.max(0,H),top:a==null?void 0:Math.max(0,J),behavior:U});else if(Et(p)){const k={behavior:U};u!=null&&(k.left=g.value?H:Math.max(0,H)),a!=null&&(k.top=Math.max(0,J)),typeof p.scrollTo=="function"?p.scrollTo(k):(k.left!==void 0&&(p.scrollLeft=k.left),k.top!==void 0&&(p.scrollTop=k.top))}if((U==="auto"||U===void 0)&&(u!=null&&(r.value=g.value?H:Math.max(0,H),C.value=y),a!=null&&(l.value=Math.max(0,J),Y.value=V),Z.value)){const k=Z.value.options;nt(k)?k.behavior="auto":Z.value.options={align:k,behavior:"auto"}}}const Ne=(a,u,i)=>{const f=e.value.container||window;R.value=!0,Z.value=null;const p=a!=null?Math.max(0,Math.min(a,Be.value-z.value)):null,y=u!=null?Math.max(0,Math.min(u,we.value-h.value)):null;p!==null&&(C.value=p),y!==null&&(Y.value=y);const V=typeof window<"u"&&f===window?window.scrollX:f.scrollLeft,F=typeof window<"u"&&f===window?window.scrollY:f.scrollTop,m=p!==null?mt(p,ye.x,fe.value):null,I=y!==null?mt(y,ye.y,Te.value):null,N=m!==null?g.value?-m:m:V,H=I!==null?I:F;if(typeof window<"u"&&f===window)window.scrollTo({left:a!=null?N:void 0,top:u!=null?H:void 0,behavior:i?.behavior||"auto"});else if(Et(f)){const J={behavior:i?.behavior||"auto"};a!=null&&(J.left=N),u!=null&&(J.top=H),typeof f.scrollTo=="function"?f.scrollTo(J):(J.left!==void 0&&(f.scrollLeft=J.left),J.top!==void 0&&(f.scrollTop=J.top))}(i?.behavior==="auto"||i?.behavior===void 0)&&(a!=null&&(r.value=N),u!=null&&(l.value=H))},Yt=(a,u)=>{if(M.resize(a),E.resize(a),B.resize(u),W.length!==a){const i=new Uint8Array(a);i.set(W.subarray(0,Math.min(a,W.length))),W=i}if(D.length!==a){const i=new Uint8Array(a);i.set(D.subarray(0,Math.min(a,D.length))),D=i}if(x.length!==u){const i=new Uint8Array(u);i.set(x.subarray(0,Math.min(u,x.length))),x=i}},tt=()=>{const u=e.value.items.length,i=e.value.columnCount||0,f=e.value.gap||0,p=e.value.columnGap||0,y=e.value.columnWidth;let V=!1,F=!1;if(i>0)for(let m=0;m<i;m++){const I=B.get(m),N=x[m]===1;if(!ve.value||!N&&I===0){let H=0;typeof y=="number"&&y>0?H=y:Array.isArray(y)&&y.length>0?H=y[m%y.length]||e.value.defaultColumnWidth||pt:typeof y=="function"?H=y(m):H=e.value.defaultColumnWidth||pt;const J=H+p;Math.abs(I-J)>.5?(B.set(m,J),x[m]=ve.value?0:1,V=!0):ve.value||(x[m]=1)}}for(let m=0;m<u;m++){const I=e.value.items[m],N=M.get(m),H=E.get(m),J=W[m]===1,Ie=D[m]===1;if(X.value==="horizontal"){if(!ie.value||!J&&N===0){const k=(typeof e.value.itemSize=="function"?e.value.itemSize(I,m):Ae.value)+p;Math.abs(N-k)>.5?(M.set(m,k),W[m]=ie.value?0:1,F=!0):ie.value||(W[m]=1)}}else N!==0&&(M.set(m,0),W[m]=0,F=!0);if(X.value!=="horizontal"){if(!ie.value||!Ie&&H===0){const k=(typeof e.value.itemSize=="function"?e.value.itemSize(I,m):Ae.value)+f;Math.abs(H-k)>.5?(E.set(m,k),D[m]=ie.value?0:1,F=!0):ie.value||(D[m]=1)}}else H!==0&&(E.set(m,0),D[m]=0,F=!0)}V&&B.rebuild(),F&&(M.rebuild(),E.rebuild())},Qe=()=>{const a=e.value.items,u=a.length,i=e.value.columnCount||0;Yt(u,i);let f=0;if(e.value.restoreScrollOnPrepend&&K.length>0&&u>K.length){const p=K[0];if(p!==void 0){for(let y=1;y<=u-K.length;y++)if(a[y]===p){f=y;break}}}if(f>0){M.shift(f),E.shift(f),Z.value&&Z.value.rowIndex!==null&&Z.value.rowIndex!==void 0&&(Z.value.rowIndex+=f);const p=new Uint8Array(u),y=new Uint8Array(u);p.set(W.subarray(0,Math.min(u-f,W.length)),f),y.set(D.subarray(0,Math.min(u-f,D.length)),f),W=p,D=y;const V=e.value.gap||0,F=e.value.columnGap||0;let m=0,I=0;for(let N=0;N<f;N++){const H=typeof e.value.itemSize=="function"?e.value.itemSize(a[N],N):Ae.value;X.value==="horizontal"?m+=H+F:I+=H+V}(m>0||I>0)&&t.nextTick(()=>{Ne(m>0?Me.value+m:null,I>0?He.value+I:null,{behavior:"auto"})})}tt(),K=[...a],Q.value=!0,P.value++},We=()=>{if(typeof window>"u")return;const a=e.value.container||window,u=i=>{const f=i.getBoundingClientRect();if(a===window)return{x:g.value?document.documentElement.clientWidth-f.right-window.scrollX:f.left+window.scrollX,y:f.top+window.scrollY};if(a===i)return{x:0,y:0};if(Rt(a)){const p=a.getBoundingClientRect();return{x:g.value?p.right-f.right-a.scrollLeft:f.left-p.left+a.scrollLeft,y:f.top-p.top+a.scrollTop}}return{x:0,y:0}};if(e.value.hostElement){const i=u(e.value.hostElement);(Math.abs(T.x-i.x)>.1||Math.abs(T.y-i.y)>.1)&&(T.x=i.x,T.y=i.y)}if(e.value.hostRef){const i=u(e.value.hostRef);(Math.abs(w.x-i.x)>.1||Math.abs(w.y-i.y)>.1)&&(w.x=i.x,w.y=i.y)}};t.watch([()=>e.value.items,()=>e.value.items.length,()=>e.value.direction,()=>e.value.columnCount,()=>e.value.columnWidth,()=>e.value.itemSize,()=>e.value.gap,()=>e.value.columnGap,()=>e.value.defaultItemSize,()=>e.value.defaultColumnWidth],Qe,{immediate:!0}),t.watch(()=>[e.value.container,e.value.hostElement],()=>{We()}),t.watch(g,(a,u)=>{if(u===void 0||a===u||!b.value)return;if(X.value==="vertical"){We();return}const i=u?Math.abs(r.value):r.value,f=Ke(i,T.x,fe.value);We(),Ne(f,null,{behavior:"auto"})},{flush:"sync"}),t.watch([fe,Te],()=>{!b.value||s.value||R.value||Ne(C.value,Y.value,{behavior:"auto"})}),t.watch([()=>e.value.items.length,()=>e.value.columnCount],([a,u],[i,f])=>{t.nextTick(()=>{const p=Math.max(0,Be.value-z.value),y=Math.max(0,we.value-h.value);C.value>p||Y.value>y?Ne(Math.min(C.value,p),Math.min(Y.value,y),{behavior:"auto"}):(a!==i&&Te.value!==1||u!==f&&fe.value!==1)&&Ne(C.value,Y.value,{behavior:"auto"}),We()})});const lt=a=>{const u=e.value.gap||0,i=e.value.columnGap||0,f=G.value;if(X.value==="horizontal"){const y=(f||0)+i;return f!==null&&y>0?Math.floor(a/y):M.findLowerBound(a)}const p=(f||0)+u;return f!==null&&p>0?Math.floor(a/p):E.findLowerBound(a)},vt=a=>X.value==="both"?B.findLowerBound(a):X.value==="horizontal"?lt(a):0,St=t.computed(()=>{if(P.value,(!d.value||S.value)&&e.value.ssrRange)return{start:e.value.ssrRange.start,end:e.value.ssrRange.end};const a=e.value.ssrRange&&!s.value?0:e.value.bufferBefore??Vt,u=e.value.bufferAfter??Vt;return Kt({direction:X.value,relativeScrollX:Me.value,relativeScrollY:He.value,usableWidth:pe.value,usableHeight:De.value,itemsLength:e.value.items.length,bufferBefore:a,bufferAfter:u,gap:e.value.gap||0,columnGap:e.value.columnGap||0,fixedSize:G.value,findLowerBoundY:i=>E.findLowerBound(i),findLowerBoundX:i=>M.findLowerBound(i),queryY:i=>E.query(i),queryX:i=>M.query(i)})}),wt=t.computed(()=>{P.value;const a=Me.value+le.value,u=He.value+oe.value,i=X.value==="horizontal"?a:u;return lt(i)}),Ze=t.computed(()=>{P.value;const a=e.value.columnCount||0;if(!a)return{start:0,end:0,padStart:0,padEnd:0};if((!d.value||S.value)&&e.value.ssrRange){const{colStart:i=0,colEnd:f=0}=e.value.ssrRange,p=Math.max(0,i),y=Math.min(a,f||a),V=e.value.columnGap||0,F=te.value!==null?p*(te.value+V):B.query(p),m=te.value!==null?a*(te.value+V)-V:Math.max(0,B.query(a)-V),I=te.value!==null?y*(te.value+V)-(y>0?V:0):B.query(y)-(y>0?V:0);return{start:p,end:y,padStart:F,padEnd:Math.max(0,m-I)}}const u=e.value.ssrRange&&!s.value?0:2;return Jt({columnCount:a,relativeScrollX:Me.value,usableWidth:pe.value,colBuffer:u,fixedWidth:te.value,columnGap:e.value.columnGap||0,findLowerBound:i=>B.findLowerBound(i),query:i=>B.query(i),totalColsQuery:()=>B.query(a)})});let bt=[];const xt=t.computed(()=>{P.value;const{start:a,end:u}=St.value,i=[],f=G.value,p=e.value.gap||0,y=e.value.columnGap||0,V=re.value,F=st.value,m=[];if(d.value||!e.value.ssrRange){const j=wt.value,$e=Dt(V,j);$e!==void 0&&$e<a&&m.push($e)}for(let j=a;j<u;j++)m.push(j);const I=e.value.ssrRange?.start||0,N=e.value.ssrRange?.colStart||0;let H=0,J=0;!d.value&&e.value.ssrRange&&(J=X.value!=="horizontal"?f!==null?I*(f+p):E.query(I):0,X.value==="horizontal"?H=f!==null?N*(f+y):M.query(N):X.value==="both"&&(H=B.query(N)));const Ie=new Map(bt.map(j=>[j.index,j]));let U=-1,k=0,Oe=-1,Ce=0;const dt=j=>j===U+1?(k+=M.get(U),U=j,k):(k=M.query(j),U=j,k),me=j=>j===Oe+1?(Ce+=E.get(Oe),Oe=j,Ce):(Ce=E.query(j),Oe=j,Ce),Ge=de.value+le.value+ee.value,ue=ge.value+oe.value+se.value,Re=de.value+le.value,xe=ge.value+oe.value,ut=Ze.value;for(const j of m){const $e=e.value.items[j];if($e===void 0)continue;const{x:zt,y:ft,width:Ot,height:At}=tl({index:j,direction:X.value,fixedSize:G.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,usableWidth:pe.value,usableHeight:De.value,totalWidth:Je.value.width,queryY:me,queryX:dt,getSizeY:at=>E.get(at),getSizeX:at=>M.get(at),columnRange:ut}),Bt=F.has(j),kt=zt,Pt=ft,{isStickyActive:Ht,stickyOffset:Mt}=el({index:j,isSticky:Bt,direction:X.value,relativeScrollX:Me.value,relativeScrollY:He.value,originalX:kt,originalY:Pt,width:Ot,height:At,stickyIndices:V,fixedSize:G.value,fixedWidth:te.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,getItemQueryY:at=>E.query(at),getItemQueryX:at=>M.query(at)}),Lt=d.value?C.value/fe.value+(kt+Ge-C.value)-Re:kt-H,Gt=d.value?Y.value/Te.value+(Pt+ue-Y.value)-xe:Pt-J,Ve=Ie.get(j);Ve&&Ve.item===$e&&Ve.offset.x===Lt&&Ve.offset.y===Gt&&Ve.size.width===Ot&&Ve.size.height===At&&Ve.isSticky===Bt&&Ve.isStickyActive===Ht&&Ve.stickyOffset.x===Mt.x&&Ve.stickyOffset.y===Mt.y?i.push(Ve):i.push({item:$e,index:j,offset:{x:Lt,y:Gt},size:{width:Ot,height:At},originalX:kt,originalY:Pt,isSticky:Bt,isStickyActive:Ht,stickyOffset:{x:Mt.x,y:Mt.y}})}return bt=i,i}),o=t.computed(()=>{P.value;const a=Me.value+le.value,u=He.value+oe.value,i=Me.value+(z.value-Ee.value)-1,f=He.value+(h.value-ke.value)-1,p=vt(a),y=lt(u),V=lt(X.value==="horizontal"?i:f),F=vt(i);return{items:xt.value,currentIndex:y,currentColIndex:p,currentEndIndex:V,currentEndColIndex:F,scrollOffset:{x:C.value,y:Y.value},displayScrollOffset:{x:g.value?Math.abs(r.value+w.x):Math.max(0,r.value-w.x),y:Math.max(0,l.value-w.y)},viewportSize:{width:z.value,height:h.value},displayViewportSize:{width:z.value,height:h.value},totalSize:{width:Be.value,height:we.value},isScrolling:s.value,isProgrammaticScroll:R.value,range:St.value,columnRange:Ze.value}}),v=()=>{R.value=!1,Z.value=null},c=a=>{const u=a.target;if(typeof window>"u")return;L(),u===window||u===document?(r.value=window.scrollX,l.value=window.scrollY,z.value=document.documentElement.clientWidth,h.value=document.documentElement.clientHeight):Et(u)&&(r.value=u.scrollLeft,l.value=u.scrollTop,z.value=u.clientWidth,h.value=u.clientHeight);const i=g.value?Math.abs(r.value):r.value;C.value=Ke(i,ye.x,fe.value),Y.value=Ke(l.value,ye.y,Te.value),s.value||(R.value||(Z.value=null),s.value=!0),clearTimeout(q),q=setTimeout(()=>{s.value=!1,R.value=!1},250)},A=a=>{let u=!1,i=0,f=0;const p=e.value.gap||0,y=e.value.columnGap||0,V=Me.value,F=He.value,m=lt(X.value==="horizontal"?V:F),I=vt(V),N=X.value==="horizontal",H=X.value==="both",J=new Set,Ie=new Set;for(const{index:U,inlineSize:k,blockSize:Oe,element:Ce}of a){if(k<=0&&Oe<=0)continue;const dt=ie.value||typeof e.value.itemSize=="function";if(U>=0&&!J.has(U)&&dt&&Oe>0){if(J.add(U),N&&k>0){const Ge=M.get(U),ue=k+y;if(!W[U]||Math.abs(ue-Ge)>.1){const Re=ue-Ge;M.update(U,Re),W[U]=1,u=!0,U<m&&(i+=Re)}}if(!N){const Ge=E.get(U),ue=Oe+p;if(!D[U]||Math.abs(ue-Ge)>.1){const Re=ue-Ge;E.update(U,Re),D[U]=1,u=!0,U<m&&(f+=Re)}}}const me=ve.value||typeof e.value.columnWidth=="function";if(H&&Ce&&e.value.columnCount&&me&&(k>0||Ce.dataset.colIndex===void 0)){const Ge=Ce.dataset.colIndex;if(Ge!=null){const ue=Number.parseInt(Ge,10);if(ue>=0&&ue<(e.value.columnCount||0)&&!Ie.has(ue)){Ie.add(ue);const Re=B.get(ue),xe=k+y;if(!x[ue]||Math.abs(Re-xe)>.1){const ut=xe-Re;Math.abs(ut)>.1&&(B.update(ue,ut),u=!0,ue<I&&(i+=ut)),x[ue]=1}}}else{const ue=Ce.dataset.colIndex!==void 0?[Ce]:Array.from(Ce.querySelectorAll("[data-col-index]"));for(const Re of ue){const xe=Number.parseInt(Re.dataset.colIndex,10);if(xe>=0&&xe<(e.value.columnCount||0)&&!Ie.has(xe)){Ie.add(xe);const j=Re.getBoundingClientRect().width,$e=B.get(xe),zt=j+y;if(!x[xe]||Math.abs($e-zt)>.1){const ft=zt-$e;Math.abs(ft)>.1&&(B.update(xe,ft),u=!0,xe<I&&(i+=ft)),x[xe]=1}}}}}}if(u&&(P.value++,!(Z.value!==null||R.value)&&(i!==0||f!==0))){const k=de.value+le.value+ee.value,Oe=ge.value+oe.value+se.value;Ne(i!==0?V+i+k:null,f!==0?F+f+Oe:null,{behavior:"auto"})}},ce=(a,u,i,f)=>{A([{index:a,inlineSize:u,blockSize:i,element:f}])};function Ye(){if(Z.value&&!S.value){const{rowIndex:a,colIndex:u,options:i}=Z.value;if(nt(i)&&i.behavior==="smooth"&&s.value)return;const p=e.value.container||window,y=typeof window<"u"&&p===window?window.scrollX:p.scrollLeft,V=typeof window<"u"&&p===window?window.scrollY:p.scrollTop,F=g.value?Math.abs(y):y,m=V,I=Ke(F,0,fe.value),N=Ke(m,0,Te.value),{targetX:H,targetY:J}=Wt({rowIndex:a,colIndex:u,options:i,direction:X.value,viewportWidth:z.value,viewportHeight:h.value,totalWidth:Xe.value,totalHeight:Pe.value,gap:e.value.gap||0,columnGap:e.value.columnGap||0,fixedSize:G.value,fixedWidth:te.value,relativeScrollX:I,relativeScrollY:N,getItemSizeY:me=>E.get(me),getItemSizeX:me=>M.get(me),getItemQueryY:me=>E.query(me),getItemQueryX:me=>M.query(me),getColumnSize:me=>B.get(me),getColumnQuery:me=>B.query(me),scaleX:fe.value,scaleY:Te.value,hostOffsetX:ye.x,hostOffsetY:ye.y,stickyIndices:re.value,stickyStartX:le.value,stickyStartY:oe.value,stickyEndX:Ee.value,stickyEndY:ke.value,flowPaddingStartX:de.value,flowPaddingStartY:ge.value,flowPaddingEndX:Fe.value,flowPaddingEndY:Se.value,paddingStartX:ee.value,paddingStartY:se.value,paddingEndX:ze.value,paddingEndY:qe.value}),Ie=2,U=2,k=u==null||Math.abs(I-H)<Ie,Oe=a==null||Math.abs(N-J)<U,Ce=u==null||u===void 0||x[u]===1,dt=a==null||a===void 0||D[a]===1;if(k&&Oe)Ce&&dt&&!s.value&&!R.value&&(Z.value=null);else{const me=nt(i)?{...i,isCorrection:!0}:{align:i,isCorrection:!0};it(a,u,me)}}}t.watch([P,z,h],Ye),t.watch(s,a=>{a||Ye()});let be=null,O=null,_;const he=a=>{if(!a||typeof window>"u")return;const u=a===window?document:a;if(u.addEventListener("scroll",c,{passive:!0}),$=null,L(),Rt(a)&&(O=new MutationObserver(()=>L()),O.observe(a,{attributes:!0,attributeFilter:["dir","style"]})),_=setInterval(L,1e3),a===window){z.value=document.documentElement.clientWidth,h.value=document.documentElement.clientHeight,r.value=window.scrollX,l.value=window.scrollY;const i=()=>{L(),z.value=document.documentElement.clientWidth,h.value=document.documentElement.clientHeight,We()};return window.addEventListener("resize",i),()=>{u.removeEventListener("scroll",c),window.removeEventListener("resize",i),clearInterval(_),$=null}}else return z.value=a.clientWidth,h.value=a.clientHeight,r.value=a.scrollLeft,l.value=a.scrollTop,be=new ResizeObserver(i=>{L();for(const f of i)f.target===a&&(z.value=a.clientWidth,h.value=a.clientHeight,We())}),be.observe(a),()=>{u.removeEventListener("scroll",c),be?.disconnect(),O?.disconnect(),clearInterval(_),$=null}};let Le;return t.getCurrentInstance()&&(t.onMounted(()=>{b.value=!0,L(),t.watch(()=>e.value.container,a=>{Le?.(),Le=he(a||null)},{immediate:!0}),We(),t.nextTick(()=>{if(We(),e.value.ssrRange||e.value.initialScrollIndex!==void 0){const a=e.value.initialScrollIndex!==void 0?e.value.initialScrollIndex:e.value.ssrRange?.start,u=e.value.initialScrollAlign||"start";a!=null&&it(a,e.value.ssrRange?.colStart,{align:u,behavior:"auto"}),d.value=!0,S.value=!0,t.nextTick(()=>{S.value=!1})}else d.value=!0})}),t.onUnmounted(()=>{Le?.()})),{renderedItems:xt,totalWidth:Be,totalHeight:we,renderedWidth:et,renderedHeight:je,scrollDetails:o,getRowHeight:yt,getColumnWidth:Tt,getRowOffset:a=>ge.value+oe.value+se.value+E.query(a),getColumnOffset:a=>de.value+le.value+ee.value+B.query(a),getItemOffset:a=>X.value==="horizontal"?de.value+le.value+ee.value+M.query(a):ge.value+oe.value+se.value+E.query(a),getItemSize:a=>{if(X.value==="horizontal")return Math.max(0,M.get(a)-(e.value.columnGap||0));const u=e.value.itemSize;if(typeof u=="number"&&u>0)return u;if(typeof u=="function"){const i=e.value.items[a];return i!==void 0?u(i,a):e.value.defaultItemSize||gt}return Math.max(0,E.get(a)-(e.value.gap||0))},scrollToIndex:it,scrollToOffset:Ne,stopProgrammaticScroll:v,updateItemSize:ce,updateItemSizes:A,updateHostOffset:We,updateDirection:L,columnRange:Ze,refresh:()=>{M.resize(0),E.resize(0),B.resize(0),x.fill(0),W.fill(0),D.fill(0),Qe()},isHydrated:d,isWindowContainer:ae,isRtl:g,scaleX:fe,scaleY:Te,componentOffset:ye,renderedVirtualWidth:ct,renderedVirtualHeight:ne}}function Xt(n){const e=t.computed(()=>t.toValue(n.axis)),r=t.computed(()=>t.toValue(n.totalSize)),l=t.computed(()=>t.toValue(n.position)),s=t.computed(()=>t.toValue(n.viewportSize)),d=t.computed(()=>t.toValue(n.containerId)),S=t.computed(()=>!!t.toValue(n.isRtl)),b=t.computed(()=>e.value==="horizontal"),g=t.computed(()=>r.value<=0?0:Math.min(1,s.value/r.value)),z=t.computed(()=>{const x=r.value-s.value;return x<=0?0:Math.max(0,Math.min(1,l.value/x))}),h=t.computed(()=>{const W=s.value>0?32/s.value:.1;return Math.max(Math.min(W,.1),g.value)*100}),T=t.computed(()=>z.value*(100-h.value)),w=t.computed(()=>b.value?{inlineSize:`${h.value}%`,insetInlineStart:`${T.value}%`}:{blockSize:`${h.value}%`,insetBlockStart:`${T.value}%`}),q=t.computed(()=>{const x=s.value,W="var(--vs-scrollbar-has-cross-gap, var(--vsi-scrollbar-has-cross-gap, 0)) * var(--vs-scrollbar-cross-gap, var(--vsi-scrollbar-size, 8px))";return b.value?{inlineSize:`calc(${Math.max(0,x-4)}px - ${W})`}:{blockSize:`calc(${Math.max(0,x-4)}px - ${W})`}}),R=t.ref(!1);let C=0,Y=0;function $(x){const W=x.currentTarget;if(x.target!==W)return;const D=W.getBoundingClientRect(),Z=b.value?D.width:D.height;let Q=0;b.value?Q=S.value?D.right-x.clientX:x.clientX-D.left:Q=x.clientY-D.top;const K=h.value/100*Z,X=(Q-K/2)/(Z-K),ie=r.value-s.value;let ve=X*ie;ve>ie-1&&(ve=ie),n.scrollToOffset(Math.max(0,Math.min(ie,ve)))}function L(x){R.value=!0,C=b.value?S.value?-x.clientX:x.clientX:x.clientY,Y=l.value,x.currentTarget.setPointerCapture(x.pointerId),x.preventDefault(),x.stopPropagation()}function M(x){if(!R.value)return;const D=x.currentTarget.parentElement;if(!D)return;const Q=(b.value?S.value?-x.clientX:x.clientX:x.clientY)-C,K=D.getBoundingClientRect(),X=b.value?K.width:K.height,ie=h.value/100*X,ve=X-ie;if(ve<=0)return;const G=r.value-s.value;let te=Y+Q/ve*G;te>G-1&&(te=G),n.scrollToOffset(Math.max(0,Math.min(G,te)))}function E(x){R.value&&(R.value=!1,x.currentTarget.releasePointerCapture(x.pointerId))}t.getCurrentInstance()&&t.onUnmounted(()=>{R.value=!1});const B=t.computed(()=>({class:["virtual-scrollbar-track",`virtual-scrollbar-track--${b.value?"horizontal":"vertical"}`],style:q.value,role:"scrollbar","aria-orientation":e.value,"aria-valuenow":Math.round(l.value),"aria-valuemin":0,"aria-valuemax":Math.round(r.value-s.value),"aria-controls":d.value,tabindex:-1,onMousedown:$})),P=t.computed(()=>({class:["virtual-scrollbar-thumb",`virtual-scrollbar-thumb--${b.value?"horizontal":"vertical"}`,{"virtual-scrollbar-thumb--active":R.value}],style:w.value,onPointerdown:L,onPointermove:M,onPointerup:E,onPointercancel:E}));return{viewportPercent:g,positionPercent:z,thumbSizePercent:h,thumbPositionPercent:T,trackStyle:q,thumbStyle:w,trackProps:B,thumbProps:P,isDragging:R}}const qt=t.defineComponent({__name:"VirtualScrollbar",props:{axis:{default:"vertical"},totalSize:{},position:{},viewportSize:{},scrollToOffset:{},containerId:{},isRtl:{type:Boolean,default:!1}},emits:["scrollToOffset"],setup(n,{emit:e}){const r=n,l=e,{trackProps:s,thumbProps:d}=Xt({axis:()=>r.axis,totalSize:()=>r.totalSize,position:()=>r.position,viewportSize:()=>r.viewportSize,containerId:()=>r.containerId,isRtl:()=>r.isRtl,scrollToOffset:S=>{r.scrollToOffset?.(S),l("scrollToOffset",S)}});return(S,b)=>(t.openBlock(),t.createElementBlock("div",t.normalizeProps(t.guardReactiveProps(t.unref(s))),[t.createElementVNode("div",t.normalizeProps(t.guardReactiveProps(t.unref(d))),null,16)],16))}}),il={key:0,class:"virtual-scroll-scrollbar-container"},rl={key:0,class:"virtual-scroll-debug-info"},Nt=.95,It=.1,ul=t.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},virtualScrollbar:{type:Boolean,default:!1}},emits:["scroll","load","visibleRangeChange"],setup(n,{expose:e,emit:r}){const l=n,s=r,d=t.useSlots(),S=t.ref(null),b=t.ref(null),g=t.ref(null),z=t.ref(null),h=new Map,T=t.useId(),w=t.computed(()=>`vs-container-${T}`),q=t.ref(0),R=t.ref(0),C=t.computed(()=>l.container===void 0?S.value:l.container),Y=t.computed(()=>{const o=C.value;return o===S.value||typeof window<"u"&&(o===window||o===null)}),$=t.computed(()=>(l.items.length,{items:l.items,itemSize:l.itemSize,direction:l.direction,bufferBefore:l.bufferBefore,bufferAfter:l.bufferAfter,container:C.value,hostElement:b.value,hostRef:S.value,ssrRange:l.ssrRange,columnCount:l.columnCount,columnWidth:l.columnWidth,scrollPaddingStart:{x:Ue(l.scrollPaddingStart,l.direction),y:_e(l.scrollPaddingStart,l.direction)},scrollPaddingEnd:{x:Ue(l.scrollPaddingEnd,l.direction),y:_e(l.scrollPaddingEnd,l.direction)},flowPaddingStart:{x:0,y:l.stickyHeader?0:q.value},flowPaddingEnd:{x:0,y:l.stickyFooter?0:R.value},stickyStart:{x:0,y:l.stickyHeader&&Y.value?q.value:0},stickyEnd:{x:0,y:l.stickyFooter&&Y.value?R.value:0},gap:l.gap,columnGap:l.columnGap,stickyIndices:l.stickyIndices,loadDistance:l.loadDistance,loading:l.loading,restoreScrollOnPrepend:l.restoreScrollOnPrepend,initialScrollIndex:l.initialScrollIndex,initialScrollAlign:l.initialScrollAlign,defaultItemSize:l.defaultItemSize,defaultColumnWidth:l.defaultColumnWidth,debug:l.debug})),{isHydrated:L,isRtl:M,columnRange:E,renderedItems:B,scrollDetails:P,renderedHeight:x,renderedWidth:W,getColumnWidth:D,getRowHeight:Z,scrollToIndex:Q,scrollToOffset:K,updateHostOffset:X,updateItemSizes:ie,updateDirection:ve,getItemOffset:G,getRowOffset:te,getColumnOffset:Ae,getItemSize:re,refresh:st,stopProgrammaticScroll:ee,scaleX:ze,scaleY:se,isWindowContainer:qe,componentOffset:le,renderedVirtualWidth:Ee,renderedVirtualHeight:oe}=nl($),ke=t.computed(()=>ze.value!==1||se.value!==1),de=t.computed(()=>qe.value?!1:l.virtualScrollbar===!0||ze.value!==1||se.value!==1);function Fe(o){const{displayViewportSize:v}=P.value,c=x.value-v.height;if(o>=c-.5)K(null,Number.POSITIVE_INFINITY);else{const A=Ke(o,le.y,se.value);K(null,A)}}function ge(o){const{displayViewportSize:v}=P.value,c=W.value-v.width;if(o>=c-.5)K(Number.POSITIVE_INFINITY,null);else{const A=Ke(o,le.x,ze.value);K(A,null)}}const Se=Xt({axis:"vertical",totalSize:x,position:t.computed(()=>P.value.displayScrollOffset.y),viewportSize:t.computed(()=>P.value.displayViewportSize.height),scrollToOffset:Fe,containerId:w,isRtl:M}),pe=Xt({axis:"horizontal",totalSize:W,position:t.computed(()=>P.value.displayScrollOffset.x),viewportSize:t.computed(()=>P.value.displayViewportSize.width),scrollToOffset:ge,containerId:w,isRtl:M}),De=t.computed(()=>l.direction!=="both"?E.value:{...E.value,padStart:0,padEnd:0});function Je(){st(),ve(),t.nextTick(()=>{const o=[];for(const[v,c]of h.entries())c&&o.push({index:v,inlineSize:c.offsetWidth,blockSize:c.offsetHeight,element:c});o.length>0&&ie(o)})}t.watch(P,(o,v)=>{!L.value||!o||(s("scroll",o),(!v||!v.range||!v.columnRange||o.range.start!==v.range.start||o.range.end!==v.range.end||o.columnRange.start!==v.columnRange.start||o.columnRange.end!==v.columnRange.end)&&s("visibleRangeChange",{start:o.range.start,end:o.range.end,colStart:o.columnRange.start,colEnd:o.columnRange.end}),!l.loading&&(l.direction!=="horizontal"&&o.totalSize&&o.totalSize.height-(o.scrollOffset.y+o.viewportSize.height)<=l.loadDistance&&s("load","vertical"),l.direction!=="vertical"&&o.totalSize&&o.totalSize.width-(o.scrollOffset.x+o.viewportSize.width)<=l.loadDistance&&s("load","horizontal")))}),t.watch(L,o=>{o&&P.value?.range&&P.value?.columnRange&&s("visibleRangeChange",{start:P.value.range.start,end:P.value.range.end,colStart:P.value.columnRange.start,colEnd:P.value.columnRange.end})},{once:!0});const ae=typeof window>"u"?null:new ResizeObserver(X),Xe=typeof window>"u"?null:new ResizeObserver(o=>{const v=[];for(const c of o){const A=c.target,ce=Number(A.dataset.index),Ye=A.dataset.colIndex;let be=c.contentRect.width,O=c.contentRect.height;c.borderBoxSize&&c.borderBoxSize.length>0?(be=c.borderBoxSize[0].inlineSize,O=c.borderBoxSize[0].blockSize):(be=A.offsetWidth,O=A.offsetHeight),Ye!==void 0?v.push({index:-1,inlineSize:be,blockSize:O,element:A}):Number.isNaN(ce)||v.push({index:ce,inlineSize:be,blockSize:O,element:A})}v.length>0&&ie(v)}),Pe=typeof window>"u"?null:new ResizeObserver(()=>{q.value=g.value?.offsetHeight||0,R.value=z.value?.offsetHeight||0,X()});t.watch(g,(o,v)=>{v&&Pe?.unobserve(v),o?Pe?.observe(o):q.value=0},{immediate:!0}),t.watch(z,(o,v)=>{v&&Pe?.unobserve(v),o?Pe?.observe(o):R.value=0},{immediate:!0}),t.onMounted(()=>{S.value&&ae?.observe(S.value);for(const o of h.values())Xe?.observe(o),l.direction==="both"&&o.querySelectorAll("[data-col-index]").forEach(v=>Xe?.observe(v))}),t.watch([S,b],([o],[v])=>{v&&ae?.unobserve(v),o&&ae?.observe(o)}),t.watch([S,ke],([o,v],[c,A])=>{const ce=o!==c||v!==A;c&&ce&&c.removeEventListener("wheel",it),o&&ce&&o.addEventListener("wheel",it,{passive:!v})},{immediate:!0});function Be(o,v){if(o)h.set(v,o),Xe?.observe(o),l.direction==="both"&&o.querySelectorAll("[data-col-index]").forEach(c=>Xe?.observe(c));else{const c=h.get(v);c&&(Xe?.unobserve(c),l.direction==="both"&&c.querySelectorAll("[data-col-index]").forEach(A=>Xe?.unobserve(A)),h.delete(v))}}const we=t.ref(!1);let ye={x:0,y:0},et={x:0,y:0},je={x:0,y:0},ct=0,ne={x:0,y:0},fe=null;function Te(){const o=()=>{ne.x*=Nt,ne.y*=Nt;const v=P.value.scrollOffset.x,c=P.value.scrollOffset.y;K(v+ne.x*16,c+ne.y*16,{behavior:"auto"}),Math.abs(ne.x)>It||Math.abs(ne.y)>It?fe=requestAnimationFrame(o):Me()};fe=requestAnimationFrame(o)}function Me(){fe!==null&&(cancelAnimationFrame(fe),fe=null),ne={x:0,y:0}}function He(o){ee(),Me(),ke.value&&(o.pointerType==="mouse"&&o.button!==0||(we.value=!0,ye={x:o.clientX,y:o.clientY},je={x:o.clientX,y:o.clientY},ct=performance.now(),et={x:P.value.scrollOffset.x,y:P.value.scrollOffset.y},o.currentTarget.setPointerCapture(o.pointerId)))}function Tt(o){if(!we.value)return;const v=performance.now(),c=v-ct;if(c>0){const Ye=(je.x-o.clientX)/c,be=(je.y-o.clientY)/c;ne.x=ne.x*.2+Ye*.8,ne.y=ne.y*.2+be*.8}je={x:o.clientX,y:o.clientY},ct=v;const A=ye.x-o.clientX,ce=ye.y-o.clientY;requestAnimationFrame(()=>{K(et.x+A,et.y+ce,{behavior:"auto"})})}function yt(o){we.value&&(we.value=!1,o.currentTarget.releasePointerCapture(o.pointerId),(Math.abs(ne.x)>It||Math.abs(ne.y)>It)&&(Math.abs(ne.x)>4*Math.abs(ne.y)?ne.y=0:Math.abs(ne.y)>4*Math.abs(ne.x)&&(ne.x=0),Te()))}function it(o){const{scrollOffset:v}=P.value;if(ee(),ke.value){o.preventDefault();let c=o.deltaX,A=o.deltaY;o.shiftKey&&c===0&&(c=A,A=0);const ce=v.x+c,Ye=v.y+A;K(ce,Ye,{behavior:"auto"})}}function Ne(o){const{viewportSize:v,scrollOffset:c}=P.value,A=l.direction!=="vertical",ce=l.direction!=="horizontal",Ye=$.value.stickyStart,be=$.value.stickyEnd;switch(o.key){case"Home":{o.preventDefault(),ee();const O=Math.max(c.x,c.y),_=l.direction==="horizontal"?v.width:v.height,he=O>10*_?"auto":"smooth";Q(0,0,{behavior:he,align:"start"});break}case"End":{o.preventDefault(),ee();const O=l.items.length-1,_=(l.columnCount||0)>0?l.columnCount-1:0,{totalSize:he}=P.value,Le=Math.max(he.width-c.x-v.width,he.height-c.y-v.height),rt=l.direction==="horizontal"?v.width:v.height,a=Le>10*rt?"auto":"smooth";l.direction==="both"?Q(O,_,{behavior:a,align:"end"}):Q(l.direction==="vertical"?O:0,l.direction==="horizontal"?O:0,{behavior:a,align:"end"});break}case"ArrowUp":{if(o.preventDefault(),ee(),!ce)return;const{currentIndex:O,scrollOffset:_}=P.value,he=_.y+Ye.y+$.value.scrollPaddingStart.y;te(O)<he-1?Q(O,null,{align:"start"}):O>0&&Q(O-1,null,{align:"start"});break}case"ArrowDown":{if(o.preventDefault(),ee(),!ce)return;const{currentEndIndex:O}=P.value,_=c.y+v.height-(be.y+$.value.scrollPaddingEnd.y);te(O)+Z(O)>_+1?Q(O,null,{align:"end"}):O<l.items.length-1&&Q(O+1,null,{align:"end"});break}case"ArrowLeft":{if(o.preventDefault(),ee(),!A)return;const{currentColIndex:O,currentEndColIndex:_}=P.value;if(M.value){const he=c.x+v.width-(be.x+$.value.scrollPaddingEnd.x);if((l.columnCount?Ae(_)+D(_):G(_)+re(_))>he+1)Q(null,_,{align:"end"});else{const rt=l.columnCount?l.columnCount-1:l.items.length-1;_<rt&&Q(null,_+1,{align:"end"})}}else{const he=c.x+Ye.x+$.value.scrollPaddingStart.x;(l.columnCount?Ae(O):G(O))<he-1?Q(null,O,{align:"start"}):O>0&&Q(null,O-1,{align:"start"})}break}case"ArrowRight":{if(o.preventDefault(),ee(),!A)return;const{currentColIndex:O,currentEndColIndex:_}=P.value;if(M.value){const he=c.x+Ye.x+$.value.scrollPaddingStart.x;(l.columnCount?Ae(O):G(O))<he-1?Q(null,O,{align:"start"}):O>0&&Q(null,O-1,{align:"start"})}else{const he=c.x+v.width-(be.x+$.value.scrollPaddingEnd.x);if((l.columnCount?Ae(_)+D(_):G(_)+re(_))>he+1)Q(null,_,{align:"end"});else{const rt=l.columnCount?l.columnCount-1:l.items.length-1;_<rt&&Q(null,_+1,{align:"end"})}}break}case"PageUp":o.preventDefault(),ee(),K(!ce&&A?c.x-v.width:null,ce?c.y-v.height:null);break;case"PageDown":o.preventDefault(),ee(),K(!ce&&A?c.x+v.width:null,ce?c.y+v.height:null);break}}t.onUnmounted(()=>{ae?.disconnect(),Xe?.disconnect(),Pe?.disconnect()});const Yt=t.computed(()=>{const o={...l.direction!=="vertical"?{whiteSpace:"nowrap"}:{}};return de.value&&(o.overflow="auto"),ke.value&&(o.touchAction="none"),qe.value?o:l.containerTag==="table"?{...o,minInlineSize:l.direction==="vertical"?"100%":"auto"}:o}),tt=t.computed(()=>{if(l.direction==="horizontal")return null;const{displayViewportSize:o,displayScrollOffset:v}=P.value;if(x.value<=o.height)return null;const c={axis:"vertical",totalSize:x.value,position:v.y,viewportSize:o.height,scrollToOffset:Fe,containerId:w.value,isRtl:M.value};return{positionPercent:Se.positionPercent.value,viewportPercent:Se.viewportPercent.value,thumbSizePercent:Se.thumbSizePercent.value,thumbPositionPercent:Se.thumbPositionPercent.value,trackProps:Se.trackProps.value,thumbProps:Se.thumbProps.value,scrollbarProps:c,isDragging:Se.isDragging.value}}),Qe=t.computed(()=>{if(l.direction==="vertical")return null;const{displayViewportSize:o,displayScrollOffset:v}=P.value;if(W.value<=o.width)return null;const c={axis:"horizontal",totalSize:W.value,position:v.x,viewportSize:o.width,scrollToOffset:ge,containerId:w.value,isRtl:M.value};return{positionPercent:pe.positionPercent.value,viewportPercent:pe.viewportPercent.value,thumbSizePercent:pe.thumbSizePercent.value,thumbPositionPercent:pe.thumbPositionPercent.value,trackProps:pe.trackProps.value,thumbProps:pe.thumbProps.value,scrollbarProps:c,isDragging:pe.isDragging.value}}),We=t.computed(()=>{const o=l.direction==="horizontal",v=l.direction==="vertical",c=l.direction==="both",A={inlineSize:v?"100%":`${Ee.value}px`,blockSize:o?"100%":`${oe.value}px`};return L.value||(A.display="flex",A.flexDirection=o?"row":"column",(o||c)&&l.columnGap&&(A.columnGap=`${l.columnGap}px`),(v||c)&&l.gap&&(A.rowGap=`${l.gap}px`)),A}),lt=t.computed(()=>{const o=l.direction==="horizontal";return{display:o?"inline-block":"block",...o?{blockSize:"100%",verticalAlign:"top"}:{inlineSize:"100%"}}}),vt=t.computed(()=>({inlineSize:l.direction==="vertical"?"1px":`${Ee.value}px`,blockSize:l.direction==="horizontal"?"1px":`${oe.value}px`}));function St(o){const v=ll({containerTag:l.containerTag,direction:l.direction,isHydrated:L.value,item:o,itemSize:l.itemSize,paddingStartX:$.value.scrollPaddingStart.x,paddingStartY:$.value.scrollPaddingStart.y,isRtl:M.value});return!L.value&&l.direction==="both"&&(v.display="flex",l.columnGap&&(v.columnGap=`${l.columnGap}px`)),v}const wt=t.computed(()=>l.debug),Ze=t.computed(()=>l.containerTag==="table"),bt=t.computed(()=>Ze.value?"thead":"div"),xt=t.computed(()=>Ze.value?"tfoot":"div");return e({...t.toRefs(l),scrollDetails:P,columnRange:E,getColumnWidth:D,getRowHeight:Z,getRowOffset:te,getColumnOffset:Ae,getItemOffset:G,getItemSize:re,scrollToIndex:Q,scrollToOffset:K,refresh:Je,stopProgrammaticScroll:()=>{ee(),Me()},updateDirection:ve,isRtl:M,isHydrated:L,scaleX:ze,scaleY:se,renderedWidth:W,renderedHeight:x,componentOffset:le,scrollbarPropsVertical:tt,scrollbarPropsHorizontal:Qe}),(o,v)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.containerTag),{id:w.value,ref_key:"hostRef",ref:S,class:t.normalizeClass(["virtual-scroll-container",[`virtual-scroll--${n.direction}`,{"virtual-scroll--hydrated":t.unref(L),"virtual-scroll--window":t.unref(qe),"virtual-scroll--table":Ze.value,"virtual-scroll--hide-scrollbar":de.value}]]),style:t.normalizeStyle(Yt.value),tabindex:"0",onKeydown:Ne,onPointerdown:He,onPointermove:Tt,onPointerup:yt,onPointercancel:yt},{default:t.withCtx(()=>[de.value?(t.openBlock(),t.createElementBlock("div",il,[t.createElementVNode("div",{class:"virtual-scroll-scrollbar-viewport",style:t.normalizeStyle({inlineSize:`${t.unref(P).displayViewportSize.width}px`,blockSize:`${t.unref(P).displayViewportSize.height}px`,"--vsi-scrollbar-has-cross-gap":n.direction==="both"?1:0})},[d.scrollbar&&tt.value?t.renderSlot(o.$slots,"scrollbar",t.normalizeProps(t.mergeProps({key:0},tt.value)),void 0,!0):tt.value?(t.openBlock(),t.createBlock(qt,t.normalizeProps(t.mergeProps({key:1},tt.value.scrollbarProps)),null,16)):t.createCommentVNode("",!0),d.scrollbar&&Qe.value?t.renderSlot(o.$slots,"scrollbar",t.normalizeProps(t.mergeProps({key:2},Qe.value)),void 0,!0):Qe.value?(t.openBlock(),t.createBlock(qt,t.normalizeProps(t.mergeProps({key:3},Qe.value.scrollbarProps)),null,16)):t.createCommentVNode("",!0)],4)])):t.createCommentVNode("",!0),d.header?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(bt.value),{key:1,ref_key:"headerRef",ref:g,class:t.normalizeClass(["virtual-scroll-header",{"virtual-scroll--sticky":n.stickyHeader}])},{default:t.withCtx(()=>[t.renderSlot(o.$slots,"header",{},void 0,!0)]),_:3},8,["class"])):t.createCommentVNode("",!0),(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.wrapperTag),{ref_key:"wrapperRef",ref:b,class:"virtual-scroll-wrapper",style:t.normalizeStyle(We.value)},{default:t.withCtx(()=>[Ze.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.itemTag),{key:0,class:"virtual-scroll-spacer",style:t.normalizeStyle(vt.value)},{default:t.withCtx(()=>[...v[0]||(v[0]=[t.createElementVNode("td",{style:{padding:"0",border:"none","block-size":"inherit"}},null,-1)])]),_:1},8,["style"])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(B),c=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.itemTag),{key:c.index,ref_for:!0,ref:A=>Be(A,c.index),"data-index":c.index,class:t.normalizeClass(["virtual-scroll-item",{"virtual-scroll--sticky":c.isStickyActive,"virtual-scroll--debug":wt.value}]),style:t.normalizeStyle(St(c))},{default:t.withCtx(()=>[t.renderSlot(o.$slots,"item",{item:c.item,index:c.index,columnRange:De.value,getColumnWidth:t.unref(D),gap:l.gap,columnGap:l.columnGap,isSticky:c.isSticky,isStickyActive:c.isStickyActive},void 0,!0),wt.value?(t.openBlock(),t.createElementBlock("div",rl," #"+t.toDisplayString(c.index)+" ("+t.toDisplayString(Math.round(c.offset.x))+", "+t.toDisplayString(Math.round(c.offset.y))+") ",1)):t.createCommentVNode("",!0)]),_:2},1032,["data-index","class","style"]))),128))]),_:3},8,["style"])),n.loading&&d.loading?(t.openBlock(),t.createElementBlock("div",{key:2,class:"virtual-scroll-loading",style:t.normalizeStyle(lt.value)},[t.renderSlot(o.$slots,"loading",{},void 0,!0)],4)):t.createCommentVNode("",!0),d.footer?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(xt.value),{key:3,ref_key:"footerRef",ref:z,class:t.normalizeClass(["virtual-scroll-footer",{"virtual-scroll--sticky":n.stickyFooter}])},{default:t.withCtx(()=>[t.renderSlot(o.$slots,"footer",{},void 0,!0)]),_:3},8,["class"])):t.createCommentVNode("",!0)]),_:3},40,["id","class","style"]))}}),sl=(n,e)=>{const r=n.__vccOpts||n;for(const[l,s]of e)r[l]=s;return r},cl=sl(ul,[["__scopeId","data-v-91b6ab6c"]]);exports.BROWSER_MAX_SIZE=ot;exports.DEFAULT_BUFFER=Vt;exports.DEFAULT_COLUMN_WIDTH=pt;exports.DEFAULT_ITEM_SIZE=gt;exports.FenwickTree=Ct;exports.VirtualScroll=cl;exports.VirtualScrollbar=qt;exports.calculateColumnRange=Jt;exports.calculateItemPosition=tl;exports.calculateItemStyle=ll;exports.calculateRange=Kt;exports.calculateScrollTarget=Wt;exports.calculateStickyItem=el;exports.calculateTotalSize=al;exports.displayToVirtual=Ke;exports.findPrevStickyIndex=Dt;exports.getPaddingX=Ue;exports.getPaddingY=_e;exports.isBody=_t;exports.isElement=Rt;exports.isItemVisible=Zt;exports.isScrollToIndexOptions=nt;exports.isScrollableElement=Et;exports.isWindow=Ut;exports.isWindowLike=jt;exports.useVirtualScroll=nl;exports.useVirtualScrollbar=Xt;exports.virtualToDisplay=mt;
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);const t=40,n=100,r=5,i={items:[],currentIndex:0,currentColIndex:0,currentEndIndex:0,currentEndColIndex:0,scrollOffset:{x:0,y:0},displayScrollOffset:{x:0,y:0},viewportSize:{width:0,height:0},displayViewportSize:{width:0,height:0},totalSize:{width:0,height:0},isScrolling:!1,isProgrammaticScroll:!1,range:{start:0,end:0},columnRange:{start:0,end:0,padStart:0,padEnd:0}};var a=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()}};const o=1e7;function s(e){return e===null||e===document.documentElement||typeof window<`u`&&e===window}function c(e){return typeof e==`object`&&!!e&&`tagName`in e&&e.tagName===`BODY`}function l(e){return s(e)||c(e)}function u(e){return e!=null&&`getBoundingClientRect`in e}function d(e){return e!=null&&`scrollLeft`in e}function f(e,t){s(e)?window.scrollTo(t):e!=null&&d(e)&&(typeof e.scrollTo==`function`?e.scrollTo(t):(t.left!==void 0&&(e.scrollLeft=t.left),t.top!==void 0&&(e.scrollTop=t.top)))}function p(e){return typeof e==`object`&&!!e&&(`align`in e||`behavior`in e||`isCorrection`in e)}function m(e,t){return typeof e==`object`&&e?e.x||0:(t===`horizontal`||t===`both`)&&e||0}function h(e,t){return typeof e==`object`&&e?e.y||0:(t===`vertical`||t===`both`)&&e||0}function g({scrollPos:e,containerSize:t,count:n,bufferBefore:r,bufferAfter:i,gap:a,fixedSize:o,findLowerBound:s,query:c}){let l=0,u=n,d=e+t;if(o!==null){let t=o+a;l=Math.floor(e/t),u=Math.ceil(d/t)}else l=s(e),u=s(d),u<n&&c(u)<d&&u++;return{start:Math.max(0,l-r),end:Math.min(n,u+i)}}function _(e,t){let n=0,r=e.length-1,i;for(;n<=r;){let a=n+r>>>1;e[a]>t?(i=e[a],r=a-1):n=a+1}return i}function v(e,t){let n=0,r=e.length-1,i;for(;n<=r;){let a=n+r>>>1;e[a]<t?(i=e[a],n=a+1):r=a-1}return i}function y({align:e,targetPos:t,itemSize:n,scrollPos:r,viewSize:i,stickyOffsetStart:a,stickyOffsetEnd:o}){let s=t-a,c=t-(i-o-n);return e===`start`?{target:s,effectiveAlign:`start`}:e===`center`?{target:t-a-(i-a-o-n)/2,effectiveAlign:`center`}:e===`end`?{target:c,effectiveAlign:`end`}:C(t,n,r,i,a,o)?{target:r,effectiveAlign:`auto`}:n<=i-a-o?t<r+a?{target:s,effectiveAlign:`start`}:{target:c,effectiveAlign:`end`}:Math.abs(s-r)<Math.abs(c-r)?{target:s,effectiveAlign:`start`}:{target:c,effectiveAlign:`end`}}function b(e,t,n,r){return e<=0?0:t===null?Math.max(0,r(e)-n):Math.max(0,e*(t+n)-n)}function x({index:e,align:t,viewSize:n,scrollPos:r,fixedSize:i,gap:a,query:o,getSize:s,stickyIndices:c,stickyStart:l,stickyEnd:u=0}){let d=l;if(c&&c.length>0){let t=v(c,e);t!==void 0&&(d+=b(1,i,0,()=>s(t)))}let f=i===null?o(e):e*(i+a),p=i===null?s(e)-a:i,{target:m,effectiveAlign:h}=y({align:t,targetPos:f,itemSize:p,scrollPos:r,viewSize:n,stickyOffsetStart:d,stickyOffsetEnd:u});return{target:m,itemSize:p,effectiveAlign:h}}function S(e,t,n,r,i,a){if(e<=t)return{isActive:!1,offset:0};let o=_(i,r);if(o===void 0)return{isActive:!0,offset:0};let s=a(o);return e>=s?{isActive:!1,offset:0}:{isActive:!0,offset:Math.max(0,Math.min(n,s-e))-n}}function C(e,t,n,r,i=0,a=0){let o=n+i,s=n+r-a;return t<=r-i-a?e>=o-.5&&e+t<=s+.5:e<=o+.5&&e+t>=s-.5}function w(e,t,n){return(e-t)*n}function ee(e,t,n){return e/n+t}function T({rowIndex:e,colIndex:t,options:n,direction:r,viewportWidth:i,viewportHeight:a,totalWidth:s,totalHeight:c,gap:l,columnGap:u,fixedSize:d,fixedWidth:f,relativeScrollX:m,relativeScrollY:h,getItemSizeY:g,getItemSizeX:_,getItemQueryY:v,getItemQueryX:y,getColumnSize:b,getColumnQuery:S,scaleX:C,scaleY:w,hostOffsetX:ee,hostOffsetY:T,stickyIndices:te,stickyStartX:E=0,stickyStartY:ne=0,stickyEndX:re=0,stickyEndY:ie=0,flowPaddingStartX:D=0,flowPaddingStartY:O=0,paddingStartX:k=0,paddingStartY:A=0,paddingEndX:ae=0,paddingEndY:oe=0}){let j;j=p(n)?n.align:n;let M=(j&&typeof j==`object`?j.x:j)||`auto`,N=(j&&typeof j==`object`?j.y:j)||`auto`,P=m,F=h,I=0,L=0,R=`auto`,se=`auto`,ce=C===1?s:o,z=w===1?c:o,B=Math.max(0,ee+ce-i),le=Math.max(0,T+z-a),V=(B-ee)*C,H=(le-T)*w,ue=D+E+k,de=O+ne+A;if(e!=null){let t=x({index:e,align:N,viewSize:a,scrollPos:h,fixedSize:d,gap:l,query:v,getSize:g,stickyIndices:te,stickyStart:ne+A,stickyEnd:ie+oe});F=t.target+de,L=t.itemSize,se=t.effectiveAlign}if(t!=null){let e=r===`both`,n=x({index:t,align:M,viewSize:i,scrollPos:m,fixedSize:e?f:d,gap:e||r===`horizontal`?u:l,query:e?S:y,getSize:e?b:_,stickyIndices:te,stickyStart:E+k,stickyEnd:re+ae});P=n.target+ue,I=n.itemSize,R=n.effectiveAlign}return P=Math.max(0,Math.min(P,V)),F=Math.max(0,Math.min(F,H)),{targetX:P,targetY:F,itemWidth:I,itemHeight:L,effectiveAlignX:R,effectiveAlignY:se}}function te({direction:e,relativeScrollX:t,relativeScrollY:n,usableWidth:r,usableHeight:i,itemsLength:a,bufferBefore:o,bufferAfter:s,gap:c,columnGap:l,fixedSize:u,findLowerBoundY:d,findLowerBoundX:f,queryY:p,queryX:m}){let h=e===`vertical`||e===`both`;return g({scrollPos:h?n:t,containerSize:h?i:r,count:a,bufferBefore:o,bufferAfter:s,gap:h?c:l,fixedSize:u,findLowerBound:h?d:f,query:h?p:m})}function E({columnCount:e,relativeScrollX:t,usableWidth:n,colBuffer:r,fixedWidth:i,columnGap:a,findLowerBound:o,query:s,totalColsQuery:c}){if(!e)return{start:0,end:0,padStart:0,padEnd:0};let{start:l,end:u}=g({scrollPos:t,containerSize:n,count:e,bufferBefore:r,bufferAfter:r,gap:a,fixedSize:i,findLowerBound:o,query:s}),d=l,f=u,p=i===null?s(d):d*(i+a),m=i===null?Math.max(0,c()-a):e*(i+a)-a,h=i===null?s(f)-(f>0?a:0):f*(i+a)-(f>0?a:0);return{start:d,end:f,padStart:p,padEnd:Math.max(0,m-h)}}function ne({index:e,isSticky:t,direction:n,relativeScrollX:r,relativeScrollY:i,originalX:a,originalY:o,width:s,height:c,stickyIndices:l,fixedSize:u,gap:d,columnGap:f,getItemQueryY:p,getItemQueryX:m}){let h=!1,g=!1,_={x:0,y:0};if(!t)return{isStickyActiveX:h,isStickyActiveY:g,isStickyActive:!1,stickyOffset:_};if(n===`vertical`||n===`both`){let t=S(i,o,c,e,l,e=>u===null?p(e):e*(u+d));g=t.isActive,_.y=t.offset}if(n===`horizontal`){let t=S(r,a,s,e,l,e=>u===null?m(e):e*(u+f));t.isActive&&(h=!0,_.x=t.offset)}return{isStickyActiveX:h,isStickyActiveY:g,isStickyActive:h||g,stickyOffset:_}}function re({index:e,direction:t,fixedSize:n,gap:r,columnGap:i,usableWidth:a,usableHeight:o,totalWidth:s,queryY:c,queryX:l,getSizeY:u,getSizeX:d,columnRange:f}){let p=0,m=0,h=0,g=0;return t===`horizontal`?(p=n===null?l(e):e*(n+i),h=n===null?d(e)-i:n,g=o):t===`both`&&f?(m=n===null?c(e):e*(n+r),g=n===null?u(e)-r:n,p=f.padStart,h=Math.max(0,s-f.padStart-f.padEnd)):(m=n===null?c(e):e*(n+r),g=n===null?u(e)-r:n,h=t===`both`?s:a),{height:g,width:h,x:p,y:m}}function ie({item:e,direction:t,itemSize:n,containerTag:r,paddingStartX:i,paddingStartY:a,isHydrated:o,isRtl:s}){let c=t===`vertical`,l=t===`horizontal`,u=t===`both`,d=n==null||n===0,f={blockSize:l?`100%`:d?`auto`:`${e.size.height}px`};if(c&&r===`table`?f.minInlineSize=`100%`:f.inlineSize=c?`100%`:d?`auto`:`${e.size.width}px`,d&&(c||(f.minInlineSize=`1px`),l||(f.minBlockSize=`1px`)),o){let t=e.isStickyActiveY??(e.isStickyActive&&(c||u)),n=e.isStickyActiveX??(e.isStickyActive&&l),r=s?-(n?e.stickyOffset.x:e.offset.x):n?e.stickyOffset.x:e.offset.x,o=t?e.stickyOffset.y:e.offset.y;e.isStickyActive||e.isStickyActiveX||e.isStickyActiveY?(f.insetBlockStart=t?`${a}px`:`auto`,f.insetInlineStart=n?`${i}px`:`auto`,f.transform=`translate(${r}px, ${o}px)`):f.transform=`translate(${r}px, ${e.offset.y}px)`}return f}function D({direction:e,itemsLength:t,columnCount:n,fixedSize:r,fixedWidth:i,gap:a,columnGap:o,usableWidth:s,usableHeight:c,queryY:l,queryX:u,queryColumn:d}){let f=e===`both`,p=e===`horizontal`,m=0,h=0;return f?(m=b(n,i,o,d),h=b(t,r,a,l)):p?(m=b(t,r,o,u),h=c):(m=s,h=b(t,r,a,l)),{width:f?Math.max(m,s):m,height:f?Math.max(h,c):h}}function O(t){let n=(0,e.computed)(()=>(0,e.toValue)(t)),r=(0,e.ref)(0),i=(0,e.ref)(0),s=(0,e.ref)(!1),c=(0,e.ref)(!1),g=(0,e.ref)(!1),_=(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=(0,e.reactive)({x:0,y:0}),ie,O=(0,e.ref)(!1),k=(0,e.ref)(0),A=(0,e.ref)(0),ae=null,oe=()=>{if(typeof window>`u`)return;let e=n.value.container||n.value.hostRef||window,t=u(e)?e:document.documentElement;(!ae||!(`direction`in ae))&&(ae=window.getComputedStyle(t));let r=ae.direction===`rtl`;y.value!==r&&(y.value=r)},j=new a(n.value.items?.length||0),M=new a(n.value.items?.length||0),N=new a(n.value.columnCount||0),P=(0,e.ref)(0),F=new Uint8Array,I=new Uint8Array,L=new Uint8Array,R=(0,e.ref)(null),se=(0,e.ref)(!1),ce=[],z=(0,e.computed)(()=>[`vertical`,`horizontal`,`both`].includes(n.value.direction)?n.value.direction:`vertical`),B=(0,e.computed)(()=>n.value.itemSize===void 0||n.value.itemSize===null||n.value.itemSize===0),le=(0,e.computed)(()=>n.value.columnWidth===void 0||n.value.columnWidth===null||n.value.columnWidth===0),V=(0,e.computed)(()=>typeof n.value.itemSize==`number`&&n.value.itemSize>0?n.value.itemSize:null),H=(0,e.computed)(()=>typeof n.value.columnWidth==`number`&&n.value.columnWidth>0?n.value.columnWidth:null),ue=(0,e.computed)(()=>n.value.defaultItemSize||V.value||40),de=(0,e.computed)(()=>[...n.value.stickyIndices||[]].sort((e,t)=>e-t)),fe=(0,e.computed)(()=>new Set(de.value)),U=(0,e.computed)(()=>m(n.value.scrollPaddingStart,n.value.direction)),pe=(0,e.computed)(()=>m(n.value.scrollPaddingEnd,n.value.direction)),me=(0,e.computed)(()=>h(n.value.scrollPaddingStart,n.value.direction)),he=(0,e.computed)(()=>h(n.value.scrollPaddingEnd,n.value.direction)),W=(0,e.computed)(()=>m(n.value.stickyStart,n.value.direction)),G=(0,e.computed)(()=>m(n.value.stickyEnd,n.value.direction)),K=(0,e.computed)(()=>h(n.value.stickyStart,n.value.direction)),ge=(0,e.computed)(()=>h(n.value.stickyEnd,n.value.direction)),q=(0,e.computed)(()=>m(n.value.flowPaddingStart,n.value.direction)),_e=(0,e.computed)(()=>m(n.value.flowPaddingEnd,n.value.direction)),J=(0,e.computed)(()=>h(n.value.flowPaddingStart,n.value.direction)),ve=(0,e.computed)(()=>h(n.value.flowPaddingEnd,n.value.direction)),ye=(0,e.computed)(()=>b.value-(z.value===`vertical`?0:W.value+G.value)),be=(0,e.computed)(()=>x.value-(z.value===`horizontal`?0:K.value+ge.value)),xe=(0,e.computed)(()=>{if(P.value,!c.value&&n.value.ssrRange&&!_.value){let{start:e=0,end:t=0,colStart:r=0,colEnd:i=0}=n.value.ssrRange,a=n.value.columnCount||0,o=n.value.gap||0,s=n.value.columnGap||0,c=0,l=0;if(z.value===`both`){if(a>0){let e=i||a,t=N.query(e)-N.query(r);c=Math.max(0,t-(e>r?s:0))}if(V.value!==null){let n=t-e;l=Math.max(0,n*(V.value+o)-(n>0?o:0))}else{let n=M.query(t)-M.query(e);l=Math.max(0,n-(t>e?o:0))}}else if(z.value===`horizontal`){if(V.value!==null){let n=t-e;c=Math.max(0,n*(V.value+s)-(n>0?s:0))}else{let n=j.query(t)-j.query(e);c=Math.max(0,n-(t>e?s:0))}l=be.value}else if(c=ye.value,V.value!==null){let n=t-e;l=Math.max(0,n*(V.value+o)-(n>0?o:0))}else{let n=M.query(t)-M.query(e);l=Math.max(0,n-(t>e?o:0))}return{width:Math.max(c,ye.value),height:Math.max(l,be.value)}}return D({direction:z.value,itemsLength:n.value.items.length,columnCount:n.value.columnCount||0,fixedSize:V.value,fixedWidth:H.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,usableWidth:ye.value,usableHeight:be.value,queryY:e=>M.query(e),queryX:e=>j.query(e),queryColumn:e=>N.query(e)})}),Se=(0,e.computed)(()=>l(n.value.container)),Ce=(0,e.computed)(()=>xe.value.width+U.value+pe.value),we=(0,e.computed)(()=>xe.value.height+me.value+he.value),Y=(0,e.computed)(()=>q.value+W.value+G.value+_e.value+Ce.value),X=(0,e.computed)(()=>J.value+K.value+ge.value+ve.value+we.value),Z=(0,e.reactive)({x:(0,e.computed)(()=>Math.max(0,S.x-(q.value+W.value))),y:(0,e.computed)(()=>Math.max(0,S.y-(J.value+K.value)))}),Te=(0,e.computed)(()=>Se.value?Y.value:Math.min(Y.value,o)),Ee=(0,e.computed)(()=>Se.value?X.value:Math.min(X.value,o)),De=(0,e.computed)(()=>Se.value?Ce.value:Math.max(0,Te.value-(q.value+W.value+G.value+_e.value))),Oe=(0,e.computed)(()=>Se.value?we.value:Math.max(0,Ee.value-(J.value+K.value+ge.value+ve.value))),Q=(0,e.computed)(()=>{if(Se.value||Y.value<=1e7)return 1;let e=Y.value-b.value,t=Te.value-b.value;return t>0?e/t:1}),ke=(0,e.computed)(()=>{if(Se.value||X.value<=1e7)return 1;let e=X.value-x.value,t=Ee.value-x.value;return t>0?e/t:1}),Ae=(0,e.computed)(()=>{if(z.value===`vertical`)return 0;let e=q.value+W.value+U.value;return k.value-e}),$=(0,e.computed)(()=>{if(z.value===`horizontal`)return 0;let e=J.value+K.value+me.value;return A.value-e}),je=e=>{P.value;let t=n.value.columnGap||0,r=n.value.columnWidth;if(typeof r==`number`&&r>0)return r;if(Array.isArray(r)&&r.length>0){let t=r[e%r.length];return t!=null&&t>0?t:n.value.defaultColumnWidth||100}if(typeof r==`function`)return r(e);let i=N.get(e);return i>0?i-t:n.value.defaultColumnWidth||100},Me=e=>{if(P.value,z.value===`horizontal`)return be.value;let t=n.value.gap||0,r=n.value.itemSize;if(typeof r==`number`&&r>0)return r;if(typeof r==`function`){let t=n.value.items[e];return t===void 0?n.value.defaultItemSize||40:r(t,e)}let i=M.get(e);return i>0?i-t:n.value.defaultItemSize||40};function Ne(e,t,a){let o=typeof a==`object`&&a&&`isCorrection`in a?a.isCorrection:!1,s=n.value.container||window,{targetX:c,targetY:l,effectiveAlignX:u,effectiveAlignY:d}=T({rowIndex:e,colIndex:t,options:a,direction:z.value,viewportWidth:b.value,viewportHeight:x.value,totalWidth:Y.value,totalHeight:X.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,fixedSize:V.value,fixedWidth:H.value,relativeScrollX:Ae.value,relativeScrollY:$.value,getItemSizeY:e=>M.get(e),getItemSizeX:e=>j.get(e),getItemQueryY:e=>M.query(e),getItemQueryX:e=>j.query(e),getColumnSize:e=>N.get(e),getColumnQuery:e=>N.query(e),scaleX:Q.value,scaleY:ke.value,hostOffsetX:Z.x,hostOffsetY:Z.y,stickyIndices:de.value,stickyStartX:W.value,stickyStartY:K.value,stickyEndX:G.value,stickyEndY:ge.value,flowPaddingStartX:q.value,flowPaddingStartY:J.value,paddingStartX:U.value,paddingStartY:me.value,paddingEndX:pe.value,paddingEndY:he.value});if(!o){let n=p(a)?a.behavior:void 0;R.value={rowIndex:e,colIndex:t,options:{align:{x:u,y:d},...n==null?{}:{behavior:n}}}}let m=ee(c,Z.x,Q.value),h=ee(l,Z.y,ke.value),g=y.value?-m:m,_=h,v;p(a)&&(v=a.behavior);let S=o?`auto`:v||`smooth`;O.value=!0;let C={behavior:S};if(t!=null&&(C.left=y.value?g:Math.max(0,g)),e!=null&&(C.top=Math.max(0,_)),f(s,C),(S===`auto`||S===void 0)&&(t!=null&&(r.value=y.value?g:Math.max(0,g),k.value=c),e!=null&&(i.value=Math.max(0,_),A.value=l),R.value)){let e=R.value.options;p(e)?e.behavior=`auto`:R.value.options={align:e,behavior:`auto`}}}let Pe=(e,t,a)=>{let o=n.value.container||window;O.value=!0,R.value=null;let s=e==null?null:Math.max(0,Math.min(e,Y.value-b.value)),c=t==null?null:Math.max(0,Math.min(t,X.value-x.value));s!==null&&(k.value=s),c!==null&&(A.value=c);let l=typeof window<`u`&&o===window?window.scrollX:o.scrollLeft,u=typeof window<`u`&&o===window?window.scrollY:o.scrollTop,d=s===null?null:ee(s,Z.x,Q.value),p=c===null?null:ee(c,Z.y,ke.value),m=d===null?l:y.value?-d:d,h=p===null?u:p,g={behavior:a?.behavior||`auto`};e!=null&&(g.left=m),t!=null&&(g.top=h),f(o,g),(a?.behavior===`auto`||a?.behavior===void 0)&&(e!=null&&(r.value=m),t!=null&&(i.value=h))},Fe=(e,t)=>{if(j.resize(e),M.resize(e),N.resize(t),I.length!==e){let t=new Uint8Array(e);t.set(I.subarray(0,Math.min(e,I.length))),I=t}if(L.length!==e){let t=new Uint8Array(e);t.set(L.subarray(0,Math.min(e,L.length))),L=t}if(F.length!==t){let e=new Uint8Array(t);e.set(F.subarray(0,Math.min(t,F.length))),F=e}},Ie=()=>{let e=n.value.items.length,t=n.value.columnCount||0,r=n.value.gap||0,i=n.value.columnGap||0,a=n.value.columnWidth,o=!1,s=!1;if(t>0)for(let e=0;e<t;e++){let t=N.get(e),r=F[e]===1;if(!le.value||!r&&t===0){let r=0;r=typeof a==`number`&&a>0?a:Array.isArray(a)&&a.length>0?a[e%a.length]||n.value.defaultColumnWidth||100:typeof a==`function`?a(e):n.value.defaultColumnWidth||100;let s=r+i;Math.abs(t-s)>.5?(N.set(e,s),F[e]=le.value?0:1,o=!0):le.value||(F[e]=1)}}for(let t=0;t<e;t++){let e=n.value.items[t],a=j.get(t),o=M.get(t),c=I[t]===1,l=L[t]===1;if(z.value===`horizontal`){if(!B.value||!c&&a===0){let r=(typeof n.value.itemSize==`function`?n.value.itemSize(e,t):ue.value)+i;Math.abs(a-r)>.5?(j.set(t,r),I[t]=B.value?0:1,s=!0):B.value||(I[t]=1)}}else a!==0&&(j.set(t,0),I[t]=0,s=!0);if(z.value!==`horizontal`){if(!B.value||!l&&o===0){let i=(typeof n.value.itemSize==`function`?n.value.itemSize(e,t):ue.value)+r;Math.abs(o-i)>.5?(M.set(t,i),L[t]=B.value?0:1,s=!0):B.value||(L[t]=1)}}else o!==0&&(M.set(t,0),L[t]=0,s=!0)}o&&N.rebuild(),s&&(j.rebuild(),M.rebuild())},Le=()=>{let t=n.value.items,r=t.length;Fe(r,n.value.columnCount||0);let i=0;if(n.value.restoreScrollOnPrepend&&ce.length>0&&r>ce.length){let e=ce[0];if(e!==void 0){for(let n=1;n<=r-ce.length;n++)if(t[n]===e){i=n;break}}}if(i>0){j.shift(i),M.shift(i),R.value&&R.value.rowIndex!==null&&R.value.rowIndex!==void 0&&(R.value.rowIndex+=i);let a=new Uint8Array(r),o=new Uint8Array(r);a.set(I.subarray(0,Math.min(r-i,I.length)),i),o.set(L.subarray(0,Math.min(r-i,L.length)),i),I=a,L=o;let s=n.value.gap||0,c=n.value.columnGap||0,l=0,u=0;for(let e=0;e<i;e++){let r=typeof n.value.itemSize==`function`?n.value.itemSize(t[e],e):ue.value;z.value===`horizontal`?l+=r+c:u+=r+s}(l>0||u>0)&&(0,e.nextTick)(()=>{Pe(l>0?Ae.value+l:null,u>0?$.value+u:null,{behavior:`auto`,isCorrection:!0})})}Ie(),ce=[...t],se.value=!0,P.value++},Re=()=>{if(typeof window>`u`)return;let e=n.value.container||window,t=t=>{let n=t.getBoundingClientRect();if(e===window)return{x:y.value?document.documentElement.clientWidth-n.right-window.scrollX:n.left+window.scrollX,y:n.top+window.scrollY};if(e===t)return{x:0,y:0};if(u(e)){let t=e.getBoundingClientRect();return{x:y.value?t.right-n.right-e.scrollLeft:n.left-t.left+e.scrollLeft,y:n.top-t.top+e.scrollTop}}return{x:0,y:0}};if(n.value.hostElement){let e=t(n.value.hostElement);(Math.abs(S.x-e.x)>.1||Math.abs(S.y-e.y)>.1)&&(S.x=e.x,S.y=e.y)}if(n.value.hostRef){let e=t(n.value.hostRef);(Math.abs(C.x-e.x)>.1||Math.abs(C.y-e.y)>.1)&&(C.x=e.x,C.y=e.y)}};(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],Le,{immediate:!0}),(0,e.watch)(()=>[n.value.container,n.value.hostElement],()=>{Re()}),(0,e.watch)(y,(e,t)=>{if(t===void 0||e===t||!_.value)return;if(z.value===`vertical`){Re();return}let n=w(t?Math.abs(r.value):r.value,S.x,Q.value);Re(),Pe(n,null,{behavior:`auto`})},{flush:`sync`}),(0,e.watch)([Q,ke],()=>{!_.value||s.value||O.value||Pe(k.value,A.value,{behavior:`auto`})}),(0,e.watch)([()=>n.value.items.length,()=>n.value.columnCount],([t,n],[r,i])=>{(0,e.nextTick)(()=>{let e=Math.max(0,Y.value-b.value),a=Math.max(0,X.value-x.value);k.value>e||A.value>a?Pe(Math.min(k.value,e),Math.min(A.value,a),{behavior:`auto`}):(t!==r&&ke.value!==1||n!==i&&Q.value!==1)&&Pe(k.value,A.value,{behavior:`auto`}),Re()})});let ze=e=>{let t=n.value.gap||0,r=n.value.columnGap||0,i=V.value;if(z.value===`horizontal`){let t=(i||0)+r;return i!==null&&t>0?Math.floor(e/t):j.findLowerBound(e)}let a=(i||0)+t;return i!==null&&a>0?Math.floor(e/a):M.findLowerBound(e)},Be=e=>z.value===`both`?N.findLowerBound(e):z.value===`horizontal`?ze(e):0,Ve=(0,e.computed)(()=>{if(P.value,(!c.value||g.value)&&n.value.ssrRange)return{start:n.value.ssrRange.start,end:n.value.ssrRange.end};let e=n.value.ssrRange&&!s.value?0:n.value.bufferBefore??5,t=n.value.bufferAfter??5;return te({direction:z.value,relativeScrollX:Ae.value,relativeScrollY:$.value,usableWidth:ye.value,usableHeight:be.value,itemsLength:n.value.items.length,bufferBefore:e,bufferAfter:t,gap:n.value.gap||0,columnGap:n.value.columnGap||0,fixedSize:V.value,findLowerBoundY:e=>M.findLowerBound(e),findLowerBoundX:e=>j.findLowerBound(e),queryY:e=>M.query(e),queryX:e=>j.query(e)})}),He=(0,e.computed)(()=>{P.value;let e=Ae.value+W.value,t=$.value+K.value;return ze(z.value===`horizontal`?e:t)}),Ue=(0,e.computed)(()=>{P.value;let e=n.value.columnCount||0;if(!e)return{start:0,end:0,padStart:0,padEnd:0};if((!c.value||g.value)&&n.value.ssrRange){let{colStart:t=0,colEnd:r=0}=n.value.ssrRange,i=Math.max(0,t),a=Math.min(e,r||e),o=n.value.columnGap||0,s=H.value===null?N.query(i):i*(H.value+o),c=H.value===null?Math.max(0,N.query(e)-o):e*(H.value+o)-o,l=H.value===null?N.query(a)-(a>0?o:0):a*(H.value+o)-(a>0?o:0);return{start:i,end:a,padStart:s,padEnd:Math.max(0,c-l)}}let t=n.value.ssrRange&&!s.value?0:2;return E({columnCount:e,relativeScrollX:Ae.value,usableWidth:ye.value,colBuffer:t,fixedWidth:H.value,columnGap:n.value.columnGap||0,findLowerBound:e=>N.findLowerBound(e),query:e=>N.query(e),totalColsQuery:()=>N.query(e)})}),We=[],Ge=(0,e.computed)(()=>{P.value;let{start:e,end:t}=Ve.value,r=[],i=V.value,a=n.value.gap||0,o=n.value.columnGap||0,s=de.value,l=fe.value,u=[];if(c.value||!n.value.ssrRange){let t=He.value,n=v(s,t);n!==void 0&&n<e&&u.push(n)}for(let n=e;n<t;n++)u.push(n);let d=n.value.ssrRange?.start||0,f=n.value.ssrRange?.colStart||0,p=0,m=0;!c.value&&n.value.ssrRange&&(m=z.value===`horizontal`?0:i===null?M.query(d):d*(i+a),z.value===`horizontal`?p=i===null?j.query(f):f*(i+o):z.value===`both`&&(p=N.query(f)));let h=new Map(We.map(e=>[e.index,e])),g=-1,_=0,y=-1,b=0,x=e=>e===g+1?(_+=j.get(g),g=e,_):(_=j.query(e),g=e,_),S=e=>e===y+1?(b+=M.get(y),y=e,b):(b=M.query(e),y=e,b),C=q.value+W.value+U.value,w=J.value+K.value+me.value,ee=q.value+W.value,T=J.value+K.value,te=Ue.value;for(let e of u){let t=n.value.items[e];if(t===void 0)continue;let{x:i,y:a,width:o,height:u}=re({index:e,direction:z.value,fixedSize:V.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,usableWidth:ye.value,usableHeight:be.value,totalWidth:xe.value.width,queryY:S,queryX:x,getSizeY:e=>M.get(e),getSizeX:e=>j.get(e),columnRange:te}),d=l.has(e),f=i,g=a,{isStickyActive:_,isStickyActiveX:v,isStickyActiveY:y,stickyOffset:b}=ne({index:e,isSticky:d,direction:z.value,relativeScrollX:Ae.value,relativeScrollY:$.value,originalX:f,originalY:g,width:o,height:u,stickyIndices:s,fixedSize:V.value,fixedWidth:H.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,getItemQueryY:S,getItemQueryX:x}),E=c.value?k.value/Q.value+(i+C-k.value)-ee:i-p,ie=c.value?A.value/ke.value+(a+w-A.value)-T:a-m,D=h.get(e);D&&D.item===t&&D.offset.x===E&&D.offset.y===ie&&D.size.width===o&&D.size.height===u&&D.isSticky===d&&D.isStickyActive===_&&D.isStickyActiveX===v&&D.isStickyActiveY===y&&D.stickyOffset.x===b.x&&D.stickyOffset.y===b.y?r.push(D):r.push({item:t,index:e,offset:{x:E,y:ie},size:{width:o,height:u},originalX:f,originalY:g,isSticky:d,isStickyActive:_,isStickyActiveX:v,isStickyActiveY:y,stickyOffset:b})}return We=r,r}),Ke=(0,e.computed)(()=>{P.value;let e=Ae.value+W.value,t=$.value+K.value,n=Ae.value+(b.value-G.value)-1,a=$.value+(x.value-ge.value)-1,o=Be(e),c=ze(t),l=ze(z.value===`horizontal`?n:a),u=Be(n);return{items:Ge.value,currentIndex:c,currentColIndex:o,currentEndIndex:l,currentEndColIndex:u,scrollOffset:{x:k.value,y:A.value},displayScrollOffset:{x:y.value?Math.abs(r.value+C.x):Math.max(0,r.value-C.x),y:Math.max(0,i.value-C.y)},viewportSize:{width:b.value,height:x.value},displayViewportSize:{width:b.value,height:x.value},totalSize:{width:Y.value,height:X.value},isScrolling:s.value,isProgrammaticScroll:O.value,range:Ve.value,columnRange:Ue.value}}),qe=()=>{O.value=!1,R.value=null},Je=e=>{let t=e.target;typeof window>`u`||(oe(),t===window||t===document?(r.value=window.scrollX,i.value=window.scrollY,b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight):d(t)&&(r.value=t.scrollLeft,i.value=t.scrollTop,b.value=t.clientWidth,x.value=t.clientHeight),k.value=w(y.value?Math.abs(r.value):r.value,Z.x,Q.value),A.value=w(i.value,Z.y,ke.value),s.value||=(O.value||(R.value=null),!0),clearTimeout(ie),ie=setTimeout(()=>{s.value=!1,O.value=!1},250))},Ye=e=>{let t=!1,r=0,i=0,a=n.value.gap||0,o=n.value.columnGap||0,s=Ae.value,c=$.value,l=ze(z.value===`horizontal`?s:c),u=Be(s),d=z.value===`horizontal`,f=z.value===`both`,p=new Set,m=new Set,h=(e,i)=>{if(e>=0&&e<(n.value.columnCount||0)&&!m.has(e)){m.add(e);let n=N.get(e),a=i+o;if(!F[e]||Math.abs(n-a)>.1){let i=a-n;Math.abs(i)>.1&&(N.update(e,i),t=!0,e<u&&(r+=i)),F[e]=1}}};for(let{index:s,inlineSize:c,blockSize:u,element:m}of e){if(c<=0&&u<=0)continue;let e=B.value||typeof n.value.itemSize==`function`;if(s>=0&&!p.has(s)&&e&&u>0){if(p.add(s),d&&c>0){let e=j.get(s),n=c+o;if(!I[s]||Math.abs(n-e)>.1){let i=n-e;j.update(s,i),I[s]=1,t=!0,s<l&&(r+=i)}}if(!d){let e=M.get(s),n=u+a;if(!L[s]||Math.abs(n-e)>.1){let r=n-e;M.update(s,r),L[s]=1,t=!0,s<l&&(i+=r)}}}let g=le.value||typeof n.value.columnWidth==`function`;if(f&&m&&n.value.columnCount&&g&&(c>0||m.dataset.colIndex===void 0)){let e=m.dataset.colIndex;if(e!=null)h(Number.parseInt(e,10),c);else{let e=Array.from(m.querySelectorAll(`[data-col-index]`));for(let t of e)h(Number.parseInt(t.dataset.colIndex,10),t.getBoundingClientRect().width)}}}if(t&&(P.value++,!(R.value!==null||O.value)&&(r!==0||i!==0))){let e=q.value+W.value+U.value,t=J.value+K.value+me.value;Pe(r===0?null:s+r+e,i===0?null:c+i+t,{behavior:`auto`})}},Xe=(e,t,n,r)=>{Ye([{index:e,inlineSize:t,blockSize:n,element:r}])};function Ze(){if(R.value&&!g.value){let{rowIndex:e,colIndex:t,options:r}=R.value;if(p(r)&&r.behavior===`smooth`&&s.value)return;let i=n.value.container||window,a=typeof window<`u`&&i===window?window.scrollX:i.scrollLeft,o=typeof window<`u`&&i===window?window.scrollY:i.scrollTop,c=y.value?Math.abs(a):a,l=o,u=w(c,0,Q.value),d=w(l,0,ke.value),{targetX:f,targetY:m}=T({rowIndex:e,colIndex:t,options:r,direction:z.value,viewportWidth:b.value,viewportHeight:x.value,totalWidth:Ce.value,totalHeight:we.value,gap:n.value.gap||0,columnGap:n.value.columnGap||0,fixedSize:V.value,fixedWidth:H.value,relativeScrollX:u,relativeScrollY:d,getItemSizeY:e=>M.get(e),getItemSizeX:e=>j.get(e),getItemQueryY:e=>M.query(e),getItemQueryX:e=>j.query(e),getColumnSize:e=>N.get(e),getColumnQuery:e=>N.query(e),scaleX:Q.value,scaleY:ke.value,hostOffsetX:Z.x,hostOffsetY:Z.y,stickyIndices:de.value,stickyStartX:W.value,stickyStartY:K.value,stickyEndX:G.value,stickyEndY:ge.value,flowPaddingStartX:q.value,flowPaddingStartY:J.value,paddingStartX:U.value,paddingStartY:me.value,paddingEndX:pe.value,paddingEndY:he.value}),h=t==null||Math.abs(u-f)<2,g=e==null||Math.abs(d-m)<2,_=t==null||t===void 0||F[t]===1,v=e==null||e===void 0||L[e]===1;h&&g?_&&v&&!s.value&&!O.value&&(R.value=null):Ne(e,t,p(r)?{...r,isCorrection:!0}:{align:r,isCorrection:!0})}}(0,e.watch)([P,b,x],Ze),(0,e.watch)(s,e=>{e||Ze()});let Qe=null,$e=null,et,tt=e=>{if(typeof window>`u`)return;let t=e||window,n=t===window||u(t)&&t===document.documentElement?document:t;if(n.addEventListener(`scroll`,Je,{passive:!0}),ae=null,oe(),u(t)&&($e=new MutationObserver(()=>oe()),$e.observe(t,{attributes:!0,attributeFilter:[`dir`,`style`]})),et=setInterval(oe,1e3),t===window){b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight,r.value=window.scrollX,i.value=window.scrollY;let e=()=>{oe(),b.value=document.documentElement.clientWidth,x.value=document.documentElement.clientHeight,Re()};return window.addEventListener(`resize`,e),()=>{n.removeEventListener(`scroll`,Je),window.removeEventListener(`resize`,e),$e?.disconnect(),clearInterval(et),ae=null}}else return b.value=t.clientWidth,x.value=t.clientHeight,r.value=t.scrollLeft,i.value=t.scrollTop,Qe=new ResizeObserver(()=>{oe(),b.value=t.clientWidth,x.value=t.clientHeight,Re()}),Qe.observe(t),()=>{n.removeEventListener(`scroll`,Je),Qe?.disconnect(),$e?.disconnect(),clearInterval(et),ae=null}},nt;return(0,e.getCurrentInstance)()&&((0,e.onMounted)(()=>{_.value=!0,oe(),(0,e.watch)(()=>n.value.container,e=>{nt?.(),nt=tt(e||null)},{immediate:!0}),Re(),(0,e.nextTick)(()=>{if(Re(),n.value.ssrRange||n.value.initialScrollIndex!==void 0){let t=n.value.initialScrollIndex===void 0?n.value.ssrRange?.start:n.value.initialScrollIndex,r=n.value.initialScrollAlign||`start`;t!=null&&Ne(t,n.value.ssrRange?.colStart,{align:r,behavior:`auto`}),c.value=!0,g.value=!0,(0,e.nextTick)(()=>{g.value=!1})}else c.value=!0})}),(0,e.onUnmounted)(()=>{nt?.()})),{renderedItems:Ge,totalWidth:Y,totalHeight:X,renderedWidth:Te,renderedHeight:Ee,scrollDetails:Ke,getRowHeight:Me,getColumnWidth:je,getRowOffset:e=>J.value+K.value+me.value+M.query(e),getColumnOffset:e=>q.value+W.value+U.value+N.query(e),getItemOffset:e=>z.value===`horizontal`?q.value+W.value+U.value+j.query(e):J.value+K.value+me.value+M.query(e),getItemSize:e=>{if(z.value===`horizontal`)return Math.max(0,j.get(e)-(n.value.columnGap||0));let t=n.value.itemSize;if(typeof t==`number`&&t>0)return t;if(typeof t==`function`){let r=n.value.items[e];return r===void 0?n.value.defaultItemSize||40:t(r,e)}return Math.max(0,M.get(e)-(n.value.gap||0))},scrollToIndex:Ne,scrollToOffset:Pe,stopProgrammaticScroll:qe,updateItemSize:Xe,updateItemSizes:Ye,updateHostOffset:Re,updateDirection:oe,columnRange:Ue,refresh:()=>{j.resize(0),M.resize(0),N.resize(0),F.fill(0),I.fill(0),L.fill(0),Le()},isHydrated:c,isWindowContainer:Se,isRtl:y,scaleX:Q,scaleY:ke,componentOffset:Z,renderedVirtualWidth:De,renderedVirtualHeight:Oe}}function k(t){let n=(0,e.computed)(()=>(0,e.toValue)(t.axis)),r=(0,e.computed)(()=>(0,e.toValue)(t.totalSize)),i=(0,e.computed)(()=>(0,e.toValue)(t.position)),a=(0,e.computed)(()=>(0,e.toValue)(t.viewportSize)),o=(0,e.computed)(()=>(0,e.toValue)(t.containerId)),s=(0,e.computed)(()=>!!(0,e.toValue)(t.isRtl)),c=(0,e.computed)(()=>n.value===`horizontal`),l=(0,e.computed)(()=>r.value<=0?0:Math.min(1,a.value/r.value)),u=(0,e.computed)(()=>{let e=r.value-a.value;return e<=0?0:Math.max(0,Math.min(1,i.value/e))}),d=(0,e.computed)(()=>{let e=a.value>0?32/a.value:.1;return Math.max(Math.min(e,.1),l.value)*100}),f=(0,e.computed)(()=>u.value*(100-d.value)),p=(0,e.computed)(()=>c.value?{inlineSize:`${d.value}%`,insetInlineStart:`${f.value}%`}:{blockSize:`${d.value}%`,insetBlockStart:`${f.value}%`}),m=(0,e.computed)(()=>{let e=a.value,t=`var(--vs-scrollbar-has-cross-gap, var(--vsi-scrollbar-has-cross-gap, 0)) * var(--vs-scrollbar-cross-gap, var(--vsi-scrollbar-size, 8px))`;return c.value?{inlineSize:`calc(${Math.max(0,e-4)}px - ${t})`}:{blockSize:`calc(${Math.max(0,e-4)}px - ${t})`}}),h=(0,e.ref)(!1),g=0,_=0;function v(e){let n=e.currentTarget;if(e.target!==n)return;let i=n.getBoundingClientRect(),o=c.value?i.width:i.height,l=0;l=c.value?s.value?i.right-e.clientX:e.clientX-i.left:e.clientY-i.top;let u=d.value/100*o,f=(l-u/2)/(o-u),p=r.value-a.value,m=f*p;m>p-1&&(m=p),t.scrollToOffset(Math.max(0,Math.min(p,m)))}function y(e){h.value=!0,g=c.value?s.value?-e.clientX:e.clientX:e.clientY,_=i.value,e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault(),e.stopPropagation()}function b(e){if(!h.value)return;let n=e.currentTarget.parentElement;if(!n)return;let i=(c.value?s.value?-e.clientX:e.clientX:e.clientY)-g,o=n.getBoundingClientRect(),l=c.value?o.width:o.height,u=l-d.value/100*l;if(u<=0)return;let f=r.value-a.value,p=_+i/u*f;p>f-1&&(p=f),t.scrollToOffset(Math.max(0,Math.min(f,p)))}function x(e){h.value&&(h.value=!1,e.currentTarget.releasePointerCapture(e.pointerId))}return(0,e.getCurrentInstance)()&&(0,e.onUnmounted)(()=>{h.value=!1}),{viewportPercent:l,positionPercent:u,thumbSizePercent:d,thumbPositionPercent:f,trackStyle:m,thumbStyle:p,trackProps:(0,e.computed)(()=>({class:[`virtual-scrollbar-track`,`virtual-scrollbar-track--${c.value?`horizontal`:`vertical`}`],style:m.value,role:`scrollbar`,"aria-orientation":n.value,"aria-valuenow":Math.round(i.value),"aria-valuemin":0,"aria-valuemax":Math.round(r.value-a.value),"aria-controls":o.value,tabindex:-1,onMousedown:v})),thumbProps:(0,e.computed)(()=>({class:[`virtual-scrollbar-thumb`,`virtual-scrollbar-thumb--${c.value?`horizontal`:`vertical`}`,{"virtual-scrollbar-thumb--active":h.value}],style:p.value,onPointerdown:y,onPointermove:b,onPointerup:x,onPointercancel:x})),isDragging:h}}var A=(0,e.defineComponent)({__name:`VirtualScrollbar`,props:{axis:{default:`vertical`},totalSize:{},position:{},viewportSize:{},scrollToOffset:{},containerId:{},isRtl:{type:Boolean,default:!1}},emits:[`scrollToOffset`],setup(t,{emit:n}){let r=t,i=n,{trackProps:a,thumbProps:o}=k({axis:()=>r.axis,totalSize:()=>r.totalSize,position:()=>r.position,viewportSize:()=>r.viewportSize,containerId:()=>r.containerId,isRtl:()=>r.isRtl,scrollToOffset:e=>{r.scrollToOffset?.(e),i(`scrollToOffset`,e)}});return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a))),[(0,e.createElementVNode)(`div`,(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(o))),null,16)],16))}}),ae=A,oe={key:0,class:`virtual-scroll-scrollbar-container`},j={key:0,class:`virtual-scroll-debug-info`},M=.95,N=.1,P=(0,e.defineComponent)({__name:`VirtualScroll`,props:{containerTag:{default:`div`},wrapperTag:{default:`div`},itemTag:{default:`div`},stickyHeader:{type:Boolean,default:!1},stickyFooter:{type:Boolean,default:!1},virtualScrollbar:{type:Boolean,default:!1},items:{},itemSize:{},direction:{default:`vertical`},bufferBefore:{default:5},bufferAfter:{default:5},container:{},ssrRange:{},columnCount:{default:0},columnWidth:{},scrollPaddingStart:{default:0},scrollPaddingEnd:{default:0},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,a=r,o=(0,e.useSlots)(),s=(0,e.ref)(null),c=(0,e.ref)(null),l=(0,e.ref)(null),u=(0,e.ref)(null),d=new Map,f=(0,e.useId)(),p=(0,e.computed)(()=>`vs-container-${f}`),g=(0,e.ref)(0),_=(0,e.ref)(0),v=(0,e.computed)(()=>i.container===void 0?s.value:i.container),y=(0,e.computed)(()=>{let e=v.value;return e===s.value||typeof window<`u`&&(e===window||e===null)}),b=(0,e.computed)(()=>(i.items.length,{items:i.items,itemSize:i.itemSize,direction:i.direction,bufferBefore:i.bufferBefore,bufferAfter:i.bufferAfter,container:v.value,hostElement:c.value,hostRef:s.value,ssrRange:i.ssrRange,columnCount:i.columnCount,columnWidth:i.columnWidth,scrollPaddingStart:{x:m(i.scrollPaddingStart,i.direction),y:h(i.scrollPaddingStart,i.direction)},scrollPaddingEnd:{x:m(i.scrollPaddingEnd,i.direction),y:h(i.scrollPaddingEnd,i.direction)},flowPaddingStart:{x:0,y:i.stickyHeader?0:g.value},flowPaddingEnd:{x:0,y:i.stickyFooter?0:_.value},stickyStart:{x:0,y:i.stickyHeader&&y.value?g.value:0},stickyEnd:{x:0,y:i.stickyFooter&&y.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})),{isHydrated:x,isRtl:S,columnRange:C,renderedItems:ee,scrollDetails:T,renderedHeight:te,renderedWidth:E,getColumnWidth:ne,getRowHeight:re,scrollToIndex:D,scrollToOffset:A,updateHostOffset:P,updateItemSizes:F,updateDirection:I,getItemOffset:L,getRowOffset:R,getColumnOffset:se,getItemSize:ce,refresh:z,stopProgrammaticScroll:B,scaleX:le,scaleY:V,isWindowContainer:H,componentOffset:ue,renderedVirtualWidth:de,renderedVirtualHeight:fe}=O(b),U=(0,e.computed)(()=>le.value!==1||V.value!==1),pe=(0,e.computed)(()=>H.value?!1:i.virtualScrollbar===!0||le.value!==1||V.value!==1);function me(e){let{displayViewportSize:t}=T.value;e>=te.value-t.height-.5?A(null,1/0):A(null,w(e,ue.y,V.value))}function he(e){let{displayViewportSize:t}=T.value;e>=E.value-t.width-.5?A(1/0,null):A(w(e,ue.x,le.value),null)}let W=k({axis:`vertical`,totalSize:te,position:(0,e.computed)(()=>T.value.displayScrollOffset.y),viewportSize:(0,e.computed)(()=>T.value.displayViewportSize.height),scrollToOffset:me,containerId:p,isRtl:S}),G=k({axis:`horizontal`,totalSize:E,position:(0,e.computed)(()=>T.value.displayScrollOffset.x),viewportSize:(0,e.computed)(()=>T.value.displayViewportSize.width),scrollToOffset:he,containerId:p,isRtl:S}),K=(0,e.computed)(()=>i.direction===`both`?{...C.value,padStart:0,padEnd:0}:C.value);function ge(){z(),I(),(0,e.nextTick)(()=>{let e=[];for(let[t,n]of d.entries())n&&e.push({index:t,inlineSize:n.offsetWidth,blockSize:n.offsetHeight,element:n});e.length>0&&F(e)})}(0,e.watch)(T,(e,t)=>{!x.value||!e||(a(`scroll`,e),(!t||!t.range||!t.columnRange||e.range.start!==t.range.start||e.range.end!==t.range.end||e.columnRange.start!==t.columnRange.start||e.columnRange.end!==t.columnRange.end)&&a(`visibleRangeChange`,{start:e.range.start,end:e.range.end,colStart:e.columnRange.start,colEnd:e.columnRange.end}),!i.loading&&(i.direction!==`horizontal`&&e.totalSize&&e.totalSize.height-(e.scrollOffset.y+e.viewportSize.height)<=i.loadDistance&&a(`load`,`vertical`),i.direction!==`vertical`&&e.totalSize&&e.totalSize.width-(e.scrollOffset.x+e.viewportSize.width)<=i.loadDistance&&a(`load`,`horizontal`)))}),(0,e.watch)(x,e=>{e&&T.value?.range&&T.value?.columnRange&&a(`visibleRangeChange`,{start:T.value.range.start,end:T.value.range.end,colStart:T.value.columnRange.start,colEnd:T.value.columnRange.end})},{once:!0});let q=typeof window>`u`?null:new ResizeObserver(P),_e=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&&F(t)}),J=typeof window>`u`?null:new ResizeObserver(()=>{g.value=l.value?.offsetHeight||0,_.value=u.value?.offsetHeight||0,P()});function ve(t,n){(0,e.watch)(t,(e,t)=>{t&&J?.unobserve(t),e?J?.observe(e):n.value=0},{immediate:!0})}ve(l,g),ve(u,_),(0,e.onMounted)(()=>{s.value&&q?.observe(s.value);for(let e of d.values())_e?.observe(e),i.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>_e?.observe(e))}),(0,e.watch)([s,c],([e],[t])=>{t&&q?.unobserve(t),e&&q?.observe(e)}),(0,e.watch)([s,U],([e,t],[n,r])=>{let i=e!==n||t!==r;n&&i&&n.removeEventListener(`wheel`,Q),e&&i&&e.addEventListener(`wheel`,Q,{passive:!t})},{immediate:!0});function ye(e,t){if(e)d.set(t,e),_e?.observe(e),i.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>_e?.observe(e));else{let e=d.get(t);e&&(_e?.unobserve(e),i.direction===`both`&&e.querySelectorAll(`[data-col-index]`).forEach(e=>_e?.unobserve(e)),d.delete(t))}}let be=(0,e.ref)(!1),xe={x:0,y:0},Se={x:0,y:0},Ce={x:0,y:0},we=0,Y={x:0,y:0},X=null;function Z(){let e=()=>{Y.x*=M,Y.y*=M;let t=T.value.scrollOffset.x,n=T.value.scrollOffset.y;A(t+Y.x*16,n+Y.y*16,{behavior:`auto`}),Math.abs(Y.x)>N||Math.abs(Y.y)>N?X=requestAnimationFrame(e):Te()};X=requestAnimationFrame(e)}function Te(){X!==null&&(cancelAnimationFrame(X),X=null),Y={x:0,y:0}}function Ee(e){B(),Te(),U.value&&(e.pointerType===`mouse`&&e.button!==0||(be.value=!0,xe={x:e.clientX,y:e.clientY},Ce={x:e.clientX,y:e.clientY},we=performance.now(),Se={x:T.value.scrollOffset.x,y:T.value.scrollOffset.y},e.currentTarget.setPointerCapture(e.pointerId)))}function De(e){if(!be.value)return;let t=performance.now(),n=t-we;if(n>0){let t=(Ce.x-e.clientX)/n,r=(Ce.y-e.clientY)/n;Y.x=Y.x*.2+t*.8,Y.y=Y.y*.2+r*.8}Ce={x:e.clientX,y:e.clientY},we=t;let r=xe.x-e.clientX,i=xe.y-e.clientY;requestAnimationFrame(()=>{A(Se.x+r,Se.y+i,{behavior:`auto`})})}function Oe(e){be.value&&(be.value=!1,e.currentTarget.releasePointerCapture(e.pointerId),(Math.abs(Y.x)>N||Math.abs(Y.y)>N)&&(Math.abs(Y.x)>4*Math.abs(Y.y)?Y.y=0:Math.abs(Y.y)>4*Math.abs(Y.x)&&(Y.x=0),Z()))}function Q(e){let{scrollOffset:t}=T.value;if(B(),U.value){e.preventDefault();let n=e.deltaX,r=e.deltaY;e.shiftKey&&n===0&&(n=r,r=0),A(t.x+n,t.y+r,{behavior:`auto`})}}function ke(e){let{viewportSize:t,scrollOffset:n}=T.value,r=i.direction!==`vertical`,a=i.direction!==`horizontal`,o=b.value.stickyStart,s=b.value.stickyEnd;switch(e.key){case`Home`:e.preventDefault(),B(),D(0,0,{behavior:Math.max(n.x,n.y)>10*(i.direction===`horizontal`?t.width:t.height)?`auto`:`smooth`,align:`start`});break;case`End`:{e.preventDefault(),B();let r=i.items.length-1,a=(i.columnCount||0)>0?i.columnCount-1:0,{totalSize:o}=T.value,s=Math.max(o.width-n.x-t.width,o.height-n.y-t.height)>10*(i.direction===`horizontal`?t.width:t.height)?`auto`:`smooth`;i.direction===`both`?D(r,a,{behavior:s,align:`end`}):D(i.direction===`vertical`?r:0,i.direction===`horizontal`?r:0,{behavior:s,align:`end`});break}case`ArrowUp`:{if(e.preventDefault(),B(),!a)return;let{currentIndex:t,scrollOffset:n}=T.value,r=n.y+o.y+b.value.scrollPaddingStart.y;R(t)<r-1?D(t,null,{align:`start`}):t>0&&D(t-1,null,{align:`start`});break}case`ArrowDown`:{if(e.preventDefault(),B(),!a)return;let{currentEndIndex:r}=T.value,o=n.y+t.height-(s.y+b.value.scrollPaddingEnd.y);R(r)+re(r)>o+1?D(r,null,{align:`end`}):r<i.items.length-1&&D(r+1,null,{align:`end`});break}case`ArrowLeft`:{if(e.preventDefault(),B(),!r)return;let{currentColIndex:a,currentEndColIndex:c}=T.value;if(S.value){let e=n.x+t.width-(s.x+b.value.scrollPaddingEnd.x);(i.columnCount?se(c)+ne(c):L(c)+ce(c))>e+1?D(null,c,{align:`end`}):c<(i.columnCount?i.columnCount-1:i.items.length-1)&&D(null,c+1,{align:`end`})}else{let e=n.x+o.x+b.value.scrollPaddingStart.x;(i.columnCount?se(a):L(a))<e-1?D(null,a,{align:`start`}):a>0&&D(null,a-1,{align:`start`})}break}case`ArrowRight`:{if(e.preventDefault(),B(),!r)return;let{currentColIndex:a,currentEndColIndex:c}=T.value;if(S.value){let e=n.x+o.x+b.value.scrollPaddingStart.x;(i.columnCount?se(a):L(a))<e-1?D(null,a,{align:`start`}):a>0&&D(null,a-1,{align:`start`})}else{let e=n.x+t.width-(s.x+b.value.scrollPaddingEnd.x);(i.columnCount?se(c)+ne(c):L(c)+ce(c))>e+1?D(null,c,{align:`end`}):c<(i.columnCount?i.columnCount-1:i.items.length-1)&&D(null,c+1,{align:`end`})}break}case`PageUp`:e.preventDefault(),B(),A(!a&&r?n.x-t.width:null,a?n.y-t.height:null);break;case`PageDown`:e.preventDefault(),B(),A(!a&&r?n.x+t.width:null,a?n.y+t.height:null);break}}(0,e.onUnmounted)(()=>{q?.disconnect(),_e?.disconnect(),J?.disconnect()});let Ae=(0,e.computed)(()=>{let e={...i.direction===`vertical`?{}:{whiteSpace:`nowrap`}};return(pe.value||!H.value)&&(e.overflow=`auto`),U.value&&(e.touchAction=`none`),H.value?e:i.containerTag===`table`?{...e,display:`block`,minInlineSize:i.direction===`vertical`?`100%`:`auto`}:e}),$=(0,e.computed)(()=>{if(i.direction===`horizontal`)return null;let{displayViewportSize:e,displayScrollOffset:t}=T.value;if(te.value<=e.height)return null;let n={axis:`vertical`,totalSize:te.value,position:t.y,viewportSize:e.height,scrollToOffset:me,containerId:p.value,isRtl:S.value};return{axis:`vertical`,positionPercent:W.positionPercent.value,viewportPercent:W.viewportPercent.value,thumbSizePercent:W.thumbSizePercent.value,thumbPositionPercent:W.thumbPositionPercent.value,trackProps:W.trackProps.value,thumbProps:W.thumbProps.value,scrollbarProps:n,isDragging:W.isDragging.value}}),je=(0,e.computed)(()=>{if(i.direction===`vertical`)return null;let{displayViewportSize:e,displayScrollOffset:t}=T.value;if(E.value<=e.width)return null;let n={axis:`horizontal`,totalSize:E.value,position:t.x,viewportSize:e.width,scrollToOffset:he,containerId:p.value,isRtl:S.value};return{axis:`horizontal`,positionPercent:G.positionPercent.value,viewportPercent:G.viewportPercent.value,thumbSizePercent:G.thumbSizePercent.value,thumbPositionPercent:G.thumbPositionPercent.value,trackProps:G.trackProps.value,thumbProps:G.thumbProps.value,scrollbarProps:n,isDragging:G.isDragging.value}}),Me=(0,e.computed)(()=>{let e=i.direction===`horizontal`,t=i.direction===`vertical`,n=i.direction===`both`,r={inlineSize:t?`100%`:`${de.value}px`,blockSize:e?`100%`:`${fe.value}px`};return x.value||(r.display=`flex`,r.flexDirection=e?`row`:`column`,(e||n)&&i.columnGap&&(r.columnGap=`${i.columnGap}px`),(t||n)&&i.gap&&(r.rowGap=`${i.gap}px`)),r}),Ne=(0,e.computed)(()=>{let e=i.direction===`horizontal`;return{display:e?`inline-block`:`block`,...e?{blockSize:`100%`,verticalAlign:`top`}:{inlineSize:`100%`}}}),Pe=(0,e.computed)(()=>({inlineSize:i.direction===`vertical`?`1px`:`${de.value}px`,blockSize:i.direction===`horizontal`?`1px`:`${fe.value}px`}));function Fe(e){let t=ie({containerTag:i.containerTag||`div`,direction:i.direction,isHydrated:x.value,item:e,itemSize:i.itemSize,paddingStartX:b.value.scrollPaddingStart.x,paddingStartY:b.value.scrollPaddingStart.y,isRtl:S.value});return!x.value&&i.direction===`both`&&(t.display=`flex`,i.columnGap&&(t.columnGap=`${i.columnGap}px`)),t}let Ie=(0,e.computed)(()=>i.debug),Le=(0,e.computed)(()=>i.containerTag===`table`),Re=(0,e.computed)(()=>Le.value?`thead`:`div`),ze=(0,e.computed)(()=>Le.value?`tfoot`:`div`);return n({...(0,e.toRefs)(i),scrollDetails:T,columnRange:C,getColumnWidth:ne,getRowHeight:re,getRowOffset:R,getColumnOffset:se,getItemOffset:L,getItemSize:ce,scrollToIndex:D,scrollToOffset:A,refresh:ge,stopProgrammaticScroll:()=>{B(),Te()},updateDirection:I,isRtl:S,isHydrated:x,scaleX:le,scaleY:V,renderedWidth:E,renderedHeight:te,componentOffset:ue,scrollbarPropsVertical:$,scrollbarPropsHorizontal:je}),(n,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.containerTag),{id:p.value,ref_key:`hostRef`,ref:s,class:(0,e.normalizeClass)([`virtual-scroll-container`,[`virtual-scroll--${t.direction}`,{"virtual-scroll--hydrated":(0,e.unref)(x),"virtual-scroll--window":(0,e.unref)(H),"virtual-scroll--table":Le.value,"virtual-scroll--hide-scrollbar":pe.value}]]),style:(0,e.normalizeStyle)(Ae.value),tabindex:`0`,onKeydown:ke,onPointerdown:Ee,onPointermove:De,onPointerup:Oe,onPointercancel:Oe},{default:(0,e.withCtx)(()=>[pe.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,oe,[(0,e.createElementVNode)(`div`,{class:`virtual-scroll-scrollbar-viewport`,style:(0,e.normalizeStyle)({inlineSize:`${(0,e.unref)(T).displayViewportSize.width}px`,blockSize:`${(0,e.unref)(T).displayViewportSize.height}px`,"--vsi-scrollbar-has-cross-gap":t.direction===`both`?1:0})},[o.scrollbar&&$.value?(0,e.renderSlot)(n.$slots,`scrollbar`,(0,e.normalizeProps)((0,e.mergeProps)({key:0},$.value)),void 0,!0):$.value?((0,e.openBlock)(),(0,e.createBlock)(ae,(0,e.normalizeProps)((0,e.mergeProps)({key:1},$.value.scrollbarProps)),null,16)):(0,e.createCommentVNode)(``,!0),o.scrollbar&&je.value?(0,e.renderSlot)(n.$slots,`scrollbar`,(0,e.normalizeProps)((0,e.mergeProps)({key:2},je.value)),void 0,!0):je.value?((0,e.openBlock)(),(0,e.createBlock)(ae,(0,e.normalizeProps)((0,e.mergeProps)({key:3},je.value.scrollbarProps)),null,16)):(0,e.createCommentVNode)(``,!0)],4)])):(0,e.createCommentVNode)(``,!0),o.header?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(Re.value),{key:1,ref_key:`headerRef`,ref:l,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:c,class:`virtual-scroll-wrapper`,style:(0,e.normalizeStyle)(Me.value)},{default:(0,e.withCtx)(()=>[Le.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.itemTag),{key:0,class:`virtual-scroll-spacer`,style:(0,e.normalizeStyle)(Pe.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)(ee),r=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.itemTag),{key:r.index,ref_for:!0,ref:e=>ye(e,r.index),"data-index":r.index,class:(0,e.normalizeClass)([`virtual-scroll-item`,{"virtual-scroll--sticky":r.isStickyActive,"virtual-scroll--debug":Ie.value}]),style:(0,e.normalizeStyle)(Fe(r))},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`item`,{item:r.item,index:r.index,columnRange:K.value,getColumnWidth:(0,e.unref)(ne),gap:i.gap,columnGap:i.columnGap,isSticky:r.isSticky,isStickyActive:r.isStickyActive,isStickyActiveX:r.isStickyActiveX,isStickyActiveY:r.isStickyActiveY,offset:r.offset},void 0,!0),Ie.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,j,` #`+(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&&o.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:2,class:`virtual-scroll-loading`,style:(0,e.normalizeStyle)(Ne.value)},[(0,e.renderSlot)(n.$slots,`loading`,{},void 0,!0)],4)):(0,e.createCommentVNode)(``,!0),o.footer?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(ze.value),{key:3,ref_key:`footerRef`,ref:u,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,[`id`,`class`,`style`]))}}),F=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},I=F(P,[[`__scopeId`,`data-v-408dd72c`]]);exports.BROWSER_MAX_SIZE=o,exports.DEFAULT_BUFFER=5,exports.DEFAULT_COLUMN_WIDTH=100,exports.DEFAULT_ITEM_SIZE=40,exports.EMPTY_SCROLL_DETAILS=i,exports.FenwickTree=a,exports.VirtualScroll=I,exports.VirtualScrollbar=ae,exports.calculateColumnRange=E,exports.calculateItemPosition=re,exports.calculateItemStyle=ie,exports.calculateRange=te,exports.calculateScrollTarget=T,exports.calculateStickyItem=ne,exports.calculateTotalSize=D,exports.displayToVirtual=w,exports.findPrevStickyIndex=v,exports.getPaddingX=m,exports.getPaddingY=h,exports.isBody=c,exports.isElement=u,exports.isItemVisible=C,exports.isScrollToIndexOptions=p,exports.isScrollableElement=d,exports.isWindow=s,exports.isWindowLike=l,exports.scrollTo=f,exports.useVirtualScroll=O,exports.useVirtualScrollbar=k,exports.virtualToDisplay=ee;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|