@glhrmoura/vue-virtualize 0.1.0 → 0.1.2

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 (2) hide show
  1. package/README.md +57 -59
  2. package/package.json +3 -10
package/README.md CHANGED
@@ -1,30 +1,22 @@
1
1
  <p align="center">
2
- <img src="docs/public/logo.png" alt="" width="144" height="96" />
2
+ <img
3
+ style="object: contain; height: 150px"
4
+ src="https://raw.githubusercontent.com/glhrmoura/glhrmoura/refs/heads/main/public/assets/projects/vue-virtualize.png"
5
+ />
3
6
  </p>
4
7
 
5
- # Vue Virtualize
8
+ ## Vue Virtualize
6
9
 
7
- Headless virtualization for Vue 3 lists, grids, and tables.
8
-
9
- [![License](https://img.shields.io/npm/l/@glhrmoura/vue-virtualize.svg?style=for-the-badge)](https://github.com/glhrmoura/vue-virtualize/blob/main/LICENSE)
10
+ [![NPM Version](https://img.shields.io/npm/v/@glhrmoura/vue-virtualize.svg?style=for-the-badge)](https://www.npmjs.com/package/@glhrmoura/vue-virtualize)
11
+ [![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://github.com/glhrmoura/vue-virtualize/blob/main/LICENSE)
10
12
 
11
- `@glhrmoura/vue-virtualize` mounts only the items that intersect the viewport. The layout engine is plain TypeScript: it does not import Vue and it does not touch the DOM. Components and composables subscribe to scroll and resize, then render the window the engine returns.
13
+ Headless virtualization for Vue 3 lists, grids, and tables.
12
14
 
13
- ## Features
15
+ ### Documentation
14
16
 
15
- - Vertical and horizontal lists
16
- - Two-axis grids
17
- - Tables with virtualized rows and placed columns
18
- - Configurable overscan
19
- - Fixed estimates and measured dynamic sizes
20
- - Programmatic `scrollToIndex` and `scrollToOffset`
21
- - Reactive updates when the collection changes
22
- - Container resize handling and listener cleanup
23
- - Empty states and stable item keys
24
- - SSR-safe: no browser APIs at import time
25
- - TypeScript generics for item types
17
+ [**Vue Virtualize**](https://glhrmoura-vue-virtualize.netlify.app)
26
18
 
27
- ## Install
19
+ ### Install
28
20
 
29
21
  ```bash
30
22
  yarn add @glhrmoura/vue-virtualize
@@ -36,19 +28,16 @@ npm install @glhrmoura/vue-virtualize
36
28
 
37
29
  Vue 3.5+ is a peer dependency.
38
30
 
39
- ## Quick start
31
+ ### Usage
32
+
33
+ #### VirtualList
40
34
 
41
35
  ```vue
42
36
  <script setup lang="ts">
43
37
  import { VirtualList } from '@glhrmoura/vue-virtualize'
44
38
  import { shallowRef } from 'vue'
45
39
 
46
- interface User {
47
- id: number
48
- name: string
49
- }
50
-
51
- const users = shallowRef<User[]>(
40
+ const users = shallowRef(
52
41
  Array.from({ length: 100_000 }, (_, index) => ({
53
42
  id: index + 1,
54
43
  name: `User ${index + 1}`,
@@ -65,48 +54,57 @@ const users = shallowRef<User[]>(
65
54
  </template>
66
55
  ```
67
56
 
68
- ## Examples
69
-
70
- | Component | Use |
71
- | ---------------- | ------------------------------------------------------ |
72
- | `VirtualList` | One axis, vertical or `horizontal` |
73
- | `VirtualGrid` | Flat array, `columnCount`, row and column estimates |
74
- | `VirtualTable` | `rows`, `columns`, windowed body |
75
- | `useVirtualizer` | Custom markup driven by `virtualItems` and `totalSize` |
76
-
77
- The playground (`yarn dev`) includes 1,000, 10,000, and 100,000 row lists, a measured-height list, a grid, and a table.
57
+ #### VirtualGrid
78
58
 
79
- ## Documentation
80
-
81
- Guides and the API reference live in `docs/` and are built with VitePress:
82
-
83
- ```bash
84
- yarn docs:dev
59
+ ```vue
60
+ <VirtualGrid
61
+ :items="photos"
62
+ :column-count="4"
63
+ :estimate-row-size="120"
64
+ :estimate-column-size="180"
65
+ :height="500"
66
+ >
67
+ <template #default="{ item, rowIndex, columnIndex }">
68
+ <PhotoCard :photo="item" :row="rowIndex" :column="columnIndex" />
69
+ </template>
70
+ </VirtualGrid>
85
71
  ```
86
72
 
87
- ## Scripts
73
+ #### VirtualTable
88
74
 
89
- ```bash
90
- yarn test
91
- yarn typecheck
92
- yarn lint
93
- yarn build
94
- yarn bench
75
+ ```vue
76
+ <VirtualTable :rows="users" :columns="columns" :estimate-row-size="44" :height="500">
77
+ <template #cell="{ row, column, value }">
78
+ <span>{{ value }}</span>
79
+ </template>
80
+ </VirtualTable>
95
81
  ```
96
82
 
97
- `yarn bench` measures the engine locally. This repository does not publish benchmark numbers.
83
+ #### useVirtualizer
98
84
 
99
- ## Publishing
85
+ ```ts
86
+ const { virtualItems, totalSize, scrollToIndex } = useVirtualizer({
87
+ count: items.length,
88
+ container,
89
+ estimateSize: () => 52,
90
+ overscan: 4,
91
+ })
92
+ ```
100
93
 
101
- Changesets tracks versions. CI runs lint, typecheck, tests, and the library build. Publishing to npm is a manual step after `yarn build`. The package name is `@glhrmoura/vue-virtualize`.
94
+ ### API Reference
102
95
 
103
- ## Contributing
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 |
101
+ | `useVirtualizer` | Custom markup driven by `virtualItems` and `totalSize` |
102
+ | `useVirtualList` | Headless list adapter |
103
+ | `useVirtualGrid` | Headless grid adapter |
104
+ | `useVirtualTable`| Headless table adapter |
104
105
 
105
- 1. Install dependencies with yarn (`packageManager` is pinned in `package.json`).
106
- 2. Branch from the default branch.
107
- 3. Add a changeset when the public API or behavior changes.
108
- 4. Run `yarn lint`, `yarn typecheck`, `yarn test`, and `yarn build`.
106
+ ### License
109
107
 
110
- ## License
108
+ [MIT](https://github.com/glhrmoura/vue-virtualize/blob/main/LICENSE)
111
109
 
112
- MIT
110
+ Copyright (c) Guilherme Moura
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@glhrmoura/vue-virtualize",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Headless virtualization for Vue 3 lists, grids, and tables",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "author": "Guilherme Moura <mouraggui@gmail.com>",
8
- "homepage": "https://github.com/glhrmoura/vue-virtualize",
8
+ "homepage": "https://glhrmoura-vue-virtualize.netlify.app/",
9
9
  "repository": {
10
10
  "type": "git",
11
11
  "url": "git+https://github.com/glhrmoura/vue-virtualize.git"
@@ -49,18 +49,14 @@
49
49
  },
50
50
  "packageManager": "yarn@4.18.1",
51
51
  "scripts": {
52
- "dev": "vite --config playground/vite.config.ts",
53
52
  "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
54
- "build:playground": "vite build --config playground/vite.config.ts",
55
53
  "test": "vitest run",
56
54
  "test:watch": "vitest",
57
55
  "bench": "vitest bench",
58
- "typecheck": "vue-tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p playground/tsconfig.json",
56
+ "typecheck": "vue-tsc --noEmit -p tsconfig.json",
59
57
  "lint": "eslint .",
60
58
  "format": "prettier --write .",
61
59
  "format:check": "prettier --check .",
62
- "docs:dev": "vitepress dev docs",
63
- "docs:build": "vitepress build docs",
64
60
  "changeset": "changeset",
65
61
  "version-packages": "changeset version"
66
62
  },
@@ -70,7 +66,6 @@
70
66
  "devDependencies": {
71
67
  "@changesets/cli": "^3.0.3",
72
68
  "@eslint/js": "^10.0.1",
73
- "@tailwindcss/vite": "^4.3.3",
74
69
  "@vitejs/plugin-vue": "^6.0.1",
75
70
  "@vue/test-utils": "^2.4.6",
76
71
  "eslint": "^10.0.0",
@@ -78,11 +73,9 @@
78
73
  "eslint-plugin-vue": "^10.5.0",
79
74
  "happy-dom": "^20.0.10",
80
75
  "prettier": "^3.6.2",
81
- "tailwindcss": "^4.3.3",
82
76
  "typescript": "~5.9.3",
83
77
  "typescript-eslint": "^8.46.0",
84
78
  "vite": "^7.1.10",
85
- "vitepress": "^1.6.4",
86
79
  "vitest": "^3.2.4",
87
80
  "vue": "^3.5.22",
88
81
  "vue-eslint-parser": "^10.2.0",