@vuetify/v0 0.1.1 → 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.
- package/README.md +20 -3
- package/dist/browser/index.js +5662 -3984
- package/dist/components/index.d.mts +7 -4
- package/dist/components/index.mjs +5 -5
- package/dist/{components-BOipMGkD.mjs → components-C0zEvP7w.mjs} +580 -89
- package/dist/composables/index.d.mts +4 -5
- package/dist/composables/index.mjs +4 -4
- package/dist/constants/index.d.mts +1 -1
- package/dist/constants/index.mjs +1 -1
- package/dist/date/index.d.mts +1 -1
- package/dist/date/index.mjs +19 -15
- package/dist/{globals-qE_M6ZhX.mjs → globals-BwYsH-rt.mjs} +1 -1
- package/dist/{index-DmNXO254.d.mts → index-2wh69fk5.d.mts} +2782 -460
- package/dist/{index-DlxrzbvZ.d.mts → index-BLK67J_-.d.mts} +41 -1
- package/dist/{index-CoO8LW8o.d.mts → index-DBZTizq2.d.mts} +1 -1
- package/dist/{index-Bx6Ke-u_.d.mts → index-DFM5iBqh.d.mts} +906 -342
- package/dist/index.d.mts +7 -8
- package/dist/index.mjs +5 -5
- package/dist/json/attributes.json +140 -0
- package/dist/json/importMap.json +36 -0
- package/dist/json/tags.json +75 -0
- package/dist/json/web-types.json +440 -1
- package/dist/types/index.d.mts +2 -2
- package/dist/{useClickOutside-DcrXfUVx.mjs → useClickOutside-DrkNYxDe.mjs} +4200 -3013
- package/dist/utilities/index.d.mts +2 -2
- package/dist/utilities/index.mjs +2 -1
- package/dist/{utilities-B58TiS_S.mjs → utilities-BbKjbXTx.mjs} +9 -0
- package/package.json +4 -3
- package/dist/index-qSuLpob3.d.mts +0 -1544
- /package/dist/{adapter-L4Php1_S.d.mts → adapter-D95FHAtt.d.mts} +0 -0
- /package/dist/{index-cPmI99rd.d.mts → index-Bmem4l8m.d.mts} +0 -0
|
@@ -1,10 +1,1523 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { i as Extensible, o as ID, s as MaybeArray } from "./index-BLK67J_-.mjs";
|
|
2
|
+
import { t as DateAdapter } from "./adapter-D95FHAtt.mjs";
|
|
3
|
+
import * as vue820 from "vue";
|
|
4
4
|
import { App, ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef, UnwrapNestedRefs, WatchSource } from "vue";
|
|
5
5
|
|
|
6
|
+
//#region src/composables/createTrinity/index.d.ts
|
|
7
|
+
|
|
8
|
+
type ContextTrinity<Z = unknown> = readonly [() => Z, (context?: Z, app?: App) => Z, Z];
|
|
9
|
+
/**
|
|
10
|
+
* Creates a new trinity for a context composable and its provider.
|
|
11
|
+
*
|
|
12
|
+
* @param useContext The function that retrieves/uses the context (typically named `useContext`).
|
|
13
|
+
* @param provideContext The function that provides the context to descendants.
|
|
14
|
+
* @param context The default context instance to use when no custom context is provided.
|
|
15
|
+
* @template Z The type of the context.
|
|
16
|
+
* @returns A readonly tuple containing: [useContext function, provideContext wrapper function, default context instance].
|
|
17
|
+
*
|
|
18
|
+
* @remarks The trinity pattern is a foundational pattern used throughout the codebase for creating reusable context systems. It provides three related elements:
|
|
19
|
+
*
|
|
20
|
+
* 1. A function to retrieve/use the context
|
|
21
|
+
* 2. A function to provide the context (with default value support)
|
|
22
|
+
* 3. The default context instance
|
|
23
|
+
*
|
|
24
|
+
* The returned tuple is readonly (using `as const`) to ensure proper type inference.
|
|
25
|
+
*
|
|
26
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-trinity#create-trinity
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```ts
|
|
30
|
+
* interface MyContext {
|
|
31
|
+
* foo: string
|
|
32
|
+
* bar: number
|
|
33
|
+
* }
|
|
34
|
+
*
|
|
35
|
+
* export function createMyFeature<E extends MyContext = MyContext>() {
|
|
36
|
+
* const [useContext, _provideContext] = createContext<E>('my-context')
|
|
37
|
+
*
|
|
38
|
+
* const context = { foo: 'hello', bar: 42 }
|
|
39
|
+
*
|
|
40
|
+
* function provideContext (_context: E = context, app?: App): E {
|
|
41
|
+
* return _provideContext(_context, app)
|
|
42
|
+
* }
|
|
43
|
+
*
|
|
44
|
+
* return createTrinity<E>(useContext, provideContext, context)
|
|
45
|
+
* }
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
declare function createTrinity<Z = unknown>(useContext: () => Z, provideContext: (_context?: Z, app?: App) => Z, context: Z): ContextTrinity<Z>;
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region src/composables/createRegistry/index.d.ts
|
|
51
|
+
interface RegistryTicket<V = unknown> {
|
|
52
|
+
/** The unique identifier. Is randomly generated if not provided. */
|
|
53
|
+
id: ID;
|
|
54
|
+
/**
|
|
55
|
+
* The index of the ticket in the registry.
|
|
56
|
+
*
|
|
57
|
+
* @remarks Automatically managed by the registry. Updated during reindexing. It's not recommended to manually set this.
|
|
58
|
+
*/
|
|
59
|
+
index: number;
|
|
60
|
+
/** The value associated with the ticket. If not provided, it defaults to the index. */
|
|
61
|
+
value: V;
|
|
62
|
+
/**
|
|
63
|
+
* Whether the value is derived from index.
|
|
64
|
+
*
|
|
65
|
+
* @remarks Set to true when no explicit value is provided during registration. It's not recommended to manually set this.
|
|
66
|
+
*/
|
|
67
|
+
valueIsIndex: boolean;
|
|
68
|
+
}
|
|
69
|
+
/** Valid event names for registry operations */
|
|
70
|
+
type RegistryEventName = 'register:ticket' | 'unregister:ticket' | 'update:ticket' | 'clear:registry' | 'reindex:registry';
|
|
71
|
+
/** Maps event names to their payload types */
|
|
72
|
+
type RegistryEventMap<Z extends RegistryTicket> = {
|
|
73
|
+
'register:ticket': Z;
|
|
74
|
+
'unregister:ticket': Z;
|
|
75
|
+
'update:ticket': Z;
|
|
76
|
+
'clear:registry': undefined;
|
|
77
|
+
'reindex:registry': undefined;
|
|
78
|
+
};
|
|
79
|
+
/** Callback signature for registry event listeners */
|
|
80
|
+
type RegistryEventCallback<Z extends RegistryTicket = RegistryTicket, K$1 extends RegistryEventName = RegistryEventName> = (data: RegistryEventMap<Z>[K$1]) => void;
|
|
81
|
+
/** Resolves callback type: typed for known events, unknown for custom events */
|
|
82
|
+
type EventHandler$1<Z extends RegistryTicket, K$1 extends string> = K$1 extends RegistryEventName ? (data: RegistryEventMap<Z>[K$1]) => void : (data: unknown) => void;
|
|
83
|
+
/** Resolves payload type: typed for known events, unknown for custom events */
|
|
84
|
+
type EventPayload<Z extends RegistryTicket, K$1 extends string> = K$1 extends RegistryEventName ? RegistryEventMap<Z>[K$1] : unknown;
|
|
85
|
+
interface RegistryContext<Z extends RegistryTicket = RegistryTicket> {
|
|
86
|
+
/**
|
|
87
|
+
* The collection of tickets in the registry
|
|
88
|
+
*
|
|
89
|
+
* @template ID The type of the ticket ID.
|
|
90
|
+
* @template Z The type of the registry ticket.
|
|
91
|
+
*
|
|
92
|
+
* @remarks Read-only view of the internal collection. Use `register`, `unregister`, `upsert`, and `clear` methods to modify.
|
|
93
|
+
*/
|
|
94
|
+
collection: ReadonlyMap<ID, Z>;
|
|
95
|
+
/**
|
|
96
|
+
* Clear the entire registry
|
|
97
|
+
*
|
|
98
|
+
* @remarks Removes all tickets from the registry. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
99
|
+
*
|
|
100
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#clear
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```ts
|
|
104
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
105
|
+
*
|
|
106
|
+
* const registry = createRegistry()
|
|
107
|
+
*
|
|
108
|
+
* registry.register({ id: 'ticket-1' })
|
|
109
|
+
* registry.register({ id: 'ticket-2' })
|
|
110
|
+
*
|
|
111
|
+
* console.log(registry.size) // 2
|
|
112
|
+
*
|
|
113
|
+
* registry.clear()
|
|
114
|
+
*
|
|
115
|
+
* console.log(registry.size) // 0
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
clear: () => void;
|
|
119
|
+
/**
|
|
120
|
+
* Check if a ticket exists by ID
|
|
121
|
+
*
|
|
122
|
+
* @param id The ID of the ticket to check.
|
|
123
|
+
* @remarks Calls `collection.has` internally.
|
|
124
|
+
*
|
|
125
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#has
|
|
126
|
+
*
|
|
127
|
+
* @example
|
|
128
|
+
* ```ts
|
|
129
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
130
|
+
*
|
|
131
|
+
* const registry = createRegistry()
|
|
132
|
+
*
|
|
133
|
+
* registry.register({ id: 'ticket-id' })
|
|
134
|
+
*
|
|
135
|
+
* const exists = registry.has('ticket-id') // true
|
|
136
|
+
* ```
|
|
137
|
+
*/
|
|
138
|
+
has: (id: ID) => boolean;
|
|
139
|
+
/**
|
|
140
|
+
* Get all registered IDs
|
|
141
|
+
*
|
|
142
|
+
* @remarks Calls `collection.keys` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
143
|
+
*
|
|
144
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#keys
|
|
145
|
+
*
|
|
146
|
+
* @example
|
|
147
|
+
* ```ts
|
|
148
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
149
|
+
*
|
|
150
|
+
* const registry = createRegistry()
|
|
151
|
+
*
|
|
152
|
+
* registry.register({ id: 'ticket-1' })
|
|
153
|
+
* registry.register({ id: 'ticket-2' })
|
|
154
|
+
*
|
|
155
|
+
* const ids = registry.keys() // ['ticket-1', 'ticket-2']
|
|
156
|
+
* ```
|
|
157
|
+
*/
|
|
158
|
+
keys: () => readonly ID[];
|
|
159
|
+
/**
|
|
160
|
+
* Browse for an ID(s) by value
|
|
161
|
+
*
|
|
162
|
+
* @param value The value to browse for.
|
|
163
|
+
* @remarks Returns an array of IDs that share the given value, or undefined if no match is found.
|
|
164
|
+
*
|
|
165
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#browse
|
|
166
|
+
*
|
|
167
|
+
* @example
|
|
168
|
+
* ```ts
|
|
169
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
170
|
+
*
|
|
171
|
+
* const registry = createRegistry()
|
|
172
|
+
*
|
|
173
|
+
* registry.register({ id: 'ticket-1', value: 'common-value' })
|
|
174
|
+
* registry.register({ id: 'ticket-2', value: 'common-value' })
|
|
175
|
+
* registry.register({ id: 'ticket-3', value: 'unique-value' })
|
|
176
|
+
*
|
|
177
|
+
* const common = registry.browse('common-value') // ['ticket-1', 'ticket-2']
|
|
178
|
+
* const unique = registry.browse('unique-value') // ['ticket-3']
|
|
179
|
+
* ```
|
|
180
|
+
*/
|
|
181
|
+
browse: (value: Z['value']) => ID[] | undefined;
|
|
182
|
+
/**
|
|
183
|
+
* lookup a ticket by index number
|
|
184
|
+
*
|
|
185
|
+
* @param index The index number to lookup.
|
|
186
|
+
* @remarks Maps do not support indexing by default, this method provides a way to retrieve an ID based on its index in the registry.
|
|
187
|
+
*
|
|
188
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#lookup
|
|
189
|
+
*
|
|
190
|
+
* @example
|
|
191
|
+
* ```ts
|
|
192
|
+
* const registry = createRegistry()
|
|
193
|
+
*
|
|
194
|
+
* registry.register({ id: 'ticket-1' })
|
|
195
|
+
* registry.register({ id: 'ticket-2' })
|
|
196
|
+
*
|
|
197
|
+
* const ticket1 = registry.lookup(0) // 'ticket-1'
|
|
198
|
+
* const ticket2 = registry.lookup(1) // 'ticket-2'
|
|
199
|
+
* ```
|
|
200
|
+
*/
|
|
201
|
+
lookup: (index: number) => ID | undefined;
|
|
202
|
+
/**
|
|
203
|
+
* Get a ticket by ID
|
|
204
|
+
*
|
|
205
|
+
* @param id The ID of the ticket to retrieve.
|
|
206
|
+
* @remarks Calls `collection.get` internally.
|
|
207
|
+
*
|
|
208
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#get
|
|
209
|
+
*
|
|
210
|
+
* @example
|
|
211
|
+
* ```ts
|
|
212
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
213
|
+
*
|
|
214
|
+
* const registry = createRegistry()
|
|
215
|
+
*
|
|
216
|
+
* registry.register({ id: 'ticket-id', value: 'some-value' })
|
|
217
|
+
*
|
|
218
|
+
* const ticket = registry.get('ticket-id') // { id: 'ticket-id', index: 0, value: 'some-value', ... }
|
|
219
|
+
* ```
|
|
220
|
+
*/
|
|
221
|
+
get: (id: ID) => Z | undefined;
|
|
222
|
+
/**
|
|
223
|
+
* Update or insert a ticket by ID
|
|
224
|
+
*
|
|
225
|
+
* @param id The ID of the ticket to upsert.
|
|
226
|
+
* @param ticket The partial ticket data to update or insert.
|
|
227
|
+
* @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()`.
|
|
228
|
+
*
|
|
229
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#upsert
|
|
230
|
+
*
|
|
231
|
+
* @example
|
|
232
|
+
* ```ts
|
|
233
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
234
|
+
*
|
|
235
|
+
* const registry = createRegistry()
|
|
236
|
+
*
|
|
237
|
+
* // Insert a new ticket
|
|
238
|
+
* const ticket = registry.upsert('ticket-id', { value: 'initial-value' })
|
|
239
|
+
*
|
|
240
|
+
* // Update the existing ticket
|
|
241
|
+
* const patched = registry.upsert('ticket-id', { value: 'updated-value' })
|
|
242
|
+
* ```
|
|
243
|
+
*/
|
|
244
|
+
upsert: (id: ID, ticket?: Partial<Z>) => Z;
|
|
245
|
+
/**
|
|
246
|
+
* Get all values of registered tickets
|
|
247
|
+
*
|
|
248
|
+
* @remarks Calls `collection.values` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
249
|
+
*
|
|
250
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#values
|
|
251
|
+
*
|
|
252
|
+
* @example
|
|
253
|
+
* ```ts
|
|
254
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
255
|
+
*
|
|
256
|
+
* const registry = createRegistry()
|
|
257
|
+
*
|
|
258
|
+
* registry.register({ id: 'ticket-1', value: 'value-1' })
|
|
259
|
+
* registry.register({ id: 'ticket-2', value: 'value-2' })
|
|
260
|
+
*
|
|
261
|
+
* const values = registry.values() // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
|
|
262
|
+
* ```
|
|
263
|
+
*/
|
|
264
|
+
values: () => readonly Z[];
|
|
265
|
+
/**
|
|
266
|
+
* Get all entries of registered tickets
|
|
267
|
+
*
|
|
268
|
+
* @remarks Calls `collection.entries` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
269
|
+
*
|
|
270
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#entries
|
|
271
|
+
*
|
|
272
|
+
* @example
|
|
273
|
+
* ```ts
|
|
274
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
275
|
+
*
|
|
276
|
+
* const registry = createRegistry()
|
|
277
|
+
*
|
|
278
|
+
* registry.register({ id: 'ticket-1', value: 'value-1' })
|
|
279
|
+
* registry.register({ id: 'ticket-2', value: 'value-2' })
|
|
280
|
+
*
|
|
281
|
+
* const entries = registry.entries() // [['ticket-1', { id: 'ticket-1', ... }], ['ticket-2', { id: 'ticket-2', ... }]]
|
|
282
|
+
* ```
|
|
283
|
+
*/
|
|
284
|
+
entries: () => readonly [ID, Z][];
|
|
285
|
+
/**
|
|
286
|
+
* Register a new ticket
|
|
287
|
+
*
|
|
288
|
+
* @param ticket The partial ticket data to register.
|
|
289
|
+
* @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()`.
|
|
290
|
+
*
|
|
291
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#register
|
|
292
|
+
*
|
|
293
|
+
* @example
|
|
294
|
+
* ```ts
|
|
295
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
296
|
+
*
|
|
297
|
+
* const registry = createRegistry()
|
|
298
|
+
*
|
|
299
|
+
* const ticket = registry.register()
|
|
300
|
+
*
|
|
301
|
+
* console.log(ticket) // { id: 'generated-id', index: 0, value: 0, valueIsIndex: true }
|
|
302
|
+
* ```
|
|
303
|
+
*/
|
|
304
|
+
register: (ticket?: Partial<Z>) => Z;
|
|
305
|
+
/**
|
|
306
|
+
* Unregister a ticket by ID
|
|
307
|
+
*
|
|
308
|
+
* @param id The ID of the ticket to unregister.
|
|
309
|
+
* @remarks Removes the ticket from the registry and reindexes the remaining tickets. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
310
|
+
*
|
|
311
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#unregister
|
|
312
|
+
*
|
|
313
|
+
* @example
|
|
314
|
+
* ```ts
|
|
315
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
316
|
+
*
|
|
317
|
+
* const registry = createRegistry()
|
|
318
|
+
*
|
|
319
|
+
* registry.register({ id: 'ticket-id' })
|
|
320
|
+
*
|
|
321
|
+
* registry.unregister('ticket-id')
|
|
322
|
+
* ```
|
|
323
|
+
*/
|
|
324
|
+
unregister: (id: ID) => void;
|
|
325
|
+
/**
|
|
326
|
+
* Reset the index directory and update all tickets
|
|
327
|
+
*
|
|
328
|
+
* @remarks Rebuilds the internal index mapping and ensures all tickets have correct index values. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
329
|
+
*
|
|
330
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#reindex
|
|
331
|
+
*
|
|
332
|
+
* @example
|
|
333
|
+
* ```ts
|
|
334
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
335
|
+
*
|
|
336
|
+
* const registry = createRegistry()
|
|
337
|
+
*
|
|
338
|
+
* registry.register({ id: 'ticket-1' })
|
|
339
|
+
* registry.register({ id: 'ticket-2' })
|
|
340
|
+
*
|
|
341
|
+
* // After some operations that may affect indexing
|
|
342
|
+
* registry.reindex()
|
|
343
|
+
* ```
|
|
344
|
+
*/
|
|
345
|
+
reindex: () => void;
|
|
346
|
+
/**
|
|
347
|
+
* Seek for a ticket based on direction and optional predicate
|
|
348
|
+
*
|
|
349
|
+
* @param direction The direction to seek ('first' or 'last'). Defaults to 'first'.
|
|
350
|
+
* @param from The index to start seeking from. Defaults to the beginning or end based on direction.
|
|
351
|
+
* @param predicate An optional function to test each ticket. The first ticket that satisfies the predicate will be returned.
|
|
352
|
+
* @remarks This method allows for flexible searching within the registry, either from the start or end, and can filter tickets based on custom criteria.
|
|
353
|
+
*
|
|
354
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#seek
|
|
355
|
+
*
|
|
356
|
+
* @example
|
|
357
|
+
* ```ts
|
|
358
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
359
|
+
*
|
|
360
|
+
* const registry = createRegistry()
|
|
361
|
+
*
|
|
362
|
+
* registry.register({ id: 'ticket-1', value: 'apple' })
|
|
363
|
+
* registry.register({ id: 'ticket-2', value: 'banana' })
|
|
364
|
+
* registry.register({ id: 'ticket-3', value: 'cherry' })
|
|
365
|
+
*
|
|
366
|
+
* // Seek the first ticket
|
|
367
|
+
* const first = registry.seek('first')
|
|
368
|
+
*
|
|
369
|
+
* // Seek the last ticket
|
|
370
|
+
* const last = registry.seek('last')
|
|
371
|
+
*
|
|
372
|
+
* // Seek the first ticket with value 'banana'
|
|
373
|
+
* const banana = registry.seek('first', undefined, ticket => ticket.value === 'banana')
|
|
374
|
+
*
|
|
375
|
+
* // Seek from index 1 to find the next ticket with value starting with 'c'
|
|
376
|
+
* const cherry = registry.seek('first', 1, ticket => (ticket.value as string).startsWith('c'))
|
|
377
|
+
* ```
|
|
378
|
+
*/
|
|
379
|
+
seek: (direction?: 'first' | 'last', from?: number, predicate?: (ticket: Z) => boolean) => Z | undefined;
|
|
380
|
+
/**
|
|
381
|
+
* Listen for registry events
|
|
382
|
+
*
|
|
383
|
+
* @param event The name of the event to listen for.
|
|
384
|
+
* @param cb The callback function to invoke when the event is emitted.
|
|
385
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
386
|
+
* Supported events:
|
|
387
|
+
* - `register:ticket` - Emitted when a ticket is registered, receives the ticket as argument
|
|
388
|
+
* - `unregister:ticket` - Emitted when a ticket is unregistered, receives the ticket as argument
|
|
389
|
+
* - `update:ticket` - Emitted when a ticket is updated, receives the updated ticket as argument
|
|
390
|
+
* - `clear:registry` - Emitted when the registry is cleared
|
|
391
|
+
* - `reindex:registry` - Emitted when the registry is reindexed
|
|
392
|
+
*
|
|
393
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#on
|
|
394
|
+
*
|
|
395
|
+
* @example
|
|
396
|
+
* ```ts
|
|
397
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
398
|
+
*
|
|
399
|
+
* const registry = createRegistry({ events: true })
|
|
400
|
+
*
|
|
401
|
+
* registry.on('register:ticket', (ticket) => {
|
|
402
|
+
* console.log('Ticket registered:', ticket)
|
|
403
|
+
* })
|
|
404
|
+
*
|
|
405
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
406
|
+
* ```
|
|
407
|
+
*/
|
|
408
|
+
on: <K$1 extends Extensible<RegistryEventName>>(event: K$1, cb: EventHandler$1<Z, K$1>) => void;
|
|
409
|
+
/**
|
|
410
|
+
* Stop listening for registry events
|
|
411
|
+
*
|
|
412
|
+
* @param event The name of the event to stop listening for.
|
|
413
|
+
* @param cb The callback function to remove.
|
|
414
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
415
|
+
*
|
|
416
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#off
|
|
417
|
+
*
|
|
418
|
+
* @example
|
|
419
|
+
* ```ts
|
|
420
|
+
* import { onScopeDispose } from 'vue'
|
|
421
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
422
|
+
*
|
|
423
|
+
* const registry = createRegistry({ events: true })
|
|
424
|
+
*
|
|
425
|
+
* function onRegister(ticket) {
|
|
426
|
+
* console.log('Ticket registered:', ticket)
|
|
427
|
+
* }
|
|
428
|
+
*
|
|
429
|
+
* registry.on('register:ticket', onRegister)
|
|
430
|
+
*
|
|
431
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
432
|
+
*
|
|
433
|
+
* onScopeDispose(() => {
|
|
434
|
+
* registry.off('register:ticket', onRegister)
|
|
435
|
+
* })
|
|
436
|
+
* ```
|
|
437
|
+
*/
|
|
438
|
+
off: <K$1 extends Extensible<RegistryEventName>>(event: K$1, cb: EventHandler$1<Z, K$1>) => void;
|
|
439
|
+
/**
|
|
440
|
+
* Emit an event with data
|
|
441
|
+
*
|
|
442
|
+
* @param event The name of the event to emit.
|
|
443
|
+
* @param data The data to pass to event listeners.
|
|
444
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
445
|
+
*
|
|
446
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#emit
|
|
447
|
+
*
|
|
448
|
+
* @example
|
|
449
|
+
* ```ts
|
|
450
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
451
|
+
*
|
|
452
|
+
* const registry = createRegistry({ events: true })
|
|
453
|
+
*
|
|
454
|
+
* registry.on('custom-event', (data) => {
|
|
455
|
+
* console.log('Custom event received:', data)
|
|
456
|
+
* })
|
|
457
|
+
*
|
|
458
|
+
* registry.emit('custom-event', { message: 'Hello, World!' }) // Console: Custom event received: { message: 'Hello, World!' }
|
|
459
|
+
* ```
|
|
460
|
+
*/
|
|
461
|
+
emit: <K$1 extends Extensible<RegistryEventName>>(event: K$1, data: EventPayload<Z, K$1>) => void;
|
|
462
|
+
/**
|
|
463
|
+
* Clears the registry and removes all listeners
|
|
464
|
+
*
|
|
465
|
+
* @remarks Disposes of the registry by clearing all tickets and removing all event listeners.
|
|
466
|
+
*
|
|
467
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#dispose
|
|
468
|
+
*
|
|
469
|
+
* @example
|
|
470
|
+
* ```ts
|
|
471
|
+
* import { onScopeDispose } from 'vue'
|
|
472
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
473
|
+
*
|
|
474
|
+
* const registry = createRegistry({ events: true })
|
|
475
|
+
*
|
|
476
|
+
* registry.register({ id: 'ticket-id' })
|
|
477
|
+
*
|
|
478
|
+
* onScopeDispose(() => {
|
|
479
|
+
* registry.dispose()
|
|
480
|
+
* })
|
|
481
|
+
* ```
|
|
482
|
+
*/
|
|
483
|
+
dispose: () => void;
|
|
484
|
+
/**
|
|
485
|
+
* Onboard multiple tickets at once
|
|
486
|
+
*
|
|
487
|
+
* @param registrations An array of partial ticket data to register.
|
|
488
|
+
* @remarks Registers multiple tickets in a single operation and returns the array of registered tickets.
|
|
489
|
+
*
|
|
490
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#onboard
|
|
491
|
+
*
|
|
492
|
+
* @example
|
|
493
|
+
* ```ts
|
|
494
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
495
|
+
*
|
|
496
|
+
* const registry = createRegistry()
|
|
497
|
+
*
|
|
498
|
+
* const tickets = registry.onboard([
|
|
499
|
+
* { id: 'ticket-1', value: 'value-1' },
|
|
500
|
+
* { id: 'ticket-2', value: 'value-2' },
|
|
501
|
+
* ])
|
|
502
|
+
*
|
|
503
|
+
* console.log(tickets) // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
|
|
504
|
+
* ```
|
|
505
|
+
*/
|
|
506
|
+
onboard: (registrations: Partial<Z>[]) => Z[];
|
|
507
|
+
/**
|
|
508
|
+
* Offboard multiple tickets at once
|
|
509
|
+
*
|
|
510
|
+
* @param ids An array of ticket IDs to unregister.
|
|
511
|
+
* @remarks Unregisters multiple tickets in a single operation with optimized reindexing.
|
|
512
|
+
*
|
|
513
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#offboard
|
|
514
|
+
*
|
|
515
|
+
* @example
|
|
516
|
+
* ```ts
|
|
517
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
518
|
+
*
|
|
519
|
+
* const registry = createRegistry()
|
|
520
|
+
*
|
|
521
|
+
* registry.onboard([
|
|
522
|
+
* { id: 'ticket-1', value: 'value-1' },
|
|
523
|
+
* { id: 'ticket-2', value: 'value-2' },
|
|
524
|
+
* { id: 'ticket-3', value: 'value-3' },
|
|
525
|
+
* ])
|
|
526
|
+
*
|
|
527
|
+
* registry.offboard(['ticket-1', 'ticket-3'])
|
|
528
|
+
*
|
|
529
|
+
* console.log(registry.size) // 1
|
|
530
|
+
* ```
|
|
531
|
+
*/
|
|
532
|
+
offboard: (ids: ID[]) => void;
|
|
533
|
+
/**
|
|
534
|
+
* The number of tickets in the registry
|
|
535
|
+
*
|
|
536
|
+
* @remarks Reflects the current size of the internal ticket collection.
|
|
537
|
+
*
|
|
538
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#size
|
|
539
|
+
*
|
|
540
|
+
* @example
|
|
541
|
+
* ```ts
|
|
542
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
543
|
+
*
|
|
544
|
+
* const registry = createRegistry()
|
|
545
|
+
*
|
|
546
|
+
* registry.register({ id: 'ticket-1' })
|
|
547
|
+
* registry.register({ id: 'ticket-2' })
|
|
548
|
+
*
|
|
549
|
+
* console.log(registry.size) // 2
|
|
550
|
+
* ```
|
|
551
|
+
*/
|
|
552
|
+
size: number;
|
|
553
|
+
/**
|
|
554
|
+
* Execute operations in a batch, deferring cache invalidation and event emission until complete
|
|
555
|
+
*
|
|
556
|
+
* @param fn The function containing batch operations.
|
|
557
|
+
* @returns The return value of the batch function.
|
|
558
|
+
* @remarks Useful for bulk operations like onboard(). Invalidation and events happen once at the end, not after each operation.
|
|
559
|
+
*
|
|
560
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#batch
|
|
561
|
+
*
|
|
562
|
+
* @example
|
|
563
|
+
* ```ts
|
|
564
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
565
|
+
*
|
|
566
|
+
* const registry = createRegistry({ events: true })
|
|
567
|
+
*
|
|
568
|
+
* // Without batch: N invalidations + N events
|
|
569
|
+
* // With batch: 1 invalidation + N events (after all registrations)
|
|
570
|
+
* const tickets = registry.batch(() => {
|
|
571
|
+
* return [
|
|
572
|
+
* registry.register({ id: 'a' }),
|
|
573
|
+
* registry.register({ id: 'b' }),
|
|
574
|
+
* registry.register({ id: 'c' }),
|
|
575
|
+
* ]
|
|
576
|
+
* })
|
|
577
|
+
* ```
|
|
578
|
+
*/
|
|
579
|
+
batch: <R>(fn: () => R) => R;
|
|
580
|
+
}
|
|
581
|
+
interface RegistryOptions {
|
|
582
|
+
/**
|
|
583
|
+
* Enable event emission for registry operations
|
|
584
|
+
*
|
|
585
|
+
* @default false
|
|
586
|
+
* @remarks When enabled, the registry will emit events for operations like registration and unregistration. Listeners can be added using the `on` method.
|
|
587
|
+
*
|
|
588
|
+
* @example
|
|
589
|
+
* ```ts
|
|
590
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
591
|
+
*
|
|
592
|
+
* const registry = createRegistry({ events: true })
|
|
593
|
+
*
|
|
594
|
+
* registry.on('register:ticket', (ticket) => {
|
|
595
|
+
* console.log('Ticket registered:', ticket)
|
|
596
|
+
* })
|
|
597
|
+
*
|
|
598
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
599
|
+
* ```
|
|
600
|
+
*/
|
|
601
|
+
events?: boolean;
|
|
602
|
+
/**
|
|
603
|
+
* Enable reactive behavior for registry operations
|
|
604
|
+
*
|
|
605
|
+
* @default false
|
|
606
|
+
* @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.
|
|
607
|
+
*
|
|
608
|
+
* @example
|
|
609
|
+
* ```ts
|
|
610
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
611
|
+
*
|
|
612
|
+
* const registry = createRegistry({ reactive: true })
|
|
613
|
+
*
|
|
614
|
+
* registry.register({ id: 'ticket-id' })
|
|
615
|
+
*
|
|
616
|
+
* console.log(registry.size) // 1
|
|
617
|
+
* ```
|
|
618
|
+
*/
|
|
619
|
+
reactive?: boolean;
|
|
620
|
+
}
|
|
621
|
+
interface RegistryContextOptions extends RegistryOptions {
|
|
622
|
+
namespace?: string;
|
|
623
|
+
}
|
|
624
|
+
/**
|
|
625
|
+
* Creates a new registry instance.
|
|
626
|
+
*
|
|
627
|
+
* @param options The options for the registry instance.
|
|
628
|
+
* @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
|
|
629
|
+
* @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
|
|
630
|
+
* @returns A new registry instance.
|
|
631
|
+
*
|
|
632
|
+
* @see https://0.vuetifyjs.com/composables/registration/create-registry#create-registry
|
|
633
|
+
*
|
|
634
|
+
* @example
|
|
635
|
+
* ```ts
|
|
636
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
637
|
+
*
|
|
638
|
+
* const registry = createRegistry()
|
|
639
|
+
*
|
|
640
|
+
* const ticket1 = registry.register({ id: 'user-1', value: { name: 'John' } })
|
|
641
|
+
* const ticket2 = registry.register({ id: 'user-2', value: { name: 'Jane' } })
|
|
642
|
+
*
|
|
643
|
+
* console.log(registry.size) // 2
|
|
644
|
+
* console.log(registry.get('user-1')) // { id: 'user-1', index: 0, value: { name: 'John' }, ... }
|
|
645
|
+
* ```
|
|
646
|
+
*/
|
|
647
|
+
declare function createRegistry<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(options?: RegistryOptions): E;
|
|
648
|
+
/**
|
|
649
|
+
* Creates a new registry context.
|
|
650
|
+
*
|
|
651
|
+
* @param options The options for the registry context, including `namespace` (defaults to `'v0:registry'`) and `events`.
|
|
652
|
+
* @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
|
|
653
|
+
* @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
|
|
654
|
+
* @returns A new registry context.
|
|
655
|
+
*
|
|
656
|
+
* @see https://0.vuetifyjs.com/composables/registration/create-registry#create-registry-context
|
|
657
|
+
*
|
|
658
|
+
* @example
|
|
659
|
+
* ```ts
|
|
660
|
+
* import { createRegistryContext } from '@vuetify/v0'
|
|
661
|
+
*
|
|
662
|
+
* // With default namespace 'v0:registry'
|
|
663
|
+
* export const [useItems, provideItems, items] = createRegistryContext()
|
|
664
|
+
*
|
|
665
|
+
* // Or with custom namespace
|
|
666
|
+
* export const [useItems, provideItems, items] = createRegistryContext({ namespace: 'my-items' })
|
|
667
|
+
*
|
|
668
|
+
* // In a parent component:
|
|
669
|
+
* provideItems()
|
|
670
|
+
*
|
|
671
|
+
* // In a child component:
|
|
672
|
+
* const items = useItems()
|
|
673
|
+
* items.register({ id: 'item-1', value: 'Value 1' })
|
|
674
|
+
* ```
|
|
675
|
+
*/
|
|
676
|
+
declare function createRegistryContext<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(_options?: RegistryContextOptions): ContextTrinity<E>;
|
|
677
|
+
/**
|
|
678
|
+
* Uses an existing registry from context.
|
|
679
|
+
*
|
|
680
|
+
* @param namespace The namespace for the registry context. Defaults to `'v0:registry'`.
|
|
681
|
+
* @template Z The type of registry ticket that extends RegistryTicket.
|
|
682
|
+
* @template E The type of registry context that extends RegistryContext<Z>.
|
|
683
|
+
* @returns The registry instance.
|
|
684
|
+
*
|
|
685
|
+
* @see https://0.vuetifyjs.com/composables/registration/create-registry#use-registry
|
|
686
|
+
*
|
|
687
|
+
* @example
|
|
688
|
+
* ```ts
|
|
689
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
690
|
+
*
|
|
691
|
+
* // In a child component (after provideRegistry was called by an ancestor):
|
|
692
|
+
* const registry = useRegistry()
|
|
693
|
+
*
|
|
694
|
+
* registry.register({ id: 'item-1', value: 'Value 1' })
|
|
695
|
+
* ```
|
|
696
|
+
*/
|
|
697
|
+
declare function useRegistry<Z extends RegistryTicket = RegistryTicket, E extends RegistryContext<Z> = RegistryContext<Z>>(namespace?: string): E;
|
|
698
|
+
//#endregion
|
|
699
|
+
//#region src/composables/createSelection/index.d.ts
|
|
700
|
+
/**
|
|
701
|
+
* Input type for selection tickets - what users provide to register().
|
|
702
|
+
* Custom ticket types should extend this interface.
|
|
703
|
+
*
|
|
704
|
+
* @template V The type of the ticket value.
|
|
705
|
+
*
|
|
706
|
+
* @example
|
|
707
|
+
* ```ts
|
|
708
|
+
* interface MyTicket extends SelectionTicketInput {
|
|
709
|
+
* label: string
|
|
710
|
+
* disabled?: boolean
|
|
711
|
+
* metadata?: Record<string, unknown>
|
|
712
|
+
* }
|
|
713
|
+
*
|
|
714
|
+
* const selection = createSelection<MyTicket>()
|
|
715
|
+
* selection.register({ label: 'Item 1' })
|
|
716
|
+
* ```
|
|
717
|
+
*/
|
|
718
|
+
interface SelectionTicketInput<V = unknown> extends RegistryTicket<V> {
|
|
719
|
+
/** Disabled state of the ticket (optional on input, defaults to false) */
|
|
720
|
+
disabled?: MaybeRef<boolean>;
|
|
721
|
+
}
|
|
722
|
+
/**
|
|
723
|
+
* Output type for selection tickets - what users receive from get().
|
|
724
|
+
* Includes registry-added methods for self-selection.
|
|
725
|
+
*
|
|
726
|
+
* @template Z The input ticket type that extends SelectionTicketInput.
|
|
727
|
+
*
|
|
728
|
+
* @remarks
|
|
729
|
+
* The following properties are automatically added by the registry:
|
|
730
|
+
* - `disabled` - Defaults to `false` if not provided
|
|
731
|
+
* - `isSelected` - Reactive boolean indicating selection state
|
|
732
|
+
* - `select()` - Method to select this ticket
|
|
733
|
+
* - `unselect()` - Method to unselect this ticket
|
|
734
|
+
* - `toggle()` - Method to toggle selection state
|
|
735
|
+
*/
|
|
736
|
+
type SelectionTicket<Z extends SelectionTicketInput = SelectionTicketInput> = Z & {
|
|
737
|
+
/** Disabled state of the ticket (guaranteed to exist on output) */
|
|
738
|
+
disabled: MaybeRef<boolean>;
|
|
739
|
+
/** Whether the ticket is currently selected */
|
|
740
|
+
isSelected: Readonly<Ref<boolean, boolean>>;
|
|
741
|
+
/** Select self */
|
|
742
|
+
select: () => void;
|
|
743
|
+
/** Unselect self */
|
|
744
|
+
unselect: () => void;
|
|
745
|
+
/** Toggle self on and off */
|
|
746
|
+
toggle: () => void;
|
|
747
|
+
};
|
|
748
|
+
/**
|
|
749
|
+
* Context returned by createSelection.
|
|
750
|
+
*
|
|
751
|
+
* @template Z The input ticket type (what users provide to register).
|
|
752
|
+
* @template E The output ticket type (what users receive from get). Defaults to SelectionTicket<Z>.
|
|
753
|
+
*/
|
|
754
|
+
interface SelectionContext<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>> extends Omit<RegistryContext<E>, 'register' | 'onboard'> {
|
|
755
|
+
/** Set of selected ticket IDs */
|
|
756
|
+
selectedIds: Reactive<Set<ID>>;
|
|
757
|
+
/** Set of selected ticket instances */
|
|
758
|
+
selectedItems: ComputedRef<Set<E>>;
|
|
759
|
+
/** Set of selected ticket values */
|
|
760
|
+
selectedValues: ComputedRef<Set<unknown>>;
|
|
761
|
+
/** Disable state for the entire selection instance */
|
|
762
|
+
disabled: MaybeRef<boolean>;
|
|
763
|
+
/** Clear all selected IDs and reindexes */
|
|
764
|
+
reset: () => void;
|
|
765
|
+
/** Select a ticket by ID (Toggle ON) */
|
|
766
|
+
select: (id: ID) => void;
|
|
767
|
+
/** Unselect a ticket by ID (Toggle OFF) */
|
|
768
|
+
unselect: (id: ID) => void;
|
|
769
|
+
/** Toggles a ticket ON and OFF by ID */
|
|
770
|
+
toggle: (id: ID) => void;
|
|
771
|
+
/** Check if a ticket is selected by ID */
|
|
772
|
+
selected: (id: ID) => boolean;
|
|
773
|
+
/** Mandates selected ID based on "mandatory" Option */
|
|
774
|
+
mandate: () => void;
|
|
775
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
776
|
+
register: (ticket?: Partial<Z>) => E;
|
|
777
|
+
/** Onboard multiple tickets at once */
|
|
778
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
779
|
+
}
|
|
780
|
+
interface SelectionOptions extends RegistryOptions {
|
|
781
|
+
/** When true, the entire selection instance is disabled. */
|
|
782
|
+
disabled?: MaybeRefOrGetter<boolean>;
|
|
783
|
+
/**
|
|
784
|
+
* When true, newly registered items are automatically selected if not disabled.
|
|
785
|
+
* Useful for pre-selecting items in multi-select scenarios.
|
|
786
|
+
*/
|
|
787
|
+
enroll?: MaybeRefOrGetter<boolean>;
|
|
788
|
+
/**
|
|
789
|
+
* Controls mandatory selection behavior:
|
|
790
|
+
* - `false` (default): No mandatory selection enforcement
|
|
791
|
+
* - `true`: Prevents deselecting the last selected item (user must always have one selected)
|
|
792
|
+
* - `'force'`: Automatically selects the first non-disabled item on registration
|
|
793
|
+
*/
|
|
794
|
+
mandatory?: MaybeRefOrGetter<boolean | 'force'>;
|
|
795
|
+
/** When true, treats the selection as an array */
|
|
796
|
+
multiple?: MaybeRefOrGetter<boolean>;
|
|
797
|
+
}
|
|
798
|
+
interface SelectionContextOptions extends SelectionOptions {
|
|
799
|
+
namespace?: string;
|
|
800
|
+
}
|
|
801
|
+
/**
|
|
802
|
+
* Creates a new selection instance for managing multiple selected items.
|
|
803
|
+
*
|
|
804
|
+
* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
|
|
805
|
+
* Supports disabled items, mandatory selection enforcement, and auto-enrollment.
|
|
806
|
+
*
|
|
807
|
+
* @param options The options for the selection instance.
|
|
808
|
+
* @template Z The input ticket type - what users provide to register(). Extend SelectionTicketInput to add custom properties.
|
|
809
|
+
* @template E The output ticket type - what users receive from get(). Automatically includes selection methods.
|
|
810
|
+
* @template R The context type. Defaults to SelectionContext<Z, E>.
|
|
811
|
+
* @returns A new selection instance with selection management methods.
|
|
812
|
+
*
|
|
813
|
+
* @remarks
|
|
814
|
+
* **Key Features:**
|
|
815
|
+
* - Multi-selection support (unlike `useSingle` which enforces single selection)
|
|
816
|
+
* - Set-based `selectedIds` tracking for efficient lookups
|
|
817
|
+
* - Computed `selectedItems` and `selectedValues` for reactive access
|
|
818
|
+
* - Each ticket gets `isSelected`, `select()`, `unselect()`, and `toggle()` methods
|
|
819
|
+
* - Disabled items cannot be selected
|
|
820
|
+
* - Mandatory mode prevents deselecting the last item
|
|
821
|
+
* - Force mode auto-selects first non-disabled item on registration
|
|
822
|
+
* - Enroll option auto-selects all non-disabled items on registration
|
|
823
|
+
*
|
|
824
|
+
* **Inheritance Chain:**
|
|
825
|
+
* `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
|
|
826
|
+
*
|
|
827
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
828
|
+
*
|
|
829
|
+
* @example
|
|
830
|
+
* ```ts
|
|
831
|
+
* import { createSelection } from '@vuetify/v0'
|
|
832
|
+
*
|
|
833
|
+
* // Basic usage
|
|
834
|
+
* const selection = createSelection({ mandatory: true })
|
|
835
|
+
*
|
|
836
|
+
* selection.onboard([
|
|
837
|
+
* { id: 'item-1', value: 'Item 1' },
|
|
838
|
+
* { id: 'item-2', value: 'Item 2', disabled: true },
|
|
839
|
+
* { id: 'item-3', value: 'Item 3' },
|
|
840
|
+
* ])
|
|
841
|
+
*
|
|
842
|
+
* selection.select('item-1')
|
|
843
|
+
* selection.select('item-3')
|
|
844
|
+
*
|
|
845
|
+
* console.log(selection.selectedIds) // Set { 'item-1', 'item-3' }
|
|
846
|
+
* console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
|
|
847
|
+
* ```
|
|
848
|
+
*
|
|
849
|
+
* @example
|
|
850
|
+
* ```ts
|
|
851
|
+
* // With custom ticket type
|
|
852
|
+
* interface MyTicket extends SelectionTicketInput {
|
|
853
|
+
* label: string
|
|
854
|
+
* icon?: string
|
|
855
|
+
* }
|
|
856
|
+
*
|
|
857
|
+
* const tabs = createSelection<MyTicket>()
|
|
858
|
+
*
|
|
859
|
+
* tabs.register({ label: 'Home', icon: 'mdi-home' })
|
|
860
|
+
* tabs.register({ label: 'Settings' })
|
|
861
|
+
*
|
|
862
|
+
* const ticket = tabs.get('...')
|
|
863
|
+
* // ticket has: label, icon, isSelected, select(), unselect(), toggle()
|
|
864
|
+
* ```
|
|
865
|
+
*/
|
|
866
|
+
declare function createSelection<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(_options?: SelectionOptions): R;
|
|
867
|
+
/**
|
|
868
|
+
* Creates a new selection context.
|
|
869
|
+
*
|
|
870
|
+
* @param options The options for the selection context.
|
|
871
|
+
* @template Z The input ticket type - what users provide to register().
|
|
872
|
+
* @template E The output ticket type - what users receive from get().
|
|
873
|
+
* @template R The context type. Defaults to SelectionContext<Z, E>.
|
|
874
|
+
* @returns A new selection context.
|
|
875
|
+
*
|
|
876
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
877
|
+
*
|
|
878
|
+
* @example
|
|
879
|
+
* ```ts
|
|
880
|
+
* import { createSelectionContext } from '@vuetify/v0'
|
|
881
|
+
*
|
|
882
|
+
* // With default namespace 'v0:selection'
|
|
883
|
+
* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext()
|
|
884
|
+
*
|
|
885
|
+
* // Or with custom namespace
|
|
886
|
+
* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext({ namespace: 'checkboxes' })
|
|
887
|
+
*
|
|
888
|
+
* // In a parent component:
|
|
889
|
+
* provideCheckboxes()
|
|
890
|
+
*
|
|
891
|
+
* // In a child component:
|
|
892
|
+
* const checkboxes = useCheckboxes()
|
|
893
|
+
* checkboxes.select('checkbox-1')
|
|
894
|
+
* ```
|
|
895
|
+
*
|
|
896
|
+
* @example
|
|
897
|
+
* ```ts
|
|
898
|
+
* // With custom ticket type
|
|
899
|
+
* interface TabTicket extends SelectionTicketInput {
|
|
900
|
+
* label: string
|
|
901
|
+
* icon?: string
|
|
902
|
+
* }
|
|
903
|
+
*
|
|
904
|
+
* export const [useTabs, provideTabs, tabs] = createSelectionContext<TabTicket>()
|
|
905
|
+
* ```
|
|
906
|
+
*/
|
|
907
|
+
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>;
|
|
908
|
+
/**
|
|
909
|
+
* Returns the current selection instance.
|
|
910
|
+
*
|
|
911
|
+
* @param namespace The namespace for the selection context. Defaults to `'v0:selection'`.
|
|
912
|
+
* @template Z The input ticket type.
|
|
913
|
+
* @template E The output ticket type.
|
|
914
|
+
* @template R The context type.
|
|
915
|
+
* @returns The current selection instance.
|
|
916
|
+
*
|
|
917
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
918
|
+
*
|
|
919
|
+
* @example
|
|
920
|
+
* ```vue
|
|
921
|
+
* <script setup lang="ts">
|
|
922
|
+
* import { useSelection } from '@vuetify/v0'
|
|
923
|
+
*
|
|
924
|
+
* const selection = useSelection()
|
|
925
|
+
* </script>
|
|
926
|
+
*
|
|
927
|
+
* <template>
|
|
928
|
+
* <div>
|
|
929
|
+
* <p>Selected: {{ selection.selectedIds.size }}</p>
|
|
930
|
+
* </div>
|
|
931
|
+
* </template>
|
|
932
|
+
* ```
|
|
933
|
+
*/
|
|
934
|
+
declare function useSelection<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(namespace?: string): R;
|
|
935
|
+
//#endregion
|
|
936
|
+
//#region src/composables/createSingle/index.d.ts
|
|
937
|
+
/**
|
|
938
|
+
* Input type for single selection tickets.
|
|
939
|
+
* Extend this interface to add custom properties.
|
|
940
|
+
*/
|
|
941
|
+
interface SingleTicketInput<V = unknown> extends SelectionTicketInput<V> {}
|
|
942
|
+
/**
|
|
943
|
+
* Output type for single selection tickets.
|
|
944
|
+
* Includes all input properties plus selection methods.
|
|
945
|
+
*/
|
|
946
|
+
type SingleTicket<Z extends SingleTicketInput = SingleTicketInput> = SelectionTicket<Z>;
|
|
947
|
+
/**
|
|
948
|
+
* Context returned by createSingle.
|
|
949
|
+
*
|
|
950
|
+
* @template Z The input ticket type.
|
|
951
|
+
* @template E The output ticket type.
|
|
952
|
+
*/
|
|
953
|
+
interface SingleContext<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register' | 'onboard'> {
|
|
954
|
+
selectedId: ComputedRef<ID | undefined>;
|
|
955
|
+
selectedIndex: ComputedRef<number>;
|
|
956
|
+
selectedItem: ComputedRef<E | undefined>;
|
|
957
|
+
selectedValue: ComputedRef<E['value'] | undefined>;
|
|
958
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
959
|
+
register: (ticket?: Partial<Z>) => E;
|
|
960
|
+
/** Onboard multiple tickets at once */
|
|
961
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
962
|
+
}
|
|
963
|
+
interface SingleOptions extends SelectionOptions {}
|
|
964
|
+
interface SingleContextOptions extends SelectionContextOptions {}
|
|
965
|
+
/**
|
|
966
|
+
* Creates a new single selection instance that enforces only one selected item at a time.
|
|
967
|
+
*
|
|
968
|
+
* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
|
|
969
|
+
* Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
|
|
970
|
+
*
|
|
971
|
+
* @param options The options for the single selection instance.
|
|
972
|
+
* @template Z The input ticket type - what users provide to register().
|
|
973
|
+
* @template E The output ticket type - what users receive from get().
|
|
974
|
+
* @template R The context type.
|
|
975
|
+
* @returns A new single selection instance with single-selection enforcement.
|
|
976
|
+
*
|
|
977
|
+
* @remarks
|
|
978
|
+
* **Key Differences from `createSelection`:**
|
|
979
|
+
* - Automatically clears `selectedIds` before selecting a new item (enforces single selection)
|
|
980
|
+
* - Provides singular computed properties instead of plural sets
|
|
981
|
+
* - Perfect for tabs, radio buttons, theme selectors, and other single-choice UI components
|
|
982
|
+
*
|
|
983
|
+
* **Computed Properties:**
|
|
984
|
+
* - `selectedId`: The ID of the selected item (undefined if none selected)
|
|
985
|
+
* - `selectedItem`: The selected ticket object (undefined if none selected)
|
|
986
|
+
* - `selectedIndex`: The index of the selected item (-1 if none selected)
|
|
987
|
+
* - `selectedValue`: The value of the selected item (undefined if none selected)
|
|
988
|
+
*
|
|
989
|
+
* **Inheritance Chain:**
|
|
990
|
+
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
991
|
+
*
|
|
992
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
993
|
+
*
|
|
994
|
+
* @example
|
|
995
|
+
* ```ts
|
|
996
|
+
* import { createSingle } from '@vuetify/v0'
|
|
997
|
+
*
|
|
998
|
+
* const tabs = createSingle({ mandatory: true })
|
|
999
|
+
*
|
|
1000
|
+
* tabs.onboard([
|
|
1001
|
+
* { id: 'home', value: 'Home' },
|
|
1002
|
+
* { id: 'about', value: 'About' },
|
|
1003
|
+
* { id: 'contact', value: 'Contact' },
|
|
1004
|
+
* ])
|
|
1005
|
+
*
|
|
1006
|
+
* tabs.first() // Select first tab
|
|
1007
|
+
*
|
|
1008
|
+
* console.log(tabs.selectedId.value) // 'home'
|
|
1009
|
+
* console.log(tabs.selectedIndex.value) // 0
|
|
1010
|
+
*
|
|
1011
|
+
* tabs.select('about') // Switch to about tab
|
|
1012
|
+
* console.log(tabs.selectedId.value) // 'about'
|
|
1013
|
+
* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
|
|
1014
|
+
* ```
|
|
1015
|
+
*
|
|
1016
|
+
* @example
|
|
1017
|
+
* ```ts
|
|
1018
|
+
* // With custom ticket type
|
|
1019
|
+
* interface TabTicket extends SingleTicketInput {
|
|
1020
|
+
* label: string
|
|
1021
|
+
* icon?: string
|
|
1022
|
+
* }
|
|
1023
|
+
*
|
|
1024
|
+
* const tabs = createSingle<TabTicket>()
|
|
1025
|
+
* tabs.register({ label: 'Home', icon: 'mdi-home' })
|
|
1026
|
+
* ```
|
|
1027
|
+
*/
|
|
1028
|
+
declare function createSingle<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(_options?: SingleOptions): R;
|
|
1029
|
+
/**
|
|
1030
|
+
* Creates a new single selection context.
|
|
1031
|
+
*
|
|
1032
|
+
* @param options The options for the single selection context.
|
|
1033
|
+
* @template Z The input ticket type.
|
|
1034
|
+
* @template E The output ticket type.
|
|
1035
|
+
* @template R The context type.
|
|
1036
|
+
* @returns A new single selection context.
|
|
1037
|
+
*
|
|
1038
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1039
|
+
*
|
|
1040
|
+
* @example
|
|
1041
|
+
* ```ts
|
|
1042
|
+
* import { createSingleContext } from '@vuetify/v0'
|
|
1043
|
+
*
|
|
1044
|
+
* // With default namespace 'v0:single'
|
|
1045
|
+
* export const [useSingle, provideSingle, context] = createSingleContext()
|
|
1046
|
+
*
|
|
1047
|
+
* // In a parent component:
|
|
1048
|
+
* provideSingle()
|
|
1049
|
+
*
|
|
1050
|
+
* // In a child component:
|
|
1051
|
+
* const single = useSingle()
|
|
1052
|
+
* single.select('tab-1')
|
|
1053
|
+
* ```
|
|
1054
|
+
*/
|
|
1055
|
+
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>;
|
|
1056
|
+
/**
|
|
1057
|
+
* Returns the current single selection instance.
|
|
1058
|
+
*
|
|
1059
|
+
* @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
|
|
1060
|
+
* @template Z The input ticket type.
|
|
1061
|
+
* @template E The output ticket type.
|
|
1062
|
+
* @template R The context type.
|
|
1063
|
+
* @returns The current single selection instance.
|
|
1064
|
+
*
|
|
1065
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1066
|
+
*
|
|
1067
|
+
* @example
|
|
1068
|
+
* ```vue
|
|
1069
|
+
* <script setup lang="ts">
|
|
1070
|
+
* import { useSingle } from '@vuetify/v0'
|
|
1071
|
+
*
|
|
1072
|
+
* const tabs = useSingle()
|
|
1073
|
+
* </script>
|
|
1074
|
+
*
|
|
1075
|
+
* <template>
|
|
1076
|
+
* <div>
|
|
1077
|
+
* <p>Selected: {{ tabs.selectedId }}</p>
|
|
1078
|
+
* </div>
|
|
1079
|
+
* </template>
|
|
1080
|
+
* ```
|
|
1081
|
+
*/
|
|
1082
|
+
declare function useSingle<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(namespace?: string): R;
|
|
1083
|
+
//#endregion
|
|
1084
|
+
//#region src/composables/createBreadcrumbs/index.d.ts
|
|
1085
|
+
/**
|
|
1086
|
+
* Input type for breadcrumb tickets.
|
|
1087
|
+
*/
|
|
1088
|
+
interface BreadcrumbTicketInput<V = unknown> extends SingleTicketInput<V> {
|
|
1089
|
+
/** Display text for the breadcrumb */
|
|
1090
|
+
text: string;
|
|
1091
|
+
}
|
|
1092
|
+
/**
|
|
1093
|
+
* Output type for breadcrumb tickets.
|
|
1094
|
+
*/
|
|
1095
|
+
type BreadcrumbTicket<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput> = SingleTicket<Z>;
|
|
1096
|
+
/**
|
|
1097
|
+
* Context returned by createBreadcrumbs.
|
|
1098
|
+
*/
|
|
1099
|
+
interface BreadcrumbsContext<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>> extends Omit<SingleContext<Z, E>, 'select'> {
|
|
1100
|
+
/** Number of items in the path */
|
|
1101
|
+
depth: Readonly<Ref<number>>;
|
|
1102
|
+
/** Whether at root level (depth <= 1) */
|
|
1103
|
+
isRoot: Readonly<Ref<boolean>>;
|
|
1104
|
+
/** Whether path is empty (depth === 0) */
|
|
1105
|
+
isEmpty: Readonly<Ref<boolean>>;
|
|
1106
|
+
/** Navigate to root (first item) */
|
|
1107
|
+
first: () => void;
|
|
1108
|
+
/** Navigate up one level (remove last item) */
|
|
1109
|
+
prev: () => void;
|
|
1110
|
+
/** Navigate to specific item by id (truncates path) */
|
|
1111
|
+
select: (id: ID) => void;
|
|
1112
|
+
}
|
|
1113
|
+
interface BreadcrumbsOptions extends SingleOptions {}
|
|
1114
|
+
interface BreadcrumbsContextOptions extends SingleContextOptions {}
|
|
1115
|
+
/**
|
|
1116
|
+
* Creates a breadcrumbs navigation model.
|
|
1117
|
+
*
|
|
1118
|
+
* @param options The options for the breadcrumbs instance.
|
|
1119
|
+
* @returns A breadcrumbs context with navigation methods.
|
|
1120
|
+
*
|
|
1121
|
+
* @example
|
|
1122
|
+
* ```ts
|
|
1123
|
+
* import { createBreadcrumbs } from '@vuetify/v0'
|
|
1124
|
+
*
|
|
1125
|
+
* const breadcrumbs = createBreadcrumbs()
|
|
1126
|
+
*
|
|
1127
|
+
* breadcrumbs.register({ text: 'Home' })
|
|
1128
|
+
* breadcrumbs.register({ text: 'Products' })
|
|
1129
|
+
* breadcrumbs.register({ text: 'Electronics' })
|
|
1130
|
+
*
|
|
1131
|
+
* // Navigate back
|
|
1132
|
+
* breadcrumbs.prev() // removes Electronics
|
|
1133
|
+
* breadcrumbs.first() // truncates to Home
|
|
1134
|
+
*
|
|
1135
|
+
* // Derived state
|
|
1136
|
+
* breadcrumbs.depth.value // 1
|
|
1137
|
+
* breadcrumbs.isRoot.value // true
|
|
1138
|
+
* ```
|
|
1139
|
+
*/
|
|
1140
|
+
declare function createBreadcrumbs<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>, R extends BreadcrumbsContext<Z, E> = BreadcrumbsContext<Z, E>>(options?: BreadcrumbsOptions): R;
|
|
1141
|
+
/**
|
|
1142
|
+
* Creates a breadcrumbs context for dependency injection.
|
|
1143
|
+
*
|
|
1144
|
+
* @param options The options including namespace.
|
|
1145
|
+
* @returns A trinity: [useBreadcrumbs, provideBreadcrumbs, defaultContext]
|
|
1146
|
+
*
|
|
1147
|
+
* @example
|
|
1148
|
+
* ```ts
|
|
1149
|
+
* const [useBreadcrumbs, provideBreadcrumbs] = createBreadcrumbsContext()
|
|
1150
|
+
*
|
|
1151
|
+
* // Parent component
|
|
1152
|
+
* provideBreadcrumbs()
|
|
1153
|
+
*
|
|
1154
|
+
* // Child component
|
|
1155
|
+
* const breadcrumbs = useBreadcrumbs()
|
|
1156
|
+
* breadcrumbs.register({ text: 'Details' })
|
|
1157
|
+
* ```
|
|
1158
|
+
*/
|
|
1159
|
+
declare function createBreadcrumbsContext<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>, R extends BreadcrumbsContext<Z, E> = BreadcrumbsContext<Z, E>>(_options?: BreadcrumbsContextOptions): ContextTrinity<R>;
|
|
1160
|
+
/**
|
|
1161
|
+
* Returns the current breadcrumbs instance from context.
|
|
1162
|
+
*
|
|
1163
|
+
* @param namespace The namespace. @default 'v0:breadcrumbs'
|
|
1164
|
+
* @returns The breadcrumbs context.
|
|
1165
|
+
*
|
|
1166
|
+
* @example
|
|
1167
|
+
* ```vue
|
|
1168
|
+
* <script setup lang="ts">
|
|
1169
|
+
* import { useBreadcrumbs } from '@vuetify/v0'
|
|
1170
|
+
*
|
|
1171
|
+
* const breadcrumbs = useBreadcrumbs()
|
|
1172
|
+
* </script>
|
|
1173
|
+
*
|
|
1174
|
+
* <template>
|
|
1175
|
+
* <nav>
|
|
1176
|
+
* <template v-for="ticket in breadcrumbs.values()" :key="ticket.id">
|
|
1177
|
+
* <a @click="breadcrumbs.select(ticket.id)">{{ ticket.text }}</a>
|
|
1178
|
+
* </template>
|
|
1179
|
+
* </nav>
|
|
1180
|
+
* </template>
|
|
1181
|
+
* ```
|
|
1182
|
+
*/
|
|
1183
|
+
declare function useBreadcrumbs<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>, R extends BreadcrumbsContext<Z, E> = BreadcrumbsContext<Z, E>>(namespace?: string): R;
|
|
1184
|
+
//#endregion
|
|
1185
|
+
//#region src/composables/createGroup/index.d.ts
|
|
1186
|
+
/**
|
|
1187
|
+
* Input type for group tickets.
|
|
1188
|
+
* Extend this interface to add custom properties.
|
|
1189
|
+
*/
|
|
1190
|
+
interface GroupTicketInput<V = unknown> extends SelectionTicketInput<V> {
|
|
1191
|
+
/** Whether the ticket should start in mixed/indeterminate state */
|
|
1192
|
+
indeterminate?: MaybeRef<boolean>;
|
|
1193
|
+
}
|
|
1194
|
+
/**
|
|
1195
|
+
* Output type for group tickets.
|
|
1196
|
+
* Includes all input properties plus selection and tri-state methods.
|
|
1197
|
+
*/
|
|
1198
|
+
type GroupTicket<Z extends GroupTicketInput = GroupTicketInput> = SelectionTicket<Z> & {
|
|
1199
|
+
/** Whether the ticket is in a mixed/indeterminate state */
|
|
1200
|
+
isMixed: Readonly<Ref<boolean>>;
|
|
1201
|
+
/** Set self to mixed/indeterminate state */
|
|
1202
|
+
mix: () => void;
|
|
1203
|
+
/** Clear mixed/indeterminate state from self */
|
|
1204
|
+
unmix: () => void;
|
|
1205
|
+
};
|
|
1206
|
+
/**
|
|
1207
|
+
* Context returned by createGroup.
|
|
1208
|
+
*
|
|
1209
|
+
* @template Z The input ticket type.
|
|
1210
|
+
* @template E The output ticket type.
|
|
1211
|
+
*/
|
|
1212
|
+
interface GroupContext<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register' | 'onboard' | 'select' | 'unselect' | 'toggle'> {
|
|
1213
|
+
selectedIndexes: ComputedRef<Set<number>>;
|
|
1214
|
+
/** Select one or more Tickets by ID */
|
|
1215
|
+
select: (ids: ID | ID[]) => void;
|
|
1216
|
+
/** Unselect one or more Tickets by ID */
|
|
1217
|
+
unselect: (ids: ID | ID[]) => void;
|
|
1218
|
+
/** Toggle one or more Tickets ON and OFF by ID */
|
|
1219
|
+
toggle: (ids: ID | ID[]) => void;
|
|
1220
|
+
/** Set of mixed/indeterminate ticket IDs */
|
|
1221
|
+
mixedIds: Reactive<Set<ID>>;
|
|
1222
|
+
/** Set of mixed/indeterminate ticket instances */
|
|
1223
|
+
mixedItems: ComputedRef<Set<E>>;
|
|
1224
|
+
/** Set one or more Tickets to mixed/indeterminate state by ID */
|
|
1225
|
+
mix: (ids: ID | ID[]) => void;
|
|
1226
|
+
/** Clear mixed/indeterminate state from one or more Tickets by ID */
|
|
1227
|
+
unmix: (ids: ID | ID[]) => void;
|
|
1228
|
+
/** Check if a ticket is in mixed/indeterminate state by ID */
|
|
1229
|
+
mixed: (id: ID) => boolean;
|
|
1230
|
+
/** Whether no items are currently selected */
|
|
1231
|
+
isNoneSelected: ComputedRef<boolean>;
|
|
1232
|
+
/** Whether all selectable (non-disabled) items are selected */
|
|
1233
|
+
isAllSelected: ComputedRef<boolean>;
|
|
1234
|
+
/** Whether some but not all selectable items are selected */
|
|
1235
|
+
isMixed: ComputedRef<boolean>;
|
|
1236
|
+
/** Select all selectable (non-disabled) items */
|
|
1237
|
+
selectAll: () => void;
|
|
1238
|
+
/** Unselect all items (respects mandatory option) */
|
|
1239
|
+
unselectAll: () => void;
|
|
1240
|
+
/** Toggle between all selected and none selected */
|
|
1241
|
+
toggleAll: () => void;
|
|
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 GroupOptions extends SelectionOptions {}
|
|
1248
|
+
interface GroupContextOptions extends SelectionContextOptions {}
|
|
1249
|
+
/**
|
|
1250
|
+
* Creates a new group instance with batch selection and tri-state support.
|
|
1251
|
+
*
|
|
1252
|
+
* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
|
|
1253
|
+
* at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
|
|
1254
|
+
* checkbox trees and similar use cases.
|
|
1255
|
+
*
|
|
1256
|
+
* @param options The options for the group instance.
|
|
1257
|
+
* @template Z The type of the group ticket.
|
|
1258
|
+
* @template E The type of the group context.
|
|
1259
|
+
* @returns A new group instance with batch selection and tri-state support.
|
|
1260
|
+
*
|
|
1261
|
+
* @remarks
|
|
1262
|
+
* **Key Differences from `createSelection`:**
|
|
1263
|
+
* - `select()` accepts `ID | ID[]` for batch operations
|
|
1264
|
+
* - `unselect()` accepts `ID | ID[]` for batch operations
|
|
1265
|
+
* - `toggle()` accepts `ID | ID[]` for batch operations
|
|
1266
|
+
* - Adds `selectedIndexes` computed Set for getting selected item indexes
|
|
1267
|
+
* - Adds tri-state support via `mix()`, `unmix()`, `mixed()`, `mixedIds`, `mixedItems`
|
|
1268
|
+
* - Perfect for checkbox trees, multi-select dropdowns, and bulk operations
|
|
1269
|
+
*
|
|
1270
|
+
* **Tri-State Support:**
|
|
1271
|
+
* - Items can be in one of three states: selected, mixed (indeterminate), or unselected
|
|
1272
|
+
* - `mix(id)` sets item to mixed state (clears selected if set)
|
|
1273
|
+
* - `unmix(id)` clears mixed state
|
|
1274
|
+
* - `select(id)` clears mixed state before selecting
|
|
1275
|
+
* - `toggle(id)` on a mixed item selects it (resolves the indeterminate state positively)
|
|
1276
|
+
* - Mixed state works on disabled items (it's a computed state, not user action)
|
|
1277
|
+
*
|
|
1278
|
+
* **Batch Operations:**
|
|
1279
|
+
* - Single ID: `group.select('item-1')`
|
|
1280
|
+
* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
|
|
1281
|
+
* - Uses `toArray()` utility internally to normalize input
|
|
1282
|
+
* - Disabled items are automatically skipped in select operations
|
|
1283
|
+
* - Non-existent IDs are silently ignored
|
|
1284
|
+
*
|
|
1285
|
+
* **Inheritance Chain:**
|
|
1286
|
+
* `useRegistry` → `createSelection` → `createGroup`
|
|
1287
|
+
*
|
|
1288
|
+
* **Used By:**
|
|
1289
|
+
* - `createFeatures` for feature flag management with multiple selections
|
|
1290
|
+
*
|
|
1291
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
1292
|
+
*
|
|
1293
|
+
* @example
|
|
1294
|
+
* ```ts
|
|
1295
|
+
* import { createGroup } from '@vuetify/v0'
|
|
1296
|
+
*
|
|
1297
|
+
* const checkboxes = createGroup()
|
|
1298
|
+
*
|
|
1299
|
+
* checkboxes.onboard([
|
|
1300
|
+
* { id: 'option-a', value: 'Option A' },
|
|
1301
|
+
* { id: 'option-b', value: 'Option B' },
|
|
1302
|
+
* { id: 'option-c', value: 'Option C' },
|
|
1303
|
+
* ])
|
|
1304
|
+
*
|
|
1305
|
+
* // Select multiple items at once
|
|
1306
|
+
* checkboxes.select(['option-a', 'option-c'])
|
|
1307
|
+
*
|
|
1308
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
1309
|
+
* console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
|
|
1310
|
+
*
|
|
1311
|
+
* // Set item to mixed/indeterminate state
|
|
1312
|
+
* checkboxes.mix('option-a')
|
|
1313
|
+
* console.log(checkboxes.mixedIds) // Set { 'option-a' }
|
|
1314
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-c' } (option-a removed)
|
|
1315
|
+
*
|
|
1316
|
+
* // Toggle a mixed item selects it
|
|
1317
|
+
* checkboxes.toggle('option-a')
|
|
1318
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
1319
|
+
* console.log(checkboxes.mixedIds) // Set {} (cleared)
|
|
1320
|
+
* ```
|
|
1321
|
+
*/
|
|
1322
|
+
declare function createGroup<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(_options?: GroupOptions): R;
|
|
1323
|
+
/**
|
|
1324
|
+
* Creates a new group context.
|
|
1325
|
+
*
|
|
1326
|
+
* @param options The options for the group context.
|
|
1327
|
+
* @template Z The input ticket type.
|
|
1328
|
+
* @template E The output ticket type.
|
|
1329
|
+
* @template R The context type.
|
|
1330
|
+
* @returns A new group context.
|
|
1331
|
+
*
|
|
1332
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
1333
|
+
*
|
|
1334
|
+
* @example
|
|
1335
|
+
* ```ts
|
|
1336
|
+
* import { createGroupContext } from '@vuetify/v0'
|
|
1337
|
+
*
|
|
1338
|
+
* // With default namespace 'v0:group'
|
|
1339
|
+
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext()
|
|
1340
|
+
*
|
|
1341
|
+
* // Or with custom namespace
|
|
1342
|
+
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext({ namespace: 'my-group' })
|
|
1343
|
+
*
|
|
1344
|
+
* // In a parent component:
|
|
1345
|
+
* provideMyGroup()
|
|
1346
|
+
*
|
|
1347
|
+
* // In a child component:
|
|
1348
|
+
* const group = useMyGroup()
|
|
1349
|
+
* ```
|
|
1350
|
+
*/
|
|
1351
|
+
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>;
|
|
1352
|
+
/**
|
|
1353
|
+
* Returns the current group instance.
|
|
1354
|
+
*
|
|
1355
|
+
* @param namespace The namespace for the group context. Defaults to `'v0:group'`.
|
|
1356
|
+
* @template Z The input ticket type.
|
|
1357
|
+
* @template E The output ticket type.
|
|
1358
|
+
* @template R The context type.
|
|
1359
|
+
* @returns The current group instance.
|
|
1360
|
+
*
|
|
1361
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
1362
|
+
*
|
|
1363
|
+
* @example
|
|
1364
|
+
* ```vue
|
|
1365
|
+
* <script setup lang="ts">
|
|
1366
|
+
* import { useGroup } from '@vuetify/v0'
|
|
1367
|
+
*
|
|
1368
|
+
* const group = useGroup()
|
|
1369
|
+
* </script>
|
|
1370
|
+
*
|
|
1371
|
+
* <template>
|
|
1372
|
+
* <div>
|
|
1373
|
+
* <p>Selected: {{ group.selectedIds.size }}</p>
|
|
1374
|
+
* </div>
|
|
1375
|
+
* </template>
|
|
1376
|
+
* ```
|
|
1377
|
+
*/
|
|
1378
|
+
declare function useGroup<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(namespace?: string): R;
|
|
1379
|
+
//#endregion
|
|
1380
|
+
//#region src/composables/createOverflow/index.d.ts
|
|
1381
|
+
interface OverflowOptions {
|
|
1382
|
+
/**
|
|
1383
|
+
* Container element to track. Can be a ref, getter, or MaybeRefOrGetter.
|
|
1384
|
+
* When provided, useOverflow tracks this element's width automatically.
|
|
1385
|
+
* Accepts null for compatibility with Vue's useTemplateRef.
|
|
1386
|
+
*/
|
|
1387
|
+
container?: MaybeRefOrGetter<Element | null | undefined>;
|
|
1388
|
+
/** Gap between items in pixels */
|
|
1389
|
+
gap?: MaybeRefOrGetter<number>;
|
|
1390
|
+
/** Reserved space in pixels (for nav buttons, ellipsis, etc) */
|
|
1391
|
+
reserved?: MaybeRefOrGetter<number>;
|
|
1392
|
+
/**
|
|
1393
|
+
* Uniform item width in pixels. When provided, enables uniform mode
|
|
1394
|
+
* where capacity is calculated as available space / itemWidth.
|
|
1395
|
+
* Use this for same-width items like pagination buttons.
|
|
1396
|
+
*/
|
|
1397
|
+
itemWidth?: MaybeRefOrGetter<number>;
|
|
1398
|
+
/**
|
|
1399
|
+
* Calculate capacity from end instead of start.
|
|
1400
|
+
* Useful for breadcrumbs where trailing items take priority.
|
|
1401
|
+
* Only affects variable mode (uniform mode capacity is direction-independent).
|
|
1402
|
+
*/
|
|
1403
|
+
reverse?: MaybeRefOrGetter<boolean>;
|
|
1404
|
+
}
|
|
1405
|
+
interface OverflowContext {
|
|
1406
|
+
/** Container element ref */
|
|
1407
|
+
container: ShallowRef<Element | null | undefined>;
|
|
1408
|
+
/** Current container width */
|
|
1409
|
+
width: Readonly<ShallowRef<number>>;
|
|
1410
|
+
/** How many items fit in available space */
|
|
1411
|
+
capacity: ComputedRef<number>;
|
|
1412
|
+
/** Total width of all measured items */
|
|
1413
|
+
total: ComputedRef<number>;
|
|
1414
|
+
/** Whether items overflow the container */
|
|
1415
|
+
isOverflowing: Readonly<Ref<boolean>>;
|
|
1416
|
+
/** Register an item's element for width measurement */
|
|
1417
|
+
measure: (index: number, el: Element | undefined) => void;
|
|
1418
|
+
/** Clear all measurements */
|
|
1419
|
+
reset: () => void;
|
|
1420
|
+
}
|
|
1421
|
+
interface OverflowContextOptions extends OverflowOptions {
|
|
1422
|
+
/** Namespace for dependency injection */
|
|
1423
|
+
namespace?: string;
|
|
1424
|
+
}
|
|
1425
|
+
/**
|
|
1426
|
+
* Creates a new overflow context for computing how many items fit in a container.
|
|
1427
|
+
*
|
|
1428
|
+
* @param options Configuration options
|
|
1429
|
+
* @returns Overflow context with container ref, capacity, and measurement functions
|
|
1430
|
+
*
|
|
1431
|
+
* @example Variable-width mode (Breadcrumbs)
|
|
1432
|
+
* ```vue
|
|
1433
|
+
* <script lang="ts" setup>
|
|
1434
|
+
* import { useTemplateRef } from 'vue'
|
|
1435
|
+
* import { createOverflow } from '@vuetify/v0'
|
|
1436
|
+
*
|
|
1437
|
+
* const containerRef = useTemplateRef('container')
|
|
1438
|
+
* const overflow = createOverflow({
|
|
1439
|
+
* container: containerRef,
|
|
1440
|
+
* gap: 8,
|
|
1441
|
+
* reserved: 40,
|
|
1442
|
+
* })
|
|
1443
|
+
* </script>
|
|
1444
|
+
*
|
|
1445
|
+
* <template>
|
|
1446
|
+
* <div ref="container">
|
|
1447
|
+
* <span
|
|
1448
|
+
* v-for="(item, i) in items.slice(0, overflow.capacity.value)"
|
|
1449
|
+
* :key="i"
|
|
1450
|
+
* :ref="el => overflow.measure(i, el)"
|
|
1451
|
+
* >
|
|
1452
|
+
* {{ item }}
|
|
1453
|
+
* </span>
|
|
1454
|
+
* <span v-if="overflow.isOverflowing.value">...</span>
|
|
1455
|
+
* </div>
|
|
1456
|
+
* </template>
|
|
1457
|
+
* ```
|
|
1458
|
+
*
|
|
1459
|
+
* @example Uniform-width mode (Pagination)
|
|
1460
|
+
* ```ts
|
|
1461
|
+
* const overflow = createOverflow({
|
|
1462
|
+
* container: () => atom.value?.element,
|
|
1463
|
+
* itemWidth: buttonWidth,
|
|
1464
|
+
* reserved: () => buttonWidth.value * 4,
|
|
1465
|
+
* })
|
|
1466
|
+
* ```
|
|
1467
|
+
*/
|
|
1468
|
+
declare function createOverflow<E extends OverflowContext = OverflowContext>(options?: OverflowOptions): E;
|
|
1469
|
+
/**
|
|
1470
|
+
* Creates an overflow context with dependency injection support.
|
|
1471
|
+
*
|
|
1472
|
+
* @param options Configuration options including namespace
|
|
1473
|
+
* @template E The type of the overflow context
|
|
1474
|
+
* @returns Trinity tuple: [useOverflow, provideOverflow, defaultOverflow]
|
|
1475
|
+
*
|
|
1476
|
+
* @example
|
|
1477
|
+
* ```ts
|
|
1478
|
+
* // Create injectable context
|
|
1479
|
+
* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
|
|
1480
|
+
* namespace: 'my-overflow',
|
|
1481
|
+
* gap: 8,
|
|
1482
|
+
* reserved: 160,
|
|
1483
|
+
* })
|
|
1484
|
+
*
|
|
1485
|
+
* // In parent component
|
|
1486
|
+
* provideOverflow()
|
|
1487
|
+
*
|
|
1488
|
+
* // In child component
|
|
1489
|
+
* const overflow = useOverflow()
|
|
1490
|
+
* ```
|
|
1491
|
+
*/
|
|
1492
|
+
declare function createOverflowContext<E extends OverflowContext = OverflowContext>(_options?: OverflowContextOptions): ContextTrinity<E>;
|
|
1493
|
+
/**
|
|
1494
|
+
* Returns the current overflow context from dependency injection.
|
|
1495
|
+
*
|
|
1496
|
+
* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
|
|
1497
|
+
* @template E The type of the overflow context
|
|
1498
|
+
* @returns The current overflow context.
|
|
1499
|
+
*
|
|
1500
|
+
* @throws An error if the overflow context is not found and no default is provided.
|
|
1501
|
+
*
|
|
1502
|
+
* @example
|
|
1503
|
+
* ```vue
|
|
1504
|
+
* <script lang="ts" setup>
|
|
1505
|
+
* import { useOverflow } from '@vuetify/v0'
|
|
1506
|
+
*
|
|
1507
|
+
* // Inject overflow context provided by parent
|
|
1508
|
+
* const overflow = useOverflow()
|
|
1509
|
+
* </script>
|
|
1510
|
+
*
|
|
1511
|
+
* <template>
|
|
1512
|
+
* <div>
|
|
1513
|
+
* <p>Capacity: {{ overflow.capacity.value }}</p>
|
|
1514
|
+
* </div>
|
|
1515
|
+
* </template>
|
|
1516
|
+
* ```
|
|
1517
|
+
*/
|
|
1518
|
+
declare function useOverflow<E extends OverflowContext = OverflowContext>(namespace?: string): E;
|
|
1519
|
+
//#endregion
|
|
6
1520
|
//#region src/composables/createContext/index.d.ts
|
|
7
|
-
|
|
8
1521
|
type ContextKey<Z> = InjectionKey<Z> | string;
|
|
9
1522
|
interface CreateContextOptions {
|
|
10
1523
|
/** Optional suffix to append to the runtime key */
|
|
@@ -19,79 +1532,645 @@ interface CreateContextOptions {
|
|
|
19
1532
|
* @returns The injected context.
|
|
20
1533
|
* @throws An error if the context is not found and no default is provided.
|
|
21
1534
|
*
|
|
22
|
-
* @see https://vuejs.org/api/composition-api-dependency-injection.html#inject
|
|
23
|
-
* @see https://0.vuetifyjs.com/composables/foundation/create-context#use-context
|
|
1535
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html#inject
|
|
1536
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#use-context
|
|
1537
|
+
*
|
|
1538
|
+
* @example
|
|
1539
|
+
* ```ts
|
|
1540
|
+
* // Without default value
|
|
1541
|
+
* const context = useContext<MyContext>('my-context')
|
|
1542
|
+
*
|
|
1543
|
+
* // With default value
|
|
1544
|
+
* const context = useContext<MyContext>('my-context', defaultContext)
|
|
1545
|
+
* ```
|
|
1546
|
+
*/
|
|
1547
|
+
declare function useContext<Z>(key: ContextKey<Z>, defaultValue?: Z): Z;
|
|
1548
|
+
/**
|
|
1549
|
+
* Provides a context to all descendant components.
|
|
1550
|
+
*
|
|
1551
|
+
* @param key The key of the context to provide.
|
|
1552
|
+
* @param context The context to provide.
|
|
1553
|
+
* @param app Optional Vue app instance to provide the context at app level instead of component level.
|
|
1554
|
+
* @template Z The type of the context.
|
|
1555
|
+
* @returns The provided context.
|
|
1556
|
+
*
|
|
1557
|
+
* @remarks
|
|
1558
|
+
* When `app` parameter is provided, the context is made available to all components in the app.
|
|
1559
|
+
* When omitted, the context is provided at the current component level and available to descendants only.
|
|
1560
|
+
*
|
|
1561
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html#provide
|
|
1562
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#provide-context
|
|
1563
|
+
*
|
|
1564
|
+
* @example
|
|
1565
|
+
* ```ts
|
|
1566
|
+
* // Component-level provision
|
|
1567
|
+
* provideContext<MyContext>('my-context', context)
|
|
1568
|
+
*
|
|
1569
|
+
* // App-level provision (typically used in plugins)
|
|
1570
|
+
* const app = createApp()
|
|
1571
|
+
* provideContext<MyContext>('my-context', context, app)
|
|
1572
|
+
* ```
|
|
1573
|
+
*/
|
|
1574
|
+
declare function provideContext<Z>(key: ContextKey<Z>, context: Z, app?: App): Z;
|
|
1575
|
+
/**
|
|
1576
|
+
* Creates a new context for providing and injecting data.
|
|
1577
|
+
*
|
|
1578
|
+
* Supports two modes:
|
|
1579
|
+
* - **Static key mode**: Pass a string/symbol key. The key is fixed at creation time.
|
|
1580
|
+
* - **Dynamic key mode**: Pass nothing or an options object. The key is provided at runtime.
|
|
1581
|
+
*
|
|
1582
|
+
* @template Z The type of the context.
|
|
1583
|
+
* @returns A tuple containing the `useContext` and `provideContext` functions.
|
|
1584
|
+
*
|
|
1585
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html
|
|
1586
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#create-context
|
|
1587
|
+
*
|
|
1588
|
+
* @example
|
|
1589
|
+
* ```ts
|
|
1590
|
+
* // Static key mode - key fixed at creation
|
|
1591
|
+
* const [useContext, provideContext] = createContext<ThemeContext>('v0:theme')
|
|
1592
|
+
* provideContext(context) // provides to 'v0:theme'
|
|
1593
|
+
* useContext() // injects from 'v0:theme'
|
|
1594
|
+
*
|
|
1595
|
+
* // Dynamic key mode - key provided at runtime
|
|
1596
|
+
* const [useContext, provideContext] = createContext<PanelContext>()
|
|
1597
|
+
* provideContext('v0:panel', context) // provides to 'v0:panel'
|
|
1598
|
+
* useContext('v0:panel') // injects from 'v0:panel'
|
|
1599
|
+
*
|
|
1600
|
+
* // Dynamic key with suffix - suffix appended to runtime key
|
|
1601
|
+
* const [useContext, provideContext] = createContext<ItemContext>({ suffix: 'item' })
|
|
1602
|
+
* provideContext('v0:panel', context) // provides to 'v0:panel:item'
|
|
1603
|
+
* useContext('v0:panel') // injects from 'v0:panel:item'
|
|
1604
|
+
* ```
|
|
1605
|
+
*/
|
|
1606
|
+
declare function createContext<Z>(key: ContextKey<Z>, defaultValue?: Z): readonly [() => Z, (context: Z, app?: App) => Z];
|
|
1607
|
+
declare function createContext<Z>(options?: CreateContextOptions): readonly [(key: string, defaultValue?: Z) => Z, (key: string, context: Z, app?: App) => Z];
|
|
1608
|
+
//#endregion
|
|
1609
|
+
//#region src/composables/createFilter/index.d.ts
|
|
1610
|
+
type Primitive = string | number | boolean;
|
|
1611
|
+
type FilterQuery = MaybeRefOrGetter<Primitive | Primitive[]>;
|
|
1612
|
+
type FilterItem = Primitive | Record<string, any>;
|
|
1613
|
+
type FilterMode = 'some' | 'every' | 'union' | 'intersection';
|
|
1614
|
+
type FilterFunction = (query: Primitive | Primitive[], item: FilterItem) => boolean;
|
|
1615
|
+
interface FilterOptions {
|
|
1616
|
+
customFilter?: FilterFunction;
|
|
1617
|
+
keys?: string[];
|
|
1618
|
+
mode?: FilterMode;
|
|
1619
|
+
}
|
|
1620
|
+
interface FilterResult<Z extends FilterItem = FilterItem> {
|
|
1621
|
+
items: ComputedRef<Z[]>;
|
|
1622
|
+
}
|
|
1623
|
+
interface FilterContext<Z extends FilterItem = FilterItem> {
|
|
1624
|
+
/** The filter mode */
|
|
1625
|
+
mode: FilterMode;
|
|
1626
|
+
/** Keys to filter on for object items */
|
|
1627
|
+
keys: string[] | undefined;
|
|
1628
|
+
/** Custom filter function */
|
|
1629
|
+
customFilter: FilterFunction | undefined;
|
|
1630
|
+
/** Current query ref */
|
|
1631
|
+
query: ShallowRef<Primitive | Primitive[]>;
|
|
1632
|
+
/**
|
|
1633
|
+
* Apply filter to an array of items
|
|
1634
|
+
*
|
|
1635
|
+
* @param query The query to filter by
|
|
1636
|
+
* @param items The items to filter
|
|
1637
|
+
* @returns The filtered items as a computed ref
|
|
1638
|
+
*/
|
|
1639
|
+
apply: <T extends Z>(query: FilterQuery, items: MaybeRef<T[]>) => FilterResult<T>;
|
|
1640
|
+
}
|
|
1641
|
+
interface FilterContextOptions extends FilterOptions {
|
|
1642
|
+
namespace?: string;
|
|
1643
|
+
}
|
|
1644
|
+
/**
|
|
1645
|
+
* Creates a filter context with pre-configured options.
|
|
1646
|
+
*
|
|
1647
|
+
* @param options The filter options
|
|
1648
|
+
* @template Z The type of the items
|
|
1649
|
+
* @template E The type of the filter context
|
|
1650
|
+
* @returns A filter context
|
|
1651
|
+
*
|
|
1652
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1653
|
+
*
|
|
1654
|
+
* @example
|
|
1655
|
+
* ```ts
|
|
1656
|
+
* import { createFilter } from '@vuetify/v0'
|
|
1657
|
+
*
|
|
1658
|
+
* const filter = createFilter({
|
|
1659
|
+
* mode: 'intersection',
|
|
1660
|
+
* keys: ['name', 'email'],
|
|
1661
|
+
* })
|
|
1662
|
+
*
|
|
1663
|
+
* const { items } = filter.apply(query, users)
|
|
1664
|
+
* ```
|
|
1665
|
+
*/
|
|
1666
|
+
declare function createFilter<Z extends FilterItem = FilterItem, E extends FilterContext<Z> = FilterContext<Z>>(options?: FilterOptions): E;
|
|
1667
|
+
/**
|
|
1668
|
+
* Creates a filter context with dependency injection support.
|
|
1669
|
+
*
|
|
1670
|
+
* @param options The filter context options
|
|
1671
|
+
* @template Z The type of the items
|
|
1672
|
+
* @template E The type of the filter context
|
|
1673
|
+
* @returns A trinity tuple: [useContext, provideContext, defaultContext]
|
|
1674
|
+
*
|
|
1675
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1676
|
+
*
|
|
1677
|
+
* @example
|
|
1678
|
+
* ```ts
|
|
1679
|
+
* import { createFilterContext } from '@vuetify/v0'
|
|
1680
|
+
*
|
|
1681
|
+
* export const [useSearchFilter, provideSearchFilter, searchFilter] = createFilterContext({
|
|
1682
|
+
* namespace: 'app:search',
|
|
1683
|
+
* mode: 'union',
|
|
1684
|
+
* keys: ['title', 'description'],
|
|
1685
|
+
* })
|
|
1686
|
+
*
|
|
1687
|
+
* // In parent component
|
|
1688
|
+
* provideSearchFilter()
|
|
1689
|
+
*
|
|
1690
|
+
* // In child component
|
|
1691
|
+
* const filter = useSearchFilter()
|
|
1692
|
+
* const { items } = filter.apply(query, products)
|
|
1693
|
+
* ```
|
|
1694
|
+
*/
|
|
1695
|
+
declare function createFilterContext<Z extends FilterItem = FilterItem, E extends FilterContext<Z> = FilterContext<Z>>(_options?: FilterContextOptions): ContextTrinity<E>;
|
|
1696
|
+
/**
|
|
1697
|
+
* Returns the current filter context from dependency injection.
|
|
1698
|
+
*
|
|
1699
|
+
* @param namespace The namespace for the filter context. Defaults to `'v0:filter'`.
|
|
1700
|
+
* @template Z The type of the items.
|
|
1701
|
+
* @template E The type of the filter context.
|
|
1702
|
+
* @returns The current filter context.
|
|
1703
|
+
*
|
|
1704
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1705
|
+
*
|
|
1706
|
+
* @example
|
|
1707
|
+
* ```vue
|
|
1708
|
+
* <script setup lang="ts">
|
|
1709
|
+
* import { useFilter } from '@vuetify/v0'
|
|
1710
|
+
*
|
|
1711
|
+
* const filter = useFilter()
|
|
1712
|
+
* const { items } = filter.apply(query, products)
|
|
1713
|
+
* </script>
|
|
1714
|
+
* ```
|
|
1715
|
+
*/
|
|
1716
|
+
declare function useFilter<Z extends FilterItem = FilterItem, E extends FilterContext<Z> = FilterContext<Z>>(namespace?: string): E;
|
|
1717
|
+
//#endregion
|
|
1718
|
+
//#region src/composables/createPagination/index.d.ts
|
|
1719
|
+
type PaginationTicket = {
|
|
1720
|
+
type: 'page';
|
|
1721
|
+
value: number;
|
|
1722
|
+
} | {
|
|
1723
|
+
type: 'ellipsis';
|
|
1724
|
+
value: string;
|
|
1725
|
+
};
|
|
1726
|
+
interface PaginationContext {
|
|
1727
|
+
/** Current page (1-indexed) */
|
|
1728
|
+
page: ShallowRef<number>;
|
|
1729
|
+
/** Items per page */
|
|
1730
|
+
itemsPerPage: number;
|
|
1731
|
+
/** Total number of items */
|
|
1732
|
+
size: number;
|
|
1733
|
+
/** Total number of pages (computed from size / itemsPerPage) */
|
|
1734
|
+
pages: number;
|
|
1735
|
+
/** Ellipsis character, or false if disabled */
|
|
1736
|
+
ellipsis: string | false;
|
|
1737
|
+
/** Visible page numbers and ellipsis for rendering */
|
|
1738
|
+
items: ComputedRef<PaginationTicket[]>;
|
|
1739
|
+
/** Start index of items on current page (0-indexed) */
|
|
1740
|
+
pageStart: ComputedRef<number>;
|
|
1741
|
+
/** End index of items on current page (exclusive, 0-indexed) */
|
|
1742
|
+
pageStop: ComputedRef<number>;
|
|
1743
|
+
/** Whether current page is the first page */
|
|
1744
|
+
isFirst: ComputedRef<boolean>;
|
|
1745
|
+
/** Whether current page is the last page */
|
|
1746
|
+
isLast: ComputedRef<boolean>;
|
|
1747
|
+
/** Go to first page */
|
|
1748
|
+
first: () => void;
|
|
1749
|
+
/** Go to last page */
|
|
1750
|
+
last: () => void;
|
|
1751
|
+
/** Go to next page */
|
|
1752
|
+
next: () => void;
|
|
1753
|
+
/** Go to previous page */
|
|
1754
|
+
prev: () => void;
|
|
1755
|
+
/** Go to specific page */
|
|
1756
|
+
select: (value: number) => void;
|
|
1757
|
+
}
|
|
1758
|
+
interface PaginationOptions {
|
|
1759
|
+
/** Initial page or ref for v-model (1-indexed). @default 1 */
|
|
1760
|
+
page?: number | ShallowRef<number>;
|
|
1761
|
+
/** Items per page. @default 10 */
|
|
1762
|
+
itemsPerPage?: MaybeRefOrGetter<number>;
|
|
1763
|
+
/** Total number of items. @default 0 */
|
|
1764
|
+
size?: MaybeRefOrGetter<number>;
|
|
1765
|
+
/** Maximum visible page buttons. @default 5 */
|
|
1766
|
+
visible?: MaybeRefOrGetter<number>;
|
|
1767
|
+
/** Ellipsis character. @default '…' */
|
|
1768
|
+
ellipsis?: string | false;
|
|
1769
|
+
}
|
|
1770
|
+
interface PaginationContextOptions extends PaginationOptions {
|
|
1771
|
+
/** Namespace for dependency injection */
|
|
1772
|
+
namespace?: string;
|
|
1773
|
+
}
|
|
1774
|
+
/**
|
|
1775
|
+
* Creates a pagination instance.
|
|
1776
|
+
*
|
|
1777
|
+
* @param options The options for the pagination instance.
|
|
1778
|
+
* @returns A pagination context with navigation methods.
|
|
1779
|
+
*
|
|
1780
|
+
* @example
|
|
1781
|
+
* ```ts
|
|
1782
|
+
* import { createPagination } from '@vuetify/v0'
|
|
1783
|
+
*
|
|
1784
|
+
* // Basic usage
|
|
1785
|
+
* const pagination = createPagination({ size: 100 })
|
|
1786
|
+
* pagination.next()
|
|
1787
|
+
* pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
|
|
1788
|
+
*
|
|
1789
|
+
* // With v-model (pass a ref)
|
|
1790
|
+
* const page = ref(1)
|
|
1791
|
+
* const pagination = createPagination({ page, size: 100 })
|
|
1792
|
+
* // Mutating pagination.page or the passed ref syncs both
|
|
1793
|
+
* ```
|
|
1794
|
+
*/
|
|
1795
|
+
declare function createPagination(_options?: PaginationOptions): PaginationContext;
|
|
1796
|
+
/**
|
|
1797
|
+
* Creates a pagination context for dependency injection.
|
|
1798
|
+
*
|
|
1799
|
+
* @param options The options including namespace.
|
|
1800
|
+
* @returns A trinity: [usePagination, providePagination, defaultContext]
|
|
24
1801
|
*
|
|
25
1802
|
* @example
|
|
26
1803
|
* ```ts
|
|
27
|
-
* //
|
|
28
|
-
* const
|
|
1804
|
+
* // With default namespace 'v0:pagination'
|
|
1805
|
+
* const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
|
|
29
1806
|
*
|
|
30
|
-
* //
|
|
31
|
-
* const
|
|
1807
|
+
* // Or with custom namespace
|
|
1808
|
+
* const [usePagination, providePaginationContext] = createPaginationContext({
|
|
1809
|
+
* namespace: 'my-pagination',
|
|
1810
|
+
* size: 50,
|
|
1811
|
+
* })
|
|
1812
|
+
*
|
|
1813
|
+
* // Parent component
|
|
1814
|
+
* providePaginationContext()
|
|
1815
|
+
*
|
|
1816
|
+
* // Child component
|
|
1817
|
+
* const pagination = usePagination()
|
|
1818
|
+
* pagination.next()
|
|
32
1819
|
* ```
|
|
33
1820
|
*/
|
|
34
|
-
declare function
|
|
1821
|
+
declare function createPaginationContext(_options?: PaginationContextOptions): ContextTrinity<PaginationContext>;
|
|
35
1822
|
/**
|
|
36
|
-
*
|
|
1823
|
+
* Returns the current pagination instance from context.
|
|
37
1824
|
*
|
|
38
|
-
* @param
|
|
39
|
-
* @
|
|
40
|
-
* @param app Optional Vue app instance to provide the context at app level instead of component level.
|
|
41
|
-
* @template Z The type of the context.
|
|
42
|
-
* @returns The provided context.
|
|
1825
|
+
* @param namespace The namespace. @default 'v0:pagination'
|
|
1826
|
+
* @returns The pagination context.
|
|
43
1827
|
*
|
|
44
|
-
* @
|
|
45
|
-
*
|
|
46
|
-
*
|
|
1828
|
+
* @example
|
|
1829
|
+
* ```vue
|
|
1830
|
+
* <script setup lang="ts">
|
|
1831
|
+
* import { usePagination } from '@vuetify/v0'
|
|
47
1832
|
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
1833
|
+
* const pagination = usePagination()
|
|
1834
|
+
* </script>
|
|
1835
|
+
*
|
|
1836
|
+
* <template>
|
|
1837
|
+
* <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
|
|
1838
|
+
* <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
|
|
1839
|
+
* </template>
|
|
1840
|
+
* ```
|
|
1841
|
+
*/
|
|
1842
|
+
declare function usePagination(namespace?: string): PaginationContext;
|
|
1843
|
+
//#endregion
|
|
1844
|
+
//#region src/composables/createDataTable/adapters/adapter.d.ts
|
|
1845
|
+
type SortDirection = 'asc' | 'desc' | 'none';
|
|
1846
|
+
interface SortEntry {
|
|
1847
|
+
key: string;
|
|
1848
|
+
direction: SortDirection;
|
|
1849
|
+
}
|
|
1850
|
+
/** Inputs provided by createDataTable to the adapter */
|
|
1851
|
+
interface DataTableAdapterContext<T extends Record<string, unknown>> {
|
|
1852
|
+
/** Source items */
|
|
1853
|
+
items: MaybeRefOrGetter<T[]>;
|
|
1854
|
+
/** Search query ref */
|
|
1855
|
+
search: ShallowRef<string>;
|
|
1856
|
+
/** Column keys eligible for filtering */
|
|
1857
|
+
filterableKeys: ReadonlyArray<keyof T & string>;
|
|
1858
|
+
/** Current sort state derived from sort controls */
|
|
1859
|
+
sortBy: Readonly<Ref<SortEntry[]>>;
|
|
1860
|
+
/** Locale for sorting (reactive, from useLocale or options) */
|
|
1861
|
+
locale: Readonly<Ref<string | undefined>>;
|
|
1862
|
+
/** Filter options (keys excluded, derived from columns) */
|
|
1863
|
+
filterOptions: Omit<FilterOptions, 'keys'>;
|
|
1864
|
+
/** Pagination options (size excluded, derived from pipeline) */
|
|
1865
|
+
paginationOptions: Omit<PaginationOptions, 'size'>;
|
|
1866
|
+
/** Per-column custom sort comparators */
|
|
1867
|
+
customSorts: Partial<Record<keyof T & string, (a: unknown, b: unknown) => number>>;
|
|
1868
|
+
/** Per-column custom filter functions */
|
|
1869
|
+
customColumnFilters: Partial<Record<keyof T & string, (value: unknown, query: string) => boolean>>;
|
|
1870
|
+
}
|
|
1871
|
+
/** Outputs returned by the adapter to createDataTable */
|
|
1872
|
+
interface DataTableAdapterResult<T extends Record<string, unknown>> {
|
|
1873
|
+
/** Raw unprocessed items */
|
|
1874
|
+
allItems: Readonly<Ref<readonly T[]>>;
|
|
1875
|
+
/** Items after filtering */
|
|
1876
|
+
filteredItems: Readonly<Ref<readonly T[]>>;
|
|
1877
|
+
/** Items after filtering and sorting */
|
|
1878
|
+
sortedItems: Readonly<Ref<readonly T[]>>;
|
|
1879
|
+
/** Final visible items (paginated or virtualized) */
|
|
1880
|
+
items: Readonly<Ref<readonly T[]>>;
|
|
1881
|
+
/** Pagination controls */
|
|
1882
|
+
pagination: PaginationContext;
|
|
1883
|
+
/** Total row count for aria-rowcount */
|
|
1884
|
+
total: Readonly<Ref<number>>;
|
|
1885
|
+
/** Loading state (optional, for async adapters) */
|
|
1886
|
+
loading?: Readonly<Ref<boolean>>;
|
|
1887
|
+
/** Error state (optional, for async adapters) */
|
|
1888
|
+
error?: Readonly<Ref<Error | null>>;
|
|
1889
|
+
}
|
|
1890
|
+
/** Pipeline adapter interface for data table strategies */
|
|
1891
|
+
interface DataTableAdapterInterface<T extends Record<string, unknown>> {
|
|
1892
|
+
setup: (context: DataTableAdapterContext<T>) => DataTableAdapterResult<T>;
|
|
1893
|
+
}
|
|
1894
|
+
declare abstract class DataTableAdapter<T extends Record<string, unknown>> implements DataTableAdapterInterface<T> {
|
|
1895
|
+
/** Create the filter pipeline stage */
|
|
1896
|
+
protected filter(context: DataTableAdapterContext<T>): {
|
|
1897
|
+
allItems: Readonly<Ref<T[], T[]>>;
|
|
1898
|
+
filteredItems: vue820.ComputedRef<T[]>;
|
|
1899
|
+
};
|
|
1900
|
+
/** Create the sort pipeline stage */
|
|
1901
|
+
protected sort(filteredItems: Readonly<Ref<readonly T[]>>, sortBy: Readonly<Ref<SortEntry[]>>, locale?: Readonly<Ref<string | undefined>>, customSorts?: Partial<Record<string, (a: unknown, b: unknown) => number>>): Readonly<Ref<readonly T[]>>;
|
|
1902
|
+
abstract setup(context: DataTableAdapterContext<T>): DataTableAdapterResult<T>;
|
|
1903
|
+
}
|
|
1904
|
+
//#endregion
|
|
1905
|
+
//#region src/composables/createDataTable/adapters/server.d.ts
|
|
1906
|
+
interface ServerAdapterOptions {
|
|
1907
|
+
/** Total number of items on the server (for pagination calculation) */
|
|
1908
|
+
total: MaybeRefOrGetter<number>;
|
|
1909
|
+
/** Loading state (e.g., from useFetch) */
|
|
1910
|
+
loading?: MaybeRefOrGetter<boolean>;
|
|
1911
|
+
/** Error state from API */
|
|
1912
|
+
error?: MaybeRefOrGetter<Error | null>;
|
|
1913
|
+
}
|
|
1914
|
+
declare class ServerAdapter<T extends Record<string, unknown>> implements DataTableAdapterInterface<T> {
|
|
1915
|
+
private options;
|
|
1916
|
+
constructor(options: ServerAdapterOptions);
|
|
1917
|
+
setup(context: DataTableAdapterContext<T>): DataTableAdapterResult<T>;
|
|
1918
|
+
}
|
|
1919
|
+
//#endregion
|
|
1920
|
+
//#region src/composables/createDataTable/adapters/v0.d.ts
|
|
1921
|
+
declare class ClientAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
|
|
1922
|
+
setup(context: DataTableAdapterContext<T>): DataTableAdapterResult<T>;
|
|
1923
|
+
}
|
|
1924
|
+
//#endregion
|
|
1925
|
+
//#region src/composables/createDataTable/adapters/virtual.d.ts
|
|
1926
|
+
declare class VirtualAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
|
|
1927
|
+
setup(context: DataTableAdapterContext<T>): DataTableAdapterResult<T>;
|
|
1928
|
+
}
|
|
1929
|
+
//#endregion
|
|
1930
|
+
//#region src/composables/createDataTable/index.d.ts
|
|
1931
|
+
/** Extract keys of T whose value type extends V */
|
|
1932
|
+
type KeysOfType<T, V> = { [K in keyof T]: T[K] extends V ? K : never }[keyof T] & string;
|
|
1933
|
+
type SelectStrategy = 'single' | 'page' | 'all';
|
|
1934
|
+
interface DataTableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
|
|
1935
|
+
readonly key: keyof T & string;
|
|
1936
|
+
readonly title?: string;
|
|
1937
|
+
readonly sortable?: boolean;
|
|
1938
|
+
readonly filterable?: boolean;
|
|
1939
|
+
/** Custom sort comparator for this column */
|
|
1940
|
+
readonly sort?: (a: unknown, b: unknown) => number;
|
|
1941
|
+
/** Custom filter function for this column */
|
|
1942
|
+
readonly filter?: (value: unknown, query: string) => boolean;
|
|
1943
|
+
}
|
|
1944
|
+
interface DataTableSort {
|
|
1945
|
+
/** Toggle sort for a column: none → asc → desc → none */
|
|
1946
|
+
toggle: (key: string) => void;
|
|
1947
|
+
/** Current sort columns derived from group state */
|
|
1948
|
+
columns: Readonly<Ref<SortEntry[]>>;
|
|
1949
|
+
/** Order of sort columns (for multi-sort priority) */
|
|
1950
|
+
order: readonly string[];
|
|
1951
|
+
/** Get sort direction for a specific column key */
|
|
1952
|
+
direction: (key: string) => SortDirection;
|
|
1953
|
+
/** Get sort priority index (0-based), or -1 if not sorted */
|
|
1954
|
+
priority: (key: string) => number;
|
|
1955
|
+
/** Reset all sort state */
|
|
1956
|
+
reset: () => void;
|
|
1957
|
+
}
|
|
1958
|
+
interface DataTableSelection {
|
|
1959
|
+
/** Currently selected row IDs */
|
|
1960
|
+
selectedIds: ReadonlySet<ID>;
|
|
1961
|
+
/** Select a row by ID */
|
|
1962
|
+
select: (id: ID) => void;
|
|
1963
|
+
/** Unselect a row by ID */
|
|
1964
|
+
unselect: (id: ID) => void;
|
|
1965
|
+
/** Toggle a row's selection */
|
|
1966
|
+
toggle: (id: ID) => void;
|
|
1967
|
+
/** Whether a row is selected */
|
|
1968
|
+
isSelected: (id: ID) => boolean;
|
|
1969
|
+
/** Whether a row can be selected (based on itemSelectable) */
|
|
1970
|
+
isSelectable: (id: ID) => boolean;
|
|
1971
|
+
/** Select all items within strategy scope */
|
|
1972
|
+
selectAll: () => void;
|
|
1973
|
+
/** Unselect all items across all pages */
|
|
1974
|
+
unselectAll: () => void;
|
|
1975
|
+
/** Toggle all items within strategy scope */
|
|
1976
|
+
toggleAll: () => void;
|
|
1977
|
+
/** Whether all items within strategy scope are selected */
|
|
1978
|
+
isAllSelected: Readonly<Ref<boolean>>;
|
|
1979
|
+
/** Whether some but not all items within strategy scope are selected */
|
|
1980
|
+
isMixed: Readonly<Ref<boolean>>;
|
|
1981
|
+
}
|
|
1982
|
+
interface DataTableGroup<T extends Record<string, unknown>> {
|
|
1983
|
+
/** Stringified group identifier */
|
|
1984
|
+
key: string;
|
|
1985
|
+
/** Raw value of the groupBy column for this group */
|
|
1986
|
+
value: T[keyof T & string];
|
|
1987
|
+
/** Items belonging to this group */
|
|
1988
|
+
items: readonly T[];
|
|
1989
|
+
}
|
|
1990
|
+
interface DataTableGrouping<T extends Record<string, unknown>> {
|
|
1991
|
+
/** Grouped items derived from sortedItems */
|
|
1992
|
+
groups: Readonly<Ref<DataTableGroup<T>[]>>;
|
|
1993
|
+
/** Toggle a group's open/closed state */
|
|
1994
|
+
toggle: (groupKey: string) => void;
|
|
1995
|
+
/** Whether a group is open */
|
|
1996
|
+
isOpen: (groupKey: string) => boolean;
|
|
1997
|
+
/** Open a group */
|
|
1998
|
+
open: (groupKey: string) => void;
|
|
1999
|
+
/** Close a group */
|
|
2000
|
+
close: (groupKey: string) => void;
|
|
2001
|
+
/** Open all groups */
|
|
2002
|
+
openAll: () => void;
|
|
2003
|
+
/** Close all groups */
|
|
2004
|
+
closeAll: () => void;
|
|
2005
|
+
}
|
|
2006
|
+
interface DataTableExpansion {
|
|
2007
|
+
/** Currently expanded row IDs */
|
|
2008
|
+
expandedIds: ReadonlySet<ID>;
|
|
2009
|
+
/** Expand a row by ID */
|
|
2010
|
+
expand: (id: ID) => void;
|
|
2011
|
+
/** Collapse a row by ID */
|
|
2012
|
+
collapse: (id: ID) => void;
|
|
2013
|
+
/** Toggle a row's expanded state */
|
|
2014
|
+
toggle: (id: ID) => void;
|
|
2015
|
+
/** Whether a row is expanded */
|
|
2016
|
+
isExpanded: (id: ID) => boolean;
|
|
2017
|
+
/** Expand all visible (paginated) items. Requires expandMultiple=true. */
|
|
2018
|
+
expandAll: () => void;
|
|
2019
|
+
/** Collapse all expanded items across all pages (not page-scoped like expandAll) */
|
|
2020
|
+
collapseAll: () => void;
|
|
2021
|
+
}
|
|
2022
|
+
interface DataTableOptions<T extends Record<string, unknown>> {
|
|
2023
|
+
/** Source items */
|
|
2024
|
+
items: MaybeRefOrGetter<T[]>;
|
|
2025
|
+
/** Column definitions */
|
|
2026
|
+
columns: readonly DataTableColumn<T>[];
|
|
2027
|
+
/** Property used as row identifier. Must resolve to a string or number value. @default 'id' */
|
|
2028
|
+
itemValue?: KeysOfType<T, ID>;
|
|
2029
|
+
/** Filter options (keys derived from columns) */
|
|
2030
|
+
filter?: Omit<FilterOptions, 'keys'>;
|
|
2031
|
+
/** Pagination options (size derived from pipeline) */
|
|
2032
|
+
pagination?: Omit<PaginationOptions, 'size'>;
|
|
2033
|
+
/** Enable multi-column sort. @default false */
|
|
2034
|
+
sortMultiple?: boolean;
|
|
2035
|
+
/** Prevent clearing sort (asc → desc → asc cycle). @default false */
|
|
2036
|
+
mandate?: boolean;
|
|
2037
|
+
/** Direction for first sort click. @default 'asc' */
|
|
2038
|
+
firstSortOrder?: 'asc' | 'desc';
|
|
2039
|
+
/** Selection strategy: 'single' selects one row, 'page' operates on visible items, 'all' operates on all filtered items. @default 'page' */
|
|
2040
|
+
selectStrategy?: SelectStrategy;
|
|
2041
|
+
/** Property that controls per-row selectability */
|
|
2042
|
+
itemSelectable?: keyof T & string;
|
|
2043
|
+
/** Column key to group rows by */
|
|
2044
|
+
groupBy?: keyof T & string;
|
|
2045
|
+
/** Auto-open all groups on creation. @default false */
|
|
2046
|
+
enroll?: boolean;
|
|
2047
|
+
/** Allow multiple rows expanded simultaneously. @default true */
|
|
2048
|
+
expandMultiple?: boolean;
|
|
2049
|
+
/** Locale for sorting (defaults to useLocale's selected locale or browser default) */
|
|
2050
|
+
locale?: string;
|
|
2051
|
+
/** Pipeline adapter. @default ClientAdapter */
|
|
2052
|
+
adapter?: DataTableAdapterInterface<T>;
|
|
2053
|
+
}
|
|
2054
|
+
interface DataTableContext<T extends Record<string, unknown>> {
|
|
2055
|
+
/** Final paginated items for rendering */
|
|
2056
|
+
items: Readonly<Ref<readonly T[]>>;
|
|
2057
|
+
/** Raw unprocessed items */
|
|
2058
|
+
allItems: Readonly<Ref<readonly T[]>>;
|
|
2059
|
+
/** Items after filtering */
|
|
2060
|
+
filteredItems: Readonly<Ref<readonly T[]>>;
|
|
2061
|
+
/** Items after filtering and sorting */
|
|
2062
|
+
sortedItems: Readonly<Ref<readonly T[]>>;
|
|
2063
|
+
/** Column definitions */
|
|
2064
|
+
columns: readonly DataTableColumn<T>[];
|
|
2065
|
+
/** Set the search query */
|
|
2066
|
+
search: (value: string) => void;
|
|
2067
|
+
/** Current search query (readonly) */
|
|
2068
|
+
query: Readonly<ShallowRef<string>>;
|
|
2069
|
+
/** Sort controls */
|
|
2070
|
+
sort: DataTableSort;
|
|
2071
|
+
/** Pagination controls */
|
|
2072
|
+
pagination: PaginationContext;
|
|
2073
|
+
/** Row selection controls */
|
|
2074
|
+
selection: DataTableSelection;
|
|
2075
|
+
/** Row expansion controls */
|
|
2076
|
+
expansion: DataTableExpansion;
|
|
2077
|
+
/** Row grouping controls. When groupBy is not set, `groups` returns an empty array. */
|
|
2078
|
+
grouping: DataTableGrouping<T>;
|
|
2079
|
+
/** Total row count for aria-rowcount */
|
|
2080
|
+
total: Readonly<Ref<number>>;
|
|
2081
|
+
/** Loading state (managed by adapter) */
|
|
2082
|
+
loading: Readonly<Ref<boolean>>;
|
|
2083
|
+
/** Error state (managed by adapter) */
|
|
2084
|
+
error: Readonly<Ref<Error | null>>;
|
|
2085
|
+
}
|
|
2086
|
+
interface DataTableContextOptions<T extends Record<string, unknown>> extends DataTableOptions<T> {
|
|
2087
|
+
namespace?: string;
|
|
2088
|
+
}
|
|
2089
|
+
/**
|
|
2090
|
+
* Creates a data table instance with sort controls, selection, and an
|
|
2091
|
+
* adapter-driven data pipeline.
|
|
2092
|
+
*
|
|
2093
|
+
* Must be called inside a component `setup()` or a Vue effect scope.
|
|
2094
|
+
* Calling at module scope in SSR environments causes request state leakage.
|
|
2095
|
+
*
|
|
2096
|
+
* @param options Data table options
|
|
2097
|
+
* @returns Data table context with pipeline stages and controls
|
|
50
2098
|
*
|
|
51
2099
|
* @example
|
|
52
2100
|
* ```ts
|
|
53
|
-
*
|
|
54
|
-
*
|
|
2101
|
+
* import { createDataTable } from '@vuetify/v0'
|
|
2102
|
+
*
|
|
2103
|
+
* const table = createDataTable({
|
|
2104
|
+
* items: users,
|
|
2105
|
+
* columns: [
|
|
2106
|
+
* { key: 'name', title: 'Name', sortable: true, filterable: true },
|
|
2107
|
+
* { key: 'email', title: 'Email', sortable: true, filterable: true },
|
|
2108
|
+
* { key: 'age', title: 'Age', sortable: true },
|
|
2109
|
+
* ],
|
|
2110
|
+
* })
|
|
55
2111
|
*
|
|
56
|
-
* //
|
|
57
|
-
*
|
|
58
|
-
*
|
|
2112
|
+
* // Search
|
|
2113
|
+
* table.search('john')
|
|
2114
|
+
*
|
|
2115
|
+
* // Sort
|
|
2116
|
+
* table.sort.toggle('name') // asc
|
|
2117
|
+
* table.sort.toggle('name') // desc
|
|
2118
|
+
* table.sort.toggle('name') // none
|
|
2119
|
+
* console.log(table.sort.columns.value) // [{ key: 'name', direction: 'asc' }]
|
|
2120
|
+
*
|
|
2121
|
+
* // Paginate
|
|
2122
|
+
* table.pagination.next()
|
|
2123
|
+
*
|
|
2124
|
+
* // Select rows
|
|
2125
|
+
* table.selection.toggle('user-1')
|
|
59
2126
|
* ```
|
|
60
2127
|
*/
|
|
61
|
-
declare function
|
|
2128
|
+
declare function createDataTable<T extends Record<string, unknown>>(options: DataTableOptions<T>): DataTableContext<T>;
|
|
62
2129
|
/**
|
|
63
|
-
* Creates a
|
|
64
|
-
*
|
|
65
|
-
* Supports two modes:
|
|
66
|
-
* - **Static key mode**: Pass a string/symbol key. The key is fixed at creation time.
|
|
67
|
-
* - **Dynamic key mode**: Pass nothing or an options object. The key is provided at runtime.
|
|
68
|
-
*
|
|
69
|
-
* @template Z The type of the context.
|
|
70
|
-
* @returns A tuple containing the `useContext` and `provideContext` functions.
|
|
2130
|
+
* Creates a data table context with dependency injection support.
|
|
71
2131
|
*
|
|
72
|
-
* @
|
|
73
|
-
* @
|
|
2132
|
+
* @param options Data table context options including namespace
|
|
2133
|
+
* @returns A trinity tuple: [useDataTable, provideDataTable, defaultContext]
|
|
74
2134
|
*
|
|
75
2135
|
* @example
|
|
76
2136
|
* ```ts
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
2137
|
+
* import { createDataTableContext } from '@vuetify/v0'
|
|
2138
|
+
*
|
|
2139
|
+
* const [useDataTable, provideDataTable, context] = createDataTableContext({
|
|
2140
|
+
* namespace: 'app:users',
|
|
2141
|
+
* items: users,
|
|
2142
|
+
* columns: [
|
|
2143
|
+
* { key: 'name', title: 'Name', sortable: true },
|
|
2144
|
+
* ],
|
|
2145
|
+
* })
|
|
81
2146
|
*
|
|
82
|
-
* //
|
|
83
|
-
*
|
|
84
|
-
* provideContext('v0:panel', context) // provides to 'v0:panel'
|
|
85
|
-
* useContext('v0:panel') // injects from 'v0:panel'
|
|
2147
|
+
* // Parent component
|
|
2148
|
+
* provideDataTable()
|
|
86
2149
|
*
|
|
87
|
-
* //
|
|
88
|
-
* const
|
|
89
|
-
* provideContext('v0:panel', context) // provides to 'v0:panel:item'
|
|
90
|
-
* useContext('v0:panel') // injects from 'v0:panel:item'
|
|
2150
|
+
* // Child component
|
|
2151
|
+
* const table = useDataTable()
|
|
91
2152
|
* ```
|
|
92
2153
|
*/
|
|
93
|
-
declare function
|
|
94
|
-
|
|
2154
|
+
declare function createDataTableContext<T extends Record<string, unknown>>(_options: DataTableContextOptions<T>): ContextTrinity<DataTableContext<T>>;
|
|
2155
|
+
/**
|
|
2156
|
+
* Returns the current data table context from dependency injection.
|
|
2157
|
+
*
|
|
2158
|
+
* @typeParam T - Must be provided explicitly; cannot be inferred from namespace.
|
|
2159
|
+
* Prefer the `useX` function from {@link createDataTableContext} for type-safe injection.
|
|
2160
|
+
*
|
|
2161
|
+
* @param namespace The namespace for the data table context. @default 'v0:data-table'
|
|
2162
|
+
* @returns The current data table context
|
|
2163
|
+
*
|
|
2164
|
+
* @example
|
|
2165
|
+
* ```vue
|
|
2166
|
+
* <script setup lang="ts">
|
|
2167
|
+
* import { useDataTable } from '@vuetify/v0'
|
|
2168
|
+
*
|
|
2169
|
+
* const table = useDataTable<User>()
|
|
2170
|
+
* </script>
|
|
2171
|
+
* ```
|
|
2172
|
+
*/
|
|
2173
|
+
declare function useDataTable<T extends Record<string, unknown>>(namespace?: string): DataTableContext<T>;
|
|
95
2174
|
//#endregion
|
|
96
2175
|
//#region src/composables/createPlugin/index.d.ts
|
|
97
2176
|
interface PluginOptions {
|
|
@@ -231,14 +2310,14 @@ interface BreakpointsContextOptions extends BreakpointsOptions {}
|
|
|
231
2310
|
*
|
|
232
2311
|
* export const [useBreakpoints, provideBreakpoints] = createBreakpoints({
|
|
233
2312
|
* namespace: 'v0:breakpoints',
|
|
234
|
-
* mobileBreakpoint: '
|
|
2313
|
+
* mobileBreakpoint: 'md',
|
|
235
2314
|
* breakpoints: {
|
|
236
2315
|
* xs: 0,
|
|
237
|
-
* sm:
|
|
238
|
-
* md:
|
|
239
|
-
* lg:
|
|
240
|
-
* xl:
|
|
241
|
-
* xxl:
|
|
2316
|
+
* sm: 600,
|
|
2317
|
+
* md: 840,
|
|
2318
|
+
* lg: 1145,
|
|
2319
|
+
* xl: 1545,
|
|
2320
|
+
* xxl: 2138,
|
|
242
2321
|
* },
|
|
243
2322
|
* })
|
|
244
2323
|
* ```
|
|
@@ -284,14 +2363,14 @@ declare function createBreakpointsContext<E extends BreakpointsContext = Breakpo
|
|
|
284
2363
|
* app.use(
|
|
285
2364
|
* createBreakpointsPlugin({
|
|
286
2365
|
* namespace: 'v0:breakpoints',
|
|
287
|
-
* mobileBreakpoint: '
|
|
2366
|
+
* mobileBreakpoint: 'md',
|
|
288
2367
|
* breakpoints: {
|
|
289
2368
|
* xs: 0,
|
|
290
|
-
* sm:
|
|
291
|
-
* md:
|
|
292
|
-
* lg:
|
|
293
|
-
* xl:
|
|
294
|
-
* xxl:
|
|
2369
|
+
* sm: 600,
|
|
2370
|
+
* md: 840,
|
|
2371
|
+
* lg: 1145,
|
|
2372
|
+
* xl: 1545,
|
|
2373
|
+
* xxl: 2138,
|
|
295
2374
|
* },
|
|
296
2375
|
* })
|
|
297
2376
|
* )
|
|
@@ -313,13 +2392,20 @@ declare function createBreakpointsPlugin<E extends BreakpointsContext = Breakpoi
|
|
|
313
2392
|
* <script setup lang="ts">
|
|
314
2393
|
* import { useBreakpoints } from '@vuetify/v0'
|
|
315
2394
|
*
|
|
2395
|
+
* // Destructure for template auto-unwrapping
|
|
316
2396
|
* const { isMobile, mdAndUp } = useBreakpoints()
|
|
2397
|
+
*
|
|
2398
|
+
* // In script, use .value
|
|
2399
|
+
* if (isMobile.value) {
|
|
2400
|
+
* console.log('Mobile detected')
|
|
2401
|
+
* }
|
|
317
2402
|
* </script>
|
|
318
2403
|
*
|
|
319
2404
|
* <template>
|
|
320
2405
|
* <div class="pa-4">
|
|
321
|
-
*
|
|
322
|
-
* <p v-
|
|
2406
|
+
* <!-- Destructured refs auto-unwrap in templates -->
|
|
2407
|
+
* <p v-if="isMobile">Mobile layout active</p>
|
|
2408
|
+
* <p v-else-if="mdAndUp">Medium and up layout active</p>
|
|
323
2409
|
* </div>
|
|
324
2410
|
* </template>
|
|
325
2411
|
* ```
|
|
@@ -897,253 +2983,115 @@ interface FeaturePluginOptions extends FeatureContextOptions {
|
|
|
897
2983
|
/**
|
|
898
2984
|
* Feature flag adapter for external services.
|
|
899
2985
|
*
|
|
900
|
-
* @remarks Adapters provide dynamic flag values from external services.
|
|
901
|
-
*/
|
|
902
|
-
adapter?: MaybeArray<FeaturesAdapterInterface>;
|
|
903
|
-
}
|
|
904
|
-
/**
|
|
905
|
-
* Creates a new features instance.
|
|
906
|
-
*
|
|
907
|
-
* @param options The options for the features instance.
|
|
908
|
-
* @template Z The type of the feature ticket.
|
|
909
|
-
* @template E The type of the feature context.
|
|
910
|
-
* @returns A new features instance.
|
|
911
|
-
*
|
|
912
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
913
|
-
*
|
|
914
|
-
* @example
|
|
915
|
-
* ```ts
|
|
916
|
-
* import { createFeatures } from '@vuetify/v0'
|
|
917
|
-
*
|
|
918
|
-
* const [useFeatures, provideFeaturesContext, context] = createFeatures({
|
|
919
|
-
* namespace: 'v0:features',
|
|
920
|
-
* features: {
|
|
921
|
-
* 'dark-mode': true,
|
|
922
|
-
* 'theme-color': { $variation: 'blue' },
|
|
923
|
-
* },
|
|
924
|
-
* })
|
|
925
|
-
* ```
|
|
926
|
-
*/
|
|
927
|
-
declare function createFeatures<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(_options?: FeatureOptions): R;
|
|
928
|
-
/**
|
|
929
|
-
* Creates a new features context.
|
|
930
|
-
*
|
|
931
|
-
* @param options The options for the features context.
|
|
932
|
-
* @template Z The type of the feature ticket.
|
|
933
|
-
* @template E The type of the feature context.
|
|
934
|
-
* @returns A new features context.
|
|
935
|
-
*
|
|
936
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
937
|
-
*
|
|
938
|
-
* @example
|
|
939
|
-
* ```ts
|
|
940
|
-
* import { createFeaturesContext } from '@vuetify/v0'
|
|
941
|
-
*
|
|
942
|
-
* export const [useFeatures, provideFeatures, context] = createFeaturesContext({
|
|
943
|
-
* namespace: 'app:features',
|
|
944
|
-
* features: {
|
|
945
|
-
* 'dark-mode': true,
|
|
946
|
-
* 'theme-color': { $variation: 'blue' },
|
|
947
|
-
* },
|
|
948
|
-
* })
|
|
949
|
-
* ```
|
|
950
|
-
*/
|
|
951
|
-
declare function createFeaturesContext<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(_options?: FeatureContextOptions): ContextTrinity<R>;
|
|
952
|
-
/**
|
|
953
|
-
* Creates a new features plugin.
|
|
954
|
-
*
|
|
955
|
-
* @param options The options for the features plugin.
|
|
956
|
-
* @template Z The type of the feature ticket.
|
|
957
|
-
* @template E The type of the feature context.
|
|
958
|
-
* @returns A new features plugin.
|
|
959
|
-
*
|
|
960
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
961
|
-
*
|
|
962
|
-
* @example
|
|
963
|
-
* ```ts
|
|
964
|
-
* import { createApp } from 'vue'
|
|
965
|
-
* import { createFeaturesPlugin } from '@vuetify/v0'
|
|
966
|
-
* import App from './App.vue'
|
|
967
|
-
*
|
|
968
|
-
* const app = createApp(App)
|
|
969
|
-
*
|
|
970
|
-
* app.use(
|
|
971
|
-
* createFeaturesPlugin({
|
|
972
|
-
* features: {
|
|
973
|
-
* 'dark-mode': true,
|
|
974
|
-
* 'theme-color': { $variation: 'blue' },
|
|
975
|
-
* },
|
|
976
|
-
* })
|
|
977
|
-
* )
|
|
978
|
-
*
|
|
979
|
-
* app.mount('#app')
|
|
980
|
-
* ```
|
|
981
|
-
*/
|
|
982
|
-
declare function createFeaturesPlugin<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(_options?: FeaturePluginOptions): Plugin;
|
|
983
|
-
/**
|
|
984
|
-
* Returns the current features instance.
|
|
985
|
-
*
|
|
986
|
-
* @param namespace The namespace for the features context. Defaults to `v0:features`.
|
|
987
|
-
* @template Z The type of the feature ticket.
|
|
988
|
-
* @returns The current features instance.
|
|
989
|
-
*
|
|
990
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
991
|
-
*
|
|
992
|
-
* @example
|
|
993
|
-
* ```vue
|
|
994
|
-
* <script setup lang="ts">
|
|
995
|
-
* import { useFeatures } from '@vuetify/v0'
|
|
996
|
-
*
|
|
997
|
-
* const features = useFeatures()
|
|
998
|
-
* </script>
|
|
999
|
-
*
|
|
1000
|
-
* <template>
|
|
1001
|
-
* <div>
|
|
1002
|
-
* <p>Features: {{ features.get('dark-mode') }}</p>
|
|
1003
|
-
* <p>Theme Color: {{ features.variation('theme-color') }}</p>
|
|
1004
|
-
* </div>
|
|
1005
|
-
* </template>
|
|
1006
|
-
* ```
|
|
1007
|
-
*/
|
|
1008
|
-
declare function useFeatures<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(namespace?: string): R;
|
|
1009
|
-
//#endregion
|
|
1010
|
-
//#region src/composables/useFilter/index.d.ts
|
|
1011
|
-
type Primitive = string | number | boolean;
|
|
1012
|
-
type FilterQuery = MaybeRefOrGetter<Primitive | Primitive[]>;
|
|
1013
|
-
type FilterItem = Primitive | Record<string, any>;
|
|
1014
|
-
type FilterMode = 'some' | 'every' | 'union' | 'intersection';
|
|
1015
|
-
type FilterFunction = (query: Primitive | Primitive[], item: FilterItem) => boolean;
|
|
1016
|
-
interface FilterOptions {
|
|
1017
|
-
customFilter?: FilterFunction;
|
|
1018
|
-
keys?: string[];
|
|
1019
|
-
mode?: FilterMode;
|
|
1020
|
-
}
|
|
1021
|
-
interface FilterResult<Z extends FilterItem = FilterItem> {
|
|
1022
|
-
items: ComputedRef<Z[]>;
|
|
1023
|
-
}
|
|
1024
|
-
interface FilterContext<Z extends FilterItem = FilterItem> {
|
|
1025
|
-
/** The filter mode */
|
|
1026
|
-
mode: FilterMode;
|
|
1027
|
-
/** Keys to filter on for object items */
|
|
1028
|
-
keys: string[] | undefined;
|
|
1029
|
-
/** Custom filter function */
|
|
1030
|
-
customFilter: FilterFunction | undefined;
|
|
1031
|
-
/** Current query ref */
|
|
1032
|
-
query: ShallowRef<Primitive | Primitive[]>;
|
|
1033
|
-
/**
|
|
1034
|
-
* Apply filter to an array of items
|
|
1035
|
-
*
|
|
1036
|
-
* @param query The query to filter by
|
|
1037
|
-
* @param items The items to filter
|
|
1038
|
-
* @returns The filtered items as a computed ref
|
|
1039
|
-
*/
|
|
1040
|
-
apply: <T extends Z>(query: FilterQuery, items: MaybeRef<T[]>) => FilterResult<T>;
|
|
1041
|
-
}
|
|
1042
|
-
interface FilterContextOptions extends FilterOptions {
|
|
1043
|
-
namespace?: string;
|
|
2986
|
+
* @remarks Adapters provide dynamic flag values from external services.
|
|
2987
|
+
*/
|
|
2988
|
+
adapter?: MaybeArray<FeaturesAdapterInterface>;
|
|
1044
2989
|
}
|
|
1045
2990
|
/**
|
|
1046
|
-
* Creates a
|
|
2991
|
+
* Creates a new features instance.
|
|
1047
2992
|
*
|
|
1048
|
-
* @param options The
|
|
1049
|
-
* @template Z The type of the
|
|
1050
|
-
* @template E The type of the
|
|
1051
|
-
* @returns A
|
|
2993
|
+
* @param options The options for the features instance.
|
|
2994
|
+
* @template Z The type of the feature ticket.
|
|
2995
|
+
* @template E The type of the feature context.
|
|
2996
|
+
* @returns A new features instance.
|
|
1052
2997
|
*
|
|
1053
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
2998
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
1054
2999
|
*
|
|
1055
3000
|
* @example
|
|
1056
3001
|
* ```ts
|
|
1057
|
-
* import {
|
|
3002
|
+
* import { createFeatures } from '@vuetify/v0'
|
|
1058
3003
|
*
|
|
1059
|
-
* const
|
|
1060
|
-
*
|
|
1061
|
-
*
|
|
3004
|
+
* const [useFeatures, provideFeaturesContext, context] = createFeatures({
|
|
3005
|
+
* namespace: 'v0:features',
|
|
3006
|
+
* features: {
|
|
3007
|
+
* 'dark-mode': true,
|
|
3008
|
+
* 'theme-color': { $variation: 'blue' },
|
|
3009
|
+
* },
|
|
1062
3010
|
* })
|
|
1063
|
-
*
|
|
1064
|
-
* const { items } = filter.apply(query, users)
|
|
1065
3011
|
* ```
|
|
1066
3012
|
*/
|
|
1067
|
-
declare function
|
|
3013
|
+
declare function createFeatures<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(_options?: FeatureOptions): R;
|
|
1068
3014
|
/**
|
|
1069
|
-
* Creates a
|
|
3015
|
+
* Creates a new features context.
|
|
1070
3016
|
*
|
|
1071
|
-
* @param options The
|
|
1072
|
-
* @template Z The type of the
|
|
1073
|
-
* @template E The type of the
|
|
1074
|
-
* @returns A
|
|
3017
|
+
* @param options The options for the features context.
|
|
3018
|
+
* @template Z The type of the feature ticket.
|
|
3019
|
+
* @template E The type of the feature context.
|
|
3020
|
+
* @returns A new features context.
|
|
1075
3021
|
*
|
|
1076
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
3022
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
1077
3023
|
*
|
|
1078
3024
|
* @example
|
|
1079
3025
|
* ```ts
|
|
1080
|
-
* import {
|
|
3026
|
+
* import { createFeaturesContext } from '@vuetify/v0'
|
|
1081
3027
|
*
|
|
1082
|
-
* export const [
|
|
1083
|
-
* namespace: 'app:
|
|
1084
|
-
*
|
|
1085
|
-
*
|
|
3028
|
+
* export const [useFeatures, provideFeatures, context] = createFeaturesContext({
|
|
3029
|
+
* namespace: 'app:features',
|
|
3030
|
+
* features: {
|
|
3031
|
+
* 'dark-mode': true,
|
|
3032
|
+
* 'theme-color': { $variation: 'blue' },
|
|
3033
|
+
* },
|
|
1086
3034
|
* })
|
|
1087
|
-
*
|
|
1088
|
-
* // In parent component
|
|
1089
|
-
* provideSearchFilter()
|
|
1090
|
-
*
|
|
1091
|
-
* // In child component
|
|
1092
|
-
* const filter = useSearchFilter()
|
|
1093
|
-
* const { items } = filter.apply(query, products)
|
|
1094
3035
|
* ```
|
|
1095
3036
|
*/
|
|
1096
|
-
declare function
|
|
3037
|
+
declare function createFeaturesContext<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(_options?: FeatureContextOptions): ContextTrinity<R>;
|
|
1097
3038
|
/**
|
|
1098
|
-
*
|
|
3039
|
+
* Creates a new features plugin.
|
|
1099
3040
|
*
|
|
1100
|
-
* @param
|
|
1101
|
-
* @
|
|
1102
|
-
* @
|
|
1103
|
-
* @
|
|
1104
|
-
* @returns The filtered items.
|
|
3041
|
+
* @param options The options for the features plugin.
|
|
3042
|
+
* @template Z The type of the feature ticket.
|
|
3043
|
+
* @template E The type of the feature context.
|
|
3044
|
+
* @returns A new features plugin.
|
|
1105
3045
|
*
|
|
1106
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
3046
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
1107
3047
|
*
|
|
1108
3048
|
* @example
|
|
1109
3049
|
* ```ts
|
|
1110
|
-
* import {
|
|
1111
|
-
* import {
|
|
3050
|
+
* import { createApp } from 'vue'
|
|
3051
|
+
* import { createFeaturesPlugin } from '@vuetify/v0'
|
|
3052
|
+
* import App from './App.vue'
|
|
1112
3053
|
*
|
|
1113
|
-
* const
|
|
1114
|
-
* { name: 'John Doe', age: 30 },
|
|
1115
|
-
* { name: 'Jane Doe', age: 25 },
|
|
1116
|
-
* { name: 'Peter Jones', age: 40 },
|
|
1117
|
-
* ])
|
|
3054
|
+
* const app = createApp(App)
|
|
1118
3055
|
*
|
|
1119
|
-
*
|
|
1120
|
-
*
|
|
3056
|
+
* app.use(
|
|
3057
|
+
* createFeaturesPlugin({
|
|
3058
|
+
* features: {
|
|
3059
|
+
* 'dark-mode': true,
|
|
3060
|
+
* 'theme-color': { $variation: 'blue' },
|
|
3061
|
+
* },
|
|
3062
|
+
* })
|
|
3063
|
+
* )
|
|
1121
3064
|
*
|
|
1122
|
-
*
|
|
3065
|
+
* app.mount('#app')
|
|
1123
3066
|
* ```
|
|
1124
3067
|
*/
|
|
1125
|
-
declare function
|
|
3068
|
+
declare function createFeaturesPlugin<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(_options?: FeaturePluginOptions): Plugin;
|
|
1126
3069
|
/**
|
|
1127
|
-
* Returns the current
|
|
3070
|
+
* Returns the current features instance.
|
|
1128
3071
|
*
|
|
1129
|
-
* @param namespace The namespace for the
|
|
1130
|
-
* @template Z The type of the
|
|
1131
|
-
* @
|
|
1132
|
-
* @returns The current filter context.
|
|
3072
|
+
* @param namespace The namespace for the features context. Defaults to `v0:features`.
|
|
3073
|
+
* @template Z The type of the feature ticket.
|
|
3074
|
+
* @returns The current features instance.
|
|
1133
3075
|
*
|
|
1134
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
3076
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
1135
3077
|
*
|
|
1136
3078
|
* @example
|
|
1137
3079
|
* ```vue
|
|
1138
3080
|
* <script setup lang="ts">
|
|
1139
|
-
* import {
|
|
3081
|
+
* import { useFeatures } from '@vuetify/v0'
|
|
1140
3082
|
*
|
|
1141
|
-
* const
|
|
1142
|
-
* const { items } = filter.apply(query, products)
|
|
3083
|
+
* const features = useFeatures()
|
|
1143
3084
|
* </script>
|
|
3085
|
+
*
|
|
3086
|
+
* <template>
|
|
3087
|
+
* <div>
|
|
3088
|
+
* <p>Features: {{ features.get('dark-mode') }}</p>
|
|
3089
|
+
* <p>Theme Color: {{ features.variation('theme-color') }}</p>
|
|
3090
|
+
* </div>
|
|
3091
|
+
* </template>
|
|
1144
3092
|
* ```
|
|
1145
3093
|
*/
|
|
1146
|
-
declare function
|
|
3094
|
+
declare function useFeatures<Z extends FeatureTicketInput = FeatureTicketInput, E extends FeatureTicket<Z> = FeatureTicket<Z>, R extends FeatureContext<Z, E> = FeatureContext<Z, E>>(namespace?: string): R;
|
|
1147
3095
|
//#endregion
|
|
1148
3096
|
//#region src/composables/createForm/index.d.ts
|
|
1149
3097
|
type FormValidationResult = string | true | Promise<string | true>;
|
|
@@ -2168,6 +4116,8 @@ declare function useMutationObserver(target: MaybeRef<Element | null | undefined
|
|
|
2168
4116
|
interface NestedTicketInput<V = unknown> extends GroupTicketInput<V> {
|
|
2169
4117
|
/** ID of the parent ticket, or undefined if this is a root item */
|
|
2170
4118
|
parentId?: ID;
|
|
4119
|
+
/** Whether this ticket is initially active */
|
|
4120
|
+
active?: boolean;
|
|
2171
4121
|
}
|
|
2172
4122
|
/**
|
|
2173
4123
|
* Output type for nested tickets - what users receive from get().
|
|
@@ -2180,6 +4130,8 @@ type NestedTicket<Z extends NestedTicketInput = NestedTicketInput> = GroupTicket
|
|
|
2180
4130
|
parentId: ID | undefined;
|
|
2181
4131
|
/** Whether this ticket is currently open/expanded */
|
|
2182
4132
|
isOpen: Readonly<Ref<boolean>>;
|
|
4133
|
+
/** Whether this ticket is currently active/highlighted */
|
|
4134
|
+
isActive: Readonly<Ref<boolean>>;
|
|
2183
4135
|
/** Whether this ticket is a leaf node (has no children) */
|
|
2184
4136
|
isLeaf: Readonly<Ref<boolean>>;
|
|
2185
4137
|
/** Depth in tree (0 = root) */
|
|
@@ -2192,6 +4144,10 @@ type NestedTicket<Z extends NestedTicketInput = NestedTicketInput> = GroupTicket
|
|
|
2192
4144
|
flip: () => void;
|
|
2193
4145
|
/** Reveal this ticket by opening all ancestors */
|
|
2194
4146
|
reveal: () => void;
|
|
4147
|
+
/** Activate/highlight this ticket */
|
|
4148
|
+
activate: () => void;
|
|
4149
|
+
/** Deactivate/unhighlight this ticket */
|
|
4150
|
+
deactivate: () => void;
|
|
2195
4151
|
/** Get path from root to self (includes self) */
|
|
2196
4152
|
getPath: () => ID[];
|
|
2197
4153
|
/** Get ancestors excluding self */
|
|
@@ -2264,6 +4220,20 @@ interface NestedContext<Z extends NestedTicketInput = NestedTicketInput, E exten
|
|
|
2264
4220
|
readonly openedIds: Reactive<Set<ID>>;
|
|
2265
4221
|
/** Computed Set of opened/expanded item instances */
|
|
2266
4222
|
openedItems: ComputedRef<Set<E>>;
|
|
4223
|
+
/** Reactive Set of active/highlighted item IDs. Use activate/deactivate to modify. */
|
|
4224
|
+
readonly activeIds: Reactive<Set<ID>>;
|
|
4225
|
+
/** Computed Set of active/highlighted item instances */
|
|
4226
|
+
activeItems: ComputedRef<Set<E>>;
|
|
4227
|
+
/** Computed Set of active item indexes (position-based) */
|
|
4228
|
+
activeIndexes: ComputedRef<Set<number>>;
|
|
4229
|
+
/** Activate/highlight one or more items by ID */
|
|
4230
|
+
activate: (ids: ID | ID[]) => void;
|
|
4231
|
+
/** Deactivate/unhighlight one or more items by ID */
|
|
4232
|
+
deactivate: (ids: ID | ID[]) => void;
|
|
4233
|
+
/** Check if an item is active by ID */
|
|
4234
|
+
activated: (id: ID) => boolean;
|
|
4235
|
+
/** Deactivate all items */
|
|
4236
|
+
deactivateAll: () => void;
|
|
2267
4237
|
/** Open/expand one or more items by ID */
|
|
2268
4238
|
open: (ids: ID | ID[]) => void;
|
|
2269
4239
|
/** Close/collapse one or more items by ID */
|
|
@@ -2345,6 +4315,12 @@ type NestedSelectionMode = 'cascade' | 'independent' | 'leaf';
|
|
|
2345
4315
|
/**
|
|
2346
4316
|
* Options for creating a nested instance.
|
|
2347
4317
|
*/
|
|
4318
|
+
/**
|
|
4319
|
+
* Active mode for nested items.
|
|
4320
|
+
* - `'single'` (default): Only one item can be active at a time
|
|
4321
|
+
* - `'multiple'`: Multiple items can be active simultaneously
|
|
4322
|
+
*/
|
|
4323
|
+
type NestedActiveMode = 'single' | 'multiple';
|
|
2348
4324
|
interface NestedOptions extends GroupOptions {
|
|
2349
4325
|
/**
|
|
2350
4326
|
* Controls how nodes expand/collapse.
|
|
@@ -2369,6 +4345,12 @@ interface NestedOptions extends GroupOptions {
|
|
|
2369
4345
|
* - `'leaf'`: Only leaf nodes selectable; parent selection selects leaf descendants
|
|
2370
4346
|
*/
|
|
2371
4347
|
selection?: NestedSelectionMode;
|
|
4348
|
+
/**
|
|
4349
|
+
* Controls how many items can be active/highlighted simultaneously.
|
|
4350
|
+
* - `'single'` (default): Only one item active at a time
|
|
4351
|
+
* - `'multiple'`: Multiple items can be active simultaneously
|
|
4352
|
+
*/
|
|
4353
|
+
active?: NestedActiveMode;
|
|
2372
4354
|
/**
|
|
2373
4355
|
* Advanced: Custom strategy for open behavior.
|
|
2374
4356
|
* Overrides `open` option if provided.
|
|
@@ -2403,6 +4385,12 @@ interface NestedContextOptions extends GroupContextOptions {
|
|
|
2403
4385
|
* - `'leaf'`: Only leaf nodes selectable; parent selection selects leaf descendants
|
|
2404
4386
|
*/
|
|
2405
4387
|
selection?: NestedSelectionMode;
|
|
4388
|
+
/**
|
|
4389
|
+
* Controls how many items can be active/highlighted simultaneously.
|
|
4390
|
+
* - `'single'` (default): Only one item active at a time
|
|
4391
|
+
* - `'multiple'`: Multiple items can be active simultaneously
|
|
4392
|
+
*/
|
|
4393
|
+
active?: NestedActiveMode;
|
|
2406
4394
|
/**
|
|
2407
4395
|
* Advanced: Custom strategy for open behavior.
|
|
2408
4396
|
* Overrides `open` option if provided.
|
|
@@ -2487,173 +4475,33 @@ declare const singleOpenStrategy: OpenStrategy;
|
|
|
2487
4475
|
*/
|
|
2488
4476
|
declare function createNested<Z extends NestedTicketInput = NestedTicketInput, E extends NestedTicket<Z> = NestedTicket<Z>, R extends NestedContext<Z, E> = NestedContext<Z, E>>(_options?: NestedOptions): R;
|
|
2489
4477
|
/**
|
|
2490
|
-
* Creates a new nested context with provide/inject pattern.
|
|
2491
|
-
*
|
|
2492
|
-
* @param options The options for the nested context.
|
|
2493
|
-
* @returns A trinity tuple [useNested, provideNested, defaultNested]
|
|
2494
|
-
*
|
|
2495
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-nested
|
|
2496
|
-
*
|
|
2497
|
-
* @example
|
|
2498
|
-
* ```ts
|
|
2499
|
-
* import { createNestedContext } from '@vuetify/v0'
|
|
2500
|
-
*
|
|
2501
|
-
* export const [useTree, provideTree, tree] = createNestedContext()
|
|
2502
|
-
*
|
|
2503
|
-
* // In parent: provideTree()
|
|
2504
|
-
* // In child: const tree = useTree()
|
|
2505
|
-
* ```
|
|
2506
|
-
*/
|
|
2507
|
-
declare function createNestedContext<Z extends NestedTicketInput = NestedTicketInput, E extends NestedTicket<Z> = NestedTicket<Z>, R extends NestedContext<Z, E> = NestedContext<Z, E>>(_options?: NestedContextOptions): ContextTrinity<R>;
|
|
2508
|
-
/**
|
|
2509
|
-
* Returns the current nested instance from context.
|
|
2510
|
-
*
|
|
2511
|
-
* @param namespace The namespace for the nested context. Defaults to `'v0:nested'`.
|
|
2512
|
-
* @returns The current nested instance.
|
|
2513
|
-
*
|
|
2514
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-nested
|
|
2515
|
-
*/
|
|
2516
|
-
declare function useNested<Z extends NestedTicketInput = NestedTicketInput, E extends NestedTicket<Z> = NestedTicket<Z>, R extends NestedContext<Z, E> = NestedContext<Z, E>>(namespace?: string): R;
|
|
2517
|
-
//#endregion
|
|
2518
|
-
//#region src/composables/useOverflow/index.d.ts
|
|
2519
|
-
interface OverflowOptions {
|
|
2520
|
-
/**
|
|
2521
|
-
* Container element to track. Can be a ref, getter, or MaybeRefOrGetter.
|
|
2522
|
-
* When provided, useOverflow tracks this element's width automatically.
|
|
2523
|
-
* Accepts null for compatibility with Vue's useTemplateRef.
|
|
2524
|
-
*/
|
|
2525
|
-
container?: MaybeRefOrGetter<Element | null | undefined>;
|
|
2526
|
-
/** Gap between items in pixels */
|
|
2527
|
-
gap?: MaybeRefOrGetter<number>;
|
|
2528
|
-
/** Reserved space in pixels (for nav buttons, ellipsis, etc) */
|
|
2529
|
-
reserved?: MaybeRefOrGetter<number>;
|
|
2530
|
-
/**
|
|
2531
|
-
* Uniform item width in pixels. When provided, enables uniform mode
|
|
2532
|
-
* where capacity is calculated as available space / itemWidth.
|
|
2533
|
-
* Use this for same-width items like pagination buttons.
|
|
2534
|
-
*/
|
|
2535
|
-
itemWidth?: MaybeRefOrGetter<number>;
|
|
2536
|
-
/**
|
|
2537
|
-
* Calculate capacity from end instead of start.
|
|
2538
|
-
* Useful for breadcrumbs where trailing items take priority.
|
|
2539
|
-
* Only affects variable mode (uniform mode capacity is direction-independent).
|
|
2540
|
-
*/
|
|
2541
|
-
reverse?: MaybeRefOrGetter<boolean>;
|
|
2542
|
-
}
|
|
2543
|
-
interface OverflowContext {
|
|
2544
|
-
/** Container element ref */
|
|
2545
|
-
container: ShallowRef<Element | null | undefined>;
|
|
2546
|
-
/** Current container width */
|
|
2547
|
-
width: Readonly<ShallowRef<number>>;
|
|
2548
|
-
/** How many items fit in available space */
|
|
2549
|
-
capacity: ComputedRef<number>;
|
|
2550
|
-
/** Total width of all measured items */
|
|
2551
|
-
total: ComputedRef<number>;
|
|
2552
|
-
/** Whether items overflow the container */
|
|
2553
|
-
isOverflowing: Readonly<Ref<boolean>>;
|
|
2554
|
-
/** Register an item's element for width measurement */
|
|
2555
|
-
measure: (index: number, el: Element | undefined) => void;
|
|
2556
|
-
/** Clear all measurements */
|
|
2557
|
-
reset: () => void;
|
|
2558
|
-
}
|
|
2559
|
-
interface OverflowContextOptions extends OverflowOptions {
|
|
2560
|
-
/** Namespace for dependency injection */
|
|
2561
|
-
namespace?: string;
|
|
2562
|
-
}
|
|
2563
|
-
/**
|
|
2564
|
-
* Creates a new overflow context for computing how many items fit in a container.
|
|
2565
|
-
*
|
|
2566
|
-
* @param options Configuration options
|
|
2567
|
-
* @returns Overflow context with container ref, capacity, and measurement functions
|
|
2568
|
-
*
|
|
2569
|
-
* @example Variable-width mode (Breadcrumbs)
|
|
2570
|
-
* ```vue
|
|
2571
|
-
* <script lang="ts" setup>
|
|
2572
|
-
* import { useTemplateRef } from 'vue'
|
|
2573
|
-
* import { createOverflow } from '@vuetify/v0'
|
|
2574
|
-
*
|
|
2575
|
-
* const containerRef = useTemplateRef('container')
|
|
2576
|
-
* const overflow = createOverflow({
|
|
2577
|
-
* container: containerRef,
|
|
2578
|
-
* gap: 8,
|
|
2579
|
-
* reserved: 40,
|
|
2580
|
-
* })
|
|
2581
|
-
* </script>
|
|
2582
|
-
*
|
|
2583
|
-
* <template>
|
|
2584
|
-
* <div ref="container">
|
|
2585
|
-
* <span
|
|
2586
|
-
* v-for="(item, i) in items.slice(0, overflow.capacity.value)"
|
|
2587
|
-
* :key="i"
|
|
2588
|
-
* :ref="el => overflow.measure(i, el)"
|
|
2589
|
-
* >
|
|
2590
|
-
* {{ item }}
|
|
2591
|
-
* </span>
|
|
2592
|
-
* <span v-if="overflow.isOverflowing.value">...</span>
|
|
2593
|
-
* </div>
|
|
2594
|
-
* </template>
|
|
2595
|
-
* ```
|
|
2596
|
-
*
|
|
2597
|
-
* @example Uniform-width mode (Pagination)
|
|
2598
|
-
* ```ts
|
|
2599
|
-
* const overflow = createOverflow({
|
|
2600
|
-
* container: () => atom.value?.element,
|
|
2601
|
-
* itemWidth: buttonWidth,
|
|
2602
|
-
* reserved: () => buttonWidth.value * 4,
|
|
2603
|
-
* })
|
|
2604
|
-
* ```
|
|
2605
|
-
*/
|
|
2606
|
-
declare function createOverflow<E extends OverflowContext = OverflowContext>(options?: OverflowOptions): E;
|
|
2607
|
-
/**
|
|
2608
|
-
* Creates an overflow context with dependency injection support.
|
|
2609
|
-
*
|
|
2610
|
-
* @param options Configuration options including namespace
|
|
2611
|
-
* @template E The type of the overflow context
|
|
2612
|
-
* @returns Trinity tuple: [useOverflow, provideOverflow, defaultOverflow]
|
|
2613
|
-
*
|
|
2614
|
-
* @example
|
|
2615
|
-
* ```ts
|
|
2616
|
-
* // Create injectable context
|
|
2617
|
-
* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
|
|
2618
|
-
* namespace: 'my-overflow',
|
|
2619
|
-
* gap: 8,
|
|
2620
|
-
* reserved: 160,
|
|
2621
|
-
* })
|
|
2622
|
-
*
|
|
2623
|
-
* // In parent component
|
|
2624
|
-
* provideOverflow()
|
|
2625
|
-
*
|
|
2626
|
-
* // In child component
|
|
2627
|
-
* const overflow = useOverflow()
|
|
2628
|
-
* ```
|
|
2629
|
-
*/
|
|
2630
|
-
declare function createOverflowContext<E extends OverflowContext = OverflowContext>(_options?: OverflowContextOptions): ContextTrinity<E>;
|
|
2631
|
-
/**
|
|
2632
|
-
* Returns the current overflow context from dependency injection.
|
|
4478
|
+
* Creates a new nested context with provide/inject pattern.
|
|
2633
4479
|
*
|
|
2634
|
-
* @param
|
|
2635
|
-
* @
|
|
2636
|
-
* @returns The current overflow context.
|
|
4480
|
+
* @param options The options for the nested context.
|
|
4481
|
+
* @returns A trinity tuple [useNested, provideNested, defaultNested]
|
|
2637
4482
|
*
|
|
2638
|
-
* @
|
|
4483
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-nested
|
|
2639
4484
|
*
|
|
2640
4485
|
* @example
|
|
2641
|
-
* ```
|
|
2642
|
-
*
|
|
2643
|
-
* import { useOverflow } from '@vuetify/v0'
|
|
4486
|
+
* ```ts
|
|
4487
|
+
* import { createNestedContext } from '@vuetify/v0'
|
|
2644
4488
|
*
|
|
2645
|
-
*
|
|
2646
|
-
* const overflow = useOverflow()
|
|
2647
|
-
* </script>
|
|
4489
|
+
* export const [useTree, provideTree, tree] = createNestedContext()
|
|
2648
4490
|
*
|
|
2649
|
-
*
|
|
2650
|
-
*
|
|
2651
|
-
* <p>Capacity: {{ overflow.capacity.value }}</p>
|
|
2652
|
-
* </div>
|
|
2653
|
-
* </template>
|
|
4491
|
+
* // In parent: provideTree()
|
|
4492
|
+
* // In child: const tree = useTree()
|
|
2654
4493
|
* ```
|
|
2655
4494
|
*/
|
|
2656
|
-
declare function
|
|
4495
|
+
declare function createNestedContext<Z extends NestedTicketInput = NestedTicketInput, E extends NestedTicket<Z> = NestedTicket<Z>, R extends NestedContext<Z, E> = NestedContext<Z, E>>(_options?: NestedContextOptions): ContextTrinity<R>;
|
|
4496
|
+
/**
|
|
4497
|
+
* Returns the current nested instance from context.
|
|
4498
|
+
*
|
|
4499
|
+
* @param namespace The namespace for the nested context. Defaults to `'v0:nested'`.
|
|
4500
|
+
* @returns The current nested instance.
|
|
4501
|
+
*
|
|
4502
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-nested
|
|
4503
|
+
*/
|
|
4504
|
+
declare function useNested<Z extends NestedTicketInput = NestedTicketInput, E extends NestedTicket<Z> = NestedTicket<Z>, R extends NestedContext<Z, E> = NestedContext<Z, E>>(namespace?: string): R;
|
|
2657
4505
|
//#endregion
|
|
2658
4506
|
//#region src/composables/usePermissions/adapters/adapter.d.ts
|
|
2659
4507
|
interface PermissionAdapterInterface {
|
|
@@ -2782,7 +4630,7 @@ declare function usePermissions<Z extends PermissionTicket = PermissionTicket, E
|
|
|
2782
4630
|
//#endregion
|
|
2783
4631
|
//#region src/composables/useProxyModel/index.d.ts
|
|
2784
4632
|
interface ProxyModelOptions {
|
|
2785
|
-
multiple?: boolean
|
|
4633
|
+
multiple?: MaybeRefOrGetter<boolean>;
|
|
2786
4634
|
transformIn?: (val: unknown) => unknown;
|
|
2787
4635
|
transformOut?: (val: unknown) => unknown;
|
|
2788
4636
|
}
|
|
@@ -3266,6 +5114,411 @@ interface UseElementSizeReturn extends UseResizeObserverReturn {
|
|
|
3266
5114
|
*/
|
|
3267
5115
|
declare function useElementSize(target: MaybeRef<Element | null | undefined>): UseElementSizeReturn;
|
|
3268
5116
|
//#endregion
|
|
5117
|
+
//#region src/composables/useStack/index.d.ts
|
|
5118
|
+
/**
|
|
5119
|
+
* Input type for stack tickets - what users provide to register().
|
|
5120
|
+
*/
|
|
5121
|
+
interface StackTicketInput extends SelectionTicketInput {
|
|
5122
|
+
/**
|
|
5123
|
+
* Callback invoked when the overlay should be dismissed
|
|
5124
|
+
*
|
|
5125
|
+
* @remarks Called by `ticket.dismiss()` or when scrim is clicked.
|
|
5126
|
+
* Typically sets isActive to false.
|
|
5127
|
+
*/
|
|
5128
|
+
onDismiss?: () => void;
|
|
5129
|
+
/**
|
|
5130
|
+
* Whether this overlay blocks scrim dismissal
|
|
5131
|
+
*
|
|
5132
|
+
* @default false
|
|
5133
|
+
* @remarks When true, clicking the scrim will not dismiss this overlay.
|
|
5134
|
+
* Use for critical dialogs requiring explicit user action.
|
|
5135
|
+
*/
|
|
5136
|
+
blocking?: boolean;
|
|
5137
|
+
}
|
|
5138
|
+
/**
|
|
5139
|
+
* Output type for stack tickets - what users receive from register().
|
|
5140
|
+
*/
|
|
5141
|
+
type StackTicket<Z extends StackTicketInput = StackTicketInput> = SelectionTicket<Z> & {
|
|
5142
|
+
/**
|
|
5143
|
+
* Callback invoked when the overlay should be dismissed
|
|
5144
|
+
*/
|
|
5145
|
+
onDismiss?: () => void;
|
|
5146
|
+
/**
|
|
5147
|
+
* Whether this overlay blocks scrim dismissal
|
|
5148
|
+
*/
|
|
5149
|
+
blocking: boolean;
|
|
5150
|
+
/**
|
|
5151
|
+
* The calculated z-index for this overlay
|
|
5152
|
+
*
|
|
5153
|
+
* @remarks Automatically calculated based on selection order.
|
|
5154
|
+
* First selected overlay gets baseZIndex, each subsequent adds increment.
|
|
5155
|
+
*/
|
|
5156
|
+
zIndex: ComputedRef<number>;
|
|
5157
|
+
/**
|
|
5158
|
+
* Whether this overlay is the topmost in the global stack
|
|
5159
|
+
*
|
|
5160
|
+
* @remarks Useful for determining which overlay should handle
|
|
5161
|
+
* global keyboard events (e.g., Escape key).
|
|
5162
|
+
*/
|
|
5163
|
+
globalTop: ComputedRef<boolean>;
|
|
5164
|
+
/**
|
|
5165
|
+
* Dismiss this overlay
|
|
5166
|
+
*
|
|
5167
|
+
* @remarks If blocking is false, calls onDismiss callback and unselects.
|
|
5168
|
+
* If blocking is true, does nothing.
|
|
5169
|
+
*/
|
|
5170
|
+
dismiss: () => void;
|
|
5171
|
+
};
|
|
5172
|
+
/**
|
|
5173
|
+
* Context returned by createStack.
|
|
5174
|
+
*/
|
|
5175
|
+
interface StackContext<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register'> {
|
|
5176
|
+
/**
|
|
5177
|
+
* Whether any overlays are selected (active)
|
|
5178
|
+
*
|
|
5179
|
+
* @remarks Reactive boolean for conditional scrim rendering.
|
|
5180
|
+
*/
|
|
5181
|
+
isActive: Readonly<Ref<boolean>>;
|
|
5182
|
+
/**
|
|
5183
|
+
* The topmost selected overlay ticket
|
|
5184
|
+
*
|
|
5185
|
+
* @remarks Access to the current top overlay for inspection.
|
|
5186
|
+
*/
|
|
5187
|
+
top: Readonly<Ref<E | undefined>>;
|
|
5188
|
+
/**
|
|
5189
|
+
* Z-index for the scrim (one below top overlay)
|
|
5190
|
+
*
|
|
5191
|
+
* @remarks Position scrim behind the topmost overlay but above all others.
|
|
5192
|
+
*/
|
|
5193
|
+
scrimZIndex: Readonly<Ref<number>>;
|
|
5194
|
+
/**
|
|
5195
|
+
* Whether the topmost overlay blocks scrim clicks
|
|
5196
|
+
*
|
|
5197
|
+
* @remarks When true, the topmost overlay has `blocking: true`
|
|
5198
|
+
* and scrim clicks should be ignored.
|
|
5199
|
+
*/
|
|
5200
|
+
isBlocking: Readonly<Ref<boolean>>;
|
|
5201
|
+
/**
|
|
5202
|
+
* Register an overlay ticket
|
|
5203
|
+
*
|
|
5204
|
+
* @param input Partial ticket data
|
|
5205
|
+
* @returns Stack ticket with z-index and top tracking
|
|
5206
|
+
*
|
|
5207
|
+
* @remarks When called within component setup, the ticket is automatically
|
|
5208
|
+
* unregistered when the component unmounts.
|
|
5209
|
+
*/
|
|
5210
|
+
register: (input?: Partial<Z>) => E;
|
|
5211
|
+
}
|
|
5212
|
+
interface StackOptions extends SelectionOptions {
|
|
5213
|
+
/**
|
|
5214
|
+
* Base z-index when stack is empty
|
|
5215
|
+
*
|
|
5216
|
+
* @default 2000
|
|
5217
|
+
* @remarks First overlay receives this z-index.
|
|
5218
|
+
*/
|
|
5219
|
+
baseZIndex?: number;
|
|
5220
|
+
/**
|
|
5221
|
+
* Z-index increment between overlays
|
|
5222
|
+
*
|
|
5223
|
+
* @default 10
|
|
5224
|
+
* @remarks Gap between overlay z-indexes allows room for
|
|
5225
|
+
* overlay-internal elements (dropdowns, tooltips within dialogs).
|
|
5226
|
+
*/
|
|
5227
|
+
increment?: number;
|
|
5228
|
+
}
|
|
5229
|
+
interface StackContextOptions extends StackOptions {
|
|
5230
|
+
namespace?: string;
|
|
5231
|
+
}
|
|
5232
|
+
interface StackPluginOptions extends StackContextOptions {}
|
|
5233
|
+
/**
|
|
5234
|
+
* Creates a new stack instance for managing overlay z-indexes.
|
|
5235
|
+
*
|
|
5236
|
+
* @param options Configuration options
|
|
5237
|
+
* @returns Stack context with registry methods and scrim helpers
|
|
5238
|
+
*
|
|
5239
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
5240
|
+
*
|
|
5241
|
+
* @example
|
|
5242
|
+
* ```ts
|
|
5243
|
+
* import { createStack } from '@vuetify/v0'
|
|
5244
|
+
*
|
|
5245
|
+
* const stack = createStack({ baseZIndex: 1000 })
|
|
5246
|
+
*
|
|
5247
|
+
* const ticket = stack.register({
|
|
5248
|
+
* onDismiss: () => console.log('dismissed'),
|
|
5249
|
+
* blocking: false,
|
|
5250
|
+
* })
|
|
5251
|
+
*
|
|
5252
|
+
* ticket.select() // Activate overlay
|
|
5253
|
+
* console.log(ticket.zIndex.value) // 1000
|
|
5254
|
+
*
|
|
5255
|
+
* ticket.unselect() // Deactivate overlay
|
|
5256
|
+
* ```
|
|
5257
|
+
*/
|
|
5258
|
+
declare function createStack<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(_options?: StackOptions): R;
|
|
5259
|
+
/**
|
|
5260
|
+
* Creates a stack context trinity for provide/inject usage.
|
|
5261
|
+
*
|
|
5262
|
+
* @param options Configuration options including namespace
|
|
5263
|
+
* @returns Trinity of [useStackContext, provideStackContext, context]
|
|
5264
|
+
*
|
|
5265
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
5266
|
+
*
|
|
5267
|
+
* @example
|
|
5268
|
+
* ```ts
|
|
5269
|
+
* import { createStackContext } from '@vuetify/v0'
|
|
5270
|
+
*
|
|
5271
|
+
* const [useMyStack, provideMyStack, myStack] = createStackContext({
|
|
5272
|
+
* namespace: 'my:stack',
|
|
5273
|
+
* baseZIndex: 3000,
|
|
5274
|
+
* })
|
|
5275
|
+
*
|
|
5276
|
+
* // In parent component:
|
|
5277
|
+
* provideMyStack()
|
|
5278
|
+
*
|
|
5279
|
+
* // In child component:
|
|
5280
|
+
* const stack = useMyStack()
|
|
5281
|
+
* ```
|
|
5282
|
+
*/
|
|
5283
|
+
declare function createStackContext<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(_options?: StackContextOptions): ContextTrinity<R>;
|
|
5284
|
+
/**
|
|
5285
|
+
* Creates a Vue plugin to provide stack context at app level.
|
|
5286
|
+
*
|
|
5287
|
+
* @param options Configuration options
|
|
5288
|
+
* @returns Vue plugin instance
|
|
5289
|
+
*
|
|
5290
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
5291
|
+
*
|
|
5292
|
+
* @example
|
|
5293
|
+
* ```ts
|
|
5294
|
+
* import { createApp } from 'vue'
|
|
5295
|
+
* import { createStackPlugin } from '@vuetify/v0'
|
|
5296
|
+
*
|
|
5297
|
+
* const app = createApp(App)
|
|
5298
|
+
* app.use(createStackPlugin({ baseZIndex: 2000 }))
|
|
5299
|
+
* app.mount('#app')
|
|
5300
|
+
* ```
|
|
5301
|
+
*/
|
|
5302
|
+
declare function createStackPlugin<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(_options?: StackPluginOptions): Plugin;
|
|
5303
|
+
/**
|
|
5304
|
+
* Returns the current stack context.
|
|
5305
|
+
*
|
|
5306
|
+
* @param namespace The namespace for the stack context. Defaults to 'v0:stack'.
|
|
5307
|
+
* @returns The stack context instance
|
|
5308
|
+
*
|
|
5309
|
+
* @remarks Falls back to an internal shared instance if no provider exists.
|
|
5310
|
+
* For SSR safety, use createStackPlugin to provide isolated context per app.
|
|
5311
|
+
*
|
|
5312
|
+
* Tickets registered within component setup are automatically unregistered
|
|
5313
|
+
* when the component is unmounted.
|
|
5314
|
+
*
|
|
5315
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
5316
|
+
*
|
|
5317
|
+
* @example
|
|
5318
|
+
* ```vue
|
|
5319
|
+
* <script setup lang="ts">
|
|
5320
|
+
* import { shallowRef, watch } from 'vue'
|
|
5321
|
+
* import { useStack } from '@vuetify/v0'
|
|
5322
|
+
*
|
|
5323
|
+
* const stack = useStack()
|
|
5324
|
+
* const isOpen = shallowRef(false)
|
|
5325
|
+
*
|
|
5326
|
+
* // Ticket is auto-cleaned up when component unmounts
|
|
5327
|
+
* const ticket = stack.register({
|
|
5328
|
+
* onDismiss: () => { isOpen.value = false },
|
|
5329
|
+
* })
|
|
5330
|
+
*
|
|
5331
|
+
* // Sync selection state with isOpen
|
|
5332
|
+
* watch(isOpen, v => v ? ticket.select() : ticket.unselect())
|
|
5333
|
+
* </script>
|
|
5334
|
+
*
|
|
5335
|
+
* <template>
|
|
5336
|
+
* <button @click="isOpen = true">Open</button>
|
|
5337
|
+
* <div v-if="isOpen" :style="{ zIndex: ticket.zIndex.value }">
|
|
5338
|
+
* <p>Dialog content</p>
|
|
5339
|
+
* <button @click="ticket.dismiss()">Close</button>
|
|
5340
|
+
* </div>
|
|
5341
|
+
* </template>
|
|
5342
|
+
* ```
|
|
5343
|
+
*/
|
|
5344
|
+
declare function useStack<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(namespace?: string): R;
|
|
5345
|
+
//#endregion
|
|
5346
|
+
//#region src/composables/createStep/index.d.ts
|
|
5347
|
+
/**
|
|
5348
|
+
* Input type for step tickets.
|
|
5349
|
+
* Extend this interface to add custom properties.
|
|
5350
|
+
*/
|
|
5351
|
+
interface StepTicketInput<V = unknown> extends SingleTicketInput<V> {}
|
|
5352
|
+
/**
|
|
5353
|
+
* Output type for step tickets.
|
|
5354
|
+
* Includes all input properties plus selection methods.
|
|
5355
|
+
*/
|
|
5356
|
+
type StepTicket<Z extends StepTicketInput = StepTicketInput> = SingleTicket<Z>;
|
|
5357
|
+
/**
|
|
5358
|
+
* Context returned by createStep.
|
|
5359
|
+
*
|
|
5360
|
+
* @template Z The input ticket type.
|
|
5361
|
+
* @template E The output ticket type.
|
|
5362
|
+
*/
|
|
5363
|
+
interface StepContext<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>> extends Omit<SingleContext<Z, E>, 'register' | 'onboard'> {
|
|
5364
|
+
/** Select the first Ticket in the collection */
|
|
5365
|
+
first: () => void;
|
|
5366
|
+
/** Select the last Ticket in the collection */
|
|
5367
|
+
last: () => void;
|
|
5368
|
+
/** Select the next Ticket based on current index */
|
|
5369
|
+
next: () => void;
|
|
5370
|
+
/** Select the previous Ticket based on current index */
|
|
5371
|
+
prev: () => void;
|
|
5372
|
+
/** Step through the collection by a given count */
|
|
5373
|
+
step: (count: number) => void;
|
|
5374
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
5375
|
+
register: (ticket?: Partial<Z>) => E;
|
|
5376
|
+
/** Onboard multiple tickets at once */
|
|
5377
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
5378
|
+
}
|
|
5379
|
+
interface StepOptions extends SingleOptions {
|
|
5380
|
+
/**
|
|
5381
|
+
* Enable circular navigation (wrapping at boundaries).
|
|
5382
|
+
* - true: Navigation wraps around (carousel behavior)
|
|
5383
|
+
* - false: Navigation stops at boundaries (pagination behavior)
|
|
5384
|
+
* @default false
|
|
5385
|
+
*/
|
|
5386
|
+
circular?: boolean;
|
|
5387
|
+
}
|
|
5388
|
+
interface StepContextOptions extends SingleContextOptions {
|
|
5389
|
+
/**
|
|
5390
|
+
* Enable circular navigation (wrapping at boundaries).
|
|
5391
|
+
* - true: Navigation wraps around (carousel behavior)
|
|
5392
|
+
* - false: Navigation stops at boundaries (pagination behavior)
|
|
5393
|
+
* @default false
|
|
5394
|
+
*/
|
|
5395
|
+
circular?: boolean;
|
|
5396
|
+
}
|
|
5397
|
+
/**
|
|
5398
|
+
* Creates a new step instance with navigation through items.
|
|
5399
|
+
*
|
|
5400
|
+
* Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
|
|
5401
|
+
* for sequential navigation. Supports both circular (wrapping) and bounded (stopping at edges) modes.
|
|
5402
|
+
*
|
|
5403
|
+
* @param options The options for the step instance.
|
|
5404
|
+
* @template Z The type of the step ticket.
|
|
5405
|
+
* @template E The type of the step context.
|
|
5406
|
+
* @returns A new step instance with navigation methods.
|
|
5407
|
+
*
|
|
5408
|
+
* @remarks
|
|
5409
|
+
* **Key Features:**
|
|
5410
|
+
* - **Configurable Navigation**: `circular: true` for wrapping, `false` for bounded (default: false)
|
|
5411
|
+
* - **Disabled Item Skipping**: Automatically skips disabled items during navigation
|
|
5412
|
+
* - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
|
|
5413
|
+
* - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
|
|
5414
|
+
*
|
|
5415
|
+
* **Navigation Methods:**
|
|
5416
|
+
* - `first()`: Select first non-disabled item
|
|
5417
|
+
* - `last()`: Select last non-disabled item
|
|
5418
|
+
* - `next()`: Move to next item (wraps if circular, stops at end if bounded)
|
|
5419
|
+
* - `prev()`: Move to previous item (wraps if circular, stops at start if bounded)
|
|
5420
|
+
* - `step(count)`: Move by `count` positions (negative for backward)
|
|
5421
|
+
*
|
|
5422
|
+
* **Circular Mode (`circular: true`):**
|
|
5423
|
+
* - Uses modulo arithmetic for wrapping: `((index % length) + length) % length`
|
|
5424
|
+
* - Works correctly with negative indexes and large step counts
|
|
5425
|
+
* - Perfect for carousels, theme switchers, infinite scrolling
|
|
5426
|
+
*
|
|
5427
|
+
* **Bounded Mode (`circular: false`, default):**
|
|
5428
|
+
* - Navigation stops at boundaries (no wrapping)
|
|
5429
|
+
* - `next()` on last item does nothing
|
|
5430
|
+
* - `prev()` on first item does nothing
|
|
5431
|
+
* - Perfect for pagination, wizards with explicit completion, forms
|
|
5432
|
+
*
|
|
5433
|
+
* **Inheritance Chain:**
|
|
5434
|
+
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
5435
|
+
*
|
|
5436
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
5437
|
+
*
|
|
5438
|
+
* @example
|
|
5439
|
+
* ```ts
|
|
5440
|
+
* import { createStep } from '@vuetify/v0'
|
|
5441
|
+
*
|
|
5442
|
+
* // Bounded navigation (default) - for pagination
|
|
5443
|
+
* const pagination = createStep({ circular: false })
|
|
5444
|
+
* pagination.onboard([
|
|
5445
|
+
* { id: 'page-1', value: 1 },
|
|
5446
|
+
* { id: 'page-2', value: 2 },
|
|
5447
|
+
* { id: 'page-3', value: 3 },
|
|
5448
|
+
* ])
|
|
5449
|
+
* pagination.first() // Select page 1
|
|
5450
|
+
* pagination.prev() // Does nothing (already at first)
|
|
5451
|
+
* pagination.next() // Select page 2
|
|
5452
|
+
*
|
|
5453
|
+
* // Circular navigation - for carousels
|
|
5454
|
+
* const carousel = createStep({ circular: true })
|
|
5455
|
+
* carousel.onboard([
|
|
5456
|
+
* { id: 'slide-1', value: 'First' },
|
|
5457
|
+
* { id: 'slide-2', value: 'Second' },
|
|
5458
|
+
* { id: 'slide-3', value: 'Third' },
|
|
5459
|
+
* ])
|
|
5460
|
+
* carousel.first()
|
|
5461
|
+
* carousel.prev() // Wraps to 'slide-3'
|
|
5462
|
+
* carousel.next() // Wraps to 'slide-1'
|
|
5463
|
+
* ```
|
|
5464
|
+
*/
|
|
5465
|
+
declare function createStep<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(_options?: StepOptions): R;
|
|
5466
|
+
/**
|
|
5467
|
+
* Creates a new step context.
|
|
5468
|
+
*
|
|
5469
|
+
* @param options The options for the step context.
|
|
5470
|
+
* @template Z The input ticket type.
|
|
5471
|
+
* @template E The output ticket type.
|
|
5472
|
+
* @template R The context type.
|
|
5473
|
+
* @returns A new step context.
|
|
5474
|
+
*
|
|
5475
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
5476
|
+
*
|
|
5477
|
+
* @example
|
|
5478
|
+
* ```ts
|
|
5479
|
+
* import { createStepContext } from '@vuetify/v0'
|
|
5480
|
+
*
|
|
5481
|
+
* // With default namespace 'v0:step'
|
|
5482
|
+
* export const [useStep, provideStep, context] = createStepContext()
|
|
5483
|
+
*
|
|
5484
|
+
* // In a parent component:
|
|
5485
|
+
* provideStep()
|
|
5486
|
+
*
|
|
5487
|
+
* // In a child component:
|
|
5488
|
+
* const context = useStep()
|
|
5489
|
+
* context.next() // Progress to next step
|
|
5490
|
+
* ```
|
|
5491
|
+
*/
|
|
5492
|
+
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>;
|
|
5493
|
+
/**
|
|
5494
|
+
* Returns the current step instance.
|
|
5495
|
+
*
|
|
5496
|
+
* @param namespace The namespace for the step context. Defaults to `'v0:step'`.
|
|
5497
|
+
* @template Z The input ticket type.
|
|
5498
|
+
* @template E The output ticket type.
|
|
5499
|
+
* @template R The context type.
|
|
5500
|
+
* @returns The current step instance.
|
|
5501
|
+
*
|
|
5502
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
5503
|
+
*
|
|
5504
|
+
* @example
|
|
5505
|
+
* ```vue
|
|
5506
|
+
* <script setup lang="ts">
|
|
5507
|
+
* import { useStep } from '@vuetify/v0'
|
|
5508
|
+
*
|
|
5509
|
+
* const wizard = useStep()
|
|
5510
|
+
* </script>
|
|
5511
|
+
*
|
|
5512
|
+
* <template>
|
|
5513
|
+
* <div>
|
|
5514
|
+
* <p>Current step: {{ wizard.selectedIndex }}</p>
|
|
5515
|
+
* <button @click="wizard.next()">Next</button>
|
|
5516
|
+
* </div>
|
|
5517
|
+
* </template>
|
|
5518
|
+
* ```
|
|
5519
|
+
*/
|
|
5520
|
+
declare function useStep<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(namespace?: string): R;
|
|
5521
|
+
//#endregion
|
|
3269
5522
|
//#region src/composables/useStorage/adapters/adapter.d.ts
|
|
3270
5523
|
interface StorageAdapter$1 {
|
|
3271
5524
|
getItem: (key: string) => string | null;
|
|
@@ -3928,7 +6181,7 @@ interface ToggleScopeControls {
|
|
|
3928
6181
|
*/
|
|
3929
6182
|
declare function useToggleScope(source: WatchSource<boolean>, fn: (() => void) | ((controls: ToggleScopeControls) => void)): ToggleScopeControls;
|
|
3930
6183
|
//#endregion
|
|
3931
|
-
//#region src/composables/
|
|
6184
|
+
//#region src/composables/createVirtual/index.d.ts
|
|
3932
6185
|
type VirtualDirection = 'forward' | 'reverse';
|
|
3933
6186
|
type VirtualState = 'loading' | 'empty' | 'error' | 'ok';
|
|
3934
6187
|
type VirtualAnchor = 'auto' | 'start' | 'end' | ((items: readonly unknown[]) => number | string);
|
|
@@ -4007,9 +6260,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4007
6260
|
* @example
|
|
4008
6261
|
* ```vue
|
|
4009
6262
|
* <script setup lang="ts">
|
|
4010
|
-
* import {
|
|
6263
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4011
6264
|
*
|
|
4012
|
-
* const
|
|
6265
|
+
* const virtual = createVirtual(items)
|
|
6266
|
+
* const { element } = virtual
|
|
4013
6267
|
* </script>
|
|
4014
6268
|
*
|
|
4015
6269
|
* <template>
|
|
@@ -4027,9 +6281,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4027
6281
|
* @example
|
|
4028
6282
|
* ```vue
|
|
4029
6283
|
* <script setup lang="ts">
|
|
4030
|
-
* import {
|
|
6284
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4031
6285
|
*
|
|
4032
|
-
* const
|
|
6286
|
+
* const virtual = createVirtual(items)
|
|
6287
|
+
* const { items } = virtual
|
|
4033
6288
|
* </script>
|
|
4034
6289
|
*
|
|
4035
6290
|
* <template>
|
|
@@ -4046,9 +6301,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4046
6301
|
* @example
|
|
4047
6302
|
* ```vue
|
|
4048
6303
|
* <script setup lang="ts">
|
|
4049
|
-
* import {
|
|
6304
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4050
6305
|
*
|
|
4051
|
-
* const
|
|
6306
|
+
* const virtual = createVirtual(items)
|
|
6307
|
+
* const { offset } = virtual
|
|
4052
6308
|
* </script>
|
|
4053
6309
|
*
|
|
4054
6310
|
* <template>
|
|
@@ -4063,9 +6319,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4063
6319
|
* @example
|
|
4064
6320
|
* ```vue
|
|
4065
6321
|
* <script setup lang="ts">
|
|
4066
|
-
* import {
|
|
6322
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4067
6323
|
*
|
|
4068
|
-
* const
|
|
6324
|
+
* const virtual = createVirtual(items)
|
|
6325
|
+
* const { size } = virtual
|
|
4069
6326
|
* </script>
|
|
4070
6327
|
*
|
|
4071
6328
|
* <template>
|
|
@@ -4080,9 +6337,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4080
6337
|
* @example
|
|
4081
6338
|
* ```vue
|
|
4082
6339
|
* <script setup lang="ts">
|
|
4083
|
-
* import {
|
|
6340
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4084
6341
|
*
|
|
4085
|
-
* const
|
|
6342
|
+
* const virtual = createVirtual(items)
|
|
6343
|
+
* const { state } = virtual
|
|
4086
6344
|
* </script>
|
|
4087
6345
|
*
|
|
4088
6346
|
* <template>
|
|
@@ -4100,9 +6358,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4100
6358
|
* @example
|
|
4101
6359
|
* ```vue
|
|
4102
6360
|
* <script setup lang="ts">
|
|
4103
|
-
* import {
|
|
6361
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4104
6362
|
*
|
|
4105
|
-
* const
|
|
6363
|
+
* const virtual = createVirtual(items)
|
|
6364
|
+
* const { scrollTo } = virtual
|
|
4106
6365
|
* </script>
|
|
4107
6366
|
*
|
|
4108
6367
|
* <template>
|
|
@@ -4118,9 +6377,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4118
6377
|
* @example
|
|
4119
6378
|
* ```vue
|
|
4120
6379
|
* <script setup lang="ts">
|
|
4121
|
-
* import {
|
|
6380
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4122
6381
|
*
|
|
4123
|
-
* const
|
|
6382
|
+
* const virtual = createVirtual(items)
|
|
6383
|
+
* const { element, scroll } = virtual
|
|
4124
6384
|
* </script>
|
|
4125
6385
|
*
|
|
4126
6386
|
* <template>
|
|
@@ -4139,9 +6399,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4139
6399
|
* @example
|
|
4140
6400
|
* ```vue
|
|
4141
6401
|
* <script setup lang="ts">
|
|
4142
|
-
* import {
|
|
6402
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4143
6403
|
*
|
|
4144
|
-
* const
|
|
6404
|
+
* const virtual = createVirtual(items)
|
|
6405
|
+
* const { scroll, scrollend } = virtual
|
|
4145
6406
|
* </script>
|
|
4146
6407
|
*
|
|
4147
6408
|
* <template>
|
|
@@ -4160,9 +6421,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4160
6421
|
* @example
|
|
4161
6422
|
* ```vue
|
|
4162
6423
|
* <script setup lang="ts">
|
|
4163
|
-
* import {
|
|
6424
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4164
6425
|
*
|
|
4165
|
-
* const
|
|
6426
|
+
* const virtual = createVirtual(items)
|
|
6427
|
+
* const { resize } = virtual
|
|
4166
6428
|
* </script>
|
|
4167
6429
|
*
|
|
4168
6430
|
* <template>
|
|
@@ -4177,9 +6439,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4177
6439
|
* @example
|
|
4178
6440
|
* ```vue
|
|
4179
6441
|
* <script setup lang="ts">
|
|
4180
|
-
* import {
|
|
6442
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4181
6443
|
*
|
|
4182
|
-
* const
|
|
6444
|
+
* const virtual = createVirtual(items)
|
|
6445
|
+
* const { reset } = virtual
|
|
4183
6446
|
* </script>
|
|
4184
6447
|
*
|
|
4185
6448
|
* <template>
|
|
@@ -4192,6 +6455,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4192
6455
|
*/
|
|
4193
6456
|
reset: () => void;
|
|
4194
6457
|
}
|
|
6458
|
+
interface VirtualContextOptions extends VirtualOptions {
|
|
6459
|
+
/** Namespace for dependency injection */
|
|
6460
|
+
namespace?: string;
|
|
6461
|
+
}
|
|
4195
6462
|
/**
|
|
4196
6463
|
* Virtual scrolling composable for efficiently rendering large lists
|
|
4197
6464
|
*
|
|
@@ -4199,33 +6466,88 @@ interface VirtualContext<T = unknown> {
|
|
|
4199
6466
|
* @param options Configuration options
|
|
4200
6467
|
* @returns Virtual scrolling context
|
|
4201
6468
|
*
|
|
4202
|
-
* @see https://0.vuetifyjs.com/composables/utilities/
|
|
6469
|
+
* @see https://0.vuetifyjs.com/composables/utilities/create-virtual
|
|
4203
6470
|
*
|
|
4204
6471
|
* @example
|
|
4205
6472
|
* ```vue
|
|
4206
6473
|
* <script setup lang="ts">
|
|
4207
|
-
* import {
|
|
6474
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4208
6475
|
*
|
|
4209
6476
|
* const items = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })))
|
|
6477
|
+
* const virtual = createVirtual(items)
|
|
4210
6478
|
* </script>
|
|
4211
6479
|
*
|
|
4212
6480
|
* <template>
|
|
4213
6481
|
* <div
|
|
4214
|
-
* ref="element"
|
|
6482
|
+
* ref="virtual.element"
|
|
4215
6483
|
* style="height: 600px; overflow-y: auto;"
|
|
4216
|
-
* @scroll="scroll"
|
|
6484
|
+
* @scroll="virtual.scroll"
|
|
4217
6485
|
* >
|
|
4218
|
-
* <div :style="{ height: `${offset}px` }" />
|
|
6486
|
+
* <div :style="{ height: `${virtual.offset.value}px` }" />
|
|
4219
6487
|
*
|
|
4220
|
-
* <div v-for="item in items" :key="item.index">
|
|
6488
|
+
* <div v-for="item in virtual.items.value" :key="item.index">
|
|
4221
6489
|
* {{ item.raw.name }}
|
|
4222
6490
|
* </div>
|
|
4223
6491
|
*
|
|
4224
|
-
* <div :style="{ height: `${size}px` }" />
|
|
6492
|
+
* <div :style="{ height: `${virtual.size.value}px` }" />
|
|
6493
|
+
* </div>
|
|
6494
|
+
* </template>
|
|
6495
|
+
* ```
|
|
6496
|
+
*/
|
|
6497
|
+
declare function createVirtual<T = unknown>(items: Ref<readonly T[]>, _options?: VirtualOptions): VirtualContext<T>;
|
|
6498
|
+
/**
|
|
6499
|
+
* Creates a virtual scrolling context with dependency injection support.
|
|
6500
|
+
*
|
|
6501
|
+
* @param items Reactive array of items to virtualize
|
|
6502
|
+
* @param options Configuration options including namespace
|
|
6503
|
+
* @template T The type of the items
|
|
6504
|
+
* @returns Trinity tuple: [useVirtual, provideVirtual, defaultVirtual]
|
|
6505
|
+
*
|
|
6506
|
+
* @see https://0.vuetifyjs.com/composables/utilities/create-virtual
|
|
6507
|
+
*
|
|
6508
|
+
* @example
|
|
6509
|
+
* ```ts
|
|
6510
|
+
* // Create injectable context
|
|
6511
|
+
* const [useVirtual, provideVirtual, virtual] = createVirtualContext(items, {
|
|
6512
|
+
* namespace: 'my-virtual',
|
|
6513
|
+
* overscan: 10,
|
|
6514
|
+
* })
|
|
6515
|
+
*
|
|
6516
|
+
* // In parent component
|
|
6517
|
+
* provideVirtual()
|
|
6518
|
+
*
|
|
6519
|
+
* // In child component
|
|
6520
|
+
* const virtual = useVirtual()
|
|
6521
|
+
* ```
|
|
6522
|
+
*/
|
|
6523
|
+
declare function createVirtualContext<T = unknown>(items: Ref<readonly T[]>, _options?: VirtualContextOptions): ContextTrinity<VirtualContext<T>>;
|
|
6524
|
+
/**
|
|
6525
|
+
* Returns the current virtual context from dependency injection.
|
|
6526
|
+
*
|
|
6527
|
+
* @param namespace The namespace for the virtual context. Defaults to `v0:virtual`.
|
|
6528
|
+
* @template T The type of the items
|
|
6529
|
+
* @returns The current virtual context.
|
|
6530
|
+
*
|
|
6531
|
+
* @throws An error if the virtual context is not found and no default is provided.
|
|
6532
|
+
*
|
|
6533
|
+
* @see https://0.vuetifyjs.com/composables/utilities/create-virtual
|
|
6534
|
+
*
|
|
6535
|
+
* @example
|
|
6536
|
+
* ```vue
|
|
6537
|
+
* <script lang="ts" setup>
|
|
6538
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
6539
|
+
*
|
|
6540
|
+
* // Inject virtual context provided by parent
|
|
6541
|
+
* const virtual = useVirtual()
|
|
6542
|
+
* </script>
|
|
6543
|
+
*
|
|
6544
|
+
* <template>
|
|
6545
|
+
* <div>
|
|
6546
|
+
* <p>Visible items: {{ virtual.items.value.length }}</p>
|
|
4225
6547
|
* </div>
|
|
4226
6548
|
* </template>
|
|
4227
6549
|
* ```
|
|
4228
6550
|
*/
|
|
4229
|
-
declare function useVirtual<T = unknown>(
|
|
6551
|
+
declare function useVirtual<T = unknown>(namespace?: string): VirtualContext<T>;
|
|
4230
6552
|
//#endregion
|
|
4231
|
-
export {
|
|
6553
|
+
export { createStepContext as $, useSelection as $a, FilterContext as $i, createHydration as $n, createDate as $r, NestedTicket as $t, createTheme as A, BreadcrumbTicket as Aa, DataTableSelection as Ai, LocaleTicket as An, FeaturesAdapterInterface as Ar, PermissionContext as At, createStorage as B, SingleOptions as Ba, DataTableAdapter as Bi, LazyOptions as Bn, TokenValue as Br, PermissionAdapterInterface as Bt, ThemeContext as C, GroupContextOptions as Ca, DataTableColumn as Ci, ConsolaLoggerAdapter as Cn, FeatureTicketInput as Cr, createQueueContext as Ct, ThemeRecord as D, createGroup as Da, DataTableGroup as Di, LocaleOptions as Dn, useFeatures as Dr, useProxyRegistry as Dt, ThemePluginOptions as E, GroupTicketInput as Ea, DataTableExpansion as Ei, LocaleContextOptions as En, createFeaturesPlugin as Er, ProxyRegistryOptions as Et, ThemeAdapter as F, createBreadcrumbs as Fa, useDataTable as Fi, createLocalePlugin as Fn, TokenContext as Fr, createPermissions as Ft, StorageType as G, useSingle as Ga, SortEntry as Gi, UseIntersectionObserverReturn as Gn, EventHandler as Gr, singleOpenStrategy as Gt, createStoragePlugin as H, SingleTicketInput as Ha, DataTableAdapterInterface as Hi, IntersectionObserverEntry as Hn, createTokensContext as Hr, createNestedContext as Ht, StorageContext as I, createBreadcrumbsContext as Ia, VirtualAdapter as Ii, useLocale as In, TokenContextOptions as Ir, createPermissionsContext as It, StepContextOptions as J, SelectionOptions as Ja, PaginationOptions as Ji, HydrationContext as Jn, useWindowEventListener as Jr, NestedContextOptions as Jt, MemoryAdapter as K, SelectionContext as Ka, PaginationContext as Ki, useElementIntersection as Kn, useDocumentEventListener as Kr, NestedActiveMode as Kt, StorageContextOptions as L, useBreadcrumbs as La, ClientAdapter as Li, Vuetify0LocaleAdapter as Ln, TokenOptions as Lr, createPermissionsPlugin as Lt, createThemePlugin as M, BreadcrumbsContext as Ma, SelectStrategy as Mi, createLocale as Mn, FlatTokenCollection as Mr, PermissionOptions as Mt, useTheme as N, BreadcrumbsContextOptions as Na, createDataTable as Ni, createLocaleContext as Nn, TokenAlias as Nr, PermissionPluginOptions as Nt, ThemeTicket as O, createGroupContext as Oa, DataTableGrouping as Oi, LocalePluginOptions as On, FeaturesAdapter as Or, ProxyModelOptions as Ot, Vuetify0ThemeAdapter as P, BreadcrumbsOptions as Pa, createDataTableContext as Pi, createLocaleFallback as Pn, TokenCollection as Pr, PermissionTicket as Pt, createStep as Q, createSelectionContext as Qa, usePagination as Qi, createFallbackHydration as Qn, DatePluginOptions as Qr, NestedSelectionMode as Qt, StorageOptions as R, SingleContext as Ra, ServerAdapter as Ri, LocaleAdapter as Rn, TokenPrimitive as Rr, usePermissions as Rt, ThemeColors as S, GroupContext as Sa, createPlugin as Si, PinoLoggerAdapter as Sn, FeatureTicket as Sr, createQueue as St, ThemeOptions as T, GroupTicket as Ta, DataTableContextOptions as Ti, LocaleContext as Tn, createFeaturesContext as Tr, ProxyRegistryContext as Tt, useStorage as U, createSingle as Ua, DataTableAdapterResult as Ui, IntersectionObserverOptions as Un, useTokens as Ur, useNested as Ut, createStorageContext as V, SingleTicket as Va, DataTableAdapterContext as Vi, useLazy as Vn, createTokens as Vr, createNested as Vt, StorageAdapter as W, createSingleContext as Wa, SortDirection as Wi, UseElementIntersectionReturn as Wn, CleanupFunction as Wr, multipleOpenStrategy as Wt, StepTicket as X, SelectionTicketInput as Xa, createPagination as Xi, HydrationOptions as Xn, DateContextOptions as Xr, NestedOptions as Xt, StepOptions as Y, SelectionTicket as Ya, PaginationTicket as Yi, HydrationContextOptions as Yn, DateContext as Yr, NestedOpenMode as Yt, StepTicketInput as Z, createSelection as Za, createPaginationContext as Zi, HydrationPluginOptions as Zn, DateOptions as Zr, NestedRegistration as Zt, TimelineTicket as _, OverflowContextOptions as _a, useBreakpoints as _i, createLoggerContext as _n, useForm as _r, QueueContext as _t, VirtualDirection as a, FilterQuery as aa, ClickOutsideTarget as ai, UseMutationObserverReturn as an, RegistryOptions as ao, UseHotkeyReturn as ar, StackTicket as at, useTimeline as b, createOverflowContext as ba, Plugin as bi, LogLevel as bn, FeatureOptions as br, QueueTicket as bt, VirtualState as c, createFilter as ca, useClickOutside as ci, useMediaQuery as cn, createRegistryContext as co, FormContextOptions as cr, createStackContext as ct, useVirtual as d, ContextKey as da, BreakpointsContextOptions as di, usePrefersReducedMotion as dn, createTrinity as do, FormTicketInput as dr, ResizeObserverEntry as dt, FilterContextOptions as ea, createDateContext as ei, NestedTicketInput as en, RegistryContext as eo, createHydrationContext as er, useStep as et, ToggleScopeControls as f, CreateContextOptions as fa, BreakpointsOptions as fi, LoggerContext as fn, FormValidationResult as fr, ResizeObserverOptions as ft, TimelineOptions as g, OverflowContext as ga, createBreakpointsPlugin as gi, createLogger as gn, createFormContext as gr, useResizeObserver as gt, TimelineContextOptions as h, useContext as ha, createBreakpointsContext as hi, LoggerPluginOptions as hn, createForm as hr, useElementSize as ht, VirtualContextOptions as i, FilterOptions as ia, ClickOutsideIgnoreTarget as ii, UseMutationObserverOptions as in, RegistryEventName as io, UseHotkeyOptions as ir, StackPluginOptions as it, createThemeContext as j, BreadcrumbTicketInput as ja, DataTableSort as ji, LocaleTicketInput as jn, FeaturesAdapterValue as jr, PermissionContextOptions as jt, ThemeTicketInput as k, useGroup as ka, DataTableOptions as ki, LocaleRecord as kn, FeaturesAdapterFlags as kr, useProxyModel as kt, createVirtual as l, createFilterContext as la, BreakpointName as li, usePrefersContrast as ln, useRegistry as lo, FormOptions as lr, createStackPlugin as lt, TimelineContext as m, provideContext as ma, createBreakpoints as mi, LoggerOptions as mn, FormValue as mr, UseResizeObserverReturn as mt, VirtualAnchor as n, FilterItem as na, useDate as ni, OpenStrategyContext as nn, RegistryEventCallback as no, useHydration as nr, StackContextOptions as nt, VirtualItem as o, FilterResult as oa, UseClickOutsideOptions as oi, useMutationObserver as on, RegistryTicket as oo, useHotkey as or, StackTicketInput as ot, useToggleScope as p, createContext as pa, BreakpointsPluginOptions as pi, LoggerContextOptions as pn, FormValidationRule as pr, UseElementSizeReturn as pt, StepContext as q, SelectionContextOptions as qa, PaginationContextOptions as qi, useIntersectionObserver as qn, useEventListener as qr, NestedContext as qt, VirtualContext as r, FilterMode as ra, ClickOutsideElement as ri, MutationObserverRecord as rn, RegistryEventMap as ro, PlatformContext as rr, StackOptions as rt, VirtualOptions as s, Primitive as sa, UseClickOutsideReturn as si, MediaQueryContext as sn, createRegistry as so, FormContext as sr, createStack as st, ScrollToOptions as t, FilterFunction as ta, createDatePlugin as ti, OpenStrategy as tn, RegistryContextOptions as to, createHydrationPlugin as tr, StackContext as tt, createVirtualContext as u, useFilter as ua, BreakpointsContext as ui, usePrefersDark as un, ContextTrinity as uo, FormTicket as ur, useStack as ut, createTimeline as v, OverflowOptions as va, toReactive as vi, createLoggerPlugin as vn, FeatureContext as vr, QueueContextOptions as vt, ThemeContextOptions as w, GroupOptions as wa, DataTableContext as wi, LoggerAdapter as wn, createFeatures as wr, useQueue as wt, Colors as x, useOverflow as xa, PluginOptions as xi, Vuetify0LoggerAdapter as xn, FeaturePluginOptions as xr, QueueTicketInput as xt, createTimelineContext as y, createOverflow as ya, toArray as yi, useLogger as yn, FeatureContextOptions as yr, QueueOptions as yt, StoragePluginOptions as z, SingleContextOptions as za, ServerAdapterOptions as zi, LazyContext as zn, TokenTicket as zr, PermissionAdapter as zt };
|