@vuetify/v0 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +6116 -4527
- package/dist/components/index.d.mts +4 -4
- package/dist/components/index.mjs +5 -5
- package/dist/components-Dk00OFL2.mjs +1445 -0
- package/dist/composables/index.d.mts +4 -4
- package/dist/composables/index.mjs +5 -4
- package/dist/composables-YOUVfUsn.mjs +2765 -0
- package/dist/constants/index.d.mts +1 -1
- package/dist/constants/index.mjs +2 -2
- package/dist/{globals-D7kNBw5Q.mjs → globals-Rnihe4SF.mjs} +1 -1
- package/dist/index-BXN7M6o_.d.mts +71 -0
- package/dist/index-BeJMYhId.d.mts +1726 -0
- package/dist/{index-D-EP6KrS.d.mts → index-BulceeMA.d.mts} +575 -56
- package/dist/{index-CQjOW_w5.d.mts → index-BzW68rBC.d.mts} +764 -481
- package/dist/index.d.mts +7 -7
- package/dist/index.mjs +7 -6
- package/dist/types/index.d.mts +1 -1
- package/dist/useStep-Bqhi_DDs.mjs +3159 -0
- package/dist/utilities/index.d.mts +3 -3
- package/dist/utilities/index.mjs +2 -2
- package/dist/utilities-DQWf_4V_.mjs +139 -0
- package/package.json +1 -1
- package/dist/components-CziOUEkN.mjs +0 -947
- package/dist/composables-CGvbvF3U.mjs +0 -4902
- package/dist/index-CSdGoUCI.d.mts +0 -17
- package/dist/index-CUnI4hGb.d.mts +0 -815
- package/dist/utilities-C26nB74O.mjs +0 -63
- /package/dist/{constants-Xfszzyok.mjs → constants-BWV0uYsM.mjs} +0 -0
- /package/dist/{index-8AIxAM2d.d.mts → index-B6lIRI3i.d.mts} +0 -0
- /package/dist/{index-DY7-T630.d.mts → index-Bd3J4RNS.d.mts} +0 -0
|
@@ -1,10 +1,98 @@
|
|
|
1
|
-
import { a as MaybeArray, i as ID } from "./index-
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { App, ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef, UnwrapNestedRefs } from "vue";
|
|
1
|
+
import { a as MaybeArray, i as ID } from "./index-Bd3J4RNS.mjs";
|
|
2
|
+
import { H as ContextTrinity, I as RegistryContext, L as RegistryContextOptions, M as SelectionTicket, R as RegistryOptions, S as GroupContext, T as GroupTicket, c as SingleContext, d as SingleTicket, k as SelectionContext, u as SingleOptions, z as RegistryTicket } from "./index-BulceeMA.mjs";
|
|
3
|
+
import { App, ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef, UnwrapNestedRefs, WatchSource } from "vue";
|
|
5
4
|
|
|
6
|
-
//#region src/composables/
|
|
5
|
+
//#region src/composables/createContext/index.d.ts
|
|
7
6
|
|
|
7
|
+
type ContextKey<Z> = InjectionKey<Z> | string;
|
|
8
|
+
interface CreateContextOptions {
|
|
9
|
+
/** Optional suffix to append to the runtime key */
|
|
10
|
+
suffix?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Injects a context provided by an ancestor component.
|
|
14
|
+
*
|
|
15
|
+
* @param key The key of the context to inject.
|
|
16
|
+
* @param defaultValue Optional default value if context is not found.
|
|
17
|
+
* @template Z The type of the context.
|
|
18
|
+
* @returns The injected context.
|
|
19
|
+
* @throws An error if the context is not found and no default is provided.
|
|
20
|
+
*
|
|
21
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html#inject
|
|
22
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#use-context
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```ts
|
|
26
|
+
* // Without default value
|
|
27
|
+
* const context = useContext<MyContext>('my-context')
|
|
28
|
+
*
|
|
29
|
+
* // With default value
|
|
30
|
+
* const context = useContext<MyContext>('my-context', defaultContext)
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
declare function useContext<Z>(key: ContextKey<Z>, defaultValue?: Z): Z;
|
|
34
|
+
/**
|
|
35
|
+
* Provides a context to all descendant components.
|
|
36
|
+
*
|
|
37
|
+
* @param key The key of the context to provide.
|
|
38
|
+
* @param context The context to provide.
|
|
39
|
+
* @param app Optional Vue app instance to provide the context at app level instead of component level.
|
|
40
|
+
* @template Z The type of the context.
|
|
41
|
+
* @returns The provided context.
|
|
42
|
+
*
|
|
43
|
+
* @remarks
|
|
44
|
+
* When `app` parameter is provided, the context is made available to all components in the app.
|
|
45
|
+
* When omitted, the context is provided at the current component level and available to descendants only.
|
|
46
|
+
*
|
|
47
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html#provide
|
|
48
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#provide-context
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* ```ts
|
|
52
|
+
* // Component-level provision
|
|
53
|
+
* provideContext<MyContext>('my-context', context)
|
|
54
|
+
*
|
|
55
|
+
* // App-level provision (typically used in plugins)
|
|
56
|
+
* const app = createApp()
|
|
57
|
+
* provideContext<MyContext>('my-context', context, app)
|
|
58
|
+
* ```
|
|
59
|
+
*/
|
|
60
|
+
declare function provideContext<Z>(key: ContextKey<Z>, context: Z, app?: App): Z;
|
|
61
|
+
/**
|
|
62
|
+
* Creates a new context for providing and injecting data.
|
|
63
|
+
*
|
|
64
|
+
* Supports two modes:
|
|
65
|
+
* - **Static key mode**: Pass a string/symbol key. The key is fixed at creation time.
|
|
66
|
+
* - **Dynamic key mode**: Pass nothing or an options object. The key is provided at runtime.
|
|
67
|
+
*
|
|
68
|
+
* @template Z The type of the context.
|
|
69
|
+
* @returns A tuple containing the `useContext` and `provideContext` functions.
|
|
70
|
+
*
|
|
71
|
+
* @see https://vuejs.org/api/composition-api-dependency-injection.html
|
|
72
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context#create-context
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```ts
|
|
76
|
+
* // Static key mode - key fixed at creation
|
|
77
|
+
* const [useContext, provideContext] = createContext<ThemeContext>('v0:theme')
|
|
78
|
+
* provideContext(context) // provides to 'v0:theme'
|
|
79
|
+
* useContext() // injects from 'v0:theme'
|
|
80
|
+
*
|
|
81
|
+
* // Dynamic key mode - key provided at runtime
|
|
82
|
+
* const [useContext, provideContext] = createContext<PanelContext>()
|
|
83
|
+
* provideContext('v0:panel', context) // provides to 'v0:panel'
|
|
84
|
+
* useContext('v0:panel') // injects from 'v0:panel'
|
|
85
|
+
*
|
|
86
|
+
* // Dynamic key with suffix - suffix appended to runtime key
|
|
87
|
+
* const [useContext, provideContext] = createContext<ItemContext>({ suffix: 'item' })
|
|
88
|
+
* provideContext('v0:panel', context) // provides to 'v0:panel:item'
|
|
89
|
+
* useContext('v0:panel') // injects from 'v0:panel:item'
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
declare function createContext<Z>(key: ContextKey<Z>, defaultValue?: Z): readonly [() => Z, (context: Z, app?: App) => Z];
|
|
93
|
+
declare function createContext<Z>(options?: CreateContextOptions): readonly [(key: string, defaultValue?: Z) => Z, (key: string, context: Z, app?: App) => Z];
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/composables/createPlugin/index.d.ts
|
|
8
96
|
interface PluginOptions {
|
|
9
97
|
namespace: string;
|
|
10
98
|
provide: (app: App) => void;
|
|
@@ -317,127 +405,6 @@ declare function useWindowEventListener<E extends keyof WindowEventMap>(event: M
|
|
|
317
405
|
*/
|
|
318
406
|
declare function useDocumentEventListener<E extends keyof DocumentEventMap>(event: MaybeRefOrGetter<MaybeArray<E>>, listener: MaybeRef<MaybeArray<(this: Document, event: DocumentEventMap[E]) => any>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): CleanupFunction;
|
|
319
407
|
//#endregion
|
|
320
|
-
//#region src/composables/useGroup/index.d.ts
|
|
321
|
-
interface GroupTicket extends SelectionTicket {}
|
|
322
|
-
interface GroupContext<Z extends GroupTicket> extends SelectionContext<Z> {
|
|
323
|
-
selectedIndexes: ComputedRef<Set<number>>;
|
|
324
|
-
/** Select one or more Tickets by ID */
|
|
325
|
-
select: (ids: ID | ID[]) => void;
|
|
326
|
-
/** Unselect one or more Tickets by ID */
|
|
327
|
-
unselect: (ids: ID | ID[]) => void;
|
|
328
|
-
/** Toggle one or more Tickets ON and OFF by ID */
|
|
329
|
-
toggle: (ids: ID | ID[]) => void;
|
|
330
|
-
}
|
|
331
|
-
interface GroupOptions extends SelectionOptions {}
|
|
332
|
-
interface GroupContextOptions extends SelectionContextOptions {}
|
|
333
|
-
/**
|
|
334
|
-
* Creates a new group instance with batch selection operations.
|
|
335
|
-
*
|
|
336
|
-
* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
|
|
337
|
-
* at once by passing an array of IDs. Adds `selectedIndexes` computed property.
|
|
338
|
-
*
|
|
339
|
-
* @param options The options for the group instance.
|
|
340
|
-
* @template Z The type of the group ticket.
|
|
341
|
-
* @template E The type of the group context.
|
|
342
|
-
* @returns A new group instance with batch selection support.
|
|
343
|
-
*
|
|
344
|
-
* @remarks
|
|
345
|
-
* **Key Differences from `createSelection`:**
|
|
346
|
-
* - `select()` accepts `ID | ID[]` for batch operations
|
|
347
|
-
* - `unselect()` accepts `ID | ID[]` for batch operations
|
|
348
|
-
* - `toggle()` accepts `ID | ID[]` for batch operations
|
|
349
|
-
* - Adds `selectedIndexes` computed Set for getting selected item indexes
|
|
350
|
-
* - Perfect for checkboxes, multi-select dropdowns, and bulk operations
|
|
351
|
-
*
|
|
352
|
-
* **Batch Operations:**
|
|
353
|
-
* - Single ID: `group.select('item-1')`
|
|
354
|
-
* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
|
|
355
|
-
* - Uses `toArray()` utility internally to normalize input
|
|
356
|
-
* - Disabled items are automatically skipped in batch operations
|
|
357
|
-
* - Non-existent IDs are silently ignored
|
|
358
|
-
*
|
|
359
|
-
* **Inheritance Chain:**
|
|
360
|
-
* `useRegistry` → `createSelection` → `createGroup`
|
|
361
|
-
*
|
|
362
|
-
* **Used By:**
|
|
363
|
-
* - `createFeatures` for feature flag management with multiple selections
|
|
364
|
-
*
|
|
365
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
366
|
-
*
|
|
367
|
-
* @example
|
|
368
|
-
* ```ts
|
|
369
|
-
* import { createGroup } from '@vuetify/v0'
|
|
370
|
-
*
|
|
371
|
-
* const checkboxes = createGroup()
|
|
372
|
-
*
|
|
373
|
-
* checkboxes.onboard([
|
|
374
|
-
* { id: 'option-a', value: 'Option A' },
|
|
375
|
-
* { id: 'option-b', value: 'Option B' },
|
|
376
|
-
* { id: 'option-c', value: 'Option C' },
|
|
377
|
-
* ])
|
|
378
|
-
*
|
|
379
|
-
* // Select multiple items at once
|
|
380
|
-
* checkboxes.select(['option-a', 'option-c'])
|
|
381
|
-
*
|
|
382
|
-
* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
|
|
383
|
-
* console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
|
|
384
|
-
*
|
|
385
|
-
* // Toggle operations
|
|
386
|
-
* checkboxes.toggle(['option-a', 'option-b'])
|
|
387
|
-
* console.log(checkboxes.selectedIds) // Set { 'option-b', 'option-c' }
|
|
388
|
-
* ```
|
|
389
|
-
*/
|
|
390
|
-
declare function createGroup<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(_options?: GroupOptions): E;
|
|
391
|
-
/**
|
|
392
|
-
* Creates a new group context.
|
|
393
|
-
*
|
|
394
|
-
* @param namespace The namespace for the group context.
|
|
395
|
-
* @param options The options for the group context.
|
|
396
|
-
* @template Z The type of the group ticket.
|
|
397
|
-
* @template E The type of the group context.
|
|
398
|
-
* @returns A new group context.
|
|
399
|
-
*
|
|
400
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
401
|
-
*
|
|
402
|
-
* @example
|
|
403
|
-
* ```ts
|
|
404
|
-
* import { createGroupContext } from '@vuetify/v0'
|
|
405
|
-
*
|
|
406
|
-
* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext('my-group')
|
|
407
|
-
*
|
|
408
|
-
* // In a parent component:
|
|
409
|
-
* provideMyGroup()
|
|
410
|
-
*
|
|
411
|
-
* // In a child component:
|
|
412
|
-
* const group = useMyGroup()
|
|
413
|
-
* ```
|
|
414
|
-
*/
|
|
415
|
-
declare function createGroupContext<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(_options: GroupContextOptions): ContextTrinity<E>;
|
|
416
|
-
/**
|
|
417
|
-
* Returns the current group instance.
|
|
418
|
-
*
|
|
419
|
-
* @param namespace The namespace for the group context. Defaults to `'v0:group'`.
|
|
420
|
-
* @returns The current group instance.
|
|
421
|
-
*
|
|
422
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-group
|
|
423
|
-
*
|
|
424
|
-
* @example
|
|
425
|
-
* ```vue
|
|
426
|
-
* <script setup lang="ts">
|
|
427
|
-
* import { useGroup } from '@vuetify/v0'
|
|
428
|
-
*
|
|
429
|
-
* const group = useGroup()
|
|
430
|
-
* </script>
|
|
431
|
-
*
|
|
432
|
-
* <template>
|
|
433
|
-
* <div>
|
|
434
|
-
* <p>Selected: {{ group.selectedIds.size }}</p>
|
|
435
|
-
* </div>
|
|
436
|
-
* </template>
|
|
437
|
-
* ```
|
|
438
|
-
*/
|
|
439
|
-
declare function useGroup<Z extends GroupTicket = GroupTicket, E extends GroupContext<Z> = GroupContext<Z>>(namespace: string): E;
|
|
440
|
-
//#endregion
|
|
441
408
|
//#region src/composables/useTokens/index.d.ts
|
|
442
409
|
interface TokenAlias<T = unknown> {
|
|
443
410
|
[key: string]: unknown;
|
|
@@ -447,7 +414,7 @@ interface TokenAlias<T = unknown> {
|
|
|
447
414
|
$extensions?: Record<string, unknown>;
|
|
448
415
|
$deprecated?: boolean | string;
|
|
449
416
|
}
|
|
450
|
-
type TokenPrimitive = string | number | boolean | null;
|
|
417
|
+
type TokenPrimitive = string | number | boolean | null | Function;
|
|
451
418
|
type TokenValue = TokenPrimitive | TokenAlias;
|
|
452
419
|
interface TokenCollection {
|
|
453
420
|
[key: string]: TokenValue | TokenCollection;
|
|
@@ -456,7 +423,7 @@ type FlatTokenCollection = {
|
|
|
456
423
|
id: string;
|
|
457
424
|
value: TokenValue;
|
|
458
425
|
};
|
|
459
|
-
interface TokenTicket extends RegistryTicket {}
|
|
426
|
+
interface TokenTicket<Z extends TokenValue = TokenValue> extends RegistryTicket<Z> {}
|
|
460
427
|
interface TokenContext<Z extends TokenTicket> extends RegistryContext<Z> {
|
|
461
428
|
/**
|
|
462
429
|
* Checks if a token is an alias
|
|
@@ -597,11 +564,9 @@ declare function createTokensContext<Z extends TokenTicket = TokenTicket, E exte
|
|
|
597
564
|
declare function useTokens<Z extends TokenTicket = TokenTicket, E extends TokenContext<Z> = TokenContext<Z>>(namespace?: string): E;
|
|
598
565
|
//#endregion
|
|
599
566
|
//#region src/composables/useFeatures/index.d.ts
|
|
600
|
-
interface FeatureTicket extends GroupTicket {
|
|
601
|
-
value: TokenValue;
|
|
602
|
-
}
|
|
567
|
+
interface FeatureTicket extends GroupTicket<TokenValue> {}
|
|
603
568
|
interface FeatureContext<Z extends FeatureTicket = FeatureTicket> extends GroupContext<Z> {
|
|
604
|
-
variation: (id: ID, fallback?:
|
|
569
|
+
variation: (id: ID, fallback?: unknown) => unknown;
|
|
605
570
|
}
|
|
606
571
|
interface FeatureOptions extends RegistryOptions {
|
|
607
572
|
features?: Record<ID, boolean | TokenCollection>;
|
|
@@ -739,7 +704,7 @@ interface UseFilterResult<Z extends FilterItem = FilterItem> {
|
|
|
739
704
|
* @template Z The type of the items.
|
|
740
705
|
* @returns The filtered items.
|
|
741
706
|
*
|
|
742
|
-
* @see https://0.vuetifyjs.com/composables/
|
|
707
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-filter
|
|
743
708
|
*
|
|
744
709
|
* @example
|
|
745
710
|
* ```ts
|
|
@@ -762,9 +727,9 @@ declare function useFilter<Z extends FilterItem>(query: FilterQuery, items: Mayb
|
|
|
762
727
|
//#endregion
|
|
763
728
|
//#region src/composables/useForm/index.d.ts
|
|
764
729
|
type FormValidationResult = string | true | Promise<string | true>;
|
|
765
|
-
type FormValidationRule = (value:
|
|
766
|
-
type FormValue = Ref<
|
|
767
|
-
interface FormTicket extends RegistryTicket {
|
|
730
|
+
type FormValidationRule = (value: unknown) => FormValidationResult;
|
|
731
|
+
type FormValue = Ref<unknown> | ShallowRef<unknown>;
|
|
732
|
+
interface FormTicket<V = unknown> extends RegistryTicket<V> {
|
|
768
733
|
validate: (silent?: boolean) => Promise<boolean>;
|
|
769
734
|
reset: () => void;
|
|
770
735
|
validateOn: 'submit' | 'change' | string;
|
|
@@ -786,7 +751,7 @@ interface FormOptions extends RegistryOptions {
|
|
|
786
751
|
validateOn?: 'submit' | 'change' | string;
|
|
787
752
|
}
|
|
788
753
|
interface FormContextOptions extends RegistryOptions {
|
|
789
|
-
namespace
|
|
754
|
+
namespace?: string;
|
|
790
755
|
validateOn?: 'submit' | 'change' | string;
|
|
791
756
|
}
|
|
792
757
|
/**
|
|
@@ -822,7 +787,6 @@ declare function createForm<Z extends FormTicket = FormTicket, E extends FormCon
|
|
|
822
787
|
/**
|
|
823
788
|
* Creates a new form context.
|
|
824
789
|
*
|
|
825
|
-
* @param namespace The namespace for the form context.
|
|
826
790
|
* @param options The options for the form context.
|
|
827
791
|
* @template Z The type of the form ticket.
|
|
828
792
|
* @template E The type of the form context.
|
|
@@ -834,7 +798,12 @@ declare function createForm<Z extends FormTicket = FormTicket, E extends FormCon
|
|
|
834
798
|
* ```ts
|
|
835
799
|
* import { createFormContext } from '@vuetify/v0'
|
|
836
800
|
*
|
|
837
|
-
*
|
|
801
|
+
* // With default namespace 'v0:form'
|
|
802
|
+
* export const [useMyForm, provideMyForm, myForm] = createFormContext({ validateOn: 'change' })
|
|
803
|
+
*
|
|
804
|
+
* // Or with custom namespace
|
|
805
|
+
* export const [useMyForm, provideMyForm, myForm] = createFormContext({
|
|
806
|
+
* namespace: 'my-form',
|
|
838
807
|
* validateOn: 'change',
|
|
839
808
|
* })
|
|
840
809
|
*
|
|
@@ -846,7 +815,7 @@ declare function createForm<Z extends FormTicket = FormTicket, E extends FormCon
|
|
|
846
815
|
* form.register({ id: 'field', value: ref(''), rules: [...] })
|
|
847
816
|
* ```
|
|
848
817
|
*/
|
|
849
|
-
declare function createFormContext<Z extends FormTicket = FormTicket, E extends FormContext<Z> = FormContext<Z>>(_options
|
|
818
|
+
declare function createFormContext<Z extends FormTicket = FormTicket, E extends FormContext<Z> = FormContext<Z>>(_options?: FormContextOptions): ContextTrinity<E>;
|
|
850
819
|
/**
|
|
851
820
|
* Returns the current form instance.
|
|
852
821
|
*
|
|
@@ -900,6 +869,7 @@ interface HydrationPluginOptions extends HydrationContextOptions {}
|
|
|
900
869
|
* ```
|
|
901
870
|
*/
|
|
902
871
|
declare function createHydration<E extends HydrationContext = HydrationContext>(): E;
|
|
872
|
+
declare function createFallbackHydration<E extends HydrationContext = HydrationContext>(): E;
|
|
903
873
|
/**
|
|
904
874
|
* Creates a new hydration context trinity.
|
|
905
875
|
*
|
|
@@ -983,6 +953,32 @@ interface IntersectionObserverOptions {
|
|
|
983
953
|
rootMargin?: string;
|
|
984
954
|
threshold?: number | number[];
|
|
985
955
|
}
|
|
956
|
+
interface UseIntersectionObserverReturn {
|
|
957
|
+
/**
|
|
958
|
+
* Whether the observer is currently active (created and observing)
|
|
959
|
+
*/
|
|
960
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
961
|
+
/**
|
|
962
|
+
* Whether the target element is currently intersecting with the viewport
|
|
963
|
+
*/
|
|
964
|
+
readonly isIntersecting: Readonly<Ref<boolean>>;
|
|
965
|
+
/**
|
|
966
|
+
* Whether the observer is currently paused
|
|
967
|
+
*/
|
|
968
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
969
|
+
/**
|
|
970
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
971
|
+
*/
|
|
972
|
+
pause: () => void;
|
|
973
|
+
/**
|
|
974
|
+
* Resume observation
|
|
975
|
+
*/
|
|
976
|
+
resume: () => void;
|
|
977
|
+
/**
|
|
978
|
+
* Stop observation and clean up (destroys observer)
|
|
979
|
+
*/
|
|
980
|
+
stop: () => void;
|
|
981
|
+
}
|
|
986
982
|
/**
|
|
987
983
|
* A composable that uses the Intersection Observer API to detect when an element
|
|
988
984
|
* is visible in the viewport.
|
|
@@ -1022,13 +1018,13 @@ interface IntersectionObserverOptions {
|
|
|
1022
1018
|
* resume()
|
|
1023
1019
|
* ```
|
|
1024
1020
|
*/
|
|
1025
|
-
declare function useIntersectionObserver(target: Ref<Element | undefined>, callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverOptions):
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
}
|
|
1021
|
+
declare function useIntersectionObserver(target: Ref<Element | undefined>, callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverOptions): UseIntersectionObserverReturn;
|
|
1022
|
+
interface UseElementIntersectionReturn extends UseIntersectionObserverReturn {
|
|
1023
|
+
/**
|
|
1024
|
+
* The intersection ratio (0.0 to 1.0) indicating how much of the element is visible
|
|
1025
|
+
*/
|
|
1026
|
+
readonly intersectionRatio: Readonly<Ref<number>>;
|
|
1027
|
+
}
|
|
1032
1028
|
/**
|
|
1033
1029
|
* A convenience composable that uses the Intersection Observer API to detect
|
|
1034
1030
|
* when an element is visible in the viewport.
|
|
@@ -1057,36 +1053,29 @@ declare function useIntersectionObserver(target: Ref<Element | undefined>, callb
|
|
|
1057
1053
|
* })
|
|
1058
1054
|
* ```
|
|
1059
1055
|
*/
|
|
1060
|
-
declare function useElementIntersection(target: Ref<Element | undefined>, options?: IntersectionObserverOptions):
|
|
1061
|
-
isIntersecting: Readonly<Ref<boolean, boolean>>;
|
|
1062
|
-
intersectionRatio: Readonly<Ref<number, number>>;
|
|
1063
|
-
isPaused: Readonly<Ref<boolean, boolean>>;
|
|
1064
|
-
pause: () => void;
|
|
1065
|
-
resume: () => void;
|
|
1066
|
-
stop: () => void;
|
|
1067
|
-
};
|
|
1056
|
+
declare function useElementIntersection(target: Ref<Element | undefined>, options?: IntersectionObserverOptions): UseElementIntersectionReturn;
|
|
1068
1057
|
//#endregion
|
|
1069
1058
|
//#region src/composables/useKeydown/index.d.ts
|
|
1070
|
-
/**
|
|
1071
|
-
* @module useKeydown
|
|
1072
|
-
*
|
|
1073
|
-
* @remarks
|
|
1074
|
-
* Keydown event listener composable with key filtering.
|
|
1075
|
-
*
|
|
1076
|
-
* Key features:
|
|
1077
|
-
* - Key-specific event handling
|
|
1078
|
-
* - preventDefault and stopPropagation options
|
|
1079
|
-
* - Automatic cleanup on scope disposal
|
|
1080
|
-
* - Auto-starts when in component scope
|
|
1081
|
-
*
|
|
1082
|
-
* Simplified wrapper around useEventListener for keyboard interactions.
|
|
1083
|
-
*/
|
|
1084
1059
|
interface KeyHandler {
|
|
1085
1060
|
key: string;
|
|
1086
1061
|
handler: (event: KeyboardEvent) => void;
|
|
1087
1062
|
preventDefault?: boolean;
|
|
1088
1063
|
stopPropagation?: boolean;
|
|
1089
1064
|
}
|
|
1065
|
+
interface UseKeydownReturn {
|
|
1066
|
+
/**
|
|
1067
|
+
* Whether the listener is currently active
|
|
1068
|
+
*/
|
|
1069
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
1070
|
+
/**
|
|
1071
|
+
* Start listening for keydown events
|
|
1072
|
+
*/
|
|
1073
|
+
start: () => void;
|
|
1074
|
+
/**
|
|
1075
|
+
* Stop listening for keydown events
|
|
1076
|
+
*/
|
|
1077
|
+
stop: () => void;
|
|
1078
|
+
}
|
|
1090
1079
|
/**
|
|
1091
1080
|
* A composable that adds a keydown event listener to the document.
|
|
1092
1081
|
*
|
|
@@ -1099,131 +1088,18 @@ interface KeyHandler {
|
|
|
1099
1088
|
* ```ts
|
|
1100
1089
|
* import { useKeydown } from '@vuetify/v0'
|
|
1101
1090
|
*
|
|
1102
|
-
* const {
|
|
1091
|
+
* const { isActive, start, stop } = useKeydown([
|
|
1103
1092
|
* { key: 'Enter', handler: () => console.log('Enter pressed') },
|
|
1104
1093
|
* { key: 'Escape', handler: () => console.log('Escape pressed'), preventDefault: true },
|
|
1105
1094
|
* ])
|
|
1106
1095
|
*
|
|
1107
|
-
*
|
|
1108
|
-
*
|
|
1109
|
-
*
|
|
1110
|
-
|
|
1111
|
-
declare function useKeydown(handlers: KeyHandler[] | KeyHandler): {
|
|
1112
|
-
startListening: () => void;
|
|
1113
|
-
stopListening: () => void;
|
|
1114
|
-
};
|
|
1115
|
-
//#endregion
|
|
1116
|
-
//#region src/composables/useSingle/index.d.ts
|
|
1117
|
-
interface SingleTicket extends SelectionTicket {}
|
|
1118
|
-
interface SingleContext<Z extends SingleTicket> extends SelectionContext<Z> {
|
|
1119
|
-
selectedId: ComputedRef<ID | undefined>;
|
|
1120
|
-
selectedIndex: ComputedRef<number>;
|
|
1121
|
-
selectedItem: ComputedRef<Z | undefined>;
|
|
1122
|
-
selectedValue: ComputedRef<unknown>;
|
|
1123
|
-
}
|
|
1124
|
-
interface SingleOptions extends SelectionOptions {}
|
|
1125
|
-
interface SingleContextOptions extends SelectionContextOptions {}
|
|
1126
|
-
/**
|
|
1127
|
-
* Creates a new single selection instance that enforces only one selected item at a time.
|
|
1128
|
-
*
|
|
1129
|
-
* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
|
|
1130
|
-
* Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
|
|
1131
|
-
*
|
|
1132
|
-
* @param options The options for the single selection instance.
|
|
1133
|
-
* @template Z The type of the single selection ticket.
|
|
1134
|
-
* @template E The type of the single selection context.
|
|
1135
|
-
* @returns A new single selection instance with single-selection enforcement.
|
|
1136
|
-
*
|
|
1137
|
-
* @remarks
|
|
1138
|
-
* **Key Differences from `createSelection`:**
|
|
1139
|
-
* - Automatically clears `selectedIds` before selecting a new item (enforces single selection)
|
|
1140
|
-
* - Provides singular computed properties instead of plural sets
|
|
1141
|
-
* - Perfect for tabs, radio buttons, theme selectors, and other single-choice UI components
|
|
1142
|
-
*
|
|
1143
|
-
* **Computed Properties:**
|
|
1144
|
-
* - `selectedId`: The ID of the selected item (undefined if none selected)
|
|
1145
|
-
* - `selectedItem`: The selected ticket object (undefined if none selected)
|
|
1146
|
-
* - `selectedIndex`: The index of the selected item (-1 if none selected)
|
|
1147
|
-
* - `selectedValue`: The value of the selected item (undefined if none selected)
|
|
1148
|
-
*
|
|
1149
|
-
* **Inheritance Chain:**
|
|
1150
|
-
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
1151
|
-
*
|
|
1152
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1153
|
-
*
|
|
1154
|
-
* @example
|
|
1155
|
-
* ```ts
|
|
1156
|
-
* import { createSingle } from '@vuetify/v0'
|
|
1157
|
-
*
|
|
1158
|
-
* const tabs = createSingle({ mandatory: true })
|
|
1159
|
-
*
|
|
1160
|
-
* tabs.onboard([
|
|
1161
|
-
* { id: 'home', value: 'Home' },
|
|
1162
|
-
* { id: 'about', value: 'About' },
|
|
1163
|
-
* { id: 'contact', value: 'Contact' },
|
|
1164
|
-
* ])
|
|
1165
|
-
*
|
|
1166
|
-
* tabs.first() // Select first tab
|
|
1167
|
-
*
|
|
1168
|
-
* console.log(tabs.selectedId.value) // 'home'
|
|
1169
|
-
* console.log(tabs.selectedIndex.value) // 0
|
|
1170
|
-
*
|
|
1171
|
-
* tabs.select('about') // Switch to about tab
|
|
1172
|
-
* console.log(tabs.selectedId.value) // 'about'
|
|
1173
|
-
* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
|
|
1174
|
-
* ```
|
|
1175
|
-
*/
|
|
1176
|
-
declare function createSingle<Z extends SingleTicket = SingleTicket, E extends SingleContext<Z> = SingleContext<Z>>(_options?: SingleOptions): E;
|
|
1177
|
-
/**
|
|
1178
|
-
* Creates a new single selection context.
|
|
1179
|
-
*
|
|
1180
|
-
* @param namespace The namespace for the single selection context.
|
|
1181
|
-
* @param options The options for the single selection context.
|
|
1182
|
-
* @template Z The type of the single selection ticket.
|
|
1183
|
-
* @template E The type of the single selection context.
|
|
1184
|
-
* @returns A new single selection context.
|
|
1185
|
-
*
|
|
1186
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1187
|
-
*
|
|
1188
|
-
* @example
|
|
1189
|
-
* ```ts
|
|
1190
|
-
* import { createSingleContext } from '@vuetify/v0'
|
|
1191
|
-
*
|
|
1192
|
-
* export const [useTabs, provideTabs, tabs] = createSingleContext('tabs', { mandatory: true })
|
|
1193
|
-
*
|
|
1194
|
-
* // In a parent component:
|
|
1195
|
-
* provideTabs()
|
|
1196
|
-
*
|
|
1197
|
-
* // In a child component:
|
|
1198
|
-
* const tabs = useTabs()
|
|
1199
|
-
* tabs.select('tab-1')
|
|
1200
|
-
* ```
|
|
1201
|
-
*/
|
|
1202
|
-
declare function createSingleContext<Z extends SingleTicket = SingleTicket, E extends SingleContext<Z> = SingleContext<Z>>(_options: SingleContextOptions): ContextTrinity<E>;
|
|
1203
|
-
/**
|
|
1204
|
-
* Returns the current single selection instance.
|
|
1205
|
-
*
|
|
1206
|
-
* @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
|
|
1207
|
-
* @returns The current single selection instance.
|
|
1208
|
-
*
|
|
1209
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-single
|
|
1210
|
-
*
|
|
1211
|
-
* @example
|
|
1212
|
-
* ```vue
|
|
1213
|
-
* <script setup lang="ts">
|
|
1214
|
-
* import { useSingle } from '@vuetify/v0'
|
|
1215
|
-
*
|
|
1216
|
-
* const tabs = useSingle()
|
|
1217
|
-
* </script>
|
|
1218
|
-
*
|
|
1219
|
-
* <template>
|
|
1220
|
-
* <div>
|
|
1221
|
-
* <p>Selected: {{ tabs.selectedId }}</p>
|
|
1222
|
-
* </div>
|
|
1223
|
-
* </template>
|
|
1096
|
+
* // Listener is automatically active when called in component setup
|
|
1097
|
+
* // Manually control if needed:
|
|
1098
|
+
* stop()
|
|
1099
|
+
* start()
|
|
1224
1100
|
* ```
|
|
1225
1101
|
*/
|
|
1226
|
-
declare function
|
|
1102
|
+
declare function useKeydown(handlers: MaybeRefOrGetter<KeyHandler[] | KeyHandler>): UseKeydownReturn;
|
|
1227
1103
|
//#endregion
|
|
1228
1104
|
//#region src/composables/useLocale/adapters/adapter.d.ts
|
|
1229
1105
|
interface LocaleAdapter {
|
|
@@ -1237,7 +1113,7 @@ interface LocaleAdapter {
|
|
|
1237
1113
|
*
|
|
1238
1114
|
* This adapter provides translation and number formatting
|
|
1239
1115
|
* capabilities using the Intl API and supports both
|
|
1240
|
-
* numbered and named variables in translation strings.
|
|
1116
|
+
* numbered ({0}, {1}) and named ({name}) variables in translation strings.
|
|
1241
1117
|
*/
|
|
1242
1118
|
declare class Vuetify0LocaleAdapter implements LocaleAdapter {
|
|
1243
1119
|
t(message: string, ...params: unknown[]): string;
|
|
@@ -1248,7 +1124,29 @@ declare class Vuetify0LocaleAdapter implements LocaleAdapter {
|
|
|
1248
1124
|
type LocaleRecord = TokenCollection;
|
|
1249
1125
|
type LocaleTicket = SingleTicket;
|
|
1250
1126
|
interface LocaleContext<Z extends LocaleTicket> extends SingleContext<Z> {
|
|
1251
|
-
|
|
1127
|
+
/**
|
|
1128
|
+
* Translate a message key with optional parameters and fallback.
|
|
1129
|
+
*
|
|
1130
|
+
* @param key - The message key to look up
|
|
1131
|
+
* @param params - Optional object with named parameters for interpolation
|
|
1132
|
+
* @param fallback - Optional fallback string if key not found in messages
|
|
1133
|
+
* @returns The translated and interpolated message
|
|
1134
|
+
*
|
|
1135
|
+
* @example
|
|
1136
|
+
* ```ts
|
|
1137
|
+
* // Simple key lookup
|
|
1138
|
+
* locale.t('hello') // Returns message for 'hello' or 'hello' if not found
|
|
1139
|
+
*
|
|
1140
|
+
* // With parameters
|
|
1141
|
+
* locale.t('greeting', { name: 'World' }) // 'Hello {name}' → 'Hello World'
|
|
1142
|
+
*
|
|
1143
|
+
* // With fallback (useful for dynamic keys)
|
|
1144
|
+
* locale.t('Pagination.goToPage', { page: 5 }, `Go to page 5`)
|
|
1145
|
+
* // If 'pagination.goToPage' exists: uses that message with {page} replaced
|
|
1146
|
+
* // If not found: returns 'Go to page 5'
|
|
1147
|
+
* ```
|
|
1148
|
+
*/
|
|
1149
|
+
t: (key: string, params?: Record<string, unknown>, fallback?: string) => string;
|
|
1252
1150
|
n: (value: number) => string;
|
|
1253
1151
|
}
|
|
1254
1152
|
interface LocaleOptions<Z extends LocaleRecord = LocaleRecord> extends SingleOptions {
|
|
@@ -1272,6 +1170,7 @@ interface LocalePluginOptions extends LocaleContextOptions {}
|
|
|
1272
1170
|
* @see https://0.vuetifyjs.com/composables/plugins/use-locale
|
|
1273
1171
|
*/
|
|
1274
1172
|
declare function createLocale<Z extends LocaleTicket = LocaleTicket, E extends LocaleContext<Z> = LocaleContext<Z>>(_options?: LocaleOptions): E;
|
|
1173
|
+
declare function createLocaleFallback<Z extends LocaleTicket = LocaleTicket, E extends LocaleContext<Z> = LocaleContext<Z>>(): E;
|
|
1275
1174
|
/**
|
|
1276
1175
|
* Creates a new locale context.
|
|
1277
1176
|
*
|
|
@@ -1540,6 +1439,28 @@ interface UseMutationObserverOptions {
|
|
|
1540
1439
|
characterDataOldValue?: boolean;
|
|
1541
1440
|
attributeFilter?: string[];
|
|
1542
1441
|
}
|
|
1442
|
+
interface UseMutationObserverReturn {
|
|
1443
|
+
/**
|
|
1444
|
+
* Whether the observer is currently active (created and observing)
|
|
1445
|
+
*/
|
|
1446
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
1447
|
+
/**
|
|
1448
|
+
* Whether the observer is currently paused
|
|
1449
|
+
*/
|
|
1450
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
1451
|
+
/**
|
|
1452
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
1453
|
+
*/
|
|
1454
|
+
pause: () => void;
|
|
1455
|
+
/**
|
|
1456
|
+
* Resume observation
|
|
1457
|
+
*/
|
|
1458
|
+
resume: () => void;
|
|
1459
|
+
/**
|
|
1460
|
+
* Stop observation and clean up (destroys observer)
|
|
1461
|
+
*/
|
|
1462
|
+
stop: () => void;
|
|
1463
|
+
}
|
|
1543
1464
|
/**
|
|
1544
1465
|
* A composable that uses the Mutation Observer API to detect changes in the DOM.
|
|
1545
1466
|
*
|
|
@@ -1583,12 +1504,142 @@ interface UseMutationObserverOptions {
|
|
|
1583
1504
|
* resume()
|
|
1584
1505
|
* ```
|
|
1585
1506
|
*/
|
|
1586
|
-
declare function useMutationObserver(target: Ref<Element | undefined>, callback: (entries: MutationObserverRecord[]) => void, options?: UseMutationObserverOptions):
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1507
|
+
declare function useMutationObserver(target: Ref<Element | undefined>, callback: (entries: MutationObserverRecord[]) => void, options?: UseMutationObserverOptions): UseMutationObserverReturn;
|
|
1508
|
+
//#endregion
|
|
1509
|
+
//#region src/composables/useOverflow/index.d.ts
|
|
1510
|
+
interface OverflowOptions {
|
|
1511
|
+
/**
|
|
1512
|
+
* Container element to track. Can be a ref, getter, or MaybeRefOrGetter.
|
|
1513
|
+
* When provided, useOverflow tracks this element's width automatically.
|
|
1514
|
+
*/
|
|
1515
|
+
container?: MaybeRefOrGetter<Element | undefined>;
|
|
1516
|
+
/** Gap between items in pixels */
|
|
1517
|
+
gap?: MaybeRefOrGetter<number>;
|
|
1518
|
+
/** Reserved space in pixels (for nav buttons, ellipsis, etc) */
|
|
1519
|
+
reserved?: MaybeRefOrGetter<number>;
|
|
1520
|
+
/**
|
|
1521
|
+
* Uniform item width in pixels. When provided, enables uniform mode
|
|
1522
|
+
* where capacity is calculated as available space / itemWidth.
|
|
1523
|
+
* Use this for same-width items like pagination buttons.
|
|
1524
|
+
*/
|
|
1525
|
+
itemWidth?: MaybeRefOrGetter<number>;
|
|
1526
|
+
/**
|
|
1527
|
+
* Calculate capacity from end instead of start.
|
|
1528
|
+
* Useful for breadcrumbs where trailing items take priority.
|
|
1529
|
+
* Only affects variable mode (uniform mode capacity is direction-independent).
|
|
1530
|
+
*/
|
|
1531
|
+
reverse?: MaybeRefOrGetter<boolean>;
|
|
1532
|
+
}
|
|
1533
|
+
interface OverflowContext {
|
|
1534
|
+
/** Container element ref */
|
|
1535
|
+
container: ShallowRef<Element | undefined>;
|
|
1536
|
+
/** Current container width */
|
|
1537
|
+
width: Readonly<ShallowRef<number>>;
|
|
1538
|
+
/** How many items fit in available space */
|
|
1539
|
+
capacity: ComputedRef<number>;
|
|
1540
|
+
/** Total width of all measured items */
|
|
1541
|
+
total: ComputedRef<number>;
|
|
1542
|
+
/** Whether items overflow the container */
|
|
1543
|
+
isOverflowing: Readonly<Ref<boolean>>;
|
|
1544
|
+
/** Register an item's element for width measurement */
|
|
1545
|
+
measure: (index: number, el: Element | undefined) => void;
|
|
1546
|
+
/** Clear all measurements */
|
|
1547
|
+
reset: () => void;
|
|
1548
|
+
}
|
|
1549
|
+
interface OverflowContextOptions extends OverflowOptions {
|
|
1550
|
+
/** Namespace for dependency injection */
|
|
1551
|
+
namespace?: string;
|
|
1552
|
+
}
|
|
1553
|
+
/**
|
|
1554
|
+
* Creates a new overflow context for computing how many items fit in a container.
|
|
1555
|
+
*
|
|
1556
|
+
* @param options Configuration options
|
|
1557
|
+
* @returns Overflow context with container ref, capacity, and measurement functions
|
|
1558
|
+
*
|
|
1559
|
+
* @example Variable-width mode (Breadcrumbs)
|
|
1560
|
+
* ```vue
|
|
1561
|
+
* <script lang="ts" setup>
|
|
1562
|
+
* import { useTemplateRef } from 'vue'
|
|
1563
|
+
* import { createOverflow } from '@vuetify/v0'
|
|
1564
|
+
*
|
|
1565
|
+
* const containerRef = useTemplateRef('container')
|
|
1566
|
+
* const overflow = createOverflow({
|
|
1567
|
+
* container: containerRef,
|
|
1568
|
+
* gap: 8,
|
|
1569
|
+
* reserved: 40,
|
|
1570
|
+
* })
|
|
1571
|
+
* </script>
|
|
1572
|
+
*
|
|
1573
|
+
* <template>
|
|
1574
|
+
* <div ref="container">
|
|
1575
|
+
* <span
|
|
1576
|
+
* v-for="(item, i) in items.slice(0, overflow.capacity.value)"
|
|
1577
|
+
* :key="i"
|
|
1578
|
+
* :ref="el => overflow.measure(i, el)"
|
|
1579
|
+
* >
|
|
1580
|
+
* {{ item }}
|
|
1581
|
+
* </span>
|
|
1582
|
+
* <span v-if="overflow.isOverflowing.value">...</span>
|
|
1583
|
+
* </div>
|
|
1584
|
+
* </template>
|
|
1585
|
+
* ```
|
|
1586
|
+
*
|
|
1587
|
+
* @example Uniform-width mode (Pagination)
|
|
1588
|
+
* ```ts
|
|
1589
|
+
* const overflow = createOverflow({
|
|
1590
|
+
* container: () => atom.value?.element,
|
|
1591
|
+
* itemWidth: buttonWidth,
|
|
1592
|
+
* reserved: () => buttonWidth.value * 4,
|
|
1593
|
+
* })
|
|
1594
|
+
* ```
|
|
1595
|
+
*/
|
|
1596
|
+
declare function createOverflow<E extends OverflowContext = OverflowContext>(options?: OverflowOptions): E;
|
|
1597
|
+
/**
|
|
1598
|
+
* Creates an overflow context with dependency injection support.
|
|
1599
|
+
*
|
|
1600
|
+
* @param options Configuration options including namespace
|
|
1601
|
+
* @returns Trinity tuple: [useContext, provideContext, defaultContext]
|
|
1602
|
+
*
|
|
1603
|
+
* @example
|
|
1604
|
+
* ```ts
|
|
1605
|
+
* // Create injectable context
|
|
1606
|
+
* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
|
|
1607
|
+
* namespace: 'my-overflow',
|
|
1608
|
+
* gap: 8,
|
|
1609
|
+
* reserved: 160,
|
|
1610
|
+
* })
|
|
1611
|
+
*
|
|
1612
|
+
* // In parent component
|
|
1613
|
+
* provideOverflow()
|
|
1614
|
+
*
|
|
1615
|
+
* // In child component
|
|
1616
|
+
* const overflow = useOverflow()
|
|
1617
|
+
* ```
|
|
1618
|
+
*/
|
|
1619
|
+
declare function createOverflowContext<E extends OverflowContext = OverflowContext>(_options?: OverflowContextOptions): ContextTrinity<E>;
|
|
1620
|
+
/**
|
|
1621
|
+
* Returns the current overflow context from dependency injection.
|
|
1622
|
+
*
|
|
1623
|
+
* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
|
|
1624
|
+
* @returns The current overflow context.
|
|
1625
|
+
*
|
|
1626
|
+
* @example
|
|
1627
|
+
* ```vue
|
|
1628
|
+
* <script lang="ts" setup>
|
|
1629
|
+
* import { useOverflow } from '@vuetify/v0'
|
|
1630
|
+
*
|
|
1631
|
+
* // Inject overflow context provided by parent
|
|
1632
|
+
* const overflow = useOverflow()
|
|
1633
|
+
* </script>
|
|
1634
|
+
*
|
|
1635
|
+
* <template>
|
|
1636
|
+
* <div>
|
|
1637
|
+
* <p>Capacity: {{ overflow.capacity.value }}</p>
|
|
1638
|
+
* </div>
|
|
1639
|
+
* </template>
|
|
1640
|
+
* ```
|
|
1641
|
+
*/
|
|
1642
|
+
declare function useOverflow<E extends OverflowContext = OverflowContext>(namespace?: string): E;
|
|
1592
1643
|
//#endregion
|
|
1593
1644
|
//#region src/composables/usePermissions/adapters/adapter.d.ts
|
|
1594
1645
|
interface PermissionAdapterInterface {
|
|
@@ -1599,9 +1650,7 @@ declare abstract class PermissionAdapter implements PermissionAdapterInterface {
|
|
|
1599
1650
|
}
|
|
1600
1651
|
//#endregion
|
|
1601
1652
|
//#region src/composables/usePermissions/index.d.ts
|
|
1602
|
-
interface PermissionTicket extends TokenTicket {
|
|
1603
|
-
value: boolean | ((context: Record<string, any>) => boolean);
|
|
1604
|
-
}
|
|
1653
|
+
interface PermissionTicket extends TokenTicket<boolean | ((context: Record<string, any>) => boolean)> {}
|
|
1605
1654
|
interface PermissionContext<Z extends PermissionTicket = PermissionTicket> extends TokenContext<Z> {
|
|
1606
1655
|
can: (id: ID, action: string, subject: string, context?: Record<string, any>) => boolean;
|
|
1607
1656
|
}
|
|
@@ -1784,7 +1833,7 @@ interface ProxyRegistryContext<Z extends RegistryTicket = RegistryTicket> {
|
|
|
1784
1833
|
declare function useProxyRegistry<Z extends RegistryTicket = RegistryTicket>(registry: RegistryContext<Z>, options?: ProxyRegistryOptions): ProxyRegistryContext<Z>;
|
|
1785
1834
|
//#endregion
|
|
1786
1835
|
//#region src/composables/useQueue/index.d.ts
|
|
1787
|
-
interface QueueTicket extends RegistryTicket {
|
|
1836
|
+
interface QueueTicket<V = unknown> extends RegistryTicket<V> {
|
|
1788
1837
|
/**
|
|
1789
1838
|
* Timeout in milliseconds
|
|
1790
1839
|
*
|
|
@@ -2076,6 +2125,28 @@ interface ResizeObserverOptions {
|
|
|
2076
2125
|
immediate?: boolean;
|
|
2077
2126
|
box?: 'content-box' | 'border-box';
|
|
2078
2127
|
}
|
|
2128
|
+
interface UseResizeObserverReturn {
|
|
2129
|
+
/**
|
|
2130
|
+
* Whether the observer is currently active (created and observing)
|
|
2131
|
+
*/
|
|
2132
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
2133
|
+
/**
|
|
2134
|
+
* Whether the observer is currently paused
|
|
2135
|
+
*/
|
|
2136
|
+
readonly isPaused: Readonly<Ref<boolean>>;
|
|
2137
|
+
/**
|
|
2138
|
+
* Pause observation (disconnects observer but keeps it alive)
|
|
2139
|
+
*/
|
|
2140
|
+
pause: () => void;
|
|
2141
|
+
/**
|
|
2142
|
+
* Resume observation
|
|
2143
|
+
*/
|
|
2144
|
+
resume: () => void;
|
|
2145
|
+
/**
|
|
2146
|
+
* Stop observation and clean up (destroys observer)
|
|
2147
|
+
*/
|
|
2148
|
+
stop: () => void;
|
|
2149
|
+
}
|
|
2079
2150
|
/**
|
|
2080
2151
|
* A composable that uses the Resize Observer API to detect when an element's
|
|
2081
2152
|
* size changes.
|
|
@@ -2117,12 +2188,17 @@ interface ResizeObserverOptions {
|
|
|
2117
2188
|
* resume()
|
|
2118
2189
|
* ```
|
|
2119
2190
|
*/
|
|
2120
|
-
declare function useResizeObserver(target: Ref<Element | undefined>, callback: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions):
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2191
|
+
declare function useResizeObserver(target: Ref<Element | undefined>, callback: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions): UseResizeObserverReturn;
|
|
2192
|
+
interface UseElementSizeReturn extends UseResizeObserverReturn {
|
|
2193
|
+
/**
|
|
2194
|
+
* The width of the element in pixels
|
|
2195
|
+
*/
|
|
2196
|
+
width: Ref<number>;
|
|
2197
|
+
/**
|
|
2198
|
+
* The height of the element in pixels
|
|
2199
|
+
*/
|
|
2200
|
+
height: Ref<number>;
|
|
2201
|
+
}
|
|
2126
2202
|
/**
|
|
2127
2203
|
* A convenience composable that uses the Resize Observer API to track an
|
|
2128
2204
|
* element's size.
|
|
@@ -2146,167 +2222,7 @@ declare function useResizeObserver(target: Ref<Element | undefined>, callback: (
|
|
|
2146
2222
|
* })
|
|
2147
2223
|
* ```
|
|
2148
2224
|
*/
|
|
2149
|
-
declare function useElementSize(target: Ref<Element | undefined>):
|
|
2150
|
-
width: vue231.ShallowRef<number, number>;
|
|
2151
|
-
height: vue231.ShallowRef<number, number>;
|
|
2152
|
-
isPaused: Readonly<Ref<boolean, boolean>>;
|
|
2153
|
-
pause: () => void;
|
|
2154
|
-
resume: () => void;
|
|
2155
|
-
stop: () => void;
|
|
2156
|
-
};
|
|
2157
|
-
//#endregion
|
|
2158
|
-
//#region src/composables/useStep/index.d.ts
|
|
2159
|
-
interface StepTicket extends SingleTicket {}
|
|
2160
|
-
interface StepContext<Z extends StepTicket> extends SingleContext<Z> {
|
|
2161
|
-
/** Select the first Ticket in the collection */
|
|
2162
|
-
first: () => void;
|
|
2163
|
-
/** Select the last Ticket in the collection */
|
|
2164
|
-
last: () => void;
|
|
2165
|
-
/** Select the next Ticket based on current index */
|
|
2166
|
-
next: () => void;
|
|
2167
|
-
/** Select the previous Ticket based on current index */
|
|
2168
|
-
prev: () => void;
|
|
2169
|
-
/** Step through the collection by a given count */
|
|
2170
|
-
step: (count: number) => void;
|
|
2171
|
-
}
|
|
2172
|
-
interface StepOptions extends SingleOptions {
|
|
2173
|
-
/**
|
|
2174
|
-
* Enable circular navigation (wrapping at boundaries).
|
|
2175
|
-
* - true: Navigation wraps around (carousel behavior)
|
|
2176
|
-
* - false: Navigation stops at boundaries (pagination behavior)
|
|
2177
|
-
* @default false
|
|
2178
|
-
*/
|
|
2179
|
-
circular?: boolean;
|
|
2180
|
-
}
|
|
2181
|
-
interface StepContextOptions extends SingleContextOptions {
|
|
2182
|
-
/**
|
|
2183
|
-
* Enable circular navigation (wrapping at boundaries).
|
|
2184
|
-
* - true: Navigation wraps around (carousel behavior)
|
|
2185
|
-
* - false: Navigation stops at boundaries (pagination behavior)
|
|
2186
|
-
* @default false
|
|
2187
|
-
*/
|
|
2188
|
-
circular?: boolean;
|
|
2189
|
-
}
|
|
2190
|
-
/**
|
|
2191
|
-
* Creates a new step instance with navigation through items.
|
|
2192
|
-
*
|
|
2193
|
-
* Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
|
|
2194
|
-
* for sequential navigation. Supports both circular (wrapping) and bounded (stopping at edges) modes.
|
|
2195
|
-
*
|
|
2196
|
-
* @param options The options for the step instance.
|
|
2197
|
-
* @template Z The type of the step ticket.
|
|
2198
|
-
* @template E The type of the step context.
|
|
2199
|
-
* @returns A new step instance with navigation methods.
|
|
2200
|
-
*
|
|
2201
|
-
* @remarks
|
|
2202
|
-
* **Key Features:**
|
|
2203
|
-
* - **Configurable Navigation**: `circular: true` for wrapping, `false` for bounded (default: false)
|
|
2204
|
-
* - **Disabled Item Skipping**: Automatically skips disabled items during navigation
|
|
2205
|
-
* - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
|
|
2206
|
-
* - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
|
|
2207
|
-
*
|
|
2208
|
-
* **Navigation Methods:**
|
|
2209
|
-
* - `first()`: Select first non-disabled item
|
|
2210
|
-
* - `last()`: Select last non-disabled item
|
|
2211
|
-
* - `next()`: Move to next item (wraps if circular, stops at end if bounded)
|
|
2212
|
-
* - `prev()`: Move to previous item (wraps if circular, stops at start if bounded)
|
|
2213
|
-
* - `step(count)`: Move by `count` positions (negative for backward)
|
|
2214
|
-
*
|
|
2215
|
-
* **Circular Mode (`circular: true`):**
|
|
2216
|
-
* - Uses modulo arithmetic for wrapping: `((index % length) + length) % length`
|
|
2217
|
-
* - Works correctly with negative indexes and large step counts
|
|
2218
|
-
* - Perfect for carousels, theme switchers, infinite scrolling
|
|
2219
|
-
*
|
|
2220
|
-
* **Bounded Mode (`circular: false`, default):**
|
|
2221
|
-
* - Navigation stops at boundaries (no wrapping)
|
|
2222
|
-
* - `next()` on last item does nothing
|
|
2223
|
-
* - `prev()` on first item does nothing
|
|
2224
|
-
* - Perfect for pagination, wizards with explicit completion, forms
|
|
2225
|
-
*
|
|
2226
|
-
* **Inheritance Chain:**
|
|
2227
|
-
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
2228
|
-
*
|
|
2229
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
2230
|
-
*
|
|
2231
|
-
* @example
|
|
2232
|
-
* ```ts
|
|
2233
|
-
* import { createStep } from '@vuetify/v0'
|
|
2234
|
-
*
|
|
2235
|
-
* // Bounded navigation (default) - for pagination
|
|
2236
|
-
* const pagination = createStep({ circular: false })
|
|
2237
|
-
* pagination.onboard([
|
|
2238
|
-
* { id: 'page-1', value: 1 },
|
|
2239
|
-
* { id: 'page-2', value: 2 },
|
|
2240
|
-
* { id: 'page-3', value: 3 },
|
|
2241
|
-
* ])
|
|
2242
|
-
* pagination.first() // Select page 1
|
|
2243
|
-
* pagination.prev() // Does nothing (already at first)
|
|
2244
|
-
* pagination.next() // Select page 2
|
|
2245
|
-
*
|
|
2246
|
-
* // Circular navigation - for carousels
|
|
2247
|
-
* const carousel = createStep({ circular: true })
|
|
2248
|
-
* carousel.onboard([
|
|
2249
|
-
* { id: 'slide-1', value: 'First' },
|
|
2250
|
-
* { id: 'slide-2', value: 'Second' },
|
|
2251
|
-
* { id: 'slide-3', value: 'Third' },
|
|
2252
|
-
* ])
|
|
2253
|
-
* carousel.first()
|
|
2254
|
-
* carousel.prev() // Wraps to 'slide-3'
|
|
2255
|
-
* carousel.next() // Wraps to 'slide-1'
|
|
2256
|
-
* ```
|
|
2257
|
-
*/
|
|
2258
|
-
declare function createStep<Z extends StepTicket = StepTicket, E extends StepContext<Z> = StepContext<Z>>(_options?: StepOptions): E;
|
|
2259
|
-
/**
|
|
2260
|
-
* Creates a new step context.
|
|
2261
|
-
*
|
|
2262
|
-
* @param namespace The namespace for the step context.
|
|
2263
|
-
* @param options The options for the step context.
|
|
2264
|
-
* @template Z The type of the step ticket.
|
|
2265
|
-
* @template E The type of the step context.
|
|
2266
|
-
* @returns A new step context.
|
|
2267
|
-
*
|
|
2268
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
2269
|
-
*
|
|
2270
|
-
* @example
|
|
2271
|
-
* ```ts
|
|
2272
|
-
* import { createStepContext } from '@vuetify/v0'
|
|
2273
|
-
*
|
|
2274
|
-
* export const [useWizard, provideWizard, wizard] = createStepContext('wizard')
|
|
2275
|
-
*
|
|
2276
|
-
* // In a parent component:
|
|
2277
|
-
* provideWizard()
|
|
2278
|
-
*
|
|
2279
|
-
* // In a child component:
|
|
2280
|
-
* const wizard = useWizard()
|
|
2281
|
-
* wizard.next() // Progress to next step
|
|
2282
|
-
* ```
|
|
2283
|
-
*/
|
|
2284
|
-
declare function createStepContext<Z extends StepTicket = StepTicket, E extends StepContext<Z> = StepContext<Z>>(_options: StepContextOptions): ContextTrinity<E>;
|
|
2285
|
-
/**
|
|
2286
|
-
* Returns the current step instance.
|
|
2287
|
-
*
|
|
2288
|
-
* @param namespace The namespace for the step context. Defaults to `'v0:step'`.
|
|
2289
|
-
* @returns The current step instance.
|
|
2290
|
-
*
|
|
2291
|
-
* @see https://0.vuetifyjs.com/composables/selection/use-step
|
|
2292
|
-
*
|
|
2293
|
-
* @example
|
|
2294
|
-
* ```vue
|
|
2295
|
-
* <script setup lang="ts">
|
|
2296
|
-
* import { useStep } from '@vuetify/v0'
|
|
2297
|
-
*
|
|
2298
|
-
* const wizard = useStep()
|
|
2299
|
-
* </script>
|
|
2300
|
-
*
|
|
2301
|
-
* <template>
|
|
2302
|
-
* <div>
|
|
2303
|
-
* <p>Current step: {{ wizard.selectedIndex }}</p>
|
|
2304
|
-
* <button @click="wizard.next()">Next</button>
|
|
2305
|
-
* </div>
|
|
2306
|
-
* </template>
|
|
2307
|
-
* ```
|
|
2308
|
-
*/
|
|
2309
|
-
declare function useStep<Z extends StepTicket = StepTicket, E extends StepContext<Z> = StepContext<Z>>(namespace?: string): E;
|
|
2225
|
+
declare function useElementSize(target: Ref<Element | undefined>): UseElementSizeReturn;
|
|
2310
2226
|
//#endregion
|
|
2311
2227
|
//#region src/composables/useStorage/adapters/adapter.d.ts
|
|
2312
2228
|
interface StorageAdapter$1 {
|
|
@@ -2362,8 +2278,8 @@ interface StorageOptions {
|
|
|
2362
2278
|
prefix?: string;
|
|
2363
2279
|
/** Custom serializer for reading and writing values. Defaults to JSON.parse/stringify */
|
|
2364
2280
|
serializer?: {
|
|
2365
|
-
read: (value: string) =>
|
|
2366
|
-
write: (value:
|
|
2281
|
+
read: (value: string) => unknown;
|
|
2282
|
+
write: (value: unknown) => string;
|
|
2367
2283
|
};
|
|
2368
2284
|
}
|
|
2369
2285
|
interface StorageContextOptions extends StorageOptions {
|
|
@@ -2371,7 +2287,6 @@ interface StorageContextOptions extends StorageOptions {
|
|
|
2371
2287
|
namespace?: string;
|
|
2372
2288
|
}
|
|
2373
2289
|
interface StoragePluginOptions extends StorageContextOptions {}
|
|
2374
|
-
declare const useStorageContext: (key?: ContextKey<StorageContext>) => StorageContext, provideStorageContext: (context: StorageContext, app?: App) => StorageContext;
|
|
2375
2290
|
/**
|
|
2376
2291
|
* Creates a new storage instance.
|
|
2377
2292
|
*
|
|
@@ -2492,12 +2407,11 @@ type ThemeColors = {
|
|
|
2492
2407
|
[key: string]: Colors | string;
|
|
2493
2408
|
};
|
|
2494
2409
|
type ThemeRecord = {
|
|
2495
|
-
[key: string]: any;
|
|
2496
2410
|
dark?: boolean;
|
|
2497
2411
|
lazy?: boolean;
|
|
2498
2412
|
colors: ThemeColors;
|
|
2499
2413
|
};
|
|
2500
|
-
interface ThemeTicket extends SingleTicket {
|
|
2414
|
+
interface ThemeTicket extends SingleTicket<ThemeColors> {
|
|
2501
2415
|
/**
|
|
2502
2416
|
* Indicates whether the theme is dark or light.
|
|
2503
2417
|
*
|
|
@@ -2783,7 +2697,7 @@ interface TimelineContext<Z extends TimelineTicket> extends RegistryContext<Z> {
|
|
|
2783
2697
|
*/
|
|
2784
2698
|
redo: () => Z | undefined;
|
|
2785
2699
|
}
|
|
2786
|
-
interface TimelineTicket extends RegistryTicket {}
|
|
2700
|
+
interface TimelineTicket<V = unknown> extends RegistryTicket<V> {}
|
|
2787
2701
|
interface TimelineOptions extends RegistryOptions {
|
|
2788
2702
|
/**
|
|
2789
2703
|
* The maximum size of the timeline.
|
|
@@ -2793,7 +2707,7 @@ interface TimelineOptions extends RegistryOptions {
|
|
|
2793
2707
|
size?: number;
|
|
2794
2708
|
}
|
|
2795
2709
|
interface TimelineContextOptions extends TimelineOptions {
|
|
2796
|
-
namespace
|
|
2710
|
+
namespace?: string;
|
|
2797
2711
|
}
|
|
2798
2712
|
/**
|
|
2799
2713
|
* Creates a new timeline instance.
|
|
@@ -2824,13 +2738,12 @@ interface TimelineContextOptions extends TimelineOptions {
|
|
|
2824
2738
|
*/
|
|
2825
2739
|
declare function createTimeline<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(_options?: TimelineOptions): E;
|
|
2826
2740
|
/**
|
|
2827
|
-
* Creates a new timeline
|
|
2741
|
+
* Creates a new timeline context.
|
|
2828
2742
|
*
|
|
2829
|
-
* @param
|
|
2830
|
-
* @param options The options for the timeline plugin.
|
|
2743
|
+
* @param options The options for the timeline context.
|
|
2831
2744
|
* @template Z The type of the timeline ticket.
|
|
2832
2745
|
* @template E The type of the timeline context.
|
|
2833
|
-
* @returns A new timeline
|
|
2746
|
+
* @returns A new timeline context.
|
|
2834
2747
|
*
|
|
2835
2748
|
* @see https://0.vuetifyjs.com/composables/registration/use-timeline
|
|
2836
2749
|
*
|
|
@@ -2838,7 +2751,9 @@ declare function createTimeline<Z extends TimelineTicket = TimelineTicket, E ext
|
|
|
2838
2751
|
* ```ts
|
|
2839
2752
|
* import { createTimelineContext } from '@vuetify/v0'
|
|
2840
2753
|
*
|
|
2841
|
-
*
|
|
2754
|
+
* // With default namespace 'v0:timeline'
|
|
2755
|
+
* export const [useTimeline, provideTimeline, context] = createTimelineContext({ size: 5 })
|
|
2756
|
+
*
|
|
2842
2757
|
* context.register({ id: 'example' })
|
|
2843
2758
|
*
|
|
2844
2759
|
* // In a parent component
|
|
@@ -2850,7 +2765,7 @@ declare function createTimeline<Z extends TimelineTicket = TimelineTicket, E ext
|
|
|
2850
2765
|
* console.log(timeline.values()) // [{ id: 'example' }]
|
|
2851
2766
|
* ```
|
|
2852
2767
|
*/
|
|
2853
|
-
declare function createTimelineContext<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(_options
|
|
2768
|
+
declare function createTimelineContext<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(_options?: TimelineContextOptions): ContextTrinity<E>;
|
|
2854
2769
|
/**
|
|
2855
2770
|
* Returns the current timeline instance.
|
|
2856
2771
|
*
|
|
@@ -2870,4 +2785,372 @@ declare function createTimelineContext<Z extends TimelineTicket = TimelineTicket
|
|
|
2870
2785
|
*/
|
|
2871
2786
|
declare function useTimeline<Z extends TimelineTicket = TimelineTicket, E extends TimelineContext<Z> = TimelineContext<Z>>(namespace?: string): E;
|
|
2872
2787
|
//#endregion
|
|
2873
|
-
|
|
2788
|
+
//#region src/composables/useToggleScope/index.d.ts
|
|
2789
|
+
interface ToggleScopeControls {
|
|
2790
|
+
/**
|
|
2791
|
+
* Whether the scope is currently active (created and running)
|
|
2792
|
+
*/
|
|
2793
|
+
readonly isActive: Readonly<Ref<boolean>>;
|
|
2794
|
+
/**
|
|
2795
|
+
* Stop the scope (destroys and cleans up all effects)
|
|
2796
|
+
*/
|
|
2797
|
+
stop: () => void;
|
|
2798
|
+
/**
|
|
2799
|
+
* Start the scope (creates and runs effects)
|
|
2800
|
+
*/
|
|
2801
|
+
start: () => void;
|
|
2802
|
+
/**
|
|
2803
|
+
* Reset the scope (stops and immediately restarts)
|
|
2804
|
+
*/
|
|
2805
|
+
reset: () => void;
|
|
2806
|
+
}
|
|
2807
|
+
/**
|
|
2808
|
+
* Conditionally manages an effect scope based on a reactive boolean source.
|
|
2809
|
+
*
|
|
2810
|
+
* @param source A reactive boolean value or getter that controls the scope lifecycle
|
|
2811
|
+
* @param fn The function to run within the effect scope. Can optionally receive controls for manual scope management.
|
|
2812
|
+
* @returns Controls object with isActive state and start/stop/reset methods
|
|
2813
|
+
*
|
|
2814
|
+
* @see https://vuejs.org/api/reactivity-advanced.html#effectscope
|
|
2815
|
+
* @see https://0.vuetifyjs.com/composables/system/use-toggle-scope
|
|
2816
|
+
*
|
|
2817
|
+
* @example
|
|
2818
|
+
* ```ts
|
|
2819
|
+
* import { ref } from 'vue'
|
|
2820
|
+
* import { useToggleScope } from '@vuetify/v0'
|
|
2821
|
+
*
|
|
2822
|
+
* const isEnabled = ref(false)
|
|
2823
|
+
*
|
|
2824
|
+
* const { isActive } = useToggleScope(isEnabled, () => {
|
|
2825
|
+
* // This code runs when isEnabled becomes true
|
|
2826
|
+
* const unwatch = watch(someRef, () => {
|
|
2827
|
+
* console.log('Watching...')
|
|
2828
|
+
* })
|
|
2829
|
+
*
|
|
2830
|
+
* // Cleanup happens automatically when isEnabled becomes false
|
|
2831
|
+
* })
|
|
2832
|
+
*
|
|
2833
|
+
* // Toggle the scope on/off
|
|
2834
|
+
* isEnabled.value = true // Starts the scope
|
|
2835
|
+
* console.log(isActive.value) // true
|
|
2836
|
+
* isEnabled.value = false // Stops and cleans up
|
|
2837
|
+
* console.log(isActive.value) // false
|
|
2838
|
+
* ```
|
|
2839
|
+
*
|
|
2840
|
+
* @example
|
|
2841
|
+
* With manual controls:
|
|
2842
|
+
* ```ts
|
|
2843
|
+
* const isEnabled = ref(true)
|
|
2844
|
+
*
|
|
2845
|
+
* useToggleScope(isEnabled, (controls) => {
|
|
2846
|
+
* // Access controls inside the scope
|
|
2847
|
+
* console.log('Active:', controls.isActive.value)
|
|
2848
|
+
*
|
|
2849
|
+
* // Manually reset the scope if needed
|
|
2850
|
+
* someEvent.on('reset', () => controls.reset())
|
|
2851
|
+
* })
|
|
2852
|
+
* ```
|
|
2853
|
+
*/
|
|
2854
|
+
declare function useToggleScope(source: WatchSource<boolean>, fn: (() => void) | ((controls: ToggleScopeControls) => void)): ToggleScopeControls;
|
|
2855
|
+
//#endregion
|
|
2856
|
+
//#region src/composables/useVirtual/index.d.ts
|
|
2857
|
+
type VirtualDirection = 'forward' | 'reverse';
|
|
2858
|
+
type VirtualState = 'loading' | 'empty' | 'error' | 'ok';
|
|
2859
|
+
type VirtualAnchor = 'auto' | 'start' | 'end' | ((items: readonly unknown[]) => number | string);
|
|
2860
|
+
interface ScrollToOptions {
|
|
2861
|
+
/**
|
|
2862
|
+
* The behavior of the scroll animation.
|
|
2863
|
+
*/
|
|
2864
|
+
behavior?: 'auto' | 'smooth' | 'instant';
|
|
2865
|
+
/**
|
|
2866
|
+
* The alignment of the scroll position.
|
|
2867
|
+
*/
|
|
2868
|
+
block?: 'start' | 'center' | 'end' | 'nearest';
|
|
2869
|
+
/**
|
|
2870
|
+
* The offset of the scroll position.
|
|
2871
|
+
*/
|
|
2872
|
+
offset?: number;
|
|
2873
|
+
}
|
|
2874
|
+
interface VirtualOptions {
|
|
2875
|
+
/**
|
|
2876
|
+
* The height of the item.
|
|
2877
|
+
*/
|
|
2878
|
+
itemHeight?: number | string | null;
|
|
2879
|
+
/**
|
|
2880
|
+
* The height of the container.
|
|
2881
|
+
*/
|
|
2882
|
+
height?: number | string;
|
|
2883
|
+
/**
|
|
2884
|
+
* The number of extra items to render.
|
|
2885
|
+
*/
|
|
2886
|
+
overscan?: number;
|
|
2887
|
+
/**
|
|
2888
|
+
* The direction of the scrolling.
|
|
2889
|
+
*/
|
|
2890
|
+
direction?: VirtualDirection;
|
|
2891
|
+
/**
|
|
2892
|
+
* The anchor of the scrolling.
|
|
2893
|
+
*/
|
|
2894
|
+
anchor?: VirtualAnchor;
|
|
2895
|
+
/**
|
|
2896
|
+
* Whether to smooth the anchor position.
|
|
2897
|
+
*/
|
|
2898
|
+
anchorSmooth?: boolean;
|
|
2899
|
+
/**
|
|
2900
|
+
* The callback to call when the start is reached.
|
|
2901
|
+
*/
|
|
2902
|
+
onStartReached?: (distance: number) => void | Promise<void>;
|
|
2903
|
+
/**
|
|
2904
|
+
* The callback to call when the end is reached.
|
|
2905
|
+
*/
|
|
2906
|
+
onEndReached?: (distance: number) => void | Promise<void>;
|
|
2907
|
+
/**
|
|
2908
|
+
* The threshold for the start.
|
|
2909
|
+
*/
|
|
2910
|
+
startThreshold?: number;
|
|
2911
|
+
/**
|
|
2912
|
+
* The threshold for the end.
|
|
2913
|
+
*/
|
|
2914
|
+
endThreshold?: number;
|
|
2915
|
+
/**
|
|
2916
|
+
* Whether to enable momentum scrolling.
|
|
2917
|
+
*/
|
|
2918
|
+
momentum?: boolean;
|
|
2919
|
+
/**
|
|
2920
|
+
* Whether to enable elastic scrolling.
|
|
2921
|
+
*/
|
|
2922
|
+
elastic?: boolean;
|
|
2923
|
+
}
|
|
2924
|
+
interface VirtualItem<T = unknown> {
|
|
2925
|
+
raw: T;
|
|
2926
|
+
index: number;
|
|
2927
|
+
}
|
|
2928
|
+
interface VirtualContext<T = unknown> {
|
|
2929
|
+
/**
|
|
2930
|
+
* The element that is being virtualized.
|
|
2931
|
+
*
|
|
2932
|
+
* @example
|
|
2933
|
+
* ```vue
|
|
2934
|
+
* <script setup lang="ts">
|
|
2935
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
2936
|
+
*
|
|
2937
|
+
* const { element } = useVirtual(items)
|
|
2938
|
+
* </script>
|
|
2939
|
+
*
|
|
2940
|
+
* <template>
|
|
2941
|
+
* <div ref="element">
|
|
2942
|
+
* <div v-for="item in items" :key="item.index">
|
|
2943
|
+
* {{ item.raw }}
|
|
2944
|
+
* </div>
|
|
2945
|
+
* </div>
|
|
2946
|
+
* </template>
|
|
2947
|
+
*/
|
|
2948
|
+
element: Ref<HTMLElement | undefined>;
|
|
2949
|
+
/**
|
|
2950
|
+
* The items that are being virtualized.
|
|
2951
|
+
*
|
|
2952
|
+
* @example
|
|
2953
|
+
* ```vue
|
|
2954
|
+
* <script setup lang="ts">
|
|
2955
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
2956
|
+
*
|
|
2957
|
+
* const { items } = useVirtual(items)
|
|
2958
|
+
* </script>
|
|
2959
|
+
*
|
|
2960
|
+
* <template>
|
|
2961
|
+
* <div v-for="item in items" :key="item.index">
|
|
2962
|
+
* {{ item.raw }}
|
|
2963
|
+
* </div>
|
|
2964
|
+
* </template>
|
|
2965
|
+
* ```
|
|
2966
|
+
*/
|
|
2967
|
+
items: ComputedRef<VirtualItem<T>[]>;
|
|
2968
|
+
/**
|
|
2969
|
+
* The offset of the virtualized items.
|
|
2970
|
+
*
|
|
2971
|
+
* @example
|
|
2972
|
+
* ```vue
|
|
2973
|
+
* <script setup lang="ts">
|
|
2974
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
2975
|
+
*
|
|
2976
|
+
* const { offset } = useVirtual(items)
|
|
2977
|
+
* </script>
|
|
2978
|
+
*
|
|
2979
|
+
* <template>
|
|
2980
|
+
* <div :style="{ height: `${offset}px` }" />
|
|
2981
|
+
* </template>
|
|
2982
|
+
* ```
|
|
2983
|
+
*/
|
|
2984
|
+
offset: Readonly<ShallowRef<number>>;
|
|
2985
|
+
/**
|
|
2986
|
+
* The size of the virtualized items.
|
|
2987
|
+
*
|
|
2988
|
+
* @example
|
|
2989
|
+
* ```vue
|
|
2990
|
+
* <script setup lang="ts">
|
|
2991
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
2992
|
+
*
|
|
2993
|
+
* const { size } = useVirtual(items)
|
|
2994
|
+
* </script>
|
|
2995
|
+
*
|
|
2996
|
+
* <template>
|
|
2997
|
+
* <div :style="{ height: `${size}px` }" />
|
|
2998
|
+
* </template>
|
|
2999
|
+
* ```
|
|
3000
|
+
*/
|
|
3001
|
+
size: Readonly<ShallowRef<number>>;
|
|
3002
|
+
/**
|
|
3003
|
+
* The state of the virtualized items.
|
|
3004
|
+
*
|
|
3005
|
+
* @example
|
|
3006
|
+
* ```vue
|
|
3007
|
+
* <script setup lang="ts">
|
|
3008
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3009
|
+
*
|
|
3010
|
+
* const { state } = useVirtual(items)
|
|
3011
|
+
* </script>
|
|
3012
|
+
*
|
|
3013
|
+
* <template>
|
|
3014
|
+
* <div v-if="state === 'loading'">Loading...</div>
|
|
3015
|
+
* <div v-else-if="state === 'empty'">No items</div>
|
|
3016
|
+
* <div v-else-if="state === 'error'">Error</div>
|
|
3017
|
+
* <div v-else>Items</div>
|
|
3018
|
+
* </template>
|
|
3019
|
+
* ```
|
|
3020
|
+
*/
|
|
3021
|
+
state: ShallowRef<VirtualState>;
|
|
3022
|
+
/**
|
|
3023
|
+
* Scroll to an item by index.
|
|
3024
|
+
*
|
|
3025
|
+
* @example
|
|
3026
|
+
* ```vue
|
|
3027
|
+
* <script setup lang="ts">
|
|
3028
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3029
|
+
*
|
|
3030
|
+
* const { scrollTo } = useVirtual(items)
|
|
3031
|
+
* </script>
|
|
3032
|
+
*
|
|
3033
|
+
* <template>
|
|
3034
|
+
* <button @click="scrollTo(0)">Scroll to top</button>
|
|
3035
|
+
* <button @click="scrollTo(items.length - 1)">Scroll to bottom</button>
|
|
3036
|
+
* </template>
|
|
3037
|
+
* ```
|
|
3038
|
+
*/
|
|
3039
|
+
scrollTo: (index: number, options?: ScrollToOptions) => void;
|
|
3040
|
+
/**
|
|
3041
|
+
* The scroll event handler.
|
|
3042
|
+
*
|
|
3043
|
+
* @example
|
|
3044
|
+
* ```vue
|
|
3045
|
+
* <script setup lang="ts">
|
|
3046
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3047
|
+
*
|
|
3048
|
+
* const { element, scroll } = useVirtual(items)
|
|
3049
|
+
* </script>
|
|
3050
|
+
*
|
|
3051
|
+
* <template>
|
|
3052
|
+
* <div ref="element" @scroll="scroll">
|
|
3053
|
+
* <div v-for="item in items" :key="item.index">
|
|
3054
|
+
* {{ item.raw }}
|
|
3055
|
+
* </div>
|
|
3056
|
+
* </div>
|
|
3057
|
+
* </template>
|
|
3058
|
+
* ```
|
|
3059
|
+
*/
|
|
3060
|
+
scroll: () => void;
|
|
3061
|
+
/**
|
|
3062
|
+
* The scrollend event handler.
|
|
3063
|
+
*
|
|
3064
|
+
* @example
|
|
3065
|
+
* ```vue
|
|
3066
|
+
* <script setup lang="ts">
|
|
3067
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3068
|
+
*
|
|
3069
|
+
* const { scroll, scrollend } = useVirtual(items)
|
|
3070
|
+
* </script>
|
|
3071
|
+
*
|
|
3072
|
+
* <template>
|
|
3073
|
+
* <div ref="element" @scroll="scroll" @scrollend="scrollend">
|
|
3074
|
+
* <div v-for="item in items" :key="item.index">
|
|
3075
|
+
* {{ item.raw }}
|
|
3076
|
+
* </div>
|
|
3077
|
+
* </div>
|
|
3078
|
+
* </template>
|
|
3079
|
+
* ```
|
|
3080
|
+
*/
|
|
3081
|
+
scrollend: () => void;
|
|
3082
|
+
/**
|
|
3083
|
+
* Resize an item by index.
|
|
3084
|
+
*
|
|
3085
|
+
* @example
|
|
3086
|
+
* ```vue
|
|
3087
|
+
* <script setup lang="ts">
|
|
3088
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3089
|
+
*
|
|
3090
|
+
* const { resize } = useVirtual(items)
|
|
3091
|
+
* </script>
|
|
3092
|
+
*
|
|
3093
|
+
* <template>
|
|
3094
|
+
* <button @click="resize(0, 100)">Resize first item</button>
|
|
3095
|
+
* </template>
|
|
3096
|
+
* ```
|
|
3097
|
+
*/
|
|
3098
|
+
resize: (index: number, height: number) => void;
|
|
3099
|
+
/**
|
|
3100
|
+
* Reset the virtualized items.
|
|
3101
|
+
*
|
|
3102
|
+
* @example
|
|
3103
|
+
* ```vue
|
|
3104
|
+
* <script setup lang="ts">
|
|
3105
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3106
|
+
*
|
|
3107
|
+
* const { reset } = useVirtual(items)
|
|
3108
|
+
* </script>
|
|
3109
|
+
*
|
|
3110
|
+
* <template>
|
|
3111
|
+
* <button @click="reset">Reset</button>
|
|
3112
|
+
* <div v-for="item in items" :key="item.index">
|
|
3113
|
+
* {{ item.raw }}
|
|
3114
|
+
* </div>
|
|
3115
|
+
* </template>
|
|
3116
|
+
* ```
|
|
3117
|
+
*/
|
|
3118
|
+
reset: () => void;
|
|
3119
|
+
}
|
|
3120
|
+
/**
|
|
3121
|
+
* Virtual scrolling composable for efficiently rendering large lists
|
|
3122
|
+
*
|
|
3123
|
+
* @param items Reactive array of items to virtualize
|
|
3124
|
+
* @param options Configuration options
|
|
3125
|
+
* @returns Virtual scrolling context
|
|
3126
|
+
*
|
|
3127
|
+
* @see https://0.vuetifyjs.com/composables/utilities/use-virtual
|
|
3128
|
+
*
|
|
3129
|
+
* @example
|
|
3130
|
+
* ```vue
|
|
3131
|
+
* <script setup lang="ts">
|
|
3132
|
+
* import { useVirtual } from '@vuetify/v0'
|
|
3133
|
+
*
|
|
3134
|
+
* const items = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })))
|
|
3135
|
+
* </script>
|
|
3136
|
+
*
|
|
3137
|
+
* <template>
|
|
3138
|
+
* <div
|
|
3139
|
+
* ref="element"
|
|
3140
|
+
* style="height: 600px; overflow-y: auto;"
|
|
3141
|
+
* @scroll="scroll"
|
|
3142
|
+
* >
|
|
3143
|
+
* <div :style="{ height: `${offset}px` }" />
|
|
3144
|
+
*
|
|
3145
|
+
* <div v-for="item in items" :key="item.index">
|
|
3146
|
+
* {{ item.raw.name }}
|
|
3147
|
+
* </div>
|
|
3148
|
+
*
|
|
3149
|
+
* <div :style="{ height: `${size}px` }" />
|
|
3150
|
+
* </div>
|
|
3151
|
+
* </template>
|
|
3152
|
+
* ```
|
|
3153
|
+
*/
|
|
3154
|
+
declare function useVirtual<T = unknown>(items: Ref<readonly T[]>, _options?: VirtualOptions): VirtualContext<T>;
|
|
3155
|
+
//#endregion
|
|
3156
|
+
export { createQueue as $, TokenValue as $n, LocaleAdapter as $t, Vuetify0ThemeAdapter as A, FilterMode as An, LoggerOptions as At, StorageAdapter as B, FeatureTicket as Bn, LoggerAdapter as Bt, ThemePluginOptions as C, FormValidationRule as Cn, CreateContextOptions as Cr, useOverflow as Ct, createThemeContext as D, useForm as Dn, useMutationObserver as Dt, createTheme as E, createFormContext as En, useContext as Er, UseMutationObserverReturn as Et, StoragePluginOptions as F, useFilter as Fn, useLogger as Ft, UseElementSizeReturn as G, FlatTokenCollection as Gn, LocaleRecord as Gt, MemoryAdapter as H, createFeaturesContext as Hn, LocaleContextOptions as Ht, createStorage as I, FeatureContext as In, LogLevel as It, useResizeObserver as J, TokenContext as Jn, createLocaleContext as Jt, UseResizeObserverReturn as K, TokenAlias as Kn, LocaleTicket as Kt, createStorageContext as L, FeatureContextOptions as Ln, Vuetify0LoggerAdapter as Lt, StorageContext as M, Primitive as Mn, createLogger as Mt, StorageContextOptions as N, UseFilterOptions as Nn, createLoggerContext as Nt, createThemePlugin as O, FilterFunction as On, LoggerContext as Ot, StorageOptions as P, UseFilterResult as Pn, createLoggerPlugin as Pt, QueueTicket as Q, TokenTicket as Qn, Vuetify0LocaleAdapter as Qt, createStoragePlugin as R, FeatureOptions as Rn, PinoLoggerAdapter as Rt, ThemeOptions as S, FormValidationResult as Sn, ContextKey as Sr, createOverflowContext as St, ThemeTicket as T, createForm as Tn, provideContext as Tr, UseMutationObserverOptions as Tt, ResizeObserverEntry as U, createFeaturesPlugin as Un, LocaleOptions as Ut, StorageType as V, createFeatures as Vn, LocaleContext as Vt, ResizeObserverOptions as W, useFeatures as Wn, LocalePluginOptions as Wt, QueueContextOptions as X, TokenOptions as Xn, createLocalePlugin as Xt, QueueContext as Y, TokenContextOptions as Yn, createLocaleFallback as Yt, QueueOptions as Z, TokenPrimitive as Zn, useLocale as Zt, useTimeline as _, useHydration as _n, toReactive as _r, PermissionAdapterInterface as _t, VirtualItem as a, UseElementIntersectionReturn as an, useDocumentEventListener as ar, ProxyModelOptions as at, ThemeContext as b, FormOptions as bn, PluginOptions as br, OverflowOptions as bt, useVirtual as c, useIntersectionObserver as cn, BreakpointName as cr, PermissionContextOptions as ct, TimelineContext as d, HydrationOptions as dn, BreakpointsOptions as dr, PermissionTicket as dt, KeyHandler as en, createTokens as er, createQueueContext as et, TimelineContextOptions as f, HydrationPluginOptions as fn, BreakpointsPluginOptions as fr, createPermissions as ft, createTimelineContext as g, createHydrationPlugin as gn, useBreakpoints as gr, PermissionAdapter as gt, createTimeline as h, createHydrationContext as hn, createBreakpointsPlugin as hr, usePermissions as ht, VirtualDirection as i, IntersectionObserverOptions as in, EventHandler as ir, useProxyRegistry as it, ThemeAdapter as j, FilterQuery as jn, LoggerPluginOptions as jt, useTheme as k, FilterItem as kn, LoggerContextOptions as kt, ToggleScopeControls as l, HydrationContext as ln, BreakpointsContext as lr, PermissionOptions as lt, TimelineTicket as m, createHydration as mn, createBreakpointsContext as mr, createPermissionsPlugin as mt, VirtualAnchor as n, useKeydown as nn, useTokens as nr, ProxyRegistryContext as nt, VirtualOptions as o, UseIntersectionObserverReturn as on, useEventListener as or, useProxyModel as ot, TimelineOptions as p, createFallbackHydration as pn, createBreakpoints as pr, createPermissionsContext as pt, useElementSize as q, TokenCollection as qn, createLocale as qt, VirtualContext as r, IntersectionObserverEntry as rn, CleanupFunction as rr, ProxyRegistryOptions as rt, VirtualState as s, useElementIntersection as sn, useWindowEventListener as sr, PermissionContext as st, ScrollToOptions as t, UseKeydownReturn as tn, createTokensContext as tr, useQueue as tt, useToggleScope as u, HydrationContextOptions as un, BreakpointsContextOptions as ur, PermissionPluginOptions as ut, Colors as v, FormContext as vn, toArray as vr, OverflowContext as vt, ThemeRecord as w, FormValue as wn, createContext as wr, MutationObserverRecord as wt, ThemeContextOptions as x, FormTicket as xn, createPlugin as xr, createOverflow as xt, ThemeColors as y, FormContextOptions as yn, Plugin as yr, OverflowContextOptions as yt, useStorage as z, FeaturePluginOptions as zn, ConsolaLoggerAdapter as zt };
|