@glhrmoura/vue-virtualize 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -46,7 +46,7 @@ const users = shallowRef(
46
46
  </script>
47
47
 
48
48
  <template>
49
- <VirtualList :items="users" :estimate-size="60" :height="500" :get-item-key="(user) => user.id">
49
+ <VirtualList :items="users" :height="500" :get-item-key="(user) => user.id">
50
50
  <template #default="{ item, index }">
51
51
  <UserCard :user="item" :index="index" />
52
52
  </template>
@@ -54,6 +54,63 @@ const users = shallowRef(
54
54
  </template>
55
55
  ```
56
56
 
57
+ `estimateSize` defaults to `48`. Keep it a number for hundreds of thousands or millions of rows so the list uses `count × size` and never walks every index. A function estimate does not scale. Container scroll needs a `height` (unless `window-scroll`).
58
+
59
+ #### Horizontal list
60
+
61
+ ```vue
62
+ <VirtualList
63
+ :items="slides"
64
+ horizontal
65
+ :width="640"
66
+ :height="180"
67
+ :estimate-size="200"
68
+ :get-item-key="(slide) => slide.id"
69
+ >
70
+ <template #default="{ item }">
71
+ <SlideCard :slide="item" />
72
+ </template>
73
+ </VirtualList>
74
+ ```
75
+
76
+ #### Window scroll
77
+
78
+ Use the document/window as the scroller. No fixed container height required.
79
+
80
+ ```vue
81
+ <VirtualList
82
+ :items="posts"
83
+ window-scroll
84
+ :estimate-size="72"
85
+ :get-item-key="(post) => post.id"
86
+ @visible-range-change="onRange"
87
+ @scroll-end="onScrollEnd"
88
+ >
89
+ <template #default="{ item }">
90
+ <PostCard :post="item" />
91
+ </template>
92
+ </VirtualList>
93
+ ```
94
+
95
+ #### Reverse / chat feed
96
+
97
+ `reverse` starts at the end, sticks to the bottom when new items append, and keeps scroll stable when older items are prepended (requires stable `get-item-key`).
98
+
99
+ ```vue
100
+ <VirtualList
101
+ :items="messages"
102
+ reverse
103
+ :height="480"
104
+ :estimate-size="56"
105
+ :get-item-key="(message) => message.id"
106
+ @visible-range-change="maybeLoadOlder"
107
+ >
108
+ <template #default="{ item }">
109
+ <MessageBubble :message="item" />
110
+ </template>
111
+ </VirtualList>
112
+ ```
113
+
57
114
  #### VirtualGrid
58
115
 
59
116
  ```vue
@@ -72,6 +129,16 @@ const users = shallowRef(
72
129
 
73
130
  #### VirtualTable
74
131
 
132
+ Sticky header is on by default. Pin columns with `pin: 'start' | 'end'` (first column, actions, etc.). Give pinned cells a solid background so content does not show through.
133
+
134
+ ```ts
135
+ const columns = [
136
+ { id: 'name', header: 'Name', width: 220, pin: 'start' },
137
+ { id: 'email', header: 'Email', width: 280 },
138
+ { id: 'actions', header: '', width: 120, pin: 'end' },
139
+ ]
140
+ ```
141
+
75
142
  ```vue
76
143
  <VirtualTable :rows="users" :columns="columns" :estimate-row-size="44" :height="500">
77
144
  <template #cell="{ row, column, value }">
@@ -88,20 +155,33 @@ const { virtualItems, totalSize, scrollToIndex } = useVirtualizer({
88
155
  container,
89
156
  estimateSize: () => 52,
90
157
  overscan: 4,
158
+ windowScroll: false,
159
+ reverse: false,
160
+ onVisibleRangeChange: (range) => {
161
+ if (range.endIndex >= range.count - 8) loadMore()
162
+ },
163
+ onScrollEnd: () => {},
91
164
  })
92
165
  ```
93
166
 
167
+ ### Events / callbacks
168
+
169
+ | Name | Where | When |
170
+ | --- | --- | --- |
171
+ | `visibleRangeChange` / `onVisibleRangeChange` | components / composables | Visible index window changes |
172
+ | `scrollEnd` / `onScrollEnd` | components / composables | Scroll settles (~120ms idle) |
173
+
94
174
  ### API Reference
95
175
 
96
- | Export | Role |
97
- | ---------------- | --------------------------------------------------- |
98
- | `VirtualList` | One axis, vertical or `horizontal` |
99
- | `VirtualGrid` | Flat array, `columnCount`, row and column estimates |
100
- | `VirtualTable` | `rows`, `columns`, windowed body |
176
+ | Export | Role |
177
+ | --- | --- |
178
+ | `VirtualList` | One axis, vertical or `horizontal`, optional `window-scroll` / `reverse` |
179
+ | `VirtualGrid` | Flat array, `columnCount`, row and column estimates |
180
+ | `VirtualTable` | `rows`, `columns`, sticky header, pinned columns |
101
181
  | `useVirtualizer` | Custom markup driven by `virtualItems` and `totalSize` |
102
- | `useVirtualList` | Headless list adapter |
103
- | `useVirtualGrid` | Headless grid adapter |
104
- | `useVirtualTable`| Headless table adapter |
182
+ | `useVirtualList` | Headless list adapter |
183
+ | `useVirtualGrid` | Headless grid adapter |
184
+ | `useVirtualTable` | Headless table adapter |
105
185
 
106
186
  ### License
107
187
 
@@ -1,4 +1,5 @@
1
1
  import { type HTMLAttributes } from 'vue';
2
+ import type { VisibleRange } from '../core/types.d.ts';
2
3
  declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
4
  props: import("vue").PublicProps & __VLS_PrettifyLocal<{
4
5
  items: readonly T[];
@@ -16,11 +17,16 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
16
17
  tag?: string;
17
18
  itemAttrs?: HTMLAttributes;
18
19
  revision?: unknown;
20
+ windowScroll?: boolean;
21
+ scrollMargin?: number;
22
+ } & {
23
+ onVisibleRangeChange?: ((range: VisibleRange) => any) | undefined;
24
+ onScrollEnd?: (() => any) | undefined;
19
25
  }> & (typeof globalThis extends {
20
26
  __VLS_PROPS_FALLBACK: infer P;
21
27
  } ? P : {});
22
28
  expose: (exposed: import("vue").ShallowUnwrapRef<{
23
- scrollToIndex: (index: number, scrollOptions?: import("..").ScrollToIndexOptions) => void;
29
+ scrollToIndex: (index: number, scrollOptions?: import("../core/types.d.ts").ScrollToIndexOptions) => void;
24
30
  scrollToOffset: (offset: {
25
31
  top?: number;
26
32
  left?: number;
@@ -36,11 +42,11 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
36
42
  index: number;
37
43
  rowIndex: number;
38
44
  columnIndex: number;
39
- row: import("..").VirtualItem;
40
- column: import("..").VirtualItem;
45
+ row: import("../core/types.d.ts").VirtualItem;
46
+ column: import("../core/types.d.ts").VirtualItem;
41
47
  }) => any;
42
48
  };
43
- emit: {};
49
+ emit: ((evt: "visibleRangeChange", range: VisibleRange) => void) & ((evt: "scrollEnd") => void);
44
50
  }>) => import("vue").VNode & {
45
51
  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
46
52
  };
@@ -1,4 +1,5 @@
1
1
  import { type HTMLAttributes } from 'vue';
2
+ import type { VisibleRange } from '../core/types.d.ts';
2
3
  declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
4
  props: import("vue").PublicProps & __VLS_PrettifyLocal<{
4
5
  items: readonly T[];
@@ -15,11 +16,17 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
15
16
  itemTag?: string;
16
17
  itemAttrs?: HTMLAttributes;
17
18
  revision?: unknown;
19
+ windowScroll?: boolean;
20
+ scrollMargin?: number;
21
+ reverse?: boolean;
22
+ } & {
23
+ onVisibleRangeChange?: ((range: VisibleRange) => any) | undefined;
24
+ onScrollEnd?: (() => any) | undefined;
18
25
  }> & (typeof globalThis extends {
19
26
  __VLS_PROPS_FALLBACK: infer P;
20
27
  } ? P : {});
21
28
  expose: (exposed: import("vue").ShallowUnwrapRef<{
22
- scrollToIndex: (index: number, scrollOptions?: import("..").ScrollToIndexOptions) => void;
29
+ scrollToIndex: (index: number, scrollOptions?: import("../core/types.d.ts").ScrollToIndexOptions) => void;
23
30
  scrollToOffset: (offset: number, behavior?: ScrollBehavior) => void;
24
31
  measure: (index: number, size: number) => void;
25
32
  }>) => void;
@@ -35,7 +42,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
35
42
  end: number;
36
43
  }) => any;
37
44
  };
38
- emit: {};
45
+ emit: ((evt: "visibleRangeChange", range: VisibleRange) => void) & ((evt: "scrollEnd") => void);
39
46
  }>) => import("vue").VNode & {
40
47
  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
41
48
  };
@@ -1,5 +1,6 @@
1
1
  import { type HTMLAttributes } from 'vue';
2
- import { type VirtualTableColumn } from '../composables/useVirtualTable';
2
+ import { type VirtualTableColumn } from '../composables/useVirtualTable.d.ts';
3
+ import type { VisibleRange } from '../core/types.d.ts';
3
4
  declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
4
5
  props: import("vue").PublicProps & __VLS_PrettifyLocal<{
5
6
  rows: readonly T[];
@@ -13,30 +14,36 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
13
14
  tag?: string;
14
15
  rowAttrs?: HTMLAttributes;
15
16
  revision?: unknown;
17
+ windowScroll?: boolean;
18
+ scrollMargin?: number;
19
+ reverse?: boolean;
20
+ } & {
21
+ onVisibleRangeChange?: ((range: VisibleRange) => any) | undefined;
22
+ onScrollEnd?: (() => any) | undefined;
16
23
  }> & (typeof globalThis extends {
17
24
  __VLS_PROPS_FALLBACK: infer P;
18
25
  } ? P : {});
19
26
  expose: (exposed: import("vue").ShallowUnwrapRef<{
20
- scrollToIndex: (index: number, scrollOptions?: import("..").ScrollToIndexOptions) => void;
27
+ scrollToIndex: (index: number, scrollOptions?: import("../core/types.d.ts").ScrollToIndexOptions) => void;
21
28
  scrollToOffset: (offset: number, behavior?: ScrollBehavior) => void;
22
29
  measure: (index: number, size: number) => void;
23
30
  }>) => void;
24
31
  attrs: any;
25
32
  slots: {
26
33
  header?: (props: {
27
- columns: import("..").PlacedVirtualTableColumn<T>[];
34
+ columns: import("../composables/useVirtualTable.d.ts").PlacedVirtualTableColumn<T>[];
28
35
  }) => any;
29
36
  } & {
30
37
  empty?: (props: {}) => any;
31
38
  } & {
32
39
  cell?: (props: {
33
40
  row: T;
34
- column: import("..").PlacedVirtualTableColumn<T>;
41
+ column: import("../composables/useVirtualTable.d.ts").PlacedVirtualTableColumn<T>;
35
42
  rowIndex: number;
36
43
  value: unknown;
37
44
  }) => any;
38
45
  };
39
- emit: {};
46
+ emit: ((evt: "visibleRangeChange", range: VisibleRange) => void) & ((evt: "scrollEnd") => void);
40
47
  }>) => import("vue").VNode & {
41
48
  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
42
49
  };
@@ -1,6 +1,6 @@
1
1
  import { type MaybeRefOrGetter } from 'vue';
2
- import type { ScrollToIndexOptions, VirtualItem } from '../core/types';
3
- import { type UseVirtualizerOptions } from './useVirtualizer';
2
+ import type { ScrollToIndexOptions, VirtualItem, VisibleRange } from '../core/types.d.ts';
3
+ import { type UseVirtualizerOptions } from './useVirtualizer.d.ts';
4
4
  export interface VirtualGridCell<T> {
5
5
  index: number;
6
6
  key: string | number;
@@ -22,6 +22,10 @@ export interface UseVirtualGridOptions<T> {
22
22
  getItemKey?: (item: T, index: number) => string | number;
23
23
  initialRect?: UseVirtualizerOptions['initialRect'];
24
24
  revision?: UseVirtualizerOptions['revision'];
25
+ windowScroll?: UseVirtualizerOptions['windowScroll'];
26
+ scrollMargin?: UseVirtualizerOptions['scrollMargin'];
27
+ onVisibleRangeChange?: (range: VisibleRange) => void;
28
+ onScrollEnd?: () => void;
25
29
  }
26
30
  export declare function useVirtualGrid<T>(options: UseVirtualGridOptions<T>): {
27
31
  virtualRows: import("vue").ComputedRef<VirtualItem[]>;
@@ -1,6 +1,6 @@
1
1
  import { type MaybeRefOrGetter } from 'vue';
2
- import type { VirtualItem } from '../core/types';
3
- import { type UseVirtualizerOptions } from './useVirtualizer';
2
+ import type { VirtualItem, VisibleRange } from '../core/types.d.ts';
3
+ import { type UseVirtualizerOptions } from './useVirtualizer.d.ts';
4
4
  export interface VirtualListItem<T> extends VirtualItem {
5
5
  item: T;
6
6
  }
@@ -18,6 +18,11 @@ export interface UseVirtualListOptions<T> {
18
18
  initialRect?: UseVirtualizerOptions['initialRect'];
19
19
  viewportInset?: UseVirtualizerOptions['viewportInset'];
20
20
  revision?: UseVirtualizerOptions['revision'];
21
+ windowScroll?: UseVirtualizerOptions['windowScroll'];
22
+ scrollMargin?: UseVirtualizerOptions['scrollMargin'];
23
+ reverse?: UseVirtualizerOptions['reverse'];
24
+ onVisibleRangeChange?: (range: VisibleRange) => void;
25
+ onScrollEnd?: () => void;
21
26
  }
22
27
  export declare function useVirtualList<T>(options: UseVirtualListOptions<T>): {
23
28
  virtualItems: import("vue").ComputedRef<VirtualListItem<T>[]>;
@@ -25,7 +30,7 @@ export declare function useVirtualList<T>(options: UseVirtualListOptions<T>): {
25
30
  scrollOffset: import("vue").ComputedRef<number>;
26
31
  scrollAdjust: import("vue").ComputedRef<number>;
27
32
  isScrolling: import("vue").ComputedRef<boolean>;
28
- scrollToIndex: (index: number, scrollOptions?: import("..").ScrollToIndexOptions) => void;
33
+ scrollToIndex: (index: number, scrollOptions?: import("../core/types.d.ts").ScrollToIndexOptions) => void;
29
34
  scrollToOffset: (offset: number, behavior?: ScrollBehavior) => void;
30
35
  measure: (index: number, size: number) => void;
31
36
  measureElement: (target: unknown, index: number) => void;
@@ -1,17 +1,21 @@
1
- import { type MaybeRefOrGetter } from 'vue';
2
- import { type UseVirtualListOptions, type VirtualListItem } from './useVirtualList';
1
+ import { type CSSProperties, type MaybeRefOrGetter } from 'vue';
2
+ import type { VisibleRange } from '../core/types.d.ts';
3
+ import { type UseVirtualListOptions, type VirtualListItem } from './useVirtualList.d.ts';
3
4
  export interface VirtualTableColumn<T> {
4
5
  id: string;
5
6
  header: string;
6
7
  width?: number;
7
8
  minWidth?: number;
8
9
  align?: 'left' | 'center' | 'right';
10
+ pin?: 'start' | 'end';
9
11
  accessor?: (row: T, index: number) => unknown;
10
12
  }
11
13
  export interface PlacedVirtualTableColumn<T> extends VirtualTableColumn<T> {
12
14
  start: number;
13
15
  size: number;
14
16
  end: number;
17
+ pinOffset: number;
18
+ stickyStyle: CSSProperties;
15
19
  }
16
20
  export interface UseVirtualTableOptions<T> {
17
21
  rows: MaybeRefOrGetter<readonly T[]>;
@@ -24,6 +28,11 @@ export interface UseVirtualTableOptions<T> {
24
28
  viewportInset?: UseVirtualListOptions<T>['viewportInset'];
25
29
  revision?: UseVirtualListOptions<T>['revision'];
26
30
  itemSize?: UseVirtualListOptions<T>['itemSize'];
31
+ windowScroll?: UseVirtualListOptions<T>['windowScroll'];
32
+ scrollMargin?: UseVirtualListOptions<T>['scrollMargin'];
33
+ reverse?: UseVirtualListOptions<T>['reverse'];
34
+ onVisibleRangeChange?: (range: VisibleRange) => void;
35
+ onScrollEnd?: () => void;
27
36
  }
28
37
  export declare function useVirtualTable<T>(options: UseVirtualTableOptions<T>): {
29
38
  virtualRows: import("vue").ComputedRef<VirtualListItem<T>[]>;
@@ -33,7 +42,7 @@ export declare function useVirtualTable<T>(options: UseVirtualTableOptions<T>):
33
42
  scrollOffset: import("vue").ComputedRef<number>;
34
43
  scrollAdjust: import("vue").ComputedRef<number>;
35
44
  isScrolling: import("vue").ComputedRef<boolean>;
36
- scrollToIndex: (index: number, scrollOptions?: import("..").ScrollToIndexOptions) => void;
45
+ scrollToIndex: (index: number, scrollOptions?: import("../core/types.d.ts").ScrollToIndexOptions) => void;
37
46
  scrollToOffset: (offset: number, behavior?: ScrollBehavior) => void;
38
47
  measure: (index: number, size: number) => void;
39
48
  measureElement: (target: unknown, index: number) => void;
@@ -1,5 +1,5 @@
1
1
  import { type MaybeRefOrGetter } from 'vue';
2
- import type { ScrollToIndexOptions, VirtualItem } from '../core/types';
2
+ import type { ScrollToIndexOptions, VirtualItem, VisibleRange } from '../core/types.d.ts';
3
3
  export interface UseVirtualizerOptions {
4
4
  count: MaybeRefOrGetter<number>;
5
5
  estimateSize: (index: number) => number;
@@ -18,6 +18,11 @@ export interface UseVirtualizerOptions {
18
18
  } | undefined>;
19
19
  viewportInset?: MaybeRefOrGetter<number>;
20
20
  revision?: MaybeRefOrGetter<unknown>;
21
+ windowScroll?: MaybeRefOrGetter<boolean>;
22
+ scrollMargin?: MaybeRefOrGetter<number>;
23
+ reverse?: MaybeRefOrGetter<boolean>;
24
+ onVisibleRangeChange?: (range: VisibleRange) => void;
25
+ onScrollEnd?: () => void;
21
26
  }
22
27
  export declare function useVirtualizer(options: UseVirtualizerOptions): {
23
28
  virtualItems: import("vue").ComputedRef<VirtualItem[]>;
@@ -7,4 +7,5 @@ export declare class MeasurementCache {
7
7
  get hasDivergent(): boolean;
8
8
  clear(): void;
9
9
  trim(count: number, baseline: number | null): void;
10
+ shift(delta: number): void;
10
11
  }
@@ -1,4 +1,4 @@
1
- import type { ScrollAlignment } from './types';
1
+ import type { ScrollAlignment } from './types.d.ts';
2
2
  export declare const MAX_SCROLL_SIZE = 16777216;
3
3
  export declare function clampScrollOffset(offset: number, totalSize: number, viewport: number): number;
4
4
  export declare function scrollContentSize(totalSize: number, measured?: number): number;
@@ -23,3 +23,8 @@ export interface ScrollToIndexOptions {
23
23
  align?: ScrollAlignment;
24
24
  behavior?: ScrollBehavior;
25
25
  }
26
+ export interface VisibleRange {
27
+ startIndex: number;
28
+ endIndex: number;
29
+ count: number;
30
+ }
@@ -1,4 +1,4 @@
1
- import type { ScrollAlignment, VirtualItem, VirtualizerOptions } from './types';
1
+ import type { ScrollAlignment, VirtualItem, VirtualizerOptions } from './types.d.ts';
2
2
  export declare class Virtualizer {
3
3
  private count;
4
4
  private estimateSize;
@@ -22,6 +22,7 @@ export declare class Virtualizer {
22
22
  getViewportSize(): number;
23
23
  measure(index: number, size: number): boolean;
24
24
  clearMeasurements(): void;
25
+ shiftMeasurements(delta: number): void;
25
26
  getItemSize(index: number): number;
26
27
  getItemOffset(index: number): number;
27
28
  getTotalSize(): number;
package/dist/index.d.ts CHANGED
@@ -1,15 +1,15 @@
1
- export { Virtualizer } from './core/virtualizer';
2
- export { MeasurementCache, normalizeSize } from './core/measurements';
3
- export { clampScrollOffset, mapDomOffsetToVirtual, mapVirtualOffsetToDom, resolveScrollOffset, scrollContentSize, } from './core/scrolling';
4
- export type { ScrollAlignment, ScrollToIndexOptions, VirtualItem, VirtualizerOptions, } from './core/types';
5
- export { useVirtualizer } from './composables/useVirtualizer';
6
- export type { UseVirtualizerOptions } from './composables/useVirtualizer';
7
- export { useVirtualList } from './composables/useVirtualList';
8
- export type { UseVirtualListOptions, VirtualListItem } from './composables/useVirtualList';
9
- export { useVirtualGrid } from './composables/useVirtualGrid';
10
- export type { UseVirtualGridOptions, VirtualGridCell } from './composables/useVirtualGrid';
11
- export { useVirtualTable } from './composables/useVirtualTable';
12
- export type { PlacedVirtualTableColumn, UseVirtualTableOptions, VirtualTableColumn, } from './composables/useVirtualTable';
13
- export { default as VirtualList } from './components/VirtualList.vue';
14
- export { default as VirtualGrid } from './components/VirtualGrid.vue';
15
- export { default as VirtualTable } from './components/VirtualTable.vue';
1
+ export { Virtualizer } from './core/virtualizer.d.ts';
2
+ export { MeasurementCache, normalizeSize } from './core/measurements.d.ts';
3
+ export { clampScrollOffset, mapDomOffsetToVirtual, mapVirtualOffsetToDom, resolveScrollOffset, scrollContentSize, } from './core/scrolling.d.ts';
4
+ export type { ScrollAlignment, ScrollToIndexOptions, VirtualItem, VirtualizerOptions, VisibleRange, } from './core/types.d.ts';
5
+ export { useVirtualizer } from './composables/useVirtualizer.d.ts';
6
+ export type { UseVirtualizerOptions } from './composables/useVirtualizer.d.ts';
7
+ export { useVirtualList } from './composables/useVirtualList.d.ts';
8
+ export type { UseVirtualListOptions, VirtualListItem } from './composables/useVirtualList.d.ts';
9
+ export { useVirtualGrid } from './composables/useVirtualGrid.d.ts';
10
+ export type { UseVirtualGridOptions, VirtualGridCell } from './composables/useVirtualGrid.d.ts';
11
+ export { useVirtualTable } from './composables/useVirtualTable.d.ts';
12
+ export type { PlacedVirtualTableColumn, UseVirtualTableOptions, VirtualTableColumn, } from './composables/useVirtualTable.d.ts';
13
+ export { default as VirtualList } from './components/VirtualList.vue.d.ts';
14
+ export { default as VirtualGrid } from './components/VirtualGrid.vue.d.ts';
15
+ export { default as VirtualTable } from './components/VirtualTable.vue.d.ts';
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue");function G(e){return!Number.isFinite(e)||e<0?0:e}class te{sizes=new Map;divergent=!1;get(n){return this.sizes.get(n)}set(n,i,r){this.sizes.set(n,i),r!==null&&Math.abs(i-r)>=.5&&(this.divergent=!0)}get hasDivergent(){return this.divergent}clear(){this.sizes.clear(),this.divergent=!1}trim(n,i){let r=!1;for(const s of this.sizes.keys())s>=n&&(this.sizes.delete(s),r=!0);if(r&&(this.divergent=!1,i!==null)){for(const s of this.sizes.values())if(Math.abs(s-i)>=.5){this.divergent=!0;return}}}}function ne(e,n,i){return Math.min(i,Math.max(n,e))}const ge=16777216;function B(e,n,i){const r=Math.max(0,n-Math.max(0,i));return ne(Number.isFinite(e)?e:0,0,r)}function C(e,n){const i=Math.max(0,Number.isFinite(e)?e:0),r=Math.min(i,ge);return n===void 0||!Number.isFinite(n)||n<=0?r:Math.min(r,n)}function ie(e,n,i,r){const s=Math.max(0,n-Math.max(0,r)),o=Math.max(0,i-Math.max(0,r));return s<=0?0:o<=0||o>=s?B(e,n,r):Math.max(0,e)/o*s}function re(e,n,i,r){const s=Math.max(0,n-Math.max(0,r)),o=Math.max(0,i-Math.max(0,r));return o<=0?0:s<=0||o>=s?B(e,n,r):B(e,n,r)/s*o}function ve(e,n,i){if(e<=0)return 0;let r=0,s=e-1,o=e-1;for(;r<=s;){const d=r+s>>>1;i(d)>n?(o=d,s=d-1):r=d+1}return o}function Se(e,n,i){if(e<=0)return 0;let r=0,s=e-1,o=0;for(;r<=s;){const d=r+s>>>1;i(d)<n?(o=d,r=d+1):s=d-1}return o}function se(e){const n=e.start+e.size;let i=e.align;if(i==="auto"){const r=e.current+e.viewport;if(e.start>=e.current&&n<=r)return e.current;i=e.start<e.current?"start":"end"}return i==="center"?e.start-(e.viewport-e.size)/2:i==="end"?n-e.viewport:e.start}class oe{count=0;estimateSize=()=>0;overscan=0;gap=0;paddingStart=0;paddingEnd=0;lanes=1;itemSize=null;viewportSize=0;scrollOffset=0;getItemKey=n=>n;measurements=new te;built=0;offsets=[];laneCursor=[];laneEnd=[];setOptions(n){const i=Math.max(1,Math.floor(n.lanes??1)),r=n.gap??0,s=n.paddingStart??0,o=n.paddingEnd??0,d=Math.max(0,Math.floor(n.count)),x=n.itemSize===void 0||n.itemSize===null?null:G(n.itemSize),p=this.itemSize,V=i!==this.lanes||r!==this.gap||s!==this.paddingStart||o!==this.paddingEnd||n.estimateSize!==this.estimateSize||x!==this.itemSize;this.count=d,this.lanes=i,this.gap=r,this.paddingStart=s,this.paddingEnd=o,this.overscan=Math.max(0,Math.floor(n.overscan??0)),this.estimateSize=n.estimateSize,this.itemSize=x,this.getItemKey=n.getItemKey??(y=>y),n.viewportSize!==void 0&&(this.viewportSize=Math.max(0,n.viewportSize)),x!==p&&this.measurements.clear(),this.measurements.trim(this.count,this.itemSize),(V||this.built>this.count)&&this.resetGeometry()}setScrollOffset(n){this.scrollOffset=Number.isFinite(n)?n:0}getScrollOffset(){return this.scrollOffset}getViewportSize(){return this.viewportSize}measure(n,i){if(n<0||n>=this.count)return!1;const r=G(i),s=this.measurements.get(n);if(s!==void 0&&Math.abs(s-r)<.5)return!1;const o=this.getItemSize(n);return this.measurements.set(n,r,this.itemSize),Math.abs(o-r)<.5?!1:(this.resetGeometry(),!0)}clearMeasurements(){this.measurements.clear(),this.resetGeometry()}getItemSize(n){const i=this.measurements.get(n);return i!==void 0?i:this.itemSize!==null?this.itemSize:G(this.estimateSize(n))}getItemOffset(n){if(n<=0||this.count<=0)return this.paddingStart;const i=Math.min(n,this.count-1);if(this.usesFixedPath()){const r=Math.floor(i/this.lanes);return this.paddingStart+r*((this.itemSize??0)+this.gap)}return this.ensure(i),this.offsets[i]??this.paddingStart}getTotalSize(){if(this.count<=0)return this.paddingStart+this.paddingEnd;if(this.usesFixedPath()){let i=this.paddingStart;const r=this.itemSize??0;for(let s=0;s<this.lanes&&s<this.count;s+=1){const o=this.laneLength(s),d=this.paddingStart+o*r+Math.max(0,o-1)*this.gap;d>i&&(i=d)}return i+this.paddingEnd}this.ensure(this.count-1);let n=this.paddingStart;for(let i=0;i<this.lanes&&i<this.count;i+=1){const r=this.laneEnd[i]??this.paddingStart;r>n&&(n=r)}return n+this.paddingEnd}getVirtualItems(){if(this.count<=0||this.viewportSize<=0)return[];const n=B(this.scrollOffset,this.getTotalSize(),this.viewportSize),i=n+this.viewportSize,r=[];for(let s=0;s<this.lanes;s+=1){const o=this.laneLength(s);if(o<=0)continue;const d=ve(o,n,y=>{const b=this.ordinalIndex(s,y);return this.getItemOffset(b)+this.getItemSize(b)}),x=Se(o,i,y=>this.getItemOffset(this.ordinalIndex(s,y))),p=Math.max(0,Math.min(d,x)-this.overscan),V=Math.min(o-1,Math.max(d,x)+this.overscan);for(let y=p;y<=V;y+=1){const b=this.ordinalIndex(s,y),I=this.getItemOffset(b),M=this.getItemSize(b);r.push({index:b,key:this.getItemKey(b),start:I,size:M,end:I+M,lane:s})}}return r.sort((s,o)=>s.index-o.index),r}getOffsetForIndex(n,i="auto"){if(this.count<=0)return 0;const r=ne(n,0,this.count-1),s=this.getItemOffset(r),o=this.getItemSize(r),d=se({start:s,size:o,viewport:this.viewportSize,current:this.scrollOffset,align:i});return B(d,this.getTotalSize(),this.viewportSize)}usesFixedPath(){return this.itemSize!==null&&!this.measurements.hasDivergent}ordinalIndex(n,i){return n+i*this.lanes}laneLength(n){return n<0||n>=this.lanes||n>=this.count?0:Math.floor((this.count-n-1)/this.lanes)+1}ensure(n){if(n<this.built)return;const i=Math.min(n,this.count-1);for(;this.built<=i;){const r=this.built%this.lanes,s=this.laneCursor[r]??this.paddingStart;this.offsets[this.built]=s;const o=s+this.getItemSize(this.built);this.laneEnd[r]=o,this.laneCursor[r]=o+this.gap,this.built+=1}}resetGeometry(){this.built=0,this.offsets=[],this.laneCursor=Array.from({length:this.lanes},()=>this.paddingStart),this.laneEnd=Array.from({length:this.lanes},()=>this.paddingStart)}}function L(){return typeof window<"u"&&typeof document<"u"}function ae(e){return typeof Element>"u"?null:e instanceof Element?e:null}function ze(e,n,i,r){if(r==="smooth"&&typeof e.scrollTo=="function"){e.scrollTo({top:i?e.scrollTop:n,left:i?n:e.scrollLeft,behavior:r});return}i?e.scrollLeft=n:e.scrollTop=n}function q(e,n){return n?e.scrollLeft:e.scrollTop}function U(e,n){return n?e.clientWidth:e.clientHeight}function ye(e,n){return n?e.scrollWidth:e.scrollHeight}function Z(e){return typeof requestAnimationFrame=="function"?requestAnimationFrame(e):setTimeout(e,0)}function J(e){e&&(typeof cancelAnimationFrame=="function"?cancelAnimationFrame(e):clearTimeout(e))}function pe(e,n){if(e.length!==n.length)return!1;for(let i=0;i<e.length;i+=1){const r=e[i],s=n[i];if(!r||!s||r.index!==s.index||r.start!==s.start||r.size!==s.size||r.end!==s.end||r.lane!==s.lane||r.key!==s.key)return!1}return!0}function N(e){const n=new oe,i=t.shallowRef([]),r=t.ref(0),s=t.ref(0),o=t.ref(0),d=t.ref(!1),x=a=>e.estimateSize(a);let p=null,V=null,y=null,b=0,I=0,M=0,u=t.toValue(e.revision);const c=new Map,m=new Map,l=[];function S(){const a=t.toValue(e.container);return typeof HTMLElement>"u"?null:a instanceof HTMLElement?a:null}function h(){return t.toValue(e.horizontal)??!1}function F(){const a=t.toValue(e.initialRect);return a?h()?a.width:a.height:0}function K(a,f){return a?C(f,ye(a,h())):C(f)}function $(a,f,g){return ie(q(a,h()),f,K(a,f),g)}function v(a,f,g,O,k){ze(a,re(f,g,K(a,g),O),h(),k)}function w(){const a=t.toValue(e.revision);Object.is(a,u)||(u=a,n.clearMeasurements());const f=S(),g=f?U(f,h()):0,O=t.toValue(e.viewportInset)??0,k=Math.max(0,(g>0?g:F())-O),T=t.toValue(e.itemSize);n.setOptions({count:t.toValue(e.count),estimateSize:x,overscan:t.toValue(e.overscan)??5,gap:t.toValue(e.gap)??0,paddingStart:t.toValue(e.paddingStart)??0,paddingEnd:t.toValue(e.paddingEnd)??0,lanes:t.toValue(e.lanes)??1,itemSize:T??null,getItemKey:e.getItemKey,viewportSize:k});const R=n.getTotalSize(),D=Math.max(0,R-k);n.getScrollOffset()>D&&(n.setScrollOffset(D),f&&v(f,D,R,k,"auto"));const X=n.getVirtualItems();pe(i.value,X)||(i.value=X),r.value!==R&&(r.value=R);const P=n.getScrollOffset();s.value!==P&&(s.value=P);const Y=f?P-q(f,h()):0;o.value!==Y&&(o.value=Y)}function z(){if(!L()){w();return}b||(b=Z(()=>{b=0,d.value=!0,w(),typeof window<"u"&&(window.clearTimeout(M),M=window.setTimeout(()=>{d.value=!1},150))}))}function E(){const a=S();if(!a)return;const f=n.getViewportSize(),g=n.getTotalSize();n.setScrollOffset($(a,g,f)),z()}function j(){const a=S();if(a===p||(p&&(p.removeEventListener("scroll",E),V?.disconnect(),V=null),p=a,!a||!L()))return;const f=n.getViewportSize(),g=n.getTotalSize();n.getScrollOffset()>0?v(a,n.getScrollOffset(),g,f,"auto"):n.setScrollOffset($(a,g,f)),a.addEventListener("scroll",E,{passive:!0}),typeof ResizeObserver<"u"&&(V=new ResizeObserver(()=>w()),V.observe(a))}function ce(){return!L()||typeof ResizeObserver>"u"?null:(y||(y=new ResizeObserver(a=>{const f=h();let g=!1;for(const O of a){const k=c.get(O.target);if(k===void 0)continue;const T=O.borderBoxSize?.[0],R=f?T?.inlineSize??O.contentRect.width:T?.blockSize??O.contentRect.height;R>0&&n.measure(k,R)&&(g=!0)}g&&w()})),y)}function fe(){I=0;const a=l.splice(0,l.length),f=h();let g=!1;for(const O of a){if(!O.element.isConnected)continue;const k=O.element.getBoundingClientRect(),T=f?k.width:k.height;T>0&&n.measure(O.index,T)&&(g=!0)}g&&w()}function de(a,f){const g=ae(a),O=ce(),k=m.get(f);k&&k!==g&&(O?.unobserve(k),c.delete(k),m.delete(f)),g&&(m.set(f,g),c.set(g,f),O?.observe(g),l.push({element:g,index:f}),!I&&(I=Z(fe)))}function _(a,f="auto"){const g=S(),O=g?U(g,h()):0,k=O>0?O:n.getViewportSize(),T=n.getTotalSize(),R=B(a,T,k);n.setScrollOffset(R),g&&v(g,R,T,k,f),w()}function me(a,f){const g=n.getOffsetForIndex(a,f?.align??"auto");_(g,f?.behavior??"auto")}function he(a,f){n.measure(a,f)&&w()}return w(),t.watch(()=>[t.toValue(e.count),t.toValue(e.overscan),t.toValue(e.gap),t.toValue(e.paddingStart),t.toValue(e.paddingEnd),t.toValue(e.lanes),t.toValue(e.horizontal),t.toValue(e.itemSize),t.toValue(e.viewportInset),t.toValue(e.revision),t.toValue(e.container),t.toValue(e.initialRect)?.width,t.toValue(e.initialRect)?.height],()=>{j(),w()},{flush:"post"}),t.onBeforeUnmount(()=>{p&&p.removeEventListener("scroll",E),V?.disconnect(),y?.disconnect(),J(b),J(I),typeof window<"u"&&window.clearTimeout(M),c.clear(),m.clear(),l.length=0}),{virtualItems:t.computed(()=>i.value),totalSize:t.computed(()=>r.value),scrollOffset:t.computed(()=>s.value),scrollAdjust:t.computed(()=>o.value),isScrolling:t.computed(()=>d.value),scrollToIndex:me,scrollToOffset:_,measure:he,measureElement:de}}function we(e,n,i){return typeof e=="function"?e(n,i):typeof e=="number"?e:48}function H(e){const n=N({count:()=>t.toValue(e.items).length,estimateSize:r=>{const s=t.toValue(e.items);return we(e.estimateSize,r,s[r])},getItemKey:r=>{const o=t.toValue(e.items)[r];return e.getItemKey?.(o,r)??r},itemSize:()=>e.itemSize!==void 0?t.toValue(e.itemSize):typeof e.estimateSize=="number"?e.estimateSize:void 0,container:e.container,horizontal:e.horizontal,overscan:e.overscan,gap:e.gap,paddingStart:e.paddingStart,paddingEnd:e.paddingEnd,initialRect:e.initialRect,viewportInset:e.viewportInset,revision:e.revision});return{virtualItems:t.computed(()=>{const r=t.toValue(e.items);return n.virtualItems.value.map(s=>{const o=r[s.index];return{...s,item:o,key:e.getItemKey?.(o,s.index)??s.key}})}),totalSize:n.totalSize,scrollOffset:n.scrollOffset,scrollAdjust:n.scrollAdjust,isScrolling:n.isScrolling,scrollToIndex:n.scrollToIndex,scrollToOffset:n.scrollToOffset,measure:n.measure,measureElement:n.measureElement}}function Q(e,n,i){return typeof e=="function"?e(n):typeof e=="number"?e:i}function le(e){const n=t.computed(()=>Math.max(1,Math.floor(t.toValue(e.columnCount)||1))),i=t.computed(()=>Math.ceil(t.toValue(e.items).length/n.value)),r=new Map,s=N({count:()=>i.value,estimateSize:u=>Q(t.toValue(e.estimateRowSize),u,48),itemSize:()=>{const u=t.toValue(e.estimateRowSize);return typeof u=="number"?u:void 0},overscan:()=>t.toValue(e.overscanRows)??t.toValue(e.overscan)??2,gap:()=>t.toValue(e.rowGap)??0,horizontal:!1,container:e.container,initialRect:e.initialRect,revision:e.revision}),o=N({count:()=>n.value,estimateSize:u=>Q(t.toValue(e.estimateColumnSize),u,160),itemSize:()=>{const u=t.toValue(e.estimateColumnSize);return typeof u=="number"?u:void 0},overscan:()=>t.toValue(e.overscanColumns)??t.toValue(e.overscan)??1,gap:()=>t.toValue(e.columnGap)??0,horizontal:!0,container:e.container,initialRect:e.initialRect,revision:e.revision}),d=t.computed(()=>{const u=t.toValue(e.items),c=n.value,m=[];for(const l of s.virtualItems.value)for(const S of o.virtualItems.value){const h=l.index*c+S.index;if(h>=u.length)continue;const F=u[h];m.push({index:h,key:e.getItemKey?.(F,h)??h,item:F,row:l,column:S})}return m});function x(u,c){const m=t.toValue(e.items);if(!m.length)return;const l=Math.min(Math.max(u,0),m.length-1),S=n.value;s.scrollToIndex(Math.floor(l/S),c),o.scrollToIndex(l%S,c)}function p(u,c="auto"){u.top!==void 0&&s.scrollToOffset(u.top,c),u.left!==void 0&&o.scrollToOffset(u.left,c)}function V(u,c){const m=Math.max(r.get(u)??0,c);m<=0||m===r.get(u)||(r.set(u,m),s.measure(u,m))}let y=null;const b=new Map;function I(){return!L()||typeof ResizeObserver>"u"?null:(y||(y=new ResizeObserver(u=>{for(const c of u){const m=b.get(c.target);if(m===void 0)continue;const S=c.borderBoxSize?.[0]?.blockSize??c.contentRect.height;S>0&&V(m,S)}})),y)}function M(u,c){const m=ae(u),l=I();if(!m)return;b.set(m,c),l?.observe(m);const S=m.getBoundingClientRect().height;S>0&&V(c,S)}return t.onBeforeUnmount(()=>{y?.disconnect(),b.clear()}),{virtualRows:s.virtualItems,virtualColumns:o.virtualItems,virtualCells:d,totalHeight:s.totalSize,totalWidth:o.totalSize,scrollAdjustX:o.scrollAdjust,scrollAdjustY:s.scrollAdjust,scrollToIndex:x,scrollToOffset:p,measureRow:V,measureRowElement:M,measureColumn:o.measure}}function ue(e){const n=H({items:e.rows,estimateSize:e.estimateRowSize,container:e.container,overscan:e.overscan,getItemKey:e.getRowKey,initialRect:e.initialRect,viewportInset:e.viewportInset,revision:e.revision,itemSize:e.itemSize}),i=t.computed(()=>{const o=t.toValue(e.columns);let d=0;return o.map(x=>{const p=x.width??x.minWidth??160,V={...x,start:d,size:p,end:d+p};return d+=p,V})}),r=t.computed(()=>{const o=i.value;return o.length?o[o.length-1]?.end??0:0});return{virtualRows:t.computed(()=>n.virtualItems.value),columns:i,totalHeight:n.totalSize,totalWidth:r,scrollOffset:n.scrollOffset,scrollAdjust:n.scrollAdjust,isScrolling:n.isScrolling,scrollToIndex:n.scrollToIndex,scrollToOffset:n.scrollToOffset,measure:n.measure,measureElement:n.measureElement}}function ee(e){if(typeof e=="number"&&Number.isFinite(e))return`${e}px`;if(typeof e=="string"&&e.trim())return e}function A(e){if(typeof e=="number"&&Number.isFinite(e))return e;if(typeof e!="string")return 0;const n=/^(-?\d+(?:\.\d+)?)px$/.exec(e.trim());if(!n?.[1])return 0;const i=Number(n[1]);return Number.isFinite(i)?i:0}function W(e){return{overflow:"auto",position:"relative",height:ee(e.height)??(e.horizontal?"100%":void 0),width:ee(e.width)??(e.horizontal?void 0:"100%"),overflowAnchor:"none"}}function xe(e,n){const i=C(e);return{position:"relative",width:n?`${i}px`:"100%",height:n?"100%":`${i}px`}}function be(e,n){return{position:"absolute",top:0,left:0,width:n?void 0:"100%",height:n?"100%":void 0,transform:n?`translateX(${e}px)`:`translateY(${e}px)`}}const Ve=t.defineComponent({__name:"VirtualList",props:{items:{},estimateSize:{type:[Number,Function],default:48},height:{},width:{},horizontal:{type:Boolean,default:!1},overscan:{default:5},gap:{default:0},paddingStart:{default:0},paddingEnd:{default:0},getItemKey:{},tag:{default:"div"},itemTag:{default:"div"},itemAttrs:{},revision:{}},setup(e,{expose:n}){const i=e,r=t.ref(null),{virtualItems:s,totalSize:o,scrollAdjust:d,scrollToIndex:x,scrollToOffset:p,measure:V,measureElement:y}=H({items:()=>i.items,estimateSize:(c,m)=>{const l=i.estimateSize;return typeof l=="number"?l:l(c,m)},itemSize:()=>typeof i.estimateSize=="number"?i.estimateSize:void 0,container:r,horizontal:()=>i.horizontal,overscan:()=>i.overscan,gap:()=>i.gap,paddingStart:()=>i.paddingStart,paddingEnd:()=>i.paddingEnd,getItemKey:(c,m)=>i.getItemKey?.(c,m)??m,initialRect:()=>({width:A(i.width),height:A(i.height)}),revision:()=>i.revision}),b=t.computed(()=>W({height:i.height,width:i.width,horizontal:i.horizontal})),I=t.computed(()=>xe(o.value,i.horizontal));function M(c){return be(c,i.horizontal)}function u(c){return m=>{y(m,c)}}return n({scrollToIndex:x,scrollToOffset:p,measure:V}),(c,m)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{ref_key:"container",ref:r,"data-virtual-container":"",role:"list",style:t.normalizeStyle(b.value)},{default:t.withCtx(()=>[e.items.length?(t.openBlock(),t.createElementBlock("div",{key:1,"data-virtual-spacer":"",style:t.normalizeStyle(I.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(s),l=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.itemTag),t.mergeProps({key:l.key,ref_for:!0,ref:u(l.index),role:"listitem","data-index":l.index,"data-key":String(l.key),"aria-setsize":e.items.length,"aria-posinset":l.index+1,style:M(l.start-t.unref(d))},{ref_for:!0},e.itemAttrs),{default:t.withCtx(()=>[t.renderSlot(c.$slots,"default",{item:l.item,index:l.index,start:l.start,size:l.size,end:l.end})]),_:2},1040,["data-index","data-key","aria-setsize","aria-posinset","style"]))),128))],4)):t.renderSlot(c.$slots,"empty",{},void 0,void 0,0)]),_:3},8,["style"]))}}),ke=["data-index","data-key"],Oe=t.defineComponent({__name:"VirtualGrid",props:{items:{},columnCount:{default:1},estimateRowSize:{type:[Number,Function],default:48},estimateColumnSize:{type:[Number,Function],default:160},height:{},width:{},overscan:{default:2},overscanRows:{},overscanColumns:{},rowGap:{default:0},columnGap:{default:0},getItemKey:{},tag:{default:"div"},itemAttrs:{},revision:{}},setup(e,{expose:n}){const i=e,r=t.ref(null),{virtualCells:s,totalWidth:o,totalHeight:d,scrollAdjustX:x,scrollAdjustY:p,scrollToIndex:V,scrollToOffset:y,measureRow:b,measureRowElement:I}=le({items:()=>i.items,columnCount:()=>i.columnCount,estimateRowSize:()=>i.estimateRowSize,estimateColumnSize:()=>i.estimateColumnSize,container:r,overscan:()=>i.overscan,overscanRows:()=>i.overscanRows,overscanColumns:()=>i.overscanColumns,rowGap:()=>i.rowGap,columnGap:()=>i.columnGap,getItemKey:(l,S)=>i.getItemKey?.(l,S)??S,initialRect:()=>({width:A(i.width),height:A(i.height)}),revision:()=>i.revision}),M=t.computed(()=>W({height:i.height,width:i.width,horizontal:!1})),u=t.computed(()=>({position:"relative",width:`${C(o.value)}px`,height:`${C(d.value)}px`}));function c(l){return S=>{I(S,l)}}function m(l,S,h){return{position:"absolute",top:0,left:0,width:`${S}px`,transform:`translate(${l}px, ${h}px)`}}return n({scrollToIndex:V,scrollToOffset:y,measureRow:b}),(l,S)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{ref_key:"container",ref:r,"data-virtual-container":"",role:"grid",style:t.normalizeStyle(M.value)},{default:t.withCtx(()=>[e.items.length?(t.openBlock(),t.createElementBlock("div",{key:1,"data-virtual-spacer":"",style:t.normalizeStyle(u.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(s),h=>(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:h.key,ref_for:!0,ref:c(h.row.index),role:"gridcell","data-index":h.index,"data-key":String(h.key),style:m(h.column.start-t.unref(x),h.column.size,h.row.start-t.unref(p))},{ref_for:!0},e.itemAttrs),[t.renderSlot(l.$slots,"default",{item:h.item,index:h.index,rowIndex:h.row.index,columnIndex:h.column.index,row:h.row,column:h.column})],16,ke))),128))],4)):t.renderSlot(l.$slots,"empty",{},void 0,void 0,0)]),_:3},8,["style"]))}}),Ie=["data-index","data-key","aria-rowindex"],Me=t.defineComponent({__name:"VirtualTable",props:{rows:{},columns:{},estimateRowSize:{type:[Number,Function],default:44},height:{},width:{},overscan:{default:5},getRowKey:{},stickyHeader:{type:Boolean,default:!0},tag:{default:"div"},rowAttrs:{},revision:{}},setup(e,{expose:n}){const i=e,r=t.ref(null),s=t.ref(null),o=t.ref(0),{virtualRows:d,columns:x,totalWidth:p,totalHeight:V,scrollAdjust:y,scrollToIndex:b,scrollToOffset:I,measure:M,measureElement:u}=ue({rows:()=>i.rows,columns:()=>i.columns,estimateRowSize:(v,w)=>{const z=i.estimateRowSize;return typeof z=="number"?z:z(v,w)},container:r,overscan:()=>i.overscan,getRowKey:(v,w)=>i.getRowKey?.(v,w)??w,initialRect:()=>({width:A(i.width),height:A(i.height)}),viewportInset:o,revision:()=>i.revision,itemSize:()=>typeof i.estimateRowSize=="number"?i.estimateRowSize:void 0});t.watch(s,(v,w,z)=>{if(w===v&&!v||!v||!L()||typeof ResizeObserver>"u")return;const E=()=>{o.value=v.getBoundingClientRect().height},j=new ResizeObserver(E);j.observe(v),E(),z(()=>j.disconnect())});const c=t.computed(()=>W({height:i.height,width:i.width,horizontal:!1})),m=t.computed(()=>({minWidth:`${p.value}px`})),l=t.computed(()=>({position:i.stickyHeader?"sticky":"relative",top:i.stickyHeader?"0px":void 0,zIndex:1,display:"flex",width:`${p.value}px`})),S=t.computed(()=>({position:"relative",height:`${C(V.value)}px`,width:`${C(p.value)}px`}));function h(v){return{width:`${v.size}px`,minWidth:`${v.size}px`,flex:"0 0 auto",textAlign:v.align??"left"}}function F(v){return{position:"absolute",top:0,left:0,width:"100%",display:"flex",transform:`translateY(${v}px)`}}function K(v){return w=>{u(w,v)}}function $(v,w,z){return w.accessor?w.accessor(v,z):v&&typeof v=="object"&&w.id in v?v[w.id]:""}return n({scrollToIndex:b,scrollToOffset:I,measure:M}),(v,w)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{ref_key:"container",ref:r,"data-virtual-container":"",role:"table",style:t.normalizeStyle(c.value)},{default:t.withCtx(()=>[t.createElementVNode("div",{style:t.normalizeStyle(m.value)},[t.createElementVNode("div",{ref_key:"header",ref:s,role:"row",style:t.normalizeStyle(l.value)},[t.renderSlot(v.$slots,"header",{columns:t.unref(x)},()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(x),z=>(t.openBlock(),t.createElementBlock("div",{key:z.id,role:"columnheader",style:t.normalizeStyle(h(z))},t.toDisplayString(z.header),5))),128))])],4),e.rows.length?(t.openBlock(),t.createElementBlock("div",{key:1,"data-virtual-spacer":"",role:"rowgroup",style:t.normalizeStyle(S.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(d),z=>(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:z.key,ref_for:!0,ref:K(z.index),role:"row","data-index":z.index,"data-key":String(z.key),"aria-rowindex":z.index+1,style:F(z.start-t.unref(y))},{ref_for:!0},e.rowAttrs),[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(x),E=>(t.openBlock(),t.createElementBlock("div",{key:E.id,role:"cell",style:t.normalizeStyle(h(E))},[t.renderSlot(v.$slots,"cell",{row:z.item,column:E,rowIndex:z.index,value:$(z.item,E,z.index)},()=>[t.createTextVNode(t.toDisplayString($(z.item,E,z.index)),1)])],4))),128))],16,Ie))),128))],4)):t.renderSlot(v.$slots,"empty",{},void 0,void 0,0)],4)]),_:3},8,["style"]))}});exports.MeasurementCache=te;exports.VirtualGrid=Oe;exports.VirtualList=Ve;exports.VirtualTable=Me;exports.Virtualizer=oe;exports.clampScrollOffset=B;exports.mapDomOffsetToVirtual=ie;exports.mapVirtualOffsetToDom=re;exports.normalizeSize=G;exports.resolveScrollOffset=se;exports.scrollContentSize=C;exports.useVirtualGrid=le;exports.useVirtualList=H;exports.useVirtualTable=ue;exports.useVirtualizer=N;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");function J(e){return!Number.isFinite(e)||e<0?0:e}class me{sizes=new Map;divergent=!1;get(t){return this.sizes.get(t)}set(t,r,i){this.sizes.set(t,r),i!==null&&Math.abs(r-i)>=.5&&(this.divergent=!0)}get hasDivergent(){return this.divergent}clear(){this.sizes.clear(),this.divergent=!1}trim(t,r){let i=!1;for(const o of this.sizes.keys())o>=t&&(this.sizes.delete(o),i=!0);if(i&&(this.divergent=!1,r!==null)){for(const o of this.sizes.values())if(Math.abs(o-r)>=.5){this.divergent=!0;return}}}shift(t){if(!t)return;const r=new Map;for(const[i,o]of this.sizes){const s=i+t;s>=0&&r.set(s,o)}this.sizes.clear();for(const[i,o]of r)this.sizes.set(i,o)}}function he(e,t,r){return Math.min(r,Math.max(t,e))}const Fe=16777216;function H(e,t,r){const i=Math.max(0,t-Math.max(0,r));return he(Number.isFinite(e)?e:0,0,i)}function A(e,t){const r=Math.max(0,Number.isFinite(e)?e:0),i=Math.min(r,Fe);return t===void 0||!Number.isFinite(t)||t<=0?i:Math.min(i,t)}function ge(e,t,r,i){const o=Math.max(0,t-Math.max(0,i)),s=Math.max(0,r-Math.max(0,i));return o<=0?0:s<=0||s>=o?H(e,t,i):Math.max(0,e)/s*o}function Se(e,t,r,i){const o=Math.max(0,t-Math.max(0,i)),s=Math.max(0,r-Math.max(0,i));return s<=0?0:o<=0||s>=o?H(e,t,i):H(e,t,i)/o*s}function Ae(e,t,r){if(e<=0)return 0;let i=0,o=e-1,s=e-1;for(;i<=o;){const d=i+o>>>1;r(d)>t?(s=d,o=d-1):i=d+1}return s}function Le(e,t,r){if(e<=0)return 0;let i=0,o=e-1,s=0;for(;i<=o;){const d=i+o>>>1;r(d)<t?(s=d,i=d+1):o=d-1}return s}function we(e){const t=e.start+e.size;let r=e.align;if(r==="auto"){const i=e.current+e.viewport;if(e.start>=e.current&&t<=i)return e.current;r=e.start<e.current?"start":"end"}return r==="center"?e.start-(e.viewport-e.size)/2:r==="end"?t-e.viewport:e.start}class ve{count=0;estimateSize=()=>0;overscan=0;gap=0;paddingStart=0;paddingEnd=0;lanes=1;itemSize=null;viewportSize=0;scrollOffset=0;getItemKey=t=>t;measurements=new me;built=0;offsets=[];laneCursor=[];laneEnd=[];setOptions(t){const r=Math.max(1,Math.floor(t.lanes??1)),i=t.gap??0,o=t.paddingStart??0,s=t.paddingEnd??0,d=Math.max(0,Math.floor(t.count)),O=t.itemSize===void 0||t.itemSize===null?null:J(t.itemSize),M=this.itemSize,x=r!==this.lanes||i!==this.gap||o!==this.paddingStart||s!==this.paddingEnd||t.estimateSize!==this.estimateSize||O!==this.itemSize;this.count=d,this.lanes=r,this.gap=i,this.paddingStart=o,this.paddingEnd=s,this.overscan=Math.max(0,Math.floor(t.overscan??0)),this.estimateSize=t.estimateSize,this.itemSize=O,this.getItemKey=t.getItemKey??(c=>c),t.viewportSize!==void 0&&(this.viewportSize=Math.max(0,t.viewportSize)),O!==M&&this.measurements.clear(),this.measurements.trim(this.count,this.itemSize),(x||this.built>this.count)&&this.resetGeometry()}setScrollOffset(t){this.scrollOffset=Number.isFinite(t)?t:0}getScrollOffset(){return this.scrollOffset}getViewportSize(){return this.viewportSize}measure(t,r){if(t<0||t>=this.count)return!1;const i=J(r),o=this.measurements.get(t);if(o!==void 0&&Math.abs(o-i)<.5)return!1;const s=this.getItemSize(t);return this.measurements.set(t,i,this.itemSize),Math.abs(s-i)<.5?!1:(this.resetGeometry(),!0)}clearMeasurements(){this.measurements.clear(),this.resetGeometry()}shiftMeasurements(t){t&&(this.measurements.shift(t),this.resetGeometry())}getItemSize(t){const r=this.measurements.get(t);return r!==void 0?r:this.itemSize!==null?this.itemSize:J(this.estimateSize(t))}getItemOffset(t){if(t<=0||this.count<=0)return this.paddingStart;const r=Math.min(t,this.count-1);if(this.usesFixedPath()){const i=Math.floor(r/this.lanes);return this.paddingStart+i*((this.itemSize??0)+this.gap)}return this.ensure(r),this.offsets[r]??this.paddingStart}getTotalSize(){if(this.count<=0)return this.paddingStart+this.paddingEnd;if(this.usesFixedPath()){let r=this.paddingStart;const i=this.itemSize??0;for(let o=0;o<this.lanes&&o<this.count;o+=1){const s=this.laneLength(o),d=this.paddingStart+s*i+Math.max(0,s-1)*this.gap;d>r&&(r=d)}return r+this.paddingEnd}this.ensure(this.count-1);let t=this.paddingStart;for(let r=0;r<this.lanes&&r<this.count;r+=1){const i=this.laneEnd[r]??this.paddingStart;i>t&&(t=i)}return t+this.paddingEnd}getVirtualItems(){if(this.count<=0||this.viewportSize<=0)return[];const t=H(this.scrollOffset,this.getTotalSize(),this.viewportSize),r=t+this.viewportSize,i=[];for(let o=0;o<this.lanes;o+=1){const s=this.laneLength(o);if(s<=0)continue;const d=Ae(s,t,c=>{const g=this.ordinalIndex(o,c);return this.getItemOffset(g)+this.getItemSize(g)}),O=Le(s,r,c=>this.getItemOffset(this.ordinalIndex(o,c))),M=Math.max(0,Math.min(d,O)-this.overscan),x=Math.min(s-1,Math.max(d,O)+this.overscan);for(let c=M;c<=x;c+=1){const g=this.ordinalIndex(o,c),R=this.getItemOffset(g),T=this.getItemSize(g);i.push({index:g,key:this.getItemKey(g),start:R,size:T,end:R+T,lane:o})}}return i.sort((o,s)=>o.index-s.index),i}getOffsetForIndex(t,r="auto"){if(this.count<=0)return 0;const i=he(t,0,this.count-1),o=this.getItemOffset(i),s=this.getItemSize(i),d=we({start:o,size:s,viewport:this.viewportSize,current:this.scrollOffset,align:r});return H(d,this.getTotalSize(),this.viewportSize)}usesFixedPath(){return this.itemSize!==null&&!this.measurements.hasDivergent}ordinalIndex(t,r){return t+r*this.lanes}laneLength(t){return t<0||t>=this.lanes||t>=this.count?0:Math.floor((this.count-t-1)/this.lanes)+1}ensure(t){if(t<this.built)return;const r=Math.min(t,this.count-1);for(;this.built<=r;){const i=this.built%this.lanes,o=this.laneCursor[i]??this.paddingStart;this.offsets[this.built]=o;const s=o+this.getItemSize(this.built);this.laneEnd[i]=s,this.laneCursor[i]=s+this.gap,this.built+=1}}resetGeometry(){this.built=0,this.offsets=[],this.laneCursor=Array.from({length:this.lanes},()=>this.paddingStart),this.laneEnd=Array.from({length:this.lanes},()=>this.paddingStart)}}function P(){return typeof window<"u"&&typeof document<"u"}function ze(e){return typeof Element>"u"?null:e instanceof Element?e:null}function Ke(e,t,r,i){if(i==="smooth"&&typeof e.scrollTo=="function"){e.scrollTo({top:r?e.scrollTop:t,left:r?t:e.scrollLeft,behavior:i});return}r?e.scrollLeft=t:e.scrollTop=t}function je(e,t,r){if(!(typeof window>"u")){if(r==="smooth"){window.scrollTo({top:t?window.scrollY:e,left:t?e:window.scrollX,behavior:r});return}t?window.scrollTo(e,window.scrollY):window.scrollTo(window.scrollX,e)}}function de(e,t){return t?e.scrollLeft:e.scrollTop}function Ge(e){return typeof window>"u"?0:e?window.scrollX:window.scrollY}function De(e,t){return t?e.clientWidth:e.clientHeight}function Ne(e){return typeof window>"u"?0:e?window.innerWidth:window.innerHeight}function We(e,t){return t?e.scrollWidth:e.scrollHeight}function He(e,t){const r=e.getBoundingClientRect();return typeof window>"u"?t?r.left:r.top:t?r.left+window.scrollX:r.top+window.scrollY}function Pe(e){return typeof requestAnimationFrame=="function"?requestAnimationFrame(e):setTimeout(e,0)}function _e(e){e&&(typeof cancelAnimationFrame=="function"?cancelAnimationFrame(e):clearTimeout(e))}function Xe(e,t){if(e.length!==t.length)return!1;for(let r=0;r<e.length;r+=1){const i=e[r],o=t[r];if(!i||!o||i.index!==o.index||i.start!==o.start||i.size!==o.size||i.end!==o.end||i.lane!==o.lane||i.key!==o.key)return!1}return!0}function Q(e){const t=new ve,r=n.shallowRef([]),i=n.ref(0),o=n.ref(0),s=n.ref(0),d=n.ref(!1),O=l=>e.estimateSize(l);let M=null,x=!1,c=null,g=null,R=0,T=0,f=0,b=n.toValue(e.revision),w=n.toValue(e.count),v=e.getItemKey?.(0)??0,z=!1,m="";const I=new Map,V=new Map,F=[];function K(){const l=n.toValue(e.container);return typeof HTMLElement>"u"?null:l instanceof HTMLElement?l:null}function C(){return n.toValue(e.horizontal)??!1}function u(){return n.toValue(e.windowScroll)??!1}function k(){return n.toValue(e.reverse)??!1}function y(){const l=n.toValue(e.initialRect);return l?C()?l.width:l.height:0}function $(){const l=K(),a=n.toValue(e.scrollMargin)??0;return!l||!P()?a:He(l,C())+a}function X(l,a){return u()||!l?A(a):A(a,We(l,C()))}function xe(l){return u()?Math.max(0,Ge(C())-$()):l?de(l,C()):0}function oe(l){return u()?Ne(C()):l?De(l,C()):0}function be(l,a,h){if(u()){je(a+$(),C(),h);return}l&&Ke(l,a,C(),h)}function ee(l,a,h){return ge(xe(l),a,X(l,a),h)}function j(l,a,h,S,p){be(l,Se(a,h,X(l,h),S),p)}function Ve(){const l=e.onVisibleRangeChange;if(!l)return;const a=r.value,h=n.toValue(e.count),S=a.length?{startIndex:a[0]?.index??0,endIndex:a[a.length-1]?.index??-1,count:h}:{startIndex:0,endIndex:-1,count:h},p=`${S.startIndex}:${S.endIndex}:${S.count}`;p!==m&&(m=p,l(S))}function B(){const l=n.toValue(e.revision);Object.is(l,b)||(b=l,t.clearMeasurements());const a=n.toValue(e.count),h=e.getItemKey?.(0)??0,S=k()&&w>0&&a>w&&h!==v,p=k()&&w>0&&a>w&&h===v,E=S||p?a-w:0,G=k()&&t.getViewportSize()>0&&t.getScrollOffset()+t.getViewportSize()>=t.getTotalSize()-64;S&&E>0&&t.shiftMeasurements(E);const D=K(),ae=oe(D),Te=n.toValue(e.viewportInset)??0,N=Math.max(0,(ae>0?ae:y())-Te),Be=n.toValue(e.itemSize);if(t.setOptions({count:a,estimateSize:O,overscan:(n.toValue(e.overscan)??8)+f,gap:n.toValue(e.gap)??0,paddingStart:n.toValue(e.paddingStart)??0,paddingEnd:n.toValue(e.paddingEnd)??0,lanes:n.toValue(e.lanes)??1,itemSize:Be??null,getItemKey:e.getItemKey,viewportSize:N}),S&&E>0){let q=0;const $e=n.toValue(e.gap)??0;for(let U=0;U<E;U+=1)q+=t.getItemSize(U),U<E-1&&(q+=$e);q>0&&t.setScrollOffset(t.getScrollOffset()+q)}const L=t.getTotalSize(),W=Math.max(0,L-N);k()&&!z&&L>0&&N>0?(z=!0,t.setScrollOffset(W),j(D,W,L,N,"auto")):p&&G||t.getScrollOffset()>W?(t.setScrollOffset(W),j(D,W,L,N,"auto")):S&&E>0&&j(D,t.getScrollOffset(),L,N,"auto"),w=a,v=h;const ce=t.getVirtualItems();Xe(r.value,ce)||(r.value=ce),i.value!==L&&(i.value=L);const ne=t.getScrollOffset();o.value!==ne&&(o.value=ne);const ue=D&&!u()?ne-de(D,C()):0;s.value!==ue&&(s.value=ue),Ve()}function Me(){d.value=!1,f=0;for(const[l,a]of I)F.push({element:l,index:a});se(),B(),e.onScrollEnd?.()}function Oe(){d.value=!0,!(typeof window>"u")&&(window.clearTimeout(T),T=window.setTimeout(Me,120))}function Y(){const l=K();if(!u()&&!l)return;Oe();const a=t.getViewportSize(),h=t.getTotalSize(),S=ee(l,h,a),p=t.getScrollOffset(),E=Math.max(1,n.toValue(e.itemSize)??48);f=Math.min(24,Math.ceil(Math.abs(S-p)/E)),t.setScrollOffset(S),B()}function te(){M&&(M.removeEventListener("scroll",Y),M=null),x&&typeof window<"u"&&(window.removeEventListener("scroll",Y),window.removeEventListener("resize",B),x=!1),c?.disconnect(),c=null}function ke(){const l=K();if(u()){if(x&&M===l||(te(),M=l,!P()))return;x=!0;const p=t.getViewportSize(),E=t.getTotalSize();t.getScrollOffset()>0?j(l,t.getScrollOffset(),E,p,"auto"):t.setScrollOffset(ee(l,E,p)),window.addEventListener("scroll",Y,{passive:!0}),window.addEventListener("resize",B),l&&typeof ResizeObserver<"u"&&(c=new ResizeObserver(()=>B()),c.observe(l));return}if(l===M&&!x||(te(),M=l,!l||!P()))return;const h=t.getViewportSize(),S=t.getTotalSize();t.getScrollOffset()>0?j(l,t.getScrollOffset(),S,h,"auto"):t.setScrollOffset(ee(l,S,h)),l.addEventListener("scroll",Y,{passive:!0}),typeof ResizeObserver<"u"&&(c=new ResizeObserver(()=>B()),c.observe(l))}function Ee(){return!P()||typeof ResizeObserver>"u"?null:(g||(g=new ResizeObserver(l=>{const a=C();let h=!1;if(!d.value){for(const S of l){const p=I.get(S.target);if(p===void 0)continue;const E=S.borderBoxSize?.[0],G=Math.round(a?E?.inlineSize??S.contentRect.width:E?.blockSize??S.contentRect.height);G>0&&t.measure(p,G)&&(h=!0)}h&&B()}})),g)}function se(){if(R=0,d.value)return;const l=F.splice(0,F.length),a=C();let h=!1;for(const S of l){if(!S.element.isConnected)continue;const p=S.element.getBoundingClientRect(),E=Math.round(a?p.width:p.height);E>0&&t.measure(S.index,E)&&(h=!0)}h&&B()}function Ie(l,a){const h=ze(l),S=Ee(),p=V.get(a);p&&p!==h&&(S?.unobserve(p),I.delete(p),V.delete(a)),h&&(V.set(a,h),I.set(h,a),S?.observe(h),F.push({element:h,index:a}),!(d.value||R)&&(R=Pe(se)))}function le(l,a="auto"){const h=K(),S=oe(h),p=S>0?S:t.getViewportSize(),E=t.getTotalSize(),G=H(l,E,p);t.setScrollOffset(G),j(h,G,E,p,a),B()}function Re(l,a){const h=t.getOffsetForIndex(l,a?.align??"auto");le(h,a?.behavior??"auto")}function Ce(l,a){t.measure(l,a)&&B()}return B(),n.watch(()=>[n.toValue(e.count),n.toValue(e.overscan),n.toValue(e.gap),n.toValue(e.paddingStart),n.toValue(e.paddingEnd),n.toValue(e.lanes),n.toValue(e.horizontal),n.toValue(e.itemSize),n.toValue(e.viewportInset),n.toValue(e.revision),n.toValue(e.container),n.toValue(e.windowScroll),n.toValue(e.scrollMargin),n.toValue(e.reverse),n.toValue(e.initialRect)?.width,n.toValue(e.initialRect)?.height],()=>{ke(),B()},{flush:"post"}),n.onBeforeUnmount(()=>{te(),g?.disconnect(),_e(R),typeof window<"u"&&window.clearTimeout(T),I.clear(),V.clear(),F.length=0}),{virtualItems:n.computed(()=>r.value),totalSize:n.computed(()=>i.value),scrollOffset:n.computed(()=>o.value),scrollAdjust:n.computed(()=>s.value),isScrolling:n.computed(()=>d.value),scrollToIndex:Re,scrollToOffset:le,measure:Ce,measureElement:Ie}}function Ye(e,t,r){return typeof e=="function"?e(t,r):typeof e=="number"?e:48}function ie(e){const t=Q({count:()=>n.toValue(e.items).length,estimateSize:i=>{const o=n.toValue(e.items);return Ye(e.estimateSize,i,o[i])},getItemKey:i=>{const s=n.toValue(e.items)[i];return e.getItemKey?.(s,i)??i},itemSize:()=>e.itemSize!==void 0?n.toValue(e.itemSize):typeof e.estimateSize=="number"?e.estimateSize:void 0,container:e.container,horizontal:e.horizontal,overscan:e.overscan,gap:e.gap,paddingStart:e.paddingStart,paddingEnd:e.paddingEnd,initialRect:e.initialRect,viewportInset:e.viewportInset,revision:e.revision,windowScroll:e.windowScroll,scrollMargin:e.scrollMargin,reverse:e.reverse,onVisibleRangeChange:e.onVisibleRangeChange,onScrollEnd:e.onScrollEnd});return{virtualItems:n.computed(()=>{const i=n.toValue(e.items);return t.virtualItems.value.map(o=>{const s=i[o.index];return{...o,item:s,key:e.getItemKey?.(s,o.index)??o.key}})}),totalSize:t.totalSize,scrollOffset:t.scrollOffset,scrollAdjust:t.scrollAdjust,isScrolling:t.isScrolling,scrollToIndex:t.scrollToIndex,scrollToOffset:t.scrollToOffset,measure:t.measure,measureElement:t.measureElement}}function fe(e,t,r){return typeof e=="function"?e(t):typeof e=="number"?e:r}function ye(e){const t=n.computed(()=>Math.max(1,Math.floor(n.toValue(e.columnCount)||1))),r=n.computed(()=>Math.ceil(n.toValue(e.items).length/t.value)),i=new Map,o=Q({count:()=>r.value,estimateSize:f=>fe(n.toValue(e.estimateRowSize),f,48),itemSize:()=>{const f=n.toValue(e.estimateRowSize);return typeof f=="number"?f:void 0},overscan:()=>n.toValue(e.overscanRows)??n.toValue(e.overscan)??2,gap:()=>n.toValue(e.rowGap)??0,horizontal:!1,container:e.container,initialRect:e.initialRect,revision:e.revision,windowScroll:e.windowScroll,scrollMargin:e.scrollMargin,onVisibleRangeChange:e.onVisibleRangeChange,onScrollEnd:e.onScrollEnd}),s=Q({count:()=>t.value,estimateSize:f=>fe(n.toValue(e.estimateColumnSize),f,160),itemSize:()=>{const f=n.toValue(e.estimateColumnSize);return typeof f=="number"?f:void 0},overscan:()=>n.toValue(e.overscanColumns)??n.toValue(e.overscan)??1,gap:()=>n.toValue(e.columnGap)??0,horizontal:!0,container:e.container,initialRect:e.initialRect,revision:e.revision,windowScroll:e.windowScroll,scrollMargin:e.scrollMargin}),d=n.computed(()=>{const f=n.toValue(e.items),b=t.value,w=[];for(const v of o.virtualItems.value)for(const z of s.virtualItems.value){const m=v.index*b+z.index;if(m>=f.length)continue;const I=f[m];w.push({index:m,key:e.getItemKey?.(I,m)??m,item:I,row:v,column:z})}return w});function O(f,b){const w=n.toValue(e.items);if(!w.length)return;const v=Math.min(Math.max(f,0),w.length-1),z=t.value;o.scrollToIndex(Math.floor(v/z),b),s.scrollToIndex(v%z,b)}function M(f,b="auto"){f.top!==void 0&&o.scrollToOffset(f.top,b),f.left!==void 0&&s.scrollToOffset(f.left,b)}function x(f,b){const w=Math.max(i.get(f)??0,b);w<=0||w===i.get(f)||(i.set(f,w),o.measure(f,w))}let c=null;const g=new Map;function R(){return!P()||typeof ResizeObserver>"u"?null:(c||(c=new ResizeObserver(f=>{for(const b of f){const w=g.get(b.target);if(w===void 0)continue;const z=b.borderBoxSize?.[0]?.blockSize??b.contentRect.height;z>0&&x(w,z)}})),c)}function T(f,b){const w=ze(f),v=R();if(!w)return;g.set(w,b),v?.observe(w);const z=w.getBoundingClientRect().height;z>0&&x(b,z)}return n.onBeforeUnmount(()=>{c?.disconnect(),g.clear()}),{virtualRows:o.virtualItems,virtualColumns:s.virtualItems,virtualCells:d,totalHeight:o.totalSize,totalWidth:s.totalSize,scrollAdjustX:s.scrollAdjust,scrollAdjustY:o.scrollAdjust,scrollToIndex:O,scrollToOffset:M,measureRow:x,measureRowElement:T,measureColumn:s.measure}}function pe(e){const t=ie({items:e.rows,estimateSize:e.estimateRowSize,container:e.container,overscan:e.overscan,getItemKey:e.getRowKey,initialRect:e.initialRect,viewportInset:e.viewportInset,revision:e.revision,itemSize:e.itemSize,windowScroll:e.windowScroll,scrollMargin:e.scrollMargin,reverse:e.reverse,onVisibleRangeChange:e.onVisibleRangeChange,onScrollEnd:e.onScrollEnd}),r=n.computed(()=>{const s=n.toValue(e.columns);let d=0;const O=s.map(c=>{const g=c.width??c.minWidth??160,R={...c,start:d,size:g,end:d+g,pinOffset:0,stickyStyle:{}};return d+=g,R});let M=0;for(const c of O)c.pin==="start"&&(c.pinOffset=M,c.stickyStyle={position:"sticky",left:`${M}px`,zIndex:2},M+=c.size);let x=0;for(let c=O.length-1;c>=0;c-=1){const g=O[c];!g||g.pin!=="end"||(g.pinOffset=x,g.stickyStyle={position:"sticky",right:`${x}px`,zIndex:2},x+=g.size)}return O}),i=n.computed(()=>{const s=r.value;return s.length?s[s.length-1]?.end??0:0});return{virtualRows:n.computed(()=>t.virtualItems.value),columns:r,totalHeight:t.totalSize,totalWidth:i,scrollOffset:t.scrollOffset,scrollAdjust:t.scrollAdjust,isScrolling:t.isScrolling,scrollToIndex:t.scrollToIndex,scrollToOffset:t.scrollToOffset,measure:t.measure,measureElement:t.measureElement}}function Z(e){if(typeof e=="number"&&Number.isFinite(e))return`${e}px`;if(typeof e=="string"&&e.trim())return e}function _(e){if(typeof e=="number"&&Number.isFinite(e))return e;if(typeof e!="string")return 0;const t=/^(-?\d+(?:\.\d+)?)px$/.exec(e.trim());if(!t?.[1])return 0;const r=Number(t[1]);return Number.isFinite(r)?r:0}function re(e){return e.windowScroll?{position:"relative",width:Z(e.width)??"100%",height:Z(e.height),overflowAnchor:"none"}:{overflow:"auto",position:"relative",height:Z(e.height)??(e.horizontal?"100%":void 0),width:Z(e.width)??(e.horizontal?void 0:"100%"),overflowAnchor:"none"}}function qe(e,t){const r=A(e);return{position:"relative",width:t?`${r}px`:"100%",height:t?"100%":`${r}px`}}function Ue(e,t,r){return{position:"absolute",top:0,left:0,width:t?r===void 0?void 0:`${r}px`:"100%",height:t?"100%":r===void 0?void 0:`${r}px`,transform:t?`translateX(${e}px)`:`translateY(${e}px)`,contain:"layout style",boxSizing:"border-box",overflow:"hidden"}}const Ze=n.defineComponent({__name:"VirtualList",props:{items:{},estimateSize:{type:[Number,Function],default:48},height:{},width:{},horizontal:{type:Boolean,default:!1},overscan:{default:8},gap:{default:0},paddingStart:{default:0},paddingEnd:{default:0},getItemKey:{},tag:{default:"div"},itemTag:{default:"div"},itemAttrs:{},revision:{},windowScroll:{type:Boolean,default:!1},scrollMargin:{default:0},reverse:{type:Boolean,default:!1}},emits:["visibleRangeChange","scrollEnd"],setup(e,{expose:t,emit:r}){const i=e,o=r,s=n.ref(null),{virtualItems:d,totalSize:O,scrollAdjust:M,scrollToIndex:x,scrollToOffset:c,measure:g,measureElement:R}=ie({items:()=>i.items,estimateSize:(v,z)=>{const m=i.estimateSize;return typeof m=="number"?m:m(v,z)},itemSize:()=>typeof i.estimateSize=="number"?i.estimateSize:void 0,container:s,horizontal:()=>i.horizontal,overscan:()=>i.overscan,gap:()=>i.gap,paddingStart:()=>i.paddingStart,paddingEnd:()=>i.paddingEnd,getItemKey:(v,z)=>i.getItemKey?.(v,z)??z,initialRect:()=>({width:_(i.width),height:_(i.height)}),revision:()=>i.revision,windowScroll:()=>i.windowScroll,scrollMargin:()=>i.scrollMargin,reverse:()=>i.reverse,onVisibleRangeChange:v=>o("visibleRangeChange",v),onScrollEnd:()=>o("scrollEnd")}),T=n.computed(()=>re({height:i.height,width:i.width,horizontal:i.horizontal,windowScroll:i.windowScroll})),f=n.computed(()=>qe(O.value,i.horizontal));function b(v,z){return Ue(v,i.horizontal,z)}function w(v){return z=>{R(z,v)}}return t({scrollToIndex:x,scrollToOffset:c,measure:g}),(v,z)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.tag),{ref_key:"container",ref:s,"data-virtual-container":"",role:"list",style:n.normalizeStyle(T.value)},{default:n.withCtx(()=>[e.items.length?(n.openBlock(),n.createElementBlock("div",{key:1,"data-virtual-spacer":"",style:n.normalizeStyle(f.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(d),m=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.itemTag),n.mergeProps({key:m.key,ref_for:!0,ref:w(m.index),role:"listitem","data-index":m.index,"data-key":String(m.key),"aria-setsize":e.items.length,"aria-posinset":m.index+1,style:b(m.start-n.unref(M),m.size)},{ref_for:!0},e.itemAttrs),{default:n.withCtx(()=>[n.renderSlot(v.$slots,"default",{item:m.item,index:m.index,start:m.start,size:m.size,end:m.end})]),_:2},1040,["data-index","data-key","aria-setsize","aria-posinset","style"]))),128))],4)):n.renderSlot(v.$slots,"empty",{},void 0,void 0,0)]),_:3},8,["style"]))}}),Je=["data-index","data-key"],Qe=n.defineComponent({__name:"VirtualGrid",props:{items:{},columnCount:{default:1},estimateRowSize:{type:[Number,Function],default:48},estimateColumnSize:{type:[Number,Function],default:160},height:{},width:{},overscan:{default:2},overscanRows:{},overscanColumns:{},rowGap:{default:0},columnGap:{default:0},getItemKey:{},tag:{default:"div"},itemAttrs:{},revision:{},windowScroll:{type:Boolean,default:!1},scrollMargin:{default:0}},emits:["visibleRangeChange","scrollEnd"],setup(e,{expose:t,emit:r}){const i=e,o=r,s=n.ref(null),{virtualCells:d,totalWidth:O,totalHeight:M,scrollAdjustX:x,scrollAdjustY:c,scrollToIndex:g,scrollToOffset:R,measureRow:T,measureRowElement:f}=ye({items:()=>i.items,columnCount:()=>i.columnCount,estimateRowSize:()=>i.estimateRowSize,estimateColumnSize:()=>i.estimateColumnSize,container:s,overscan:()=>i.overscan,overscanRows:()=>i.overscanRows,overscanColumns:()=>i.overscanColumns,rowGap:()=>i.rowGap,columnGap:()=>i.columnGap,getItemKey:(m,I)=>i.getItemKey?.(m,I)??I,initialRect:()=>({width:_(i.width),height:_(i.height)}),revision:()=>i.revision,windowScroll:()=>i.windowScroll,scrollMargin:()=>i.scrollMargin,onVisibleRangeChange:m=>o("visibleRangeChange",m),onScrollEnd:()=>o("scrollEnd")}),b=n.computed(()=>re({height:i.height,width:i.width,horizontal:!1,windowScroll:i.windowScroll})),w=n.computed(()=>({position:"relative",width:`${A(O.value)}px`,height:`${A(M.value)}px`}));function v(m){return I=>{f(I,m)}}function z(m,I,V,F){return{position:"absolute",top:0,left:0,width:`${I}px`,height:`${F}px`,transform:`translate(${m}px, ${V}px)`,contain:"layout style",boxSizing:"border-box",overflow:"hidden"}}return t({scrollToIndex:g,scrollToOffset:R,measureRow:T}),(m,I)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.tag),{ref_key:"container",ref:s,"data-virtual-container":"",role:"grid",style:n.normalizeStyle(b.value)},{default:n.withCtx(()=>[e.items.length?(n.openBlock(),n.createElementBlock("div",{key:1,"data-virtual-spacer":"",style:n.normalizeStyle(w.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(d),V=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:V.key,ref_for:!0,ref:v(V.row.index),role:"gridcell","data-index":V.index,"data-key":String(V.key),style:z(V.column.start-n.unref(x),V.column.size,V.row.start-n.unref(c),V.row.size)},{ref_for:!0},e.itemAttrs),[n.renderSlot(m.$slots,"default",{item:V.item,index:V.index,rowIndex:V.row.index,columnIndex:V.column.index,row:V.row,column:V.column})],16,Je))),128))],4)):n.renderSlot(m.$slots,"empty",{},void 0,void 0,0)]),_:3},8,["style"]))}}),et=["data-index","data-key","aria-rowindex"],tt=n.defineComponent({__name:"VirtualTable",props:{rows:{},columns:{},estimateRowSize:{type:[Number,Function],default:44},height:{},width:{},overscan:{default:8},getRowKey:{},stickyHeader:{type:Boolean,default:!0},tag:{default:"div"},rowAttrs:{},revision:{},windowScroll:{type:Boolean,default:!1},scrollMargin:{default:0},reverse:{type:Boolean,default:!1}},emits:["visibleRangeChange","scrollEnd"],setup(e,{expose:t,emit:r}){const i=e,o=r,s=n.ref(null),d=n.ref(null),O=n.ref(0),{virtualRows:M,columns:x,totalWidth:c,totalHeight:g,scrollAdjust:R,scrollToIndex:T,scrollToOffset:f,measure:b,measureElement:w}=pe({rows:()=>i.rows,columns:()=>i.columns,estimateRowSize:(u,k)=>{const y=i.estimateRowSize;return typeof y=="number"?y:y(u,k)},container:s,overscan:()=>i.overscan,getRowKey:(u,k)=>i.getRowKey?.(u,k)??k,initialRect:()=>({width:_(i.width),height:_(i.height)}),viewportInset:O,revision:()=>i.revision,itemSize:()=>typeof i.estimateRowSize=="number"?i.estimateRowSize:void 0,windowScroll:()=>i.windowScroll,scrollMargin:()=>i.scrollMargin,reverse:()=>i.reverse,onVisibleRangeChange:u=>o("visibleRangeChange",u),onScrollEnd:()=>o("scrollEnd")});n.watch(d,(u,k,y)=>{if(k===u&&!u||!u||!P()||typeof ResizeObserver>"u")return;const $=()=>{O.value=u.getBoundingClientRect().height},X=new ResizeObserver($);X.observe(u),$(),y(()=>X.disconnect())});const v=n.computed(()=>re({height:i.height,width:i.width,horizontal:!1,windowScroll:i.windowScroll})),z=n.computed(()=>({minWidth:`${c.value}px`})),m=n.computed(()=>({position:i.stickyHeader?"sticky":"relative",top:i.stickyHeader?"0px":void 0,zIndex:3,display:"flex",width:`${c.value}px`})),I=n.computed(()=>({position:"relative",height:`${A(g.value)}px`,width:`${A(c.value)}px`}));function V(u){return{width:`${u.size}px`,minWidth:`${u.size}px`,flex:"0 0 auto",textAlign:u.align??"left",...u.stickyStyle,zIndex:u.pin?i.stickyHeader?4:2:u.stickyStyle.zIndex}}function F(u,k){return{position:"absolute",top:0,left:0,width:"100%",height:`${k}px`,display:"flex",transform:`translateY(${u}px)`,contain:"layout style",boxSizing:"border-box",overflow:"hidden"}}function K(u){return k=>{w(k,u)}}function C(u,k,y){return k.accessor?k.accessor(u,y):u&&typeof u=="object"&&k.id in u?u[k.id]:""}return t({scrollToIndex:T,scrollToOffset:f,measure:b}),(u,k)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.tag),{ref_key:"container",ref:s,"data-virtual-container":"",role:"table",style:n.normalizeStyle(v.value)},{default:n.withCtx(()=>[n.createElementVNode("div",{style:n.normalizeStyle(z.value)},[n.createElementVNode("div",{ref_key:"header",ref:d,role:"row",style:n.normalizeStyle(m.value)},[n.renderSlot(u.$slots,"header",{columns:n.unref(x)},()=>[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(x),y=>(n.openBlock(),n.createElementBlock("div",{key:y.id,role:"columnheader",style:n.normalizeStyle(V(y))},n.toDisplayString(y.header),5))),128))])],4),e.rows.length?(n.openBlock(),n.createElementBlock("div",{key:1,"data-virtual-spacer":"",role:"rowgroup",style:n.normalizeStyle(I.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(M),y=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:y.key,ref_for:!0,ref:K(y.index),role:"row","data-index":y.index,"data-key":String(y.key),"aria-rowindex":y.index+1,style:F(y.start-n.unref(R),y.size)},{ref_for:!0},e.rowAttrs),[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(x),$=>(n.openBlock(),n.createElementBlock("div",{key:$.id,role:"cell",style:n.normalizeStyle(V($))},[n.renderSlot(u.$slots,"cell",{row:y.item,column:$,rowIndex:y.index,value:C(y.item,$,y.index)},()=>[n.createTextVNode(n.toDisplayString(C(y.item,$,y.index)),1)])],4))),128))],16,et))),128))],4)):n.renderSlot(u.$slots,"empty",{},void 0,void 0,0)],4)]),_:3},8,["style"]))}});exports.MeasurementCache=me;exports.VirtualGrid=Qe;exports.VirtualList=Ze;exports.VirtualTable=tt;exports.Virtualizer=ve;exports.clampScrollOffset=H;exports.mapDomOffsetToVirtual=ge;exports.mapVirtualOffsetToDom=Se;exports.normalizeSize=J;exports.resolveScrollOffset=we;exports.scrollContentSize=A;exports.useVirtualGrid=ye;exports.useVirtualList=ie;exports.useVirtualTable=pe;exports.useVirtualizer=Q;
2
2
  //# sourceMappingURL=index.js.map