@vuetify/v0 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +20 -3
  2. package/dist/browser/index.js +5645 -3968
  3. package/dist/components/index.d.mts +7 -4
  4. package/dist/components/index.mjs +5 -5
  5. package/dist/{components-z56rRlS4.mjs → components-C0zEvP7w.mjs} +580 -89
  6. package/dist/composables/index.d.mts +4 -5
  7. package/dist/composables/index.mjs +4 -4
  8. package/dist/constants/index.d.mts +1 -1
  9. package/dist/constants/index.mjs +1 -1
  10. package/dist/date/index.d.mts +1 -1
  11. package/dist/date/index.mjs +19 -15
  12. package/dist/{globals-VwjZ5i4B.mjs → globals-BwYsH-rt.mjs} +1 -1
  13. package/dist/{index-CLKfXGEQ.d.mts → index-2wh69fk5.d.mts} +2781 -459
  14. package/dist/{index-DlxrzbvZ.d.mts → index-BLK67J_-.d.mts} +41 -1
  15. package/dist/{index-CoO8LW8o.d.mts → index-DBZTizq2.d.mts} +1 -1
  16. package/dist/{index-PuLeBGZ3.d.mts → index-DFM5iBqh.d.mts} +899 -335
  17. package/dist/index.d.mts +7 -8
  18. package/dist/index.mjs +5 -5
  19. package/dist/json/attributes.json +140 -0
  20. package/dist/json/importMap.json +36 -0
  21. package/dist/json/tags.json +75 -0
  22. package/dist/json/web-types.json +440 -1
  23. package/dist/types/index.d.mts +2 -2
  24. package/dist/{useClickOutside-Dp1MHIjr.mjs → useClickOutside-DrkNYxDe.mjs} +4252 -3066
  25. package/dist/utilities/index.d.mts +2 -2
  26. package/dist/utilities/index.mjs +2 -1
  27. package/dist/{utilities-B58TiS_S.mjs → utilities-BbKjbXTx.mjs} +9 -0
  28. package/package.json +4 -3
  29. package/dist/index-qSuLpob3.d.mts +0 -1544
  30. /package/dist/{adapter-L4Php1_S.d.mts → adapter-D95FHAtt.d.mts} +0 -0
  31. /package/dist/{index-cPmI99rd.d.mts → index-Bmem4l8m.d.mts} +0 -0
@@ -1,1544 +0,0 @@
1
- import { a as ID } from "./index-DlxrzbvZ.mjs";
2
- import { App, ComputedRef, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef } from "vue";
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/createRegistry/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
- /** Callback signature for registry event listeners */
68
- type RegistryEventCallback = (data: unknown) => void;
69
- interface RegistryContext<Z extends RegistryTicket = RegistryTicket> {
70
- /**
71
- * The collection of tickets in the registry
72
- *
73
- * @template ID The type of the ticket ID.
74
- * @template Z The type of the registry ticket.
75
- *
76
- * @remarks Read-only view of the internal collection. Use `register`, `unregister`, `upsert`, and `clear` methods to modify.
77
- */
78
- collection: ReadonlyMap<ID, Z>;
79
- /**
80
- * Clear the entire registry
81
- *
82
- * @remarks Removes all tickets from the registry. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
83
- *
84
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#clear
85
- *
86
- * @example
87
- * ```ts
88
- * import { createRegistry } from '@vuetify/v0'
89
- *
90
- * const registry = createRegistry()
91
- *
92
- * registry.register({ id: 'ticket-1' })
93
- * registry.register({ id: 'ticket-2' })
94
- *
95
- * console.log(registry.size) // 2
96
- *
97
- * registry.clear()
98
- *
99
- * console.log(registry.size) // 0
100
- * ```
101
- */
102
- clear: () => void;
103
- /**
104
- * Check if a ticket exists by ID
105
- *
106
- * @param id The ID of the ticket to check.
107
- * @remarks Calls `collection.has` internally.
108
- *
109
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#has
110
- *
111
- * @example
112
- * ```ts
113
- * import { createRegistry } from '@vuetify/v0'
114
- *
115
- * const registry = createRegistry()
116
- *
117
- * registry.register({ id: 'ticket-id' })
118
- *
119
- * const exists = registry.has('ticket-id') // true
120
- * ```
121
- */
122
- has: (id: ID) => boolean;
123
- /**
124
- * Get all registered IDs
125
- *
126
- * @remarks Calls `collection.keys` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
127
- *
128
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#keys
129
- *
130
- * @example
131
- * ```ts
132
- * import { createRegistry } from '@vuetify/v0'
133
- *
134
- * const registry = createRegistry()
135
- *
136
- * registry.register({ id: 'ticket-1' })
137
- * registry.register({ id: 'ticket-2' })
138
- *
139
- * const ids = registry.keys() // ['ticket-1', 'ticket-2']
140
- * ```
141
- */
142
- keys: () => ID[];
143
- /**
144
- * Browse for an ID(s) by value
145
- *
146
- * @param value The value to browse for.
147
- * @remarks Returns a single ID or an array of IDs if multiple tickets share the same value.
148
- *
149
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#browse
150
- *
151
- * @example
152
- * ```ts
153
- * import { createRegistry } from '@vuetify/v0'
154
- *
155
- * const registry = createRegistry()
156
- *
157
- * registry.register({ id: 'ticket-1', value: 'common-value' })
158
- * registry.register({ id: 'ticket-2', value: 'common-value' })
159
- * registry.register({ id: 'ticket-3', value: 'unique-value' })
160
- *
161
- * const common = registry.browse('common-value') // ['ticket-1', 'ticket-2']
162
- * const unique = registry.browse('unique-value') // ['ticket-3']
163
- * ```
164
- */
165
- browse: (value: unknown) => ID[] | undefined;
166
- /**
167
- * lookup a ticket by index number
168
- *
169
- * @param index The index number to lookup.
170
- * @remarks Maps do not support indexing by default, this method provides a way to retrieve an ID based on its index in the registry.
171
- *
172
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#lookup
173
- *
174
- * @example
175
- * ```ts
176
- * const registry = createRegistry()
177
- *
178
- * registry.register({ id: 'ticket-1' })
179
- * registry.register({ id: 'ticket-2' })
180
- *
181
- * const ticket1 = registry.lookup(0) // 'ticket-1'
182
- * const ticket2 = registry.lookup(1) // 'ticket-2'
183
- * ```
184
- */
185
- lookup: (index: number) => ID | undefined;
186
- /**
187
- * Get a ticket by ID
188
- *
189
- * @param id The ID of the ticket to retrieve.
190
- * @remarks Calls `collection.get` internally.
191
- *
192
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#get
193
- *
194
- * @example
195
- * ```ts
196
- * import { createRegistry } from '@vuetify/v0'
197
- *
198
- * const registry = createRegistry()
199
- *
200
- * registry.register({ id: 'ticket-id', value: 'some-value' })
201
- *
202
- * const ticket = registry.get('ticket-id') // { id: 'ticket-id', index: 0, value: 'some-value', ... }
203
- * ```
204
- */
205
- get: (id: ID) => Z | undefined;
206
- /**
207
- * Update or insert a ticket by ID
208
- *
209
- * @param id The ID of the ticket to upsert.
210
- * @param ticket The partial ticket data to update or insert.
211
- * @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()`.
212
- *
213
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#upsert
214
- *
215
- * @example
216
- * ```ts
217
- * import { createRegistry } from '@vuetify/v0'
218
- *
219
- * const registry = createRegistry()
220
- *
221
- * // Insert a new ticket
222
- * const ticket = registry.upsert('ticket-id', { value: 'initial-value' })
223
- *
224
- * // Update the existing ticket
225
- * const patched = registry.upsert('ticket-id', { value: 'updated-value' })
226
- * ```
227
- */
228
- upsert: (id: ID, ticket?: Partial<Z>) => Z;
229
- /**
230
- * Get all values of registered tickets
231
- *
232
- * @remarks Calls `collection.values` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
233
- *
234
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#values
235
- *
236
- * @example
237
- * ```ts
238
- * import { createRegistry } from '@vuetify/v0'
239
- *
240
- * const registry = createRegistry()
241
- *
242
- * registry.register({ id: 'ticket-1', value: 'value-1' })
243
- * registry.register({ id: 'ticket-2', value: 'value-2' })
244
- *
245
- * const values = registry.values() // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
246
- * ```
247
- */
248
- values: () => Z[];
249
- /**
250
- * Get all entries of registered tickets
251
- *
252
- * @remarks Calls `collection.entries` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
253
- *
254
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#entries
255
- *
256
- * @example
257
- * ```ts
258
- * import { createRegistry } from '@vuetify/v0'
259
- *
260
- * const registry = createRegistry()
261
- *
262
- * registry.register({ id: 'ticket-1', value: 'value-1' })
263
- * registry.register({ id: 'ticket-2', value: 'value-2' })
264
- *
265
- * const entries = registry.entries() // [['ticket-1', { id: 'ticket-1', ... }], ['ticket-2', { id: 'ticket-2', ... }]]
266
- * ```
267
- */
268
- entries: () => [ID, Z][];
269
- /**
270
- * Register a new ticket
271
- *
272
- * @param ticket The partial ticket data to register.
273
- * @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()`.
274
- *
275
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#register
276
- *
277
- * @example
278
- * ```ts
279
- * import { createRegistry } from '@vuetify/v0'
280
- *
281
- * const registry = createRegistry()
282
- *
283
- * const ticket = registry.register()
284
- *
285
- * console.log(ticket) // { id: 'generated-id', index: 0, value: 0, valueIsIndex: true }
286
- * ```
287
- */
288
- register: (ticket?: Partial<Z>) => Z;
289
- /**
290
- * Unregister an ticket by ID
291
- *
292
- * @param id The ID of the ticket to unregister.
293
- * @remarks Removes the ticket from the registry and reindexes the remaining tickets. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
294
- *
295
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#unregister
296
- *
297
- * @example
298
- * ```ts
299
- * import { createRegistry } from '@vuetify/v0'
300
- *
301
- * const registry = createRegistry()
302
- *
303
- * registry.register({ id: 'ticket-id' })
304
- *
305
- * registry.unregister('ticket-id')
306
- * ```
307
- */
308
- unregister: (id: ID) => void;
309
- /**
310
- * Reset the index directory and update all tickets
311
- *
312
- * @remarks Rebuilds the internal index mapping and ensures all tickets have correct index values. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
313
- *
314
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#reindex
315
- *
316
- * @example
317
- * ```ts
318
- * import { createRegistry } from '@vuetify/v0'
319
- *
320
- * const registry = createRegistry()
321
- *
322
- * registry.register({ id: 'ticket-1' })
323
- * registry.register({ id: 'ticket-2' })
324
- *
325
- * // After some operations that may affect indexing
326
- * registry.reindex()
327
- * ```
328
- */
329
- reindex: () => void;
330
- /**
331
- * Seek for a ticket based on direction and optional predicate
332
- *
333
- * @param direction The direction to seek ('first' or 'last'). Defaults to 'first'.
334
- * @param from The index to start seeking from. Defaults to the beginning or end based on direction.
335
- * @param predicate An optional function to test each ticket. The first ticket that satisfies the predicate will be returned.
336
- * @remarks This method allows for flexible searching within the registry, either from the start or end, and can filter tickets based on custom criteria.
337
- *
338
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#seek
339
- *
340
- * @example
341
- * ```ts
342
- * import { createRegistry } from '@vuetify/v0'
343
- *
344
- * const registry = createRegistry()
345
- *
346
- * registry.register({ id: 'ticket-1', value: 'apple' })
347
- * registry.register({ id: 'ticket-2', value: 'banana' })
348
- * registry.register({ id: 'ticket-3', value: 'cherry' })
349
- *
350
- * // Seek the first ticket
351
- * const first = registry.seek('first')
352
- *
353
- * // Seek the last ticket
354
- * const last = registry.seek('last')
355
- *
356
- * // Seek the first ticket with value 'banana'
357
- * const banana = registry.seek('first', undefined, ticket => ticket.value === 'banana')
358
- *
359
- * // Seek from index 1 to find the next ticket with value starting with 'c'
360
- * const cherry = registry.seek('first', 1, ticket => (ticket.value as string).startsWith('c'))
361
- * ```
362
- */
363
- seek: (direction?: 'first' | 'last', from?: number, predicate?: (ticket: Z) => boolean) => Z | undefined;
364
- /**
365
- * Listen for registry events
366
- *
367
- * @param event The name of the event to listen for.
368
- * @param cb The callback function to invoke when the event is emitted.
369
- * @remarks Must be enabled via the `events` option when creating the registry.
370
- * Supported events:
371
- * - `register:ticket` - Emitted when a ticket is registered, receives the ticket as argument
372
- * - `unregister:ticket` - Emitted when a ticket is unregistered, receives the ticket as argument
373
- * - `update:ticket` - Emitted when a ticket is updated, receives the updated ticket as argument
374
- * - `clear:registry` - Emitted when the registry is cleared
375
- * - `reindex:registry` - Emitted when the registry is reindexed
376
- *
377
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#on
378
- *
379
- * @example
380
- * ```ts
381
- * import { createRegistry } from '@vuetify/v0'
382
- *
383
- * const registry = createRegistry({ events: true })
384
- *
385
- * registry.on('register:ticket', (ticket) => {
386
- * console.log('Ticket registered:', ticket)
387
- * })
388
- *
389
- * registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
390
- * ```
391
- */
392
- on: (event: string, cb: RegistryEventCallback) => void;
393
- /**
394
- * Stop listening for registry events
395
- *
396
- * @param event The name of the event to stop listening for.
397
- * @param cb The callback function to remove.
398
- * @remarks Must be enabled via the `events` option when creating the registry.
399
- *
400
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#off
401
- *
402
- * @example
403
- * ```ts
404
- * import { onScopeDispose } from 'vue'
405
- * import { createRegistry } from '@vuetify/v0'
406
- *
407
- * const registry = createRegistry({ events: true })
408
- *
409
- * function onRegister(ticket) {
410
- * console.log('Ticket registered:', ticket)
411
- * }
412
- *
413
- * registry.on('register:ticket', onRegister)
414
- *
415
- * registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
416
- *
417
- * onScopeDispose(() => {
418
- * registry.off('register:ticket', onRegister)
419
- * })
420
- * ```
421
- */
422
- off: (event: string, cb: RegistryEventCallback) => void;
423
- /**
424
- * Emit an event with data
425
- *
426
- * @param event The name of the event to emit.
427
- * @param data The data to pass to event listeners.
428
- * @remarks Must be enabled via the `events` option when creating the registry.
429
- *
430
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#emit
431
- *
432
- * @example
433
- * ```ts
434
- * import { createRegistry } from '@vuetify/v0'
435
- *
436
- * const registry = createRegistry({ events: true })
437
- *
438
- * registry.on('custom-event', (data) => {
439
- * console.log('Custom event received:', data)
440
- * })
441
- *
442
- * registry.emit('custom-event', { message: 'Hello, World!' }) // Console: Custom event received: { message: 'Hello, World!' }
443
- * ```
444
- */
445
- emit: (event: string, data: unknown) => void;
446
- /**
447
- * Clears the registry and removes all listeners
448
- *
449
- * @remarks Disposes of the registry by clearing all tickets and removing all event listeners.
450
- *
451
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#dispose
452
- *
453
- * @example
454
- * ```ts
455
- * import { onScopeDispose } from 'vue'
456
- * import { createRegistry } from '@vuetify/v0'
457
- *
458
- * const registry = createRegistry({ events: true })
459
- *
460
- * registry.register({ id: 'ticket-id' })
461
- *
462
- * onScopeDispose(() => {
463
- * registry.dispose()
464
- * })
465
- * ```
466
- */
467
- dispose: () => void;
468
- /**
469
- * Onboard multiple tickets at once
470
- *
471
- * @param registrations An array of partial ticket data to register.
472
- * @remarks Registers multiple tickets in a single operation and returns the array of registered tickets.
473
- *
474
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#onboard
475
- *
476
- * @example
477
- * ```ts
478
- * import { createRegistry } from '@vuetify/v0'
479
- *
480
- * const registry = createRegistry()
481
- *
482
- * const tickets = registry.onboard([
483
- * { id: 'ticket-1', value: 'value-1' },
484
- * { id: 'ticket-2', value: 'value-2' },
485
- * ])
486
- *
487
- * console.log(tickets) // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
488
- * ```
489
- */
490
- onboard: (registrations: Partial<Z>[]) => Z[];
491
- /**
492
- * Offboard multiple tickets at once
493
- *
494
- * @param ids An array of ticket IDs to unregister.
495
- * @remarks Unregisters multiple tickets in a single operation with optimized reindexing.
496
- *
497
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#offboard
498
- *
499
- * @example
500
- * ```ts
501
- * import { createRegistry } from '@vuetify/v0'
502
- *
503
- * const registry = createRegistry()
504
- *
505
- * registry.onboard([
506
- * { id: 'ticket-1', value: 'value-1' },
507
- * { id: 'ticket-2', value: 'value-2' },
508
- * { id: 'ticket-3', value: 'value-3' },
509
- * ])
510
- *
511
- * registry.offboard(['ticket-1', 'ticket-3'])
512
- *
513
- * console.log(registry.size) // 1
514
- * ```
515
- */
516
- offboard: (ids: ID[]) => void;
517
- /**
518
- * The number of tickets in the registry
519
- *
520
- * @remarks Reflects the current size of the internal ticket collection.
521
- *
522
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#size
523
- *
524
- * @example
525
- * ```ts
526
- * import { createRegistry } from '@vuetify/v0'
527
- *
528
- * const registry = createRegistry()
529
- *
530
- * registry.register({ id: 'ticket-1' })
531
- * registry.register({ id: 'ticket-2' })
532
- *
533
- * console.log(registry.size) // 2
534
- * ```
535
- */
536
- size: number;
537
- /**
538
- * Execute operations in a batch, deferring cache invalidation and event emission until complete
539
- *
540
- * @param fn The function containing batch operations.
541
- * @returns The return value of the batch function.
542
- * @remarks Useful for bulk operations like onboard(). Invalidation and events happen once at the end, not after each operation.
543
- *
544
- * @see https://0.vuetifyjs.com/composables/registration/use-registry#batch
545
- *
546
- * @example
547
- * ```ts
548
- * import { createRegistry } from '@vuetify/v0'
549
- *
550
- * const registry = createRegistry({ events: true })
551
- *
552
- * // Without batch: N invalidations + N events
553
- * // With batch: 1 invalidation + N events (after all registrations)
554
- * const tickets = registry.batch(() => {
555
- * return [
556
- * registry.register({ id: 'a' }),
557
- * registry.register({ id: 'b' }),
558
- * registry.register({ id: 'c' }),
559
- * ]
560
- * })
561
- * ```
562
- */
563
- batch: <R>(fn: () => R) => R;
564
- }
565
- interface RegistryOptions {
566
- /**
567
- * Enable event emission for registry operations
568
- *
569
- * @default false
570
- * @remarks When enabled, the registry will emit events for operations like registration and unregistration. Listeners can be added using the `on` method.
571
- *
572
- * @example
573
- * ```ts
574
- * import { createRegistry } from '@vuetify/v0'
575
- *
576
- * const registry = createRegistry({ events: true })
577
- *
578
- * registry.on('register:ticket', (ticket) => {
579
- * console.log('Ticket registered:', ticket)
580
- * })
581
- *
582
- * registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
583
- * ```
584
- */
585
- events?: boolean;
586
- /**
587
- * Enable reactive behavior for registry operations
588
- *
589
- * @default false
590
- * @remarks When enabled, the registry will use Vue's shallowReactive to track changes. This is useful for scenarios where you want to reactively update the registry state in response to changes.
591
- *
592
- * @example
593
- * ```ts
594
- * import { createRegistry } from '@vuetify/v0'
595
- *
596
- * const registry = createRegistry({ reactive: true })
597
- *
598
- * registry.register({ id: 'ticket-id' })
599
- *
600
- * console.log(registry.size) // 1
601
- * ```
602
- */
603
- reactive?: boolean;
604
- }
605
- interface RegistryContextOptions extends RegistryOptions {
606
- namespace?: string;
607
- }
608
- /**
609
- * Creates a new registry instance.
610
- *
611
- * @param options The options for the registry instance.
612
- * @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
613
- * @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
614
- * @returns A new registry instance.
615
- *
616
- * @see https://0.vuetifyjs.com/composables/registration/create-registry#create-registry
617
- *
618
- * @example
619
- * ```ts
620
- * import { createRegistry } from '@vuetify/v0'
621
- *
622
- * const registry = createRegistry()
623
- *
624
- * const ticket1 = registry.register({ id: 'user-1', value: { name: 'John' } })
625
- * const ticket2 = registry.register({ id: 'user-2', value: { name: 'Jane' } })
626
- *
627
- * console.log(registry.size) // 2
628
- * console.log(registry.get('user-1')) // { id: 'user-1', index: 0, value: { name: 'John' }, ... }
629
- * ```
630
- */
631
- declare function createRegistry<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(options?: RegistryOptions): E;
632
- /**
633
- * Creates a new registry context.
634
- *
635
- * @param options The options for the registry context, including `namespace` (defaults to `'v0:registry'`) and `events`.
636
- * @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
637
- * @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
638
- * @returns A new registry context.
639
- *
640
- * @see https://0.vuetifyjs.com/composables/registration/create-registry#create-registry-context
641
- *
642
- * @example
643
- * ```ts
644
- * import { createRegistryContext } from '@vuetify/v0'
645
- *
646
- * // With default namespace 'v0:registry'
647
- * export const [useItems, provideItems, items] = createRegistryContext()
648
- *
649
- * // Or with custom namespace
650
- * export const [useItems, provideItems, items] = createRegistryContext({ namespace: 'my-items' })
651
- *
652
- * // In a parent component:
653
- * provideItems()
654
- *
655
- * // In a child component:
656
- * const items = useItems()
657
- * items.register({ id: 'item-1', value: 'Value 1' })
658
- * ```
659
- */
660
- declare function createRegistryContext<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(_options?: RegistryContextOptions): ContextTrinity<E>;
661
- //#endregion
662
- //#region src/composables/createSelection/index.d.ts
663
- /**
664
- * Input type for selection tickets - what users provide to register().
665
- * Custom ticket types should extend this interface.
666
- *
667
- * @template V The type of the ticket value.
668
- *
669
- * @example
670
- * ```ts
671
- * interface MyTicket extends SelectionTicketInput {
672
- * label: string
673
- * disabled?: boolean
674
- * metadata?: Record<string, unknown>
675
- * }
676
- *
677
- * const selection = createSelection<MyTicket>()
678
- * selection.register({ label: 'Item 1' })
679
- * ```
680
- */
681
- interface SelectionTicketInput<V = unknown> extends RegistryTicket<V> {
682
- /** Disabled state of the ticket (optional on input, defaults to false) */
683
- disabled?: MaybeRef<boolean>;
684
- }
685
- /**
686
- * Output type for selection tickets - what users receive from get().
687
- * Includes registry-added methods for self-selection.
688
- *
689
- * @template Z The input ticket type that extends SelectionTicketInput.
690
- *
691
- * @remarks
692
- * The following properties are automatically added by the registry:
693
- * - `disabled` - Defaults to `false` if not provided
694
- * - `isSelected` - Reactive boolean indicating selection state
695
- * - `select()` - Method to select this ticket
696
- * - `unselect()` - Method to unselect this ticket
697
- * - `toggle()` - Method to toggle selection state
698
- */
699
- type SelectionTicket<Z extends SelectionTicketInput = SelectionTicketInput> = Z & {
700
- /** Disabled state of the ticket (guaranteed to exist on output) */
701
- disabled: MaybeRef<boolean>;
702
- /** Whether the ticket is currently selected */
703
- isSelected: Readonly<Ref<boolean, boolean>>;
704
- /** Select self */
705
- select: () => void;
706
- /** Unselect self */
707
- unselect: () => void;
708
- /** Toggle self on and off */
709
- toggle: () => void;
710
- };
711
- /**
712
- * Context returned by createSelection.
713
- *
714
- * @template Z The input ticket type (what users provide to register).
715
- * @template E The output ticket type (what users receive from get). Defaults to SelectionTicket<Z>.
716
- */
717
- interface SelectionContext<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>> extends Omit<RegistryContext<E>, 'register' | 'onboard'> {
718
- /** Set of selected ticket IDs */
719
- selectedIds: Reactive<Set<ID>>;
720
- /** Set of selected ticket instances */
721
- selectedItems: ComputedRef<Set<E>>;
722
- /** Set of selected ticket values */
723
- selectedValues: ComputedRef<Set<unknown>>;
724
- /** Disable state for the entire selection instance */
725
- disabled: MaybeRef<boolean>;
726
- /** Clear all selected IDs and reindexes */
727
- reset: () => void;
728
- /** Select a ticket by ID (Toggle ON) */
729
- select: (id: ID) => void;
730
- /** Unselect a ticket by ID (Toggle OFF) */
731
- unselect: (id: ID) => void;
732
- /** Toggles a ticket ON and OFF by ID */
733
- toggle: (id: ID) => void;
734
- /** Check if a ticket is selected by ID */
735
- selected: (id: ID) => boolean;
736
- /** Mandates selected ID based on "mandatory" Option */
737
- mandate: () => void;
738
- /** Register a new ticket (accepts input type, returns output type) */
739
- register: (ticket?: Partial<Z>) => E;
740
- /** Onboard multiple tickets at once */
741
- onboard: (registrations: Partial<Z>[]) => E[];
742
- }
743
- interface SelectionOptions extends RegistryOptions {
744
- /** When true, the entire selection instance is disabled. */
745
- disabled?: MaybeRefOrGetter<boolean>;
746
- /**
747
- * When true, newly registered items are automatically selected if not disabled.
748
- * Useful for pre-selecting items in multi-select scenarios.
749
- */
750
- enroll?: MaybeRefOrGetter<boolean>;
751
- /**
752
- * Controls mandatory selection behavior:
753
- * - `false` (default): No mandatory selection enforcement
754
- * - `true`: Prevents deselecting the last selected item (user must always have one selected)
755
- * - `'force'`: Automatically selects the first non-disabled item on registration
756
- */
757
- mandatory?: MaybeRefOrGetter<boolean | 'force'>;
758
- /** When true, treats the selection as an array */
759
- multiple?: MaybeRefOrGetter<boolean>;
760
- }
761
- interface SelectionContextOptions extends SelectionOptions {
762
- namespace?: string;
763
- }
764
- /**
765
- * Creates a new selection instance for managing multiple selected items.
766
- *
767
- * Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
768
- * Supports disabled items, mandatory selection enforcement, and auto-enrollment.
769
- *
770
- * @param options The options for the selection instance.
771
- * @template Z The input ticket type - what users provide to register(). Extend SelectionTicketInput to add custom properties.
772
- * @template E The output ticket type - what users receive from get(). Automatically includes selection methods.
773
- * @template R The context type. Defaults to SelectionContext<Z, E>.
774
- * @returns A new selection instance with selection management methods.
775
- *
776
- * @remarks
777
- * **Key Features:**
778
- * - Multi-selection support (unlike `useSingle` which enforces single selection)
779
- * - Set-based `selectedIds` tracking for efficient lookups
780
- * - Computed `selectedItems` and `selectedValues` for reactive access
781
- * - Each ticket gets `isSelected`, `select()`, `unselect()`, and `toggle()` methods
782
- * - Disabled items cannot be selected
783
- * - Mandatory mode prevents deselecting the last item
784
- * - Force mode auto-selects first non-disabled item on registration
785
- * - Enroll option auto-selects all non-disabled items on registration
786
- *
787
- * **Inheritance Chain:**
788
- * `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
789
- *
790
- * @see https://0.vuetifyjs.com/composables/selection/use-selection
791
- *
792
- * @example
793
- * ```ts
794
- * import { createSelection } from '@vuetify/v0'
795
- *
796
- * // Basic usage
797
- * const selection = createSelection({ mandatory: true })
798
- *
799
- * selection.onboard([
800
- * { id: 'item-1', value: 'Item 1' },
801
- * { id: 'item-2', value: 'Item 2', disabled: true },
802
- * { id: 'item-3', value: 'Item 3' },
803
- * ])
804
- *
805
- * selection.select('item-1')
806
- * selection.select('item-3')
807
- *
808
- * console.log(selection.selectedIds) // Set { 'item-1', 'item-3' }
809
- * console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
810
- * ```
811
- *
812
- * @example
813
- * ```ts
814
- * // With custom ticket type
815
- * interface MyTicket extends SelectionTicketInput {
816
- * label: string
817
- * icon?: string
818
- * }
819
- *
820
- * const tabs = createSelection<MyTicket>()
821
- *
822
- * tabs.register({ label: 'Home', icon: 'mdi-home' })
823
- * tabs.register({ label: 'Settings' })
824
- *
825
- * const ticket = tabs.get('...')
826
- * // ticket has: label, icon, isSelected, select(), unselect(), toggle()
827
- * ```
828
- */
829
- declare function createSelection<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(_options?: SelectionOptions): R;
830
- /**
831
- * Creates a new selection context.
832
- *
833
- * @param options The options for the selection context.
834
- * @template Z The input ticket type - what users provide to register().
835
- * @template E The output ticket type - what users receive from get().
836
- * @template R The context type. Defaults to SelectionContext<Z, E>.
837
- * @returns A new selection context.
838
- *
839
- * @see https://0.vuetifyjs.com/composables/selection/use-selection
840
- *
841
- * @example
842
- * ```ts
843
- * import { createSelectionContext } from '@vuetify/v0'
844
- *
845
- * // With default namespace 'v0:selection'
846
- * export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext()
847
- *
848
- * // Or with custom namespace
849
- * export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext({ namespace: 'checkboxes' })
850
- *
851
- * // In a parent component:
852
- * provideCheckboxes()
853
- *
854
- * // In a child component:
855
- * const checkboxes = useCheckboxes()
856
- * checkboxes.select('checkbox-1')
857
- * ```
858
- *
859
- * @example
860
- * ```ts
861
- * // With custom ticket type
862
- * interface TabTicket extends SelectionTicketInput {
863
- * label: string
864
- * icon?: string
865
- * }
866
- *
867
- * export const [useTabs, provideTabs, tabs] = createSelectionContext<TabTicket>()
868
- * ```
869
- */
870
- declare function createSelectionContext<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(_options?: SelectionContextOptions): ContextTrinity<R>;
871
- /**
872
- * Returns the current selection instance.
873
- *
874
- * @param namespace The namespace for the selection context. Defaults to `'v0:selection'`.
875
- * @template Z The input ticket type.
876
- * @template E The output ticket type.
877
- * @template R The context type.
878
- * @returns The current selection instance.
879
- *
880
- * @see https://0.vuetifyjs.com/composables/selection/use-selection
881
- *
882
- * @example
883
- * ```vue
884
- * <script setup lang="ts">
885
- * import { useSelection } from '@vuetify/v0'
886
- *
887
- * const selection = useSelection()
888
- * </script>
889
- *
890
- * <template>
891
- * <div>
892
- * <p>Selected: {{ selection.selectedIds.size }}</p>
893
- * </div>
894
- * </template>
895
- * ```
896
- */
897
- declare function useSelection<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(namespace?: string): R;
898
- //#endregion
899
- //#region src/composables/createGroup/index.d.ts
900
- /**
901
- * Input type for group tickets.
902
- * Extend this interface to add custom properties.
903
- */
904
- interface GroupTicketInput<V = unknown> extends SelectionTicketInput<V> {
905
- /** Whether the ticket should start in mixed/indeterminate state */
906
- indeterminate?: MaybeRef<boolean>;
907
- }
908
- /**
909
- * Output type for group tickets.
910
- * Includes all input properties plus selection and tri-state methods.
911
- */
912
- type GroupTicket<Z extends GroupTicketInput = GroupTicketInput> = SelectionTicket<Z> & {
913
- /** Whether the ticket is in a mixed/indeterminate state */
914
- isMixed: Readonly<Ref<boolean>>;
915
- /** Set self to mixed/indeterminate state */
916
- mix: () => void;
917
- /** Clear mixed/indeterminate state from self */
918
- unmix: () => void;
919
- };
920
- /**
921
- * Context returned by createGroup.
922
- *
923
- * @template Z The input ticket type.
924
- * @template E The output ticket type.
925
- */
926
- interface GroupContext<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register' | 'onboard' | 'select' | 'unselect' | 'toggle'> {
927
- selectedIndexes: ComputedRef<Set<number>>;
928
- /** Select one or more Tickets by ID */
929
- select: (ids: ID | ID[]) => void;
930
- /** Unselect one or more Tickets by ID */
931
- unselect: (ids: ID | ID[]) => void;
932
- /** Toggle one or more Tickets ON and OFF by ID */
933
- toggle: (ids: ID | ID[]) => void;
934
- /** Set of mixed/indeterminate ticket IDs */
935
- mixedIds: Reactive<Set<ID>>;
936
- /** Set of mixed/indeterminate ticket instances */
937
- mixedItems: ComputedRef<Set<E>>;
938
- /** Set one or more Tickets to mixed/indeterminate state by ID */
939
- mix: (ids: ID | ID[]) => void;
940
- /** Clear mixed/indeterminate state from one or more Tickets by ID */
941
- unmix: (ids: ID | ID[]) => void;
942
- /** Check if a ticket is in mixed/indeterminate state by ID */
943
- mixed: (id: ID) => boolean;
944
- /** Whether no items are currently selected */
945
- isNoneSelected: ComputedRef<boolean>;
946
- /** Whether all selectable (non-disabled) items are selected */
947
- isAllSelected: ComputedRef<boolean>;
948
- /** Whether some but not all selectable items are selected */
949
- isMixed: ComputedRef<boolean>;
950
- /** Select all selectable (non-disabled) items */
951
- selectAll: () => void;
952
- /** Unselect all items (respects mandatory option) */
953
- unselectAll: () => void;
954
- /** Toggle between all selected and none selected */
955
- toggleAll: () => void;
956
- /** Register a new ticket (accepts input type, returns output type) */
957
- register: (ticket?: Partial<Z>) => E;
958
- /** Onboard multiple tickets at once */
959
- onboard: (registrations: Partial<Z>[]) => E[];
960
- }
961
- interface GroupOptions extends SelectionOptions {}
962
- interface GroupContextOptions extends SelectionContextOptions {}
963
- /**
964
- * Creates a new group instance with batch selection and tri-state support.
965
- *
966
- * Extends `createSelection` to support selecting, unselecting, and toggling multiple items
967
- * at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
968
- * checkbox trees and similar use cases.
969
- *
970
- * @param options The options for the group instance.
971
- * @template Z The type of the group ticket.
972
- * @template E The type of the group context.
973
- * @returns A new group instance with batch selection and tri-state support.
974
- *
975
- * @remarks
976
- * **Key Differences from `createSelection`:**
977
- * - `select()` accepts `ID | ID[]` for batch operations
978
- * - `unselect()` accepts `ID | ID[]` for batch operations
979
- * - `toggle()` accepts `ID | ID[]` for batch operations
980
- * - Adds `selectedIndexes` computed Set for getting selected item indexes
981
- * - Adds tri-state support via `mix()`, `unmix()`, `mixed()`, `mixedIds`, `mixedItems`
982
- * - Perfect for checkbox trees, multi-select dropdowns, and bulk operations
983
- *
984
- * **Tri-State Support:**
985
- * - Items can be in one of three states: selected, mixed (indeterminate), or unselected
986
- * - `mix(id)` sets item to mixed state (clears selected if set)
987
- * - `unmix(id)` clears mixed state
988
- * - `select(id)` clears mixed state before selecting
989
- * - `toggle(id)` on a mixed item selects it (resolves the indeterminate state positively)
990
- * - Mixed state works on disabled items (it's a computed state, not user action)
991
- *
992
- * **Batch Operations:**
993
- * - Single ID: `group.select('item-1')`
994
- * - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
995
- * - Uses `toArray()` utility internally to normalize input
996
- * - Disabled items are automatically skipped in select operations
997
- * - Non-existent IDs are silently ignored
998
- *
999
- * **Inheritance Chain:**
1000
- * `useRegistry` → `createSelection` → `createGroup`
1001
- *
1002
- * **Used By:**
1003
- * - `createFeatures` for feature flag management with multiple selections
1004
- *
1005
- * @see https://0.vuetifyjs.com/composables/selection/use-group
1006
- *
1007
- * @example
1008
- * ```ts
1009
- * import { createGroup } from '@vuetify/v0'
1010
- *
1011
- * const checkboxes = createGroup()
1012
- *
1013
- * checkboxes.onboard([
1014
- * { id: 'option-a', value: 'Option A' },
1015
- * { id: 'option-b', value: 'Option B' },
1016
- * { id: 'option-c', value: 'Option C' },
1017
- * ])
1018
- *
1019
- * // Select multiple items at once
1020
- * checkboxes.select(['option-a', 'option-c'])
1021
- *
1022
- * console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
1023
- * console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
1024
- *
1025
- * // Set item to mixed/indeterminate state
1026
- * checkboxes.mix('option-a')
1027
- * console.log(checkboxes.mixedIds) // Set { 'option-a' }
1028
- * console.log(checkboxes.selectedIds) // Set { 'option-c' } (option-a removed)
1029
- *
1030
- * // Toggle a mixed item selects it
1031
- * checkboxes.toggle('option-a')
1032
- * console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
1033
- * console.log(checkboxes.mixedIds) // Set {} (cleared)
1034
- * ```
1035
- */
1036
- declare function createGroup<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(_options?: GroupOptions): R;
1037
- /**
1038
- * Creates a new group context.
1039
- *
1040
- * @param options The options for the group context.
1041
- * @template Z The input ticket type.
1042
- * @template E The output ticket type.
1043
- * @template R The context type.
1044
- * @returns A new group context.
1045
- *
1046
- * @see https://0.vuetifyjs.com/composables/selection/use-group
1047
- *
1048
- * @example
1049
- * ```ts
1050
- * import { createGroupContext } from '@vuetify/v0'
1051
- *
1052
- * // With default namespace 'v0:group'
1053
- * export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext()
1054
- *
1055
- * // Or with custom namespace
1056
- * export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext({ namespace: 'my-group' })
1057
- *
1058
- * // In a parent component:
1059
- * provideMyGroup()
1060
- *
1061
- * // In a child component:
1062
- * const group = useMyGroup()
1063
- * ```
1064
- */
1065
- declare function createGroupContext<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(_options?: GroupContextOptions): ContextTrinity<R>;
1066
- /**
1067
- * Returns the current group instance.
1068
- *
1069
- * @param namespace The namespace for the group context. Defaults to `'v0:group'`.
1070
- * @template Z The input ticket type.
1071
- * @template E The output ticket type.
1072
- * @template R The context type.
1073
- * @returns The current group instance.
1074
- *
1075
- * @see https://0.vuetifyjs.com/composables/selection/use-group
1076
- *
1077
- * @example
1078
- * ```vue
1079
- * <script setup lang="ts">
1080
- * import { useGroup } from '@vuetify/v0'
1081
- *
1082
- * const group = useGroup()
1083
- * </script>
1084
- *
1085
- * <template>
1086
- * <div>
1087
- * <p>Selected: {{ group.selectedIds.size }}</p>
1088
- * </div>
1089
- * </template>
1090
- * ```
1091
- */
1092
- declare function useGroup<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(namespace?: string): R;
1093
- //#endregion
1094
- //#region src/composables/usePagination/index.d.ts
1095
- type PaginationTicket = {
1096
- type: 'page';
1097
- value: number;
1098
- } | {
1099
- type: 'ellipsis';
1100
- value: string;
1101
- };
1102
- interface PaginationContext {
1103
- /** Current page (1-indexed) */
1104
- page: ShallowRef<number>;
1105
- /** Items per page */
1106
- itemsPerPage: number;
1107
- /** Total number of items */
1108
- size: number;
1109
- /** Total number of pages (computed from size / itemsPerPage) */
1110
- pages: number;
1111
- /** Ellipsis character, or false if disabled */
1112
- ellipsis: string | false;
1113
- /** Visible page numbers and ellipsis for rendering */
1114
- items: ComputedRef<PaginationTicket[]>;
1115
- /** Start index of items on current page (0-indexed) */
1116
- pageStart: ComputedRef<number>;
1117
- /** End index of items on current page (exclusive, 0-indexed) */
1118
- pageStop: ComputedRef<number>;
1119
- /** Whether current page is the first page */
1120
- isFirst: ComputedRef<boolean>;
1121
- /** Whether current page is the last page */
1122
- isLast: ComputedRef<boolean>;
1123
- /** Go to first page */
1124
- first: () => void;
1125
- /** Go to last page */
1126
- last: () => void;
1127
- /** Go to next page */
1128
- next: () => void;
1129
- /** Go to previous page */
1130
- prev: () => void;
1131
- /** Go to specific page */
1132
- select: (value: number) => void;
1133
- }
1134
- interface PaginationOptions {
1135
- /** Initial page or ref for v-model (1-indexed). @default 1 */
1136
- page?: number | ShallowRef<number>;
1137
- /** Items per page. @default 10 */
1138
- itemsPerPage?: MaybeRefOrGetter<number>;
1139
- /** Total number of items. @default 0 */
1140
- size?: MaybeRefOrGetter<number>;
1141
- /** Maximum visible page buttons. @default 5 */
1142
- visible?: MaybeRefOrGetter<number>;
1143
- /** Ellipsis character. @default '…' */
1144
- ellipsis?: string | false;
1145
- }
1146
- interface PaginationContextOptions extends PaginationOptions {
1147
- /** Namespace for dependency injection */
1148
- namespace?: string;
1149
- }
1150
- /**
1151
- * Creates a pagination instance.
1152
- *
1153
- * @param options The options for the pagination instance.
1154
- * @returns A pagination context with navigation methods.
1155
- *
1156
- * @example
1157
- * ```ts
1158
- * import { createPagination } from '@vuetify/v0'
1159
- *
1160
- * // Basic usage
1161
- * const pagination = createPagination({ size: 100 })
1162
- * pagination.next()
1163
- * pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
1164
- *
1165
- * // With v-model (pass a ref)
1166
- * const page = ref(1)
1167
- * const pagination = createPagination({ page, size: 100 })
1168
- * // Mutating pagination.page or the passed ref syncs both
1169
- * ```
1170
- */
1171
- declare function createPagination(_options?: PaginationOptions): PaginationContext;
1172
- /**
1173
- * Creates a pagination context for dependency injection.
1174
- *
1175
- * @param options The options including namespace.
1176
- * @returns A trinity: [usePagination, providePagination, defaultContext]
1177
- *
1178
- * @example
1179
- * ```ts
1180
- * // With default namespace 'v0:pagination'
1181
- * const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
1182
- *
1183
- * // Or with custom namespace
1184
- * const [usePagination, providePaginationContext] = createPaginationContext({
1185
- * namespace: 'my-pagination',
1186
- * size: 50,
1187
- * })
1188
- *
1189
- * // Parent component
1190
- * providePaginationContext()
1191
- *
1192
- * // Child component
1193
- * const pagination = usePagination()
1194
- * pagination.next()
1195
- * ```
1196
- */
1197
- declare function createPaginationContext(_options?: PaginationContextOptions): ContextTrinity<PaginationContext>;
1198
- /**
1199
- * Returns the current pagination instance from context.
1200
- *
1201
- * @param namespace The namespace. @default 'v0:pagination'
1202
- * @returns The pagination context.
1203
- *
1204
- * @example
1205
- * ```vue
1206
- * <script setup lang="ts">
1207
- * import { usePagination } from '@vuetify/v0'
1208
- *
1209
- * const pagination = usePagination()
1210
- * </script>
1211
- *
1212
- * <template>
1213
- * <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
1214
- * <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
1215
- * </template>
1216
- * ```
1217
- */
1218
- declare function usePagination(namespace?: string): PaginationContext;
1219
- //#endregion
1220
- //#region src/composables/createSingle/index.d.ts
1221
- /**
1222
- * Input type for single selection tickets.
1223
- * Extend this interface to add custom properties.
1224
- */
1225
- interface SingleTicketInput<V = unknown> extends SelectionTicketInput<V> {}
1226
- /**
1227
- * Output type for single selection tickets.
1228
- * Includes all input properties plus selection methods.
1229
- */
1230
- type SingleTicket<Z extends SingleTicketInput = SingleTicketInput> = SelectionTicket<Z>;
1231
- /**
1232
- * Context returned by createSingle.
1233
- *
1234
- * @template Z The input ticket type.
1235
- * @template E The output ticket type.
1236
- */
1237
- interface SingleContext<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register' | 'onboard'> {
1238
- selectedId: ComputedRef<ID | undefined>;
1239
- selectedIndex: ComputedRef<number>;
1240
- selectedItem: ComputedRef<E | undefined>;
1241
- selectedValue: ComputedRef<E['value'] | undefined>;
1242
- /** Register a new ticket (accepts input type, returns output type) */
1243
- register: (ticket?: Partial<Z>) => E;
1244
- /** Onboard multiple tickets at once */
1245
- onboard: (registrations: Partial<Z>[]) => E[];
1246
- }
1247
- interface SingleOptions extends SelectionOptions {}
1248
- interface SingleContextOptions extends SelectionContextOptions {}
1249
- /**
1250
- * Creates a new single selection instance that enforces only one selected item at a time.
1251
- *
1252
- * Extends `createSelection` by automatically clearing previous selections when a new item is selected.
1253
- * Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
1254
- *
1255
- * @param options The options for the single selection instance.
1256
- * @template Z The input ticket type - what users provide to register().
1257
- * @template E The output ticket type - what users receive from get().
1258
- * @template R The context type.
1259
- * @returns A new single selection instance with single-selection enforcement.
1260
- *
1261
- * @remarks
1262
- * **Key Differences from `createSelection`:**
1263
- * - Automatically clears `selectedIds` before selecting a new item (enforces single selection)
1264
- * - Provides singular computed properties instead of plural sets
1265
- * - Perfect for tabs, radio buttons, theme selectors, and other single-choice UI components
1266
- *
1267
- * **Computed Properties:**
1268
- * - `selectedId`: The ID of the selected item (undefined if none selected)
1269
- * - `selectedItem`: The selected ticket object (undefined if none selected)
1270
- * - `selectedIndex`: The index of the selected item (-1 if none selected)
1271
- * - `selectedValue`: The value of the selected item (undefined if none selected)
1272
- *
1273
- * **Inheritance Chain:**
1274
- * `useRegistry` → `createSelection` → `createSingle` → `createStep`
1275
- *
1276
- * @see https://0.vuetifyjs.com/composables/selection/use-single
1277
- *
1278
- * @example
1279
- * ```ts
1280
- * import { createSingle } from '@vuetify/v0'
1281
- *
1282
- * const tabs = createSingle({ mandatory: true })
1283
- *
1284
- * tabs.onboard([
1285
- * { id: 'home', value: 'Home' },
1286
- * { id: 'about', value: 'About' },
1287
- * { id: 'contact', value: 'Contact' },
1288
- * ])
1289
- *
1290
- * tabs.first() // Select first tab
1291
- *
1292
- * console.log(tabs.selectedId.value) // 'home'
1293
- * console.log(tabs.selectedIndex.value) // 0
1294
- *
1295
- * tabs.select('about') // Switch to about tab
1296
- * console.log(tabs.selectedId.value) // 'about'
1297
- * console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
1298
- * ```
1299
- *
1300
- * @example
1301
- * ```ts
1302
- * // With custom ticket type
1303
- * interface TabTicket extends SingleTicketInput {
1304
- * label: string
1305
- * icon?: string
1306
- * }
1307
- *
1308
- * const tabs = createSingle<TabTicket>()
1309
- * tabs.register({ label: 'Home', icon: 'mdi-home' })
1310
- * ```
1311
- */
1312
- declare function createSingle<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(_options?: SingleOptions): R;
1313
- /**
1314
- * Creates a new single selection context.
1315
- *
1316
- * @param options The options for the single selection context.
1317
- * @template Z The input ticket type.
1318
- * @template E The output ticket type.
1319
- * @template R The context type.
1320
- * @returns A new single selection context.
1321
- *
1322
- * @see https://0.vuetifyjs.com/composables/selection/use-single
1323
- *
1324
- * @example
1325
- * ```ts
1326
- * import { createSingleContext } from '@vuetify/v0'
1327
- *
1328
- * // With default namespace 'v0:single'
1329
- * export const [useSingle, provideSingle, context] = createSingleContext()
1330
- *
1331
- * // In a parent component:
1332
- * provideSingle()
1333
- *
1334
- * // In a child component:
1335
- * const single = useSingle()
1336
- * single.select('tab-1')
1337
- * ```
1338
- */
1339
- declare function createSingleContext<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(_options?: SingleContextOptions): ContextTrinity<R>;
1340
- /**
1341
- * Returns the current single selection instance.
1342
- *
1343
- * @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
1344
- * @template Z The input ticket type.
1345
- * @template E The output ticket type.
1346
- * @template R The context type.
1347
- * @returns The current single selection instance.
1348
- *
1349
- * @see https://0.vuetifyjs.com/composables/selection/use-single
1350
- *
1351
- * @example
1352
- * ```vue
1353
- * <script setup lang="ts">
1354
- * import { useSingle } from '@vuetify/v0'
1355
- *
1356
- * const tabs = useSingle()
1357
- * </script>
1358
- *
1359
- * <template>
1360
- * <div>
1361
- * <p>Selected: {{ tabs.selectedId }}</p>
1362
- * </div>
1363
- * </template>
1364
- * ```
1365
- */
1366
- declare function useSingle<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(namespace?: string): R;
1367
- //#endregion
1368
- //#region src/composables/createStep/index.d.ts
1369
- /**
1370
- * Input type for step tickets.
1371
- * Extend this interface to add custom properties.
1372
- */
1373
- interface StepTicketInput<V = unknown> extends SingleTicketInput<V> {}
1374
- /**
1375
- * Output type for step tickets.
1376
- * Includes all input properties plus selection methods.
1377
- */
1378
- type StepTicket<Z extends StepTicketInput = StepTicketInput> = SingleTicket<Z>;
1379
- /**
1380
- * Context returned by createStep.
1381
- *
1382
- * @template Z The input ticket type.
1383
- * @template E The output ticket type.
1384
- */
1385
- interface StepContext<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>> extends Omit<SingleContext<Z, E>, 'register' | 'onboard'> {
1386
- /** Select the first Ticket in the collection */
1387
- first: () => void;
1388
- /** Select the last Ticket in the collection */
1389
- last: () => void;
1390
- /** Select the next Ticket based on current index */
1391
- next: () => void;
1392
- /** Select the previous Ticket based on current index */
1393
- prev: () => void;
1394
- /** Step through the collection by a given count */
1395
- step: (count: number) => void;
1396
- /** Register a new ticket (accepts input type, returns output type) */
1397
- register: (ticket?: Partial<Z>) => E;
1398
- /** Onboard multiple tickets at once */
1399
- onboard: (registrations: Partial<Z>[]) => E[];
1400
- }
1401
- interface StepOptions extends SingleOptions {
1402
- /**
1403
- * Enable circular navigation (wrapping at boundaries).
1404
- * - true: Navigation wraps around (carousel behavior)
1405
- * - false: Navigation stops at boundaries (pagination behavior)
1406
- * @default false
1407
- */
1408
- circular?: boolean;
1409
- }
1410
- interface StepContextOptions extends SingleContextOptions {
1411
- /**
1412
- * Enable circular navigation (wrapping at boundaries).
1413
- * - true: Navigation wraps around (carousel behavior)
1414
- * - false: Navigation stops at boundaries (pagination behavior)
1415
- * @default false
1416
- */
1417
- circular?: boolean;
1418
- }
1419
- /**
1420
- * Creates a new step instance with navigation through items.
1421
- *
1422
- * Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
1423
- * for sequential navigation. Supports both circular (wrapping) and bounded (stopping at edges) modes.
1424
- *
1425
- * @param options The options for the step instance.
1426
- * @template Z The type of the step ticket.
1427
- * @template E The type of the step context.
1428
- * @returns A new step instance with navigation methods.
1429
- *
1430
- * @remarks
1431
- * **Key Features:**
1432
- * - **Configurable Navigation**: `circular: true` for wrapping, `false` for bounded (default: false)
1433
- * - **Disabled Item Skipping**: Automatically skips disabled items during navigation
1434
- * - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
1435
- * - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
1436
- *
1437
- * **Navigation Methods:**
1438
- * - `first()`: Select first non-disabled item
1439
- * - `last()`: Select last non-disabled item
1440
- * - `next()`: Move to next item (wraps if circular, stops at end if bounded)
1441
- * - `prev()`: Move to previous item (wraps if circular, stops at start if bounded)
1442
- * - `step(count)`: Move by `count` positions (negative for backward)
1443
- *
1444
- * **Circular Mode (`circular: true`):**
1445
- * - Uses modulo arithmetic for wrapping: `((index % length) + length) % length`
1446
- * - Works correctly with negative indexes and large step counts
1447
- * - Perfect for carousels, theme switchers, infinite scrolling
1448
- *
1449
- * **Bounded Mode (`circular: false`, default):**
1450
- * - Navigation stops at boundaries (no wrapping)
1451
- * - `next()` on last item does nothing
1452
- * - `prev()` on first item does nothing
1453
- * - Perfect for pagination, wizards with explicit completion, forms
1454
- *
1455
- * **Inheritance Chain:**
1456
- * `useRegistry` → `createSelection` → `createSingle` → `createStep`
1457
- *
1458
- * @see https://0.vuetifyjs.com/composables/selection/use-step
1459
- *
1460
- * @example
1461
- * ```ts
1462
- * import { createStep } from '@vuetify/v0'
1463
- *
1464
- * // Bounded navigation (default) - for pagination
1465
- * const pagination = createStep({ circular: false })
1466
- * pagination.onboard([
1467
- * { id: 'page-1', value: 1 },
1468
- * { id: 'page-2', value: 2 },
1469
- * { id: 'page-3', value: 3 },
1470
- * ])
1471
- * pagination.first() // Select page 1
1472
- * pagination.prev() // Does nothing (already at first)
1473
- * pagination.next() // Select page 2
1474
- *
1475
- * // Circular navigation - for carousels
1476
- * const carousel = createStep({ circular: true })
1477
- * carousel.onboard([
1478
- * { id: 'slide-1', value: 'First' },
1479
- * { id: 'slide-2', value: 'Second' },
1480
- * { id: 'slide-3', value: 'Third' },
1481
- * ])
1482
- * carousel.first()
1483
- * carousel.prev() // Wraps to 'slide-3'
1484
- * carousel.next() // Wraps to 'slide-1'
1485
- * ```
1486
- */
1487
- declare function createStep<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(_options?: StepOptions): R;
1488
- /**
1489
- * Creates a new step context.
1490
- *
1491
- * @param options The options for the step context.
1492
- * @template Z The input ticket type.
1493
- * @template E The output ticket type.
1494
- * @template R The context type.
1495
- * @returns A new step context.
1496
- *
1497
- * @see https://0.vuetifyjs.com/composables/selection/use-step
1498
- *
1499
- * @example
1500
- * ```ts
1501
- * import { createStepContext } from '@vuetify/v0'
1502
- *
1503
- * // With default namespace 'v0:step'
1504
- * export const [useStep, provideStep, context] = createStepContext()
1505
- *
1506
- * // In a parent component:
1507
- * provideStep()
1508
- *
1509
- * // In a child component:
1510
- * const context = useStep()
1511
- * context.next() // Progress to next step
1512
- * ```
1513
- */
1514
- declare function createStepContext<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(_options?: StepContextOptions): ContextTrinity<R>;
1515
- /**
1516
- * Returns the current step instance.
1517
- *
1518
- * @param namespace The namespace for the step context. Defaults to `'v0:step'`.
1519
- * @template Z The input ticket type.
1520
- * @template E The output ticket type.
1521
- * @template R The context type.
1522
- * @returns The current step instance.
1523
- *
1524
- * @see https://0.vuetifyjs.com/composables/selection/use-step
1525
- *
1526
- * @example
1527
- * ```vue
1528
- * <script setup lang="ts">
1529
- * import { useStep } from '@vuetify/v0'
1530
- *
1531
- * const wizard = useStep()
1532
- * </script>
1533
- *
1534
- * <template>
1535
- * <div>
1536
- * <p>Current step: {{ wizard.selectedIndex }}</p>
1537
- * <button @click="wizard.next()">Next</button>
1538
- * </div>
1539
- * </template>
1540
- * ```
1541
- */
1542
- declare function useStep<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(namespace?: string): R;
1543
- //#endregion
1544
- export { createGroupContext as A, RegistryContext as B, usePagination as C, GroupTicket as D, GroupOptions as E, SelectionTicket as F, createRegistry as G, RegistryEventCallback as H, SelectionTicketInput as I, createTrinity as J, createRegistryContext as K, createSelection as L, SelectionContext as M, SelectionContextOptions as N, GroupTicketInput as O, SelectionOptions as P, createSelectionContext as R, createPaginationContext as S, GroupContextOptions as T, RegistryOptions as U, RegistryContextOptions as V, RegistryTicket as W, PaginationContext as _, StepTicketInput as a, PaginationTicket as b, useStep as c, SingleOptions as d, SingleTicket as f, useSingle as g, createSingleContext as h, StepTicket as i, useGroup as j, createGroup as k, SingleContext as l, createSingle as m, StepContextOptions as n, createStep as o, SingleTicketInput as p, ContextTrinity as q, StepOptions as r, createStepContext as s, StepContext as t, SingleContextOptions as u, PaginationContextOptions as v, GroupContext as w, createPagination as x, PaginationOptions as y, useSelection as z };