@floor/vlist 0.8.2 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -4
- package/dist/builder/context.d.ts +3 -3
- package/dist/builder/core.d.ts +1 -1
- package/dist/builder/materializectx.d.ts +7 -7
- package/dist/builder/range.d.ts +3 -3
- package/dist/builder/types.d.ts +12 -13
- package/dist/features/grid/plugin.d.ts +1 -1
- package/dist/features/grid/renderer.d.ts +5 -5
- package/dist/features/page/plugin.d.ts +1 -1
- package/dist/features/sections/index.d.ts +1 -1
- package/dist/features/sections/layout.d.ts +6 -5
- package/dist/features/sections/plugin.d.ts +1 -1
- package/dist/features/sections/sticky.d.ts +4 -3
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/rendering/index.d.ts +2 -2
- package/dist/rendering/renderer.d.ts +7 -7
- package/dist/rendering/scale.d.ts +17 -17
- package/dist/rendering/sizes.d.ts +63 -0
- package/dist/rendering/viewport.d.ts +23 -23
- package/dist/types.d.ts +15 -15
- package/package.json +1 -1
- package/dist/rendering/heights.d.ts +0 -63
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# vlist
|
|
2
2
|
|
|
3
|
-
Lightweight, high-performance virtual list with zero dependencies and
|
|
3
|
+
Lightweight, high-performance virtual list with zero dependencies and dimension-agnostic architecture.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@floor/vlist)
|
|
6
6
|
[](https://bundlephobia.com/package/@floor/vlist)
|
|
@@ -12,12 +12,20 @@ Lightweight, high-performance virtual list with zero dependencies and optimal tr
|
|
|
12
12
|
- **8–12 KB gzipped** — pay only for features you use (vs 20 KB+ monolithic alternatives)
|
|
13
13
|
- **Builder API** — composable plugins with perfect tree-shaking
|
|
14
14
|
- **Grid, sections, async, selection, scale** — all opt-in
|
|
15
|
-
- **Horizontal
|
|
15
|
+
- **Horizontal & vertical** — semantically correct orientation support
|
|
16
|
+
- **Reverse, page-scroll, wrap** — every layout mode
|
|
16
17
|
- **Accessible** — WAI-ARIA, keyboard navigation, screen-reader friendly
|
|
17
18
|
- **React, Vue, Svelte** — framework adapters available
|
|
18
19
|
|
|
19
20
|
**30+ interactive examples → [vlist.dev](https://vlist.dev)**
|
|
20
21
|
|
|
22
|
+
## v0.9.0 Highlights
|
|
23
|
+
|
|
24
|
+
- ✨ **Dimension-agnostic API** — semantically correct terminology for both orientations
|
|
25
|
+
- 🎯 **Horizontal sections** — sticky headers work in horizontal carousels
|
|
26
|
+
- 🎨 **Horizontal grid layouts** — 2D grids work in both orientations
|
|
27
|
+
- 📐 **`orientation` not `direction`** — clearer, more intuitive configuration
|
|
28
|
+
|
|
21
29
|
## Installation
|
|
22
30
|
|
|
23
31
|
```bash
|
|
@@ -166,7 +174,9 @@ const list = vlist({
|
|
|
166
174
|
| Pattern | Key options |
|
|
167
175
|
|---------|------------|
|
|
168
176
|
| **Chat UI** | `reverse: true` + `withSections({ sticky: false })` |
|
|
169
|
-
| **Horizontal carousel** | `
|
|
177
|
+
| **Horizontal carousel** | `orientation: 'horizontal'`, `item.width` |
|
|
178
|
+
| **Horizontal sections** | `orientation: 'horizontal'` + `withSections()` |
|
|
179
|
+
| **Horizontal grid** | `orientation: 'horizontal'` + `withGrid()` |
|
|
170
180
|
| **Page-level scroll** | `withPage()` |
|
|
171
181
|
| **1M+ items** | `withScale()` — auto-compresses scroll space |
|
|
172
182
|
| **Wrap navigation** | `scroll: { wrap: true }` |
|
|
@@ -225,7 +235,7 @@ const list = vlist(config).use(...plugins).build()
|
|
|
225
235
|
`list.on()` returns an unsubscribe function. You can also use `list.off(event, handler)`.
|
|
226
236
|
|
|
227
237
|
```typescript
|
|
228
|
-
list.on('scroll', ({
|
|
238
|
+
list.on('scroll', ({ scrollPosition, direction }) => {}) // v0.9.0: scrollPosition (was scrollTop)
|
|
229
239
|
list.on('range:change', ({ range }) => {})
|
|
230
240
|
list.on('item:click', ({ item, index, event }) => {})
|
|
231
241
|
list.on('item:dblclick', ({ item, index, event }) => {})
|
|
@@ -290,6 +300,27 @@ import '@floor/vlist/styles/extras' // optional enhancements
|
|
|
290
300
|
|
|
291
301
|
Override with your own CSS using the `.vlist`, `.vlist-item`, `.vlist-item--selected`, `.vlist-scrollbar` selectors. See [vlist.dev](https://vlist.dev) for theming examples.
|
|
292
302
|
|
|
303
|
+
## Architecture
|
|
304
|
+
|
|
305
|
+
### Dimension-Agnostic Design (v0.9.0)
|
|
306
|
+
|
|
307
|
+
vlist uses semantically correct terminology that works for both vertical and horizontal orientations:
|
|
308
|
+
|
|
309
|
+
```typescript
|
|
310
|
+
// ✅ Correct: Works for both orientations
|
|
311
|
+
sizeCache.getSize(index) // Returns height OR width
|
|
312
|
+
state.scrollPosition // scrollTop OR scrollLeft
|
|
313
|
+
state.containerSize // height OR width
|
|
314
|
+
|
|
315
|
+
// Previously (v0.8.2): Semantically wrong in horizontal mode
|
|
316
|
+
heightCache.getHeight(index) // ❌ Returned WIDTH in horizontal!
|
|
317
|
+
state.scrollTop // ❌ Stored scrollLEFT!
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
This makes the codebase clearer and eliminates semantic confusion when working with horizontal lists.
|
|
321
|
+
|
|
322
|
+
**Migration from v0.8.2:** See [v0.9.0 Migration Guide](https://vlist.dev/docs/refactoring/v0.9.0-migration-guide.md)
|
|
323
|
+
|
|
293
324
|
## Performance
|
|
294
325
|
|
|
295
326
|
### Bundle Size
|
|
@@ -357,9 +388,25 @@ const list: VList<Photo> = vlist<Photo>({
|
|
|
357
388
|
|
|
358
389
|
[MIT](LICENSE)
|
|
359
390
|
|
|
391
|
+
## Changelog
|
|
392
|
+
|
|
393
|
+
### v0.9.0 (January 2025)
|
|
394
|
+
|
|
395
|
+
**Breaking Changes:**
|
|
396
|
+
- Renamed `direction` → `orientation` for semantic clarity
|
|
397
|
+
- Renamed `HeightCache` → `SizeCache` and all related APIs
|
|
398
|
+
- Renamed `scrollTop` → `scrollPosition` in ViewportState and events
|
|
399
|
+
- See [Migration Guide](https://vlist.dev/docs/refactoring/v0.9.0-migration-guide.md)
|
|
400
|
+
|
|
401
|
+
**New Features:**
|
|
402
|
+
- Horizontal orientation support for grid and sections plugins
|
|
403
|
+
- Complete dimension-agnostic architecture
|
|
404
|
+
- Proper axis swapping for horizontal 2D grids
|
|
405
|
+
|
|
360
406
|
## Links
|
|
361
407
|
|
|
362
408
|
- **Docs & Examples:** [vlist.dev](https://vlist.dev)
|
|
409
|
+
- **Migration Guide:** [v0.9.0 Migration](https://vlist.dev/docs/refactoring/v0.9.0-migration-guide.md)
|
|
363
410
|
- **GitHub:** [github.com/floor/vlist](https://github.com/floor/vlist)
|
|
364
411
|
- **NPM:** [@floor/vlist](https://www.npmjs.com/package/@floor/vlist)
|
|
365
412
|
- **Issues:** [GitHub Issues](https://github.com/floor/vlist/issues)
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* registration points for handlers, methods, and cleanup callbacks.
|
|
7
7
|
*/
|
|
8
8
|
import type { VListItem, VListEvents } from "../types";
|
|
9
|
-
import type {
|
|
9
|
+
import type { SizeCache } from "../rendering/sizes";
|
|
10
10
|
import type { Renderer, DOMStructure } from "../rendering/renderer";
|
|
11
11
|
import type { SimpleDataManager } from "./data";
|
|
12
12
|
import type { ScrollController } from "../features/scrollbar/controller";
|
|
@@ -17,13 +17,13 @@ export interface CreateBuilderContextOptions<T extends VListItem = VListItem> {
|
|
|
17
17
|
rawConfig: BuilderConfig<T>;
|
|
18
18
|
resolvedConfig: ResolvedBuilderConfig;
|
|
19
19
|
dom: DOMStructure;
|
|
20
|
-
|
|
20
|
+
sizeCache: SizeCache;
|
|
21
21
|
dataManager: SimpleDataManager<T>;
|
|
22
22
|
scrollController: ScrollController;
|
|
23
23
|
renderer: Renderer<T>;
|
|
24
24
|
emitter: Emitter<VListEvents<T>>;
|
|
25
25
|
initialState: BuilderState;
|
|
26
|
-
|
|
26
|
+
initialSizeConfig: number | ((index: number) => number);
|
|
27
27
|
}
|
|
28
28
|
/**
|
|
29
29
|
* Create a BuilderContext from individual components.
|
package/dist/builder/core.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* vlist/builder — Composable virtual list builder
|
|
3
3
|
*
|
|
4
4
|
* Pure utilities (velocity, DOM, pool, range, scroll) live in sibling files.
|
|
5
|
-
*
|
|
5
|
+
* Size cache and emitter are reused from rendering/ and events/ modules.
|
|
6
6
|
* Bun.build inlines everything into a single bundle automatically.
|
|
7
7
|
*
|
|
8
8
|
* Plugins compose features *around* the hot path via extension points:
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* destructured once and never re-read, so their names don't matter at runtime.
|
|
14
14
|
*/
|
|
15
15
|
import type { VListItem, VListEvents, ItemTemplate, ItemState, Range } from "../types";
|
|
16
|
-
import type {
|
|
16
|
+
import type { SizeCache } from "../rendering/sizes";
|
|
17
17
|
import type { Emitter } from "../events/emitter";
|
|
18
18
|
import type { DOMStructure } from "./dom";
|
|
19
19
|
import type { createElementPool } from "./pool";
|
|
@@ -26,7 +26,7 @@ import type { BuilderConfig, BuilderContext, BuilderState, ResolvedBuilderConfig
|
|
|
26
26
|
* | Key | Meaning |
|
|
27
27
|
* |------|------------------------|
|
|
28
28
|
* | it | items |
|
|
29
|
-
* | hc |
|
|
29
|
+
* | hc | sizeCache |
|
|
30
30
|
* | ch | containerHeight |
|
|
31
31
|
* | cw | containerWidth |
|
|
32
32
|
* | id | isDestroyed |
|
|
@@ -57,8 +57,8 @@ import type { BuilderConfig, BuilderContext, BuilderState, ResolvedBuilderConfig
|
|
|
57
57
|
export interface MRefs<T extends VListItem = VListItem> {
|
|
58
58
|
/** items */
|
|
59
59
|
it: T[];
|
|
60
|
-
/**
|
|
61
|
-
hc:
|
|
60
|
+
/** sizeCache */
|
|
61
|
+
hc: SizeCache;
|
|
62
62
|
/** containerHeight */
|
|
63
63
|
ch: number;
|
|
64
64
|
/** containerWidth */
|
|
@@ -99,9 +99,9 @@ export interface MRefs<T extends VListItem = VListItem> {
|
|
|
99
99
|
/** forceRenderFn */
|
|
100
100
|
ffn: () => void;
|
|
101
101
|
/** getVisibleRange */
|
|
102
|
-
gvr: (scrollTop: number, cHeight: number, hc:
|
|
102
|
+
gvr: (scrollTop: number, cHeight: number, hc: SizeCache, total: number, out: Range) => void;
|
|
103
103
|
/** getScrollToPos */
|
|
104
|
-
gsp: (index: number, hc:
|
|
104
|
+
gsp: (index: number, hc: SizeCache, cHeight: number, total: number, align: "start" | "center" | "end") => number;
|
|
105
105
|
/** positionElementFn */
|
|
106
106
|
pef: (element: HTMLElement, index: number) => void;
|
|
107
107
|
/** activeTemplate */
|
|
@@ -129,7 +129,7 @@ export interface MDeps<T extends VListItem = VListItem> {
|
|
|
129
129
|
readonly isHorizontal: boolean;
|
|
130
130
|
readonly classPrefix: string;
|
|
131
131
|
readonly contentSizeHandlers: Array<() => void>;
|
|
132
|
-
readonly afterScroll: Array<(
|
|
132
|
+
readonly afterScroll: Array<(scrollPosition: number, direction: string) => void>;
|
|
133
133
|
readonly clickHandlers: Array<(event: MouseEvent) => void>;
|
|
134
134
|
readonly keydownHandlers: Array<(event: KeyboardEvent) => void>;
|
|
135
135
|
readonly resizeHandlers: Array<(width: number, height: number) => void>;
|
package/dist/builder/range.d.ts
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* Visible range detection, overscan application, and scroll-to-index positioning.
|
|
4
4
|
*/
|
|
5
5
|
import type { Range } from "../types";
|
|
6
|
-
import type {
|
|
7
|
-
export declare const calcVisibleRange: (
|
|
6
|
+
import type { SizeCache } from "../rendering/sizes";
|
|
7
|
+
export declare const calcVisibleRange: (scrollPosition: number, containerHeight: number, hc: SizeCache, totalItems: number, out: Range) => void;
|
|
8
8
|
export declare const applyOverscan: (visible: Range, overscan: number, totalItems: number, out: Range) => void;
|
|
9
|
-
export declare const calcScrollToPosition: (index: number, hc:
|
|
9
|
+
export declare const calcScrollToPosition: (index: number, hc: SizeCache, containerHeight: number, totalItems: number, align: "start" | "center" | "end") => number;
|
|
10
10
|
//# sourceMappingURL=range.d.ts.map
|
package/dist/builder/types.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Plugin interface, builder config, builder context, and return types
|
|
4
4
|
*/
|
|
5
5
|
import type { VListItem, VListEvents, ItemConfig, ItemTemplate, Range, ViewportState, EventHandler, Unsubscribe, ScrollToOptions, ScrollSnapshot } from "../types";
|
|
6
|
-
import type { DOMStructure, Renderer,
|
|
6
|
+
import type { DOMStructure, Renderer, SizeCache, CompressionContext } from "../rendering";
|
|
7
7
|
import type { CompressionState } from "../rendering/viewport";
|
|
8
8
|
import type { SimpleDataManager } from "./data";
|
|
9
9
|
import type { ScrollController } from "../features/scrollbar/controller";
|
|
@@ -23,11 +23,11 @@ export interface BuilderConfig<T extends VListItem = VListItem> {
|
|
|
23
23
|
/** Accessible label for the listbox */
|
|
24
24
|
ariaLabel?: string;
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Layout orientation (default: 'vertical')
|
|
27
27
|
* - 'vertical' — Standard top-to-bottom scrolling
|
|
28
28
|
* - 'horizontal' — Left-to-right scrolling
|
|
29
29
|
*/
|
|
30
|
-
|
|
30
|
+
orientation?: "vertical" | "horizontal";
|
|
31
31
|
/** Reverse mode for chat UIs */
|
|
32
32
|
reverse?: boolean;
|
|
33
33
|
/** Scroll behavior configuration (non-scrollbar options) */
|
|
@@ -72,7 +72,7 @@ export interface BuilderState {
|
|
|
72
72
|
*/
|
|
73
73
|
export interface BuilderContext<T extends VListItem = VListItem> {
|
|
74
74
|
readonly dom: DOMStructure;
|
|
75
|
-
readonly
|
|
75
|
+
readonly sizeCache: SizeCache;
|
|
76
76
|
readonly emitter: Emitter<VListEvents<T>>;
|
|
77
77
|
readonly config: ResolvedBuilderConfig;
|
|
78
78
|
/** The raw user-provided builder config (for plugins that need original values) */
|
|
@@ -86,7 +86,7 @@ export interface BuilderContext<T extends VListItem = VListItem> {
|
|
|
86
86
|
* scroll-triggered render. These are NOT on the hot path —
|
|
87
87
|
* they run after DOM updates are complete.
|
|
88
88
|
*/
|
|
89
|
-
afterScroll: Array<(
|
|
89
|
+
afterScroll: Array<(scrollPosition: number, direction: string) => void>;
|
|
90
90
|
/**
|
|
91
91
|
* Plugins register handlers for user interaction events.
|
|
92
92
|
* These are attached as DOM event listeners during .build().
|
|
@@ -136,15 +136,14 @@ export interface BuilderContext<T extends VListItem = VListItem> {
|
|
|
136
136
|
*/
|
|
137
137
|
setVirtualTotalFn(fn: () => number): void;
|
|
138
138
|
/**
|
|
139
|
-
*
|
|
140
|
-
* Used by groups plugin to inject grouped height function and by grid to add gap.
|
|
139
|
+
* Used by groups plugin to inject grouped size function and by grid to add gap.
|
|
141
140
|
*/
|
|
142
|
-
|
|
141
|
+
rebuildSizeCache(total?: number): void;
|
|
143
142
|
/**
|
|
144
|
-
* Set a new effective
|
|
145
|
-
* Plugins that change
|
|
143
|
+
* Set a new effective size config function/value.
|
|
144
|
+
* Plugins that change sizes (groups, grid) call this before rebuildSizeCache.
|
|
146
145
|
*/
|
|
147
|
-
|
|
146
|
+
setSizeConfig(config: number | ((index: number) => number)): void;
|
|
148
147
|
/**
|
|
149
148
|
* Update content size on the main axis (height for vertical, width for horizontal).
|
|
150
149
|
*/
|
|
@@ -158,12 +157,12 @@ export interface BuilderContext<T extends VListItem = VListItem> {
|
|
|
158
157
|
* Replace the visible-range calculation function.
|
|
159
158
|
* Used by withCompression to inject compressed range calculation.
|
|
160
159
|
*/
|
|
161
|
-
setVisibleRangeFn(fn: (scrollTop: number, containerHeight: number,
|
|
160
|
+
setVisibleRangeFn(fn: (scrollTop: number, containerHeight: number, sc: SizeCache, totalItems: number, out: Range) => void): void;
|
|
162
161
|
/**
|
|
163
162
|
* Replace the scroll-to-index position calculator.
|
|
164
163
|
* Used by withCompression to inject compressed position calculation.
|
|
165
164
|
*/
|
|
166
|
-
setScrollToPosFn(fn: (index: number,
|
|
165
|
+
setScrollToPosFn(fn: (index: number, sc: SizeCache, containerHeight: number, totalItems: number, align: "start" | "center" | "end") => number): void;
|
|
167
166
|
/**
|
|
168
167
|
* Replace the item positioning function.
|
|
169
168
|
* Used by withCompression to inject compressed item positioning.
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* - CSS class — adds .vlist--grid to the root element
|
|
13
13
|
*
|
|
14
14
|
* Restrictions:
|
|
15
|
-
* - Cannot be combined with
|
|
15
|
+
* - Cannot be combined with orientation: 'horizontal'
|
|
16
16
|
* - Cannot be combined with reverse: true
|
|
17
17
|
*
|
|
18
18
|
* Can be combined with withGroups for grouped 2D layouts.
|
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
* Renders items in a 2D grid layout within the virtual scroll container.
|
|
4
4
|
*
|
|
5
5
|
* Extends the base renderer pattern but positions items using both
|
|
6
|
-
* row offsets (translateY from the
|
|
6
|
+
* row offsets (translateY from the size cache) and column offsets
|
|
7
7
|
* (translateX calculated from column index and container width).
|
|
8
8
|
*
|
|
9
9
|
* Key differences from the list renderer:
|
|
10
10
|
* - Items are positioned with translate(x, y) instead of just translateY(y)
|
|
11
11
|
* - Item width is set to columnWidth (containerWidth / columns - gaps)
|
|
12
12
|
* - The "index" in the rendered map is the FLAT ITEM INDEX (not row index)
|
|
13
|
-
* - Row offsets come from the
|
|
13
|
+
* - Row offsets come from the size cache (which operates on row indices)
|
|
14
14
|
* - Column offsets are calculated from itemIndex % columns
|
|
15
15
|
*/
|
|
16
16
|
import type { VListItem, ItemTemplate, Range } from "../../types";
|
|
17
|
-
import type {
|
|
17
|
+
import type { SizeCache } from "../../rendering/sizes";
|
|
18
18
|
import type { CompressionContext } from "../../rendering/renderer";
|
|
19
19
|
import type { GridLayout } from "./types";
|
|
20
20
|
/** Grid renderer instance */
|
|
@@ -44,12 +44,12 @@ export interface GridRenderer<T extends VListItem = VListItem> {
|
|
|
44
44
|
*
|
|
45
45
|
* @param itemsContainer - The DOM element that holds rendered items
|
|
46
46
|
* @param template - Item template function
|
|
47
|
-
* @param
|
|
47
|
+
* @param sizeCache - Size cache operating on ROW indices
|
|
48
48
|
* @param gridLayout - Grid layout for row/col calculations
|
|
49
49
|
* @param classPrefix - CSS class prefix
|
|
50
50
|
* @param initialContainerWidth - Initial container width for column sizing
|
|
51
51
|
* @param totalItemsGetter - Optional getter for total item count (for aria-setsize)
|
|
52
52
|
* @param ariaIdPrefix - Optional unique prefix for element IDs (for aria-activedescendant)
|
|
53
53
|
*/
|
|
54
|
-
export declare const createGridRenderer: <T extends VListItem = VListItem>(itemsContainer: HTMLElement, template: ItemTemplate<T>,
|
|
54
|
+
export declare const createGridRenderer: <T extends VListItem = VListItem>(itemsContainer: HTMLElement, template: ItemTemplate<T>, sizeCache: SizeCache, gridLayout: GridLayout, classPrefix: string, initialContainerWidth: number, totalItemsGetter?: () => number, ariaIdPrefix?: string, isHorizontal?: boolean) => GridRenderer<T>;
|
|
55
55
|
//# sourceMappingURL=renderer.d.ts.map
|
|
@@ -43,7 +43,7 @@ import type { VListPlugin } from "../../builder/types";
|
|
|
43
43
|
* const timeline = vlist({
|
|
44
44
|
* container: '#timeline',
|
|
45
45
|
* item: { height: 100, template: renderEvent },
|
|
46
|
-
*
|
|
46
|
+
* orientation: 'horizontal'
|
|
47
47
|
* })
|
|
48
48
|
* .use(withWindow())
|
|
49
49
|
* .build()
|
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
export { withSections, type GroupsPluginConfig } from "./plugin";
|
|
6
6
|
export type { GroupsConfig, GroupBoundary, LayoutEntry, GroupHeaderItem, GroupLayout, StickyHeader, } from "./types";
|
|
7
7
|
export { isGroupHeader, isGroupHeader as isSectionHeader } from "./types";
|
|
8
|
-
export { createGroupLayout, buildLayoutItems,
|
|
8
|
+
export { createGroupLayout, buildLayoutItems, createGroupedSizeFn, } from "./layout";
|
|
9
9
|
export { createStickyHeader } from "./sticky";
|
|
10
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -25,14 +25,15 @@ import type { VListItem } from "../../types";
|
|
|
25
25
|
*/
|
|
26
26
|
export declare const buildLayoutItems: <T extends VListItem>(items: T[], groups: readonly GroupBoundary[]) => Array<T | GroupHeaderItem>;
|
|
27
27
|
/**
|
|
28
|
-
* Create a
|
|
29
|
-
*
|
|
28
|
+
* Create a size function for the layout (items + headers).
|
|
29
|
+
*
|
|
30
|
+
* Maps layout indices to sizes, accounting for both group headers and data items.
|
|
30
31
|
*
|
|
31
32
|
* @param layout - The group layout instance
|
|
32
|
-
* @param
|
|
33
|
-
* @returns A
|
|
33
|
+
* @param itemSize - Original item size config (number or function)
|
|
34
|
+
* @returns A size function (layoutIndex) => number suitable for SizeCache
|
|
34
35
|
*/
|
|
35
|
-
export declare const
|
|
36
|
+
export declare const createGroupedSizeFn: (layout: GroupLayout, itemSize: number | ((index: number) => number)) => ((layoutIndex: number) => number);
|
|
36
37
|
/**
|
|
37
38
|
* Create a GroupLayout instance.
|
|
38
39
|
*
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
*
|
|
15
15
|
* Restrictions:
|
|
16
16
|
* - Items must be pre-sorted by group
|
|
17
|
-
* - Cannot be combined with direction: 'horizontal'
|
|
18
17
|
*
|
|
19
18
|
* Can be combined with:
|
|
20
19
|
* - withGrid for grouped 2D layouts
|
|
21
20
|
* - reverse: true (sticky header shows current section as you scroll up through history)
|
|
21
|
+
* - orientation: 'horizontal' (sticky headers stick to left edge, push left when next header approaches)
|
|
22
22
|
*/
|
|
23
23
|
import type { VListItem } from "../../types";
|
|
24
24
|
import type { VListPlugin } from "../../builder/types";
|
|
@@ -18,16 +18,17 @@
|
|
|
18
18
|
* └── .vlist-items
|
|
19
19
|
*/
|
|
20
20
|
import type { GroupLayout, GroupsConfig, StickyHeader } from "./types";
|
|
21
|
-
import type {
|
|
21
|
+
import type { SizeCache } from "../../rendering/sizes";
|
|
22
22
|
/**
|
|
23
23
|
* Create a sticky header manager.
|
|
24
24
|
*
|
|
25
25
|
* @param root - The vlist root element (.vlist) — sticky header is appended here
|
|
26
26
|
* @param layout - Group layout for index/group resolution
|
|
27
|
-
* @param
|
|
27
|
+
* @param sizeCache - The LAYOUT size cache (includes headers)
|
|
28
28
|
* @param config - Groups configuration (headerTemplate, headerHeight)
|
|
29
29
|
* @param classPrefix - CSS class prefix (default: 'vlist')
|
|
30
|
+
* @param horizontal - Whether using horizontal scrolling mode
|
|
30
31
|
* @returns StickyHeader instance
|
|
31
32
|
*/
|
|
32
|
-
export declare const createStickyHeader: (root: HTMLElement, layout: GroupLayout,
|
|
33
|
+
export declare const createStickyHeader: (root: HTMLElement, layout: GroupLayout, sizeCache: SizeCache, config: GroupsConfig, classPrefix: string, horizontal?: boolean) => StickyHeader;
|
|
33
34
|
//# sourceMappingURL=sticky.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -16,9 +16,9 @@ export { withSelection } from "./features/selection";
|
|
|
16
16
|
export { withSnapshots } from "./features/snapshots";
|
|
17
17
|
export type { VList, VListConfig, VListItem, VListEvents, ItemTemplate, ItemState, SelectionMode, SelectionConfig, SelectionState, ScrollbarConfig, ScrollbarOptions, ScrollConfig, ScrollToOptions, ScrollSnapshot, VListAdapter, AdapterParams, AdapterResponse, Range, ViewportState, EventHandler, Unsubscribe, } from "./types";
|
|
18
18
|
export type { VListBuilder, BuiltVList, BuilderConfig, VListPlugin, BuilderContext, } from "./builder";
|
|
19
|
-
export { createGroupLayout as createSectionLayout, buildLayoutItems,
|
|
19
|
+
export { createGroupLayout as createSectionLayout, buildLayoutItems, createGroupedSizeFn as createSectionedSizeFn, createStickyHeader, isGroupHeader as isSectionHeader, type GroupsConfig as SectionsConfig, type GroupBoundary as SectionBoundary, type LayoutEntry, type GroupHeaderItem as SectionHeaderItem, type GroupLayout as SectionLayout, type StickyHeader, } from "./features/sections";
|
|
20
20
|
export { createGridLayout, createGridRenderer, type GridConfig, type GridLayout, type GridPosition, type GridRenderer, type ItemRange, } from "./features/grid";
|
|
21
|
-
export {
|
|
21
|
+
export { createSizeCache, type SizeCache, simpleVisibleRange, calculateRenderRange, calculateTotalSize, calculateActualSize, calculateItemOffset, calculateScrollToIndex, clampScrollPosition, rangesEqual, isInRange, getRangeCount, diffRanges, MAX_VIRTUAL_HEIGHT, getCompressionState as getScaleState, getCompression as getScale, needsCompression as needsScaling, getMaxItemsWithoutCompression as getMaxItemsWithoutScaling, getCompressionInfo as getScaleInfo, calculateCompressedVisibleRange as calculateScaledVisibleRange, calculateCompressedRenderRange as calculateScaledRenderRange, calculateCompressedItemPosition as calculateScaledItemPosition, calculateCompressedScrollToIndex as calculateScaledScrollToIndex, calculateIndexFromScrollPosition, type CompressionState as ScaleState, } from "./rendering";
|
|
22
22
|
export { createSelectionState, selectItems, deselectItems, toggleSelection, selectAll, clearSelection, isSelected, getSelectedIds, getSelectedItems, } from "./features/selection";
|
|
23
23
|
export { createEmitter, type Emitter } from "./events";
|
|
24
24
|
export { createDataManager as createAsyncManager, createSparseStorage, createPlaceholderManager, isPlaceholderItem, filterPlaceholders, mergeRanges, calculateMissingRanges, type DataManager as AsyncManager, type SparseStorage, type PlaceholderManager, } from "./features/async";
|