@vuetify/v0 0.0.16 → 0.0.20
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 +125 -47
- package/dist/browser/index.js +1801 -1604
- package/dist/components/index.d.mts +4 -4
- package/dist/components/index.mjs +6 -6
- package/dist/{components-Dk00OFL2.mjs → components-D590hSY0.mjs} +151 -54
- package/dist/composables/index.d.mts +4 -4
- package/dist/composables/index.mjs +5 -5
- package/dist/{composables-YOUVfUsn.mjs → composables-FE6B8JUW.mjs} +370 -303
- package/dist/constants/index.d.mts +1 -1
- package/dist/constants/index.mjs +3 -3
- package/dist/{globals-Rnihe4SF.mjs → globals-exvZ8fiO.mjs} +1 -1
- package/dist/index-4jSy8KIt.d.mts +73 -0
- package/dist/{index-BzW68rBC.d.mts → index-BYyEPh1S.d.mts} +227 -17
- package/dist/index-CjzlIAtF.d.mts +296 -0
- package/dist/{index-BeJMYhId.d.mts → index-DahjxaTj.d.mts} +899 -136
- package/dist/{index-BulceeMA.d.mts → index-Gr6XPRWt.d.mts} +50 -18
- package/dist/index.d.mts +7 -7
- package/dist/index.mjs +8 -8
- package/dist/types/index.d.mts +1 -1
- package/dist/{useStep-Bqhi_DDs.mjs → useStep-Dw7XloDM.mjs} +1067 -1258
- package/dist/utilities/index.d.mts +2 -2
- package/dist/utilities/index.mjs +1 -1
- package/dist/utilities-BrFKLHFS.mjs +363 -0
- package/package.json +3 -3
- package/dist/index-BXN7M6o_.d.mts +0 -71
- package/dist/index-Bd3J4RNS.d.mts +0 -11
- package/dist/utilities-DQWf_4V_.mjs +0 -139
- /package/dist/{constants-BWV0uYsM.mjs → constants-DypzAkYp.mjs} +0 -0
- /package/dist/{htmlElements-BYo-fMlZ.mjs → htmlElements-CXObxj0V.mjs} +0 -0
- /package/dist/{index-B6lIRI3i.d.mts → index-B9mKi4pr.d.mts} +0 -0
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<picture>
|
|
3
3
|
<source media="(prefers-color-scheme: dark)" srcset="https://vuetifyjs.b-cdn.net/docs/images/logos/vzero-logo-dark.png">
|
|
4
|
-
<img alt="Vuetify
|
|
4
|
+
<img alt="Vuetify Zero Logo" src="https://vuetifyjs.b-cdn.net/docs/images/logos/vzero-logo-light.png" height="150">
|
|
5
5
|
</picture>
|
|
6
6
|
</div>
|
|
7
7
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<img src="https://img.shields.io/npm/dm/@vuetify/v0.svg" alt="Downloads">
|
|
14
14
|
</a>
|
|
15
15
|
<br>
|
|
16
|
-
<a href="https://github.com/vuetifyjs
|
|
16
|
+
<a href="https://github.com/vuetifyjs/0/blob/master/LICENSE.md">
|
|
17
17
|
<img src="https://img.shields.io/npm/l/@vuetify/v0.svg" alt="License">
|
|
18
18
|
</a>
|
|
19
19
|
<a href="https://community.vuetifyjs.com">
|
|
@@ -23,9 +23,29 @@
|
|
|
23
23
|
|
|
24
24
|
# @vuetify/v0
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
Headless Vue 3 UI primitives and composables for building modern applications and design systems. `@vuetify/v0` is the foundation of the Vuetify ecosystem, offering lightweight, unstyled building blocks with full TypeScript support and accessibility features built-in.
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
> **Note:** This package is in early development (pre-1.0). APIs may change between minor versions.
|
|
29
|
+
|
|
30
|
+
## Repository Structure
|
|
31
|
+
|
|
32
|
+
This is a **pnpm monorepo** containing:
|
|
33
|
+
|
|
34
|
+
| Package | Description |
|
|
35
|
+
|---------|-------------|
|
|
36
|
+
| [`@vuetify/v0`](./packages/0) | Core headless components and composables |
|
|
37
|
+
| [`@vuetify/paper`](./packages/paper) | Styling and layout primitives |
|
|
38
|
+
| [`apps/docs`](./apps/docs) | Documentation site ([0.vuetifyjs.com](https://0.vuetifyjs.com)) |
|
|
39
|
+
| [`apps/storybook`](./apps/storybook) | Component stories and visual testing |
|
|
40
|
+
| [`playground`](./playground) | Interactive development environment |
|
|
41
|
+
|
|
42
|
+
## Requirements
|
|
43
|
+
|
|
44
|
+
- **Node.js** >= 22
|
|
45
|
+
- **pnpm** >= 10.6
|
|
46
|
+
- **Vue** >= 3.3.0
|
|
47
|
+
|
|
48
|
+
## Installation
|
|
29
49
|
|
|
30
50
|
```bash
|
|
31
51
|
npm install @vuetify/v0@latest
|
|
@@ -37,88 +57,146 @@ yarn add @vuetify/v0
|
|
|
37
57
|
bun add @vuetify/v0
|
|
38
58
|
```
|
|
39
59
|
|
|
40
|
-
##
|
|
60
|
+
## Exports
|
|
61
|
+
|
|
62
|
+
The package provides tree-shakeable subpath exports:
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
import { ... } from '@vuetify/v0' // Everything
|
|
66
|
+
import { ... } from '@vuetify/v0/components' // Components only
|
|
67
|
+
import { ... } from '@vuetify/v0/composables' // Composables only
|
|
68
|
+
import { ... } from '@vuetify/v0/utilities' // Utilities only
|
|
69
|
+
import { ... } from '@vuetify/v0/types' // Types only
|
|
70
|
+
import { ... } from '@vuetify/v0/constants' // Constants only
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## What's Included
|
|
41
74
|
|
|
42
75
|
### Components
|
|
43
76
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
77
|
+
| Component | Description |
|
|
78
|
+
|-----------|-------------|
|
|
79
|
+
| **Atom** | Polymorphic base element. Renders as any HTML element via `as` prop with renderless mode support |
|
|
80
|
+
| **Avatar** | Image with fallback display. Compound component with Root, Image, and Fallback sub-components |
|
|
81
|
+
| **ExpansionPanel** | Accordion/collapsible panels. Supports single (accordion) or multi-expand modes |
|
|
82
|
+
| **Group** | Multi-selection with tri-state support. Provides `selectAll`, `unselectAll`, `toggleAll` |
|
|
83
|
+
| **Pagination** | Page navigation with ellipsis. Root, Item, First, Prev, Next, Last, Ellipsis sub-components |
|
|
84
|
+
| **Popover** | CSS anchor-positioned popup. Root, Anchor, and Content sub-components |
|
|
85
|
+
| **Selection** | Generic single/multi-selection. Configurable via `multiple` prop |
|
|
86
|
+
| **Single** | Single-selection specialization of Selection |
|
|
87
|
+
| **Step** | Navigation/stepper with first, last, next, prev controls |
|
|
47
88
|
|
|
48
89
|
### Composables
|
|
49
90
|
|
|
50
91
|
#### Factories
|
|
51
92
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
- **`
|
|
93
|
+
Core factories that provide the foundation for all other composables:
|
|
94
|
+
|
|
95
|
+
- **`createContext`** - Type-safe Vue dependency injection wrapper
|
|
96
|
+
- **`createPlugin`** - Vue plugin factory with context provision
|
|
97
|
+
- **`createTrinity`** - Context triple pattern: `[use, provide, default]`
|
|
55
98
|
|
|
56
|
-
####
|
|
99
|
+
#### Registry
|
|
57
100
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
- **`
|
|
61
|
-
- **`
|
|
62
|
-
- **`
|
|
101
|
+
Base data structures that most other composables build upon:
|
|
102
|
+
|
|
103
|
+
- **`useRegistry`** - Enhanced Map with indexing, caching, and event support
|
|
104
|
+
- **`useProxyRegistry`** - Convert registry Map to reactive object
|
|
105
|
+
- **`useQueue`** - FIFO queue with timeout management (notifications/toasts)
|
|
106
|
+
- **`useTimeline`** - Bounded undo/redo history
|
|
107
|
+
- **`useTokens`** - Design token registry with alias resolution
|
|
63
108
|
|
|
64
109
|
#### Selection
|
|
65
110
|
|
|
66
|
-
|
|
67
|
-
- **`useSelection`** - Selection management
|
|
68
|
-
- **`useGroup`** - Selection group management
|
|
69
|
-
- **`useSingle`** - Single selection utilities
|
|
70
|
-
- **`useStep`** - Step navigation logic
|
|
111
|
+
Selection management composables built on `useRegistry`:
|
|
71
112
|
|
|
72
|
-
|
|
113
|
+
- **`useSelection`** - Base selection with Set-based tracking
|
|
114
|
+
- **`useGroup`** - Multi-selection with tri-state/mixed support
|
|
115
|
+
- **`useSingle`** - Single-selection specialization
|
|
116
|
+
- **`useStep`** - Navigation through items (first, last, next, prev)
|
|
73
117
|
|
|
74
|
-
|
|
75
|
-
- **`useProxyModel`** - Proxy registry for Vue reactive models
|
|
118
|
+
#### Forms & Data
|
|
76
119
|
|
|
77
|
-
|
|
78
|
-
- **`
|
|
79
|
-
- **`
|
|
120
|
+
- **`useForm`** - Form validation and state management with async rules
|
|
121
|
+
- **`useProxyModel`** - Bridge selection context to component v-model
|
|
122
|
+
- **`useFilter`** - Reactive array filtering with multiple modes
|
|
123
|
+
|
|
124
|
+
#### Layout & Measurement
|
|
125
|
+
|
|
126
|
+
- **`usePagination`** - Lightweight page navigation (non-registry based)
|
|
127
|
+
- **`useOverflow`** - Container overflow measurement for item capacity
|
|
128
|
+
- **`useVirtual`** - Virtual scrolling for large lists
|
|
129
|
+
|
|
130
|
+
#### Observers & Events
|
|
131
|
+
|
|
132
|
+
- **`useEventListener`** - Lifecycle-managed event listeners
|
|
133
|
+
- **`useIntersectionObserver`** - Intersection observer with auto-cleanup
|
|
80
134
|
- **`useKeydown`** - Keyboard event handling
|
|
81
135
|
- **`useMutationObserver`** - DOM mutation observation
|
|
82
136
|
- **`useResizeObserver`** - Resize observer utilities
|
|
83
137
|
|
|
138
|
+
#### System
|
|
84
139
|
|
|
85
|
-
|
|
140
|
+
Plugin-capable composables following the trinity pattern:
|
|
86
141
|
|
|
87
142
|
- **`useBreakpoints`** - Responsive breakpoint detection
|
|
88
|
-
- **`useFeatures`** - Feature
|
|
143
|
+
- **`useFeatures`** - Feature flags with variations
|
|
89
144
|
- **`useHydration`** - SSR hydration helpers
|
|
90
|
-
- **`useLocale`** - Internationalization
|
|
91
|
-
- **`useLogger`** -
|
|
92
|
-
- **`usePermissions`** -
|
|
93
|
-
- **`useStorage`** -
|
|
94
|
-
- **`useTheme`** - Theme
|
|
145
|
+
- **`useLocale`** - Internationalization with message interpolation
|
|
146
|
+
- **`useLogger`** - Logging adapter (consola/pino/custom)
|
|
147
|
+
- **`usePermissions`** - RBAC/ABAC permission system
|
|
148
|
+
- **`useStorage`** - Storage adapter (localStorage/sessionStorage/memory)
|
|
149
|
+
- **`useTheme`** - Theme management with CSS variable injection
|
|
95
150
|
|
|
96
|
-
|
|
151
|
+
#### Utilities
|
|
97
152
|
|
|
153
|
+
- **`useToggleScope`** - Conditional effect scope management
|
|
98
154
|
- **`toArray`** - Array transformation utilities
|
|
99
155
|
- **`toReactive`** - Reactive object conversion
|
|
100
156
|
|
|
101
|
-
##
|
|
157
|
+
## Design Principles
|
|
102
158
|
|
|
103
159
|
- **Headless First**: Components provide logic and accessibility without imposed styling
|
|
104
160
|
- **Slot-Driven**: Maximum flexibility through comprehensive slot APIs
|
|
105
|
-
- **CSS Variables**: All styling configurable via
|
|
106
|
-
- **TypeScript Native**: Full type safety with
|
|
107
|
-
- **Minimal Dependencies**:
|
|
161
|
+
- **CSS Variables**: All styling configurable via `--v0-*` custom properties
|
|
162
|
+
- **TypeScript Native**: Full type safety with generics for extensibility
|
|
163
|
+
- **Minimal Dependencies**: Only Vue 3.3+ required (markdown libraries optional)
|
|
108
164
|
- **Composable Architecture**: Reusable logic through Vue 3 composables
|
|
109
165
|
|
|
110
|
-
##
|
|
166
|
+
## Documentation
|
|
111
167
|
|
|
112
|
-
For detailed API documentation,
|
|
168
|
+
For detailed API documentation, examples, and guides, visit [0.vuetifyjs.com](https://0.vuetifyjs.com).
|
|
169
|
+
|
|
170
|
+
## Development
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
# Install dependencies
|
|
174
|
+
pnpm install
|
|
175
|
+
|
|
176
|
+
# Start playground
|
|
177
|
+
pnpm dev
|
|
178
|
+
|
|
179
|
+
# Start documentation site
|
|
180
|
+
pnpm dev:docs
|
|
181
|
+
|
|
182
|
+
# Run tests
|
|
183
|
+
pnpm test
|
|
184
|
+
|
|
185
|
+
# Type check
|
|
186
|
+
pnpm typecheck
|
|
187
|
+
|
|
188
|
+
# Lint
|
|
189
|
+
pnpm lint
|
|
190
|
+
```
|
|
113
191
|
|
|
114
|
-
##
|
|
192
|
+
## Contributing
|
|
115
193
|
|
|
116
|
-
We are not currently accepting contributions
|
|
194
|
+
We are not currently accepting external contributions. Check back later or join our [Discord community](https://community.vuetifyjs.com) for updates.
|
|
117
195
|
|
|
118
|
-
##
|
|
196
|
+
## License
|
|
119
197
|
|
|
120
|
-
MIT License
|
|
198
|
+
[MIT License](./LICENSE.md)
|
|
121
199
|
|
|
122
200
|
---
|
|
123
201
|
|
|
124
|
-
Built with
|
|
202
|
+
Built with care for the Vue ecosystem. Part of the [Vuetify](https://vuetifyjs.com) family.
|