@vuetify/v0 0.0.13 → 0.0.15
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/dist/browser/index.js +2439 -820
- package/dist/components/index.d.mts +3 -3
- package/dist/components/index.mjs +5 -5
- package/dist/{components-z-JwOlZj.mjs → components-Cf1h368z.mjs} +570 -44
- package/dist/composables/index.d.mts +2 -3
- package/dist/composables/index.mjs +4 -4
- package/dist/{composables-BbLwk7s2.mjs → composables-CrW3IMUM.mjs} +1813 -792
- package/dist/constants/index.d.mts +1 -1
- package/dist/constants/index.mjs +1 -1
- package/dist/{globals-Dh0BVnN0.mjs → globals-CqryJ9G3.mjs} +1 -1
- package/dist/index-BPAr2atm.d.mts +70 -0
- package/dist/index-CQcSUYj_.d.mts +1120 -0
- package/dist/{index-CQjOW_w5.d.mts → index-CkmnMjE3.d.mts} +1754 -162
- package/dist/index.d.mts +5 -6
- package/dist/index.mjs +5 -5
- package/dist/utilities/index.d.mts +2 -2
- package/dist/utilities/index.mjs +2 -2
- package/dist/utilities-C6o-keMm.mjs +135 -0
- package/package.json +11 -13
- package/dist/index-CHMeCyP_.d.mts +0 -815
- package/dist/index-CSdGoUCI.d.mts +0 -17
- package/dist/index-D-EP6KrS.d.mts +0 -812
- package/dist/utilities-C26nB74O.mjs +0 -63
- /package/dist/{index-8AIxAM2d.d.mts → index-BmxOG13-.d.mts} +0 -0
|
@@ -1,10 +1,848 @@
|
|
|
1
1
|
import { a as MaybeArray, i as ID } from "./index-DY7-T630.mjs";
|
|
2
|
-
import {
|
|
3
|
-
import * as vue231 from "vue";
|
|
4
|
-
import { App, ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef, UnwrapNestedRefs } from "vue";
|
|
2
|
+
import { App, ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef, UnwrapNestedRefs, WatchSource } from "vue";
|
|
5
3
|
|
|
4
|
+
//#region src/composables/createTrinity/index.d.ts
|
|
5
|
+
|
|
6
|
+
type ContextTrinity<Z = unknown> = readonly [() => Z, (context?: Z, app?: App) => Z, Z];
|
|
7
|
+
/**
|
|
8
|
+
* Creates a new trinity for a context composable and its provider.
|
|
9
|
+
*
|
|
10
|
+
* @param useContext The function that retrieves/uses the context (typically named `useContext`).
|
|
11
|
+
* @param provideContext The function that provides the context to descendants.
|
|
12
|
+
* @param context The default context instance to use when no custom context is provided.
|
|
13
|
+
* @template Z The type of the context.
|
|
14
|
+
* @returns A readonly tuple containing: [useContext function, provideContext wrapper function, default context instance].
|
|
15
|
+
*
|
|
16
|
+
* @remarks The trinity pattern is a foundational pattern used throughout the codebase for creating reusable context systems. It provides three related elements:
|
|
17
|
+
*
|
|
18
|
+
* 1. A function to retrieve/use the context
|
|
19
|
+
* 2. A function to provide the context (with default value support)
|
|
20
|
+
* 3. The default context instance
|
|
21
|
+
*
|
|
22
|
+
* The returned tuple is readonly (using `as const`) to ensure proper type inference.
|
|
23
|
+
*
|
|
24
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-trinity#create-trinity
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```ts
|
|
28
|
+
* interface MyContext {
|
|
29
|
+
* foo: string
|
|
30
|
+
* bar: number
|
|
31
|
+
* }
|
|
32
|
+
*
|
|
33
|
+
* export function createMyFeature<E extends MyContext = MyContext>() {
|
|
34
|
+
* const [useContext, _provideContext] = createContext<E>('my-context')
|
|
35
|
+
*
|
|
36
|
+
* const context = { foo: 'hello', bar: 42 }
|
|
37
|
+
*
|
|
38
|
+
* function provideContext (_context: E = context, app?: App): E {
|
|
39
|
+
* return _provideContext(_context, app)
|
|
40
|
+
* }
|
|
41
|
+
*
|
|
42
|
+
* return createTrinity<E>(useContext, provideContext, context)
|
|
43
|
+
* }
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
declare function createTrinity<Z = unknown>(useContext: () => Z, provideContext: (_context?: Z, app?: App) => Z, context: Z): ContextTrinity<Z>;
|
|
47
|
+
//#endregion
|
|
48
|
+
//#region src/composables/useRegistry/index.d.ts
|
|
49
|
+
interface RegistryTicket<V = unknown> {
|
|
50
|
+
/** The unique identifier. Is randomly generated if not provided. */
|
|
51
|
+
id: ID;
|
|
52
|
+
/**
|
|
53
|
+
* The index of the ticket in the registry.
|
|
54
|
+
*
|
|
55
|
+
* @remarks Automatically managed by the registry. Updated during reindexing. It's not recommended to manually set this.
|
|
56
|
+
*/
|
|
57
|
+
index: number;
|
|
58
|
+
/** The value associated with the ticket. If not provided, it defaults to the index. */
|
|
59
|
+
value: V;
|
|
60
|
+
/**
|
|
61
|
+
* Whether the value is derived from index.
|
|
62
|
+
*
|
|
63
|
+
* @remarks Set to true when no explicit value is provided during registration. It's not recommended to manually set this.
|
|
64
|
+
*/
|
|
65
|
+
valueIsIndex: boolean;
|
|
66
|
+
}
|
|
67
|
+
interface RegistryContext<Z extends RegistryTicket = RegistryTicket> {
|
|
68
|
+
/**
|
|
69
|
+
* The collection of tickets in the registry
|
|
70
|
+
*
|
|
71
|
+
* @template ID The type of the ticket ID.
|
|
72
|
+
* @template Z The type of the registry ticket.
|
|
73
|
+
*
|
|
74
|
+
* @remarks Exposed for read-only access and advanced use cases. **Warning:** Direct mutation may cause inconsistencies in indexes, catalogs, and caches. Always prefer using the provided methods (`register`, `unregister`, etc.) to maintain internal consistency.
|
|
75
|
+
*/
|
|
76
|
+
collection: Map<ID, Z>;
|
|
77
|
+
/**
|
|
78
|
+
* Clear the entire registry
|
|
79
|
+
*
|
|
80
|
+
* @remarks Removes all tickets from the registry. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
81
|
+
*
|
|
82
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#clear
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```ts
|
|
86
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
87
|
+
*
|
|
88
|
+
* const registry = useRegistry()
|
|
89
|
+
*
|
|
90
|
+
* registry.register({ id: 'ticket-1' })
|
|
91
|
+
* registry.register({ id: 'ticket-2' })
|
|
92
|
+
*
|
|
93
|
+
* console.log(registry.size) // 2
|
|
94
|
+
*
|
|
95
|
+
* registry.clear()
|
|
96
|
+
*
|
|
97
|
+
* console.log(registry.size) // 0
|
|
98
|
+
* ```
|
|
99
|
+
*/
|
|
100
|
+
clear: () => void;
|
|
101
|
+
/**
|
|
102
|
+
* Check if a ticket exists by ID
|
|
103
|
+
*
|
|
104
|
+
* @param id The ID of the ticket to check.
|
|
105
|
+
* @remarks Calls `collection.has` internally.
|
|
106
|
+
*
|
|
107
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#has
|
|
108
|
+
*
|
|
109
|
+
* @example
|
|
110
|
+
* ```ts
|
|
111
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
112
|
+
*
|
|
113
|
+
* const registry = useRegistry()
|
|
114
|
+
*
|
|
115
|
+
* registry.register({ id: 'ticket-id' })
|
|
116
|
+
*
|
|
117
|
+
* const exists = registry.has('ticket-id') // true
|
|
118
|
+
* ```
|
|
119
|
+
*/
|
|
120
|
+
has: (id: ID) => boolean;
|
|
121
|
+
/**
|
|
122
|
+
* Get all registered IDs
|
|
123
|
+
*
|
|
124
|
+
* @remarks Calls `collection.keys` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
125
|
+
*
|
|
126
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#keys
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* ```ts
|
|
130
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
131
|
+
*
|
|
132
|
+
* const registry = useRegistry()
|
|
133
|
+
*
|
|
134
|
+
* registry.register({ id: 'ticket-1' })
|
|
135
|
+
* registry.register({ id: 'ticket-2' })
|
|
136
|
+
*
|
|
137
|
+
* const ids = registry.keys() // ['ticket-1', 'ticket-2']
|
|
138
|
+
* ```
|
|
139
|
+
*/
|
|
140
|
+
keys: () => ID[];
|
|
141
|
+
/**
|
|
142
|
+
* Browse for an ID(s) by value
|
|
143
|
+
*
|
|
144
|
+
* @param value The value to browse for.
|
|
145
|
+
* @remarks Returns a single ID or an array of IDs if multiple tickets share the same value.
|
|
146
|
+
*
|
|
147
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#browse
|
|
148
|
+
*
|
|
149
|
+
* @example
|
|
150
|
+
* ```ts
|
|
151
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
152
|
+
*
|
|
153
|
+
* const registry = useRegistry()
|
|
154
|
+
*
|
|
155
|
+
* registry.register({ id: 'ticket-1', value: 'common-value' })
|
|
156
|
+
* registry.register({ id: 'ticket-2', value: 'common-value' })
|
|
157
|
+
* registry.register({ id: 'ticket-3', value: 'unique-value' })
|
|
158
|
+
*
|
|
159
|
+
* const common = registry.browse('common-value') // ['ticket-1', 'ticket-2']
|
|
160
|
+
* const unique = registry.browse('unique-value') // 'ticket-3'
|
|
161
|
+
* ```
|
|
162
|
+
*/
|
|
163
|
+
browse: (value: unknown) => ID | ID[] | undefined;
|
|
164
|
+
/**
|
|
165
|
+
* lookup a ticket by index number
|
|
166
|
+
*
|
|
167
|
+
* @param index The index number to lookup.
|
|
168
|
+
* @remarks Maps do not support indexing by default, this method provides a way to retrieve an ID based on its index in the registry.
|
|
169
|
+
*
|
|
170
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#lookup
|
|
171
|
+
*
|
|
172
|
+
* @example
|
|
173
|
+
* ```ts
|
|
174
|
+
* const registry = useRegistry()
|
|
175
|
+
*
|
|
176
|
+
* registry.register({ id: 'ticket-1' })
|
|
177
|
+
* registry.register({ id: 'ticket-2' })
|
|
178
|
+
*
|
|
179
|
+
* const ticket1 = registry.lookup(0) // 'ticket-1'
|
|
180
|
+
* const ticket2 = registry.lookup(1) // 'ticket-2'
|
|
181
|
+
* ```
|
|
182
|
+
*/
|
|
183
|
+
lookup: (index: number) => ID | undefined;
|
|
184
|
+
/**
|
|
185
|
+
* Get a ticket by ID
|
|
186
|
+
*
|
|
187
|
+
* @param id The ID of the ticket to retrieve.
|
|
188
|
+
* @remarks Calls `collection.get` internally.
|
|
189
|
+
*
|
|
190
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#get
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
* ```ts
|
|
194
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
195
|
+
*
|
|
196
|
+
* const registry = useRegistry()
|
|
197
|
+
*
|
|
198
|
+
* registry.register({ id: 'ticket-id', value: 'some-value' })
|
|
199
|
+
*
|
|
200
|
+
* const ticket = registry.get('ticket-id') // { id: 'ticket-id', index: 0, value: 'some-value', ... }
|
|
201
|
+
* ```
|
|
202
|
+
*/
|
|
203
|
+
get: (id: ID) => Z | undefined;
|
|
204
|
+
/**
|
|
205
|
+
* Update or insert a ticket by ID
|
|
206
|
+
*
|
|
207
|
+
* @param id The ID of the ticket to upsert.
|
|
208
|
+
* @param ticket The partial ticket data to update or insert.
|
|
209
|
+
* @remarks If the ticket exists, it will be updated with the provided data. If it doesn't exist, a new ticket will be created with the given ID and data. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
210
|
+
*
|
|
211
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#upsert
|
|
212
|
+
*
|
|
213
|
+
* @example
|
|
214
|
+
* ```ts
|
|
215
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
216
|
+
*
|
|
217
|
+
* const registry = useRegistry()
|
|
218
|
+
*
|
|
219
|
+
* // Insert a new ticket
|
|
220
|
+
* const ticket = registry.upsert('ticket-id', { value: 'initial-value' })
|
|
221
|
+
*
|
|
222
|
+
* // Update the existing ticket
|
|
223
|
+
* const patched = registry.upsert('ticket-id', { value: 'updated-value' })
|
|
224
|
+
* ```
|
|
225
|
+
*/
|
|
226
|
+
upsert: (id: ID, ticket?: Partial<Z>) => Z;
|
|
227
|
+
/**
|
|
228
|
+
* Get all values of registered tickets
|
|
229
|
+
*
|
|
230
|
+
* @remarks Calls `collection.values` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
231
|
+
*
|
|
232
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#values
|
|
233
|
+
*
|
|
234
|
+
* @example
|
|
235
|
+
* ```ts
|
|
236
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
237
|
+
*
|
|
238
|
+
* const registry = useRegistry()
|
|
239
|
+
*
|
|
240
|
+
* registry.register({ id: 'ticket-1', value: 'value-1' })
|
|
241
|
+
* registry.register({ id: 'ticket-2', value: 'value-2' })
|
|
242
|
+
*
|
|
243
|
+
* const values = registry.values() // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
|
|
244
|
+
* ```
|
|
245
|
+
*/
|
|
246
|
+
values: () => Z[];
|
|
247
|
+
/**
|
|
248
|
+
* Get all entries of registered tickets
|
|
249
|
+
*
|
|
250
|
+
* @remarks Calls `collection.entries` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
251
|
+
*
|
|
252
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#entries
|
|
253
|
+
*
|
|
254
|
+
* @example
|
|
255
|
+
* ```ts
|
|
256
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
257
|
+
*
|
|
258
|
+
* const registry = useRegistry()
|
|
259
|
+
*
|
|
260
|
+
* registry.register({ id: 'ticket-1', value: 'value-1' })
|
|
261
|
+
* registry.register({ id: 'ticket-2', value: 'value-2' })
|
|
262
|
+
*
|
|
263
|
+
* const entries = registry.entries() // [['ticket-1', { id: 'ticket-1', ... }], ['ticket-2', { id: 'ticket-2', ... }]]
|
|
264
|
+
* ```
|
|
265
|
+
*/
|
|
266
|
+
entries: () => [ID, Z][];
|
|
267
|
+
/**
|
|
268
|
+
* Register a new ticket
|
|
269
|
+
*
|
|
270
|
+
* @param ticket The partial ticket data to register.
|
|
271
|
+
* @remarks If no ID is provided, a unique ID will be generated automatically. If no value is provided, it defaults to the ticket's index. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
272
|
+
*
|
|
273
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#register
|
|
274
|
+
*
|
|
275
|
+
* @example
|
|
276
|
+
* ```ts
|
|
277
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
278
|
+
*
|
|
279
|
+
* const registry = useRegistry()
|
|
280
|
+
*
|
|
281
|
+
* const ticket = registry.register()
|
|
282
|
+
*
|
|
283
|
+
* console.log(ticket) // { id: 'generated-id', index: 0, value: 0, valueIsIndex: true }
|
|
284
|
+
* ```
|
|
285
|
+
*/
|
|
286
|
+
register: (ticket?: Partial<Z>) => Z;
|
|
287
|
+
/**
|
|
288
|
+
* Unregister an ticket by ID
|
|
289
|
+
*
|
|
290
|
+
* @param id The ID of the ticket to unregister.
|
|
291
|
+
* @remarks Removes the ticket from the registry and reindexes the remaining tickets. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
292
|
+
*
|
|
293
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#unregister
|
|
294
|
+
*
|
|
295
|
+
* @example
|
|
296
|
+
* ```ts
|
|
297
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
298
|
+
*
|
|
299
|
+
* const registry = useRegistry()
|
|
300
|
+
*
|
|
301
|
+
* registry.register({ id: 'ticket-id' })
|
|
302
|
+
*
|
|
303
|
+
* registry.unregister('ticket-id')
|
|
304
|
+
* ```
|
|
305
|
+
*/
|
|
306
|
+
unregister: (id: ID) => void;
|
|
307
|
+
/**
|
|
308
|
+
* Reset the index directory and update all tickets
|
|
309
|
+
*
|
|
310
|
+
* @remarks Rebuilds the internal index mapping and ensures all tickets have correct index values. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
311
|
+
*
|
|
312
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#reindex
|
|
313
|
+
*
|
|
314
|
+
* @example
|
|
315
|
+
* ```ts
|
|
316
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
317
|
+
*
|
|
318
|
+
* const registry = useRegistry()
|
|
319
|
+
*
|
|
320
|
+
* registry.register({ id: 'ticket-1' })
|
|
321
|
+
* registry.register({ id: 'ticket-2' })
|
|
322
|
+
*
|
|
323
|
+
* // After some operations that may affect indexing
|
|
324
|
+
* registry.reindex()
|
|
325
|
+
* ```
|
|
326
|
+
*/
|
|
327
|
+
reindex: () => void;
|
|
328
|
+
/**
|
|
329
|
+
* Seek for a ticket based on direction and optional predicate
|
|
330
|
+
*
|
|
331
|
+
* @param direction The direction to seek ('first' or 'last'). Defaults to 'first'.
|
|
332
|
+
* @param from The index to start seeking from. Defaults to the beginning or end based on direction.
|
|
333
|
+
* @param predicate An optional function to test each ticket. The first ticket that satisfies the predicate will be returned.
|
|
334
|
+
* @remarks This method allows for flexible searching within the registry, either from the start or end, and can filter tickets based on custom criteria.
|
|
335
|
+
*
|
|
336
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#seek
|
|
337
|
+
*
|
|
338
|
+
* @example
|
|
339
|
+
* ```ts
|
|
340
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
341
|
+
*
|
|
342
|
+
* const registry = useRegistry()
|
|
343
|
+
*
|
|
344
|
+
* registry.register({ id: 'ticket-1', value: 'apple' })
|
|
345
|
+
* registry.register({ id: 'ticket-2', value: 'banana' })
|
|
346
|
+
* registry.register({ id: 'ticket-3', value: 'cherry' })
|
|
347
|
+
*
|
|
348
|
+
* // Seek the first ticket
|
|
349
|
+
* const first = registry.seek('first')
|
|
350
|
+
*
|
|
351
|
+
* // Seek the last ticket
|
|
352
|
+
* const last = registry.seek('last')
|
|
353
|
+
*
|
|
354
|
+
* // Seek the first ticket with value 'banana'
|
|
355
|
+
* const banana = registry.seek('first', undefined, ticket => ticket.value === 'banana')
|
|
356
|
+
*
|
|
357
|
+
* // Seek from index 1 to find the next ticket with value starting with 'c'
|
|
358
|
+
* const cherry = registry.seek('first', 1, ticket => (ticket.value as string).startsWith('c'))
|
|
359
|
+
* ```
|
|
360
|
+
*/
|
|
361
|
+
seek: (direction?: 'first' | 'last', from?: number, predicate?: (ticket: Z) => boolean) => Z | undefined;
|
|
362
|
+
/**
|
|
363
|
+
* Listen for registry events
|
|
364
|
+
*
|
|
365
|
+
* @param event The name of the event to listen for.
|
|
366
|
+
* @param cb The callback function to invoke when the event is emitted.
|
|
367
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
368
|
+
* Supported events:
|
|
369
|
+
* - `register:ticket` - Emitted when a ticket is registered, receives the ticket as argument
|
|
370
|
+
* - `unregister:ticket` - Emitted when a ticket is unregistered, receives the ticket as argument
|
|
371
|
+
* - `update:ticket` - Emitted when a ticket is updated, receives the updated ticket as argument
|
|
372
|
+
* - `clear:registry` - Emitted when the registry is cleared
|
|
373
|
+
*
|
|
374
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#on
|
|
375
|
+
*
|
|
376
|
+
* @example
|
|
377
|
+
* ```ts
|
|
378
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
379
|
+
*
|
|
380
|
+
* const registry = useRegistry({ events: true })
|
|
381
|
+
*
|
|
382
|
+
* registry.on('register:ticket', (ticket) => {
|
|
383
|
+
* console.log('Ticket registered:', ticket)
|
|
384
|
+
* })
|
|
385
|
+
*
|
|
386
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
387
|
+
* ```
|
|
388
|
+
*/
|
|
389
|
+
on: (event: string, cb: Function) => void;
|
|
390
|
+
/**
|
|
391
|
+
* Stop listening for registry events
|
|
392
|
+
*
|
|
393
|
+
* @param event The name of the event to stop listening for.
|
|
394
|
+
* @param cb The callback function to remove.
|
|
395
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
396
|
+
*
|
|
397
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#off
|
|
398
|
+
*
|
|
399
|
+
* @example
|
|
400
|
+
* ```ts
|
|
401
|
+
* import { onScopeDispose } from 'vue'
|
|
402
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
403
|
+
*
|
|
404
|
+
* const registry = useRegistry({ events: true })
|
|
405
|
+
*
|
|
406
|
+
* function onRegister(ticket) {
|
|
407
|
+
* console.log('Ticket registered:', ticket)
|
|
408
|
+
* }
|
|
409
|
+
*
|
|
410
|
+
* registry.on('register:ticket', onRegister)
|
|
411
|
+
*
|
|
412
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
413
|
+
*
|
|
414
|
+
* onScopeDispose(() => {
|
|
415
|
+
* registry.off('register:ticket', onRegister)
|
|
416
|
+
* })
|
|
417
|
+
* ```
|
|
418
|
+
*/
|
|
419
|
+
off: (event: string, cb: Function) => void;
|
|
420
|
+
/**
|
|
421
|
+
* Emit an event with data
|
|
422
|
+
*
|
|
423
|
+
* @param event The name of the event to emit.
|
|
424
|
+
* @param data The data to pass to event listeners.
|
|
425
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
426
|
+
*
|
|
427
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#emit
|
|
428
|
+
*
|
|
429
|
+
* @example
|
|
430
|
+
* ```ts
|
|
431
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
432
|
+
*
|
|
433
|
+
* const registry = useRegistry({ events: true })
|
|
434
|
+
*
|
|
435
|
+
* registry.on('custom-event', (data) => {
|
|
436
|
+
* console.log('Custom event received:', data)
|
|
437
|
+
* })
|
|
438
|
+
*
|
|
439
|
+
* registry.emit('custom-event', { message: 'Hello, World!' }) // Console: Custom event received: { message: 'Hello, World!' }
|
|
440
|
+
* ```
|
|
441
|
+
*/
|
|
442
|
+
emit: (event: string, data: unknown) => void;
|
|
443
|
+
/**
|
|
444
|
+
* Clears the registry and removes all listeners
|
|
445
|
+
*
|
|
446
|
+
* @remarks Disposes of the registry by clearing all tickets and removing all event listeners.
|
|
447
|
+
*
|
|
448
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#dispose
|
|
449
|
+
*
|
|
450
|
+
* @example
|
|
451
|
+
* ```ts
|
|
452
|
+
* import { onScopeDispose } from 'vue'
|
|
453
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
454
|
+
*
|
|
455
|
+
* const registry = useRegistry({ events: true })
|
|
456
|
+
*
|
|
457
|
+
* registry.register({ id: 'ticket-id' })
|
|
458
|
+
*
|
|
459
|
+
* onScopeDispose(() => {
|
|
460
|
+
* registry.dispose()
|
|
461
|
+
* })
|
|
462
|
+
* ```
|
|
463
|
+
*/
|
|
464
|
+
dispose: () => void;
|
|
465
|
+
/**
|
|
466
|
+
* Onboard multiple tickets at once
|
|
467
|
+
*
|
|
468
|
+
* @param registrations An array of partial ticket data to register.
|
|
469
|
+
* @remarks Registers multiple tickets in a single operation and returns the array of registered tickets.
|
|
470
|
+
*
|
|
471
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#onboard
|
|
472
|
+
*
|
|
473
|
+
* @example
|
|
474
|
+
* ```ts
|
|
475
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
476
|
+
*
|
|
477
|
+
* const registry = useRegistry()
|
|
478
|
+
*
|
|
479
|
+
* const tickets = registry.onboard([
|
|
480
|
+
* { id: 'ticket-1', value: 'value-1' },
|
|
481
|
+
* { id: 'ticket-2', value: 'value-2' },
|
|
482
|
+
* ])
|
|
483
|
+
*
|
|
484
|
+
* console.log(tickets) // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
|
|
485
|
+
* ```
|
|
486
|
+
*/
|
|
487
|
+
onboard: (registrations: Partial<Z>[]) => Z[];
|
|
488
|
+
/**
|
|
489
|
+
* Offboard multiple tickets at once
|
|
490
|
+
*
|
|
491
|
+
* @param ids An array of ticket IDs to unregister.
|
|
492
|
+
* @remarks Unregisters multiple tickets in a single operation with optimized reindexing.
|
|
493
|
+
*
|
|
494
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#offboard
|
|
495
|
+
*
|
|
496
|
+
* @example
|
|
497
|
+
* ```ts
|
|
498
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
499
|
+
*
|
|
500
|
+
* const registry = useRegistry()
|
|
501
|
+
*
|
|
502
|
+
* registry.onboard([
|
|
503
|
+
* { id: 'ticket-1', value: 'value-1' },
|
|
504
|
+
* { id: 'ticket-2', value: 'value-2' },
|
|
505
|
+
* { id: 'ticket-3', value: 'value-3' },
|
|
506
|
+
* ])
|
|
507
|
+
*
|
|
508
|
+
* registry.offboard(['ticket-1', 'ticket-3'])
|
|
509
|
+
*
|
|
510
|
+
* console.log(registry.size) // 1
|
|
511
|
+
* ```
|
|
512
|
+
*/
|
|
513
|
+
offboard: (ids: ID[]) => void;
|
|
514
|
+
/**
|
|
515
|
+
* The number of tickets in the registry
|
|
516
|
+
*
|
|
517
|
+
* @remarks Reflects the current size of the internal ticket collection.
|
|
518
|
+
*
|
|
519
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#size
|
|
520
|
+
*
|
|
521
|
+
* @example
|
|
522
|
+
* ```ts
|
|
523
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
524
|
+
*
|
|
525
|
+
* const registry = useRegistry()
|
|
526
|
+
*
|
|
527
|
+
* registry.register({ id: 'ticket-1' })
|
|
528
|
+
* registry.register({ id: 'ticket-2' })
|
|
529
|
+
*
|
|
530
|
+
* console.log(registry.size) // 2
|
|
531
|
+
* ```
|
|
532
|
+
*/
|
|
533
|
+
size: number;
|
|
534
|
+
}
|
|
535
|
+
interface RegistryOptions {
|
|
536
|
+
/**
|
|
537
|
+
* Enable event emission for registry operations
|
|
538
|
+
*
|
|
539
|
+
* @default false
|
|
540
|
+
* @remarks When enabled, the registry will emit events for operations like registration and unregistration. Listeners can be added using the `on` method.
|
|
541
|
+
*
|
|
542
|
+
* @example
|
|
543
|
+
* ```ts
|
|
544
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
545
|
+
*
|
|
546
|
+
* const registry = useRegistry({ events: true })
|
|
547
|
+
*
|
|
548
|
+
* registry.on('register:ticket', (ticket) => {
|
|
549
|
+
* console.log('Ticket registered:', ticket)
|
|
550
|
+
* })
|
|
551
|
+
*
|
|
552
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
553
|
+
* ```
|
|
554
|
+
*/
|
|
555
|
+
events?: boolean;
|
|
556
|
+
}
|
|
557
|
+
interface RegistryContextOptions extends RegistryOptions {
|
|
558
|
+
namespace?: string;
|
|
559
|
+
}
|
|
560
|
+
/**
|
|
561
|
+
* Creates a new registry instance.
|
|
562
|
+
*
|
|
563
|
+
* @param options The options for the registry instance.
|
|
564
|
+
* @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
|
|
565
|
+
* @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
|
|
566
|
+
* @returns A new registry instance.
|
|
567
|
+
*
|
|
568
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#use-registry
|
|
569
|
+
*
|
|
570
|
+
* @example
|
|
571
|
+
* ```ts
|
|
572
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
573
|
+
*
|
|
574
|
+
* const registry = useRegistry()
|
|
575
|
+
*
|
|
576
|
+
* const ticket1 = registry.register({ id: 'user-1', value: { name: 'John' } })
|
|
577
|
+
* const ticket2 = registry.register({ id: 'user-2', value: { name: 'Jane' } })
|
|
578
|
+
*
|
|
579
|
+
* console.log(registry.size) // 2
|
|
580
|
+
* console.log(registry.get('user-1')) // { id: 'user-1', index: 0, value: { name: 'John' }, ... }
|
|
581
|
+
* ```
|
|
582
|
+
*/
|
|
583
|
+
declare function useRegistry<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(options?: RegistryOptions): E;
|
|
584
|
+
/**
|
|
585
|
+
* Creates a new registry context.
|
|
586
|
+
*
|
|
587
|
+
* @param namespace The namespace for the registry context.
|
|
588
|
+
* @param options The options for the registry context.
|
|
589
|
+
* @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
|
|
590
|
+
* @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
|
|
591
|
+
* @returns A new registry context.
|
|
592
|
+
*
|
|
593
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#create-registry-context
|
|
594
|
+
*
|
|
595
|
+
* @example
|
|
596
|
+
* ```ts
|
|
597
|
+
* import { createRegistryContext } from '@vuetify/v0'
|
|
598
|
+
*
|
|
599
|
+
* // With default namespace 'v0:registry'
|
|
600
|
+
* export const [useItems, provideItems, items] = createRegistryContext()
|
|
601
|
+
*
|
|
602
|
+
* // Or with custom namespace
|
|
603
|
+
* export const [useItems, provideItems, items] = createRegistryContext({ namespace: 'my-items' })
|
|
604
|
+
*
|
|
605
|
+
* // In a parent component:
|
|
606
|
+
* provideItems()
|
|
607
|
+
*
|
|
608
|
+
* // In a child component:
|
|
609
|
+
* const items = useItems()
|
|
610
|
+
* items.register({ id: 'item-1', value: 'Value 1' })
|
|
611
|
+
* ```
|
|
612
|
+
*/
|
|
613
|
+
declare function createRegistryContext<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(_options?: RegistryContextOptions): ContextTrinity<E>;
|
|
614
|
+
//#endregion
|
|
615
|
+
//#region src/composables/useSelection/index.d.ts
|
|
616
|
+
interface SelectionTicket<V = unknown> extends RegistryTicket<V> {
|
|
617
|
+
/** Disabled state of the ticket */
|
|
618
|
+
disabled: MaybeRef<boolean>;
|
|
619
|
+
/** Whether the ticket is currently selected */
|
|
620
|
+
isSelected: Readonly<Ref<boolean, boolean>>;
|
|
621
|
+
/** Select self */
|
|
622
|
+
select: () => void;
|
|
623
|
+
/** Unselect self */
|
|
624
|
+
unselect: () => void;
|
|
625
|
+
/** Toggle self on and off */
|
|
626
|
+
toggle: () => void;
|
|
627
|
+
}
|
|
628
|
+
interface SelectionContext<Z extends SelectionTicket> extends RegistryContext<Z> {
|
|
629
|
+
/** Set of selected ticket IDs */
|
|
630
|
+
selectedIds: Reactive<Set<ID>>;
|
|
631
|
+
/** Set of selected ticket instances */
|
|
632
|
+
selectedItems: ComputedRef<Set<Z>>;
|
|
633
|
+
/** Set of selected ticket values */
|
|
634
|
+
selectedValues: ComputedRef<Set<unknown>>;
|
|
635
|
+
/** Disable state for the entire selection instance */
|
|
636
|
+
disabled: MaybeRef<boolean>;
|
|
637
|
+
/** Clear all selected IDs and reindexes */
|
|
638
|
+
reset: () => void;
|
|
639
|
+
/** Select a ticket by ID (Toggle ON) */
|
|
640
|
+
select: (id: ID) => void;
|
|
641
|
+
/** Unselect a ticket by ID (Toggle OFF) */
|
|
642
|
+
unselect: (id: ID) => void;
|
|
643
|
+
/** Toggles a ticket ON and OFF by ID */
|
|
644
|
+
toggle: (id: ID) => void;
|
|
645
|
+
/** Check if a ticket is selected by ID */
|
|
646
|
+
selected: (id: ID) => boolean;
|
|
647
|
+
/** Mandates selected ID based on "mandatory" Option */
|
|
648
|
+
mandate: () => void;
|
|
649
|
+
}
|
|
650
|
+
interface SelectionOptions extends RegistryOptions {
|
|
651
|
+
/** When true, the entire selection instance is disabled. */
|
|
652
|
+
disabled?: MaybeRef<boolean>;
|
|
653
|
+
/**
|
|
654
|
+
* When true, newly registered items are automatically selected if not disabled.
|
|
655
|
+
* Useful for pre-selecting items in multi-select scenarios.
|
|
656
|
+
*/
|
|
657
|
+
enroll?: boolean;
|
|
658
|
+
/**
|
|
659
|
+
* Controls mandatory selection behavior:
|
|
660
|
+
* - `false` (default): No mandatory selection enforcement
|
|
661
|
+
* - `true`: Prevents deselecting the last selected item (user must always have one selected)
|
|
662
|
+
* - `'force'`: Automatically selects the first non-disabled item on registration
|
|
663
|
+
*/
|
|
664
|
+
mandatory?: boolean | 'force';
|
|
665
|
+
/** When true, treats the selection as an array */
|
|
666
|
+
multiple?: boolean;
|
|
667
|
+
}
|
|
668
|
+
interface SelectionContextOptions extends SelectionOptions {
|
|
669
|
+
namespace?: string;
|
|
670
|
+
}
|
|
671
|
+
/**
|
|
672
|
+
* Creates a new selection instance for managing multiple selected items.
|
|
673
|
+
*
|
|
674
|
+
* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
|
|
675
|
+
* Supports disabled items, mandatory selection enforcement, and auto-enrollment.
|
|
676
|
+
*
|
|
677
|
+
* @param options The options for the selection instance.
|
|
678
|
+
* @template Z The type of the selection ticket.
|
|
679
|
+
* @template E The type of the selection context.
|
|
680
|
+
* @returns A new selection instance with selection management methods.
|
|
681
|
+
*
|
|
682
|
+
* @remarks
|
|
683
|
+
* **Key Features:**
|
|
684
|
+
* - Multi-selection support (unlike `useSingle` which enforces single selection)
|
|
685
|
+
* - Set-based `selectedIds` tracking for efficient lookups
|
|
686
|
+
* - Computed `selectedItems` and `selectedValues` for reactive access
|
|
687
|
+
* - Each ticket gets `isSelected`, `select()`, `unselect()`, and `toggle()` methods
|
|
688
|
+
* - Disabled items cannot be selected
|
|
689
|
+
* - Mandatory mode prevents deselecting the last item
|
|
690
|
+
* - Force mode auto-selects first non-disabled item on registration
|
|
691
|
+
* - Enroll option auto-selects all non-disabled items on registration
|
|
692
|
+
*
|
|
693
|
+
* **Inheritance Chain:**
|
|
694
|
+
* `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
|
|
695
|
+
*
|
|
696
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
697
|
+
*
|
|
698
|
+
* @example
|
|
699
|
+
* ```ts
|
|
700
|
+
* import { createSelection } from '@vuetify/v0'
|
|
701
|
+
*
|
|
702
|
+
* const selection = createSelection({ mandatory: true })
|
|
703
|
+
*
|
|
704
|
+
* selection.onboard([
|
|
705
|
+
* { id: 'item-1', value: 'Item 1' },
|
|
706
|
+
* { id: 'item-2', value: 'Item 2', disabled: true },
|
|
707
|
+
* { id: 'item-3', value: 'Item 3' },
|
|
708
|
+
* ])
|
|
709
|
+
*
|
|
710
|
+
* selection.select('item-1')
|
|
711
|
+
* selection.select('item-3')
|
|
712
|
+
*
|
|
713
|
+
* console.log(selection.selectedIds) // Set { 'item-1', 'item-3' }
|
|
714
|
+
* console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
|
|
715
|
+
* ```
|
|
716
|
+
*/
|
|
717
|
+
declare function createSelection<Z extends SelectionTicket = SelectionTicket, E extends SelectionContext<Z> = SelectionContext<Z>>(_options?: SelectionOptions): E;
|
|
718
|
+
/**
|
|
719
|
+
* Creates a new selection context.
|
|
720
|
+
*
|
|
721
|
+
* @param options The options for the selection context.
|
|
722
|
+
* @template Z The type of the selection ticket.
|
|
723
|
+
* @template E The type of the selection context.
|
|
724
|
+
* @returns A new selection context.
|
|
725
|
+
*
|
|
726
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
727
|
+
*
|
|
728
|
+
* @example
|
|
729
|
+
* ```ts
|
|
730
|
+
* import { createSelectionContext } from '@vuetify/v0'
|
|
731
|
+
*
|
|
732
|
+
* // With default namespace 'v0:selection'
|
|
733
|
+
* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext()
|
|
734
|
+
*
|
|
735
|
+
* // Or with custom namespace
|
|
736
|
+
* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext({ namespace: 'checkboxes' })
|
|
737
|
+
*
|
|
738
|
+
* // In a parent component:
|
|
739
|
+
* provideCheckboxes()
|
|
740
|
+
*
|
|
741
|
+
* // In a child component:
|
|
742
|
+
* const checkboxes = useCheckboxes()
|
|
743
|
+
* checkboxes.select('checkbox-1')
|
|
744
|
+
* ```
|
|
745
|
+
*/
|
|
746
|
+
declare function createSelectionContext<Z extends SelectionTicket = SelectionTicket, E extends SelectionContext<Z> = SelectionContext<Z>>(_options?: SelectionContextOptions): ContextTrinity<E>;
|
|
747
|
+
/**
|
|
748
|
+
* Returns the current selection instance.
|
|
749
|
+
*
|
|
750
|
+
* @param namespace The namespace for the selection context. Defaults to `'v0:selection'`.
|
|
751
|
+
* @returns The current selection instance.
|
|
752
|
+
*
|
|
753
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
754
|
+
*
|
|
755
|
+
* @example
|
|
756
|
+
* ```vue
|
|
757
|
+
* <script setup lang="ts">
|
|
758
|
+
* import { useSelection } from '@vuetify/v0'
|
|
759
|
+
*
|
|
760
|
+
* const selection = useSelection()
|
|
761
|
+
* </script>
|
|
762
|
+
*
|
|
763
|
+
* <template>
|
|
764
|
+
* <div>
|
|
765
|
+
* <p>Selected: {{ selection.selectedIds.size }}</p>
|
|
766
|
+
* </div>
|
|
767
|
+
* </template>
|
|
768
|
+
* ```
|
|
769
|
+
*/
|
|
770
|
+
declare function useSelection<Z extends SelectionTicket = SelectionTicket, E extends SelectionContext<Z> = SelectionContext<Z>>(namespace?: string): E;
|
|
771
|
+
//#endregion
|
|
772
|
+
//#region src/composables/createContext/index.d.ts
|
|
773
|
+
type ContextKey<Z> = InjectionKey<Z> | string;
|
|
774
|
+
/**
|
|
775
|
+
* Injects a context provided by an ancestor component.
|
|
776
|
+
*
|
|
777
|
+
* @param key The key of the context to inject.
|
|
778
|
+
* @param defaultValue Optional default value if context is not found.
|
|
779
|
+
* @template Z The type of the context.
|
|
780
|
+
* @returns The injected context.
|
|
781
|
+
* @throws An error if the context is not found and no default is provided.
|
|
782
|
+
*
|
|
783
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html#inject
|
|
784
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#use-context
|
|
785
|
+
*
|
|
786
|
+
* @example
|
|
787
|
+
* ```ts
|
|
788
|
+
* // Without default value
|
|
789
|
+
* const context = useContext<MyContext>('my-context')
|
|
790
|
+
*
|
|
791
|
+
* // With default value
|
|
792
|
+
* const context = useContext<MyContext>('my-context', defaultContext)
|
|
793
|
+
* ```
|
|
794
|
+
*/
|
|
795
|
+
declare function useContext<Z>(key: ContextKey<Z>, defaultValue?: Z): Z;
|
|
796
|
+
/**
|
|
797
|
+
* Provides a context to all descendant components.
|
|
798
|
+
*
|
|
799
|
+
* @param key The key of the context to provide.
|
|
800
|
+
* @param context The context to provide.
|
|
801
|
+
* @param app Optional Vue app instance to provide the context at app level instead of component level.
|
|
802
|
+
* @template Z The type of the context.
|
|
803
|
+
* @returns The provided context.
|
|
804
|
+
*
|
|
805
|
+
* @remarks
|
|
806
|
+
* When `app` parameter is provided, the context is made available to all components in the app.
|
|
807
|
+
* When omitted, the context is provided at the current component level and available to descendants only.
|
|
808
|
+
*
|
|
809
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html#provide
|
|
810
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#provide-context
|
|
811
|
+
*
|
|
812
|
+
* @example
|
|
813
|
+
* ```ts
|
|
814
|
+
* // Component-level provision
|
|
815
|
+
* provideContext<MyContext>('my-context', context)
|
|
816
|
+
*
|
|
817
|
+
* // App-level provision (typically used in plugins)
|
|
818
|
+
* const app = createApp()
|
|
819
|
+
* provideContext<MyContext>('my-context', context, app)
|
|
820
|
+
* ```
|
|
821
|
+
*/
|
|
822
|
+
declare function provideContext<Z>(key: ContextKey<Z>, context: Z, app?: App): Z;
|
|
823
|
+
/**
|
|
824
|
+
* Creates a new context for providing and injecting data.
|
|
825
|
+
*
|
|
826
|
+
* @param key The key of the context to create.
|
|
827
|
+
* @param defaultValue Optional default value if context is not found.
|
|
828
|
+
* @template Z The type of the context.
|
|
829
|
+
* @returns A tuple containing the `useContext` and `provideContext` functions.
|
|
830
|
+
*
|
|
831
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html
|
|
832
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#create-context
|
|
833
|
+
*
|
|
834
|
+
* @example
|
|
835
|
+
* ```ts
|
|
836
|
+
* // Without default value
|
|
837
|
+
* const [useMyContext, provideMyContext] = createContext<MyContext>('my-context')
|
|
838
|
+
*
|
|
839
|
+
* // With default value
|
|
840
|
+
* const [useMyContext, provideMyContext] = createContext<MyContext>('my-context', defaultContext)
|
|
841
|
+
* ```
|
|
842
|
+
*/
|
|
843
|
+
declare function createContext<Z>(_key: ContextKey<Z>, defaultValue?: Z): readonly [(key?: ContextKey<Z>) => Z, (context: Z, app?: App) => Z];
|
|
844
|
+
//#endregion
|
|
6
845
|
//#region src/composables/createPlugin/index.d.ts
|
|
7
|
-
|
|
8
846
|
interface PluginOptions {
|
|
9
847
|
namespace: string;
|
|
10
848
|
provide: (app: App) => void;
|
|
@@ -318,7 +1156,16 @@ declare function useWindowEventListener<E extends keyof WindowEventMap>(event: M
|
|
|
318
1156
|
declare function useDocumentEventListener<E extends keyof DocumentEventMap>(event: MaybeRefOrGetter<MaybeArray<E>>, listener: MaybeRef<MaybeArray<(this: Document, event: DocumentEventMap[E]) => any>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): CleanupFunction;
|
|
319
1157
|
//#endregion
|
|
320
1158
|
//#region src/composables/useGroup/index.d.ts
|
|
321
|
-
interface GroupTicket extends SelectionTicket {
|
|
1159
|
+
interface GroupTicket<V = unknown> extends SelectionTicket<V> {
|
|
1160
|
+
/** Whether the ticket should start in mixed/indeterminate state */
|
|
1161
|
+
indeterminate?: MaybeRef<boolean>;
|
|
1162
|
+
/** Whether the ticket is in a mixed/indeterminate state */
|
|
1163
|
+
isMixed: Readonly<Ref<boolean>>;
|
|
1164
|
+
/** Set self to mixed/indeterminate state */
|
|
1165
|
+
mix: () => void;
|
|
1166
|
+
/** Clear mixed/indeterminate state from self */
|
|
1167
|
+
unmix: () => void;
|
|
1168
|
+
}
|
|
322
1169
|
interface GroupContext<Z extends GroupTicket> extends SelectionContext<Z> {
|
|
323
1170
|
selectedIndexes: ComputedRef<Set<number>>;
|
|
324
1171
|
/** Select one or more Tickets by ID */
|
|
@@ -327,19 +1174,42 @@ interface GroupContext<Z extends GroupTicket> extends SelectionContext<Z> {
|
|
|
327
1174
|
unselect: (ids: ID | ID[]) => void;
|
|
328
1175
|
/** Toggle one or more Tickets ON and OFF by ID */
|
|
329
1176
|
toggle: (ids: ID | ID[]) => void;
|
|
1177
|
+
/** Set of mixed/indeterminate ticket IDs */
|
|
1178
|
+
mixedIds: Reactive<Set<ID>>;
|
|
1179
|
+
/** Set of mixed/indeterminate ticket instances */
|
|
1180
|
+
mixedItems: ComputedRef<Set<Z>>;
|
|
1181
|
+
/** Set one or more Tickets to mixed/indeterminate state by ID */
|
|
1182
|
+
mix: (ids: ID | ID[]) => void;
|
|
1183
|
+
/** Clear mixed/indeterminate state from one or more Tickets by ID */
|
|
1184
|
+
unmix: (ids: ID | ID[]) => void;
|
|
1185
|
+
/** Check if a ticket is in mixed/indeterminate state by ID */
|
|
1186
|
+
mixed: (id: ID) => boolean;
|
|
1187
|
+
/** Whether no items are currently selected */
|
|
1188
|
+
isNoneSelected: ComputedRef<boolean>;
|
|
1189
|
+
/** Whether all selectable (non-disabled) items are selected */
|
|
1190
|
+
isAllSelected: ComputedRef<boolean>;
|
|
1191
|
+
/** Whether some but not all selectable items are selected */
|
|
1192
|
+
isMixed: ComputedRef<boolean>;
|
|
1193
|
+
/** Select all selectable (non-disabled) items */
|
|
1194
|
+
selectAll: () => void;
|
|
1195
|
+
/** Unselect all items (respects mandatory option) */
|
|
1196
|
+
unselectAll: () => void;
|
|
1197
|
+
/** Toggle between all selected and none selected */
|
|
1198
|
+
toggleAll: () => void;
|
|
330
1199
|
}
|
|
331
1200
|
interface GroupOptions extends SelectionOptions {}
|
|
332
1201
|
interface GroupContextOptions extends SelectionContextOptions {}
|
|
333
1202
|
/**
|
|
334
|
-
* Creates a new group instance with batch selection
|
|
1203
|
+
* Creates a new group instance with batch selection and tri-state support.
|
|
335
1204
|
*
|
|
336
1205
|
* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
|
|
337
|
-
* at once by passing an array of IDs. Adds
|
|
1206
|
+
* at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
|
|
1207
|
+
* checkbox trees and similar use cases.
|
|
338
1208
|
*
|
|
339
1209
|
* @param options The options for the group instance.
|
|
340
1210
|
* @template Z The type of the group ticket.
|
|
341
1211
|
* @template E The type of the group context.
|
|
342
|
-
* @returns A new group instance with batch selection support.
|
|
1212
|
+
* @returns A new group instance with batch selection and tri-state support.
|
|
343
1213
|
*
|
|
344
1214
|
* @remarks
|
|
345
1215
|
* **Key Differences from `createSelection`:**
|
|
@@ -347,13 +1217,22 @@ interface GroupContextOptions extends SelectionContextOptions {}
|
|
|
347
1217
|
* - `unselect()` accepts `ID | ID[]` for batch operations
|
|
348
1218
|
* - `toggle()` accepts `ID | ID[]` for batch operations
|
|
349
1219
|
* - Adds `selectedIndexes` computed Set for getting selected item indexes
|
|
350
|
-
* -
|
|
1220
|
+
* - Adds tri-state support via `mix()`, `unmix()`, `mixed()`, `mixedIds`, `mixedItems`
|
|
1221
|
+
* - Perfect for checkbox trees, multi-select dropdowns, and bulk operations
|
|
1222
|
+
*
|
|
1223
|
+
* **Tri-State Support:**
|
|
1224
|
+
* - Items can be in one of three states: selected, mixed (indeterminate), or unselected
|
|
1225
|
+
* - `mix(id)` sets item to mixed state (clears selected if set)
|
|
1226
|
+
* - `unmix(id)` clears mixed state
|
|
1227
|
+
* - `select(id)` clears mixed state before selecting
|
|
1228
|
+
* - `toggle(id)` on a mixed item selects it (resolves the indeterminate state positively)
|
|
1229
|
+
* - Mixed state works on disabled items (it's a computed state, not user action)
|
|
351
1230
|
*
|
|
352
1231
|
* **Batch Operations:**
|
|
353
1232
|
* - Single ID: `group.select('item-1')`
|
|
354
1233
|
* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
|
|
355
1234
|
* - Uses `toArray()` utility internally to normalize input
|
|
356
|
-
* - Disabled items are automatically skipped in
|
|
1235
|
+
* - Disabled items are automatically skipped in select operations
|
|
357
1236
|
* - Non-existent IDs are silently ignored
|
|
358
1237
|
*
|
|
359
1238
|
* **Inheritance Chain:**
|
|
@@ -382,16 +1261,21 @@ interface GroupContextOptions extends SelectionContextOptions {}
|
|
|
382
1261
|
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
383
1262
|
* console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
|
|
384
1263
|
*
|
|
385
|
-
* //
|
|
386
|
-
* checkboxes.
|
|
387
|
-
* console.log(checkboxes.
|
|
1264
|
+
* // Set item to mixed/indeterminate state
|
|
1265
|
+
* checkboxes.mix('option-a')
|
|
1266
|
+
* console.log(checkboxes.mixedIds) // Set { 'option-a' }
|
|
1267
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-c' } (option-a removed)
|
|
1268
|
+
*
|
|
1269
|
+
* // Toggle a mixed item selects it
|
|
1270
|
+
* checkboxes.toggle('option-a')
|
|
1271
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
1272
|
+
* console.log(checkboxes.mixedIds) // Set {} (cleared)
|
|
388
1273
|
* ```
|
|
389
1274
|
*/
|
|
390
1275
|
declare function createGroup<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(_options?: GroupOptions): E;
|
|
391
1276
|
/**
|
|
392
1277
|
* Creates a new group context.
|
|
393
1278
|
*
|
|
394
|
-
* @param namespace The namespace for the group context.
|
|
395
1279
|
* @param options The options for the group context.
|
|
396
1280
|
* @template Z The type of the group ticket.
|
|
397
1281
|
* @template E The type of the group context.
|
|
@@ -403,7 +1287,11 @@ declare function createGroup<Z extends GroupTicket = GroupTicket, E extends Grou
|
|
|
403
1287
|
* ```ts
|
|
404
1288
|
* import { createGroupContext } from '@vuetify/v0'
|
|
405
1289
|
*
|
|
406
|
-
*
|
|
1290
|
+
* // With default namespace 'v0:group'
|
|
1291
|
+
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext()
|
|
1292
|
+
*
|
|
1293
|
+
* // Or with custom namespace
|
|
1294
|
+
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext({ namespace: 'my-group' })
|
|
407
1295
|
*
|
|
408
1296
|
* // In a parent component:
|
|
409
1297
|
* provideMyGroup()
|
|
@@ -412,7 +1300,7 @@ declare function createGroup<Z extends GroupTicket = GroupTicket, E extends Grou
|
|
|
412
1300
|
* const group = useMyGroup()
|
|
413
1301
|
* ```
|
|
414
1302
|
*/
|
|
415
|
-
declare function createGroupContext<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(_options
|
|
1303
|
+
declare function createGroupContext<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(_options?: GroupContextOptions): ContextTrinity<E>;
|
|
416
1304
|
/**
|
|
417
1305
|
* Returns the current group instance.
|
|
418
1306
|
*
|
|
@@ -436,7 +1324,7 @@ declare function createGroupContext<Z extends GroupTicket = GroupTicket, E exten
|
|
|
436
1324
|
* </template>
|
|
437
1325
|
* ```
|
|
438
1326
|
*/
|
|
439
|
-
declare function useGroup<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(namespace
|
|
1327
|
+
declare function useGroup<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(namespace?: string): E;
|
|
440
1328
|
//#endregion
|
|
441
1329
|
//#region src/composables/useTokens/index.d.ts
|
|
442
1330
|
interface TokenAlias<T = unknown> {
|
|
@@ -447,7 +1335,7 @@ interface TokenAlias<T = unknown> {
|
|
|
447
1335
|
$extensions?: Record<string, unknown>;
|
|
448
1336
|
$deprecated?: boolean | string;
|
|
449
1337
|
}
|
|
450
|
-
type TokenPrimitive = string | number | boolean | null;
|
|
1338
|
+
type TokenPrimitive = string | number | boolean | null | Function;
|
|
451
1339
|
type TokenValue = TokenPrimitive | TokenAlias;
|
|
452
1340
|
interface TokenCollection {
|
|
453
1341
|
[key: string]: TokenValue | TokenCollection;
|
|
@@ -456,7 +1344,7 @@ type FlatTokenCollection = {
|
|
|
456
1344
|
id: string;
|
|
457
1345
|
value: TokenValue;
|
|
458
1346
|
};
|
|
459
|
-
interface TokenTicket extends RegistryTicket {}
|
|
1347
|
+
interface TokenTicket<Z extends TokenValue = TokenValue> extends RegistryTicket<Z> {}
|
|
460
1348
|
interface TokenContext<Z extends TokenTicket> extends RegistryContext<Z> {
|
|
461
1349
|
/**
|
|
462
1350
|
* Checks if a token is an alias
|
|
@@ -597,11 +1485,9 @@ declare function createTokensContext<Z extends TokenTicket = TokenTicket, E exte
|
|
|
597
1485
|
declare function useTokens<Z extends TokenTicket = TokenTicket, E extends TokenContext<Z> = TokenContext<Z>>(namespace?: string): E;
|
|
598
1486
|
//#endregion
|
|
599
1487
|
//#region src/composables/useFeatures/index.d.ts
|
|
600
|
-
interface FeatureTicket extends GroupTicket {
|
|
601
|
-
value: TokenValue;
|
|
602
|
-
}
|
|
1488
|
+
interface FeatureTicket extends GroupTicket<TokenValue> {}
|
|
603
1489
|
interface FeatureContext<Z extends FeatureTicket = FeatureTicket> extends GroupContext<Z> {
|
|
604
|
-
variation: (id: ID, fallback?:
|
|
1490
|
+
variation: (id: ID, fallback?: unknown) => unknown;
|
|
605
1491
|
}
|
|
606
1492
|
interface FeatureOptions extends RegistryOptions {
|
|
607
1493
|
features?: Record<ID, boolean | TokenCollection>;
|
|
@@ -739,7 +1625,7 @@ interface UseFilterResult<Z extends FilterItem = FilterItem> {
|
|
|
739
1625
|
* @template Z The type of the items.
|
|
740
1626
|
* @returns The filtered items.
|
|
741
1627
|
*
|
|
742
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
1628
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
743
1629
|
*
|
|
744
1630
|
* @example
|
|
745
1631
|
* ```ts
|
|
@@ -762,9 +1648,9 @@ declare function useFilter<Z extends FilterItem>(query: FilterQuery, items: Mayb
|
|
|
762
1648
|
//#endregion
|
|
763
1649
|
//#region src/composables/useForm/index.d.ts
|
|
764
1650
|
type FormValidationResult = string | true | Promise<string | true>;
|
|
765
|
-
type FormValidationRule = (value:
|
|
766
|
-
type FormValue = Ref<
|
|
767
|
-
interface FormTicket extends RegistryTicket {
|
|
1651
|
+
type FormValidationRule = (value: unknown) => FormValidationResult;
|
|
1652
|
+
type FormValue = Ref<unknown> | ShallowRef<unknown>;
|
|
1653
|
+
interface FormTicket<V = unknown> extends RegistryTicket<V> {
|
|
768
1654
|
validate: (silent?: boolean) => Promise<boolean>;
|
|
769
1655
|
reset: () => void;
|
|
770
1656
|
validateOn: 'submit' | 'change' | string;
|
|
@@ -786,7 +1672,7 @@ interface FormOptions extends RegistryOptions {
|
|
|
786
1672
|
validateOn?: 'submit' | 'change' | string;
|
|
787
1673
|
}
|
|
788
1674
|
interface FormContextOptions extends RegistryOptions {
|
|
789
|
-
namespace
|
|
1675
|
+
namespace?: string;
|
|
790
1676
|
validateOn?: 'submit' | 'change' | string;
|
|
791
1677
|
}
|
|
792
1678
|
/**
|
|
@@ -822,7 +1708,6 @@ declare function createForm<Z extends FormTicket = FormTicket, E extends FormCon
|
|
|
822
1708
|
/**
|
|
823
1709
|
* Creates a new form context.
|
|
824
1710
|
*
|
|
825
|
-
* @param namespace The namespace for the form context.
|
|
826
1711
|
* @param options The options for the form context.
|
|
827
1712
|
* @template Z The type of the form ticket.
|
|
828
1713
|
* @template E The type of the form context.
|
|
@@ -834,7 +1719,12 @@ declare function createForm<Z extends FormTicket = FormTicket, E extends FormCon
|
|
|
834
1719
|
* ```ts
|
|
835
1720
|
* import { createFormContext } from '@vuetify/v0'
|
|
836
1721
|
*
|
|
837
|
-
*
|
|
1722
|
+
* // With default namespace 'v0:form'
|
|
1723
|
+
* export const [useMyForm, provideMyForm, myForm] = createFormContext({ validateOn: 'change' })
|
|
1724
|
+
*
|
|
1725
|
+
* // Or with custom namespace
|
|
1726
|
+
* export const [useMyForm, provideMyForm, myForm] = createFormContext({
|
|
1727
|
+
* namespace: 'my-form',
|
|
838
1728
|
* validateOn: 'change',
|
|
839
1729
|
* })
|
|
840
1730
|
*
|
|
@@ -846,7 +1736,7 @@ declare function createForm<Z extends FormTicket = FormTicket, E extends FormCon
|
|
|
846
1736
|
* form.register({ id: 'field', value: ref(''), rules: [...] })
|
|
847
1737
|
* ```
|
|
848
1738
|
*/
|
|
849
|
-
declare function createFormContext<Z extends FormTicket = FormTicket, E extends FormContext<Z> = FormContext<Z>>(_options
|
|
1739
|
+
declare function createFormContext<Z extends FormTicket = FormTicket, E extends FormContext<Z> = FormContext<Z>>(_options?: FormContextOptions): ContextTrinity<E>;
|
|
850
1740
|
/**
|
|
851
1741
|
* Returns the current form instance.
|
|
852
1742
|
*
|
|
@@ -900,6 +1790,7 @@ interface HydrationPluginOptions extends HydrationContextOptions {}
|
|
|
900
1790
|
* ```
|
|
901
1791
|
*/
|
|
902
1792
|
declare function createHydration<E extends HydrationContext = HydrationContext>(): E;
|
|
1793
|
+
declare function createFallbackHydration<E extends HydrationContext = HydrationContext>(): E;
|
|
903
1794
|
/**
|
|
904
1795
|
* Creates a new hydration context trinity.
|
|
905
1796
|
*
|
|
@@ -983,6 +1874,32 @@ interface IntersectionObserverOptions {
|
|
|
983
1874
|
rootMargin?: string;
|
|
984
1875
|
threshold?: number | number[];
|
|
985
1876
|
}
|
|
1877
|
+
interface UseIntersectionObserverReturn {
|
|
1878
|
+
/**
|
|
1879
|
+
* Whether the observer is currently active (created and observing)
|
|
1880
|
+
*/
|
|
1881
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
1882
|
+
/**
|
|
1883
|
+
* Whether the target element is currently intersecting with the viewport
|
|
1884
|
+
*/
|
|
1885
|
+
readonly isIntersecting: Readonly<Ref<boolean>>;
|
|
1886
|
+
/**
|
|
1887
|
+
* Whether the observer is currently paused
|
|
1888
|
+
*/
|
|
1889
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
1890
|
+
/**
|
|
1891
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
1892
|
+
*/
|
|
1893
|
+
pause: () => void;
|
|
1894
|
+
/**
|
|
1895
|
+
* Resume observation
|
|
1896
|
+
*/
|
|
1897
|
+
resume: () => void;
|
|
1898
|
+
/**
|
|
1899
|
+
* Stop observation and clean up (destroys observer)
|
|
1900
|
+
*/
|
|
1901
|
+
stop: () => void;
|
|
1902
|
+
}
|
|
986
1903
|
/**
|
|
987
1904
|
* A composable that uses the Intersection Observer API to detect when an element
|
|
988
1905
|
* is visible in the viewport.
|
|
@@ -1022,13 +1939,13 @@ interface IntersectionObserverOptions {
|
|
|
1022
1939
|
* resume()
|
|
1023
1940
|
* ```
|
|
1024
1941
|
*/
|
|
1025
|
-
declare function useIntersectionObserver(target: Ref<Element | undefined>, callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverOptions):
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
}
|
|
1942
|
+
declare function useIntersectionObserver(target: Ref<Element | undefined>, callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverOptions): UseIntersectionObserverReturn;
|
|
1943
|
+
interface UseElementIntersectionReturn extends UseIntersectionObserverReturn {
|
|
1944
|
+
/**
|
|
1945
|
+
* The intersection ratio (0.0 to 1.0) indicating how much of the element is visible
|
|
1946
|
+
*/
|
|
1947
|
+
readonly intersectionRatio: Readonly<Ref<number>>;
|
|
1948
|
+
}
|
|
1032
1949
|
/**
|
|
1033
1950
|
* A convenience composable that uses the Intersection Observer API to detect
|
|
1034
1951
|
* when an element is visible in the viewport.
|
|
@@ -1057,36 +1974,29 @@ declare function useIntersectionObserver(target: Ref<Element | undefined>, callb
|
|
|
1057
1974
|
* })
|
|
1058
1975
|
* ```
|
|
1059
1976
|
*/
|
|
1060
|
-
declare function useElementIntersection(target: Ref<Element | undefined>, options?: IntersectionObserverOptions):
|
|
1061
|
-
isIntersecting: Readonly<Ref<boolean, boolean>>;
|
|
1062
|
-
intersectionRatio: Readonly<Ref<number, number>>;
|
|
1063
|
-
isPaused: Readonly<Ref<boolean, boolean>>;
|
|
1064
|
-
pause: () => void;
|
|
1065
|
-
resume: () => void;
|
|
1066
|
-
stop: () => void;
|
|
1067
|
-
};
|
|
1977
|
+
declare function useElementIntersection(target: Ref<Element | undefined>, options?: IntersectionObserverOptions): UseElementIntersectionReturn;
|
|
1068
1978
|
//#endregion
|
|
1069
1979
|
//#region src/composables/useKeydown/index.d.ts
|
|
1070
|
-
/**
|
|
1071
|
-
* @module useKeydown
|
|
1072
|
-
*
|
|
1073
|
-
* @remarks
|
|
1074
|
-
* Keydown event listener composable with key filtering.
|
|
1075
|
-
*
|
|
1076
|
-
* Key features:
|
|
1077
|
-
* - Key-specific event handling
|
|
1078
|
-
* - preventDefault and stopPropagation options
|
|
1079
|
-
* - Automatic cleanup on scope disposal
|
|
1080
|
-
* - Auto-starts when in component scope
|
|
1081
|
-
*
|
|
1082
|
-
* Simplified wrapper around useEventListener for keyboard interactions.
|
|
1083
|
-
*/
|
|
1084
1980
|
interface KeyHandler {
|
|
1085
1981
|
key: string;
|
|
1086
1982
|
handler: (event: KeyboardEvent) => void;
|
|
1087
1983
|
preventDefault?: boolean;
|
|
1088
1984
|
stopPropagation?: boolean;
|
|
1089
1985
|
}
|
|
1986
|
+
interface UseKeydownReturn {
|
|
1987
|
+
/**
|
|
1988
|
+
* Whether the listener is currently active
|
|
1989
|
+
*/
|
|
1990
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
1991
|
+
/**
|
|
1992
|
+
* Start listening for keydown events
|
|
1993
|
+
*/
|
|
1994
|
+
start: () => void;
|
|
1995
|
+
/**
|
|
1996
|
+
* Stop listening for keydown events
|
|
1997
|
+
*/
|
|
1998
|
+
stop: () => void;
|
|
1999
|
+
}
|
|
1090
2000
|
/**
|
|
1091
2001
|
* A composable that adds a keydown event listener to the document.
|
|
1092
2002
|
*
|
|
@@ -1099,27 +2009,26 @@ interface KeyHandler {
|
|
|
1099
2009
|
* ```ts
|
|
1100
2010
|
* import { useKeydown } from '@vuetify/v0'
|
|
1101
2011
|
*
|
|
1102
|
-
* const {
|
|
2012
|
+
* const { isActive, start, stop } = useKeydown([
|
|
1103
2013
|
* { key: 'Enter', handler: () => console.log('Enter pressed') },
|
|
1104
2014
|
* { key: 'Escape', handler: () => console.log('Escape pressed'), preventDefault: true },
|
|
1105
2015
|
* ])
|
|
1106
2016
|
*
|
|
1107
|
-
*
|
|
1108
|
-
*
|
|
2017
|
+
* // Listener is automatically active when called in component setup
|
|
2018
|
+
* // Manually control if needed:
|
|
2019
|
+
* stop()
|
|
2020
|
+
* start()
|
|
1109
2021
|
* ```
|
|
1110
2022
|
*/
|
|
1111
|
-
declare function useKeydown(handlers: KeyHandler[] | KeyHandler):
|
|
1112
|
-
startListening: () => void;
|
|
1113
|
-
stopListening: () => void;
|
|
1114
|
-
};
|
|
2023
|
+
declare function useKeydown(handlers: MaybeRefOrGetter<KeyHandler[] | KeyHandler>): UseKeydownReturn;
|
|
1115
2024
|
//#endregion
|
|
1116
2025
|
//#region src/composables/useSingle/index.d.ts
|
|
1117
|
-
interface SingleTicket extends SelectionTicket {}
|
|
2026
|
+
interface SingleTicket<V = unknown> extends SelectionTicket<V> {}
|
|
1118
2027
|
interface SingleContext<Z extends SingleTicket> extends SelectionContext<Z> {
|
|
1119
2028
|
selectedId: ComputedRef<ID | undefined>;
|
|
1120
2029
|
selectedIndex: ComputedRef<number>;
|
|
1121
2030
|
selectedItem: ComputedRef<Z | undefined>;
|
|
1122
|
-
selectedValue: ComputedRef<
|
|
2031
|
+
selectedValue: ComputedRef<Z['value'] | undefined>;
|
|
1123
2032
|
}
|
|
1124
2033
|
interface SingleOptions extends SelectionOptions {}
|
|
1125
2034
|
interface SingleContextOptions extends SelectionContextOptions {}
|
|
@@ -1177,7 +2086,6 @@ declare function createSingle<Z extends SingleTicket = SingleTicket, E extends S
|
|
|
1177
2086
|
/**
|
|
1178
2087
|
* Creates a new single selection context.
|
|
1179
2088
|
*
|
|
1180
|
-
* @param namespace The namespace for the single selection context.
|
|
1181
2089
|
* @param options The options for the single selection context.
|
|
1182
2090
|
* @template Z The type of the single selection ticket.
|
|
1183
2091
|
* @template E The type of the single selection context.
|
|
@@ -1189,17 +2097,18 @@ declare function createSingle<Z extends SingleTicket = SingleTicket, E extends S
|
|
|
1189
2097
|
* ```ts
|
|
1190
2098
|
* import { createSingleContext } from '@vuetify/v0'
|
|
1191
2099
|
*
|
|
1192
|
-
*
|
|
2100
|
+
* // With default namespace 'v0:single'
|
|
2101
|
+
* export const [useSingle, provideSingle, context] = createSingleContext()
|
|
1193
2102
|
*
|
|
1194
2103
|
* // In a parent component:
|
|
1195
|
-
*
|
|
2104
|
+
* provideSingle()
|
|
1196
2105
|
*
|
|
1197
2106
|
* // In a child component:
|
|
1198
|
-
* const
|
|
1199
|
-
*
|
|
2107
|
+
* const single = useSingle()
|
|
2108
|
+
* single.select('tab-1')
|
|
1200
2109
|
* ```
|
|
1201
2110
|
*/
|
|
1202
|
-
declare function createSingleContext<Z extends SingleTicket = SingleTicket, E extends SingleContext<Z> = SingleContext<Z>>(_options
|
|
2111
|
+
declare function createSingleContext<Z extends SingleTicket = SingleTicket, E extends SingleContext<Z> = SingleContext<Z>>(_options?: SingleContextOptions): ContextTrinity<E>;
|
|
1203
2112
|
/**
|
|
1204
2113
|
* Returns the current single selection instance.
|
|
1205
2114
|
*
|
|
@@ -1237,7 +2146,7 @@ interface LocaleAdapter {
|
|
|
1237
2146
|
*
|
|
1238
2147
|
* This adapter provides translation and number formatting
|
|
1239
2148
|
* capabilities using the Intl API and supports both
|
|
1240
|
-
* numbered and named variables in translation strings.
|
|
2149
|
+
* numbered ({0}, {1}) and named ({name}) variables in translation strings.
|
|
1241
2150
|
*/
|
|
1242
2151
|
declare class Vuetify0LocaleAdapter implements LocaleAdapter {
|
|
1243
2152
|
t(message: string, ...params: unknown[]): string;
|
|
@@ -1248,7 +2157,29 @@ declare class Vuetify0LocaleAdapter implements LocaleAdapter {
|
|
|
1248
2157
|
type LocaleRecord = TokenCollection;
|
|
1249
2158
|
type LocaleTicket = SingleTicket;
|
|
1250
2159
|
interface LocaleContext<Z extends LocaleTicket> extends SingleContext<Z> {
|
|
1251
|
-
|
|
2160
|
+
/**
|
|
2161
|
+
* Translate a message key with optional parameters and fallback.
|
|
2162
|
+
*
|
|
2163
|
+
* @param key - The message key to look up
|
|
2164
|
+
* @param params - Optional object with named parameters for interpolation
|
|
2165
|
+
* @param fallback - Optional fallback string if key not found in messages
|
|
2166
|
+
* @returns The translated and interpolated message
|
|
2167
|
+
*
|
|
2168
|
+
* @example
|
|
2169
|
+
* ```ts
|
|
2170
|
+
* // Simple key lookup
|
|
2171
|
+
* locale.t('hello') // Returns message for 'hello' or 'hello' if not found
|
|
2172
|
+
*
|
|
2173
|
+
* // With parameters
|
|
2174
|
+
* locale.t('greeting', { name: 'World' }) // 'Hello {name}' → 'Hello World'
|
|
2175
|
+
*
|
|
2176
|
+
* // With fallback (useful for dynamic keys)
|
|
2177
|
+
* locale.t('Pagination.goToPage', { page: 5 }, `Go to page 5`)
|
|
2178
|
+
* // If 'pagination.goToPage' exists: uses that message with {page} replaced
|
|
2179
|
+
* // If not found: returns 'Go to page 5'
|
|
2180
|
+
* ```
|
|
2181
|
+
*/
|
|
2182
|
+
t: (key: string, params?: Record<string, unknown>, fallback?: string) => string;
|
|
1252
2183
|
n: (value: number) => string;
|
|
1253
2184
|
}
|
|
1254
2185
|
interface LocaleOptions<Z extends LocaleRecord = LocaleRecord> extends SingleOptions {
|
|
@@ -1272,6 +2203,7 @@ interface LocalePluginOptions extends LocaleContextOptions {}
|
|
|
1272
2203
|
* @see https://0.vuetifyjs.com/composables/plugins/use-locale
|
|
1273
2204
|
*/
|
|
1274
2205
|
declare function createLocale<Z extends LocaleTicket = LocaleTicket, E extends LocaleContext<Z> = LocaleContext<Z>>(_options?: LocaleOptions): E;
|
|
2206
|
+
declare function createLocaleFallback<Z extends LocaleTicket = LocaleTicket, E extends LocaleContext<Z> = LocaleContext<Z>>(): E;
|
|
1275
2207
|
/**
|
|
1276
2208
|
* Creates a new locale context.
|
|
1277
2209
|
*
|
|
@@ -1530,65 +2462,340 @@ interface MutationObserverRecord {
|
|
|
1530
2462
|
attributeNamespace: string | null;
|
|
1531
2463
|
oldValue: string | null;
|
|
1532
2464
|
}
|
|
1533
|
-
interface UseMutationObserverOptions {
|
|
1534
|
-
immediate?: boolean;
|
|
1535
|
-
childList?: boolean;
|
|
1536
|
-
attributes?: boolean;
|
|
1537
|
-
characterData?: boolean;
|
|
1538
|
-
subtree?: boolean;
|
|
1539
|
-
attributeOldValue?: boolean;
|
|
1540
|
-
characterDataOldValue?: boolean;
|
|
1541
|
-
attributeFilter?: string[];
|
|
2465
|
+
interface UseMutationObserverOptions {
|
|
2466
|
+
immediate?: boolean;
|
|
2467
|
+
childList?: boolean;
|
|
2468
|
+
attributes?: boolean;
|
|
2469
|
+
characterData?: boolean;
|
|
2470
|
+
subtree?: boolean;
|
|
2471
|
+
attributeOldValue?: boolean;
|
|
2472
|
+
characterDataOldValue?: boolean;
|
|
2473
|
+
attributeFilter?: string[];
|
|
2474
|
+
}
|
|
2475
|
+
interface UseMutationObserverReturn {
|
|
2476
|
+
/**
|
|
2477
|
+
* Whether the observer is currently active (created and observing)
|
|
2478
|
+
*/
|
|
2479
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
2480
|
+
/**
|
|
2481
|
+
* Whether the observer is currently paused
|
|
2482
|
+
*/
|
|
2483
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
2484
|
+
/**
|
|
2485
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
2486
|
+
*/
|
|
2487
|
+
pause: () => void;
|
|
2488
|
+
/**
|
|
2489
|
+
* Resume observation
|
|
2490
|
+
*/
|
|
2491
|
+
resume: () => void;
|
|
2492
|
+
/**
|
|
2493
|
+
* Stop observation and clean up (destroys observer)
|
|
2494
|
+
*/
|
|
2495
|
+
stop: () => void;
|
|
2496
|
+
}
|
|
2497
|
+
/**
|
|
2498
|
+
* A composable that uses the Mutation Observer API to detect changes in the DOM.
|
|
2499
|
+
*
|
|
2500
|
+
* @param target The element to observe.
|
|
2501
|
+
* @param callback The callback to execute when a mutation is observed.
|
|
2502
|
+
* @param options The options for the Mutation Observer.
|
|
2503
|
+
* @returns An object with methods to control the observer.
|
|
2504
|
+
*
|
|
2505
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
|
2506
|
+
* @see https://0.vuetifyjs.com/composables/system/use-mutation-observer
|
|
2507
|
+
*
|
|
2508
|
+
* @example
|
|
2509
|
+
* ```ts
|
|
2510
|
+
* import { ref } from 'vue'
|
|
2511
|
+
* import { useMutationObserver } from '@vuetify/v0'
|
|
2512
|
+
*
|
|
2513
|
+
* const container = ref<HTMLElement>()
|
|
2514
|
+
*
|
|
2515
|
+
* const { pause, resume, isPaused } = useMutationObserver(
|
|
2516
|
+
* container,
|
|
2517
|
+
* (mutations) => {
|
|
2518
|
+
* mutations.forEach((mutation) => {
|
|
2519
|
+
* if (mutation.type === 'childList') {
|
|
2520
|
+
* console.log('Children changed:', mutation.addedNodes, mutation.removedNodes)
|
|
2521
|
+
* } else if (mutation.type === 'attributes') {
|
|
2522
|
+
* console.log('Attribute changed:', mutation.attributeName)
|
|
2523
|
+
* }
|
|
2524
|
+
* })
|
|
2525
|
+
* },
|
|
2526
|
+
* {
|
|
2527
|
+
* childList: true,
|
|
2528
|
+
* attributes: true,
|
|
2529
|
+
* subtree: true
|
|
2530
|
+
* }
|
|
2531
|
+
* )
|
|
2532
|
+
*
|
|
2533
|
+
* // Pause observation
|
|
2534
|
+
* pause()
|
|
2535
|
+
*
|
|
2536
|
+
* // Resume observation
|
|
2537
|
+
* resume()
|
|
2538
|
+
* ```
|
|
2539
|
+
*/
|
|
2540
|
+
declare function useMutationObserver(target: Ref<Element | undefined>, callback: (entries: MutationObserverRecord[]) => void, options?: UseMutationObserverOptions): UseMutationObserverReturn;
|
|
2541
|
+
//#endregion
|
|
2542
|
+
//#region src/composables/useOverflow/index.d.ts
|
|
2543
|
+
interface OverflowOptions {
|
|
2544
|
+
/**
|
|
2545
|
+
* Container element to track. Can be a ref, getter, or MaybeRefOrGetter.
|
|
2546
|
+
* When provided, useOverflow tracks this element's width automatically.
|
|
2547
|
+
*/
|
|
2548
|
+
container?: MaybeRefOrGetter<Element | undefined>;
|
|
2549
|
+
/** Gap between items in pixels */
|
|
2550
|
+
gap?: MaybeRefOrGetter<number>;
|
|
2551
|
+
/** Reserved space in pixels (for nav buttons, ellipsis, etc) */
|
|
2552
|
+
reserved?: MaybeRefOrGetter<number>;
|
|
2553
|
+
/**
|
|
2554
|
+
* Uniform item width in pixels. When provided, enables uniform mode
|
|
2555
|
+
* where capacity is calculated as available space / itemWidth.
|
|
2556
|
+
* Use this for same-width items like pagination buttons.
|
|
2557
|
+
*/
|
|
2558
|
+
itemWidth?: MaybeRefOrGetter<number>;
|
|
2559
|
+
/**
|
|
2560
|
+
* Calculate capacity from end instead of start.
|
|
2561
|
+
* Useful for breadcrumbs where trailing items take priority.
|
|
2562
|
+
* Only affects variable mode (uniform mode capacity is direction-independent).
|
|
2563
|
+
*/
|
|
2564
|
+
reverse?: MaybeRefOrGetter<boolean>;
|
|
2565
|
+
}
|
|
2566
|
+
interface OverflowContext {
|
|
2567
|
+
/** Container element ref */
|
|
2568
|
+
container: ShallowRef<Element | undefined>;
|
|
2569
|
+
/** Current container width */
|
|
2570
|
+
width: Readonly<ShallowRef<number>>;
|
|
2571
|
+
/** How many items fit in available space */
|
|
2572
|
+
capacity: ComputedRef<number>;
|
|
2573
|
+
/** Total width of all measured items */
|
|
2574
|
+
total: ComputedRef<number>;
|
|
2575
|
+
/** Whether items overflow the container */
|
|
2576
|
+
isOverflowing: Readonly<Ref<boolean>>;
|
|
2577
|
+
/** Register an item's element for width measurement */
|
|
2578
|
+
measure: (index: number, el: Element | undefined) => void;
|
|
2579
|
+
/** Clear all measurements */
|
|
2580
|
+
reset: () => void;
|
|
2581
|
+
}
|
|
2582
|
+
interface OverflowContextOptions extends OverflowOptions {
|
|
2583
|
+
/** Namespace for dependency injection */
|
|
2584
|
+
namespace?: string;
|
|
2585
|
+
}
|
|
2586
|
+
/**
|
|
2587
|
+
* Creates a new overflow context for computing how many items fit in a container.
|
|
2588
|
+
*
|
|
2589
|
+
* @param options Configuration options
|
|
2590
|
+
* @returns Overflow context with container ref, capacity, and measurement functions
|
|
2591
|
+
*
|
|
2592
|
+
* @example Variable-width mode (Breadcrumbs)
|
|
2593
|
+
* ```vue
|
|
2594
|
+
* <script lang="ts" setup>
|
|
2595
|
+
* import { useTemplateRef } from 'vue'
|
|
2596
|
+
* import { createOverflow } from '@vuetify/v0'
|
|
2597
|
+
*
|
|
2598
|
+
* const containerRef = useTemplateRef('container')
|
|
2599
|
+
* const overflow = createOverflow({
|
|
2600
|
+
* container: containerRef,
|
|
2601
|
+
* gap: 8,
|
|
2602
|
+
* reserved: 40,
|
|
2603
|
+
* })
|
|
2604
|
+
* </script>
|
|
2605
|
+
*
|
|
2606
|
+
* <template>
|
|
2607
|
+
* <div ref="container">
|
|
2608
|
+
* <span
|
|
2609
|
+
* v-for="(item, i) in items.slice(0, overflow.capacity.value)"
|
|
2610
|
+
* :key="i"
|
|
2611
|
+
* :ref="el => overflow.measure(i, el)"
|
|
2612
|
+
* >
|
|
2613
|
+
* {{ item }}
|
|
2614
|
+
* </span>
|
|
2615
|
+
* <span v-if="overflow.isOverflowing.value">...</span>
|
|
2616
|
+
* </div>
|
|
2617
|
+
* </template>
|
|
2618
|
+
* ```
|
|
2619
|
+
*
|
|
2620
|
+
* @example Uniform-width mode (Pagination)
|
|
2621
|
+
* ```ts
|
|
2622
|
+
* const overflow = createOverflow({
|
|
2623
|
+
* container: () => atom.value?.element,
|
|
2624
|
+
* itemWidth: buttonWidth,
|
|
2625
|
+
* reserved: () => buttonWidth.value * 4,
|
|
2626
|
+
* })
|
|
2627
|
+
* ```
|
|
2628
|
+
*/
|
|
2629
|
+
declare function createOverflow<E extends OverflowContext = OverflowContext>(options?: OverflowOptions): E;
|
|
2630
|
+
/**
|
|
2631
|
+
* Creates an overflow context with dependency injection support.
|
|
2632
|
+
*
|
|
2633
|
+
* @param options Configuration options including namespace
|
|
2634
|
+
* @returns Trinity tuple: [useContext, provideContext, defaultContext]
|
|
2635
|
+
*
|
|
2636
|
+
* @example
|
|
2637
|
+
* ```ts
|
|
2638
|
+
* // Create injectable context
|
|
2639
|
+
* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
|
|
2640
|
+
* namespace: 'my-overflow',
|
|
2641
|
+
* gap: 8,
|
|
2642
|
+
* reserved: 160,
|
|
2643
|
+
* })
|
|
2644
|
+
*
|
|
2645
|
+
* // In parent component
|
|
2646
|
+
* provideOverflow()
|
|
2647
|
+
*
|
|
2648
|
+
* // In child component
|
|
2649
|
+
* const overflow = useOverflow()
|
|
2650
|
+
* ```
|
|
2651
|
+
*/
|
|
2652
|
+
declare function createOverflowContext<E extends OverflowContext = OverflowContext>(_options?: OverflowContextOptions): ContextTrinity<E>;
|
|
2653
|
+
/**
|
|
2654
|
+
* Returns the current overflow context from dependency injection.
|
|
2655
|
+
*
|
|
2656
|
+
* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
|
|
2657
|
+
* @returns The current overflow context.
|
|
2658
|
+
*
|
|
2659
|
+
* @example
|
|
2660
|
+
* ```vue
|
|
2661
|
+
* <script lang="ts" setup>
|
|
2662
|
+
* import { useOverflow } from '@vuetify/v0'
|
|
2663
|
+
*
|
|
2664
|
+
* // Inject overflow context provided by parent
|
|
2665
|
+
* const overflow = useOverflow()
|
|
2666
|
+
* </script>
|
|
2667
|
+
*
|
|
2668
|
+
* <template>
|
|
2669
|
+
* <div>
|
|
2670
|
+
* <p>Capacity: {{ overflow.capacity.value }}</p>
|
|
2671
|
+
* </div>
|
|
2672
|
+
* </template>
|
|
2673
|
+
* ```
|
|
2674
|
+
*/
|
|
2675
|
+
declare function useOverflow<E extends OverflowContext = OverflowContext>(namespace?: string): E;
|
|
2676
|
+
//#endregion
|
|
2677
|
+
//#region src/composables/usePagination/index.d.ts
|
|
2678
|
+
interface PaginationItem {
|
|
2679
|
+
type: 'page' | 'ellipsis';
|
|
2680
|
+
value: number | string;
|
|
2681
|
+
}
|
|
2682
|
+
interface PaginationContext<Z extends PaginationItem = PaginationItem> {
|
|
2683
|
+
/** Current page (1-indexed) */
|
|
2684
|
+
page: ShallowRef<number>;
|
|
2685
|
+
/** Items per page */
|
|
2686
|
+
itemsPerPage: number;
|
|
2687
|
+
/** Total number of items */
|
|
2688
|
+
size: number;
|
|
2689
|
+
/** Total number of pages (computed from size / itemsPerPage) */
|
|
2690
|
+
pages: number;
|
|
2691
|
+
/** Ellipsis character, or false if disabled */
|
|
2692
|
+
ellipsis: string | false;
|
|
2693
|
+
/** Visible page numbers and ellipsis for rendering */
|
|
2694
|
+
items: ComputedRef<Z[]>;
|
|
2695
|
+
/** Start index of items on current page (0-indexed) */
|
|
2696
|
+
pageStart: ComputedRef<number>;
|
|
2697
|
+
/** End index of items on current page (exclusive, 0-indexed) */
|
|
2698
|
+
pageStop: ComputedRef<number>;
|
|
2699
|
+
/** Whether current page is the first page */
|
|
2700
|
+
isFirst: ComputedRef<boolean>;
|
|
2701
|
+
/** Whether current page is the last page */
|
|
2702
|
+
isLast: ComputedRef<boolean>;
|
|
2703
|
+
/** Go to first page */
|
|
2704
|
+
first: () => void;
|
|
2705
|
+
/** Go to last page */
|
|
2706
|
+
last: () => void;
|
|
2707
|
+
/** Go to next page */
|
|
2708
|
+
next: () => void;
|
|
2709
|
+
/** Go to previous page */
|
|
2710
|
+
prev: () => void;
|
|
2711
|
+
/** Go to specific page */
|
|
2712
|
+
select: (value: number) => void;
|
|
2713
|
+
}
|
|
2714
|
+
interface PaginationOptions {
|
|
2715
|
+
/** Initial page or ref for v-model (1-indexed). @default 1 */
|
|
2716
|
+
page?: number | ShallowRef<number>;
|
|
2717
|
+
/** Items per page. @default 10 */
|
|
2718
|
+
itemsPerPage?: MaybeRefOrGetter<number>;
|
|
2719
|
+
/** Total number of items. @default 0 */
|
|
2720
|
+
size?: MaybeRefOrGetter<number>;
|
|
2721
|
+
/** Maximum visible page buttons. @default 5 */
|
|
2722
|
+
visible?: MaybeRefOrGetter<number>;
|
|
2723
|
+
/** Ellipsis character. @default '…' */
|
|
2724
|
+
ellipsis?: string | false;
|
|
2725
|
+
}
|
|
2726
|
+
interface PaginationContextOptions extends PaginationOptions {
|
|
2727
|
+
/** Namespace for dependency injection */
|
|
2728
|
+
namespace?: string;
|
|
1542
2729
|
}
|
|
1543
2730
|
/**
|
|
1544
|
-
*
|
|
2731
|
+
* Creates a pagination instance.
|
|
1545
2732
|
*
|
|
1546
|
-
* @param
|
|
1547
|
-
* @
|
|
1548
|
-
* @param options The options for the Mutation Observer.
|
|
1549
|
-
* @returns An object with methods to control the observer.
|
|
2733
|
+
* @param options The options for the pagination instance.
|
|
2734
|
+
* @returns A pagination context with navigation methods.
|
|
1550
2735
|
*
|
|
1551
|
-
* @
|
|
1552
|
-
*
|
|
2736
|
+
* @example
|
|
2737
|
+
* ```ts
|
|
2738
|
+
* import { createPagination } from '@vuetify/v0'
|
|
2739
|
+
*
|
|
2740
|
+
* // Basic usage
|
|
2741
|
+
* const pagination = createPagination({ size: 100 })
|
|
2742
|
+
* pagination.next()
|
|
2743
|
+
* pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
|
|
2744
|
+
*
|
|
2745
|
+
* // With v-model (pass a ref)
|
|
2746
|
+
* const page = ref(1)
|
|
2747
|
+
* const pagination = createPagination({ page, size: 100 })
|
|
2748
|
+
* // Mutating pagination.page or the passed ref syncs both
|
|
2749
|
+
* ```
|
|
2750
|
+
*/
|
|
2751
|
+
declare function createPagination<Z extends PaginationItem = PaginationItem, E extends PaginationContext<Z> = PaginationContext<Z>>(_options?: PaginationOptions): E;
|
|
2752
|
+
/**
|
|
2753
|
+
* Creates a pagination context for dependency injection.
|
|
2754
|
+
*
|
|
2755
|
+
* @param options The options including namespace.
|
|
2756
|
+
* @returns A trinity: [usePagination, providePagination, defaultContext]
|
|
1553
2757
|
*
|
|
1554
2758
|
* @example
|
|
1555
2759
|
* ```ts
|
|
1556
|
-
*
|
|
1557
|
-
*
|
|
2760
|
+
* // With default namespace 'v0:pagination'
|
|
2761
|
+
* const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
|
|
1558
2762
|
*
|
|
1559
|
-
*
|
|
2763
|
+
* // Or with custom namespace
|
|
2764
|
+
* const [usePagination, providePaginationContext] = createPaginationContext({
|
|
2765
|
+
* namespace: 'my-pagination',
|
|
2766
|
+
* size: 50,
|
|
2767
|
+
* })
|
|
1560
2768
|
*
|
|
1561
|
-
*
|
|
1562
|
-
*
|
|
1563
|
-
* (mutations) => {
|
|
1564
|
-
* mutations.forEach((mutation) => {
|
|
1565
|
-
* if (mutation.type === 'childList') {
|
|
1566
|
-
* console.log('Children changed:', mutation.addedNodes, mutation.removedNodes)
|
|
1567
|
-
* } else if (mutation.type === 'attributes') {
|
|
1568
|
-
* console.log('Attribute changed:', mutation.attributeName)
|
|
1569
|
-
* }
|
|
1570
|
-
* })
|
|
1571
|
-
* },
|
|
1572
|
-
* {
|
|
1573
|
-
* childList: true,
|
|
1574
|
-
* attributes: true,
|
|
1575
|
-
* subtree: true
|
|
1576
|
-
* }
|
|
1577
|
-
* )
|
|
2769
|
+
* // Parent component
|
|
2770
|
+
* providePaginationContext()
|
|
1578
2771
|
*
|
|
1579
|
-
* //
|
|
1580
|
-
*
|
|
2772
|
+
* // Child component
|
|
2773
|
+
* const pagination = usePagination()
|
|
2774
|
+
* pagination.next()
|
|
2775
|
+
* ```
|
|
2776
|
+
*/
|
|
2777
|
+
declare function createPaginationContext<Z extends PaginationItem = PaginationItem, E extends PaginationContext<Z> = PaginationContext<Z>>(_options?: PaginationContextOptions): ContextTrinity<E>;
|
|
2778
|
+
/**
|
|
2779
|
+
* Returns the current pagination instance from context.
|
|
1581
2780
|
*
|
|
1582
|
-
*
|
|
1583
|
-
*
|
|
2781
|
+
* @param namespace The namespace. @default 'v0:pagination'
|
|
2782
|
+
* @returns The pagination context.
|
|
2783
|
+
*
|
|
2784
|
+
* @example
|
|
2785
|
+
* ```vue
|
|
2786
|
+
* <script setup>
|
|
2787
|
+
* import { usePagination } from '@vuetify/v0'
|
|
2788
|
+
*
|
|
2789
|
+
* const pagination = usePagination()
|
|
2790
|
+
* </script>
|
|
2791
|
+
*
|
|
2792
|
+
* <template>
|
|
2793
|
+
* <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
|
|
2794
|
+
* <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
|
|
2795
|
+
* </template>
|
|
1584
2796
|
* ```
|
|
1585
2797
|
*/
|
|
1586
|
-
declare function
|
|
1587
|
-
isPaused: Readonly<Ref<boolean, boolean>>;
|
|
1588
|
-
pause: () => void;
|
|
1589
|
-
resume: () => void;
|
|
1590
|
-
stop: () => void;
|
|
1591
|
-
};
|
|
2798
|
+
declare function usePagination<Z extends PaginationItem = PaginationItem, E extends PaginationContext<Z> = PaginationContext<Z>>(namespace?: string): E;
|
|
1592
2799
|
//#endregion
|
|
1593
2800
|
//#region src/composables/usePermissions/adapters/adapter.d.ts
|
|
1594
2801
|
interface PermissionAdapterInterface {
|
|
@@ -1599,9 +2806,7 @@ declare abstract class PermissionAdapter implements PermissionAdapterInterface {
|
|
|
1599
2806
|
}
|
|
1600
2807
|
//#endregion
|
|
1601
2808
|
//#region src/composables/usePermissions/index.d.ts
|
|
1602
|
-
interface PermissionTicket extends TokenTicket {
|
|
1603
|
-
value: boolean | ((context: Record<string, any>) => boolean);
|
|
1604
|
-
}
|
|
2809
|
+
interface PermissionTicket extends TokenTicket<boolean | ((context: Record<string, any>) => boolean)> {}
|
|
1605
2810
|
interface PermissionContext<Z extends PermissionTicket = PermissionTicket> extends TokenContext<Z> {
|
|
1606
2811
|
can: (id: ID, action: string, subject: string, context?: Record<string, any>) => boolean;
|
|
1607
2812
|
}
|
|
@@ -1784,7 +2989,7 @@ interface ProxyRegistryContext<Z extends RegistryTicket = RegistryTicket> {
|
|
|
1784
2989
|
declare function useProxyRegistry<Z extends RegistryTicket = RegistryTicket>(registry: RegistryContext<Z>, options?: ProxyRegistryOptions): ProxyRegistryContext<Z>;
|
|
1785
2990
|
//#endregion
|
|
1786
2991
|
//#region src/composables/useQueue/index.d.ts
|
|
1787
|
-
interface QueueTicket extends RegistryTicket {
|
|
2992
|
+
interface QueueTicket<V = unknown> extends RegistryTicket<V> {
|
|
1788
2993
|
/**
|
|
1789
2994
|
* Timeout in milliseconds
|
|
1790
2995
|
*
|
|
@@ -2076,6 +3281,28 @@ interface ResizeObserverOptions {
|
|
|
2076
3281
|
immediate?: boolean;
|
|
2077
3282
|
box?: 'content-box' | 'border-box';
|
|
2078
3283
|
}
|
|
3284
|
+
interface UseResizeObserverReturn {
|
|
3285
|
+
/**
|
|
3286
|
+
* Whether the observer is currently active (created and observing)
|
|
3287
|
+
*/
|
|
3288
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
3289
|
+
/**
|
|
3290
|
+
* Whether the observer is currently paused
|
|
3291
|
+
*/
|
|
3292
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
3293
|
+
/**
|
|
3294
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
3295
|
+
*/
|
|
3296
|
+
pause: () => void;
|
|
3297
|
+
/**
|
|
3298
|
+
* Resume observation
|
|
3299
|
+
*/
|
|
3300
|
+
resume: () => void;
|
|
3301
|
+
/**
|
|
3302
|
+
* Stop observation and clean up (destroys observer)
|
|
3303
|
+
*/
|
|
3304
|
+
stop: () => void;
|
|
3305
|
+
}
|
|
2079
3306
|
/**
|
|
2080
3307
|
* A composable that uses the Resize Observer API to detect when an element's
|
|
2081
3308
|
* size changes.
|
|
@@ -2117,12 +3344,17 @@ interface ResizeObserverOptions {
|
|
|
2117
3344
|
* resume()
|
|
2118
3345
|
* ```
|
|
2119
3346
|
*/
|
|
2120
|
-
declare function useResizeObserver(target: Ref<Element | undefined>, callback: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions):
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
3347
|
+
declare function useResizeObserver(target: Ref<Element | undefined>, callback: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions): UseResizeObserverReturn;
|
|
3348
|
+
interface UseElementSizeReturn extends UseResizeObserverReturn {
|
|
3349
|
+
/**
|
|
3350
|
+
* The width of the element in pixels
|
|
3351
|
+
*/
|
|
3352
|
+
width: Ref<number>;
|
|
3353
|
+
/**
|
|
3354
|
+
* The height of the element in pixels
|
|
3355
|
+
*/
|
|
3356
|
+
height: Ref<number>;
|
|
3357
|
+
}
|
|
2126
3358
|
/**
|
|
2127
3359
|
* A convenience composable that uses the Resize Observer API to track an
|
|
2128
3360
|
* element's size.
|
|
@@ -2146,17 +3378,10 @@ declare function useResizeObserver(target: Ref<Element | undefined>, callback: (
|
|
|
2146
3378
|
* })
|
|
2147
3379
|
* ```
|
|
2148
3380
|
*/
|
|
2149
|
-
declare function useElementSize(target: Ref<Element | undefined>):
|
|
2150
|
-
width: vue231.ShallowRef<number, number>;
|
|
2151
|
-
height: vue231.ShallowRef<number, number>;
|
|
2152
|
-
isPaused: Readonly<Ref<boolean, boolean>>;
|
|
2153
|
-
pause: () => void;
|
|
2154
|
-
resume: () => void;
|
|
2155
|
-
stop: () => void;
|
|
2156
|
-
};
|
|
3381
|
+
declare function useElementSize(target: Ref<Element | undefined>): UseElementSizeReturn;
|
|
2157
3382
|
//#endregion
|
|
2158
3383
|
//#region src/composables/useStep/index.d.ts
|
|
2159
|
-
interface StepTicket extends SingleTicket {}
|
|
3384
|
+
interface StepTicket<V = unknown> extends SingleTicket<V> {}
|
|
2160
3385
|
interface StepContext<Z extends StepTicket> extends SingleContext<Z> {
|
|
2161
3386
|
/** Select the first Ticket in the collection */
|
|
2162
3387
|
first: () => void;
|
|
@@ -2259,7 +3484,6 @@ declare function createStep<Z extends StepTicket = StepTicket, E extends StepCon
|
|
|
2259
3484
|
/**
|
|
2260
3485
|
* Creates a new step context.
|
|
2261
3486
|
*
|
|
2262
|
-
* @param namespace The namespace for the step context.
|
|
2263
3487
|
* @param options The options for the step context.
|
|
2264
3488
|
* @template Z The type of the step ticket.
|
|
2265
3489
|
* @template E The type of the step context.
|
|
@@ -2271,17 +3495,18 @@ declare function createStep<Z extends StepTicket = StepTicket, E extends StepCon
|
|
|
2271
3495
|
* ```ts
|
|
2272
3496
|
* import { createStepContext } from '@vuetify/v0'
|
|
2273
3497
|
*
|
|
2274
|
-
*
|
|
3498
|
+
* // With default namespace 'v0:step'
|
|
3499
|
+
* export const [useStep, provideStep, context] = createStepContext()
|
|
2275
3500
|
*
|
|
2276
3501
|
* // In a parent component:
|
|
2277
|
-
*
|
|
3502
|
+
* provideStep()
|
|
2278
3503
|
*
|
|
2279
3504
|
* // In a child component:
|
|
2280
|
-
* const
|
|
2281
|
-
*
|
|
3505
|
+
* const context = useStep()
|
|
3506
|
+
* context.next() // Progress to next step
|
|
2282
3507
|
* ```
|
|
2283
3508
|
*/
|
|
2284
|
-
declare function createStepContext<Z extends StepTicket = StepTicket, E extends StepContext<Z> = StepContext<Z>>(_options
|
|
3509
|
+
declare function createStepContext<Z extends StepTicket = StepTicket, E extends StepContext<Z> = StepContext<Z>>(_options?: StepContextOptions): ContextTrinity<E>;
|
|
2285
3510
|
/**
|
|
2286
3511
|
* Returns the current step instance.
|
|
2287
3512
|
*
|
|
@@ -2362,8 +3587,8 @@ interface StorageOptions {
|
|
|
2362
3587
|
prefix?: string;
|
|
2363
3588
|
/** Custom serializer for reading and writing values. Defaults to JSON.parse/stringify */
|
|
2364
3589
|
serializer?: {
|
|
2365
|
-
read: (value: string) =>
|
|
2366
|
-
write: (value:
|
|
3590
|
+
read: (value: string) => unknown;
|
|
3591
|
+
write: (value: unknown) => string;
|
|
2367
3592
|
};
|
|
2368
3593
|
}
|
|
2369
3594
|
interface StorageContextOptions extends StorageOptions {
|
|
@@ -2371,7 +3596,6 @@ interface StorageContextOptions extends StorageOptions {
|
|
|
2371
3596
|
namespace?: string;
|
|
2372
3597
|
}
|
|
2373
3598
|
interface StoragePluginOptions extends StorageContextOptions {}
|
|
2374
|
-
declare const useStorageContext: (key?: ContextKey<StorageContext>) => StorageContext, provideStorageContext: (context: StorageContext, app?: App) => StorageContext;
|
|
2375
3599
|
/**
|
|
2376
3600
|
* Creates a new storage instance.
|
|
2377
3601
|
*
|
|
@@ -2492,12 +3716,11 @@ type ThemeColors = {
|
|
|
2492
3716
|
[key: string]: Colors | string;
|
|
2493
3717
|
};
|
|
2494
3718
|
type ThemeRecord = {
|
|
2495
|
-
[key: string]: any;
|
|
2496
3719
|
dark?: boolean;
|
|
2497
3720
|
lazy?: boolean;
|
|
2498
3721
|
colors: ThemeColors;
|
|
2499
3722
|
};
|
|
2500
|
-
interface ThemeTicket extends SingleTicket {
|
|
3723
|
+
interface ThemeTicket extends SingleTicket<ThemeColors> {
|
|
2501
3724
|
/**
|
|
2502
3725
|
* Indicates whether the theme is dark or light.
|
|
2503
3726
|
*
|
|
@@ -2783,7 +4006,7 @@ interface TimelineContext<Z extends TimelineTicket> extends RegistryContext<Z> {
|
|
|
2783
4006
|
*/
|
|
2784
4007
|
redo: () => Z | undefined;
|
|
2785
4008
|
}
|
|
2786
|
-
interface TimelineTicket extends RegistryTicket {}
|
|
4009
|
+
interface TimelineTicket<V = unknown> extends RegistryTicket<V> {}
|
|
2787
4010
|
interface TimelineOptions extends RegistryOptions {
|
|
2788
4011
|
/**
|
|
2789
4012
|
* The maximum size of the timeline.
|
|
@@ -2793,7 +4016,7 @@ interface TimelineOptions extends RegistryOptions {
|
|
|
2793
4016
|
size?: number;
|
|
2794
4017
|
}
|
|
2795
4018
|
interface TimelineContextOptions extends TimelineOptions {
|
|
2796
|
-
namespace
|
|
4019
|
+
namespace?: string;
|
|
2797
4020
|
}
|
|
2798
4021
|
/**
|
|
2799
4022
|
* Creates a new timeline instance.
|
|
@@ -2824,13 +4047,12 @@ interface TimelineContextOptions extends TimelineOptions {
|
|
|
2824
4047
|
*/
|
|
2825
4048
|
declare function createTimeline<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(_options?: TimelineOptions): E;
|
|
2826
4049
|
/**
|
|
2827
|
-
* Creates a new timeline
|
|
4050
|
+
* Creates a new timeline context.
|
|
2828
4051
|
*
|
|
2829
|
-
* @param
|
|
2830
|
-
* @param options The options for the timeline plugin.
|
|
4052
|
+
* @param options The options for the timeline context.
|
|
2831
4053
|
* @template Z The type of the timeline ticket.
|
|
2832
4054
|
* @template E The type of the timeline context.
|
|
2833
|
-
* @returns A new timeline
|
|
4055
|
+
* @returns A new timeline context.
|
|
2834
4056
|
*
|
|
2835
4057
|
* @see https://0.vuetifyjs.com/composables/registration/use-timeline
|
|
2836
4058
|
*
|
|
@@ -2838,7 +4060,9 @@ declare function createTimeline<Z extends TimelineTicket = TimelineTicket, E ext
|
|
|
2838
4060
|
* ```ts
|
|
2839
4061
|
* import { createTimelineContext } from '@vuetify/v0'
|
|
2840
4062
|
*
|
|
2841
|
-
*
|
|
4063
|
+
* // With default namespace 'v0:timeline'
|
|
4064
|
+
* export const [useTimeline, provideTimeline, context] = createTimelineContext({ size: 5 })
|
|
4065
|
+
*
|
|
2842
4066
|
* context.register({ id: 'example' })
|
|
2843
4067
|
*
|
|
2844
4068
|
* // In a parent component
|
|
@@ -2850,7 +4074,7 @@ declare function createTimeline<Z extends TimelineTicket = TimelineTicket, E ext
|
|
|
2850
4074
|
* console.log(timeline.values()) // [{ id: 'example' }]
|
|
2851
4075
|
* ```
|
|
2852
4076
|
*/
|
|
2853
|
-
declare function createTimelineContext<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(_options
|
|
4077
|
+
declare function createTimelineContext<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(_options?: TimelineContextOptions): ContextTrinity<E>;
|
|
2854
4078
|
/**
|
|
2855
4079
|
* Returns the current timeline instance.
|
|
2856
4080
|
*
|
|
@@ -2870,4 +4094,372 @@ declare function createTimelineContext<Z extends TimelineTicket = TimelineTicket
|
|
|
2870
4094
|
*/
|
|
2871
4095
|
declare function useTimeline<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(namespace?: string): E;
|
|
2872
4096
|
//#endregion
|
|
2873
|
-
|
|
4097
|
+
//#region src/composables/useToggleScope/index.d.ts
|
|
4098
|
+
interface ToggleScopeControls {
|
|
4099
|
+
/**
|
|
4100
|
+
* Whether the scope is currently active (created and running)
|
|
4101
|
+
*/
|
|
4102
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
4103
|
+
/**
|
|
4104
|
+
* Stop the scope (destroys and cleans up all effects)
|
|
4105
|
+
*/
|
|
4106
|
+
stop: () => void;
|
|
4107
|
+
/**
|
|
4108
|
+
* Start the scope (creates and runs effects)
|
|
4109
|
+
*/
|
|
4110
|
+
start: () => void;
|
|
4111
|
+
/**
|
|
4112
|
+
* Reset the scope (stops and immediately restarts)
|
|
4113
|
+
*/
|
|
4114
|
+
reset: () => void;
|
|
4115
|
+
}
|
|
4116
|
+
/**
|
|
4117
|
+
* Conditionally manages an effect scope based on a reactive boolean source.
|
|
4118
|
+
*
|
|
4119
|
+
* @param source A reactive boolean value or getter that controls the scope lifecycle
|
|
4120
|
+
* @param fn The function to run within the effect scope. Can optionally receive controls for manual scope management.
|
|
4121
|
+
* @returns Controls object with isActive state and start/stop/reset methods
|
|
4122
|
+
*
|
|
4123
|
+
* @see https://vuejs.org/api/reactivity-advanced.html#effectscope
|
|
4124
|
+
* @see https://0.vuetifyjs.com/composables/system/use-toggle-scope
|
|
4125
|
+
*
|
|
4126
|
+
* @example
|
|
4127
|
+
* ```ts
|
|
4128
|
+
* import { ref } from 'vue'
|
|
4129
|
+
* import { useToggleScope } from '@vuetify/v0'
|
|
4130
|
+
*
|
|
4131
|
+
* const isEnabled = ref(false)
|
|
4132
|
+
*
|
|
4133
|
+
* const { isActive } = useToggleScope(isEnabled, () => {
|
|
4134
|
+
* // This code runs when isEnabled becomes true
|
|
4135
|
+
* const unwatch = watch(someRef, () => {
|
|
4136
|
+
* console.log('Watching...')
|
|
4137
|
+
* })
|
|
4138
|
+
*
|
|
4139
|
+
* // Cleanup happens automatically when isEnabled becomes false
|
|
4140
|
+
* })
|
|
4141
|
+
*
|
|
4142
|
+
* // Toggle the scope on/off
|
|
4143
|
+
* isEnabled.value = true // Starts the scope
|
|
4144
|
+
* console.log(isActive.value) // true
|
|
4145
|
+
* isEnabled.value = false // Stops and cleans up
|
|
4146
|
+
* console.log(isActive.value) // false
|
|
4147
|
+
* ```
|
|
4148
|
+
*
|
|
4149
|
+
* @example
|
|
4150
|
+
* With manual controls:
|
|
4151
|
+
* ```ts
|
|
4152
|
+
* const isEnabled = ref(true)
|
|
4153
|
+
*
|
|
4154
|
+
* useToggleScope(isEnabled, (controls) => {
|
|
4155
|
+
* // Access controls inside the scope
|
|
4156
|
+
* console.log('Active:', controls.isActive.value)
|
|
4157
|
+
*
|
|
4158
|
+
* // Manually reset the scope if needed
|
|
4159
|
+
* someEvent.on('reset', () => controls.reset())
|
|
4160
|
+
* })
|
|
4161
|
+
* ```
|
|
4162
|
+
*/
|
|
4163
|
+
declare function useToggleScope(source: WatchSource<boolean>, fn: (() => void) | ((controls: ToggleScopeControls) => void)): ToggleScopeControls;
|
|
4164
|
+
//#endregion
|
|
4165
|
+
//#region src/composables/useVirtual/index.d.ts
|
|
4166
|
+
type VirtualDirection = 'forward' | 'reverse';
|
|
4167
|
+
type VirtualState = 'loading' | 'empty' | 'error' | 'ok';
|
|
4168
|
+
type VirtualAnchor = 'auto' | 'start' | 'end' | ((items: readonly unknown[]) => number | string);
|
|
4169
|
+
interface ScrollToOptions {
|
|
4170
|
+
/**
|
|
4171
|
+
* The behavior of the scroll animation.
|
|
4172
|
+
*/
|
|
4173
|
+
behavior?: 'auto' | 'smooth' | 'instant';
|
|
4174
|
+
/**
|
|
4175
|
+
* The alignment of the scroll position.
|
|
4176
|
+
*/
|
|
4177
|
+
block?: 'start' | 'center' | 'end' | 'nearest';
|
|
4178
|
+
/**
|
|
4179
|
+
* The offset of the scroll position.
|
|
4180
|
+
*/
|
|
4181
|
+
offset?: number;
|
|
4182
|
+
}
|
|
4183
|
+
interface VirtualOptions {
|
|
4184
|
+
/**
|
|
4185
|
+
* The height of the item.
|
|
4186
|
+
*/
|
|
4187
|
+
itemHeight?: number | string | null;
|
|
4188
|
+
/**
|
|
4189
|
+
* The height of the container.
|
|
4190
|
+
*/
|
|
4191
|
+
height?: number | string;
|
|
4192
|
+
/**
|
|
4193
|
+
* The number of extra items to render.
|
|
4194
|
+
*/
|
|
4195
|
+
overscan?: number;
|
|
4196
|
+
/**
|
|
4197
|
+
* The direction of the scrolling.
|
|
4198
|
+
*/
|
|
4199
|
+
direction?: VirtualDirection;
|
|
4200
|
+
/**
|
|
4201
|
+
* The anchor of the scrolling.
|
|
4202
|
+
*/
|
|
4203
|
+
anchor?: VirtualAnchor;
|
|
4204
|
+
/**
|
|
4205
|
+
* Whether to smooth the anchor position.
|
|
4206
|
+
*/
|
|
4207
|
+
anchorSmooth?: boolean;
|
|
4208
|
+
/**
|
|
4209
|
+
* The callback to call when the start is reached.
|
|
4210
|
+
*/
|
|
4211
|
+
onStartReached?: (distance: number) => void | Promise<void>;
|
|
4212
|
+
/**
|
|
4213
|
+
* The callback to call when the end is reached.
|
|
4214
|
+
*/
|
|
4215
|
+
onEndReached?: (distance: number) => void | Promise<void>;
|
|
4216
|
+
/**
|
|
4217
|
+
* The threshold for the start.
|
|
4218
|
+
*/
|
|
4219
|
+
startThreshold?: number;
|
|
4220
|
+
/**
|
|
4221
|
+
* The threshold for the end.
|
|
4222
|
+
*/
|
|
4223
|
+
endThreshold?: number;
|
|
4224
|
+
/**
|
|
4225
|
+
* Whether to enable momentum scrolling.
|
|
4226
|
+
*/
|
|
4227
|
+
momentum?: boolean;
|
|
4228
|
+
/**
|
|
4229
|
+
* Whether to enable elastic scrolling.
|
|
4230
|
+
*/
|
|
4231
|
+
elastic?: boolean;
|
|
4232
|
+
}
|
|
4233
|
+
interface VirtualItem<T = unknown> {
|
|
4234
|
+
raw: T;
|
|
4235
|
+
index: number;
|
|
4236
|
+
}
|
|
4237
|
+
interface VirtualContext<T = unknown> {
|
|
4238
|
+
/**
|
|
4239
|
+
* The element that is being virtualized.
|
|
4240
|
+
*
|
|
4241
|
+
* @example
|
|
4242
|
+
* ```vue
|
|
4243
|
+
* <script setup lang="ts">
|
|
4244
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4245
|
+
*
|
|
4246
|
+
* const { element } = useVirtual(items)
|
|
4247
|
+
* </script>
|
|
4248
|
+
*
|
|
4249
|
+
* <template>
|
|
4250
|
+
* <div ref="element">
|
|
4251
|
+
* <div v-for="item in items" :key="item.index">
|
|
4252
|
+
* {{ item.raw }}
|
|
4253
|
+
* </div>
|
|
4254
|
+
* </div>
|
|
4255
|
+
* </template>
|
|
4256
|
+
*/
|
|
4257
|
+
element: Ref<HTMLElement | undefined>;
|
|
4258
|
+
/**
|
|
4259
|
+
* The items that are being virtualized.
|
|
4260
|
+
*
|
|
4261
|
+
* @example
|
|
4262
|
+
* ```vue
|
|
4263
|
+
* <script setup lang="ts">
|
|
4264
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4265
|
+
*
|
|
4266
|
+
* const { items } = useVirtual(items)
|
|
4267
|
+
* </script>
|
|
4268
|
+
*
|
|
4269
|
+
* <template>
|
|
4270
|
+
* <div v-for="item in items" :key="item.index">
|
|
4271
|
+
* {{ item.raw }}
|
|
4272
|
+
* </div>
|
|
4273
|
+
* </template>
|
|
4274
|
+
* ```
|
|
4275
|
+
*/
|
|
4276
|
+
items: ComputedRef<VirtualItem<T>[]>;
|
|
4277
|
+
/**
|
|
4278
|
+
* The offset of the virtualized items.
|
|
4279
|
+
*
|
|
4280
|
+
* @example
|
|
4281
|
+
* ```vue
|
|
4282
|
+
* <script setup lang="ts">
|
|
4283
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4284
|
+
*
|
|
4285
|
+
* const { offset } = useVirtual(items)
|
|
4286
|
+
* </script>
|
|
4287
|
+
*
|
|
4288
|
+
* <template>
|
|
4289
|
+
* <div :style="{ height: `${offset}px` }" />
|
|
4290
|
+
* </template>
|
|
4291
|
+
* ```
|
|
4292
|
+
*/
|
|
4293
|
+
offset: Readonly<ShallowRef<number>>;
|
|
4294
|
+
/**
|
|
4295
|
+
* The size of the virtualized items.
|
|
4296
|
+
*
|
|
4297
|
+
* @example
|
|
4298
|
+
* ```vue
|
|
4299
|
+
* <script setup lang="ts">
|
|
4300
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4301
|
+
*
|
|
4302
|
+
* const { size } = useVirtual(items)
|
|
4303
|
+
* </script>
|
|
4304
|
+
*
|
|
4305
|
+
* <template>
|
|
4306
|
+
* <div :style="{ height: `${size}px` }" />
|
|
4307
|
+
* </template>
|
|
4308
|
+
* ```
|
|
4309
|
+
*/
|
|
4310
|
+
size: Readonly<ShallowRef<number>>;
|
|
4311
|
+
/**
|
|
4312
|
+
* The state of the virtualized items.
|
|
4313
|
+
*
|
|
4314
|
+
* @example
|
|
4315
|
+
* ```vue
|
|
4316
|
+
* <script setup lang="ts">
|
|
4317
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4318
|
+
*
|
|
4319
|
+
* const { state } = useVirtual(items)
|
|
4320
|
+
* </script>
|
|
4321
|
+
*
|
|
4322
|
+
* <template>
|
|
4323
|
+
* <div v-if="state === 'loading'">Loading...</div>
|
|
4324
|
+
* <div v-else-if="state === 'empty'">No items</div>
|
|
4325
|
+
* <div v-else-if="state === 'error'">Error</div>
|
|
4326
|
+
* <div v-else>Items</div>
|
|
4327
|
+
* </template>
|
|
4328
|
+
* ```
|
|
4329
|
+
*/
|
|
4330
|
+
state: ShallowRef<VirtualState>;
|
|
4331
|
+
/**
|
|
4332
|
+
* Scroll to an item by index.
|
|
4333
|
+
*
|
|
4334
|
+
* @example
|
|
4335
|
+
* ```vue
|
|
4336
|
+
* <script setup lang="ts">
|
|
4337
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4338
|
+
*
|
|
4339
|
+
* const { scrollTo } = useVirtual(items)
|
|
4340
|
+
* </script>
|
|
4341
|
+
*
|
|
4342
|
+
* <template>
|
|
4343
|
+
* <button @click="scrollTo(0)">Scroll to top</button>
|
|
4344
|
+
* <button @click="scrollTo(items.length - 1)">Scroll to bottom</button>
|
|
4345
|
+
* </template>
|
|
4346
|
+
* ```
|
|
4347
|
+
*/
|
|
4348
|
+
scrollTo: (index: number, options?: ScrollToOptions) => void;
|
|
4349
|
+
/**
|
|
4350
|
+
* The scroll event handler.
|
|
4351
|
+
*
|
|
4352
|
+
* @example
|
|
4353
|
+
* ```vue
|
|
4354
|
+
* <script setup lang="ts">
|
|
4355
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4356
|
+
*
|
|
4357
|
+
* const { element, scroll } = useVirtual(items)
|
|
4358
|
+
* </script>
|
|
4359
|
+
*
|
|
4360
|
+
* <template>
|
|
4361
|
+
* <div ref="element" @scroll="scroll">
|
|
4362
|
+
* <div v-for="item in items" :key="item.index">
|
|
4363
|
+
* {{ item.raw }}
|
|
4364
|
+
* </div>
|
|
4365
|
+
* </div>
|
|
4366
|
+
* </template>
|
|
4367
|
+
* ```
|
|
4368
|
+
*/
|
|
4369
|
+
scroll: () => void;
|
|
4370
|
+
/**
|
|
4371
|
+
* The scrollend event handler.
|
|
4372
|
+
*
|
|
4373
|
+
* @example
|
|
4374
|
+
* ```vue
|
|
4375
|
+
* <script setup lang="ts">
|
|
4376
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4377
|
+
*
|
|
4378
|
+
* const { scroll, scrollend } = useVirtual(items)
|
|
4379
|
+
* </script>
|
|
4380
|
+
*
|
|
4381
|
+
* <template>
|
|
4382
|
+
* <div ref="element" @scroll="scroll" @scrollend="scrollend">
|
|
4383
|
+
* <div v-for="item in items" :key="item.index">
|
|
4384
|
+
* {{ item.raw }}
|
|
4385
|
+
* </div>
|
|
4386
|
+
* </div>
|
|
4387
|
+
* </template>
|
|
4388
|
+
* ```
|
|
4389
|
+
*/
|
|
4390
|
+
scrollend: () => void;
|
|
4391
|
+
/**
|
|
4392
|
+
* Resize an item by index.
|
|
4393
|
+
*
|
|
4394
|
+
* @example
|
|
4395
|
+
* ```vue
|
|
4396
|
+
* <script setup lang="ts">
|
|
4397
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4398
|
+
*
|
|
4399
|
+
* const { resize } = useVirtual(items)
|
|
4400
|
+
* </script>
|
|
4401
|
+
*
|
|
4402
|
+
* <template>
|
|
4403
|
+
* <button @click="resize(0, 100)">Resize first item</button>
|
|
4404
|
+
* </template>
|
|
4405
|
+
* ```
|
|
4406
|
+
*/
|
|
4407
|
+
resize: (index: number, height: number) => void;
|
|
4408
|
+
/**
|
|
4409
|
+
* Reset the virtualized items.
|
|
4410
|
+
*
|
|
4411
|
+
* @example
|
|
4412
|
+
* ```vue
|
|
4413
|
+
* <script setup lang="ts">
|
|
4414
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4415
|
+
*
|
|
4416
|
+
* const { reset } = useVirtual(items)
|
|
4417
|
+
* </script>
|
|
4418
|
+
*
|
|
4419
|
+
* <template>
|
|
4420
|
+
* <button @click="reset">Reset</button>
|
|
4421
|
+
* <div v-for="item in items" :key="item.index">
|
|
4422
|
+
* {{ item.raw }}
|
|
4423
|
+
* </div>
|
|
4424
|
+
* </template>
|
|
4425
|
+
* ```
|
|
4426
|
+
*/
|
|
4427
|
+
reset: () => void;
|
|
4428
|
+
}
|
|
4429
|
+
/**
|
|
4430
|
+
* Virtual scrolling composable for efficiently rendering large lists
|
|
4431
|
+
*
|
|
4432
|
+
* @param items Reactive array of items to virtualize
|
|
4433
|
+
* @param options Configuration options
|
|
4434
|
+
* @returns Virtual scrolling context
|
|
4435
|
+
*
|
|
4436
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-virtual
|
|
4437
|
+
*
|
|
4438
|
+
* @example
|
|
4439
|
+
* ```vue
|
|
4440
|
+
* <script setup lang="ts">
|
|
4441
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
4442
|
+
*
|
|
4443
|
+
* const items = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })))
|
|
4444
|
+
* </script>
|
|
4445
|
+
*
|
|
4446
|
+
* <template>
|
|
4447
|
+
* <div
|
|
4448
|
+
* ref="element"
|
|
4449
|
+
* style="height: 600px; overflow-y: auto;"
|
|
4450
|
+
* @scroll="scroll"
|
|
4451
|
+
* >
|
|
4452
|
+
* <div :style="{ height: `${offset}px` }" />
|
|
4453
|
+
*
|
|
4454
|
+
* <div v-for="item in items" :key="item.index">
|
|
4455
|
+
* {{ item.raw.name }}
|
|
4456
|
+
* </div>
|
|
4457
|
+
*
|
|
4458
|
+
* <div :style="{ height: `${size}px` }" />
|
|
4459
|
+
* </div>
|
|
4460
|
+
* </template>
|
|
4461
|
+
* ```
|
|
4462
|
+
*/
|
|
4463
|
+
declare function useVirtual<T = unknown>(items: Ref<readonly T[]>, _options?: VirtualOptions): VirtualContext<T>;
|
|
4464
|
+
//#endregion
|
|
4465
|
+
export { UseResizeObserverReturn as $, Primitive as $n, useContext as $r, ConsolaLoggerAdapter as $t, Vuetify0ThemeAdapter as A, HydrationContext as An, useGroup as Ar, createPaginationContext as At, StorageAdapter as B, FormContextOptions as Bn, BreakpointsPluginOptions as Br, UseMutationObserverReturn as Bt, ThemePluginOptions as C, useKeydown as Cn, useTokens as Cr, PermissionAdapter as Ct, createThemeContext as D, UseIntersectionObserverReturn as Dn, GroupTicket as Dr, PaginationItem as Dt, createTheme as E, UseElementIntersectionReturn as En, GroupOptions as Er, PaginationContextOptions as Et, StoragePluginOptions as F, createHydration as Fn, useWindowEventListener as Fr, createOverflow as Ft, StepOptions as G, FormValue as Gn, toReactive as Gr, LoggerPluginOptions as Gt, MemoryAdapter as H, FormTicket as Hn, createBreakpointsContext as Hr, LoggerContext as Ht, createStorage as I, createHydrationContext as In, BreakpointName as Ir, createOverflowContext as It, createStepContext as J, useForm as Jn, PluginOptions as Jr, createLoggerPlugin as Jt, StepTicket as K, createForm as Kn, toArray as Kr, createLogger as Kt, createStorageContext as L, createHydrationPlugin as Ln, BreakpointsContext as Lr, useOverflow as Lt, StorageContext as M, HydrationOptions as Mn, EventHandler as Mr, OverflowContext as Mt, StorageContextOptions as N, HydrationPluginOptions as Nn, useDocumentEventListener as Nr, OverflowContextOptions as Nt, createThemePlugin as O, useElementIntersection as On, createGroup as Or, PaginationOptions as Ot, StorageOptions as P, createFallbackHydration as Pn, useEventListener as Pr, OverflowOptions as Pt, UseElementSizeReturn as Q, FilterQuery as Qn, provideContext as Qr, PinoLoggerAdapter as Qt, createStoragePlugin as R, useHydration as Rn, BreakpointsContextOptions as Rr, MutationObserverRecord as Rt, ThemeOptions as S, UseKeydownReturn as Sn, createTokensContext as Sr, usePermissions as St, ThemeTicket as T, IntersectionObserverOptions as Tn, GroupContextOptions as Tr, PaginationContext as Tt, StepContext as U, FormValidationResult as Un, createBreakpointsPlugin as Ur, LoggerContextOptions as Ut, StorageType as V, FormOptions as Vn, createBreakpoints as Vr, useMutationObserver as Vt, StepContextOptions as W, FormValidationRule as Wn, useBreakpoints as Wr, LoggerOptions as Wt, ResizeObserverEntry as X, FilterItem as Xn, ContextKey as Xr, LogLevel as Xt, useStep as Y, FilterFunction as Yn, createPlugin as Yr, useLogger as Yt, ResizeObserverOptions as Z, FilterMode as Zn, createContext as Zr, Vuetify0LoggerAdapter as Zt, useTimeline as _, SingleTicket as _n, TokenOptions as _r, PermissionPluginOptions as _t, VirtualItem as a, createSelectionContext as ai, LocaleRecord as an, FeatureOptions as ar, QueueTicket as at, ThemeContext as b, useSingle as bn, TokenValue as br, createPermissionsContext as bt, useVirtual as c, RegistryContextOptions as ci, createLocaleContext as cn, createFeatures as cr, useQueue as ct, TimelineContext as d, createRegistryContext as di, useLocale as dn, useFeatures as dr, useProxyRegistry as dt, SelectionContext as ei, LoggerAdapter as en, UseFilterOptions as er, useElementSize as et, TimelineContextOptions as f, useRegistry as fi, Vuetify0LocaleAdapter as fn, FlatTokenCollection as fr, ProxyModelOptions as ft, createTimelineContext as g, SingleOptions as gn, TokenContextOptions as gr, PermissionOptions as gt, createTimeline as h, SingleContextOptions as hn, TokenContext as hr, PermissionContextOptions as ht, VirtualDirection as i, createSelection as ii, LocalePluginOptions as in, FeatureContextOptions as ir, QueueOptions as it, ThemeAdapter as j, HydrationContextOptions as jn, CleanupFunction as jr, usePagination as jt, useTheme as k, useIntersectionObserver as kn, createGroupContext as kr, createPagination as kt, ToggleScopeControls as l, RegistryOptions as li, createLocaleFallback as ln, createFeaturesContext as lr, ProxyRegistryContext as lt, TimelineTicket as m, createTrinity as mi, SingleContext as mn, TokenCollection as mr, PermissionContext as mt, VirtualAnchor as n, SelectionOptions as ni, LocaleContextOptions as nn, useFilter as nr, QueueContext as nt, VirtualOptions as o, useSelection as oi, LocaleTicket as on, FeaturePluginOptions as or, createQueue as ot, TimelineOptions as p, ContextTrinity as pi, LocaleAdapter as pn, TokenAlias as pr, useProxyModel as pt, createStep as q, createFormContext as qn, Plugin as qr, createLoggerContext as qt, VirtualContext as r, SelectionTicket as ri, LocaleOptions as rn, FeatureContext as rr, QueueContextOptions as rt, VirtualState as s, RegistryContext as si, createLocale as sn, FeatureTicket as sr, createQueueContext as st, ScrollToOptions as t, SelectionContextOptions as ti, LocaleContext as tn, UseFilterResult as tr, useResizeObserver as tt, useToggleScope as u, RegistryTicket as ui, createLocalePlugin as un, createFeaturesPlugin as ur, ProxyRegistryOptions as ut, Colors as v, createSingle as vn, TokenPrimitive as vr, PermissionTicket as vt, ThemeRecord as w, IntersectionObserverEntry as wn, GroupContext as wr, PermissionAdapterInterface as wt, ThemeContextOptions as x, KeyHandler as xn, createTokens as xr, createPermissionsPlugin as xt, ThemeColors as y, createSingleContext as yn, TokenTicket as yr, createPermissions as yt, useStorage as z, FormContext as zn, BreakpointsOptions as zr, UseMutationObserverOptions as zt };
|