@floor/vlist 0.5.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/LICENSE +21 -0
- package/README.md +839 -0
- package/dist/adapters/index.d.ts +20 -0
- package/dist/adapters/index.d.ts.map +1 -0
- package/dist/adapters/react.d.ts +119 -0
- package/dist/adapters/react.d.ts.map +1 -0
- package/dist/adapters/svelte.d.ts +198 -0
- package/dist/adapters/svelte.d.ts.map +1 -0
- package/dist/adapters/vue.d.ts +151 -0
- package/dist/adapters/vue.d.ts.map +1 -0
- package/dist/builder/context.d.ts +36 -0
- package/dist/builder/context.d.ts.map +1 -0
- package/dist/builder/core.d.ts +16 -0
- package/dist/builder/core.d.ts.map +1 -0
- package/dist/builder/data.d.ts +71 -0
- package/dist/builder/data.d.ts.map +1 -0
- package/dist/builder/index.d.ts +25 -0
- package/dist/builder/index.d.ts.map +1 -0
- package/dist/builder/index.js +1 -0
- package/dist/builder/types.d.ts +269 -0
- package/dist/builder/types.d.ts.map +1 -0
- package/dist/compression/index.js +1 -0
- package/dist/constants.d.ts +65 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/core/index.js +1 -0
- package/dist/core-light.d.ts +104 -0
- package/dist/core-light.d.ts.map +1 -0
- package/dist/core-light.js +1 -0
- package/dist/core.d.ts +129 -0
- package/dist/core.d.ts.map +1 -0
- package/dist/data/index.js +1 -0
- package/dist/events/emitter.d.ts +20 -0
- package/dist/events/emitter.d.ts.map +1 -0
- package/dist/events/index.d.ts +6 -0
- package/dist/events/index.d.ts.map +1 -0
- package/dist/grid/index.js +1 -0
- package/dist/groups/index.js +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -0
- package/dist/plugins/compression/index.d.ts +10 -0
- package/dist/plugins/compression/index.d.ts.map +1 -0
- package/dist/plugins/compression/plugin.d.ts +42 -0
- package/dist/plugins/compression/plugin.d.ts.map +1 -0
- package/dist/plugins/data/index.d.ts +9 -0
- package/dist/plugins/data/index.d.ts.map +1 -0
- package/dist/plugins/data/manager.d.ts +103 -0
- package/dist/plugins/data/manager.d.ts.map +1 -0
- package/dist/plugins/data/placeholder.d.ts +62 -0
- package/dist/plugins/data/placeholder.d.ts.map +1 -0
- package/dist/plugins/data/plugin.d.ts +60 -0
- package/dist/plugins/data/plugin.d.ts.map +1 -0
- package/dist/plugins/data/sparse.d.ts +91 -0
- package/dist/plugins/data/sparse.d.ts.map +1 -0
- package/dist/plugins/grid/index.d.ts +9 -0
- package/dist/plugins/grid/index.d.ts.map +1 -0
- package/dist/plugins/grid/layout.d.ts +29 -0
- package/dist/plugins/grid/layout.d.ts.map +1 -0
- package/dist/plugins/grid/plugin.d.ts +48 -0
- package/dist/plugins/grid/plugin.d.ts.map +1 -0
- package/dist/plugins/grid/renderer.d.ts +55 -0
- package/dist/plugins/grid/renderer.d.ts.map +1 -0
- package/dist/plugins/grid/types.d.ts +71 -0
- package/dist/plugins/grid/types.d.ts.map +1 -0
- package/dist/plugins/groups/index.d.ts +10 -0
- package/dist/plugins/groups/index.d.ts.map +1 -0
- package/dist/plugins/groups/layout.d.ts +46 -0
- package/dist/plugins/groups/layout.d.ts.map +1 -0
- package/dist/plugins/groups/plugin.d.ts +63 -0
- package/dist/plugins/groups/plugin.d.ts.map +1 -0
- package/dist/plugins/groups/sticky.d.ts +33 -0
- package/dist/plugins/groups/sticky.d.ts.map +1 -0
- package/dist/plugins/groups/types.d.ts +86 -0
- package/dist/plugins/groups/types.d.ts.map +1 -0
- package/dist/plugins/scroll/controller.d.ts +121 -0
- package/dist/plugins/scroll/controller.d.ts.map +1 -0
- package/dist/plugins/scroll/index.d.ts +8 -0
- package/dist/plugins/scroll/index.d.ts.map +1 -0
- package/dist/plugins/scroll/plugin.d.ts +60 -0
- package/dist/plugins/scroll/plugin.d.ts.map +1 -0
- package/dist/plugins/scroll/scrollbar.d.ts +73 -0
- package/dist/plugins/scroll/scrollbar.d.ts.map +1 -0
- package/dist/plugins/selection/index.d.ts +7 -0
- package/dist/plugins/selection/index.d.ts.map +1 -0
- package/dist/plugins/selection/plugin.d.ts +44 -0
- package/dist/plugins/selection/plugin.d.ts.map +1 -0
- package/dist/plugins/selection/state.d.ts +102 -0
- package/dist/plugins/selection/state.d.ts.map +1 -0
- package/dist/plugins/snapshots/index.d.ts +8 -0
- package/dist/plugins/snapshots/index.d.ts.map +1 -0
- package/dist/plugins/snapshots/plugin.d.ts +44 -0
- package/dist/plugins/snapshots/plugin.d.ts.map +1 -0
- package/dist/plugins/window/index.d.ts +8 -0
- package/dist/plugins/window/index.d.ts.map +1 -0
- package/dist/plugins/window/plugin.d.ts +53 -0
- package/dist/plugins/window/plugin.d.ts.map +1 -0
- package/dist/react/index.js +1 -0
- package/dist/render/compression.d.ts +116 -0
- package/dist/render/compression.d.ts.map +1 -0
- package/dist/render/heights.d.ts +63 -0
- package/dist/render/heights.d.ts.map +1 -0
- package/dist/render/index.d.ts +9 -0
- package/dist/render/index.d.ts.map +1 -0
- package/dist/render/renderer.d.ts +103 -0
- package/dist/render/renderer.d.ts.map +1 -0
- package/dist/render/virtual.d.ts +139 -0
- package/dist/render/virtual.d.ts.map +1 -0
- package/dist/scroll/index.js +1 -0
- package/dist/selection/index.js +1 -0
- package/dist/snapshots/index.js +1 -0
- package/dist/svelte/index.js +1 -0
- package/dist/types.d.ts +559 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/vlist-extras.css +1 -0
- package/dist/vlist.css +1 -0
- package/dist/vlist.d.ts +22 -0
- package/dist/vlist.d.ts.map +1 -0
- package/dist/vue/index.js +1 -0
- package/dist/window/index.js +1 -0
- package/package.json +137 -0
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Data Management
|
|
3
|
+
* Handles data with sparse storage for million+ item support
|
|
4
|
+
*/
|
|
5
|
+
import type { VListItem, VListAdapter, Range } from "../../types";
|
|
6
|
+
import { type SparseStorage, type SparseStorageConfig } from "./sparse";
|
|
7
|
+
import { type PlaceholderConfig, type PlaceholderManager } from "./placeholder";
|
|
8
|
+
/** Data manager configuration */
|
|
9
|
+
export interface DataManagerConfig<T extends VListItem = VListItem> {
|
|
10
|
+
/** Async data adapter */
|
|
11
|
+
adapter?: VListAdapter<T>;
|
|
12
|
+
/** Initial items (optional) */
|
|
13
|
+
initialItems?: T[];
|
|
14
|
+
/** Initial total count (if known) */
|
|
15
|
+
initialTotal?: number;
|
|
16
|
+
/** Sparse storage configuration */
|
|
17
|
+
storage?: SparseStorageConfig;
|
|
18
|
+
/** Placeholder configuration */
|
|
19
|
+
placeholder?: PlaceholderConfig;
|
|
20
|
+
/** Items per load request (default: 50) */
|
|
21
|
+
pageSize?: number;
|
|
22
|
+
/** Callback when state changes */
|
|
23
|
+
onStateChange?: (state: DataState<T>) => void;
|
|
24
|
+
/** Callback when items are loaded */
|
|
25
|
+
onItemsLoaded?: (items: T[], offset: number, total: number) => void;
|
|
26
|
+
/** Callback when items are evicted */
|
|
27
|
+
onItemsEvicted?: (count: number) => void;
|
|
28
|
+
}
|
|
29
|
+
/** Data state */
|
|
30
|
+
export interface DataState<_T extends VListItem = VListItem> {
|
|
31
|
+
/** Total items (declared, may be larger than loaded) */
|
|
32
|
+
total: number;
|
|
33
|
+
/** Number of items in memory */
|
|
34
|
+
cached: number;
|
|
35
|
+
/** Whether data is loading */
|
|
36
|
+
isLoading: boolean;
|
|
37
|
+
/** Pending load ranges */
|
|
38
|
+
pendingRanges: Range[];
|
|
39
|
+
/** Error from last operation */
|
|
40
|
+
error: Error | undefined;
|
|
41
|
+
/** Whether more items exist */
|
|
42
|
+
hasMore: boolean;
|
|
43
|
+
/** Current cursor (for cursor pagination) */
|
|
44
|
+
cursor: string | undefined;
|
|
45
|
+
}
|
|
46
|
+
/** Data manager instance */
|
|
47
|
+
export interface DataManager<T extends VListItem = VListItem> {
|
|
48
|
+
/** Get current state */
|
|
49
|
+
getState: () => DataState<T>;
|
|
50
|
+
/** Get total item count (direct getter, no allocation) */
|
|
51
|
+
getTotal: () => number;
|
|
52
|
+
/** Get cached item count (direct getter, no allocation) */
|
|
53
|
+
getCached: () => number;
|
|
54
|
+
/** Check if currently loading (direct getter, no allocation) */
|
|
55
|
+
getIsLoading: () => boolean;
|
|
56
|
+
/** Check if more items available (direct getter, no allocation) */
|
|
57
|
+
getHasMore: () => boolean;
|
|
58
|
+
/** Get sparse storage */
|
|
59
|
+
getStorage: () => SparseStorage<T>;
|
|
60
|
+
/** Get placeholder manager */
|
|
61
|
+
getPlaceholders: () => PlaceholderManager<T>;
|
|
62
|
+
/** Get item at index (may return placeholder if not loaded) */
|
|
63
|
+
getItem: (index: number) => T | undefined;
|
|
64
|
+
/** Get item by ID */
|
|
65
|
+
getItemById: (id: string | number) => T | undefined;
|
|
66
|
+
/** Get index by ID (-1 if not found) */
|
|
67
|
+
getIndexById: (id: string | number) => number;
|
|
68
|
+
/** Check if item at index is loaded (not placeholder) */
|
|
69
|
+
isItemLoaded: (index: number) => boolean;
|
|
70
|
+
/** Get items in range (includes placeholders for unloaded) */
|
|
71
|
+
getItemsInRange: (start: number, end: number) => T[];
|
|
72
|
+
/** Set total item count */
|
|
73
|
+
setTotal: (total: number) => void;
|
|
74
|
+
/** Set items at offset */
|
|
75
|
+
setItems: (items: T[], offset?: number, total?: number) => void;
|
|
76
|
+
/** Update item by ID */
|
|
77
|
+
updateItem: (id: string | number, updates: Partial<T>) => boolean;
|
|
78
|
+
/** Remove item by ID */
|
|
79
|
+
removeItem: (id: string | number) => boolean;
|
|
80
|
+
/** Load items for a range */
|
|
81
|
+
loadRange: (start: number, end: number) => Promise<void>;
|
|
82
|
+
/** Ensure range is loaded (no-op if already loaded) */
|
|
83
|
+
ensureRange: (start: number, end: number) => Promise<void>;
|
|
84
|
+
/** Load initial data */
|
|
85
|
+
loadInitial: () => Promise<void>;
|
|
86
|
+
/** Load more items (infinite scroll) */
|
|
87
|
+
loadMore: () => Promise<boolean>;
|
|
88
|
+
/** Reload all data */
|
|
89
|
+
reload: () => Promise<void>;
|
|
90
|
+
/** Evict items far from visible range */
|
|
91
|
+
evictDistant: (visibleStart: number, visibleEnd: number) => void;
|
|
92
|
+
/** Clear all data */
|
|
93
|
+
clear: () => void;
|
|
94
|
+
/** Reset to initial state */
|
|
95
|
+
reset: () => void;
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Create a data manager with sparse storage support
|
|
99
|
+
*/
|
|
100
|
+
export declare const createDataManager: <T extends VListItem = VListItem>(config?: DataManagerConfig<T>) => DataManager<T>;
|
|
101
|
+
export { mergeRanges, calculateMissingRanges } from "./sparse";
|
|
102
|
+
export { isPlaceholderItem, filterPlaceholders, countRealItems, } from "./placeholder";
|
|
103
|
+
//# sourceMappingURL=manager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../../src/plugins/data/manager.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Placeholder System
|
|
3
|
+
* Smart placeholder generation for loading states
|
|
4
|
+
*
|
|
5
|
+
* Key features:
|
|
6
|
+
* - Analyzes loaded data to generate realistic placeholders
|
|
7
|
+
* - Supports masked text with configurable character
|
|
8
|
+
* - Random length variance for natural appearance
|
|
9
|
+
* - Efficient placeholder detection
|
|
10
|
+
*/
|
|
11
|
+
import type { VListItem } from "../../types";
|
|
12
|
+
/** Placeholder configuration */
|
|
13
|
+
export interface PlaceholderConfig {
|
|
14
|
+
/** Enable placeholder generation (default: true) */
|
|
15
|
+
enabled?: boolean;
|
|
16
|
+
/** Character used for masking text (default: '█') */
|
|
17
|
+
maskCharacter?: string;
|
|
18
|
+
/** Add random variance to text lengths (default: true) */
|
|
19
|
+
randomVariance?: boolean;
|
|
20
|
+
/** Maximum items to sample for structure analysis (default: 20) */
|
|
21
|
+
maxSampleSize?: number;
|
|
22
|
+
/** Custom placeholder generator */
|
|
23
|
+
customGenerator?: (index: number) => VListItem;
|
|
24
|
+
}
|
|
25
|
+
/** Placeholder manager instance */
|
|
26
|
+
export interface PlaceholderManager<T extends VListItem = VListItem> {
|
|
27
|
+
/** Analyze data structure from sample items */
|
|
28
|
+
analyzeStructure: (items: T[]) => void;
|
|
29
|
+
/** Check if structure has been analyzed */
|
|
30
|
+
hasAnalyzedStructure: () => boolean;
|
|
31
|
+
/** Generate a single placeholder item */
|
|
32
|
+
generate: (index: number) => T;
|
|
33
|
+
/** Generate multiple placeholder items */
|
|
34
|
+
generateRange: (start: number, end: number) => T[];
|
|
35
|
+
/** Check if an item is a placeholder */
|
|
36
|
+
isPlaceholder: (item: unknown) => boolean;
|
|
37
|
+
/** Get the placeholder flag key */
|
|
38
|
+
getPlaceholderKey: () => string;
|
|
39
|
+
/** Clear analyzed structure */
|
|
40
|
+
clear: () => void;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Create a placeholder manager
|
|
44
|
+
*/
|
|
45
|
+
export declare const createPlaceholderManager: <T extends VListItem = VListItem>(config?: PlaceholderConfig) => PlaceholderManager<T>;
|
|
46
|
+
/**
|
|
47
|
+
* Check if an item is a placeholder (standalone function)
|
|
48
|
+
*/
|
|
49
|
+
export declare const isPlaceholderItem: (item: unknown) => boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Filter out placeholder items from an array
|
|
52
|
+
*/
|
|
53
|
+
export declare const filterPlaceholders: <T extends VListItem>(items: T[]) => T[];
|
|
54
|
+
/**
|
|
55
|
+
* Count non-placeholder items in an array
|
|
56
|
+
*/
|
|
57
|
+
export declare const countRealItems: <T extends VListItem>(items: (T | undefined)[]) => number;
|
|
58
|
+
/**
|
|
59
|
+
* Replace placeholders in a sparse array with real items
|
|
60
|
+
*/
|
|
61
|
+
export declare const replacePlaceholders: <T extends VListItem>(target: (T | undefined)[], items: T[], offset: number) => number;
|
|
62
|
+
//# sourceMappingURL=placeholder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"placeholder.d.ts","sourceRoot":"","sources":["../../../src/plugins/data/placeholder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,gCAAgC;AAChC,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAChD;AAiBD,mCAAmC;AACnC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IACjE,+CAA+C;IAC/C,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEvC,2CAA2C;IAC3C,oBAAoB,EAAE,MAAM,OAAO,CAAC;IAEpC,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAE/B,0CAA0C;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;IAEnD,wCAAwC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAE1C,mCAAmC;IACnC,iBAAiB,EAAE,MAAM,MAAM,CAAC;IAEhC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAeD;;GAEG;AACH,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EACtE,SAAQ,iBAAsB,KAC7B,kBAAkB,CAAC,CAAC,CA+OtB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,OAMjD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,SAAS,EAAE,OAAO,CAAC,EAAE,KAAG,CAAC,EAErE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAChD,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,KACvB,MAUF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,SAAS,EACrD,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,EACzB,OAAO,CAAC,EAAE,EACV,QAAQ,MAAM,KACb,MAiBF,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist/data - Builder Plugin
|
|
3
|
+
* Wraps async data loading with sparse storage into a VListPlugin for the composable builder.
|
|
4
|
+
*
|
|
5
|
+
* Priority: 20 (runs before scrollbar and selection, after grid/groups)
|
|
6
|
+
*
|
|
7
|
+
* What it wires:
|
|
8
|
+
* - Replaces data manager — swaps the simple in-memory store with sparse storage
|
|
9
|
+
* - Scroll boundary detection — triggers loadMore() near the bottom (or top in reverse)
|
|
10
|
+
* - Velocity-aware loading — skips data fetching during fast scrolling, loads on idle
|
|
11
|
+
* - Placeholder generation — creates skeleton items for unloaded ranges
|
|
12
|
+
* - Request deduplication — prevents duplicate fetches for the same range
|
|
13
|
+
* - Idle handler — loads any pending ranges when scrolling stops
|
|
14
|
+
*
|
|
15
|
+
* Added methods: reload
|
|
16
|
+
* Added events: load:start, load:end, error
|
|
17
|
+
*/
|
|
18
|
+
import type { VListItem, VListAdapter } from "../../types";
|
|
19
|
+
import type { VListPlugin } from "../../builder/types";
|
|
20
|
+
/** Data plugin configuration */
|
|
21
|
+
export interface DataPluginConfig<T extends VListItem = VListItem> {
|
|
22
|
+
/** Async data source (required) */
|
|
23
|
+
adapter: VListAdapter<T>;
|
|
24
|
+
/** Loading behavior configuration */
|
|
25
|
+
loading?: {
|
|
26
|
+
/** Velocity threshold above which data loading is skipped (px/ms). Default: 25 */
|
|
27
|
+
cancelThreshold?: number;
|
|
28
|
+
/** Velocity threshold for preloading (px/ms). Default: 2 */
|
|
29
|
+
preloadThreshold?: number;
|
|
30
|
+
/** Number of items to preload in scroll direction. Default: 50 */
|
|
31
|
+
preloadAhead?: number;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Create a data plugin for the builder.
|
|
36
|
+
*
|
|
37
|
+
* Adds async data loading with sparse storage, placeholders, and infinite scroll.
|
|
38
|
+
*
|
|
39
|
+
* ```ts
|
|
40
|
+
* import { vlist } from 'vlist/builder'
|
|
41
|
+
* import { withData } from 'vlist/data'
|
|
42
|
+
*
|
|
43
|
+
* const list = vlist({
|
|
44
|
+
* container: '#app',
|
|
45
|
+
* item: { height: 48, template: renderItem },
|
|
46
|
+
* })
|
|
47
|
+
* .use(withData({
|
|
48
|
+
* adapter: {
|
|
49
|
+
* read: async ({ offset, limit }) => {
|
|
50
|
+
* const res = await fetch(`/api/items?offset=${offset}&limit=${limit}`)
|
|
51
|
+
* const data = await res.json()
|
|
52
|
+
* return { items: data.items, total: data.total, hasMore: data.hasMore }
|
|
53
|
+
* }
|
|
54
|
+
* }
|
|
55
|
+
* }))
|
|
56
|
+
* .build()
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
export declare const withData: <T extends VListItem = VListItem>(config: DataPluginConfig<T>) => VListPlugin<T>;
|
|
60
|
+
//# sourceMappingURL=plugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/data/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAS,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAkB,MAAM,qBAAqB,CAAC;AAiBvE,gCAAgC;AAChC,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAC/D,mCAAmC;IACnC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzB,qCAAqC;IACrC,OAAO,CAAC,EAAE;QACR,kFAAkF;QAClF,eAAe,CAAC,EAAE,MAAM,CAAC;QAEzB,4DAA4D;QAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAE1B,kEAAkE;QAClE,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAMD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EACtD,QAAQ,gBAAgB,CAAC,CAAC,CAAC,KAC1B,WAAW,CAAC,CAAC,CAiOf,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Sparse Storage
|
|
3
|
+
* Efficient storage for million+ item virtual lists
|
|
4
|
+
*/
|
|
5
|
+
import type { VListItem, Range } from "../../types";
|
|
6
|
+
/** Configuration for sparse storage */
|
|
7
|
+
export interface SparseStorageConfig {
|
|
8
|
+
/** Number of items per chunk (default: 100) */
|
|
9
|
+
chunkSize?: number;
|
|
10
|
+
/** Maximum items to keep in memory (default: 5000) */
|
|
11
|
+
maxCachedItems?: number;
|
|
12
|
+
/** Extra items to keep around visible range during eviction (default: 200) */
|
|
13
|
+
evictionBuffer?: number;
|
|
14
|
+
/** Callback when items are evicted */
|
|
15
|
+
onEvict?: (evictedCount: number, evictedRanges: number[]) => void;
|
|
16
|
+
}
|
|
17
|
+
/** Storage statistics */
|
|
18
|
+
export interface SparseStorageStats {
|
|
19
|
+
/** Total items declared (may be larger than loaded) */
|
|
20
|
+
totalItems: number;
|
|
21
|
+
/** Number of items currently in memory */
|
|
22
|
+
cachedItems: number;
|
|
23
|
+
/** Number of chunks in memory */
|
|
24
|
+
cachedChunks: number;
|
|
25
|
+
/** Chunk size */
|
|
26
|
+
chunkSize: number;
|
|
27
|
+
/** Maximum cached items allowed */
|
|
28
|
+
maxCachedItems: number;
|
|
29
|
+
/** Memory efficiency (cachedItems / totalItems) */
|
|
30
|
+
memoryEfficiency: number;
|
|
31
|
+
}
|
|
32
|
+
/** Sparse storage instance */
|
|
33
|
+
export interface SparseStorage<T extends VListItem = VListItem> {
|
|
34
|
+
readonly chunkSize: number;
|
|
35
|
+
readonly maxCachedItems: number;
|
|
36
|
+
/** Get total item count */
|
|
37
|
+
getTotal: () => number;
|
|
38
|
+
/** Set total item count (for virtual scrolling height) */
|
|
39
|
+
setTotal: (total: number) => void;
|
|
40
|
+
/** Get item at index (undefined if not loaded) */
|
|
41
|
+
get: (index: number) => T | undefined;
|
|
42
|
+
/** Check if item at index is loaded */
|
|
43
|
+
has: (index: number) => boolean;
|
|
44
|
+
/** Set item at index */
|
|
45
|
+
set: (index: number, item: T) => void;
|
|
46
|
+
/** Set multiple items starting at offset */
|
|
47
|
+
setRange: (offset: number, items: T[]) => void;
|
|
48
|
+
/** Delete item at index */
|
|
49
|
+
delete: (index: number) => boolean;
|
|
50
|
+
/** Get items in range (includes undefined for unloaded) */
|
|
51
|
+
getRange: (start: number, end: number) => (T | undefined)[];
|
|
52
|
+
/** Check if range is fully loaded */
|
|
53
|
+
isRangeLoaded: (start: number, end: number) => boolean;
|
|
54
|
+
/** Get loaded ranges */
|
|
55
|
+
getLoadedRanges: () => Range[];
|
|
56
|
+
/** Find unloaded ranges within a given range */
|
|
57
|
+
findUnloadedRanges: (start: number, end: number) => Range[];
|
|
58
|
+
/** Get chunk index for item index */
|
|
59
|
+
getChunkIndex: (itemIndex: number) => number;
|
|
60
|
+
/** Check if chunk is loaded */
|
|
61
|
+
isChunkLoaded: (chunkIndex: number) => boolean;
|
|
62
|
+
/** Mark chunk as accessed (for LRU) */
|
|
63
|
+
touchChunk: (chunkIndex: number) => void;
|
|
64
|
+
/** Mark all chunks in a range as accessed with a single Date.now() call */
|
|
65
|
+
touchChunksForRange: (start: number, end: number) => void;
|
|
66
|
+
/** Evict chunks far from visible range */
|
|
67
|
+
evictDistant: (visibleStart: number, visibleEnd: number) => number;
|
|
68
|
+
/** Force eviction to meet memory limit */
|
|
69
|
+
evictToLimit: () => number;
|
|
70
|
+
/** Get storage statistics */
|
|
71
|
+
getStats: () => SparseStorageStats;
|
|
72
|
+
/** Get cached item count */
|
|
73
|
+
getCachedCount: () => number;
|
|
74
|
+
/** Clear all data */
|
|
75
|
+
clear: () => void;
|
|
76
|
+
/** Reset to initial state */
|
|
77
|
+
reset: () => void;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Create sparse storage for efficient large list handling
|
|
81
|
+
*/
|
|
82
|
+
export declare const createSparseStorage: <T extends VListItem = VListItem>(config?: SparseStorageConfig) => SparseStorage<T>;
|
|
83
|
+
/**
|
|
84
|
+
* Merge adjacent/overlapping ranges
|
|
85
|
+
*/
|
|
86
|
+
export declare const mergeRanges: (ranges: Range[]) => Range[];
|
|
87
|
+
/**
|
|
88
|
+
* Calculate ranges that need to be loaded
|
|
89
|
+
*/
|
|
90
|
+
export declare const calculateMissingRanges: (needed: Range, loaded: Range[], chunkSize: number) => Range[];
|
|
91
|
+
//# sourceMappingURL=sparse.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sparse.d.ts","sourceRoot":"","sources":["../../../src/plugins/data/sparse.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Grid Domain
|
|
3
|
+
* 2D grid/card layout with virtualized rows
|
|
4
|
+
*/
|
|
5
|
+
export { withGrid, type GridPluginConfig } from "./plugin";
|
|
6
|
+
export { createGridLayout } from "./layout";
|
|
7
|
+
export { createGridRenderer, type GridRenderer } from "./renderer";
|
|
8
|
+
export type { GridConfig, GridLayout, GridPosition, ItemRange } from "./types";
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/grid/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,kBAAkB,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGnE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Grid Layout
|
|
3
|
+
* Pure O(1) calculations for mapping between flat item indices and grid positions.
|
|
4
|
+
*
|
|
5
|
+
* The grid transforms a flat list into rows:
|
|
6
|
+
* Items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
|
|
7
|
+
* Grid (columns=4):
|
|
8
|
+
* Row 0: [0, 1, 2, 3]
|
|
9
|
+
* Row 1: [4, 5, 6, 7]
|
|
10
|
+
* Row 2: [8, 9] ← partially filled last row
|
|
11
|
+
*
|
|
12
|
+
* All operations are O(1) — integer division and modulo only.
|
|
13
|
+
*/
|
|
14
|
+
import type { GridConfig, GridLayout } from "./types";
|
|
15
|
+
/**
|
|
16
|
+
* Extended grid config with optional groups support
|
|
17
|
+
*/
|
|
18
|
+
export interface GridConfigWithGroups extends GridConfig {
|
|
19
|
+
/** Optional: check if an item index is a group header (for groups-aware layout) */
|
|
20
|
+
isHeaderFn?: (index: number) => boolean;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Create a GridLayout instance.
|
|
24
|
+
*
|
|
25
|
+
* @param config - Grid configuration (columns, gap, optional isHeaderFn)
|
|
26
|
+
* @returns GridLayout with O(1) mapping functions (or groups-aware if isHeaderFn provided)
|
|
27
|
+
*/
|
|
28
|
+
export declare const createGridLayout: (config: GridConfigWithGroups) => GridLayout;
|
|
29
|
+
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/plugins/grid/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAE/E;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,mFAAmF;IACnF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACzC;AAMD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,oBAAoB,KAAG,UA4R/D,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist/grid - Builder Plugin
|
|
3
|
+
* Switches from list layout to a 2D grid with configurable columns and gap.
|
|
4
|
+
*
|
|
5
|
+
* Priority: 10 (runs first — replaces the renderer before anything else renders)
|
|
6
|
+
*
|
|
7
|
+
* What it wires:
|
|
8
|
+
* - Replaces renderer — swaps the list renderer with a grid renderer
|
|
9
|
+
* - Redefines virtual total — the virtualizer sees rows, not items
|
|
10
|
+
* - Column width calculation — recalculated on resize
|
|
11
|
+
* - Item positioning — each item gets translateX (column) and translateY (row)
|
|
12
|
+
* - CSS class — adds .vlist--grid to the root element
|
|
13
|
+
*
|
|
14
|
+
* Restrictions:
|
|
15
|
+
* - Cannot be combined with direction: 'horizontal'
|
|
16
|
+
* - Cannot be combined with reverse: true
|
|
17
|
+
*
|
|
18
|
+
* Can be combined with withGroups for grouped 2D layouts.
|
|
19
|
+
*/
|
|
20
|
+
import type { VListItem } from "../../types";
|
|
21
|
+
import type { VListPlugin } from "../../builder/types";
|
|
22
|
+
/** Grid plugin configuration */
|
|
23
|
+
export interface GridPluginConfig {
|
|
24
|
+
/** Number of columns (required, >= 1) */
|
|
25
|
+
columns: number;
|
|
26
|
+
/** Gap between items in pixels (default: 0) */
|
|
27
|
+
gap?: number;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Create a grid plugin for the builder.
|
|
31
|
+
*
|
|
32
|
+
* Switches from list layout to a 2D grid with configurable columns and gap.
|
|
33
|
+
*
|
|
34
|
+
* ```ts
|
|
35
|
+
* import { vlist } from 'vlist/builder'
|
|
36
|
+
* import { withGrid } from 'vlist/grid'
|
|
37
|
+
*
|
|
38
|
+
* const gallery = vlist({
|
|
39
|
+
* container: '#gallery',
|
|
40
|
+
* item: { height: 200, template: renderPhoto },
|
|
41
|
+
* items: photos,
|
|
42
|
+
* })
|
|
43
|
+
* .use(withGrid({ columns: 4, gap: 8 }))
|
|
44
|
+
* .build()
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export declare const withGrid: <T extends VListItem = VListItem>(config: GridPluginConfig) => VListPlugin<T>;
|
|
48
|
+
//# sourceMappingURL=plugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/grid/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,WAAW,EAAkB,MAAM,qBAAqB,CAAC;AAUvE,gCAAgC;AAChC,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;IAEhB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EACtD,QAAQ,gBAAgB,KACvB,WAAW,CAAC,CAAC,CA8Zf,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Grid Renderer
|
|
3
|
+
* Renders items in a 2D grid layout within the virtual scroll container.
|
|
4
|
+
*
|
|
5
|
+
* Extends the base renderer pattern but positions items using both
|
|
6
|
+
* row offsets (translateY from the height cache) and column offsets
|
|
7
|
+
* (translateX calculated from column index and container width).
|
|
8
|
+
*
|
|
9
|
+
* Key differences from the list renderer:
|
|
10
|
+
* - Items are positioned with translate(x, y) instead of just translateY(y)
|
|
11
|
+
* - Item width is set to columnWidth (containerWidth / columns - gaps)
|
|
12
|
+
* - The "index" in the rendered map is the FLAT ITEM INDEX (not row index)
|
|
13
|
+
* - Row offsets come from the height cache (which operates on row indices)
|
|
14
|
+
* - Column offsets are calculated from itemIndex % columns
|
|
15
|
+
*/
|
|
16
|
+
import type { VListItem, ItemTemplate, Range } from "../../types";
|
|
17
|
+
import type { HeightCache } from "../../render/heights";
|
|
18
|
+
import type { CompressionContext } from "../../render/renderer";
|
|
19
|
+
import type { GridLayout } from "./types";
|
|
20
|
+
/** Grid renderer instance */
|
|
21
|
+
export interface GridRenderer<T extends VListItem = VListItem> {
|
|
22
|
+
/** Render items for a flat item range, positioned in a 2D grid */
|
|
23
|
+
render: (items: T[], range: Range, selectedIds: Set<string | number>, focusedIndex: number, compressionCtx?: CompressionContext) => void;
|
|
24
|
+
/** Update item positions (for compressed scrolling) */
|
|
25
|
+
updatePositions: (compressionCtx: CompressionContext) => void;
|
|
26
|
+
/** Update a single item */
|
|
27
|
+
updateItem: (index: number, item: T, isSelected: boolean, isFocused: boolean) => void;
|
|
28
|
+
/** Update only CSS classes on a rendered item (no template re-evaluation) */
|
|
29
|
+
updateItemClasses: (index: number, isSelected: boolean, isFocused: boolean) => void;
|
|
30
|
+
/** Get rendered item element by flat item index */
|
|
31
|
+
getElement: (index: number) => HTMLElement | undefined;
|
|
32
|
+
/** Update container width (call on resize) */
|
|
33
|
+
updateContainerWidth: (width: number) => void;
|
|
34
|
+
/** Clear all rendered items */
|
|
35
|
+
clear: () => void;
|
|
36
|
+
/** Destroy renderer and cleanup */
|
|
37
|
+
destroy: () => void;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Create a grid renderer for managing DOM elements in a 2D layout.
|
|
41
|
+
*
|
|
42
|
+
* The grid renderer receives flat item ranges (not row ranges) and
|
|
43
|
+
* positions each item at the correct (row, col) coordinate.
|
|
44
|
+
*
|
|
45
|
+
* @param itemsContainer - The DOM element that holds rendered items
|
|
46
|
+
* @param template - Item template function
|
|
47
|
+
* @param heightCache - Height cache operating on ROW indices
|
|
48
|
+
* @param gridLayout - Grid layout for row/col calculations
|
|
49
|
+
* @param classPrefix - CSS class prefix
|
|
50
|
+
* @param initialContainerWidth - Initial container width for column sizing
|
|
51
|
+
* @param totalItemsGetter - Optional getter for total item count (for aria-setsize)
|
|
52
|
+
* @param ariaIdPrefix - Optional unique prefix for element IDs (for aria-activedescendant)
|
|
53
|
+
*/
|
|
54
|
+
export declare const createGridRenderer: <T extends VListItem = VListItem>(itemsContainer: HTMLElement, template: ItemTemplate<T>, heightCache: HeightCache, gridLayout: GridLayout, classPrefix: string, initialContainerWidth: number, totalItemsGetter?: () => number, ariaIdPrefix?: string) => GridRenderer<T>;
|
|
55
|
+
//# sourceMappingURL=renderer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/plugins/grid/renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EAEZ,KAAK,EAEN,MAAM,aAAa,CAAC;AAOrB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAO1C,6BAA6B;AAC7B,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAC3D,kEAAkE;IAClE,MAAM,EAAE,CACN,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EACjC,YAAY,EAAE,MAAM,EACpB,cAAc,CAAC,EAAE,kBAAkB,KAChC,IAAI,CAAC;IAEV,uDAAuD;IACvD,eAAe,EAAE,CAAC,cAAc,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE9D,2BAA2B;IAC3B,UAAU,EAAE,CACV,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,OAAO,EACnB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IAEV,6EAA6E;IAC7E,iBAAiB,EAAE,CACjB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,OAAO,EACnB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IAEV,mDAAmD;IACnD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IAEvD,8CAA8C;IAC9C,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoDD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAChE,gBAAgB,WAAW,EAC3B,UAAU,YAAY,CAAC,CAAC,CAAC,EACzB,aAAa,WAAW,EACxB,YAAY,UAAU,EACtB,aAAa,MAAM,EACnB,uBAAuB,MAAM,EAC7B,mBAAmB,MAAM,MAAM,EAC/B,eAAe,MAAM,KACpB,YAAY,CAAC,CAAC,CAmahB,CAAC"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Grid Types
|
|
3
|
+
* Types for grid/card layout mode
|
|
4
|
+
*
|
|
5
|
+
* Grid layout transforms a flat list of items into a 2D grid where:
|
|
6
|
+
* - Virtualization operates on ROWS (not individual items)
|
|
7
|
+
* - Each row contains `columns` items side by side
|
|
8
|
+
* - Items are positioned using row/column coordinates
|
|
9
|
+
* - Compression applies to row count, not item count
|
|
10
|
+
*/
|
|
11
|
+
import type { GridConfig } from "../../types";
|
|
12
|
+
export type { GridConfig };
|
|
13
|
+
/** Row/column position of an item */
|
|
14
|
+
export interface GridPosition {
|
|
15
|
+
/** Row index (0-based) */
|
|
16
|
+
row: number;
|
|
17
|
+
/** Column index (0-based) */
|
|
18
|
+
col: number;
|
|
19
|
+
}
|
|
20
|
+
/** Flat item range corresponding to a row range */
|
|
21
|
+
export interface ItemRange {
|
|
22
|
+
/** First item index (inclusive) */
|
|
23
|
+
start: number;
|
|
24
|
+
/** Last item index (inclusive) */
|
|
25
|
+
end: number;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* GridLayout — maps between flat item indices and row/column positions.
|
|
29
|
+
*
|
|
30
|
+
* The virtualizer sees "rows" as its unit of work. Each row contains
|
|
31
|
+
* up to `columns` items. The last row may be partially filled.
|
|
32
|
+
*
|
|
33
|
+
* All operations are O(1) — just integer division and modulo.
|
|
34
|
+
*/
|
|
35
|
+
export interface GridLayout {
|
|
36
|
+
/** Number of columns */
|
|
37
|
+
readonly columns: number;
|
|
38
|
+
/** Gap between items in pixels */
|
|
39
|
+
readonly gap: number;
|
|
40
|
+
/** Update grid configuration without recreating the layout */
|
|
41
|
+
update: (config: Partial<GridConfig>) => void;
|
|
42
|
+
/** Get total number of rows for a given item count */
|
|
43
|
+
getTotalRows: (totalItems: number) => number;
|
|
44
|
+
/** Get the row/col position for a flat item index */
|
|
45
|
+
getPosition: (itemIndex: number) => GridPosition;
|
|
46
|
+
/** Get the row index for a flat item index */
|
|
47
|
+
getRow: (itemIndex: number) => number;
|
|
48
|
+
/** Get the column index for a flat item index */
|
|
49
|
+
getCol: (itemIndex: number) => number;
|
|
50
|
+
/**
|
|
51
|
+
* Get the flat item range for a range of rows.
|
|
52
|
+
* The last row may be partially filled (end is clamped to totalItems - 1).
|
|
53
|
+
*/
|
|
54
|
+
getItemRange: (rowStart: number, rowEnd: number, totalItems: number) => ItemRange;
|
|
55
|
+
/**
|
|
56
|
+
* Get the flat item index from a row and column.
|
|
57
|
+
* Returns -1 if out of bounds.
|
|
58
|
+
*/
|
|
59
|
+
getItemIndex: (row: number, col: number, totalItems: number) => number;
|
|
60
|
+
/**
|
|
61
|
+
* Calculate column width given container width.
|
|
62
|
+
* Accounts for gaps: width = (containerWidth - (columns - 1) * gap) / columns
|
|
63
|
+
*/
|
|
64
|
+
getColumnWidth: (containerWidth: number) => number;
|
|
65
|
+
/**
|
|
66
|
+
* Calculate the X offset for a column index.
|
|
67
|
+
* offset = col * (columnWidth + gap)
|
|
68
|
+
*/
|
|
69
|
+
getColumnOffset: (col: number, containerWidth: number) => number;
|
|
70
|
+
}
|
|
71
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/grid/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,YAAY,EAAE,UAAU,EAAE,CAAC;AAM3B,qCAAqC;AACrC,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAC;IAEZ,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,mDAAmD;AACnD,MAAM,WAAW,SAAS;IACxB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,UAAU;IACzB,wBAAwB;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAEzB,kCAAkC;IAClC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAErB,8DAA8D;IAC9D,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAE9C,sDAAsD;IACtD,YAAY,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAE7C,qDAAqD;IACrD,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,YAAY,CAAC;IAEjD,8CAA8C;IAC9C,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtC,iDAAiD;IACjD,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtC;;;OAGG;IACH,YAAY,EAAE,CACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,KACf,SAAS,CAAC;IAEf;;;OAGG;IACH,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvE;;;OAGG;IACH,cAAc,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;IAEnD;;;OAGG;IACH,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;CAClE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Groups Domain
|
|
3
|
+
* Sticky headers and grouped lists
|
|
4
|
+
*/
|
|
5
|
+
export { withGroups, type GroupsPluginConfig } from "./plugin";
|
|
6
|
+
export type { GroupsConfig, GroupBoundary, LayoutEntry, GroupHeaderItem, GroupLayout, StickyHeader, } from "./types";
|
|
7
|
+
export { isGroupHeader } from "./types";
|
|
8
|
+
export { createGroupLayout, buildLayoutItems, createGroupedHeightFn, } from "./layout";
|
|
9
|
+
export { createStickyHeader } from "./sticky";
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/groups/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAG/D,YAAY,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,eAAe,EACf,WAAW,EACX,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* vlist - Group Layout
|
|
3
|
+
* Computes group boundaries and maps between data indices and layout indices.
|
|
4
|
+
*
|
|
5
|
+
* The layout transforms a flat items array into a "layout" that includes
|
|
6
|
+
* group header pseudo-items interspersed at group boundaries:
|
|
7
|
+
*
|
|
8
|
+
* Data: [item0, item1, item2, item3, item4, item5]
|
|
9
|
+
* Groups: [ A, A, A, B, B, C ]
|
|
10
|
+
* Layout: [headerA, item0, item1, item2, headerB, item3, item4, headerC, item5]
|
|
11
|
+
* Index: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
|
|
12
|
+
*
|
|
13
|
+
* All lookups are O(log g) where g = number of groups, using binary search
|
|
14
|
+
* on the sorted group boundaries array.
|
|
15
|
+
*/
|
|
16
|
+
import type { GroupsConfig, GroupBoundary, GroupLayout, GroupHeaderItem } from "./types";
|
|
17
|
+
import type { VListItem } from "../../types";
|
|
18
|
+
/**
|
|
19
|
+
* Build the transformed layout items array with header pseudo-items inserted
|
|
20
|
+
* at group boundaries.
|
|
21
|
+
*
|
|
22
|
+
* @param items - Original data items
|
|
23
|
+
* @param groups - Computed group boundaries
|
|
24
|
+
* @returns Array of items and header pseudo-items in layout order
|
|
25
|
+
*/
|
|
26
|
+
export declare const buildLayoutItems: <T extends VListItem>(items: T[], groups: readonly GroupBoundary[]) => Array<T | GroupHeaderItem>;
|
|
27
|
+
/**
|
|
28
|
+
* Create a height function for the layout that returns the correct height
|
|
29
|
+
* for both group headers and data items.
|
|
30
|
+
*
|
|
31
|
+
* @param layout - The group layout instance
|
|
32
|
+
* @param itemHeight - Original item height config (number or function)
|
|
33
|
+
* @returns A height function (layoutIndex) => number suitable for HeightCache
|
|
34
|
+
*/
|
|
35
|
+
export declare const createGroupedHeightFn: (layout: GroupLayout, itemHeight: number | ((index: number) => number)) => ((layoutIndex: number) => number);
|
|
36
|
+
/**
|
|
37
|
+
* Create a GroupLayout instance.
|
|
38
|
+
*
|
|
39
|
+
* The layout computes group boundaries from items and provides efficient
|
|
40
|
+
* O(log g) mappings between data indices and layout indices.
|
|
41
|
+
*
|
|
42
|
+
* @param itemCount - Number of data items
|
|
43
|
+
* @param config - Groups configuration
|
|
44
|
+
*/
|
|
45
|
+
export declare const createGroupLayout: (itemCount: number, config: GroupsConfig) => GroupLayout;
|
|
46
|
+
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/plugins/groups/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EAEX,eAAe,EAChB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA+G7C;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,SAAS,EAClD,OAAO,CAAC,EAAE,EACV,QAAQ,SAAS,aAAa,EAAE,KAC/B,KAAK,CAAC,CAAC,GAAG,eAAe,CA0B3B,CAAC;AAMF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,WAAW,EACnB,YAAY,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,KAC/C,CAAC,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAelC,CAAC;AAMF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,GAC5B,WAAW,MAAM,EACjB,QAAQ,YAAY,KACnB,WAkIF,CAAC"}
|