@vuetify/v0 0.1.2 → 0.1.4
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/adapter-BN-h5JbD.d.mts +344 -0
- package/dist/adapter-CJIj5ySf.d.mts +11 -0
- package/dist/adapter-D_0ptsPm.mjs +229 -0
- package/dist/adapters-BQ-Lr3PW.mjs +1 -0
- package/dist/adapters-DEXpW9If.mjs +1 -0
- package/dist/adapters-Q9WaOsJp.mjs +1 -0
- package/dist/adapters-SSDVth5e.mjs +1 -0
- package/dist/browser/index.js +5593 -4490
- package/dist/components/index.d.mts +20 -4
- package/dist/components/index.mjs +38 -6
- package/dist/{components-z56rRlS4.mjs → components-CMuzTJdK.mjs} +588 -90
- package/dist/composables/index.d.mts +17 -5
- package/dist/composables/index.mjs +36 -4
- package/dist/consola-DiUk9j3y.d.mts +15 -0
- package/dist/consola-GBy8XRuL.mjs +31 -0
- package/dist/constants/index.d.mts +1 -1
- package/dist/constants/index.mjs +3 -3
- package/dist/constants-B8pMSkcW.mjs +1 -0
- package/dist/createDataTable-BJnmvxfb.mjs +387 -0
- package/dist/createGroup-CPhp6FUh.mjs +363 -0
- package/dist/createPagination-cyOWlpfH.mjs +234 -0
- package/dist/createSelection-uqEbFgha.mjs +261 -0
- package/dist/createSingle-B59ya3aa.mjs +179 -0
- package/dist/createTokens-BlhLdHXE.mjs +682 -0
- package/dist/createTrinity-EeHQSsb6.mjs +149 -0
- package/dist/data-table/adapters/client/index.d.mts +3 -0
- package/dist/data-table/adapters/client/index.mjs +9 -0
- package/dist/data-table/adapters/index.d.mts +5 -0
- package/dist/data-table/adapters/index.mjs +12 -0
- package/dist/data-table/adapters/server/index.d.mts +3 -0
- package/dist/data-table/adapters/server/index.mjs +7 -0
- package/dist/data-table/adapters/virtual/index.d.mts +3 -0
- package/dist/data-table/adapters/virtual/index.mjs +9 -0
- package/dist/data-table/index.d.mts +7 -0
- package/dist/data-table/index.mjs +25 -0
- package/dist/date/index.d.mts +1 -1
- package/dist/date/index.mjs +19 -15
- package/dist/features/adapters/flagsmith/index.d.mts +16 -0
- package/dist/features/adapters/flagsmith/index.mjs +3 -0
- package/dist/features/adapters/launchdarkly/index.d.mts +15 -0
- package/dist/features/adapters/launchdarkly/index.mjs +3 -0
- package/dist/features/adapters/posthog/index.d.mts +15 -0
- package/dist/features/adapters/posthog/index.mjs +4 -0
- package/dist/features/index.d.mts +17 -0
- package/dist/features/index.mjs +18 -0
- package/dist/flagsmith-CHmpPGR7.mjs +40 -0
- package/dist/{globals-VwjZ5i4B.mjs → globals-B_GVfG06.mjs} +2 -2
- package/dist/index-7mWYFHA6.d.mts +251 -0
- package/dist/index-BDTbJClL.d.mts +11 -0
- package/dist/{index-DlxrzbvZ.d.mts → index-BFBN5Zl3.d.mts} +41 -1
- package/dist/index-BuOz3Rgm.d.mts +32 -0
- package/dist/{index-cPmI99rd.d.mts → index-Bv1VN_j5.d.mts} +1 -1
- package/dist/{index-PuLeBGZ3.d.mts → index-CQrDeqsK.d.mts} +894 -329
- package/dist/{index-CLKfXGEQ.d.mts → index-Dd0m0LIJ.d.mts} +2228 -1178
- package/dist/{index-CoO8LW8o.d.mts → index-UNwEBkQT.d.mts} +16 -2
- package/dist/index.d.mts +20 -8
- package/dist/index.mjs +39 -7
- 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/launchdarkly-W8t8ZANX.mjs +28 -0
- package/dist/locale/adapters/index.d.mts +3 -0
- package/dist/locale/adapters/index.mjs +6 -0
- package/dist/locale/adapters/v0/index.d.mts +3 -0
- package/dist/locale/adapters/v0/index.mjs +5 -0
- package/dist/locale/index.d.mts +17 -0
- package/dist/locale/index.mjs +17 -0
- package/dist/logger/adapters/consola/index.d.mts +3 -0
- package/dist/logger/adapters/consola/index.mjs +3 -0
- package/dist/logger/adapters/index.d.mts +5 -0
- package/dist/logger/adapters/index.mjs +8 -0
- package/dist/logger/adapters/pino/index.d.mts +3 -0
- package/dist/logger/adapters/pino/index.mjs +5 -0
- package/dist/logger/adapters/v0/index.d.mts +3 -0
- package/dist/logger/adapters/v0/index.mjs +5 -0
- package/dist/logger/index.d.mts +17 -0
- package/dist/logger/index.mjs +10 -0
- package/dist/memory-BsZGbGnG.mjs +27 -0
- package/dist/memory-DVjquu_v.d.mts +25 -0
- package/dist/permissions/adapters/index.d.mts +18 -0
- package/dist/permissions/adapters/index.mjs +6 -0
- package/dist/permissions/adapters/v0/index.d.mts +18 -0
- package/dist/permissions/adapters/v0/index.mjs +5 -0
- package/dist/permissions/index.d.mts +17 -0
- package/dist/permissions/index.mjs +15 -0
- package/dist/pino-01x_NmWp.mjs +49 -0
- package/dist/pino-p-jDkNQd.d.mts +24 -0
- package/dist/posthog-BrGBPPir.mjs +50 -0
- package/dist/server-6cs14bj1.d.mts +20 -0
- package/dist/server-ClCwiLMA.mjs +45 -0
- package/dist/storage/adapters/index.d.mts +3 -0
- package/dist/storage/adapters/index.mjs +3 -0
- package/dist/storage/adapters/memory/index.d.mts +2 -0
- package/dist/storage/adapters/memory/index.mjs +3 -0
- package/dist/storage/index.d.mts +17 -0
- package/dist/storage/index.mjs +37 -0
- package/dist/theme/adapters/index.d.mts +17 -0
- package/dist/theme/adapters/index.mjs +6 -0
- package/dist/theme/adapters/v0/index.d.mts +17 -0
- package/dist/theme/adapters/v0/index.mjs +5 -0
- package/dist/theme/index.d.mts +17 -0
- package/dist/theme/index.mjs +16 -0
- package/dist/toArray-DIeXVX1C.mjs +38 -0
- package/dist/types/index.d.mts +2 -2
- package/dist/{useClickOutside-Dp1MHIjr.mjs → useClickOutside-p8HP07At.mjs} +2437 -5442
- package/dist/useFeatures-C4JF3Hgr.mjs +122 -0
- package/dist/useLocale-DlbShzF-.mjs +85 -0
- package/dist/useLogger-CO9JwbSJ.mjs +283 -0
- package/dist/usePermissions-DQVT_4nD.mjs +128 -0
- package/dist/useTheme-Bcw1Ebyt.mjs +135 -0
- package/dist/utilities/index.d.mts +3 -3
- package/dist/utilities/index.mjs +3 -2
- package/dist/{utilities-B58TiS_S.mjs → utilities-BqS1sC1W.mjs} +27 -1
- package/dist/v0-B40YkIQ-.mjs +21 -0
- package/dist/v0-BOxb3nD1.d.mts +33 -0
- package/dist/v0-BogbIzpM.mjs +41 -0
- package/dist/v0-BtQCSBOG.mjs +37 -0
- package/dist/v0-C-9dv_1S.d.mts +10 -0
- package/dist/v0-CtjuUUPl.mjs +73 -0
- package/dist/v0-DHMoZ7dS.d.mts +22 -0
- package/dist/v0-ONBWyQYQ.mjs +83 -0
- package/dist/v0-RepwEY1F.d.mts +9 -0
- package/dist/virtual-B3IPkHC0.d.mts +9 -0
- package/dist/virtual-BP9WXRzN.mjs +44 -0
- package/package.json +37 -4
- package/dist/index-qSuLpob3.d.mts +0 -1544
- /package/dist/{adapter-L4Php1_S.d.mts → adapter-DcwxFryd.d.mts} +0 -0
- /package/dist/{constants-DHKqjdjH.mjs → adapters-BGJKsBrw.mjs} +0 -0
- /package/dist/{htmlElements-DO9n35bD.mjs → htmlElements-d8iBCGpO.mjs} +0 -0
|
@@ -1,10 +1,1499 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { t as DateAdapter } from "./adapter-
|
|
1
|
+
import { i as Extensible, o as ID, s as MaybeArray } from "./index-BFBN5Zl3.mjs";
|
|
2
|
+
import { E as ContextTrinity } from "./adapter-BN-h5JbD.mjs";
|
|
3
|
+
import { t as DateAdapter } from "./adapter-DcwxFryd.mjs";
|
|
4
|
+
import { n as FeaturesAdapterFlags, r as FeaturesAdapterInterface } from "./index-BuOz3Rgm.mjs";
|
|
5
|
+
import { n as LocaleAdapter } from "./v0-DHMoZ7dS.mjs";
|
|
6
|
+
import { t as LoggerAdapter } from "./adapter-CJIj5ySf.mjs";
|
|
7
|
+
import { t as StorageAdapter } from "./index-BDTbJClL.mjs";
|
|
4
8
|
import { App, ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef, UnwrapNestedRefs, WatchSource } from "vue";
|
|
5
9
|
|
|
10
|
+
//#region src/composables/createRegistry/index.d.ts
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* User-facing input shape for registry tickets.
|
|
14
|
+
*
|
|
15
|
+
* Extend this when defining custom ticket types passed to `register()` and `onboard()`.
|
|
16
|
+
* The registry adds the computed fields (`index`, `valueIsIndex`) automatically — those
|
|
17
|
+
* live on {@link RegistryTicket}, which is the output type returned by `get()` and `values()`.
|
|
18
|
+
*
|
|
19
|
+
* @template V The type of the ticket value.
|
|
20
|
+
*/
|
|
21
|
+
interface RegistryTicketInput<V = unknown> {
|
|
22
|
+
/** The unique identifier. Optional — auto-generated if not provided. */
|
|
23
|
+
id?: ID;
|
|
24
|
+
/** The value associated with the ticket. If not provided, it defaults to the index. */
|
|
25
|
+
value?: V;
|
|
26
|
+
}
|
|
27
|
+
interface RegistryTicket<V = unknown> {
|
|
28
|
+
/** The unique identifier. Is randomly generated if not provided. */
|
|
29
|
+
id: ID;
|
|
30
|
+
/**
|
|
31
|
+
* The index of the ticket in the registry.
|
|
32
|
+
*
|
|
33
|
+
* @remarks Automatically managed by the registry. Updated during reindexing. It's not recommended to manually set this.
|
|
34
|
+
*/
|
|
35
|
+
index: number;
|
|
36
|
+
/** The value associated with the ticket. If not provided, it defaults to the index. */
|
|
37
|
+
value: V;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the value is derived from index.
|
|
40
|
+
*
|
|
41
|
+
* @remarks Set to true when no explicit value is provided during registration. It's not recommended to manually set this.
|
|
42
|
+
*/
|
|
43
|
+
valueIsIndex: boolean;
|
|
44
|
+
}
|
|
45
|
+
/** Valid event names for registry operations */
|
|
46
|
+
type RegistryEventName = 'register:ticket' | 'unregister:ticket' | 'update:ticket' | 'clear:registry' | 'reindex:registry';
|
|
47
|
+
/** Maps event names to their payload types */
|
|
48
|
+
type RegistryEventMap<Z extends RegistryTicket> = {
|
|
49
|
+
'register:ticket': Z;
|
|
50
|
+
'unregister:ticket': Z;
|
|
51
|
+
'update:ticket': Z;
|
|
52
|
+
'clear:registry': undefined;
|
|
53
|
+
'reindex:registry': undefined;
|
|
54
|
+
};
|
|
55
|
+
/** Callback signature for registry event listeners */
|
|
56
|
+
type RegistryEventCallback<Z extends RegistryTicket = RegistryTicket, K extends RegistryEventName = RegistryEventName> = (data: RegistryEventMap<Z>[K]) => void;
|
|
57
|
+
/** Resolves callback type: typed for known events, unknown for custom events */
|
|
58
|
+
type EventHandler$1<Z extends RegistryTicket, K extends string> = K extends RegistryEventName ? (data: RegistryEventMap<Z>[K]) => void : (data: unknown) => void;
|
|
59
|
+
/** Resolves payload type: typed for known events, unknown for custom events */
|
|
60
|
+
type EventPayload<Z extends RegistryTicket, K extends string> = K extends RegistryEventName ? RegistryEventMap<Z>[K] : unknown;
|
|
61
|
+
interface RegistryContext<Z extends RegistryTicketInput = RegistryTicketInput, E extends RegistryTicket & Z = RegistryTicket & Z> {
|
|
62
|
+
/**
|
|
63
|
+
* The collection of tickets in the registry
|
|
64
|
+
*
|
|
65
|
+
* @template ID The type of the ticket ID.
|
|
66
|
+
* @template E The type of the registry ticket.
|
|
67
|
+
*
|
|
68
|
+
* @remarks Read-only view of the internal collection. Use `register`, `unregister`, `upsert`, and `clear` methods to modify.
|
|
69
|
+
*/
|
|
70
|
+
collection: ReadonlyMap<ID, E>;
|
|
71
|
+
/**
|
|
72
|
+
* Clear the entire registry
|
|
73
|
+
*
|
|
74
|
+
* @remarks Removes all tickets from the registry. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
75
|
+
*
|
|
76
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#clear
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* ```ts
|
|
80
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
81
|
+
*
|
|
82
|
+
* const registry = createRegistry()
|
|
83
|
+
*
|
|
84
|
+
* registry.register({ id: 'ticket-1' })
|
|
85
|
+
* registry.register({ id: 'ticket-2' })
|
|
86
|
+
*
|
|
87
|
+
* console.log(registry.size) // 2
|
|
88
|
+
*
|
|
89
|
+
* registry.clear()
|
|
90
|
+
*
|
|
91
|
+
* console.log(registry.size) // 0
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
clear: () => void;
|
|
95
|
+
/**
|
|
96
|
+
* Check if a ticket exists by ID
|
|
97
|
+
*
|
|
98
|
+
* @param id The ID of the ticket to check.
|
|
99
|
+
* @remarks Calls `collection.has` internally.
|
|
100
|
+
*
|
|
101
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#has
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```ts
|
|
105
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
106
|
+
*
|
|
107
|
+
* const registry = createRegistry()
|
|
108
|
+
*
|
|
109
|
+
* registry.register({ id: 'ticket-id' })
|
|
110
|
+
*
|
|
111
|
+
* const exists = registry.has('ticket-id') // true
|
|
112
|
+
* ```
|
|
113
|
+
*/
|
|
114
|
+
has: (id: ID) => boolean;
|
|
115
|
+
/**
|
|
116
|
+
* Get all registered IDs
|
|
117
|
+
*
|
|
118
|
+
* @remarks Calls `collection.keys` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
119
|
+
*
|
|
120
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#keys
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```ts
|
|
124
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
125
|
+
*
|
|
126
|
+
* const registry = createRegistry()
|
|
127
|
+
*
|
|
128
|
+
* registry.register({ id: 'ticket-1' })
|
|
129
|
+
* registry.register({ id: 'ticket-2' })
|
|
130
|
+
*
|
|
131
|
+
* const ids = registry.keys() // ['ticket-1', 'ticket-2']
|
|
132
|
+
* ```
|
|
133
|
+
*/
|
|
134
|
+
keys: () => readonly ID[];
|
|
135
|
+
/**
|
|
136
|
+
* Browse for an ID(s) by value
|
|
137
|
+
*
|
|
138
|
+
* @param value The value to browse for.
|
|
139
|
+
* @remarks Returns an array of IDs that share the given value, or undefined if no match is found.
|
|
140
|
+
*
|
|
141
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#browse
|
|
142
|
+
*
|
|
143
|
+
* @example
|
|
144
|
+
* ```ts
|
|
145
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
146
|
+
*
|
|
147
|
+
* const registry = createRegistry()
|
|
148
|
+
*
|
|
149
|
+
* registry.register({ id: 'ticket-1', value: 'common-value' })
|
|
150
|
+
* registry.register({ id: 'ticket-2', value: 'common-value' })
|
|
151
|
+
* registry.register({ id: 'ticket-3', value: 'unique-value' })
|
|
152
|
+
*
|
|
153
|
+
* const common = registry.browse('common-value') // ['ticket-1', 'ticket-2']
|
|
154
|
+
* const unique = registry.browse('unique-value') // ['ticket-3']
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
browse: (value: E['value']) => ID[] | undefined;
|
|
158
|
+
/**
|
|
159
|
+
* lookup a ticket by index number
|
|
160
|
+
*
|
|
161
|
+
* @param index The index number to lookup.
|
|
162
|
+
* @remarks Maps do not support indexing by default, this method provides a way to retrieve an ID based on its index in the registry.
|
|
163
|
+
*
|
|
164
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#lookup
|
|
165
|
+
*
|
|
166
|
+
* @example
|
|
167
|
+
* ```ts
|
|
168
|
+
* const registry = createRegistry()
|
|
169
|
+
*
|
|
170
|
+
* registry.register({ id: 'ticket-1' })
|
|
171
|
+
* registry.register({ id: 'ticket-2' })
|
|
172
|
+
*
|
|
173
|
+
* const ticket1 = registry.lookup(0) // 'ticket-1'
|
|
174
|
+
* const ticket2 = registry.lookup(1) // 'ticket-2'
|
|
175
|
+
* ```
|
|
176
|
+
*/
|
|
177
|
+
lookup: (index: number) => ID | undefined;
|
|
178
|
+
/**
|
|
179
|
+
* Get a ticket by ID
|
|
180
|
+
*
|
|
181
|
+
* @param id The ID of the ticket to retrieve.
|
|
182
|
+
* @remarks Calls `collection.get` internally.
|
|
183
|
+
*
|
|
184
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#get
|
|
185
|
+
*
|
|
186
|
+
* @example
|
|
187
|
+
* ```ts
|
|
188
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
189
|
+
*
|
|
190
|
+
* const registry = createRegistry()
|
|
191
|
+
*
|
|
192
|
+
* registry.register({ id: 'ticket-id', value: 'some-value' })
|
|
193
|
+
*
|
|
194
|
+
* const ticket = registry.get('ticket-id') // { id: 'ticket-id', index: 0, value: 'some-value', ... }
|
|
195
|
+
* ```
|
|
196
|
+
*/
|
|
197
|
+
get: (id: ID) => E | undefined;
|
|
198
|
+
/**
|
|
199
|
+
* Update or insert a ticket by ID
|
|
200
|
+
*
|
|
201
|
+
* @param id The ID of the ticket to upsert.
|
|
202
|
+
* @param ticket The partial ticket data to update or insert.
|
|
203
|
+
* @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()`.
|
|
204
|
+
*
|
|
205
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#upsert
|
|
206
|
+
*
|
|
207
|
+
* @example
|
|
208
|
+
* ```ts
|
|
209
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
210
|
+
*
|
|
211
|
+
* const registry = createRegistry()
|
|
212
|
+
*
|
|
213
|
+
* // Insert a new ticket
|
|
214
|
+
* const ticket = registry.upsert('ticket-id', { value: 'initial-value' })
|
|
215
|
+
*
|
|
216
|
+
* // Update the existing ticket
|
|
217
|
+
* const patched = registry.upsert('ticket-id', { value: 'updated-value' })
|
|
218
|
+
* ```
|
|
219
|
+
*/
|
|
220
|
+
upsert: (id: ID, ticket?: Partial<Z>) => E;
|
|
221
|
+
/**
|
|
222
|
+
* Get all values of registered tickets
|
|
223
|
+
*
|
|
224
|
+
* @remarks Calls `collection.values` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
225
|
+
*
|
|
226
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#values
|
|
227
|
+
*
|
|
228
|
+
* @example
|
|
229
|
+
* ```ts
|
|
230
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
231
|
+
*
|
|
232
|
+
* const registry = createRegistry()
|
|
233
|
+
*
|
|
234
|
+
* registry.register({ id: 'ticket-1', value: 'value-1' })
|
|
235
|
+
* registry.register({ id: 'ticket-2', value: 'value-2' })
|
|
236
|
+
*
|
|
237
|
+
* const values = registry.values() // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
|
|
238
|
+
* ```
|
|
239
|
+
*/
|
|
240
|
+
values: () => readonly E[];
|
|
241
|
+
/**
|
|
242
|
+
* Get all entries of registered tickets
|
|
243
|
+
*
|
|
244
|
+
* @remarks Calls `collection.entries` internally with caching. First call is O(n), subsequent calls are O(1) until cache invalidation.
|
|
245
|
+
*
|
|
246
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#entries
|
|
247
|
+
*
|
|
248
|
+
* @example
|
|
249
|
+
* ```ts
|
|
250
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
251
|
+
*
|
|
252
|
+
* const registry = createRegistry()
|
|
253
|
+
*
|
|
254
|
+
* registry.register({ id: 'ticket-1', value: 'value-1' })
|
|
255
|
+
* registry.register({ id: 'ticket-2', value: 'value-2' })
|
|
256
|
+
*
|
|
257
|
+
* const entries = registry.entries() // [['ticket-1', { id: 'ticket-1', ... }], ['ticket-2', { id: 'ticket-2', ... }]]
|
|
258
|
+
* ```
|
|
259
|
+
*/
|
|
260
|
+
entries: () => readonly [ID, E][];
|
|
261
|
+
/**
|
|
262
|
+
* Register a new ticket
|
|
263
|
+
*
|
|
264
|
+
* @param ticket The partial ticket data to register.
|
|
265
|
+
* @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()`.
|
|
266
|
+
*
|
|
267
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#register
|
|
268
|
+
*
|
|
269
|
+
* @example
|
|
270
|
+
* ```ts
|
|
271
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
272
|
+
*
|
|
273
|
+
* const registry = createRegistry()
|
|
274
|
+
*
|
|
275
|
+
* const ticket = registry.register()
|
|
276
|
+
*
|
|
277
|
+
* console.log(ticket) // { id: 'generated-id', index: 0, value: 0, valueIsIndex: true }
|
|
278
|
+
* ```
|
|
279
|
+
*/
|
|
280
|
+
register: (ticket?: Partial<Z & RegistryTicket>) => E;
|
|
281
|
+
/**
|
|
282
|
+
* Unregister a ticket by ID
|
|
283
|
+
*
|
|
284
|
+
* @param id The ID of the ticket to unregister.
|
|
285
|
+
* @remarks Removes the ticket from the registry and reindexes the remaining tickets. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
286
|
+
*
|
|
287
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#unregister
|
|
288
|
+
*
|
|
289
|
+
* @example
|
|
290
|
+
* ```ts
|
|
291
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
292
|
+
*
|
|
293
|
+
* const registry = createRegistry()
|
|
294
|
+
*
|
|
295
|
+
* registry.register({ id: 'ticket-id' })
|
|
296
|
+
*
|
|
297
|
+
* registry.unregister('ticket-id')
|
|
298
|
+
* ```
|
|
299
|
+
*/
|
|
300
|
+
unregister: (id: ID) => void;
|
|
301
|
+
/**
|
|
302
|
+
* Reset the index directory and update all tickets
|
|
303
|
+
*
|
|
304
|
+
* @remarks Rebuilds the internal index mapping and ensures all tickets have correct index values. This operation invalidates cached results from `keys()`, `values()`, and `entries()`.
|
|
305
|
+
*
|
|
306
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#reindex
|
|
307
|
+
*
|
|
308
|
+
* @example
|
|
309
|
+
* ```ts
|
|
310
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
311
|
+
*
|
|
312
|
+
* const registry = createRegistry()
|
|
313
|
+
*
|
|
314
|
+
* registry.register({ id: 'ticket-1' })
|
|
315
|
+
* registry.register({ id: 'ticket-2' })
|
|
316
|
+
*
|
|
317
|
+
* // After some operations that may affect indexing
|
|
318
|
+
* registry.reindex()
|
|
319
|
+
* ```
|
|
320
|
+
*/
|
|
321
|
+
reindex: () => void;
|
|
322
|
+
/**
|
|
323
|
+
* Seek for a ticket based on direction and optional predicate
|
|
324
|
+
*
|
|
325
|
+
* @param direction The direction to seek ('first' or 'last'). Defaults to 'first'.
|
|
326
|
+
* @param from The index to start seeking from. Defaults to the beginning or end based on direction.
|
|
327
|
+
* @param predicate An optional function to test each ticket. The first ticket that satisfies the predicate will be returned.
|
|
328
|
+
* @remarks This method allows for flexible searching within the registry, either from the start or end, and can filter tickets based on custom criteria.
|
|
329
|
+
*
|
|
330
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#seek
|
|
331
|
+
*
|
|
332
|
+
* @example
|
|
333
|
+
* ```ts
|
|
334
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
335
|
+
*
|
|
336
|
+
* const registry = createRegistry()
|
|
337
|
+
*
|
|
338
|
+
* registry.register({ id: 'ticket-1', value: 'apple' })
|
|
339
|
+
* registry.register({ id: 'ticket-2', value: 'banana' })
|
|
340
|
+
* registry.register({ id: 'ticket-3', value: 'cherry' })
|
|
341
|
+
*
|
|
342
|
+
* // Seek the first ticket
|
|
343
|
+
* const first = registry.seek('first')
|
|
344
|
+
*
|
|
345
|
+
* // Seek the last ticket
|
|
346
|
+
* const last = registry.seek('last')
|
|
347
|
+
*
|
|
348
|
+
* // Seek the first ticket with value 'banana'
|
|
349
|
+
* const banana = registry.seek('first', undefined, ticket => ticket.value === 'banana')
|
|
350
|
+
*
|
|
351
|
+
* // Seek from index 1 to find the next ticket with value starting with 'c'
|
|
352
|
+
* const cherry = registry.seek('first', 1, ticket => (ticket.value as string).startsWith('c'))
|
|
353
|
+
* ```
|
|
354
|
+
*/
|
|
355
|
+
seek: (direction?: 'first' | 'last', from?: number, predicate?: (ticket: E) => boolean) => E | undefined;
|
|
356
|
+
/**
|
|
357
|
+
* Listen for registry events
|
|
358
|
+
*
|
|
359
|
+
* @param event The name of the event to listen for.
|
|
360
|
+
* @param cb The callback function to invoke when the event is emitted.
|
|
361
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
362
|
+
* Supported events:
|
|
363
|
+
* - `register:ticket` - Emitted when a ticket is registered, receives the ticket as argument
|
|
364
|
+
* - `unregister:ticket` - Emitted when a ticket is unregistered, receives the ticket as argument
|
|
365
|
+
* - `update:ticket` - Emitted when a ticket is updated, receives the updated ticket as argument
|
|
366
|
+
* - `clear:registry` - Emitted when the registry is cleared
|
|
367
|
+
* - `reindex:registry` - Emitted when the registry is reindexed
|
|
368
|
+
*
|
|
369
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#on
|
|
370
|
+
*
|
|
371
|
+
* @example
|
|
372
|
+
* ```ts
|
|
373
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
374
|
+
*
|
|
375
|
+
* const registry = createRegistry({ events: true })
|
|
376
|
+
*
|
|
377
|
+
* registry.on('register:ticket', (ticket) => {
|
|
378
|
+
* console.log('Ticket registered:', ticket)
|
|
379
|
+
* })
|
|
380
|
+
*
|
|
381
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
382
|
+
* ```
|
|
383
|
+
*/
|
|
384
|
+
on: <K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler$1<E, K>) => void;
|
|
385
|
+
/**
|
|
386
|
+
* Stop listening for registry events
|
|
387
|
+
*
|
|
388
|
+
* @param event The name of the event to stop listening for.
|
|
389
|
+
* @param cb The callback function to remove.
|
|
390
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
391
|
+
*
|
|
392
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#off
|
|
393
|
+
*
|
|
394
|
+
* @example
|
|
395
|
+
* ```ts
|
|
396
|
+
* import { onScopeDispose } from 'vue'
|
|
397
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
398
|
+
*
|
|
399
|
+
* const registry = createRegistry({ events: true })
|
|
400
|
+
*
|
|
401
|
+
* function onRegister(ticket) {
|
|
402
|
+
* console.log('Ticket registered:', ticket)
|
|
403
|
+
* }
|
|
404
|
+
*
|
|
405
|
+
* registry.on('register:ticket', onRegister)
|
|
406
|
+
*
|
|
407
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
408
|
+
*
|
|
409
|
+
* onScopeDispose(() => {
|
|
410
|
+
* registry.off('register:ticket', onRegister)
|
|
411
|
+
* })
|
|
412
|
+
* ```
|
|
413
|
+
*/
|
|
414
|
+
off: <K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler$1<E, K>) => void;
|
|
415
|
+
/**
|
|
416
|
+
* Emit an event with data
|
|
417
|
+
*
|
|
418
|
+
* @param event The name of the event to emit.
|
|
419
|
+
* @param data The data to pass to event listeners.
|
|
420
|
+
* @remarks Must be enabled via the `events` option when creating the registry.
|
|
421
|
+
*
|
|
422
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#emit
|
|
423
|
+
*
|
|
424
|
+
* @example
|
|
425
|
+
* ```ts
|
|
426
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
427
|
+
*
|
|
428
|
+
* const registry = createRegistry({ events: true })
|
|
429
|
+
*
|
|
430
|
+
* registry.on('custom-event', (data) => {
|
|
431
|
+
* console.log('Custom event received:', data)
|
|
432
|
+
* })
|
|
433
|
+
*
|
|
434
|
+
* registry.emit('custom-event', { message: 'Hello, World!' }) // Console: Custom event received: { message: 'Hello, World!' }
|
|
435
|
+
* ```
|
|
436
|
+
*/
|
|
437
|
+
emit: <K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<E, K>) => void;
|
|
438
|
+
/**
|
|
439
|
+
* Clears the registry and removes all listeners
|
|
440
|
+
*
|
|
441
|
+
* @remarks Disposes of the registry by clearing all tickets and removing all event listeners.
|
|
442
|
+
*
|
|
443
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#dispose
|
|
444
|
+
*
|
|
445
|
+
* @example
|
|
446
|
+
* ```ts
|
|
447
|
+
* import { onScopeDispose } from 'vue'
|
|
448
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
449
|
+
*
|
|
450
|
+
* const registry = createRegistry({ events: true })
|
|
451
|
+
*
|
|
452
|
+
* registry.register({ id: 'ticket-id' })
|
|
453
|
+
*
|
|
454
|
+
* onScopeDispose(() => {
|
|
455
|
+
* registry.dispose()
|
|
456
|
+
* })
|
|
457
|
+
* ```
|
|
458
|
+
*/
|
|
459
|
+
dispose: () => void;
|
|
460
|
+
/**
|
|
461
|
+
* Onboard multiple tickets at once
|
|
462
|
+
*
|
|
463
|
+
* @param registrations An array of partial ticket data to register.
|
|
464
|
+
* @remarks Registers multiple tickets in a single operation and returns the array of registered tickets.
|
|
465
|
+
*
|
|
466
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#onboard
|
|
467
|
+
*
|
|
468
|
+
* @example
|
|
469
|
+
* ```ts
|
|
470
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
471
|
+
*
|
|
472
|
+
* const registry = createRegistry()
|
|
473
|
+
*
|
|
474
|
+
* const tickets = registry.onboard([
|
|
475
|
+
* { id: 'ticket-1', value: 'value-1' },
|
|
476
|
+
* { id: 'ticket-2', value: 'value-2' },
|
|
477
|
+
* ])
|
|
478
|
+
*
|
|
479
|
+
* console.log(tickets) // [{ id: 'ticket-1', ... }, { id: 'ticket-2', ... }]
|
|
480
|
+
* ```
|
|
481
|
+
*/
|
|
482
|
+
onboard: (registrations: Partial<Z & RegistryTicket>[]) => E[];
|
|
483
|
+
/**
|
|
484
|
+
* Offboard multiple tickets at once
|
|
485
|
+
*
|
|
486
|
+
* @param ids An array of ticket IDs to unregister.
|
|
487
|
+
* @remarks Unregisters multiple tickets in a single operation with optimized reindexing.
|
|
488
|
+
*
|
|
489
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#offboard
|
|
490
|
+
*
|
|
491
|
+
* @example
|
|
492
|
+
* ```ts
|
|
493
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
494
|
+
*
|
|
495
|
+
* const registry = createRegistry()
|
|
496
|
+
*
|
|
497
|
+
* registry.onboard([
|
|
498
|
+
* { id: 'ticket-1', value: 'value-1' },
|
|
499
|
+
* { id: 'ticket-2', value: 'value-2' },
|
|
500
|
+
* { id: 'ticket-3', value: 'value-3' },
|
|
501
|
+
* ])
|
|
502
|
+
*
|
|
503
|
+
* registry.offboard(['ticket-1', 'ticket-3'])
|
|
504
|
+
*
|
|
505
|
+
* console.log(registry.size) // 1
|
|
506
|
+
* ```
|
|
507
|
+
*/
|
|
508
|
+
offboard: (ids: ID[]) => void;
|
|
509
|
+
/**
|
|
510
|
+
* The number of tickets in the registry
|
|
511
|
+
*
|
|
512
|
+
* @remarks Reflects the current size of the internal ticket collection.
|
|
513
|
+
*
|
|
514
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#size
|
|
515
|
+
*
|
|
516
|
+
* @example
|
|
517
|
+
* ```ts
|
|
518
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
519
|
+
*
|
|
520
|
+
* const registry = createRegistry()
|
|
521
|
+
*
|
|
522
|
+
* registry.register({ id: 'ticket-1' })
|
|
523
|
+
* registry.register({ id: 'ticket-2' })
|
|
524
|
+
*
|
|
525
|
+
* console.log(registry.size) // 2
|
|
526
|
+
* ```
|
|
527
|
+
*/
|
|
528
|
+
size: number;
|
|
529
|
+
/**
|
|
530
|
+
* Execute operations in a batch, deferring cache invalidation and event emission until complete
|
|
531
|
+
*
|
|
532
|
+
* @param fn The function containing batch operations.
|
|
533
|
+
* @returns The return value of the batch function.
|
|
534
|
+
* @remarks Useful for bulk operations like onboard(). Invalidation and events happen once at the end, not after each operation.
|
|
535
|
+
*
|
|
536
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry#batch
|
|
537
|
+
*
|
|
538
|
+
* @example
|
|
539
|
+
* ```ts
|
|
540
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
541
|
+
*
|
|
542
|
+
* const registry = createRegistry({ events: true })
|
|
543
|
+
*
|
|
544
|
+
* // Without batch: N invalidations + N events
|
|
545
|
+
* // With batch: 1 invalidation + N events (after all registrations)
|
|
546
|
+
* const tickets = registry.batch(() => {
|
|
547
|
+
* return [
|
|
548
|
+
* registry.register({ id: 'a' }),
|
|
549
|
+
* registry.register({ id: 'b' }),
|
|
550
|
+
* registry.register({ id: 'c' }),
|
|
551
|
+
* ]
|
|
552
|
+
* })
|
|
553
|
+
* ```
|
|
554
|
+
*/
|
|
555
|
+
batch: <R>(fn: () => R) => R;
|
|
556
|
+
}
|
|
557
|
+
interface RegistryOptions {
|
|
558
|
+
/**
|
|
559
|
+
* Enable event emission for registry operations
|
|
560
|
+
*
|
|
561
|
+
* @default false
|
|
562
|
+
* @remarks When enabled, the registry will emit events for operations like registration and unregistration. Listeners can be added using the `on` method.
|
|
563
|
+
*
|
|
564
|
+
* @example
|
|
565
|
+
* ```ts
|
|
566
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
567
|
+
*
|
|
568
|
+
* const registry = createRegistry({ events: true })
|
|
569
|
+
*
|
|
570
|
+
* registry.on('register:ticket', (ticket) => {
|
|
571
|
+
* console.log('Ticket registered:', ticket)
|
|
572
|
+
* })
|
|
573
|
+
*
|
|
574
|
+
* registry.register({ id: 'ticket-id' }) // Console: Ticket registered: { id: 'ticket-id', ... }
|
|
575
|
+
* ```
|
|
576
|
+
*/
|
|
577
|
+
events?: boolean;
|
|
578
|
+
/**
|
|
579
|
+
* Enable reactive behavior for registry operations
|
|
580
|
+
*
|
|
581
|
+
* @default false
|
|
582
|
+
* @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.
|
|
583
|
+
*
|
|
584
|
+
* @example
|
|
585
|
+
* ```ts
|
|
586
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
587
|
+
*
|
|
588
|
+
* const registry = createRegistry({ reactive: true })
|
|
589
|
+
*
|
|
590
|
+
* registry.register({ id: 'ticket-id' })
|
|
591
|
+
*
|
|
592
|
+
* console.log(registry.size) // 1
|
|
593
|
+
* ```
|
|
594
|
+
*/
|
|
595
|
+
reactive?: boolean;
|
|
596
|
+
}
|
|
597
|
+
interface RegistryContextOptions extends RegistryOptions {
|
|
598
|
+
namespace?: string;
|
|
599
|
+
}
|
|
600
|
+
/**
|
|
601
|
+
* Creates a new registry instance.
|
|
602
|
+
*
|
|
603
|
+
* @param options The options for the registry instance.
|
|
604
|
+
* @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
|
|
605
|
+
* @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
|
|
606
|
+
* @returns A new registry instance.
|
|
607
|
+
*
|
|
608
|
+
* @see https://0.vuetifyjs.com/composables/registration/create-registry#create-registry
|
|
609
|
+
*
|
|
610
|
+
* @example
|
|
611
|
+
* ```ts
|
|
612
|
+
* import { createRegistry } from '@vuetify/v0'
|
|
613
|
+
*
|
|
614
|
+
* const registry = createRegistry()
|
|
615
|
+
*
|
|
616
|
+
* const ticket1 = registry.register({ id: 'user-1', value: { name: 'John' } })
|
|
617
|
+
* const ticket2 = registry.register({ id: 'user-2', value: { name: 'Jane' } })
|
|
618
|
+
*
|
|
619
|
+
* console.log(registry.size) // 2
|
|
620
|
+
* console.log(registry.get('user-1')) // { id: 'user-1', index: 0, value: { name: 'John' }, ... }
|
|
621
|
+
* ```
|
|
622
|
+
*/
|
|
623
|
+
declare function createRegistry<Z extends RegistryTicketInput = RegistryTicketInput, E extends RegistryTicket & Z = RegistryTicket & Z>(options?: RegistryOptions): RegistryContext<Z, E>;
|
|
624
|
+
/**
|
|
625
|
+
* Creates a new registry context.
|
|
626
|
+
*
|
|
627
|
+
* @param options The options for the registry context, including `namespace` (defaults to `'v0:registry'`) and `events`.
|
|
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 context.
|
|
631
|
+
*
|
|
632
|
+
* @see https://0.vuetifyjs.com/composables/registration/create-registry#create-registry-context
|
|
633
|
+
*
|
|
634
|
+
* @example
|
|
635
|
+
* ```ts
|
|
636
|
+
* import { createRegistryContext } from '@vuetify/v0'
|
|
637
|
+
*
|
|
638
|
+
* // With default namespace 'v0:registry'
|
|
639
|
+
* export const [useItems, provideItems, items] = createRegistryContext()
|
|
640
|
+
*
|
|
641
|
+
* // Or with custom namespace
|
|
642
|
+
* export const [useItems, provideItems, items] = createRegistryContext({ namespace: 'my-items' })
|
|
643
|
+
*
|
|
644
|
+
* // In a parent component:
|
|
645
|
+
* provideItems()
|
|
646
|
+
*
|
|
647
|
+
* // In a child component:
|
|
648
|
+
* const items = useItems()
|
|
649
|
+
* items.register({ id: 'item-1', value: 'Value 1' })
|
|
650
|
+
* ```
|
|
651
|
+
*/
|
|
652
|
+
declare function createRegistryContext<Z extends RegistryTicketInput = RegistryTicketInput, E extends RegistryTicket & Z = RegistryTicket & Z>(_options?: RegistryContextOptions): ContextTrinity<RegistryContext<Z, E>>;
|
|
653
|
+
/**
|
|
654
|
+
* Uses an existing registry from context.
|
|
655
|
+
*
|
|
656
|
+
* @param namespace The namespace for the registry context. Defaults to `'v0:registry'`.
|
|
657
|
+
* @template Z The type of registry ticket that extends RegistryTicket.
|
|
658
|
+
* @template E The type of registry context that extends RegistryContext<Z>.
|
|
659
|
+
* @returns The registry instance.
|
|
660
|
+
*
|
|
661
|
+
* @see https://0.vuetifyjs.com/composables/registration/create-registry#use-registry
|
|
662
|
+
*
|
|
663
|
+
* @example
|
|
664
|
+
* ```ts
|
|
665
|
+
* import { useRegistry } from '@vuetify/v0'
|
|
666
|
+
*
|
|
667
|
+
* // In a child component (after provideRegistry was called by an ancestor):
|
|
668
|
+
* const registry = useRegistry()
|
|
669
|
+
*
|
|
670
|
+
* registry.register({ id: 'item-1', value: 'Value 1' })
|
|
671
|
+
* ```
|
|
672
|
+
*/
|
|
673
|
+
declare function useRegistry<Z extends RegistryTicketInput = RegistryTicketInput, E extends RegistryTicket & Z = RegistryTicket & Z>(namespace?: string): RegistryContext<Z, E>;
|
|
674
|
+
//#endregion
|
|
675
|
+
//#region src/composables/createSelection/index.d.ts
|
|
676
|
+
/**
|
|
677
|
+
* Input type for selection tickets - what users provide to register().
|
|
678
|
+
* Custom ticket types should extend this interface.
|
|
679
|
+
*
|
|
680
|
+
* @template V The type of the ticket value.
|
|
681
|
+
*
|
|
682
|
+
* @example
|
|
683
|
+
* ```ts
|
|
684
|
+
* interface MyTicket extends SelectionTicketInput {
|
|
685
|
+
* label: string
|
|
686
|
+
* disabled?: boolean
|
|
687
|
+
* metadata?: Record<string, unknown>
|
|
688
|
+
* }
|
|
689
|
+
*
|
|
690
|
+
* const selection = createSelection<MyTicket>()
|
|
691
|
+
* selection.register({ label: 'Item 1' })
|
|
692
|
+
* ```
|
|
693
|
+
*/
|
|
694
|
+
interface SelectionTicketInput<V = unknown> extends RegistryTicketInput<V> {
|
|
695
|
+
/** Disabled state of the ticket (optional on input, defaults to false) */
|
|
696
|
+
disabled?: MaybeRef<boolean>;
|
|
697
|
+
}
|
|
698
|
+
/**
|
|
699
|
+
* Output type for selection tickets - what users receive from get().
|
|
700
|
+
* Includes registry-added methods for self-selection.
|
|
701
|
+
*
|
|
702
|
+
* @template Z The input ticket type that extends SelectionTicketInput.
|
|
703
|
+
*
|
|
704
|
+
* @remarks
|
|
705
|
+
* The following properties are automatically added by the registry:
|
|
706
|
+
* - `disabled` - Defaults to `false` if not provided
|
|
707
|
+
* - `isSelected` - Reactive boolean indicating selection state
|
|
708
|
+
* - `select()` - Method to select this ticket
|
|
709
|
+
* - `unselect()` - Method to unselect this ticket
|
|
710
|
+
* - `toggle()` - Method to toggle selection state
|
|
711
|
+
*/
|
|
712
|
+
type SelectionTicket<Z extends SelectionTicketInput = SelectionTicketInput> = RegistryTicket & Z & {
|
|
713
|
+
/** Disabled state of the ticket (guaranteed to exist on output) */
|
|
714
|
+
disabled: MaybeRef<boolean>;
|
|
715
|
+
/** Whether the ticket is currently selected */
|
|
716
|
+
isSelected: Readonly<Ref<boolean, boolean>>;
|
|
717
|
+
/** Select self */
|
|
718
|
+
select: () => void;
|
|
719
|
+
/** Unselect self */
|
|
720
|
+
unselect: () => void;
|
|
721
|
+
/** Toggle self on and off */
|
|
722
|
+
toggle: () => void;
|
|
723
|
+
};
|
|
724
|
+
/**
|
|
725
|
+
* Context returned by createSelection.
|
|
726
|
+
*
|
|
727
|
+
* @template Z The input ticket type (what users provide to register).
|
|
728
|
+
* @template E The output ticket type (what users receive from get). Defaults to SelectionTicket<Z>.
|
|
729
|
+
*/
|
|
730
|
+
interface SelectionContext<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>> extends Omit<RegistryContext<E>, 'register' | 'onboard'> {
|
|
731
|
+
/** Set of selected ticket IDs */
|
|
732
|
+
selectedIds: Reactive<Set<ID>>;
|
|
733
|
+
/** Set of selected ticket instances */
|
|
734
|
+
selectedItems: ComputedRef<Set<E>>;
|
|
735
|
+
/** Set of selected ticket values */
|
|
736
|
+
selectedValues: ComputedRef<Set<unknown>>;
|
|
737
|
+
/** Disable state for the entire selection instance */
|
|
738
|
+
disabled: MaybeRef<boolean>;
|
|
739
|
+
/** Clear all selected IDs and reindexes */
|
|
740
|
+
reset: () => void;
|
|
741
|
+
/** Select a ticket by ID (Toggle ON) */
|
|
742
|
+
select: (id: ID) => void;
|
|
743
|
+
/** Unselect a ticket by ID (Toggle OFF) */
|
|
744
|
+
unselect: (id: ID) => void;
|
|
745
|
+
/** Toggles a ticket ON and OFF by ID */
|
|
746
|
+
toggle: (id: ID) => void;
|
|
747
|
+
/** Check if a ticket is selected by ID */
|
|
748
|
+
selected: (id: ID) => boolean;
|
|
749
|
+
/** Mandates selected ID based on "mandatory" Option */
|
|
750
|
+
mandate: () => void;
|
|
751
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
752
|
+
register: (ticket?: Partial<Z>) => E;
|
|
753
|
+
/** Onboard multiple tickets at once */
|
|
754
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
755
|
+
}
|
|
756
|
+
interface SelectionOptions extends RegistryOptions {
|
|
757
|
+
/** When true, the entire selection instance is disabled. */
|
|
758
|
+
disabled?: MaybeRefOrGetter<boolean>;
|
|
759
|
+
/**
|
|
760
|
+
* When true, newly registered items are automatically selected if not disabled.
|
|
761
|
+
* Useful for pre-selecting items in multi-select scenarios.
|
|
762
|
+
*/
|
|
763
|
+
enroll?: MaybeRefOrGetter<boolean>;
|
|
764
|
+
/**
|
|
765
|
+
* Controls mandatory selection behavior:
|
|
766
|
+
* - `false` (default): No mandatory selection enforcement
|
|
767
|
+
* - `true`: Prevents deselecting the last selected item (user must always have one selected)
|
|
768
|
+
* - `'force'`: Automatically selects the first non-disabled item on registration
|
|
769
|
+
*/
|
|
770
|
+
mandatory?: MaybeRefOrGetter<boolean | 'force'>;
|
|
771
|
+
/** When true, treats the selection as an array */
|
|
772
|
+
multiple?: MaybeRefOrGetter<boolean>;
|
|
773
|
+
}
|
|
774
|
+
interface SelectionContextOptions extends SelectionOptions {
|
|
775
|
+
namespace?: string;
|
|
776
|
+
}
|
|
777
|
+
/**
|
|
778
|
+
* Creates a new selection instance for managing multiple selected items.
|
|
779
|
+
*
|
|
780
|
+
* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
|
|
781
|
+
* Supports disabled items, mandatory selection enforcement, and auto-enrollment.
|
|
782
|
+
*
|
|
783
|
+
* @param options The options for the selection instance.
|
|
784
|
+
* @template Z The input ticket type - what users provide to register(). Extend SelectionTicketInput to add custom properties.
|
|
785
|
+
* @template E The output ticket type - what users receive from get(). Automatically includes selection methods.
|
|
786
|
+
* @template R The context type. Defaults to SelectionContext<Z, E>.
|
|
787
|
+
* @returns A new selection instance with selection management methods.
|
|
788
|
+
*
|
|
789
|
+
* @remarks
|
|
790
|
+
* **Key Features:**
|
|
791
|
+
* - Multi-selection support (unlike `useSingle` which enforces single selection)
|
|
792
|
+
* - Set-based `selectedIds` tracking for efficient lookups
|
|
793
|
+
* - Computed `selectedItems` and `selectedValues` for reactive access
|
|
794
|
+
* - Each ticket gets `isSelected`, `select()`, `unselect()`, and `toggle()` methods
|
|
795
|
+
* - Disabled items cannot be selected
|
|
796
|
+
* - Mandatory mode prevents deselecting the last item
|
|
797
|
+
* - Force mode auto-selects first non-disabled item on registration
|
|
798
|
+
* - Enroll option auto-selects all non-disabled items on registration
|
|
799
|
+
*
|
|
800
|
+
* **Inheritance Chain:**
|
|
801
|
+
* `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
|
|
802
|
+
*
|
|
803
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
804
|
+
*
|
|
805
|
+
* @example
|
|
806
|
+
* ```ts
|
|
807
|
+
* import { createSelection } from '@vuetify/v0'
|
|
808
|
+
*
|
|
809
|
+
* // Basic usage
|
|
810
|
+
* const selection = createSelection({ mandatory: true })
|
|
811
|
+
*
|
|
812
|
+
* selection.onboard([
|
|
813
|
+
* { id: 'item-1', value: 'Item 1' },
|
|
814
|
+
* { id: 'item-2', value: 'Item 2', disabled: true },
|
|
815
|
+
* { id: 'item-3', value: 'Item 3' },
|
|
816
|
+
* ])
|
|
817
|
+
*
|
|
818
|
+
* selection.select('item-1')
|
|
819
|
+
* selection.select('item-3')
|
|
820
|
+
*
|
|
821
|
+
* console.log(selection.selectedIds) // Set { 'item-1', 'item-3' }
|
|
822
|
+
* console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
|
|
823
|
+
* ```
|
|
824
|
+
*
|
|
825
|
+
* @example
|
|
826
|
+
* ```ts
|
|
827
|
+
* // With custom ticket type
|
|
828
|
+
* interface MyTicket extends SelectionTicketInput {
|
|
829
|
+
* label: string
|
|
830
|
+
* icon?: string
|
|
831
|
+
* }
|
|
832
|
+
*
|
|
833
|
+
* const tabs = createSelection<MyTicket>()
|
|
834
|
+
*
|
|
835
|
+
* tabs.register({ label: 'Home', icon: 'mdi-home' })
|
|
836
|
+
* tabs.register({ label: 'Settings' })
|
|
837
|
+
*
|
|
838
|
+
* const ticket = tabs.get('...')
|
|
839
|
+
* // ticket has: label, icon, isSelected, select(), unselect(), toggle()
|
|
840
|
+
* ```
|
|
841
|
+
*/
|
|
842
|
+
declare function createSelection<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(_options?: SelectionOptions): R;
|
|
843
|
+
/**
|
|
844
|
+
* Creates a new selection context.
|
|
845
|
+
*
|
|
846
|
+
* @param options The options for the selection context.
|
|
847
|
+
* @template Z The input ticket type - what users provide to register().
|
|
848
|
+
* @template E The output ticket type - what users receive from get().
|
|
849
|
+
* @template R The context type. Defaults to SelectionContext<Z, E>.
|
|
850
|
+
* @returns A new selection context.
|
|
851
|
+
*
|
|
852
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
853
|
+
*
|
|
854
|
+
* @example
|
|
855
|
+
* ```ts
|
|
856
|
+
* import { createSelectionContext } from '@vuetify/v0'
|
|
857
|
+
*
|
|
858
|
+
* // With default namespace 'v0:selection'
|
|
859
|
+
* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext()
|
|
860
|
+
*
|
|
861
|
+
* // Or with custom namespace
|
|
862
|
+
* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext({ namespace: 'checkboxes' })
|
|
863
|
+
*
|
|
864
|
+
* // In a parent component:
|
|
865
|
+
* provideCheckboxes()
|
|
866
|
+
*
|
|
867
|
+
* // In a child component:
|
|
868
|
+
* const checkboxes = useCheckboxes()
|
|
869
|
+
* checkboxes.select('checkbox-1')
|
|
870
|
+
* ```
|
|
871
|
+
*
|
|
872
|
+
* @example
|
|
873
|
+
* ```ts
|
|
874
|
+
* // With custom ticket type
|
|
875
|
+
* interface TabTicket extends SelectionTicketInput {
|
|
876
|
+
* label: string
|
|
877
|
+
* icon?: string
|
|
878
|
+
* }
|
|
879
|
+
*
|
|
880
|
+
* export const [useTabs, provideTabs, tabs] = createSelectionContext<TabTicket>()
|
|
881
|
+
* ```
|
|
882
|
+
*/
|
|
883
|
+
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>;
|
|
884
|
+
/**
|
|
885
|
+
* Returns the current selection instance.
|
|
886
|
+
*
|
|
887
|
+
* @param namespace The namespace for the selection context. Defaults to `'v0:selection'`.
|
|
888
|
+
* @template Z The input ticket type.
|
|
889
|
+
* @template E The output ticket type.
|
|
890
|
+
* @template R The context type.
|
|
891
|
+
* @returns The current selection instance.
|
|
892
|
+
*
|
|
893
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-selection
|
|
894
|
+
*
|
|
895
|
+
* @example
|
|
896
|
+
* ```vue
|
|
897
|
+
* <script setup lang="ts">
|
|
898
|
+
* import { useSelection } from '@vuetify/v0'
|
|
899
|
+
*
|
|
900
|
+
* const selection = useSelection()
|
|
901
|
+
* </script>
|
|
902
|
+
*
|
|
903
|
+
* <template>
|
|
904
|
+
* <div>
|
|
905
|
+
* <p>Selected: {{ selection.selectedIds.size }}</p>
|
|
906
|
+
* </div>
|
|
907
|
+
* </template>
|
|
908
|
+
* ```
|
|
909
|
+
*/
|
|
910
|
+
declare function useSelection<Z extends SelectionTicketInput = SelectionTicketInput, E extends SelectionTicket<Z> = SelectionTicket<Z>, R extends SelectionContext<Z, E> = SelectionContext<Z, E>>(namespace?: string): R;
|
|
911
|
+
//#endregion
|
|
912
|
+
//#region src/composables/createSingle/index.d.ts
|
|
913
|
+
/**
|
|
914
|
+
* Input type for single selection tickets.
|
|
915
|
+
* Extend this interface to add custom properties.
|
|
916
|
+
*/
|
|
917
|
+
interface SingleTicketInput<V = unknown> extends SelectionTicketInput<V> {}
|
|
918
|
+
/**
|
|
919
|
+
* Output type for single selection tickets.
|
|
920
|
+
* Includes all input properties plus selection methods.
|
|
921
|
+
*/
|
|
922
|
+
type SingleTicket<Z extends SingleTicketInput = SingleTicketInput> = SelectionTicket<Z>;
|
|
923
|
+
/**
|
|
924
|
+
* Context returned by createSingle.
|
|
925
|
+
*
|
|
926
|
+
* @template Z The input ticket type.
|
|
927
|
+
* @template E The output ticket type.
|
|
928
|
+
*/
|
|
929
|
+
interface SingleContext<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register' | 'onboard'> {
|
|
930
|
+
selectedId: ComputedRef<ID | undefined>;
|
|
931
|
+
selectedIndex: ComputedRef<number>;
|
|
932
|
+
selectedItem: ComputedRef<E | undefined>;
|
|
933
|
+
selectedValue: ComputedRef<E['value'] | undefined>;
|
|
934
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
935
|
+
register: (ticket?: Partial<Z>) => E;
|
|
936
|
+
/** Onboard multiple tickets at once */
|
|
937
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
938
|
+
}
|
|
939
|
+
interface SingleOptions extends SelectionOptions {}
|
|
940
|
+
interface SingleContextOptions extends SelectionContextOptions {}
|
|
941
|
+
/**
|
|
942
|
+
* Creates a new single selection instance that enforces only one selected item at a time.
|
|
943
|
+
*
|
|
944
|
+
* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
|
|
945
|
+
* Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
|
|
946
|
+
*
|
|
947
|
+
* @param options The options for the single selection instance.
|
|
948
|
+
* @template Z The input ticket type - what users provide to register().
|
|
949
|
+
* @template E The output ticket type - what users receive from get().
|
|
950
|
+
* @template R The context type.
|
|
951
|
+
* @returns A new single selection instance with single-selection enforcement.
|
|
952
|
+
*
|
|
953
|
+
* @remarks
|
|
954
|
+
* **Key Differences from `createSelection`:**
|
|
955
|
+
* - Automatically clears `selectedIds` before selecting a new item (enforces single selection)
|
|
956
|
+
* - Provides singular computed properties instead of plural sets
|
|
957
|
+
* - Perfect for tabs, radio buttons, theme selectors, and other single-choice UI components
|
|
958
|
+
*
|
|
959
|
+
* **Computed Properties:**
|
|
960
|
+
* - `selectedId`: The ID of the selected item (undefined if none selected)
|
|
961
|
+
* - `selectedItem`: The selected ticket object (undefined if none selected)
|
|
962
|
+
* - `selectedIndex`: The index of the selected item (-1 if none selected)
|
|
963
|
+
* - `selectedValue`: The value of the selected item (undefined if none selected)
|
|
964
|
+
*
|
|
965
|
+
* **Inheritance Chain:**
|
|
966
|
+
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
967
|
+
*
|
|
968
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
969
|
+
*
|
|
970
|
+
* @example
|
|
971
|
+
* ```ts
|
|
972
|
+
* import { createSingle } from '@vuetify/v0'
|
|
973
|
+
*
|
|
974
|
+
* const tabs = createSingle({ mandatory: true })
|
|
975
|
+
*
|
|
976
|
+
* tabs.onboard([
|
|
977
|
+
* { id: 'home', value: 'Home' },
|
|
978
|
+
* { id: 'about', value: 'About' },
|
|
979
|
+
* { id: 'contact', value: 'Contact' },
|
|
980
|
+
* ])
|
|
981
|
+
*
|
|
982
|
+
* tabs.first() // Select first tab
|
|
983
|
+
*
|
|
984
|
+
* console.log(tabs.selectedId.value) // 'home'
|
|
985
|
+
* console.log(tabs.selectedIndex.value) // 0
|
|
986
|
+
*
|
|
987
|
+
* tabs.select('about') // Switch to about tab
|
|
988
|
+
* console.log(tabs.selectedId.value) // 'about'
|
|
989
|
+
* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
|
|
990
|
+
* ```
|
|
991
|
+
*
|
|
992
|
+
* @example
|
|
993
|
+
* ```ts
|
|
994
|
+
* // With custom ticket type
|
|
995
|
+
* interface TabTicket extends SingleTicketInput {
|
|
996
|
+
* label: string
|
|
997
|
+
* icon?: string
|
|
998
|
+
* }
|
|
999
|
+
*
|
|
1000
|
+
* const tabs = createSingle<TabTicket>()
|
|
1001
|
+
* tabs.register({ label: 'Home', icon: 'mdi-home' })
|
|
1002
|
+
* ```
|
|
1003
|
+
*/
|
|
1004
|
+
declare function createSingle<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(_options?: SingleOptions): R;
|
|
1005
|
+
/**
|
|
1006
|
+
* Creates a new single selection context.
|
|
1007
|
+
*
|
|
1008
|
+
* @param options The options for the single selection context.
|
|
1009
|
+
* @template Z The input ticket type.
|
|
1010
|
+
* @template E The output ticket type.
|
|
1011
|
+
* @template R The context type.
|
|
1012
|
+
* @returns A new single selection context.
|
|
1013
|
+
*
|
|
1014
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1015
|
+
*
|
|
1016
|
+
* @example
|
|
1017
|
+
* ```ts
|
|
1018
|
+
* import { createSingleContext } from '@vuetify/v0'
|
|
1019
|
+
*
|
|
1020
|
+
* // With default namespace 'v0:single'
|
|
1021
|
+
* export const [useSingle, provideSingle, context] = createSingleContext()
|
|
1022
|
+
*
|
|
1023
|
+
* // In a parent component:
|
|
1024
|
+
* provideSingle()
|
|
1025
|
+
*
|
|
1026
|
+
* // In a child component:
|
|
1027
|
+
* const single = useSingle()
|
|
1028
|
+
* single.select('tab-1')
|
|
1029
|
+
* ```
|
|
1030
|
+
*/
|
|
1031
|
+
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>;
|
|
1032
|
+
/**
|
|
1033
|
+
* Returns the current single selection instance.
|
|
1034
|
+
*
|
|
1035
|
+
* @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
|
|
1036
|
+
* @template Z The input ticket type.
|
|
1037
|
+
* @template E The output ticket type.
|
|
1038
|
+
* @template R The context type.
|
|
1039
|
+
* @returns The current single selection instance.
|
|
1040
|
+
*
|
|
1041
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1042
|
+
*
|
|
1043
|
+
* @example
|
|
1044
|
+
* ```vue
|
|
1045
|
+
* <script setup lang="ts">
|
|
1046
|
+
* import { useSingle } from '@vuetify/v0'
|
|
1047
|
+
*
|
|
1048
|
+
* const tabs = useSingle()
|
|
1049
|
+
* </script>
|
|
1050
|
+
*
|
|
1051
|
+
* <template>
|
|
1052
|
+
* <div>
|
|
1053
|
+
* <p>Selected: {{ tabs.selectedId }}</p>
|
|
1054
|
+
* </div>
|
|
1055
|
+
* </template>
|
|
1056
|
+
* ```
|
|
1057
|
+
*/
|
|
1058
|
+
declare function useSingle<Z extends SingleTicketInput = SingleTicketInput, E extends SingleTicket<Z> = SingleTicket<Z>, R extends SingleContext<Z, E> = SingleContext<Z, E>>(namespace?: string): R;
|
|
1059
|
+
//#endregion
|
|
1060
|
+
//#region src/composables/createBreadcrumbs/index.d.ts
|
|
1061
|
+
/**
|
|
1062
|
+
* Input type for breadcrumb tickets.
|
|
1063
|
+
*/
|
|
1064
|
+
interface BreadcrumbTicketInput<V = unknown> extends SingleTicketInput<V> {
|
|
1065
|
+
/** Display text for the breadcrumb */
|
|
1066
|
+
text: string;
|
|
1067
|
+
}
|
|
1068
|
+
/**
|
|
1069
|
+
* Output type for breadcrumb tickets.
|
|
1070
|
+
*/
|
|
1071
|
+
type BreadcrumbTicket<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput> = SingleTicket<Z>;
|
|
1072
|
+
/**
|
|
1073
|
+
* Context returned by createBreadcrumbs.
|
|
1074
|
+
*/
|
|
1075
|
+
interface BreadcrumbsContext<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>> extends Omit<SingleContext<Z, E>, 'select'> {
|
|
1076
|
+
/** Number of items in the path */
|
|
1077
|
+
depth: Readonly<Ref<number>>;
|
|
1078
|
+
/** Whether at root level (depth <= 1) */
|
|
1079
|
+
isRoot: Readonly<Ref<boolean>>;
|
|
1080
|
+
/** Whether path is empty (depth === 0) */
|
|
1081
|
+
isEmpty: Readonly<Ref<boolean>>;
|
|
1082
|
+
/** Navigate to root (first item) */
|
|
1083
|
+
first: () => void;
|
|
1084
|
+
/** Navigate up one level (remove last item) */
|
|
1085
|
+
prev: () => void;
|
|
1086
|
+
/** Navigate to specific item by id (truncates path) */
|
|
1087
|
+
select: (id: ID) => void;
|
|
1088
|
+
}
|
|
1089
|
+
interface BreadcrumbsOptions extends SingleOptions {}
|
|
1090
|
+
interface BreadcrumbsContextOptions extends SingleContextOptions {}
|
|
1091
|
+
/**
|
|
1092
|
+
* Creates a breadcrumbs navigation model.
|
|
1093
|
+
*
|
|
1094
|
+
* @param options The options for the breadcrumbs instance.
|
|
1095
|
+
* @returns A breadcrumbs context with navigation methods.
|
|
1096
|
+
*
|
|
1097
|
+
* @example
|
|
1098
|
+
* ```ts
|
|
1099
|
+
* import { createBreadcrumbs } from '@vuetify/v0'
|
|
1100
|
+
*
|
|
1101
|
+
* const breadcrumbs = createBreadcrumbs()
|
|
1102
|
+
*
|
|
1103
|
+
* breadcrumbs.register({ text: 'Home' })
|
|
1104
|
+
* breadcrumbs.register({ text: 'Products' })
|
|
1105
|
+
* breadcrumbs.register({ text: 'Electronics' })
|
|
1106
|
+
*
|
|
1107
|
+
* // Navigate back
|
|
1108
|
+
* breadcrumbs.prev() // removes Electronics
|
|
1109
|
+
* breadcrumbs.first() // truncates to Home
|
|
1110
|
+
*
|
|
1111
|
+
* // Derived state
|
|
1112
|
+
* breadcrumbs.depth.value // 1
|
|
1113
|
+
* breadcrumbs.isRoot.value // true
|
|
1114
|
+
* ```
|
|
1115
|
+
*/
|
|
1116
|
+
declare function createBreadcrumbs<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>, R extends BreadcrumbsContext<Z, E> = BreadcrumbsContext<Z, E>>(options?: BreadcrumbsOptions): R;
|
|
1117
|
+
/**
|
|
1118
|
+
* Creates a breadcrumbs context for dependency injection.
|
|
1119
|
+
*
|
|
1120
|
+
* @param options The options including namespace.
|
|
1121
|
+
* @returns A trinity: [useBreadcrumbs, provideBreadcrumbs, defaultContext]
|
|
1122
|
+
*
|
|
1123
|
+
* @example
|
|
1124
|
+
* ```ts
|
|
1125
|
+
* const [useBreadcrumbs, provideBreadcrumbs] = createBreadcrumbsContext()
|
|
1126
|
+
*
|
|
1127
|
+
* // Parent component
|
|
1128
|
+
* provideBreadcrumbs()
|
|
1129
|
+
*
|
|
1130
|
+
* // Child component
|
|
1131
|
+
* const breadcrumbs = useBreadcrumbs()
|
|
1132
|
+
* breadcrumbs.register({ text: 'Details' })
|
|
1133
|
+
* ```
|
|
1134
|
+
*/
|
|
1135
|
+
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>;
|
|
1136
|
+
/**
|
|
1137
|
+
* Returns the current breadcrumbs instance from context.
|
|
1138
|
+
*
|
|
1139
|
+
* @param namespace The namespace. @default 'v0:breadcrumbs'
|
|
1140
|
+
* @returns The breadcrumbs context.
|
|
1141
|
+
*
|
|
1142
|
+
* @example
|
|
1143
|
+
* ```vue
|
|
1144
|
+
* <script setup lang="ts">
|
|
1145
|
+
* import { useBreadcrumbs } from '@vuetify/v0'
|
|
1146
|
+
*
|
|
1147
|
+
* const breadcrumbs = useBreadcrumbs()
|
|
1148
|
+
* </script>
|
|
1149
|
+
*
|
|
1150
|
+
* <template>
|
|
1151
|
+
* <nav>
|
|
1152
|
+
* <template v-for="ticket in breadcrumbs.values()" :key="ticket.id">
|
|
1153
|
+
* <a @click="breadcrumbs.select(ticket.id)">{{ ticket.text }}</a>
|
|
1154
|
+
* </template>
|
|
1155
|
+
* </nav>
|
|
1156
|
+
* </template>
|
|
1157
|
+
* ```
|
|
1158
|
+
*/
|
|
1159
|
+
declare function useBreadcrumbs<Z extends BreadcrumbTicketInput = BreadcrumbTicketInput, E extends BreadcrumbTicket<Z> = BreadcrumbTicket<Z>, R extends BreadcrumbsContext<Z, E> = BreadcrumbsContext<Z, E>>(namespace?: string): R;
|
|
1160
|
+
//#endregion
|
|
1161
|
+
//#region src/composables/createGroup/index.d.ts
|
|
1162
|
+
/**
|
|
1163
|
+
* Input type for group tickets.
|
|
1164
|
+
* Extend this interface to add custom properties.
|
|
1165
|
+
*/
|
|
1166
|
+
interface GroupTicketInput<V = unknown> extends SelectionTicketInput<V> {
|
|
1167
|
+
/** Whether the ticket should start in mixed/indeterminate state */
|
|
1168
|
+
indeterminate?: MaybeRef<boolean>;
|
|
1169
|
+
}
|
|
1170
|
+
/**
|
|
1171
|
+
* Output type for group tickets.
|
|
1172
|
+
* Includes all input properties plus selection and tri-state methods.
|
|
1173
|
+
*/
|
|
1174
|
+
type GroupTicket<Z extends GroupTicketInput = GroupTicketInput> = SelectionTicket<Z> & {
|
|
1175
|
+
/** Whether the ticket is in a mixed/indeterminate state */
|
|
1176
|
+
isMixed: Readonly<Ref<boolean>>;
|
|
1177
|
+
/** Set self to mixed/indeterminate state */
|
|
1178
|
+
mix: () => void;
|
|
1179
|
+
/** Clear mixed/indeterminate state from self */
|
|
1180
|
+
unmix: () => void;
|
|
1181
|
+
};
|
|
1182
|
+
/**
|
|
1183
|
+
* Context returned by createGroup.
|
|
1184
|
+
*
|
|
1185
|
+
* @template Z The input ticket type.
|
|
1186
|
+
* @template E The output ticket type.
|
|
1187
|
+
*/
|
|
1188
|
+
interface GroupContext<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register' | 'onboard' | 'select' | 'unselect' | 'toggle'> {
|
|
1189
|
+
selectedIndexes: ComputedRef<Set<number>>;
|
|
1190
|
+
/** Select one or more Tickets by ID */
|
|
1191
|
+
select: (ids: ID | ID[]) => void;
|
|
1192
|
+
/** Unselect one or more Tickets by ID */
|
|
1193
|
+
unselect: (ids: ID | ID[]) => void;
|
|
1194
|
+
/** Toggle one or more Tickets ON and OFF by ID */
|
|
1195
|
+
toggle: (ids: ID | ID[]) => void;
|
|
1196
|
+
/** Set of mixed/indeterminate ticket IDs */
|
|
1197
|
+
mixedIds: Reactive<Set<ID>>;
|
|
1198
|
+
/** Set of mixed/indeterminate ticket instances */
|
|
1199
|
+
mixedItems: ComputedRef<Set<E>>;
|
|
1200
|
+
/** Set one or more Tickets to mixed/indeterminate state by ID */
|
|
1201
|
+
mix: (ids: ID | ID[]) => void;
|
|
1202
|
+
/** Clear mixed/indeterminate state from one or more Tickets by ID */
|
|
1203
|
+
unmix: (ids: ID | ID[]) => void;
|
|
1204
|
+
/** Check if a ticket is in mixed/indeterminate state by ID */
|
|
1205
|
+
mixed: (id: ID) => boolean;
|
|
1206
|
+
/** Whether no items are currently selected */
|
|
1207
|
+
isNoneSelected: ComputedRef<boolean>;
|
|
1208
|
+
/** Whether all selectable (non-disabled) items are selected */
|
|
1209
|
+
isAllSelected: ComputedRef<boolean>;
|
|
1210
|
+
/** Whether some but not all selectable items are selected */
|
|
1211
|
+
isMixed: ComputedRef<boolean>;
|
|
1212
|
+
/** Select all selectable (non-disabled) items */
|
|
1213
|
+
selectAll: () => void;
|
|
1214
|
+
/** Unselect all items (respects mandatory option) */
|
|
1215
|
+
unselectAll: () => void;
|
|
1216
|
+
/** Toggle between all selected and none selected */
|
|
1217
|
+
toggleAll: () => void;
|
|
1218
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
1219
|
+
register: (ticket?: Partial<Z>) => E;
|
|
1220
|
+
/** Onboard multiple tickets at once */
|
|
1221
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
1222
|
+
}
|
|
1223
|
+
interface GroupOptions extends SelectionOptions {}
|
|
1224
|
+
interface GroupContextOptions extends SelectionContextOptions {}
|
|
1225
|
+
/**
|
|
1226
|
+
* Creates a new group instance with batch selection and tri-state support.
|
|
1227
|
+
*
|
|
1228
|
+
* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
|
|
1229
|
+
* at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
|
|
1230
|
+
* checkbox trees and similar use cases.
|
|
1231
|
+
*
|
|
1232
|
+
* @param options The options for the group instance.
|
|
1233
|
+
* @template Z The type of the group ticket.
|
|
1234
|
+
* @template E The type of the group context.
|
|
1235
|
+
* @returns A new group instance with batch selection and tri-state support.
|
|
1236
|
+
*
|
|
1237
|
+
* @remarks
|
|
1238
|
+
* **Key Differences from `createSelection`:**
|
|
1239
|
+
* - `select()` accepts `ID | ID[]` for batch operations
|
|
1240
|
+
* - `unselect()` accepts `ID | ID[]` for batch operations
|
|
1241
|
+
* - `toggle()` accepts `ID | ID[]` for batch operations
|
|
1242
|
+
* - Adds `selectedIndexes` computed Set for getting selected item indexes
|
|
1243
|
+
* - Adds tri-state support via `mix()`, `unmix()`, `mixed()`, `mixedIds`, `mixedItems`
|
|
1244
|
+
* - Perfect for checkbox trees, multi-select dropdowns, and bulk operations
|
|
1245
|
+
*
|
|
1246
|
+
* **Tri-State Support:**
|
|
1247
|
+
* - Items can be in one of three states: selected, mixed (indeterminate), or unselected
|
|
1248
|
+
* - `mix(id)` sets item to mixed state (clears selected if set)
|
|
1249
|
+
* - `unmix(id)` clears mixed state
|
|
1250
|
+
* - `select(id)` clears mixed state before selecting
|
|
1251
|
+
* - `toggle(id)` on a mixed item selects it (resolves the indeterminate state positively)
|
|
1252
|
+
* - Mixed state works on disabled items (it's a computed state, not user action)
|
|
1253
|
+
*
|
|
1254
|
+
* **Batch Operations:**
|
|
1255
|
+
* - Single ID: `group.select('item-1')`
|
|
1256
|
+
* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
|
|
1257
|
+
* - Uses `toArray()` utility internally to normalize input
|
|
1258
|
+
* - Disabled items are automatically skipped in select operations
|
|
1259
|
+
* - Non-existent IDs are silently ignored
|
|
1260
|
+
*
|
|
1261
|
+
* **Inheritance Chain:**
|
|
1262
|
+
* `useRegistry` → `createSelection` → `createGroup`
|
|
1263
|
+
*
|
|
1264
|
+
* **Used By:**
|
|
1265
|
+
* - `createFeatures` for feature flag management with multiple selections
|
|
1266
|
+
*
|
|
1267
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
1268
|
+
*
|
|
1269
|
+
* @example
|
|
1270
|
+
* ```ts
|
|
1271
|
+
* import { createGroup } from '@vuetify/v0'
|
|
1272
|
+
*
|
|
1273
|
+
* const checkboxes = createGroup()
|
|
1274
|
+
*
|
|
1275
|
+
* checkboxes.onboard([
|
|
1276
|
+
* { id: 'option-a', value: 'Option A' },
|
|
1277
|
+
* { id: 'option-b', value: 'Option B' },
|
|
1278
|
+
* { id: 'option-c', value: 'Option C' },
|
|
1279
|
+
* ])
|
|
1280
|
+
*
|
|
1281
|
+
* // Select multiple items at once
|
|
1282
|
+
* checkboxes.select(['option-a', 'option-c'])
|
|
1283
|
+
*
|
|
1284
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
1285
|
+
* console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
|
|
1286
|
+
*
|
|
1287
|
+
* // Set item to mixed/indeterminate state
|
|
1288
|
+
* checkboxes.mix('option-a')
|
|
1289
|
+
* console.log(checkboxes.mixedIds) // Set { 'option-a' }
|
|
1290
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-c' } (option-a removed)
|
|
1291
|
+
*
|
|
1292
|
+
* // Toggle a mixed item selects it
|
|
1293
|
+
* checkboxes.toggle('option-a')
|
|
1294
|
+
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
1295
|
+
* console.log(checkboxes.mixedIds) // Set {} (cleared)
|
|
1296
|
+
* ```
|
|
1297
|
+
*/
|
|
1298
|
+
declare function createGroup<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(_options?: GroupOptions): R;
|
|
1299
|
+
/**
|
|
1300
|
+
* Creates a new group context.
|
|
1301
|
+
*
|
|
1302
|
+
* @param options The options for the group context.
|
|
1303
|
+
* @template Z The input ticket type.
|
|
1304
|
+
* @template E The output ticket type.
|
|
1305
|
+
* @template R The context type.
|
|
1306
|
+
* @returns A new group context.
|
|
1307
|
+
*
|
|
1308
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
1309
|
+
*
|
|
1310
|
+
* @example
|
|
1311
|
+
* ```ts
|
|
1312
|
+
* import { createGroupContext } from '@vuetify/v0'
|
|
1313
|
+
*
|
|
1314
|
+
* // With default namespace 'v0:group'
|
|
1315
|
+
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext()
|
|
1316
|
+
*
|
|
1317
|
+
* // Or with custom namespace
|
|
1318
|
+
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext({ namespace: 'my-group' })
|
|
1319
|
+
*
|
|
1320
|
+
* // In a parent component:
|
|
1321
|
+
* provideMyGroup()
|
|
1322
|
+
*
|
|
1323
|
+
* // In a child component:
|
|
1324
|
+
* const group = useMyGroup()
|
|
1325
|
+
* ```
|
|
1326
|
+
*/
|
|
1327
|
+
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>;
|
|
1328
|
+
/**
|
|
1329
|
+
* Returns the current group instance.
|
|
1330
|
+
*
|
|
1331
|
+
* @param namespace The namespace for the group context. Defaults to `'v0:group'`.
|
|
1332
|
+
* @template Z The input ticket type.
|
|
1333
|
+
* @template E The output ticket type.
|
|
1334
|
+
* @template R The context type.
|
|
1335
|
+
* @returns The current group instance.
|
|
1336
|
+
*
|
|
1337
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
1338
|
+
*
|
|
1339
|
+
* @example
|
|
1340
|
+
* ```vue
|
|
1341
|
+
* <script setup lang="ts">
|
|
1342
|
+
* import { useGroup } from '@vuetify/v0'
|
|
1343
|
+
*
|
|
1344
|
+
* const group = useGroup()
|
|
1345
|
+
* </script>
|
|
1346
|
+
*
|
|
1347
|
+
* <template>
|
|
1348
|
+
* <div>
|
|
1349
|
+
* <p>Selected: {{ group.selectedIds.size }}</p>
|
|
1350
|
+
* </div>
|
|
1351
|
+
* </template>
|
|
1352
|
+
* ```
|
|
1353
|
+
*/
|
|
1354
|
+
declare function useGroup<Z extends GroupTicketInput = GroupTicketInput, E extends GroupTicket<Z> = GroupTicket<Z>, R extends GroupContext<Z, E> = GroupContext<Z, E>>(namespace?: string): R;
|
|
1355
|
+
//#endregion
|
|
1356
|
+
//#region src/composables/createOverflow/index.d.ts
|
|
1357
|
+
interface OverflowOptions {
|
|
1358
|
+
/**
|
|
1359
|
+
* Container element to track. Can be a ref, getter, or MaybeRefOrGetter.
|
|
1360
|
+
* When provided, useOverflow tracks this element's width automatically.
|
|
1361
|
+
* Accepts null for compatibility with Vue's useTemplateRef.
|
|
1362
|
+
*/
|
|
1363
|
+
container?: MaybeRefOrGetter<Element | null | undefined>;
|
|
1364
|
+
/** Gap between items in pixels */
|
|
1365
|
+
gap?: MaybeRefOrGetter<number>;
|
|
1366
|
+
/** Reserved space in pixels (for nav buttons, ellipsis, etc) */
|
|
1367
|
+
reserved?: MaybeRefOrGetter<number>;
|
|
1368
|
+
/**
|
|
1369
|
+
* Uniform item width in pixels. When provided, enables uniform mode
|
|
1370
|
+
* where capacity is calculated as available space / itemWidth.
|
|
1371
|
+
* Use this for same-width items like pagination buttons.
|
|
1372
|
+
*/
|
|
1373
|
+
itemWidth?: MaybeRefOrGetter<number>;
|
|
1374
|
+
/**
|
|
1375
|
+
* Calculate capacity from end instead of start.
|
|
1376
|
+
* Useful for breadcrumbs where trailing items take priority.
|
|
1377
|
+
* Only affects variable mode (uniform mode capacity is direction-independent).
|
|
1378
|
+
*/
|
|
1379
|
+
reverse?: MaybeRefOrGetter<boolean>;
|
|
1380
|
+
}
|
|
1381
|
+
interface OverflowContext {
|
|
1382
|
+
/** Container element ref */
|
|
1383
|
+
container: ShallowRef<Element | null | undefined>;
|
|
1384
|
+
/** Current container width */
|
|
1385
|
+
width: Readonly<ShallowRef<number>>;
|
|
1386
|
+
/** How many items fit in available space */
|
|
1387
|
+
capacity: ComputedRef<number>;
|
|
1388
|
+
/** Total width of all measured items */
|
|
1389
|
+
total: ComputedRef<number>;
|
|
1390
|
+
/** Whether items overflow the container */
|
|
1391
|
+
isOverflowing: Readonly<Ref<boolean>>;
|
|
1392
|
+
/** Register an item's element for width measurement */
|
|
1393
|
+
measure: (index: number, el: Element | undefined) => void;
|
|
1394
|
+
/** Clear all measurements */
|
|
1395
|
+
reset: () => void;
|
|
1396
|
+
}
|
|
1397
|
+
interface OverflowContextOptions extends OverflowOptions {
|
|
1398
|
+
/** Namespace for dependency injection */
|
|
1399
|
+
namespace?: string;
|
|
1400
|
+
}
|
|
1401
|
+
/**
|
|
1402
|
+
* Creates a new overflow context for computing how many items fit in a container.
|
|
1403
|
+
*
|
|
1404
|
+
* @param options Configuration options
|
|
1405
|
+
* @returns Overflow context with container ref, capacity, and measurement functions
|
|
1406
|
+
*
|
|
1407
|
+
* @example Variable-width mode (Breadcrumbs)
|
|
1408
|
+
* ```vue
|
|
1409
|
+
* <script lang="ts" setup>
|
|
1410
|
+
* import { useTemplateRef } from 'vue'
|
|
1411
|
+
* import { createOverflow } from '@vuetify/v0'
|
|
1412
|
+
*
|
|
1413
|
+
* const containerRef = useTemplateRef('container')
|
|
1414
|
+
* const overflow = createOverflow({
|
|
1415
|
+
* container: containerRef,
|
|
1416
|
+
* gap: 8,
|
|
1417
|
+
* reserved: 40,
|
|
1418
|
+
* })
|
|
1419
|
+
* </script>
|
|
1420
|
+
*
|
|
1421
|
+
* <template>
|
|
1422
|
+
* <div ref="container">
|
|
1423
|
+
* <span
|
|
1424
|
+
* v-for="(item, i) in items.slice(0, overflow.capacity.value)"
|
|
1425
|
+
* :key="i"
|
|
1426
|
+
* :ref="el => overflow.measure(i, el)"
|
|
1427
|
+
* >
|
|
1428
|
+
* {{ item }}
|
|
1429
|
+
* </span>
|
|
1430
|
+
* <span v-if="overflow.isOverflowing.value">...</span>
|
|
1431
|
+
* </div>
|
|
1432
|
+
* </template>
|
|
1433
|
+
* ```
|
|
1434
|
+
*
|
|
1435
|
+
* @example Uniform-width mode (Pagination)
|
|
1436
|
+
* ```ts
|
|
1437
|
+
* const overflow = createOverflow({
|
|
1438
|
+
* container: () => atom.value?.element,
|
|
1439
|
+
* itemWidth: buttonWidth,
|
|
1440
|
+
* reserved: () => buttonWidth.value * 4,
|
|
1441
|
+
* })
|
|
1442
|
+
* ```
|
|
1443
|
+
*/
|
|
1444
|
+
declare function createOverflow<E extends OverflowContext = OverflowContext>(options?: OverflowOptions): E;
|
|
1445
|
+
/**
|
|
1446
|
+
* Creates an overflow context with dependency injection support.
|
|
1447
|
+
*
|
|
1448
|
+
* @param options Configuration options including namespace
|
|
1449
|
+
* @template E The type of the overflow context
|
|
1450
|
+
* @returns Trinity tuple: [useOverflow, provideOverflow, defaultOverflow]
|
|
1451
|
+
*
|
|
1452
|
+
* @example
|
|
1453
|
+
* ```ts
|
|
1454
|
+
* // Create injectable context
|
|
1455
|
+
* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
|
|
1456
|
+
* namespace: 'my-overflow',
|
|
1457
|
+
* gap: 8,
|
|
1458
|
+
* reserved: 160,
|
|
1459
|
+
* })
|
|
1460
|
+
*
|
|
1461
|
+
* // In parent component
|
|
1462
|
+
* provideOverflow()
|
|
1463
|
+
*
|
|
1464
|
+
* // In child component
|
|
1465
|
+
* const overflow = useOverflow()
|
|
1466
|
+
* ```
|
|
1467
|
+
*/
|
|
1468
|
+
declare function createOverflowContext<E extends OverflowContext = OverflowContext>(_options?: OverflowContextOptions): ContextTrinity<E>;
|
|
1469
|
+
/**
|
|
1470
|
+
* Returns the current overflow context from dependency injection.
|
|
1471
|
+
*
|
|
1472
|
+
* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
|
|
1473
|
+
* @template E The type of the overflow context
|
|
1474
|
+
* @returns The current overflow context.
|
|
1475
|
+
*
|
|
1476
|
+
* @throws An error if the overflow context is not found and no default is provided.
|
|
1477
|
+
*
|
|
1478
|
+
* @example
|
|
1479
|
+
* ```vue
|
|
1480
|
+
* <script lang="ts" setup>
|
|
1481
|
+
* import { useOverflow } from '@vuetify/v0'
|
|
1482
|
+
*
|
|
1483
|
+
* // Inject overflow context provided by parent
|
|
1484
|
+
* const overflow = useOverflow()
|
|
1485
|
+
* </script>
|
|
1486
|
+
*
|
|
1487
|
+
* <template>
|
|
1488
|
+
* <div>
|
|
1489
|
+
* <p>Capacity: {{ overflow.capacity.value }}</p>
|
|
1490
|
+
* </div>
|
|
1491
|
+
* </template>
|
|
1492
|
+
* ```
|
|
1493
|
+
*/
|
|
1494
|
+
declare function useOverflow<E extends OverflowContext = OverflowContext>(namespace?: string): E;
|
|
1495
|
+
//#endregion
|
|
6
1496
|
//#region src/composables/createContext/index.d.ts
|
|
7
|
-
|
|
8
1497
|
type ContextKey<Z> = InjectionKey<Z> | string;
|
|
9
1498
|
interface CreateContextOptions {
|
|
10
1499
|
/** Optional suffix to append to the runtime key */
|
|
@@ -127,6 +1616,50 @@ interface Plugin {
|
|
|
127
1616
|
* })
|
|
128
1617
|
*/
|
|
129
1618
|
declare function createPlugin<Z extends Plugin = Plugin>(options: PluginOptions): Z;
|
|
1619
|
+
interface PluginContextConfig<O, E> {
|
|
1620
|
+
/**
|
|
1621
|
+
* Optional plugin setup callback, called once per Vue app after context provision.
|
|
1622
|
+
* Use for adapter initialization, Vue app mixins, global side effects, etc.
|
|
1623
|
+
* Receives the plugin options (minus namespace) so adapters and targets are accessible.
|
|
1624
|
+
*/
|
|
1625
|
+
setup?: (context: E, app: App, options: O) => void;
|
|
1626
|
+
/**
|
|
1627
|
+
* Optional fallback factory. When provided, the generated `useX` consumer uses the
|
|
1628
|
+
* defensive pattern: returns the fallback when called outside a component instance or
|
|
1629
|
+
* when the context is not found. Required for composables that may be consumed outside
|
|
1630
|
+
* component setup (e.g. useLogger, useLocale, useHydration).
|
|
1631
|
+
*
|
|
1632
|
+
* Receives the requested namespace so error messages can include it.
|
|
1633
|
+
*/
|
|
1634
|
+
fallback?: (namespace: string) => E;
|
|
1635
|
+
}
|
|
1636
|
+
/**
|
|
1637
|
+
* Creates the three standard functions for a plugin composable.
|
|
1638
|
+
*
|
|
1639
|
+
* @param defaultNamespace The default DI namespace string (e.g. `'v0:logger'`).
|
|
1640
|
+
* @param factory Function that creates the composable context instance from options.
|
|
1641
|
+
* @param config Optional setup callback and fallback factory.
|
|
1642
|
+
* @returns A readonly tuple: `[createXContext, createXPlugin, useX]`.
|
|
1643
|
+
*
|
|
1644
|
+
* @example
|
|
1645
|
+
* ```ts
|
|
1646
|
+
* // Simple — no setup or fallback
|
|
1647
|
+
* export const [createStorageContext, createStoragePlugin, useStorage] =
|
|
1648
|
+
* createPluginContext('v0:storage', options => createStorage(options))
|
|
1649
|
+
*
|
|
1650
|
+
* // With fallback — safe outside component instances
|
|
1651
|
+
* export const [createLoggerContext, createLoggerPlugin, useLogger] =
|
|
1652
|
+
* createPluginContext('v0:logger', options => createLogger(options), {
|
|
1653
|
+
* fallback: ns => createFallbackLogger(ns),
|
|
1654
|
+
* setup: (context) => {
|
|
1655
|
+
* if (__DEV__ && IN_BROWSER) (window as any).__v0Logger__ = context
|
|
1656
|
+
* },
|
|
1657
|
+
* })
|
|
1658
|
+
* ```
|
|
1659
|
+
*/
|
|
1660
|
+
declare function createPluginContext<O extends {
|
|
1661
|
+
namespace?: string;
|
|
1662
|
+
} = Record<never, never>, E = unknown>(defaultNamespace: string, factory: (options: Omit<O, 'namespace'>) => E, config?: PluginContextConfig<Omit<O, 'namespace'>, E>): readonly [<_E extends E = E>(_options?: O) => ContextTrinity<_E>, (_options?: O) => Plugin, <_E extends E = E>(namespace?: string) => _E];
|
|
130
1663
|
//#endregion
|
|
131
1664
|
//#region src/composables/toArray/index.d.ts
|
|
132
1665
|
/**
|
|
@@ -220,111 +1753,31 @@ interface BreakpointsContextOptions extends BreakpointsOptions {}
|
|
|
220
1753
|
* Creates a new breakpoints instance.
|
|
221
1754
|
*
|
|
222
1755
|
* @param options The options for the breakpoints instance.
|
|
223
|
-
* @template E The type of the breakpoints context.
|
|
224
|
-
* @returns A new breakpoints instance.
|
|
225
|
-
*
|
|
226
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
|
|
227
|
-
*
|
|
228
|
-
* @example
|
|
229
|
-
* ```ts
|
|
230
|
-
* import { createBreakpoints } from '@vuetify/v0'
|
|
231
|
-
*
|
|
232
|
-
* export const [useBreakpoints, provideBreakpoints] = createBreakpoints({
|
|
233
|
-
* namespace: 'v0:breakpoints',
|
|
234
|
-
* mobileBreakpoint: 'sm',
|
|
235
|
-
* breakpoints: {
|
|
236
|
-
* xs: 0,
|
|
237
|
-
* sm: 680,
|
|
238
|
-
* md: 1024,
|
|
239
|
-
* lg: 1280,
|
|
240
|
-
* xl: 1920,
|
|
241
|
-
* xxl: 2560,
|
|
242
|
-
* },
|
|
243
|
-
* })
|
|
244
|
-
* ```
|
|
245
|
-
*/
|
|
246
|
-
declare function createBreakpoints<E extends BreakpointsContext = BreakpointsContext>(_options?: BreakpointsOptions): E;
|
|
247
|
-
/**
|
|
248
|
-
* Creates a new breakpoints context.
|
|
249
|
-
*
|
|
250
|
-
* @param options The options for the breakpoints context.
|
|
251
|
-
* @template E The type of the breakpoints context.
|
|
252
|
-
* @returns A new breakpoints context.
|
|
253
|
-
*
|
|
254
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
|
|
255
|
-
*
|
|
256
|
-
* @example
|
|
257
|
-
* ```ts
|
|
258
|
-
* import { createBreakpointsContext } from '@vuetify/v0'
|
|
259
|
-
*
|
|
260
|
-
* export const [useBreakpoints, provideBreakpoints, context] = createBreakpointsContext({
|
|
261
|
-
* namespace: 'v0:breakpoints',
|
|
262
|
-
* mobileBreakpoint: 'sm',
|
|
263
|
-
* })
|
|
264
|
-
* ```
|
|
265
|
-
*/
|
|
266
|
-
declare function createBreakpointsContext<E extends BreakpointsContext = BreakpointsContext>(_options?: BreakpointsContextOptions): ContextTrinity<E>;
|
|
267
|
-
/**
|
|
268
|
-
* Creates a new breakpoints plugin.
|
|
269
|
-
*
|
|
270
|
-
* @param options The options for the breakpoints plugin.
|
|
271
|
-
* @template E The type of the breakpoints context.
|
|
272
|
-
* @returns A new breakpoints plugin.
|
|
273
|
-
*
|
|
274
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
|
|
275
|
-
*
|
|
276
|
-
* @example
|
|
277
|
-
* ```ts
|
|
278
|
-
* import { createApp } from 'vue'
|
|
279
|
-
* import { createBreakpointsPlugin } from '@vuetify/v0'
|
|
280
|
-
* import App from './App.vue'
|
|
281
|
-
*
|
|
282
|
-
* const app = createApp(App)
|
|
283
|
-
*
|
|
284
|
-
* app.use(
|
|
285
|
-
* createBreakpointsPlugin({
|
|
286
|
-
* namespace: 'v0:breakpoints',
|
|
287
|
-
* mobileBreakpoint: 'sm',
|
|
288
|
-
* breakpoints: {
|
|
289
|
-
* xs: 0,
|
|
290
|
-
* sm: 680,
|
|
291
|
-
* md: 1024,
|
|
292
|
-
* lg: 1280,
|
|
293
|
-
* xl: 1920,
|
|
294
|
-
* xxl: 2560,
|
|
295
|
-
* },
|
|
296
|
-
* })
|
|
297
|
-
* )
|
|
298
|
-
*
|
|
299
|
-
* app.mount('#app')
|
|
300
|
-
* ```
|
|
301
|
-
*/
|
|
302
|
-
declare function createBreakpointsPlugin<E extends BreakpointsContext = BreakpointsContext>(_options?: BreakpointsPluginOptions): Plugin;
|
|
303
|
-
/**
|
|
304
|
-
* Returns the current breakpoints instance.
|
|
305
|
-
*
|
|
306
|
-
* @param namespace The namespace for the breakpoints context. Defaults to `v0:breakpoints`.
|
|
307
|
-
* @returns The current breakpoints instance.
|
|
1756
|
+
* @template E The type of the breakpoints context.
|
|
1757
|
+
* @returns A new breakpoints instance.
|
|
308
1758
|
*
|
|
309
1759
|
* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
|
|
310
1760
|
*
|
|
311
1761
|
* @example
|
|
312
|
-
* ```
|
|
313
|
-
*
|
|
314
|
-
* import { useBreakpoints } from '@vuetify/v0'
|
|
315
|
-
*
|
|
316
|
-
* const { isMobile, mdAndUp } = useBreakpoints()
|
|
317
|
-
* </script>
|
|
1762
|
+
* ```ts
|
|
1763
|
+
* import { createBreakpoints } from '@vuetify/v0'
|
|
318
1764
|
*
|
|
319
|
-
*
|
|
320
|
-
*
|
|
321
|
-
*
|
|
322
|
-
*
|
|
323
|
-
*
|
|
324
|
-
*
|
|
1765
|
+
* export const [useBreakpoints, provideBreakpoints] = createBreakpoints({
|
|
1766
|
+
* namespace: 'v0:breakpoints',
|
|
1767
|
+
* mobileBreakpoint: 'md',
|
|
1768
|
+
* breakpoints: {
|
|
1769
|
+
* xs: 0,
|
|
1770
|
+
* sm: 600,
|
|
1771
|
+
* md: 840,
|
|
1772
|
+
* lg: 1145,
|
|
1773
|
+
* xl: 1545,
|
|
1774
|
+
* xxl: 2138,
|
|
1775
|
+
* },
|
|
1776
|
+
* })
|
|
325
1777
|
* ```
|
|
326
1778
|
*/
|
|
327
|
-
declare function
|
|
1779
|
+
declare function createBreakpoints<E extends BreakpointsContext = BreakpointsContext>(_options?: BreakpointsOptions): E;
|
|
1780
|
+
declare const createBreakpointsContext: <_E extends BreakpointsContext = BreakpointsContext>(_options?: BreakpointsContextOptions | undefined) => ContextTrinity<_E>, createBreakpointsPlugin: (_options?: BreakpointsContextOptions | undefined) => Plugin, useBreakpoints: <_E extends BreakpointsContext = BreakpointsContext>(namespace?: string) => _E;
|
|
328
1781
|
//#endregion
|
|
329
1782
|
//#region src/composables/useClickOutside/index.d.ts
|
|
330
1783
|
type ClickOutsideElement = HTMLElement | null | undefined;
|
|
@@ -827,34 +2280,6 @@ declare function createTokensContext<Z extends TokenTicket = TokenTicket, E exte
|
|
|
827
2280
|
*/
|
|
828
2281
|
declare function useTokens<Z extends TokenTicket = TokenTicket, E extends TokenContext<Z> = TokenContext<Z>>(namespace?: string): E;
|
|
829
2282
|
//#endregion
|
|
830
|
-
//#region src/composables/useFeatures/adapters/generic/index.d.ts
|
|
831
|
-
type FeaturesAdapterValue = boolean | {
|
|
832
|
-
$value?: boolean;
|
|
833
|
-
$variation?: unknown;
|
|
834
|
-
};
|
|
835
|
-
type FeaturesAdapterFlags = Record<ID, FeaturesAdapterValue>;
|
|
836
|
-
interface FeaturesAdapterInterface {
|
|
837
|
-
/**
|
|
838
|
-
* Initialize the adapter and return initial flags.
|
|
839
|
-
*
|
|
840
|
-
* @param onUpdate Callback invoked when flags change.
|
|
841
|
-
* @returns Initial feature flags.
|
|
842
|
-
*
|
|
843
|
-
* @remarks Called during plugin setup. Sets up change listeners
|
|
844
|
-
* and returns the initial flag values.
|
|
845
|
-
*/
|
|
846
|
-
setup: (onUpdate: (flags: FeaturesAdapterFlags) => void) => FeaturesAdapterFlags;
|
|
847
|
-
/**
|
|
848
|
-
* Cleanup adapter resources.
|
|
849
|
-
*
|
|
850
|
-
* @remarks Called when the plugin is disposed.
|
|
851
|
-
*/
|
|
852
|
-
dispose?: () => void;
|
|
853
|
-
}
|
|
854
|
-
declare abstract class FeaturesAdapter implements FeaturesAdapterInterface {
|
|
855
|
-
abstract setup(onUpdate: (flags: FeaturesAdapterFlags) => void): FeaturesAdapterFlags;
|
|
856
|
-
}
|
|
857
|
-
//#endregion
|
|
858
2283
|
//#region src/composables/useFeatures/index.d.ts
|
|
859
2284
|
/**
|
|
860
2285
|
* Input type for feature tickets - what users provide to register().
|
|
@@ -925,225 +2350,7 @@ interface FeaturePluginOptions extends FeatureContextOptions {
|
|
|
925
2350
|
* ```
|
|
926
2351
|
*/
|
|
927
2352
|
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;
|
|
1044
|
-
}
|
|
1045
|
-
/**
|
|
1046
|
-
* Creates a filter context with pre-configured options.
|
|
1047
|
-
*
|
|
1048
|
-
* @param options The filter options
|
|
1049
|
-
* @template Z The type of the items
|
|
1050
|
-
* @template E The type of the filter context
|
|
1051
|
-
* @returns A filter context
|
|
1052
|
-
*
|
|
1053
|
-
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1054
|
-
*
|
|
1055
|
-
* @example
|
|
1056
|
-
* ```ts
|
|
1057
|
-
* import { createFilter } from '@vuetify/v0'
|
|
1058
|
-
*
|
|
1059
|
-
* const filter = createFilter({
|
|
1060
|
-
* mode: 'intersection',
|
|
1061
|
-
* keys: ['name', 'email'],
|
|
1062
|
-
* })
|
|
1063
|
-
*
|
|
1064
|
-
* const { items } = filter.apply(query, users)
|
|
1065
|
-
* ```
|
|
1066
|
-
*/
|
|
1067
|
-
declare function createFilter<Z extends FilterItem = FilterItem, E extends FilterContext<Z> = FilterContext<Z>>(options?: FilterOptions): E;
|
|
1068
|
-
/**
|
|
1069
|
-
* Creates a filter context with dependency injection support.
|
|
1070
|
-
*
|
|
1071
|
-
* @param options The filter context options
|
|
1072
|
-
* @template Z The type of the items
|
|
1073
|
-
* @template E The type of the filter context
|
|
1074
|
-
* @returns A trinity tuple: [useContext, provideContext, defaultContext]
|
|
1075
|
-
*
|
|
1076
|
-
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1077
|
-
*
|
|
1078
|
-
* @example
|
|
1079
|
-
* ```ts
|
|
1080
|
-
* import { createFilterContext } from '@vuetify/v0'
|
|
1081
|
-
*
|
|
1082
|
-
* export const [useSearchFilter, provideSearchFilter, searchFilter] = createFilterContext({
|
|
1083
|
-
* namespace: 'app:search',
|
|
1084
|
-
* mode: 'union',
|
|
1085
|
-
* keys: ['title', 'description'],
|
|
1086
|
-
* })
|
|
1087
|
-
*
|
|
1088
|
-
* // In parent component
|
|
1089
|
-
* provideSearchFilter()
|
|
1090
|
-
*
|
|
1091
|
-
* // In child component
|
|
1092
|
-
* const filter = useSearchFilter()
|
|
1093
|
-
* const { items } = filter.apply(query, products)
|
|
1094
|
-
* ```
|
|
1095
|
-
*/
|
|
1096
|
-
declare function createFilterContext<Z extends FilterItem = FilterItem, E extends FilterContext<Z> = FilterContext<Z>>(_options?: FilterContextOptions): ContextTrinity<E>;
|
|
1097
|
-
/**
|
|
1098
|
-
* A reusable function for filtering an array of items.
|
|
1099
|
-
*
|
|
1100
|
-
* @param query The query to filter by.
|
|
1101
|
-
* @param items The items to filter.
|
|
1102
|
-
* @param options The filter options.
|
|
1103
|
-
* @template Z The type of the items.
|
|
1104
|
-
* @returns The filtered items.
|
|
1105
|
-
*
|
|
1106
|
-
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1107
|
-
*
|
|
1108
|
-
* @example
|
|
1109
|
-
* ```ts
|
|
1110
|
-
* import { ref } from 'vue'
|
|
1111
|
-
* import { useFilter } from '@vuetify/v0'
|
|
1112
|
-
*
|
|
1113
|
-
* const items = ref([
|
|
1114
|
-
* { name: 'John Doe', age: 30 },
|
|
1115
|
-
* { name: 'Jane Doe', age: 25 },
|
|
1116
|
-
* { name: 'Peter Jones', age: 40 },
|
|
1117
|
-
* ])
|
|
1118
|
-
*
|
|
1119
|
-
* const query = ref('doe')
|
|
1120
|
-
* const { items: filtered } = useFilter(query, items, { keys: ['name'] })
|
|
1121
|
-
*
|
|
1122
|
-
* console.log(filtered.value) // [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 } ]
|
|
1123
|
-
* ```
|
|
1124
|
-
*/
|
|
1125
|
-
declare function useFilter<Z extends FilterItem>(query: FilterQuery, items: MaybeRef<Z[]>, options?: FilterOptions): FilterResult<Z>;
|
|
1126
|
-
/**
|
|
1127
|
-
* Returns the current filter context from dependency injection.
|
|
1128
|
-
*
|
|
1129
|
-
* @param namespace The namespace for the filter context. Defaults to `'v0:filter'`.
|
|
1130
|
-
* @template Z The type of the items.
|
|
1131
|
-
* @template E The type of the filter context.
|
|
1132
|
-
* @returns The current filter context.
|
|
1133
|
-
*
|
|
1134
|
-
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
1135
|
-
*
|
|
1136
|
-
* @example
|
|
1137
|
-
* ```vue
|
|
1138
|
-
* <script setup lang="ts">
|
|
1139
|
-
* import { useFilterContext } from '@vuetify/v0'
|
|
1140
|
-
*
|
|
1141
|
-
* const filter = useFilterContext()
|
|
1142
|
-
* const { items } = filter.apply(query, products)
|
|
1143
|
-
* </script>
|
|
1144
|
-
* ```
|
|
1145
|
-
*/
|
|
1146
|
-
declare function useFilterContext<Z extends FilterItem = FilterItem, E extends FilterContext<Z> = FilterContext<Z>>(namespace?: string): E;
|
|
2353
|
+
declare const createFeaturesContext: <_E extends FeatureContext<FeatureTicketInput, FeatureTicket<FeatureTicketInput>> = FeatureContext<FeatureTicketInput, FeatureTicket<FeatureTicketInput>>>(_options?: FeaturePluginOptions | undefined) => ContextTrinity<_E>, createFeaturesPlugin: (_options?: FeaturePluginOptions | undefined) => Plugin, useFeatures: <_E extends FeatureContext<FeatureTicketInput, FeatureTicket<FeatureTicketInput>> = FeatureContext<FeatureTicketInput, FeatureTicket<FeatureTicketInput>>>(namespace?: string) => _E;
|
|
1147
2354
|
//#endregion
|
|
1148
2355
|
//#region src/composables/createForm/index.d.ts
|
|
1149
2356
|
type FormValidationResult = string | true | Promise<string | true>;
|
|
@@ -1155,7 +2362,7 @@ type FormValue = Ref<unknown> | ShallowRef<unknown>;
|
|
|
1155
2362
|
*
|
|
1156
2363
|
* @template V The type of the field value.
|
|
1157
2364
|
*/
|
|
1158
|
-
interface FormTicketInput<V = unknown> extends
|
|
2365
|
+
interface FormTicketInput<V = unknown> extends RegistryTicketInput<V> {
|
|
1159
2366
|
/** Validation rules for this field */
|
|
1160
2367
|
rules?: FormValidationRule[];
|
|
1161
2368
|
/** When validation should trigger (inherits from form if not set) */
|
|
@@ -1169,7 +2376,7 @@ interface FormTicketInput<V = unknown> extends RegistryTicket<V> {
|
|
|
1169
2376
|
*
|
|
1170
2377
|
* @template Z The input ticket type that extends FormTicketInput.
|
|
1171
2378
|
*/
|
|
1172
|
-
type FormTicket<Z extends FormTicketInput = FormTicketInput> = Z & {
|
|
2379
|
+
type FormTicket<Z extends FormTicketInput = FormTicketInput> = RegistryTicket & Z & {
|
|
1173
2380
|
validate: (silent?: boolean) => Promise<boolean>;
|
|
1174
2381
|
reset: () => void;
|
|
1175
2382
|
validateOn: 'submit' | 'change' | string;
|
|
@@ -1432,57 +2639,31 @@ declare function createFallbackHydration<E extends HydrationContext = HydrationC
|
|
|
1432
2639
|
* })
|
|
1433
2640
|
* ```
|
|
1434
2641
|
*/
|
|
1435
|
-
declare
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
* Returns the current hydration instance.
|
|
1461
|
-
*
|
|
1462
|
-
* @param namespace The namespace for the hydration context. Defaults to `v0:hydration`.
|
|
1463
|
-
* @returns The current hydration instance.
|
|
1464
|
-
*
|
|
1465
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
|
|
1466
|
-
*
|
|
1467
|
-
* @example
|
|
1468
|
-
* ```vue
|
|
1469
|
-
* <script setup lang="ts">
|
|
1470
|
-
* import { useHydration } from '@vuetify/v0'
|
|
1471
|
-
*
|
|
1472
|
-
* const { isHydrated, isSettled } = useHydration()
|
|
1473
|
-
*
|
|
1474
|
-
* // Use isSettled to gate animations after state restoration
|
|
1475
|
-
* const transition = computed(() => isSettled.value ? 'fade' : undefined)
|
|
1476
|
-
* </script>
|
|
1477
|
-
*
|
|
1478
|
-
* <template>
|
|
1479
|
-
* <Transition :name="transition">
|
|
1480
|
-
* <div v-if="show">Animates only after hydration settles</div>
|
|
1481
|
-
* </Transition>
|
|
1482
|
-
* </template>
|
|
1483
|
-
* ```
|
|
1484
|
-
*/
|
|
1485
|
-
declare function useHydration<E extends HydrationContext = HydrationContext>(namespace?: string): E;
|
|
2642
|
+
declare const createHydrationContext: <_E extends HydrationContext = HydrationContext>(_options?: HydrationContextOptions | undefined) => ContextTrinity<_E>, createHydrationPlugin: (_options?: HydrationContextOptions | undefined) => Plugin, useHydration: <_E extends HydrationContext = HydrationContext>(namespace?: string) => _E;
|
|
2643
|
+
//#endregion
|
|
2644
|
+
//#region src/composables/createObserver/index.d.ts
|
|
2645
|
+
interface ObserverReturn {
|
|
2646
|
+
/**
|
|
2647
|
+
* Whether the observer is currently active (created and observing)
|
|
2648
|
+
*/
|
|
2649
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
2650
|
+
/**
|
|
2651
|
+
* Whether the observer is currently paused
|
|
2652
|
+
*/
|
|
2653
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
2654
|
+
/**
|
|
2655
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
2656
|
+
*/
|
|
2657
|
+
pause: () => void;
|
|
2658
|
+
/**
|
|
2659
|
+
* Resume observation
|
|
2660
|
+
*/
|
|
2661
|
+
resume: () => void;
|
|
2662
|
+
/**
|
|
2663
|
+
* Stop observation and clean up (destroys observer)
|
|
2664
|
+
*/
|
|
2665
|
+
stop: () => void;
|
|
2666
|
+
}
|
|
1486
2667
|
//#endregion
|
|
1487
2668
|
//#region src/composables/useIntersectionObserver/index.d.ts
|
|
1488
2669
|
interface IntersectionObserverEntry {
|
|
@@ -1501,31 +2682,11 @@ interface IntersectionObserverOptions {
|
|
|
1501
2682
|
rootMargin?: string;
|
|
1502
2683
|
threshold?: number | number[];
|
|
1503
2684
|
}
|
|
1504
|
-
interface UseIntersectionObserverReturn {
|
|
1505
|
-
/**
|
|
1506
|
-
* Whether the observer is currently active (created and observing)
|
|
1507
|
-
*/
|
|
1508
|
-
readonly isActive: Readonly<Ref<boolean>>;
|
|
2685
|
+
interface UseIntersectionObserverReturn extends ObserverReturn {
|
|
1509
2686
|
/**
|
|
1510
2687
|
* Whether the target element is currently intersecting with the viewport
|
|
1511
2688
|
*/
|
|
1512
2689
|
readonly isIntersecting: Readonly<Ref<boolean>>;
|
|
1513
|
-
/**
|
|
1514
|
-
* Whether the observer is currently paused
|
|
1515
|
-
*/
|
|
1516
|
-
readonly isPaused: Readonly<Ref<boolean>>;
|
|
1517
|
-
/**
|
|
1518
|
-
* Pause observation (disconnects observer but keeps it alive)
|
|
1519
|
-
*/
|
|
1520
|
-
pause: () => void;
|
|
1521
|
-
/**
|
|
1522
|
-
* Resume observation
|
|
1523
|
-
*/
|
|
1524
|
-
resume: () => void;
|
|
1525
|
-
/**
|
|
1526
|
-
* Stop observation and clean up (destroys observer)
|
|
1527
|
-
*/
|
|
1528
|
-
stop: () => void;
|
|
1529
2690
|
}
|
|
1530
2691
|
/**
|
|
1531
2692
|
* A composable that uses the Intersection Observer API to detect when an element
|
|
@@ -1675,25 +2836,6 @@ interface LazyContext {
|
|
|
1675
2836
|
*/
|
|
1676
2837
|
declare function useLazy(active: MaybeRefOrGetter<boolean>, options?: LazyOptions): LazyContext;
|
|
1677
2838
|
//#endregion
|
|
1678
|
-
//#region src/composables/useLocale/adapters/adapter.d.ts
|
|
1679
|
-
interface LocaleAdapter {
|
|
1680
|
-
t: (message: string, ...params: unknown[]) => string;
|
|
1681
|
-
n: (value: number, locale: ID | undefined, ...params: unknown[]) => string;
|
|
1682
|
-
}
|
|
1683
|
-
//#endregion
|
|
1684
|
-
//#region src/composables/useLocale/adapters/v0.d.ts
|
|
1685
|
-
/**
|
|
1686
|
-
* Vuetify0.x locale adapter implementation
|
|
1687
|
-
*
|
|
1688
|
-
* This adapter provides translation and number formatting
|
|
1689
|
-
* capabilities using the Intl API and supports both
|
|
1690
|
-
* numbered ({0}, {1}) and named ({name}) variables in translation strings.
|
|
1691
|
-
*/
|
|
1692
|
-
declare class Vuetify0LocaleAdapter implements LocaleAdapter {
|
|
1693
|
-
t(message: string, ...params: unknown[]): string;
|
|
1694
|
-
n(value: number, locale: ID | undefined, ...params: unknown[]): string;
|
|
1695
|
-
}
|
|
1696
|
-
//#endregion
|
|
1697
2839
|
//#region src/composables/useLocale/index.d.ts
|
|
1698
2840
|
type LocaleRecord = TokenCollection;
|
|
1699
2841
|
/**
|
|
@@ -1745,138 +2887,16 @@ interface LocalePluginOptions extends LocaleContextOptions {}
|
|
|
1745
2887
|
/**
|
|
1746
2888
|
* Creates a new locale instance.
|
|
1747
2889
|
*
|
|
1748
|
-
* @param options The options for the locale instance.
|
|
1749
|
-
* @template Z The type of the locale ticket.
|
|
1750
|
-
* @template E The type of the locale context.
|
|
1751
|
-
* @returns A new locale instance.
|
|
1752
|
-
*
|
|
1753
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-locale
|
|
1754
|
-
*/
|
|
1755
|
-
declare function createLocale<Z extends LocaleTicketInput = LocaleTicketInput, E extends LocaleTicket<Z> = LocaleTicket<Z>, R extends LocaleContext<Z, E> = LocaleContext<Z, E>>(_options?: LocaleOptions): R;
|
|
1756
|
-
declare function createLocaleFallback<Z extends LocaleTicketInput = LocaleTicketInput, E extends LocaleTicket<Z> = LocaleTicket<Z>, R extends LocaleContext<Z, E> = LocaleContext<Z, E>>(): R;
|
|
1757
|
-
/**
|
|
1758
|
-
* Creates a new locale context.
|
|
1759
|
-
*
|
|
1760
|
-
* @param options The options for the locale context.
|
|
1761
|
-
* @template Z The type of the locale ticket.
|
|
1762
|
-
* @template E The type of the locale context.
|
|
1763
|
-
* @returns A new locale context.
|
|
1764
|
-
*
|
|
1765
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-locale
|
|
1766
|
-
*
|
|
1767
|
-
* @example
|
|
1768
|
-
* ```ts
|
|
1769
|
-
* import { createLocaleContext } from '@vuetify/v0'
|
|
1770
|
-
*
|
|
1771
|
-
* export const [useAppLocale, provideAppLocale, appLocale] = createLocaleContext({
|
|
1772
|
-
* namespace: 'app:locale',
|
|
1773
|
-
* messages: {
|
|
1774
|
-
* en: { hello: 'Hello' },
|
|
1775
|
-
* es: { hello: 'Hola' },
|
|
1776
|
-
* },
|
|
1777
|
-
* })
|
|
1778
|
-
*
|
|
1779
|
-
* // In a parent component:
|
|
1780
|
-
* provideAppLocale()
|
|
1781
|
-
*
|
|
1782
|
-
* // In a child component:
|
|
1783
|
-
* const locale = useAppLocale()
|
|
1784
|
-
* locale.select('es')
|
|
1785
|
-
* ```
|
|
1786
|
-
*/
|
|
1787
|
-
declare function createLocaleContext<Z extends LocaleTicketInput = LocaleTicketInput, E extends LocaleTicket<Z> = LocaleTicket<Z>, R extends LocaleContext<Z, E> = LocaleContext<Z, E>>(_options?: LocaleContextOptions): ContextTrinity<R>;
|
|
1788
|
-
/**
|
|
1789
|
-
* Creates a new locale plugin.
|
|
1790
|
-
*
|
|
1791
|
-
* @param options The options for the locale plugin.
|
|
1792
|
-
* @template Z The type of the locale ticket.
|
|
1793
|
-
* @template E The type of the locale context.
|
|
1794
|
-
* @template R The type of the token ticket.
|
|
1795
|
-
* @template O The type of the token context.
|
|
1796
|
-
* @returns A new locale plugin.
|
|
1797
|
-
*
|
|
1798
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-locale
|
|
1799
|
-
*/
|
|
1800
|
-
declare function createLocalePlugin<Z extends LocaleTicketInput = LocaleTicketInput, E extends LocaleTicket<Z> = LocaleTicket<Z>, R extends LocaleContext<Z, E> = LocaleContext<Z, E>>(_options?: LocalePluginOptions): Plugin;
|
|
1801
|
-
/**
|
|
1802
|
-
* Returns the current locale instance.
|
|
1803
|
-
*
|
|
1804
|
-
* @returns The current locale instance.
|
|
2890
|
+
* @param options The options for the locale instance.
|
|
2891
|
+
* @template Z The type of the locale ticket.
|
|
2892
|
+
* @template E The type of the locale context.
|
|
2893
|
+
* @returns A new locale instance.
|
|
1805
2894
|
*
|
|
1806
2895
|
* @see https://0.vuetifyjs.com/composables/plugins/use-locale
|
|
1807
2896
|
*/
|
|
1808
|
-
declare function
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
interface LoggerAdapter {
|
|
1812
|
-
debug: (message: string, ...args: unknown[]) => void;
|
|
1813
|
-
info: (message: string, ...args: unknown[]) => void;
|
|
1814
|
-
warn: (message: string, ...args: unknown[]) => void;
|
|
1815
|
-
error: (message: string, ...args: unknown[]) => void;
|
|
1816
|
-
trace?: (message: string, ...args: unknown[]) => void;
|
|
1817
|
-
fatal?: (message: string, ...args: unknown[]) => void;
|
|
1818
|
-
}
|
|
1819
|
-
//#endregion
|
|
1820
|
-
//#region src/composables/useLogger/adapters/consola.d.ts
|
|
1821
|
-
declare class ConsolaLoggerAdapter implements LoggerAdapter {
|
|
1822
|
-
private consola;
|
|
1823
|
-
constructor(consolaInstance: any);
|
|
1824
|
-
debug(message: string, ...args: unknown[]): void;
|
|
1825
|
-
info(message: string, ...args: unknown[]): void;
|
|
1826
|
-
warn(message: string, ...args: unknown[]): void;
|
|
1827
|
-
error(message: string, ...args: unknown[]): void;
|
|
1828
|
-
trace(message: string, ...args: unknown[]): void;
|
|
1829
|
-
fatal(message: string, ...args: unknown[]): void;
|
|
1830
|
-
}
|
|
1831
|
-
//#endregion
|
|
1832
|
-
//#region src/composables/useLogger/adapters/pino.d.ts
|
|
1833
|
-
/**
|
|
1834
|
-
* Pino logger adapter implementation
|
|
1835
|
-
*
|
|
1836
|
-
* This adapter integrates with the Pino logging library,
|
|
1837
|
-
* providing high-performance structured logging optimized
|
|
1838
|
-
* for Node.js applications with minimal overhead.
|
|
1839
|
-
*/
|
|
1840
|
-
declare class PinoLoggerAdapter implements LoggerAdapter {
|
|
1841
|
-
private pino;
|
|
1842
|
-
constructor(pinoInstance: any);
|
|
1843
|
-
debug(message: string, ...args: unknown[]): void;
|
|
1844
|
-
info(message: string, ...args: unknown[]): void;
|
|
1845
|
-
warn(message: string, ...args: unknown[]): void;
|
|
1846
|
-
error(message: string, ...args: unknown[]): void;
|
|
1847
|
-
trace(message: string, ...args: unknown[]): void;
|
|
1848
|
-
fatal(message: string, ...args: unknown[]): void;
|
|
1849
|
-
private format;
|
|
1850
|
-
}
|
|
1851
|
-
//#endregion
|
|
1852
|
-
//#region src/composables/useLogger/adapters/v0.d.ts
|
|
1853
|
-
/**
|
|
1854
|
-
* Vuetify0.x logger adapter implementation
|
|
1855
|
-
*
|
|
1856
|
-
* This adapter provides console-based logging with proper formatting,
|
|
1857
|
-
* color coding, timestamps, and log level filtering for development
|
|
1858
|
-
* and production environments.
|
|
1859
|
-
*/
|
|
1860
|
-
declare class Vuetify0LoggerAdapter implements LoggerAdapter {
|
|
1861
|
-
private prefix;
|
|
1862
|
-
private colors;
|
|
1863
|
-
private timestamps;
|
|
1864
|
-
constructor(options?: {
|
|
1865
|
-
prefix?: string;
|
|
1866
|
-
colors?: boolean;
|
|
1867
|
-
timestamps?: boolean;
|
|
1868
|
-
});
|
|
1869
|
-
debug(message: string, ...args: unknown[]): void;
|
|
1870
|
-
info(message: string, ...args: unknown[]): void;
|
|
1871
|
-
warn(message: string, ...args: unknown[]): void;
|
|
1872
|
-
error(message: string, ...args: unknown[]): void;
|
|
1873
|
-
trace(message: string, ...args: unknown[]): void;
|
|
1874
|
-
fatal(message: string, ...args: unknown[]): void;
|
|
1875
|
-
private format;
|
|
1876
|
-
private timestamp;
|
|
1877
|
-
private style;
|
|
1878
|
-
private log;
|
|
1879
|
-
}
|
|
2897
|
+
declare function createLocale<Z extends LocaleTicketInput = LocaleTicketInput, E extends LocaleTicket<Z> = LocaleTicket<Z>, R extends LocaleContext<Z, E> = LocaleContext<Z, E>>(_options?: LocaleOptions): R;
|
|
2898
|
+
declare function createLocaleFallback<Z extends LocaleTicketInput = LocaleTicketInput, E extends LocaleTicket<Z> = LocaleTicket<Z>, R extends LocaleContext<Z, E> = LocaleContext<Z, E>>(): R;
|
|
2899
|
+
declare const createLocaleContext: <_E extends LocaleContext<LocaleTicketInput, LocaleTicket<LocaleTicketInput>> = LocaleContext<LocaleTicketInput, LocaleTicket<LocaleTicketInput>>>(_options?: LocaleContextOptions | undefined) => ContextTrinity<_E>, createLocalePlugin: (_options?: LocaleContextOptions | undefined) => Plugin, useLocale: <_E extends LocaleContext<LocaleTicketInput, LocaleTicket<LocaleTicketInput>> = LocaleContext<LocaleTicketInput, LocaleTicket<LocaleTicketInput>>>(namespace?: string) => _E;
|
|
1880
2900
|
//#endregion
|
|
1881
2901
|
//#region src/composables/useLogger/types.d.ts
|
|
1882
2902
|
type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal' | 'silent';
|
|
@@ -1949,56 +2969,7 @@ declare function createLogger<E extends LoggerContext = LoggerContext>(options?:
|
|
|
1949
2969
|
* })
|
|
1950
2970
|
* ```
|
|
1951
2971
|
*/
|
|
1952
|
-
declare
|
|
1953
|
-
/**
|
|
1954
|
-
* Creates a new logger plugin.
|
|
1955
|
-
*
|
|
1956
|
-
* @param options The options for the logger plugin.
|
|
1957
|
-
* @returns A new logger plugin.
|
|
1958
|
-
*
|
|
1959
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-logger
|
|
1960
|
-
*
|
|
1961
|
-
* @example
|
|
1962
|
-
* ```ts
|
|
1963
|
-
* import { createApp } from 'vue'
|
|
1964
|
-
* import { createLoggerPlugin } from '@vuetify/v0'
|
|
1965
|
-
* import App from './App.vue'
|
|
1966
|
-
*
|
|
1967
|
-
* const app = createApp(App)
|
|
1968
|
-
*
|
|
1969
|
-
* app.use(
|
|
1970
|
-
* createLoggerPlugin({
|
|
1971
|
-
* level: 'debug',
|
|
1972
|
-
* prefix: '[MyApp]',
|
|
1973
|
-
* })
|
|
1974
|
-
* )
|
|
1975
|
-
*
|
|
1976
|
-
* app.mount('#app')
|
|
1977
|
-
* ```
|
|
1978
|
-
*/
|
|
1979
|
-
declare function createLoggerPlugin<E extends LoggerContext = LoggerContext>(_options?: LoggerPluginOptions): Plugin;
|
|
1980
|
-
/**
|
|
1981
|
-
* Uses an existing or creates a new logger instance.
|
|
1982
|
-
*
|
|
1983
|
-
* @param namespace The namespace for the logger context. Defaults to `'v0:logger'`.
|
|
1984
|
-
* @returns The logger instance.
|
|
1985
|
-
*
|
|
1986
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-logger
|
|
1987
|
-
*
|
|
1988
|
-
* @example
|
|
1989
|
-
* ```ts
|
|
1990
|
-
* import { useLogger } from '@vuetify/v0'
|
|
1991
|
-
*
|
|
1992
|
-
* const logger = useLogger()
|
|
1993
|
-
*
|
|
1994
|
-
* logger.info('This is an info message')
|
|
1995
|
-
* logger.debug('This is a debug message')
|
|
1996
|
-
* logger.error('This is an error message')
|
|
1997
|
-
* logger.level('debug')
|
|
1998
|
-
* logger.debug('This debug message will now be logged')
|
|
1999
|
-
* ```
|
|
2000
|
-
*/
|
|
2001
|
-
declare function useLogger<E extends LoggerContext = LoggerContext>(namespace?: string): E;
|
|
2972
|
+
declare const createLoggerContext: <_E extends LoggerContext = LoggerContext>(_options?: LoggerContextOptions | undefined) => ContextTrinity<_E>, createLoggerPlugin: (_options?: LoggerContextOptions | undefined) => Plugin, useLogger: <_E extends LoggerContext = LoggerContext>(namespace?: string) => _E;
|
|
2002
2973
|
//#endregion
|
|
2003
2974
|
//#region src/composables/useMediaQuery/index.d.ts
|
|
2004
2975
|
interface MediaQueryContext {
|
|
@@ -2069,11 +3040,17 @@ declare function usePrefersReducedMotion(): MediaQueryContext;
|
|
|
2069
3040
|
declare function usePrefersContrast(): MediaQueryContext;
|
|
2070
3041
|
//#endregion
|
|
2071
3042
|
//#region src/composables/useMutationObserver/index.d.ts
|
|
3043
|
+
interface ObservableNodeList {
|
|
3044
|
+
readonly length: number;
|
|
3045
|
+
item: (index: number) => Node | null;
|
|
3046
|
+
forEach: (callback: (node: Node, index: number, list: ObservableNodeList) => void) => void;
|
|
3047
|
+
[Symbol.iterator]: () => Iterator<Node>;
|
|
3048
|
+
}
|
|
2072
3049
|
interface MutationObserverRecord {
|
|
2073
3050
|
type: 'attributes' | 'childList' | 'characterData';
|
|
2074
3051
|
target: Node;
|
|
2075
|
-
addedNodes:
|
|
2076
|
-
removedNodes:
|
|
3052
|
+
addedNodes: ObservableNodeList;
|
|
3053
|
+
removedNodes: ObservableNodeList;
|
|
2077
3054
|
previousSibling: Node | null;
|
|
2078
3055
|
nextSibling: Node | null;
|
|
2079
3056
|
attributeName: string | null;
|
|
@@ -2091,28 +3068,7 @@ interface UseMutationObserverOptions {
|
|
|
2091
3068
|
characterDataOldValue?: boolean;
|
|
2092
3069
|
attributeFilter?: string[];
|
|
2093
3070
|
}
|
|
2094
|
-
interface UseMutationObserverReturn {
|
|
2095
|
-
/**
|
|
2096
|
-
* Whether the observer is currently active (created and observing)
|
|
2097
|
-
*/
|
|
2098
|
-
readonly isActive: Readonly<Ref<boolean>>;
|
|
2099
|
-
/**
|
|
2100
|
-
* Whether the observer is currently paused
|
|
2101
|
-
*/
|
|
2102
|
-
readonly isPaused: Readonly<Ref<boolean>>;
|
|
2103
|
-
/**
|
|
2104
|
-
* Pause observation (disconnects observer but keeps it alive)
|
|
2105
|
-
*/
|
|
2106
|
-
pause: () => void;
|
|
2107
|
-
/**
|
|
2108
|
-
* Resume observation
|
|
2109
|
-
*/
|
|
2110
|
-
resume: () => void;
|
|
2111
|
-
/**
|
|
2112
|
-
* Stop observation and clean up (destroys observer)
|
|
2113
|
-
*/
|
|
2114
|
-
stop: () => void;
|
|
2115
|
-
}
|
|
3071
|
+
interface UseMutationObserverReturn extends ObserverReturn {}
|
|
2116
3072
|
/**
|
|
2117
3073
|
* A composable that uses the Mutation Observer API to detect changes in the DOM.
|
|
2118
3074
|
*
|
|
@@ -2168,6 +3124,8 @@ declare function useMutationObserver(target: MaybeRef<Element | null | undefined
|
|
|
2168
3124
|
interface NestedTicketInput<V = unknown> extends GroupTicketInput<V> {
|
|
2169
3125
|
/** ID of the parent ticket, or undefined if this is a root item */
|
|
2170
3126
|
parentId?: ID;
|
|
3127
|
+
/** Whether this ticket is initially active */
|
|
3128
|
+
active?: boolean;
|
|
2171
3129
|
}
|
|
2172
3130
|
/**
|
|
2173
3131
|
* Output type for nested tickets - what users receive from get().
|
|
@@ -2180,6 +3138,8 @@ type NestedTicket<Z extends NestedTicketInput = NestedTicketInput> = GroupTicket
|
|
|
2180
3138
|
parentId: ID | undefined;
|
|
2181
3139
|
/** Whether this ticket is currently open/expanded */
|
|
2182
3140
|
isOpen: Readonly<Ref<boolean>>;
|
|
3141
|
+
/** Whether this ticket is currently active/highlighted */
|
|
3142
|
+
isActive: Readonly<Ref<boolean>>;
|
|
2183
3143
|
/** Whether this ticket is a leaf node (has no children) */
|
|
2184
3144
|
isLeaf: Readonly<Ref<boolean>>;
|
|
2185
3145
|
/** Depth in tree (0 = root) */
|
|
@@ -2192,6 +3152,10 @@ type NestedTicket<Z extends NestedTicketInput = NestedTicketInput> = GroupTicket
|
|
|
2192
3152
|
flip: () => void;
|
|
2193
3153
|
/** Reveal this ticket by opening all ancestors */
|
|
2194
3154
|
reveal: () => void;
|
|
3155
|
+
/** Activate/highlight this ticket */
|
|
3156
|
+
activate: () => void;
|
|
3157
|
+
/** Deactivate/unhighlight this ticket */
|
|
3158
|
+
deactivate: () => void;
|
|
2195
3159
|
/** Get path from root to self (includes self) */
|
|
2196
3160
|
getPath: () => ID[];
|
|
2197
3161
|
/** Get ancestors excluding self */
|
|
@@ -2264,6 +3228,20 @@ interface NestedContext<Z extends NestedTicketInput = NestedTicketInput, E exten
|
|
|
2264
3228
|
readonly openedIds: Reactive<Set<ID>>;
|
|
2265
3229
|
/** Computed Set of opened/expanded item instances */
|
|
2266
3230
|
openedItems: ComputedRef<Set<E>>;
|
|
3231
|
+
/** Reactive Set of active/highlighted item IDs. Use activate/deactivate to modify. */
|
|
3232
|
+
readonly activeIds: Reactive<Set<ID>>;
|
|
3233
|
+
/** Computed Set of active/highlighted item instances */
|
|
3234
|
+
activeItems: ComputedRef<Set<E>>;
|
|
3235
|
+
/** Computed Set of active item indexes (position-based) */
|
|
3236
|
+
activeIndexes: ComputedRef<Set<number>>;
|
|
3237
|
+
/** Activate/highlight one or more items by ID */
|
|
3238
|
+
activate: (ids: ID | ID[]) => void;
|
|
3239
|
+
/** Deactivate/unhighlight one or more items by ID */
|
|
3240
|
+
deactivate: (ids: ID | ID[]) => void;
|
|
3241
|
+
/** Check if an item is active by ID */
|
|
3242
|
+
activated: (id: ID) => boolean;
|
|
3243
|
+
/** Deactivate all items */
|
|
3244
|
+
deactivateAll: () => void;
|
|
2267
3245
|
/** Open/expand one or more items by ID */
|
|
2268
3246
|
open: (ids: ID | ID[]) => void;
|
|
2269
3247
|
/** Close/collapse one or more items by ID */
|
|
@@ -2345,6 +3323,12 @@ type NestedSelectionMode = 'cascade' | 'independent' | 'leaf';
|
|
|
2345
3323
|
/**
|
|
2346
3324
|
* Options for creating a nested instance.
|
|
2347
3325
|
*/
|
|
3326
|
+
/**
|
|
3327
|
+
* Active mode for nested items.
|
|
3328
|
+
* - `'single'` (default): Only one item can be active at a time
|
|
3329
|
+
* - `'multiple'`: Multiple items can be active simultaneously
|
|
3330
|
+
*/
|
|
3331
|
+
type NestedActiveMode = 'single' | 'multiple';
|
|
2348
3332
|
interface NestedOptions extends GroupOptions {
|
|
2349
3333
|
/**
|
|
2350
3334
|
* Controls how nodes expand/collapse.
|
|
@@ -2369,6 +3353,12 @@ interface NestedOptions extends GroupOptions {
|
|
|
2369
3353
|
* - `'leaf'`: Only leaf nodes selectable; parent selection selects leaf descendants
|
|
2370
3354
|
*/
|
|
2371
3355
|
selection?: NestedSelectionMode;
|
|
3356
|
+
/**
|
|
3357
|
+
* Controls how many items can be active/highlighted simultaneously.
|
|
3358
|
+
* - `'single'` (default): Only one item active at a time
|
|
3359
|
+
* - `'multiple'`: Multiple items can be active simultaneously
|
|
3360
|
+
*/
|
|
3361
|
+
active?: NestedActiveMode;
|
|
2372
3362
|
/**
|
|
2373
3363
|
* Advanced: Custom strategy for open behavior.
|
|
2374
3364
|
* Overrides `open` option if provided.
|
|
@@ -2403,6 +3393,12 @@ interface NestedContextOptions extends GroupContextOptions {
|
|
|
2403
3393
|
* - `'leaf'`: Only leaf nodes selectable; parent selection selects leaf descendants
|
|
2404
3394
|
*/
|
|
2405
3395
|
selection?: NestedSelectionMode;
|
|
3396
|
+
/**
|
|
3397
|
+
* Controls how many items can be active/highlighted simultaneously.
|
|
3398
|
+
* - `'single'` (default): Only one item active at a time
|
|
3399
|
+
* - `'multiple'`: Multiple items can be active simultaneously
|
|
3400
|
+
*/
|
|
3401
|
+
active?: NestedActiveMode;
|
|
2406
3402
|
/**
|
|
2407
3403
|
* Advanced: Custom strategy for open behavior.
|
|
2408
3404
|
* Overrides `open` option if provided.
|
|
@@ -2515,146 +3511,6 @@ declare function createNestedContext<Z extends NestedTicketInput = NestedTicketI
|
|
|
2515
3511
|
*/
|
|
2516
3512
|
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
3513
|
//#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.
|
|
2633
|
-
*
|
|
2634
|
-
* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
|
|
2635
|
-
* @template E The type of the overflow context
|
|
2636
|
-
* @returns The current overflow context.
|
|
2637
|
-
*
|
|
2638
|
-
* @throws An error if the overflow context is not found and no default is provided.
|
|
2639
|
-
*
|
|
2640
|
-
* @example
|
|
2641
|
-
* ```vue
|
|
2642
|
-
* <script lang="ts" setup>
|
|
2643
|
-
* import { useOverflow } from '@vuetify/v0'
|
|
2644
|
-
*
|
|
2645
|
-
* // Inject overflow context provided by parent
|
|
2646
|
-
* const overflow = useOverflow()
|
|
2647
|
-
* </script>
|
|
2648
|
-
*
|
|
2649
|
-
* <template>
|
|
2650
|
-
* <div>
|
|
2651
|
-
* <p>Capacity: {{ overflow.capacity.value }}</p>
|
|
2652
|
-
* </div>
|
|
2653
|
-
* </template>
|
|
2654
|
-
* ```
|
|
2655
|
-
*/
|
|
2656
|
-
declare function useOverflow<E extends OverflowContext = OverflowContext>(namespace?: string): E;
|
|
2657
|
-
//#endregion
|
|
2658
3514
|
//#region src/composables/usePermissions/adapters/adapter.d.ts
|
|
2659
3515
|
interface PermissionAdapterInterface {
|
|
2660
3516
|
can: <Z extends PermissionTicket = PermissionTicket>(role: ID, action: string, subject: string, context: Record<string, any>, permissions: PermissionContext<Z>) => boolean;
|
|
@@ -2679,106 +3535,28 @@ interface PermissionPluginOptions extends PermissionContextOptions {}
|
|
|
2679
3535
|
/**
|
|
2680
3536
|
* Creates a new permissions instance.
|
|
2681
3537
|
*
|
|
2682
|
-
* @param options The options for the permissions instance.
|
|
2683
|
-
* @template Z The type of the permission ticket.
|
|
2684
|
-
* @template E The type of the permission context.
|
|
2685
|
-
* @returns A new permissions instance.
|
|
2686
|
-
*
|
|
2687
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
|
|
2688
|
-
*
|
|
2689
|
-
* @example
|
|
2690
|
-
* ```ts
|
|
2691
|
-
* import { createPermissions } from '@vuetify/v0'
|
|
2692
|
-
*
|
|
2693
|
-
* const [usePermissions, providePermissions] = createPermissions({
|
|
2694
|
-
* namespace: 'v0:permissions',
|
|
2695
|
-
* permissions: {
|
|
2696
|
-
* admin: [['read', 'users']],
|
|
2697
|
-
* editor: [['edit', 'posts']],
|
|
2698
|
-
* },
|
|
2699
|
-
* })
|
|
2700
|
-
* ```
|
|
2701
|
-
*/
|
|
2702
|
-
declare function createPermissions<Z extends PermissionTicket = PermissionTicket, E extends PermissionContext<Z> = PermissionContext<Z>>(_options?: PermissionOptions): E;
|
|
2703
|
-
/**
|
|
2704
|
-
* Creates a new permissions context.
|
|
2705
|
-
*
|
|
2706
|
-
* @param options The options for the permissions context.
|
|
2707
|
-
* @template Z The type of the permission ticket.
|
|
2708
|
-
* @template E The type of the permission context.
|
|
2709
|
-
* @returns A new permissions context.
|
|
2710
|
-
*
|
|
2711
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
|
|
2712
|
-
*
|
|
2713
|
-
* @example
|
|
2714
|
-
* ```ts
|
|
2715
|
-
* import { createPermissionsContext } from '@vuetify/v0'
|
|
2716
|
-
*
|
|
2717
|
-
* export const [usePermissions, providePermissions, context] = createPermissionsContext({
|
|
2718
|
-
* namespace: 'app:permissions',
|
|
2719
|
-
* permissions: {
|
|
2720
|
-
* admin: [['read', 'users'], ['edit', 'users']],
|
|
2721
|
-
* editor: [['edit', 'posts']],
|
|
2722
|
-
* },
|
|
2723
|
-
* })
|
|
2724
|
-
* ```
|
|
2725
|
-
*/
|
|
2726
|
-
declare function createPermissionsContext<Z extends PermissionTicket = PermissionTicket, E extends PermissionContext<Z> = PermissionContext<Z>>(_options?: PermissionContextOptions): ContextTrinity<E>;
|
|
2727
|
-
/**
|
|
2728
|
-
* Creates a new permissions plugin.
|
|
2729
|
-
*
|
|
2730
|
-
* @param options The options for the permissions plugin.
|
|
3538
|
+
* @param options The options for the permissions instance.
|
|
2731
3539
|
* @template Z The type of the permission ticket.
|
|
2732
3540
|
* @template E The type of the permission context.
|
|
2733
|
-
* @returns A new permissions
|
|
3541
|
+
* @returns A new permissions instance.
|
|
2734
3542
|
*
|
|
2735
3543
|
* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
|
|
2736
3544
|
*
|
|
2737
3545
|
* @example
|
|
2738
3546
|
* ```ts
|
|
2739
|
-
* import {
|
|
2740
|
-
* import { createPermissionsPlugin } from '@vuetify/v0'
|
|
2741
|
-
* import App from './App.vue'
|
|
2742
|
-
*
|
|
2743
|
-
* const app = createApp(App)
|
|
2744
|
-
*
|
|
2745
|
-
* app.use(
|
|
2746
|
-
* createPermissionsPlugin({
|
|
2747
|
-
* permissions: {
|
|
2748
|
-
* admin: [['read', 'users']],
|
|
2749
|
-
* editor: [['edit', 'posts']],
|
|
2750
|
-
* },
|
|
2751
|
-
* })
|
|
2752
|
-
* )
|
|
2753
|
-
*
|
|
2754
|
-
* app.mount('#app')
|
|
2755
|
-
* ```
|
|
2756
|
-
*/
|
|
2757
|
-
declare function createPermissionsPlugin<Z extends PermissionTicket = PermissionTicket, E extends PermissionContext<Z> = PermissionContext<Z>>(_options?: PermissionPluginOptions): Plugin;
|
|
2758
|
-
/**
|
|
2759
|
-
* Returns the current permissions instance.
|
|
2760
|
-
*
|
|
2761
|
-
* @template Z The type of the permission ticket.
|
|
2762
|
-
* @returns The current permissions instance.
|
|
2763
|
-
*
|
|
2764
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
|
|
2765
|
-
*
|
|
2766
|
-
* @example
|
|
2767
|
-
* ```vue
|
|
2768
|
-
* <script setup lang="ts">
|
|
2769
|
-
* import { usePermissions } from '@vuetify/v0'
|
|
2770
|
-
*
|
|
2771
|
-
* const { can } = usePermissions()
|
|
2772
|
-
* </script>
|
|
3547
|
+
* import { createPermissions } from '@vuetify/v0'
|
|
2773
3548
|
*
|
|
2774
|
-
*
|
|
2775
|
-
*
|
|
2776
|
-
*
|
|
2777
|
-
*
|
|
2778
|
-
*
|
|
3549
|
+
* const [usePermissions, providePermissions] = createPermissions({
|
|
3550
|
+
* namespace: 'v0:permissions',
|
|
3551
|
+
* permissions: {
|
|
3552
|
+
* admin: [['read', 'users']],
|
|
3553
|
+
* editor: [['edit', 'posts']],
|
|
3554
|
+
* },
|
|
3555
|
+
* })
|
|
2779
3556
|
* ```
|
|
2780
3557
|
*/
|
|
2781
|
-
declare function
|
|
3558
|
+
declare function createPermissions<Z extends PermissionTicket = PermissionTicket, E extends PermissionContext<Z> = PermissionContext<Z>>(_options?: PermissionOptions): E;
|
|
3559
|
+
declare const createPermissionsContext: <_E extends PermissionContext<PermissionTicket> = PermissionContext<PermissionTicket>>(_options?: PermissionContextOptions | undefined) => ContextTrinity<_E>, createPermissionsPlugin: (_options?: PermissionContextOptions | undefined) => Plugin, usePermissions: <_E extends PermissionContext<PermissionTicket> = PermissionContext<PermissionTicket>>(namespace?: string) => _E;
|
|
2782
3560
|
//#endregion
|
|
2783
3561
|
//#region src/composables/useProxyModel/index.d.ts
|
|
2784
3562
|
interface ProxyModelOptions {
|
|
@@ -2853,7 +3631,7 @@ declare function useProxyRegistry<Z extends RegistryTicket = RegistryTicket>(reg
|
|
|
2853
3631
|
*
|
|
2854
3632
|
* @template V The type of the ticket value.
|
|
2855
3633
|
*/
|
|
2856
|
-
interface QueueTicketInput<V = unknown> extends
|
|
3634
|
+
interface QueueTicketInput<V = unknown> extends RegistryTicketInput<V> {
|
|
2857
3635
|
/**
|
|
2858
3636
|
* Timeout in milliseconds
|
|
2859
3637
|
*
|
|
@@ -2870,7 +3648,7 @@ interface QueueTicketInput<V = unknown> extends RegistryTicket<V> {
|
|
|
2870
3648
|
*
|
|
2871
3649
|
* @template Z The input ticket type that extends QueueTicketInput.
|
|
2872
3650
|
*/
|
|
2873
|
-
type QueueTicket<Z extends QueueTicketInput = QueueTicketInput> = Z & {
|
|
3651
|
+
type QueueTicket<Z extends QueueTicketInput = QueueTicketInput> = RegistryTicket & Z & {
|
|
2874
3652
|
/**
|
|
2875
3653
|
* Timeout in milliseconds (resolved from input or default)
|
|
2876
3654
|
*/
|
|
@@ -3150,155 +3928,505 @@ declare function createQueueContext<Z extends QueueTicketInput = QueueTicketInpu
|
|
|
3150
3928
|
* </script>
|
|
3151
3929
|
* ```
|
|
3152
3930
|
*/
|
|
3153
|
-
declare function useQueue<Z extends QueueTicketInput = QueueTicketInput, E extends QueueTicket<Z> = QueueTicket<Z>, R extends QueueContext<Z, E> = QueueContext<Z, E>>(namespace?: string): R;
|
|
3154
|
-
//#endregion
|
|
3155
|
-
//#region src/composables/useResizeObserver/index.d.ts
|
|
3156
|
-
interface ResizeObserverEntry {
|
|
3157
|
-
contentRect: {
|
|
3158
|
-
width: number;
|
|
3159
|
-
height: number;
|
|
3160
|
-
top: number;
|
|
3161
|
-
left: number;
|
|
3162
|
-
};
|
|
3163
|
-
target: Element;
|
|
3164
|
-
}
|
|
3165
|
-
interface ResizeObserverOptions {
|
|
3166
|
-
immediate?: boolean;
|
|
3167
|
-
once?: boolean;
|
|
3168
|
-
box?: 'content-box' | 'border-box';
|
|
3931
|
+
declare function useQueue<Z extends QueueTicketInput = QueueTicketInput, E extends QueueTicket<Z> = QueueTicket<Z>, R extends QueueContext<Z, E> = QueueContext<Z, E>>(namespace?: string): R;
|
|
3932
|
+
//#endregion
|
|
3933
|
+
//#region src/composables/useResizeObserver/index.d.ts
|
|
3934
|
+
interface ResizeObserverEntry {
|
|
3935
|
+
contentRect: {
|
|
3936
|
+
width: number;
|
|
3937
|
+
height: number;
|
|
3938
|
+
top: number;
|
|
3939
|
+
left: number;
|
|
3940
|
+
};
|
|
3941
|
+
target: Element;
|
|
3942
|
+
}
|
|
3943
|
+
interface ResizeObserverOptions {
|
|
3944
|
+
immediate?: boolean;
|
|
3945
|
+
once?: boolean;
|
|
3946
|
+
box?: 'content-box' | 'border-box';
|
|
3947
|
+
}
|
|
3948
|
+
interface UseResizeObserverReturn extends ObserverReturn {}
|
|
3949
|
+
/**
|
|
3950
|
+
* A composable that uses the Resize Observer API to detect when an element's
|
|
3951
|
+
* size changes.
|
|
3952
|
+
*
|
|
3953
|
+
* @param target The element to observe.
|
|
3954
|
+
* @param callback The callback to execute when the element's size changes.
|
|
3955
|
+
* @param options The options for the Resize Observer.
|
|
3956
|
+
* @returns An object with methods to control the observer.
|
|
3957
|
+
*
|
|
3958
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
|
|
3959
|
+
* @see https://0.vuetifyjs.com/composables/system/use-resize-observer
|
|
3960
|
+
*
|
|
3961
|
+
* @example
|
|
3962
|
+
* ```ts
|
|
3963
|
+
* import { ref } from 'vue'
|
|
3964
|
+
* import { useResizeObserver } from '@vuetify/v0'
|
|
3965
|
+
*
|
|
3966
|
+
* const el = ref<HTMLElement>()
|
|
3967
|
+
* const width = ref(0)
|
|
3968
|
+
* const height = ref(0)
|
|
3969
|
+
*
|
|
3970
|
+
* const { pause, resume, isPaused } = useResizeObserver(
|
|
3971
|
+
* el,
|
|
3972
|
+
* (entries) => {
|
|
3973
|
+
* const entry = entries[0]
|
|
3974
|
+
* if (entry) {
|
|
3975
|
+
* width.value = entry.contentRect.width
|
|
3976
|
+
* height.value = entry.contentRect.height
|
|
3977
|
+
* console.log('Size changed:', width.value, 'x', height.value)
|
|
3978
|
+
* }
|
|
3979
|
+
* },
|
|
3980
|
+
* { immediate: true }
|
|
3981
|
+
* )
|
|
3982
|
+
*
|
|
3983
|
+
* // Pause observation
|
|
3984
|
+
* pause()
|
|
3985
|
+
*
|
|
3986
|
+
* // Resume observation
|
|
3987
|
+
* resume()
|
|
3988
|
+
* ```
|
|
3989
|
+
*/
|
|
3990
|
+
declare function useResizeObserver(target: MaybeRef<Element | null | undefined>, callback: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions): UseResizeObserverReturn;
|
|
3991
|
+
interface UseElementSizeReturn extends UseResizeObserverReturn {
|
|
3992
|
+
/**
|
|
3993
|
+
* The width of the element in pixels
|
|
3994
|
+
*/
|
|
3995
|
+
readonly width: Readonly<Ref<number>>;
|
|
3996
|
+
/**
|
|
3997
|
+
* The height of the element in pixels
|
|
3998
|
+
*/
|
|
3999
|
+
readonly height: Readonly<Ref<number>>;
|
|
4000
|
+
}
|
|
4001
|
+
/**
|
|
4002
|
+
* A convenience composable that uses the Resize Observer API to track an
|
|
4003
|
+
* element's size.
|
|
4004
|
+
*
|
|
4005
|
+
* @param target The element to observe.
|
|
4006
|
+
* @returns An object with the element's width and height.
|
|
4007
|
+
*
|
|
4008
|
+
* @see https://0.vuetifyjs.com/composables/system/use-resize-observer#use-element-size
|
|
4009
|
+
*
|
|
4010
|
+
* @example
|
|
4011
|
+
* ```ts
|
|
4012
|
+
* import { ref, watchEffect } from 'vue'
|
|
4013
|
+
* import { useElementSize } from '@vuetify/v0'
|
|
4014
|
+
*
|
|
4015
|
+
* const box = ref<HTMLElement>()
|
|
4016
|
+
* const { width, height } = useElementSize(box)
|
|
4017
|
+
*
|
|
4018
|
+
* // Width and height are reactive refs
|
|
4019
|
+
* watchEffect(() => {
|
|
4020
|
+
* console.log('Box size:', width.value, 'x', height.value)
|
|
4021
|
+
* })
|
|
4022
|
+
* ```
|
|
4023
|
+
*/
|
|
4024
|
+
declare function useElementSize(target: MaybeRef<Element | null | undefined>): UseElementSizeReturn;
|
|
4025
|
+
//#endregion
|
|
4026
|
+
//#region src/composables/useStack/index.d.ts
|
|
4027
|
+
/**
|
|
4028
|
+
* Input type for stack tickets - what users provide to register().
|
|
4029
|
+
*/
|
|
4030
|
+
interface StackTicketInput extends SelectionTicketInput {
|
|
4031
|
+
/**
|
|
4032
|
+
* Callback invoked when the overlay should be dismissed
|
|
4033
|
+
*
|
|
4034
|
+
* @remarks Called by `ticket.dismiss()` or when scrim is clicked.
|
|
4035
|
+
* Typically sets isActive to false.
|
|
4036
|
+
*/
|
|
4037
|
+
onDismiss?: () => void;
|
|
4038
|
+
/**
|
|
4039
|
+
* Whether this overlay blocks scrim dismissal
|
|
4040
|
+
*
|
|
4041
|
+
* @default false
|
|
4042
|
+
* @remarks When true, clicking the scrim will not dismiss this overlay.
|
|
4043
|
+
* Use for critical dialogs requiring explicit user action.
|
|
4044
|
+
*/
|
|
4045
|
+
blocking?: boolean;
|
|
4046
|
+
}
|
|
4047
|
+
/**
|
|
4048
|
+
* Output type for stack tickets - what users receive from register().
|
|
4049
|
+
*/
|
|
4050
|
+
type StackTicket<Z extends StackTicketInput = StackTicketInput> = SelectionTicket<Z> & {
|
|
4051
|
+
/**
|
|
4052
|
+
* Callback invoked when the overlay should be dismissed
|
|
4053
|
+
*/
|
|
4054
|
+
onDismiss?: () => void;
|
|
4055
|
+
/**
|
|
4056
|
+
* Whether this overlay blocks scrim dismissal
|
|
4057
|
+
*/
|
|
4058
|
+
blocking: boolean;
|
|
4059
|
+
/**
|
|
4060
|
+
* The calculated z-index for this overlay
|
|
4061
|
+
*
|
|
4062
|
+
* @remarks Automatically calculated based on selection order.
|
|
4063
|
+
* First selected overlay gets baseZIndex, each subsequent adds increment.
|
|
4064
|
+
*/
|
|
4065
|
+
zIndex: ComputedRef<number>;
|
|
4066
|
+
/**
|
|
4067
|
+
* Whether this overlay is the topmost in the global stack
|
|
4068
|
+
*
|
|
4069
|
+
* @remarks Useful for determining which overlay should handle
|
|
4070
|
+
* global keyboard events (e.g., Escape key).
|
|
4071
|
+
*/
|
|
4072
|
+
globalTop: ComputedRef<boolean>;
|
|
4073
|
+
/**
|
|
4074
|
+
* Dismiss this overlay
|
|
4075
|
+
*
|
|
4076
|
+
* @remarks If blocking is false, calls onDismiss callback and unselects.
|
|
4077
|
+
* If blocking is true, does nothing.
|
|
4078
|
+
*/
|
|
4079
|
+
dismiss: () => void;
|
|
4080
|
+
};
|
|
4081
|
+
/**
|
|
4082
|
+
* Context returned by createStack.
|
|
4083
|
+
*/
|
|
4084
|
+
interface StackContext<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>> extends Omit<SelectionContext<Z, E>, 'register'> {
|
|
4085
|
+
/**
|
|
4086
|
+
* Whether any overlays are selected (active)
|
|
4087
|
+
*
|
|
4088
|
+
* @remarks Reactive boolean for conditional scrim rendering.
|
|
4089
|
+
*/
|
|
4090
|
+
isActive: Readonly<Ref<boolean>>;
|
|
4091
|
+
/**
|
|
4092
|
+
* The topmost selected overlay ticket
|
|
4093
|
+
*
|
|
4094
|
+
* @remarks Access to the current top overlay for inspection.
|
|
4095
|
+
*/
|
|
4096
|
+
top: Readonly<Ref<E | undefined>>;
|
|
4097
|
+
/**
|
|
4098
|
+
* Z-index for the scrim (one below top overlay)
|
|
4099
|
+
*
|
|
4100
|
+
* @remarks Position scrim behind the topmost overlay but above all others.
|
|
4101
|
+
*/
|
|
4102
|
+
scrimZIndex: Readonly<Ref<number>>;
|
|
4103
|
+
/**
|
|
4104
|
+
* Whether the topmost overlay blocks scrim clicks
|
|
4105
|
+
*
|
|
4106
|
+
* @remarks When true, the topmost overlay has `blocking: true`
|
|
4107
|
+
* and scrim clicks should be ignored.
|
|
4108
|
+
*/
|
|
4109
|
+
isBlocking: Readonly<Ref<boolean>>;
|
|
4110
|
+
/**
|
|
4111
|
+
* Register an overlay ticket
|
|
4112
|
+
*
|
|
4113
|
+
* @param input Partial ticket data
|
|
4114
|
+
* @returns Stack ticket with z-index and top tracking
|
|
4115
|
+
*
|
|
4116
|
+
* @remarks When called within component setup, the ticket is automatically
|
|
4117
|
+
* unregistered when the component unmounts.
|
|
4118
|
+
*/
|
|
4119
|
+
register: (input?: Partial<Z>) => E;
|
|
4120
|
+
}
|
|
4121
|
+
interface StackOptions extends SelectionOptions {
|
|
4122
|
+
/**
|
|
4123
|
+
* Base z-index when stack is empty
|
|
4124
|
+
*
|
|
4125
|
+
* @default 2000
|
|
4126
|
+
* @remarks First overlay receives this z-index.
|
|
4127
|
+
*/
|
|
4128
|
+
baseZIndex?: number;
|
|
4129
|
+
/**
|
|
4130
|
+
* Z-index increment between overlays
|
|
4131
|
+
*
|
|
4132
|
+
* @default 10
|
|
4133
|
+
* @remarks Gap between overlay z-indexes allows room for
|
|
4134
|
+
* overlay-internal elements (dropdowns, tooltips within dialogs).
|
|
4135
|
+
*/
|
|
4136
|
+
increment?: number;
|
|
4137
|
+
}
|
|
4138
|
+
interface StackContextOptions extends StackOptions {
|
|
4139
|
+
namespace?: string;
|
|
4140
|
+
}
|
|
4141
|
+
interface StackPluginOptions extends StackContextOptions {}
|
|
4142
|
+
/**
|
|
4143
|
+
* Creates a new stack instance for managing overlay z-indexes.
|
|
4144
|
+
*
|
|
4145
|
+
* @param options Configuration options
|
|
4146
|
+
* @returns Stack context with registry methods and scrim helpers
|
|
4147
|
+
*
|
|
4148
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
4149
|
+
*
|
|
4150
|
+
* @example
|
|
4151
|
+
* ```ts
|
|
4152
|
+
* import { createStack } from '@vuetify/v0'
|
|
4153
|
+
*
|
|
4154
|
+
* const stack = createStack({ baseZIndex: 1000 })
|
|
4155
|
+
*
|
|
4156
|
+
* const ticket = stack.register({
|
|
4157
|
+
* onDismiss: () => console.log('dismissed'),
|
|
4158
|
+
* blocking: false,
|
|
4159
|
+
* })
|
|
4160
|
+
*
|
|
4161
|
+
* ticket.select() // Activate overlay
|
|
4162
|
+
* console.log(ticket.zIndex.value) // 1000
|
|
4163
|
+
*
|
|
4164
|
+
* ticket.unselect() // Deactivate overlay
|
|
4165
|
+
* ```
|
|
4166
|
+
*/
|
|
4167
|
+
declare function createStack<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(_options?: StackOptions): R;
|
|
4168
|
+
/**
|
|
4169
|
+
* Creates a stack context trinity for provide/inject usage.
|
|
4170
|
+
*
|
|
4171
|
+
* @param options Configuration options including namespace
|
|
4172
|
+
* @returns Trinity of [useStackContext, provideStackContext, context]
|
|
4173
|
+
*
|
|
4174
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
4175
|
+
*
|
|
4176
|
+
* @example
|
|
4177
|
+
* ```ts
|
|
4178
|
+
* import { createStackContext } from '@vuetify/v0'
|
|
4179
|
+
*
|
|
4180
|
+
* const [useMyStack, provideMyStack, myStack] = createStackContext({
|
|
4181
|
+
* namespace: 'my:stack',
|
|
4182
|
+
* baseZIndex: 3000,
|
|
4183
|
+
* })
|
|
4184
|
+
*
|
|
4185
|
+
* // In parent component:
|
|
4186
|
+
* provideMyStack()
|
|
4187
|
+
*
|
|
4188
|
+
* // In child component:
|
|
4189
|
+
* const stack = useMyStack()
|
|
4190
|
+
* ```
|
|
4191
|
+
*/
|
|
4192
|
+
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>;
|
|
4193
|
+
/**
|
|
4194
|
+
* Creates a Vue plugin to provide stack context at app level.
|
|
4195
|
+
*
|
|
4196
|
+
* @param options Configuration options
|
|
4197
|
+
* @returns Vue plugin instance
|
|
4198
|
+
*
|
|
4199
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
4200
|
+
*
|
|
4201
|
+
* @example
|
|
4202
|
+
* ```ts
|
|
4203
|
+
* import { createApp } from 'vue'
|
|
4204
|
+
* import { createStackPlugin } from '@vuetify/v0'
|
|
4205
|
+
*
|
|
4206
|
+
* const app = createApp(App)
|
|
4207
|
+
* app.use(createStackPlugin({ baseZIndex: 2000 }))
|
|
4208
|
+
* app.mount('#app')
|
|
4209
|
+
* ```
|
|
4210
|
+
*/
|
|
4211
|
+
declare function createStackPlugin<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(_options?: StackPluginOptions): Plugin;
|
|
4212
|
+
/**
|
|
4213
|
+
* Returns the current stack context.
|
|
4214
|
+
*
|
|
4215
|
+
* @param namespace The namespace for the stack context. Defaults to 'v0:stack'.
|
|
4216
|
+
* @returns The stack context instance
|
|
4217
|
+
*
|
|
4218
|
+
* @remarks Falls back to an internal shared instance if no provider exists.
|
|
4219
|
+
* For SSR safety, use createStackPlugin to provide isolated context per app.
|
|
4220
|
+
*
|
|
4221
|
+
* Tickets registered within component setup are automatically unregistered
|
|
4222
|
+
* when the component is unmounted.
|
|
4223
|
+
*
|
|
4224
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-stack
|
|
4225
|
+
*
|
|
4226
|
+
* @example
|
|
4227
|
+
* ```vue
|
|
4228
|
+
* <script setup lang="ts">
|
|
4229
|
+
* import { shallowRef, watch } from 'vue'
|
|
4230
|
+
* import { useStack } from '@vuetify/v0'
|
|
4231
|
+
*
|
|
4232
|
+
* const stack = useStack()
|
|
4233
|
+
* const isOpen = shallowRef(false)
|
|
4234
|
+
*
|
|
4235
|
+
* // Ticket is auto-cleaned up when component unmounts
|
|
4236
|
+
* const ticket = stack.register({
|
|
4237
|
+
* onDismiss: () => { isOpen.value = false },
|
|
4238
|
+
* })
|
|
4239
|
+
*
|
|
4240
|
+
* // Sync selection state with isOpen
|
|
4241
|
+
* watch(isOpen, v => v ? ticket.select() : ticket.unselect())
|
|
4242
|
+
* </script>
|
|
4243
|
+
*
|
|
4244
|
+
* <template>
|
|
4245
|
+
* <button @click="isOpen = true">Open</button>
|
|
4246
|
+
* <div v-if="isOpen" :style="{ zIndex: ticket.zIndex.value }">
|
|
4247
|
+
* <p>Dialog content</p>
|
|
4248
|
+
* <button @click="ticket.dismiss()">Close</button>
|
|
4249
|
+
* </div>
|
|
4250
|
+
* </template>
|
|
4251
|
+
* ```
|
|
4252
|
+
*/
|
|
4253
|
+
declare function useStack<Z extends StackTicketInput = StackTicketInput, E extends StackTicket<Z> = StackTicket<Z>, R extends StackContext<Z, E> = StackContext<Z, E>>(namespace?: string): R;
|
|
4254
|
+
//#endregion
|
|
4255
|
+
//#region src/composables/createStep/index.d.ts
|
|
4256
|
+
/**
|
|
4257
|
+
* Input type for step tickets.
|
|
4258
|
+
* Extend this interface to add custom properties.
|
|
4259
|
+
*/
|
|
4260
|
+
interface StepTicketInput<V = unknown> extends SingleTicketInput<V> {}
|
|
4261
|
+
/**
|
|
4262
|
+
* Output type for step tickets.
|
|
4263
|
+
* Includes all input properties plus selection methods.
|
|
4264
|
+
*/
|
|
4265
|
+
type StepTicket<Z extends StepTicketInput = StepTicketInput> = SingleTicket<Z>;
|
|
4266
|
+
/**
|
|
4267
|
+
* Context returned by createStep.
|
|
4268
|
+
*
|
|
4269
|
+
* @template Z The input ticket type.
|
|
4270
|
+
* @template E The output ticket type.
|
|
4271
|
+
*/
|
|
4272
|
+
interface StepContext<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>> extends Omit<SingleContext<Z, E>, 'register' | 'onboard'> {
|
|
4273
|
+
/** Select the first Ticket in the collection */
|
|
4274
|
+
first: () => void;
|
|
4275
|
+
/** Select the last Ticket in the collection */
|
|
4276
|
+
last: () => void;
|
|
4277
|
+
/** Select the next Ticket based on current index */
|
|
4278
|
+
next: () => void;
|
|
4279
|
+
/** Select the previous Ticket based on current index */
|
|
4280
|
+
prev: () => void;
|
|
4281
|
+
/** Step through the collection by a given count */
|
|
4282
|
+
step: (count: number) => void;
|
|
4283
|
+
/** Register a new ticket (accepts input type, returns output type) */
|
|
4284
|
+
register: (ticket?: Partial<Z>) => E;
|
|
4285
|
+
/** Onboard multiple tickets at once */
|
|
4286
|
+
onboard: (registrations: Partial<Z>[]) => E[];
|
|
3169
4287
|
}
|
|
3170
|
-
interface
|
|
3171
|
-
/**
|
|
3172
|
-
* Whether the observer is currently active (created and observing)
|
|
3173
|
-
*/
|
|
3174
|
-
readonly isActive: Readonly<Ref<boolean>>;
|
|
3175
|
-
/**
|
|
3176
|
-
* Whether the observer is currently paused
|
|
3177
|
-
*/
|
|
3178
|
-
readonly isPaused: Readonly<Ref<boolean>>;
|
|
3179
|
-
/**
|
|
3180
|
-
* Pause observation (disconnects observer but keeps it alive)
|
|
3181
|
-
*/
|
|
3182
|
-
pause: () => void;
|
|
4288
|
+
interface StepOptions extends SingleOptions {
|
|
3183
4289
|
/**
|
|
3184
|
-
*
|
|
4290
|
+
* Enable circular navigation (wrapping at boundaries).
|
|
4291
|
+
* - true: Navigation wraps around (carousel behavior)
|
|
4292
|
+
* - false: Navigation stops at boundaries (pagination behavior)
|
|
4293
|
+
* @default false
|
|
3185
4294
|
*/
|
|
3186
|
-
|
|
4295
|
+
circular?: boolean;
|
|
4296
|
+
}
|
|
4297
|
+
interface StepContextOptions extends SingleContextOptions {
|
|
3187
4298
|
/**
|
|
3188
|
-
*
|
|
4299
|
+
* Enable circular navigation (wrapping at boundaries).
|
|
4300
|
+
* - true: Navigation wraps around (carousel behavior)
|
|
4301
|
+
* - false: Navigation stops at boundaries (pagination behavior)
|
|
4302
|
+
* @default false
|
|
3189
4303
|
*/
|
|
3190
|
-
|
|
4304
|
+
circular?: boolean;
|
|
3191
4305
|
}
|
|
3192
4306
|
/**
|
|
3193
|
-
*
|
|
3194
|
-
* size changes.
|
|
4307
|
+
* Creates a new step instance with navigation through items.
|
|
3195
4308
|
*
|
|
3196
|
-
*
|
|
3197
|
-
*
|
|
3198
|
-
* @param options The options for the Resize Observer.
|
|
3199
|
-
* @returns An object with methods to control the observer.
|
|
4309
|
+
* Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
|
|
4310
|
+
* for sequential navigation. Supports both circular (wrapping) and bounded (stopping at edges) modes.
|
|
3200
4311
|
*
|
|
3201
|
-
* @
|
|
3202
|
-
* @
|
|
4312
|
+
* @param options The options for the step instance.
|
|
4313
|
+
* @template Z The type of the step ticket.
|
|
4314
|
+
* @template E The type of the step context.
|
|
4315
|
+
* @returns A new step instance with navigation methods.
|
|
4316
|
+
*
|
|
4317
|
+
* @remarks
|
|
4318
|
+
* **Key Features:**
|
|
4319
|
+
* - **Configurable Navigation**: `circular: true` for wrapping, `false` for bounded (default: false)
|
|
4320
|
+
* - **Disabled Item Skipping**: Automatically skips disabled items during navigation
|
|
4321
|
+
* - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
|
|
4322
|
+
* - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
|
|
4323
|
+
*
|
|
4324
|
+
* **Navigation Methods:**
|
|
4325
|
+
* - `first()`: Select first non-disabled item
|
|
4326
|
+
* - `last()`: Select last non-disabled item
|
|
4327
|
+
* - `next()`: Move to next item (wraps if circular, stops at end if bounded)
|
|
4328
|
+
* - `prev()`: Move to previous item (wraps if circular, stops at start if bounded)
|
|
4329
|
+
* - `step(count)`: Move by `count` positions (negative for backward)
|
|
4330
|
+
*
|
|
4331
|
+
* **Circular Mode (`circular: true`):**
|
|
4332
|
+
* - Uses modulo arithmetic for wrapping: `((index % length) + length) % length`
|
|
4333
|
+
* - Works correctly with negative indexes and large step counts
|
|
4334
|
+
* - Perfect for carousels, theme switchers, infinite scrolling
|
|
4335
|
+
*
|
|
4336
|
+
* **Bounded Mode (`circular: false`, default):**
|
|
4337
|
+
* - Navigation stops at boundaries (no wrapping)
|
|
4338
|
+
* - `next()` on last item does nothing
|
|
4339
|
+
* - `prev()` on first item does nothing
|
|
4340
|
+
* - Perfect for pagination, wizards with explicit completion, forms
|
|
4341
|
+
*
|
|
4342
|
+
* **Inheritance Chain:**
|
|
4343
|
+
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
4344
|
+
*
|
|
4345
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
3203
4346
|
*
|
|
3204
4347
|
* @example
|
|
3205
4348
|
* ```ts
|
|
3206
|
-
* import {
|
|
3207
|
-
*
|
|
4349
|
+
* import { createStep } from '@vuetify/v0'
|
|
4350
|
+
*
|
|
4351
|
+
* // Bounded navigation (default) - for pagination
|
|
4352
|
+
* const pagination = createStep({ circular: false })
|
|
4353
|
+
* pagination.onboard([
|
|
4354
|
+
* { id: 'page-1', value: 1 },
|
|
4355
|
+
* { id: 'page-2', value: 2 },
|
|
4356
|
+
* { id: 'page-3', value: 3 },
|
|
4357
|
+
* ])
|
|
4358
|
+
* pagination.first() // Select page 1
|
|
4359
|
+
* pagination.prev() // Does nothing (already at first)
|
|
4360
|
+
* pagination.next() // Select page 2
|
|
4361
|
+
*
|
|
4362
|
+
* // Circular navigation - for carousels
|
|
4363
|
+
* const carousel = createStep({ circular: true })
|
|
4364
|
+
* carousel.onboard([
|
|
4365
|
+
* { id: 'slide-1', value: 'First' },
|
|
4366
|
+
* { id: 'slide-2', value: 'Second' },
|
|
4367
|
+
* { id: 'slide-3', value: 'Third' },
|
|
4368
|
+
* ])
|
|
4369
|
+
* carousel.first()
|
|
4370
|
+
* carousel.prev() // Wraps to 'slide-3'
|
|
4371
|
+
* carousel.next() // Wraps to 'slide-1'
|
|
4372
|
+
* ```
|
|
4373
|
+
*/
|
|
4374
|
+
declare function createStep<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(_options?: StepOptions): R;
|
|
4375
|
+
/**
|
|
4376
|
+
* Creates a new step context.
|
|
3208
4377
|
*
|
|
3209
|
-
*
|
|
3210
|
-
*
|
|
3211
|
-
*
|
|
4378
|
+
* @param options The options for the step context.
|
|
4379
|
+
* @template Z The input ticket type.
|
|
4380
|
+
* @template E The output ticket type.
|
|
4381
|
+
* @template R The context type.
|
|
4382
|
+
* @returns A new step context.
|
|
3212
4383
|
*
|
|
3213
|
-
*
|
|
3214
|
-
* el,
|
|
3215
|
-
* (entries) => {
|
|
3216
|
-
* const entry = entries[0]
|
|
3217
|
-
* if (entry) {
|
|
3218
|
-
* width.value = entry.contentRect.width
|
|
3219
|
-
* height.value = entry.contentRect.height
|
|
3220
|
-
* console.log('Size changed:', width.value, 'x', height.value)
|
|
3221
|
-
* }
|
|
3222
|
-
* },
|
|
3223
|
-
* { immediate: true }
|
|
3224
|
-
* )
|
|
4384
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
3225
4385
|
*
|
|
3226
|
-
*
|
|
3227
|
-
*
|
|
4386
|
+
* @example
|
|
4387
|
+
* ```ts
|
|
4388
|
+
* import { createStepContext } from '@vuetify/v0'
|
|
3228
4389
|
*
|
|
3229
|
-
* //
|
|
3230
|
-
*
|
|
4390
|
+
* // With default namespace 'v0:step'
|
|
4391
|
+
* export const [useStep, provideStep, context] = createStepContext()
|
|
4392
|
+
*
|
|
4393
|
+
* // In a parent component:
|
|
4394
|
+
* provideStep()
|
|
4395
|
+
*
|
|
4396
|
+
* // In a child component:
|
|
4397
|
+
* const context = useStep()
|
|
4398
|
+
* context.next() // Progress to next step
|
|
3231
4399
|
* ```
|
|
3232
4400
|
*/
|
|
3233
|
-
declare function
|
|
3234
|
-
interface UseElementSizeReturn extends UseResizeObserverReturn {
|
|
3235
|
-
/**
|
|
3236
|
-
* The width of the element in pixels
|
|
3237
|
-
*/
|
|
3238
|
-
width: Ref<number>;
|
|
3239
|
-
/**
|
|
3240
|
-
* The height of the element in pixels
|
|
3241
|
-
*/
|
|
3242
|
-
height: Ref<number>;
|
|
3243
|
-
}
|
|
4401
|
+
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>;
|
|
3244
4402
|
/**
|
|
3245
|
-
*
|
|
3246
|
-
* element's size.
|
|
4403
|
+
* Returns the current step instance.
|
|
3247
4404
|
*
|
|
3248
|
-
* @param
|
|
3249
|
-
* @
|
|
4405
|
+
* @param namespace The namespace for the step context. Defaults to `'v0:step'`.
|
|
4406
|
+
* @template Z The input ticket type.
|
|
4407
|
+
* @template E The output ticket type.
|
|
4408
|
+
* @template R The context type.
|
|
4409
|
+
* @returns The current step instance.
|
|
3250
4410
|
*
|
|
3251
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
4411
|
+
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
3252
4412
|
*
|
|
3253
4413
|
* @example
|
|
3254
|
-
* ```
|
|
3255
|
-
*
|
|
3256
|
-
*
|
|
4414
|
+
* ```vue
|
|
4415
|
+
* <script setup lang="ts">
|
|
4416
|
+
* import { useStep } from '@vuetify/v0'
|
|
3257
4417
|
*
|
|
3258
|
-
*
|
|
3259
|
-
*
|
|
4418
|
+
* const wizard = useStep()
|
|
4419
|
+
* </script>
|
|
3260
4420
|
*
|
|
3261
|
-
*
|
|
3262
|
-
*
|
|
3263
|
-
*
|
|
3264
|
-
*
|
|
4421
|
+
* <template>
|
|
4422
|
+
* <div>
|
|
4423
|
+
* <p>Current step: {{ wizard.selectedIndex }}</p>
|
|
4424
|
+
* <button @click="wizard.next()">Next</button>
|
|
4425
|
+
* </div>
|
|
4426
|
+
* </template>
|
|
3265
4427
|
* ```
|
|
3266
4428
|
*/
|
|
3267
|
-
declare function
|
|
3268
|
-
//#endregion
|
|
3269
|
-
//#region src/composables/useStorage/adapters/adapter.d.ts
|
|
3270
|
-
interface StorageAdapter$1 {
|
|
3271
|
-
getItem: (key: string) => string | null;
|
|
3272
|
-
setItem: (key: string, value: string) => void;
|
|
3273
|
-
removeItem: (key: string) => void;
|
|
3274
|
-
readonly length?: number;
|
|
3275
|
-
key?: (index: number) => string | null;
|
|
3276
|
-
}
|
|
3277
|
-
//#endregion
|
|
3278
|
-
//#region src/composables/useStorage/adapters/memory.d.ts
|
|
3279
|
-
/**
|
|
3280
|
-
* In-memory storage adapter that implements the StorageAdapter interface.
|
|
3281
|
-
* This adapter provides temporary storage that persists only for the current
|
|
3282
|
-
* session and is useful for testing or when persistent storage is not available.
|
|
3283
|
-
*/
|
|
3284
|
-
declare class MemoryAdapter implements StorageAdapter$1 {
|
|
3285
|
-
private store;
|
|
3286
|
-
get length(): number;
|
|
3287
|
-
getItem(key: string): string | null;
|
|
3288
|
-
setItem(key: string, value: string): void;
|
|
3289
|
-
removeItem(key: string): void;
|
|
3290
|
-
key(index: number): string;
|
|
3291
|
-
}
|
|
3292
|
-
//#endregion
|
|
3293
|
-
//#region src/composables/useStorage/adapters/index.d.ts
|
|
3294
|
-
type StorageType = 'localStorage' | 'sessionStorage' | 'memory';
|
|
3295
|
-
interface StorageAdapter {
|
|
3296
|
-
getItem: (key: string) => string | null;
|
|
3297
|
-
setItem: (key: string, value: string) => void;
|
|
3298
|
-
removeItem: (key: string) => void;
|
|
3299
|
-
readonly length?: number;
|
|
3300
|
-
key?: (index: number) => string | null;
|
|
3301
|
-
}
|
|
4429
|
+
declare function useStep<Z extends StepTicketInput = StepTicketInput, E extends StepTicket<Z> = StepTicket<Z>, R extends StepContext<Z, E> = StepContext<Z, E>>(namespace?: string): R;
|
|
3302
4430
|
//#endregion
|
|
3303
4431
|
//#region src/composables/useStorage/index.d.ts
|
|
3304
4432
|
interface StorageContext {
|
|
@@ -3354,54 +4482,7 @@ interface StoragePluginOptions extends StorageContextOptions {}
|
|
|
3354
4482
|
* ```
|
|
3355
4483
|
*/
|
|
3356
4484
|
declare function createStorage<E extends StorageContext>(options?: StorageOptions): E;
|
|
3357
|
-
declare
|
|
3358
|
-
/**
|
|
3359
|
-
* Creates a new storage plugin.
|
|
3360
|
-
*
|
|
3361
|
-
* @param options The options for the storage plugin.
|
|
3362
|
-
* @returns A new storage plugin.
|
|
3363
|
-
*
|
|
3364
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-storage
|
|
3365
|
-
*
|
|
3366
|
-
* @example
|
|
3367
|
-
* ```ts
|
|
3368
|
-
* import { createApp } from 'vue'
|
|
3369
|
-
* import { createStoragePlugin } from '@vuetify/v0'
|
|
3370
|
-
* import App from './App.vue'
|
|
3371
|
-
*
|
|
3372
|
-
* const app = createApp(App)
|
|
3373
|
-
*
|
|
3374
|
-
* app.use(createStoragePlugin())
|
|
3375
|
-
*
|
|
3376
|
-
* app.mount('#app')
|
|
3377
|
-
* ```
|
|
3378
|
-
*/
|
|
3379
|
-
declare function createStoragePlugin<E extends StorageContext = StorageContext>(_options?: StoragePluginOptions): Plugin;
|
|
3380
|
-
/**
|
|
3381
|
-
* Returns the current storage instance.
|
|
3382
|
-
*
|
|
3383
|
-
* @param namespace The namespace for the storage context. Defaults to `'v0:storage'`.
|
|
3384
|
-
* @returns The current storage instance.
|
|
3385
|
-
*
|
|
3386
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-storage
|
|
3387
|
-
*
|
|
3388
|
-
* @example
|
|
3389
|
-
* ```vue
|
|
3390
|
-
* <script setup lang="ts">
|
|
3391
|
-
* import { useStorage } from '@vuetify/v0'
|
|
3392
|
-
*
|
|
3393
|
-
* const storage = useStorage()
|
|
3394
|
-
* const username = storage.get('username', 'Guest')
|
|
3395
|
-
* </script>
|
|
3396
|
-
*
|
|
3397
|
-
* <template>
|
|
3398
|
-
* <div>
|
|
3399
|
-
* <p>Username: {{ username }}</p>
|
|
3400
|
-
* </div>
|
|
3401
|
-
* </template>
|
|
3402
|
-
* ```
|
|
3403
|
-
*/
|
|
3404
|
-
declare function useStorage<E extends StorageContext = StorageContext>(namespace?: string): E;
|
|
4485
|
+
declare const createStorageContext: <_E extends StorageContext = StorageContext>(_options?: StorageContextOptions | undefined) => ContextTrinity<_E>, createStoragePlugin: (_options?: StorageContextOptions | undefined) => Plugin, useStorage: <_E extends StorageContext = StorageContext>(namespace?: string) => _E;
|
|
3405
4486
|
//#endregion
|
|
3406
4487
|
//#region src/composables/useTheme/adapters/adapter.d.ts
|
|
3407
4488
|
interface ThemeAdapterSetupContext {
|
|
@@ -3618,107 +4699,7 @@ interface ThemePluginOptions extends ThemeContextOptions {}
|
|
|
3618
4699
|
* ```
|
|
3619
4700
|
*/
|
|
3620
4701
|
declare function createTheme<Z extends ThemeTicketInput = ThemeTicketInput, E extends ThemeTicket<Z> = ThemeTicket<Z>, R extends ThemeContext<Z, E> = ThemeContext<Z, E>>(_options?: ThemeOptions): R;
|
|
3621
|
-
|
|
3622
|
-
* Creates a new theme context trinity.
|
|
3623
|
-
*
|
|
3624
|
-
* @param options The options for the theme context.
|
|
3625
|
-
* @template Z The type of the theme ticket.
|
|
3626
|
-
* @template E The type of the theme context.
|
|
3627
|
-
* @returns A new theme context trinity.
|
|
3628
|
-
*
|
|
3629
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
3630
|
-
*
|
|
3631
|
-
* @example
|
|
3632
|
-
* ```ts
|
|
3633
|
-
* import { createThemeContext } from '@vuetify/v0'
|
|
3634
|
-
*
|
|
3635
|
-
* export const [useThemeContext, provideThemeContext, context] = createThemeContext({
|
|
3636
|
-
* namespace: 'v0:theme',
|
|
3637
|
-
* default: 'light',
|
|
3638
|
-
* themes: {
|
|
3639
|
-
* light: {
|
|
3640
|
-
* dark: false,
|
|
3641
|
-
* colors: {
|
|
3642
|
-
* primary: '#3b82f6',
|
|
3643
|
-
* },
|
|
3644
|
-
* },
|
|
3645
|
-
* dark: {
|
|
3646
|
-
* dark: true,
|
|
3647
|
-
* colors: {
|
|
3648
|
-
* primary: '#675496',
|
|
3649
|
-
* },
|
|
3650
|
-
* },
|
|
3651
|
-
* },
|
|
3652
|
-
* })
|
|
3653
|
-
* ```
|
|
3654
|
-
*/
|
|
3655
|
-
declare function createThemeContext<Z extends ThemeTicketInput = ThemeTicketInput, E extends ThemeTicket<Z> = ThemeTicket<Z>, R extends ThemeContext<Z, E> = ThemeContext<Z, E>>(_options?: ThemeContextOptions): ContextTrinity<R>;
|
|
3656
|
-
/**
|
|
3657
|
-
* Creates a new theme plugin.
|
|
3658
|
-
*
|
|
3659
|
-
* @param options The options for the theme plugin.
|
|
3660
|
-
* @template Z The type of the theme ticket.
|
|
3661
|
-
* @template E The type of the theme context.
|
|
3662
|
-
* @returns A new theme plugin.
|
|
3663
|
-
*
|
|
3664
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
3665
|
-
*
|
|
3666
|
-
* @example
|
|
3667
|
-
* ```ts
|
|
3668
|
-
* import { createApp } from 'vue'
|
|
3669
|
-
* import { createThemePlugin } from '@vuetify/v0'
|
|
3670
|
-
* import App from './App.vue'
|
|
3671
|
-
*
|
|
3672
|
-
* const app = createApp(App)
|
|
3673
|
-
*
|
|
3674
|
-
* app.use(
|
|
3675
|
-
* createThemePlugin({
|
|
3676
|
-
* default: 'light',
|
|
3677
|
-
* themes: {
|
|
3678
|
-
* light: {
|
|
3679
|
-
* dark: false,
|
|
3680
|
-
* colors: {
|
|
3681
|
-
* primary: '#3b82f6',
|
|
3682
|
-
* },
|
|
3683
|
-
* },
|
|
3684
|
-
* dark: {
|
|
3685
|
-
* dark: true,
|
|
3686
|
-
* colors: {
|
|
3687
|
-
* primary: '#675496',
|
|
3688
|
-
* },
|
|
3689
|
-
* },
|
|
3690
|
-
* },
|
|
3691
|
-
* })
|
|
3692
|
-
* )
|
|
3693
|
-
*
|
|
3694
|
-
* app.mount('#app')
|
|
3695
|
-
* ```
|
|
3696
|
-
*/
|
|
3697
|
-
declare function createThemePlugin<Z extends ThemeTicketInput = ThemeTicketInput, E extends ThemeTicket<Z> = ThemeTicket<Z>, R extends ThemeContext<Z, E> = ThemeContext<Z, E>>(_options?: ThemePluginOptions): Plugin;
|
|
3698
|
-
/**
|
|
3699
|
-
* Returns the current theme instance.
|
|
3700
|
-
*
|
|
3701
|
-
* @param namespace The namespace for the theme context. Defaults to `v0:theme`.
|
|
3702
|
-
* @returns The current theme instance.
|
|
3703
|
-
*
|
|
3704
|
-
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
3705
|
-
*
|
|
3706
|
-
* @example
|
|
3707
|
-
* ```vue
|
|
3708
|
-
* <script setup lang="ts">
|
|
3709
|
-
* import { useTheme } from '@vuetify/v0'
|
|
3710
|
-
*
|
|
3711
|
-
* const theme = useTheme()
|
|
3712
|
-
* </script>
|
|
3713
|
-
*
|
|
3714
|
-
* <template>
|
|
3715
|
-
* <div>
|
|
3716
|
-
* <p>Current theme: {{ theme.selected.value }}</p>
|
|
3717
|
-
* </div>
|
|
3718
|
-
* </template>
|
|
3719
|
-
* ```
|
|
3720
|
-
*/
|
|
3721
|
-
declare function useTheme<Z extends ThemeTicketInput = ThemeTicketInput, E extends ThemeTicket<Z> = ThemeTicket<Z>, R extends ThemeContext<Z, E> = ThemeContext<Z, E>>(namespace?: string): R;
|
|
4702
|
+
declare const createThemeContext: <_E extends ThemeContext<ThemeTicketInput, ThemeTicket<ThemeTicketInput>> = ThemeContext<ThemeTicketInput, ThemeTicket<ThemeTicketInput>>>(_options?: ThemePluginOptions | undefined) => ContextTrinity<_E>, createThemePlugin: (_options?: ThemePluginOptions | undefined) => Plugin, useTheme: <_E extends ThemeContext<ThemeTicketInput, ThemeTicket<ThemeTicketInput>> = ThemeContext<ThemeTicketInput, ThemeTicket<ThemeTicketInput>>>(namespace?: string) => _E;
|
|
3722
4703
|
//#endregion
|
|
3723
4704
|
//#region src/composables/createTimeline/index.d.ts
|
|
3724
4705
|
interface TimelineContext<Z extends TimelineTicket> extends RegistryContext<Z> {
|
|
@@ -3928,7 +4909,7 @@ interface ToggleScopeControls {
|
|
|
3928
4909
|
*/
|
|
3929
4910
|
declare function useToggleScope(source: WatchSource<boolean>, fn: (() => void) | ((controls: ToggleScopeControls) => void)): ToggleScopeControls;
|
|
3930
4911
|
//#endregion
|
|
3931
|
-
//#region src/composables/
|
|
4912
|
+
//#region src/composables/createVirtual/index.d.ts
|
|
3932
4913
|
type VirtualDirection = 'forward' | 'reverse';
|
|
3933
4914
|
type VirtualState = 'loading' | 'empty' | 'error' | 'ok';
|
|
3934
4915
|
type VirtualAnchor = 'auto' | 'start' | 'end' | ((items: readonly unknown[]) => number | string);
|
|
@@ -4007,9 +4988,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4007
4988
|
* @example
|
|
4008
4989
|
* ```vue
|
|
4009
4990
|
* <script setup lang="ts">
|
|
4010
|
-
* import {
|
|
4991
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4011
4992
|
*
|
|
4012
|
-
* const
|
|
4993
|
+
* const virtual = createVirtual(items)
|
|
4994
|
+
* const { element } = virtual
|
|
4013
4995
|
* </script>
|
|
4014
4996
|
*
|
|
4015
4997
|
* <template>
|
|
@@ -4027,9 +5009,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4027
5009
|
* @example
|
|
4028
5010
|
* ```vue
|
|
4029
5011
|
* <script setup lang="ts">
|
|
4030
|
-
* import {
|
|
5012
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4031
5013
|
*
|
|
4032
|
-
* const
|
|
5014
|
+
* const virtual = createVirtual(items)
|
|
5015
|
+
* const { items } = virtual
|
|
4033
5016
|
* </script>
|
|
4034
5017
|
*
|
|
4035
5018
|
* <template>
|
|
@@ -4046,9 +5029,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4046
5029
|
* @example
|
|
4047
5030
|
* ```vue
|
|
4048
5031
|
* <script setup lang="ts">
|
|
4049
|
-
* import {
|
|
5032
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4050
5033
|
*
|
|
4051
|
-
* const
|
|
5034
|
+
* const virtual = createVirtual(items)
|
|
5035
|
+
* const { offset } = virtual
|
|
4052
5036
|
* </script>
|
|
4053
5037
|
*
|
|
4054
5038
|
* <template>
|
|
@@ -4063,9 +5047,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4063
5047
|
* @example
|
|
4064
5048
|
* ```vue
|
|
4065
5049
|
* <script setup lang="ts">
|
|
4066
|
-
* import {
|
|
5050
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4067
5051
|
*
|
|
4068
|
-
* const
|
|
5052
|
+
* const virtual = createVirtual(items)
|
|
5053
|
+
* const { size } = virtual
|
|
4069
5054
|
* </script>
|
|
4070
5055
|
*
|
|
4071
5056
|
* <template>
|
|
@@ -4080,9 +5065,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4080
5065
|
* @example
|
|
4081
5066
|
* ```vue
|
|
4082
5067
|
* <script setup lang="ts">
|
|
4083
|
-
* import {
|
|
5068
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4084
5069
|
*
|
|
4085
|
-
* const
|
|
5070
|
+
* const virtual = createVirtual(items)
|
|
5071
|
+
* const { state } = virtual
|
|
4086
5072
|
* </script>
|
|
4087
5073
|
*
|
|
4088
5074
|
* <template>
|
|
@@ -4100,9 +5086,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4100
5086
|
* @example
|
|
4101
5087
|
* ```vue
|
|
4102
5088
|
* <script setup lang="ts">
|
|
4103
|
-
* import {
|
|
5089
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4104
5090
|
*
|
|
4105
|
-
* const
|
|
5091
|
+
* const virtual = createVirtual(items)
|
|
5092
|
+
* const { scrollTo } = virtual
|
|
4106
5093
|
* </script>
|
|
4107
5094
|
*
|
|
4108
5095
|
* <template>
|
|
@@ -4118,9 +5105,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4118
5105
|
* @example
|
|
4119
5106
|
* ```vue
|
|
4120
5107
|
* <script setup lang="ts">
|
|
4121
|
-
* import {
|
|
5108
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4122
5109
|
*
|
|
4123
|
-
* const
|
|
5110
|
+
* const virtual = createVirtual(items)
|
|
5111
|
+
* const { element, scroll } = virtual
|
|
4124
5112
|
* </script>
|
|
4125
5113
|
*
|
|
4126
5114
|
* <template>
|
|
@@ -4139,9 +5127,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4139
5127
|
* @example
|
|
4140
5128
|
* ```vue
|
|
4141
5129
|
* <script setup lang="ts">
|
|
4142
|
-
* import {
|
|
5130
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4143
5131
|
*
|
|
4144
|
-
* const
|
|
5132
|
+
* const virtual = createVirtual(items)
|
|
5133
|
+
* const { scroll, scrollend } = virtual
|
|
4145
5134
|
* </script>
|
|
4146
5135
|
*
|
|
4147
5136
|
* <template>
|
|
@@ -4160,9 +5149,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4160
5149
|
* @example
|
|
4161
5150
|
* ```vue
|
|
4162
5151
|
* <script setup lang="ts">
|
|
4163
|
-
* import {
|
|
5152
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4164
5153
|
*
|
|
4165
|
-
* const
|
|
5154
|
+
* const virtual = createVirtual(items)
|
|
5155
|
+
* const { resize } = virtual
|
|
4166
5156
|
* </script>
|
|
4167
5157
|
*
|
|
4168
5158
|
* <template>
|
|
@@ -4177,9 +5167,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4177
5167
|
* @example
|
|
4178
5168
|
* ```vue
|
|
4179
5169
|
* <script setup lang="ts">
|
|
4180
|
-
* import {
|
|
5170
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4181
5171
|
*
|
|
4182
|
-
* const
|
|
5172
|
+
* const virtual = createVirtual(items)
|
|
5173
|
+
* const { reset } = virtual
|
|
4183
5174
|
* </script>
|
|
4184
5175
|
*
|
|
4185
5176
|
* <template>
|
|
@@ -4192,6 +5183,10 @@ interface VirtualContext<T = unknown> {
|
|
|
4192
5183
|
*/
|
|
4193
5184
|
reset: () => void;
|
|
4194
5185
|
}
|
|
5186
|
+
interface VirtualContextOptions extends VirtualOptions {
|
|
5187
|
+
/** Namespace for dependency injection */
|
|
5188
|
+
namespace?: string;
|
|
5189
|
+
}
|
|
4195
5190
|
/**
|
|
4196
5191
|
* Virtual scrolling composable for efficiently rendering large lists
|
|
4197
5192
|
*
|
|
@@ -4199,33 +5194,88 @@ interface VirtualContext<T = unknown> {
|
|
|
4199
5194
|
* @param options Configuration options
|
|
4200
5195
|
* @returns Virtual scrolling context
|
|
4201
5196
|
*
|
|
4202
|
-
* @see https://0.vuetifyjs.com/composables/utilities/
|
|
5197
|
+
* @see https://0.vuetifyjs.com/composables/utilities/create-virtual
|
|
4203
5198
|
*
|
|
4204
5199
|
* @example
|
|
4205
5200
|
* ```vue
|
|
4206
5201
|
* <script setup lang="ts">
|
|
4207
|
-
* import {
|
|
5202
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
4208
5203
|
*
|
|
4209
5204
|
* const items = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })))
|
|
5205
|
+
* const virtual = createVirtual(items)
|
|
4210
5206
|
* </script>
|
|
4211
5207
|
*
|
|
4212
5208
|
* <template>
|
|
4213
5209
|
* <div
|
|
4214
|
-
* ref="element"
|
|
5210
|
+
* ref="virtual.element"
|
|
4215
5211
|
* style="height: 600px; overflow-y: auto;"
|
|
4216
|
-
* @scroll="scroll"
|
|
5212
|
+
* @scroll="virtual.scroll"
|
|
4217
5213
|
* >
|
|
4218
|
-
* <div :style="{ height: `${offset}px` }" />
|
|
5214
|
+
* <div :style="{ height: `${virtual.offset.value}px` }" />
|
|
4219
5215
|
*
|
|
4220
|
-
* <div v-for="item in items" :key="item.index">
|
|
5216
|
+
* <div v-for="item in virtual.items.value" :key="item.index">
|
|
4221
5217
|
* {{ item.raw.name }}
|
|
4222
5218
|
* </div>
|
|
4223
5219
|
*
|
|
4224
|
-
* <div :style="{ height: `${size}px` }" />
|
|
5220
|
+
* <div :style="{ height: `${virtual.size.value}px` }" />
|
|
5221
|
+
* </div>
|
|
5222
|
+
* </template>
|
|
5223
|
+
* ```
|
|
5224
|
+
*/
|
|
5225
|
+
declare function createVirtual<T = unknown>(items: Ref<readonly T[]>, _options?: VirtualOptions): VirtualContext<T>;
|
|
5226
|
+
/**
|
|
5227
|
+
* Creates a virtual scrolling context with dependency injection support.
|
|
5228
|
+
*
|
|
5229
|
+
* @param items Reactive array of items to virtualize
|
|
5230
|
+
* @param options Configuration options including namespace
|
|
5231
|
+
* @template T The type of the items
|
|
5232
|
+
* @returns Trinity tuple: [useVirtual, provideVirtual, defaultVirtual]
|
|
5233
|
+
*
|
|
5234
|
+
* @see https://0.vuetifyjs.com/composables/utilities/create-virtual
|
|
5235
|
+
*
|
|
5236
|
+
* @example
|
|
5237
|
+
* ```ts
|
|
5238
|
+
* // Create injectable context
|
|
5239
|
+
* const [useVirtual, provideVirtual, virtual] = createVirtualContext(items, {
|
|
5240
|
+
* namespace: 'my-virtual',
|
|
5241
|
+
* overscan: 10,
|
|
5242
|
+
* })
|
|
5243
|
+
*
|
|
5244
|
+
* // In parent component
|
|
5245
|
+
* provideVirtual()
|
|
5246
|
+
*
|
|
5247
|
+
* // In child component
|
|
5248
|
+
* const virtual = useVirtual()
|
|
5249
|
+
* ```
|
|
5250
|
+
*/
|
|
5251
|
+
declare function createVirtualContext<T = unknown>(items: Ref<readonly T[]>, _options?: VirtualContextOptions): ContextTrinity<VirtualContext<T>>;
|
|
5252
|
+
/**
|
|
5253
|
+
* Returns the current virtual context from dependency injection.
|
|
5254
|
+
*
|
|
5255
|
+
* @param namespace The namespace for the virtual context. Defaults to `v0:virtual`.
|
|
5256
|
+
* @template T The type of the items
|
|
5257
|
+
* @returns The current virtual context.
|
|
5258
|
+
*
|
|
5259
|
+
* @throws An error if the virtual context is not found and no default is provided.
|
|
5260
|
+
*
|
|
5261
|
+
* @see https://0.vuetifyjs.com/composables/utilities/create-virtual
|
|
5262
|
+
*
|
|
5263
|
+
* @example
|
|
5264
|
+
* ```vue
|
|
5265
|
+
* <script lang="ts" setup>
|
|
5266
|
+
* import { createVirtual } from '@vuetify/v0'
|
|
5267
|
+
*
|
|
5268
|
+
* // Inject virtual context provided by parent
|
|
5269
|
+
* const virtual = useVirtual()
|
|
5270
|
+
* </script>
|
|
5271
|
+
*
|
|
5272
|
+
* <template>
|
|
5273
|
+
* <div>
|
|
5274
|
+
* <p>Visible items: {{ virtual.items.value.length }}</p>
|
|
4225
5275
|
* </div>
|
|
4226
5276
|
* </template>
|
|
4227
5277
|
* ```
|
|
4228
5278
|
*/
|
|
4229
|
-
declare function useVirtual<T = unknown>(
|
|
5279
|
+
declare function useVirtual<T = unknown>(namespace?: string): VirtualContext<T>;
|
|
4230
5280
|
//#endregion
|
|
4231
|
-
export {
|
|
5281
|
+
export { useStep as $, SelectionTicket as $i, UseHotkeyReturn as $n, BreakpointName as $r, NestedTicketInput as $t, createTheme as A, GroupTicketInput as Ai, createLocaleFallback as An, TokenValue as Ar, PermissionContextOptions as At, StorageOptions as B, createBreadcrumbsContext as Bi, useElementIntersection as Bn, DateContextOptions as Br, createNested as Bt, ThemeContext as C, createOverflow as Ci, LocaleOptions as Cn, TokenAlias as Cr, useQueue as Ct, ThemeRecord as D, GroupContextOptions as Di, LocaleTicketInput as Dn, TokenOptions as Dr, ProxyModelOptions as Dt, ThemePluginOptions as E, GroupContext as Ei, LocaleTicket as En, TokenContextOptions as Er, useProxyRegistry as Et, Vuetify0ThemeOptions as F, BreadcrumbTicketInput as Fi, useLazy as Fn, EventHandler as Fr, createPermissionsContext as Ft, useStorage as G, SingleTicket as Gi, HydrationPluginOptions as Gn, createDatePlugin as Gr, NestedActiveMode as Gt, createStorage as H, SingleContext as Hi, HydrationContext as Hn, DatePluginOptions as Hr, useNested as Ht, ThemeAdapter as I, BreadcrumbsContext as Ii, IntersectionObserverEntry as In, useDocumentEventListener as Ir, createPermissionsPlugin as It, StepOptions as J, createSingleContext as Ji, createHydrationContext as Jn, ClickOutsideIgnoreTarget as Jr, NestedOpenMode as Jt, StepContext as K, SingleTicketInput as Ki, createFallbackHydration as Kn, useDate as Kr, NestedContext as Kt, ThemeAdapterInterface as L, BreadcrumbsContextOptions as Li, IntersectionObserverOptions as Ln, useEventListener as Lr, usePermissions as Lt, createThemePlugin as M, createGroupContext as Mi, useLocale as Mn, createTokensContext as Mr, PermissionPluginOptions as Mt, useTheme as N, useGroup as Ni, LazyContext as Nn, useTokens as Nr, PermissionTicket as Nt, ThemeTicket as O, GroupOptions as Oi, createLocale as On, TokenPrimitive as Or, useProxyModel as Ot, Vuetify0ThemeAdapter as P, BreadcrumbTicket as Pi, LazyOptions as Pn, CleanupFunction as Pr, createPermissions as Pt, createStepContext as Q, SelectionOptions as Qi, UseHotkeyOptions as Qn, useClickOutside as Qr, NestedTicket as Qt, StorageContext as R, BreadcrumbsOptions as Ri, UseElementIntersectionReturn as Rn, useWindowEventListener as Rr, PermissionAdapter as Rt, ThemeColors as S, OverflowOptions as Si, LocaleContextOptions as Sn, FlatTokenCollection as Sr, createQueueContext as St, ThemeOptions as T, useOverflow as Ti, LocaleRecord as Tn, TokenContext as Tr, ProxyRegistryOptions as Tt, createStorageContext as U, SingleContextOptions as Ui, HydrationContextOptions as Un, createDate as Ur, multipleOpenStrategy as Ut, StoragePluginOptions as V, useBreadcrumbs as Vi, useIntersectionObserver as Vn, DateOptions as Vr, createNestedContext as Vt, createStoragePlugin as W, SingleOptions as Wi, HydrationOptions as Wn, createDateContext as Wr, singleOpenStrategy as Wt, StepTicketInput as X, SelectionContext as Xi, useHydration as Xn, UseClickOutsideOptions as Xr, NestedRegistration as Xt, StepTicket as Y, useSingle as Yi, createHydrationPlugin as Yn, ClickOutsideTarget as Yr, NestedOptions as Yt, createStep as Z, SelectionContextOptions as Zi, PlatformContext as Zn, UseClickOutsideReturn as Zr, NestedSelectionMode as Zt, TimelineTicket as _, createContext as _i, createLoggerContext as _n, FeatureTicketInput as _r, QueueContextOptions as _t, VirtualDirection as a, RegistryContextOptions as aa, createBreakpointsContext as ai, UseMutationObserverReturn as an, FormTicketInput as ar, StackTicketInput as at, useTimeline as b, OverflowContext as bi, LogLevel as bn, createFeaturesPlugin as br, QueueTicketInput as bt, VirtualState as c, RegistryEventName as ca, toReactive as ci, useMediaQuery as cn, FormValue as cr, createStackPlugin as ct, useVirtual as d, RegistryTicketInput as da, PluginContextConfig as di, usePrefersReducedMotion as dn, useForm as dr, ResizeObserverOptions as dt, SelectionTicketInput as ea, BreakpointsContext as ei, OpenStrategy as en, useHotkey as er, StackContext as et, ToggleScopeControls as f, createRegistry as fa, PluginOptions as fi, LoggerContext as fn, FeatureContext as fr, UseElementSizeReturn as ft, TimelineOptions as g, CreateContextOptions as gi, createLogger as gn, FeatureTicket as gr, QueueContext as gt, TimelineContextOptions as h, ContextKey as hi, LoggerPluginOptions as hn, FeaturePluginOptions as hr, useResizeObserver as ht, VirtualContextOptions as i, RegistryContext as ia, createBreakpoints as ii, UseMutationObserverOptions as in, FormTicket as ir, StackTicket as it, createThemeContext as j, createGroup as ji, createLocalePlugin as jn, createTokens as jr, PermissionOptions as jt, ThemeTicketInput as k, GroupTicket as ki, createLocaleContext as kn, TokenTicket as kr, PermissionContext as kt, createVirtual as l, RegistryOptions as la, toArray as li, usePrefersContrast as ln, createForm as lr, useStack as lt, TimelineContext as m, useRegistry as ma, createPluginContext as mi, LoggerOptions as mn, FeatureOptions as mr, useElementSize as mt, VirtualAnchor as n, createSelectionContext as na, BreakpointsOptions as ni, MutationObserverRecord as nn, FormContextOptions as nr, StackOptions as nt, VirtualItem as o, RegistryEventCallback as oa, createBreakpointsPlugin as oi, useMutationObserver as on, FormValidationResult as or, createStack as ot, useToggleScope as p, createRegistryContext as pa, createPlugin as pi, LoggerContextOptions as pn, FeatureContextOptions as pr, UseResizeObserverReturn as pt, StepContextOptions as q, createSingle as qi, createHydration as qn, ClickOutsideElement as qr, NestedContextOptions as qt, VirtualContext as r, useSelection as ra, BreakpointsPluginOptions as ri, ObservableNodeList as rn, FormOptions as rr, StackPluginOptions as rt, VirtualOptions as s, RegistryEventMap as sa, useBreakpoints as si, MediaQueryContext as sn, FormValidationRule as sr, createStackContext as st, ScrollToOptions as t, createSelection as ta, BreakpointsContextOptions as ti, OpenStrategyContext as tn, FormContext as tr, StackContextOptions as tt, createVirtualContext as u, RegistryTicket as ua, Plugin as ui, usePrefersDark as un, createFormContext as ur, ResizeObserverEntry as ut, createTimeline as v, provideContext as vi, createLoggerPlugin as vn, createFeatures as vr, QueueOptions as vt, ThemeContextOptions as w, createOverflowContext as wi, LocalePluginOptions as wn, TokenCollection as wr, ProxyRegistryContext as wt, Colors as x, OverflowContextOptions as xi, LocaleContext as xn, useFeatures as xr, createQueue as xt, createTimelineContext as y, useContext as yi, useLogger as yn, createFeaturesContext as yr, QueueTicket as yt, StorageContextOptions as z, createBreadcrumbs as zi, UseIntersectionObserverReturn as zn, DateContext as zr, PermissionAdapterInterface as zt };
|