@glhrmoura/vue-virtualize 0.1.1 → 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.
- package/README.md +58 -54
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,30 +1,22 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img
|
|
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
|
-
|
|
8
|
+
## Vue Virtualize
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
[](https://github.com/glhrmoura/vue-virtualize/blob/main/LICENSE)
|
|
10
|
+
[](https://www.npmjs.com/package/@glhrmoura/vue-virtualize)
|
|
11
|
+
[](https://github.com/glhrmoura/vue-virtualize/blob/main/LICENSE)
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
Headless virtualization for Vue 3 lists, grids, and tables.
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
### Documentation
|
|
14
16
|
|
|
15
|
-
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,42 +54,57 @@ const users = shallowRef<User[]>(
|
|
|
65
54
|
</template>
|
|
66
55
|
```
|
|
67
56
|
|
|
68
|
-
|
|
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
|
-
## Documentation
|
|
57
|
+
#### VirtualGrid
|
|
78
58
|
|
|
79
|
-
|
|
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>
|
|
71
|
+
```
|
|
80
72
|
|
|
81
|
-
|
|
73
|
+
#### VirtualTable
|
|
82
74
|
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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>
|
|
89
81
|
```
|
|
90
82
|
|
|
91
|
-
|
|
83
|
+
#### useVirtualizer
|
|
92
84
|
|
|
93
|
-
|
|
85
|
+
```ts
|
|
86
|
+
const { virtualItems, totalSize, scrollToIndex } = useVirtualizer({
|
|
87
|
+
count: items.length,
|
|
88
|
+
container,
|
|
89
|
+
estimateSize: () => 52,
|
|
90
|
+
overscan: 4,
|
|
91
|
+
})
|
|
92
|
+
```
|
|
94
93
|
|
|
95
|
-
|
|
94
|
+
### API Reference
|
|
96
95
|
|
|
97
|
-
|
|
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 |
|
|
98
105
|
|
|
99
|
-
|
|
100
|
-
2. Branch from the default branch.
|
|
101
|
-
3. Add a changeset when the public API or behavior changes.
|
|
102
|
-
4. Run `yarn lint`, `yarn typecheck`, `yarn test`, and `yarn build`.
|
|
106
|
+
### License
|
|
103
107
|
|
|
104
|
-
|
|
108
|
+
[MIT](https://github.com/glhrmoura/vue-virtualize/blob/main/LICENSE)
|
|
105
109
|
|
|
106
|
-
|
|
110
|
+
Copyright (c) Guilherme Moura
|