vlist 2.2.0 → 2.3.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.
Files changed (14) hide show
  1. package/README.github.md +31 -12
  2. package/README.md +12 -11
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +1 -1
  5. package/dist/plugins/a11y/plugin.d.ts +10 -1
  6. package/dist/plugins/search/index.d.ts +8 -0
  7. package/dist/plugins/search/match.d.ts +34 -0
  8. package/dist/plugins/search/plugin.d.ts +84 -0
  9. package/dist/plugins/search/searchbar.d.ts +57 -0
  10. package/dist/plugins/selection/plugin.d.ts +7 -0
  11. package/dist/size.json +1 -1
  12. package/dist/types.d.ts +29 -0
  13. package/dist/vlist-search.css +1 -0
  14. package/package.json +2 -1
package/README.github.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # vlist
2
2
 
3
- The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 8.0 KB.
3
+ The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 8.1 KB.
4
4
 
5
- **v2.2.0** — [Changelog](./CHANGELOG.md) · Table `fillWidth` (fills the container by default), async loading resilience (reload keeps placeholders, auto-retry with backoff), table placeholder skeletons.
5
+ **v2.3.0** — [Changelog](./CHANGELOG.md) · **New:** `search()` plugin with filter/navigate modes and match highlighting. Pixel-perfect keyboard navigation for scale, grid, masonry, and groups. Tree click selection consistency.
6
6
 
7
7
  [![npm version](https://img.shields.io/npm/v/vlist.svg)](https://www.npmjs.com/package/vlist)
8
8
  [![bundle size](https://img.shields.io/bundlephobia/minzip/vlist)](https://bundlephobia.com/package/vlist)
@@ -11,9 +11,9 @@ The virtual list library for every framework. Ultra efficient, batteries-include
11
11
 
12
12
  - **Accessible** — WAI-ARIA, 2D keyboard navigation, focus recovery, screen-reader DOM ordering
13
13
  - **Zero dependencies** — framework-agnostic core with tiny adapters for Vue, Svelte, Solid, React
14
- - **8.0 KB gzipped** — composable plugins with perfect tree-shaking
14
+ - **8.1 KB gzipped** — composable plugins with perfect tree-shaking
15
15
  - **Constant memory** — ~0.1 MB overhead at any scale, from 10K to 1M+ items
16
- - **Tree, grid, masonry, table, groups, data, selection, sortable, transition, scale** — all opt-in
16
+ - **Tree, grid, masonry, table, groups, data, selection, search, sortable, transition, scale** — all opt-in
17
17
  - **Axis-neutral** — vertical and horizontal scrolling through a single code path, all plugins work in both orientations
18
18
 
19
19
  **18 interactive examples, docs & benchmarks → [vlist.io](https://vlist.io)**
@@ -94,19 +94,20 @@ const list = createVList({
94
94
 
95
95
  | Plugin | Size | Description |
96
96
  |--------|------|-------------|
97
- | **Base** | 8.0 KB | Virtualization, ARIA, keyboard nav, gap, padding |
97
+ | **Base** | 8.1 KB | Virtualization, ARIA, keyboard nav, gap, padding |
98
98
  | `data()` | +4.8 KB | Lazy loading with velocity-aware fetching |
99
- | `selection()` | +2.5 KB | Single/multiple selection with 2D keyboard nav |
100
- | `scale()` | +3.9 KB | 1M+ items via scroll compression |
101
- | `groups()` | +5.2 KB | Sticky/inline headers with grid + masonry + table + data integration |
99
+ | `selection()` | +2.6 KB | Single/multiple selection with 2D keyboard nav |
100
+ | `search()` | +3.2 KB | Search bar: filter/navigate modes, match highlighting |
101
+ | `scale()` | +4.2 KB | 1M+ items via scroll compression |
102
+ | `groups()` | +5.3 KB | Sticky/inline headers with grid + masonry + table + data integration |
102
103
  | `autosize()` | +0.8 KB | Auto-measure items via ResizeObserver |
103
104
  | `scrollbar()` | +2.0 KB | Custom scrollbar UI |
104
- | `grid()` | +2.9 KB | 2D grid layout |
105
- | `masonry()` | +3.7 KB | Pinterest-style masonry with lane-aware keyboard nav |
105
+ | `grid()` | +3.0 KB | 2D grid layout |
106
+ | `masonry()` | +4.0 KB | Pinterest-style masonry with lane-aware keyboard nav |
106
107
  | `table()` | +6.2 KB | Data table with columns, resize, sort |
107
108
  | `tree()` | +5.3 KB | Collapsible tree with async loading and indent guides |
108
- | `page()` | +0.8 KB | Window-level scrolling |
109
- | `sortable()` | +2.9 KB | Drag-and-drop reordering with auto-scroll |
109
+ | `page()` | +0.7 KB | Window-level scrolling |
110
+ | `sortable()` | +2.8 KB | Drag-and-drop reordering with auto-scroll |
110
111
  | `snapshots()` | +1.3 KB | Scroll position save/restore |
111
112
  | `transition()` | +1.8 KB | FLIP-based enter/exit animations for insert & remove |
112
113
 
@@ -215,6 +216,24 @@ const list = createVList({
215
216
  ])
216
217
  ```
217
218
 
219
+ ### Search
220
+
221
+ ```typescript
222
+ import { createVList, search } from 'vlist'
223
+ import 'vlist/styles/search'
224
+
225
+ const list = createVList({
226
+ container: '#app',
227
+ items: people,
228
+ item: { height: 48, template: renderPerson },
229
+ }, [
230
+ // Zero-config: a search bar at the top, Ctrl/⌘+F to focus, type to filter,
231
+ // matches highlighted with <mark>. Use mode: 'navigate' to jump between
232
+ // matches instead of hiding non-matches.
233
+ search(),
234
+ ])
235
+ ```
236
+
218
237
  ## Accessibility
219
238
 
220
239
  Every vlist is accessible by default following the [WAI-ARIA listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/):
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # vlist
2
2
 
3
- The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 8.0 KB.
3
+ The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 8.1 KB.
4
4
 
5
- **v2.2.0** — [Changelog](https://github.com/floor/vlist/blob/main/CHANGELOG.md) · **New:** table `fillWidth` (fills the container by default), async loading resilience (reload keeps placeholders, auto-retry with backoff), and table placeholder skeletons.
5
+ **v2.3.0** — [Changelog](https://github.com/floor/vlist/blob/main/CHANGELOG.md) · **New:** `search()` plugin with filter/navigate modes and match highlighting. Pixel-perfect keyboard navigation for scale, grid, masonry, and groups.
6
6
 
7
7
  [![npm version](https://img.shields.io/npm/v/vlist.svg)](https://www.npmjs.com/package/vlist)
8
8
  [![bundle size](https://img.shields.io/bundlephobia/minzip/vlist)](https://bundlephobia.com/package/vlist)
@@ -11,7 +11,7 @@ The virtual list library for every framework. Ultra efficient, batteries-include
11
11
 
12
12
  - **Accessible** — WAI-ARIA, 2D keyboard navigation, focus recovery, screen-reader DOM ordering
13
13
  - **Zero dependencies** — framework-agnostic core, tiny adapters for Vue, Svelte, Solid, React
14
- - **8.0 KB gzipped** — composable plugins with perfect tree-shaking
14
+ - **8.1 KB gzipped** — composable plugins with perfect tree-shaking
15
15
  - **Constant memory** — ~0.1 MB overhead at any scale, from 10K to 1M+ items
16
16
  - **Axis-neutral** — vertical and horizontal scrolling through a single code path, all plugins work in both orientations
17
17
 
@@ -56,18 +56,19 @@ const list = createVList({ container: '#app', items, item: { height: 200, templa
56
56
 
57
57
  | Plugin | Size | Description |
58
58
  |--------|------|-------------|
59
- | **Base** | 8.0 KB | Virtualization, ARIA, keyboard nav, gap, padding |
59
+ | **Base** | 8.1 KB | Virtualization, ARIA, keyboard nav, gap, padding |
60
60
  | `data()` | +4.8 KB | Lazy loading with velocity-aware fetching |
61
- | `selection()` | +2.5 KB | Single/multiple selection with 2D keyboard nav |
62
- | `scale()` | +3.9 KB | 1M+ items via scroll compression |
63
- | `groups()` | +5.2 KB | Sticky/inline headers with grid + masonry + table + data integration |
61
+ | `selection()` | +2.6 KB | Single/multiple selection with 2D keyboard nav |
62
+ | `search()` | +3.2 KB | Search bar: filter/navigate modes, match highlighting |
63
+ | `scale()` | +4.2 KB | 1M+ items via scroll compression |
64
+ | `groups()` | +5.3 KB | Sticky/inline headers with grid + masonry + table + data integration |
64
65
  | `autosize()` | +0.8 KB | Auto-measure items via ResizeObserver |
65
66
  | `scrollbar()` | +2.0 KB | Custom scrollbar UI |
66
- | `grid()` | +2.9 KB | 2D grid layout |
67
- | `masonry()` | +3.7 KB | Pinterest-style masonry with lane-aware keyboard nav |
67
+ | `grid()` | +3.0 KB | 2D grid layout |
68
+ | `masonry()` | +4.0 KB | Pinterest-style masonry with lane-aware keyboard nav |
68
69
  | `table()` | +6.2 KB | Data table with columns, resize, sort |
69
- | `page()` | +0.8 KB | Window-level scrolling |
70
- | `sortable()` | +2.9 KB | Drag-and-drop reordering with auto-scroll |
70
+ | `page()` | +0.7 KB | Window-level scrolling |
71
+ | `sortable()` | +2.8 KB | Drag-and-drop reordering with auto-scroll |
71
72
  | `snapshots()` | +1.3 KB | Scroll position save/restore |
72
73
  | `transition()` | +1.8 KB | FLIP-based enter/exit animations for insert & remove |
73
74
 
package/dist/index.d.ts CHANGED
@@ -37,6 +37,8 @@ export { sortable } from "./plugins/sortable";
37
37
  export type { SortablePluginConfig } from "./plugins/sortable";
38
38
  export { tree } from "./plugins/tree";
39
39
  export type { TreePluginConfig, FlatNode } from "./plugins/tree";
40
+ export { search, DEFAULT_SEARCH_TEXT } from "./plugins/search";
41
+ export type { SearchPluginConfig, SearchText } from "./plugins/search";
40
42
  export { createStats } from "./utils/stats";
41
43
  export type { Stats, StatsConfig, StatsState } from "./utils/stats";
42
44
  export { rebuild } from "./utils/rebuild";