@vuetify/v0 0.0.9 → 0.0.10
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 +1497 -466
- package/dist/components/index.d.mts +4 -0
- package/dist/components/index.mjs +7 -0
- package/dist/components-DFGu8N2g.mjs +947 -0
- package/dist/composables/index.d.mts +4 -0
- package/dist/composables/{index.js → index.mjs} +3 -3
- package/dist/{composables-DTW0WfTC.js → composables-TCjvMHyU.mjs} +590 -162
- package/dist/constants/{index.d.ts → index.d.mts} +1 -1
- package/dist/constants/{index.js → index.mjs} +3 -3
- package/dist/{globals-Cfd1Dr_o.js → globals-y0mJ6Eg7.mjs} +2 -2
- package/dist/{index-DWx3x9vE.d.ts → index-CQjOW_w5.d.mts} +101 -846
- package/dist/{index-DIX3zaZG.d.ts → index-CSdGoUCI.d.mts} +3 -2
- package/dist/index-CUnI4hGb.d.mts +815 -0
- package/dist/index-D-EP6KrS.d.mts +812 -0
- package/dist/index.d.mts +7 -0
- package/dist/index.mjs +8 -0
- package/dist/types/{index.d.ts → index.d.mts} +1 -1
- package/dist/utilities/index.d.mts +3 -0
- package/dist/utilities/index.mjs +3 -0
- package/dist/{utilities-rsKHgU2m.js → utilities-C26nB74O.mjs} +5 -1
- package/package.json +5 -5
- package/dist/components/index.d.ts +0 -4
- package/dist/components/index.js +0 -7
- package/dist/components-BfI4Pf1x.js +0 -350
- package/dist/composables/index.d.ts +0 -3
- package/dist/index-TlH7dtTg.d.ts +0 -241
- package/dist/index.d.ts +0 -6
- package/dist/index.js +0 -8
- package/dist/utilities/index.d.ts +0 -3
- package/dist/utilities/index.js +0 -3
- /package/dist/{constants-De5c3_aB.js → constants-Xfszzyok.mjs} +0 -0
- /package/dist/{htmlElements-lF7PGahL.js → htmlElements-BYo-fMlZ.mjs} +0 -0
- /package/dist/{index-BKc0YiL1.d.ts → index-8AIxAM2d.d.mts} +0 -0
- /package/dist/{index-C_lAPFXS.d.ts → index-DY7-T630.d.mts} +0 -0
- /package/dist/types/{index.js → index.mjs} +0 -0
|
@@ -1,9 +1,21 @@
|
|
|
1
|
-
import { a as
|
|
2
|
-
import { a as SUPPORTS_OBSERVER, i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, s as __LOGGER_ENABLED__, t as IN_BROWSER } from "./globals-
|
|
1
|
+
import { a as isNull, c as isObject, d as isUndefined, f as mergeDeep, i as isFunction, n as isArray, o as isNullOrUndefined, r as isBoolean, s as isNumber, t as genId, u as isString } from "./utilities-C26nB74O.mjs";
|
|
2
|
+
import { a as SUPPORTS_OBSERVER, i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, s as __LOGGER_ENABLED__, t as IN_BROWSER } from "./globals-y0mJ6Eg7.mjs";
|
|
3
3
|
import { computed, getCurrentInstance, getCurrentScope, inject, isRef, onMounted, onScopeDispose, onUnmounted, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, watch } from "vue";
|
|
4
4
|
|
|
5
5
|
//#region src/composables/createContext/index.ts
|
|
6
6
|
/**
|
|
7
|
+
* @module createContext
|
|
8
|
+
*
|
|
9
|
+
* @see https://0.vuetifyjs.com/composables/foundation/create-context
|
|
10
|
+
*
|
|
11
|
+
* @remarks
|
|
12
|
+
* Factory for creating type-safe Vue dependency injection contexts.
|
|
13
|
+
*
|
|
14
|
+
* Provides a wrapper around Vue's provide/inject that throws errors when context is not found,
|
|
15
|
+
* eliminating silent failures and improving developer experience. Supports both app-level and
|
|
16
|
+
* component-level provision.
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
7
19
|
* Injects a context provided by an ancestor component.
|
|
8
20
|
*
|
|
9
21
|
* @param key The key of the context to inject.
|
|
@@ -130,7 +142,7 @@ function createPlugin(options) {
|
|
|
130
142
|
/**
|
|
131
143
|
* Creates a new trinity for a context composable and its provider.
|
|
132
144
|
*
|
|
133
|
-
* @param
|
|
145
|
+
* @param useContext The function that retrieves/uses the context (typically named `useContext`).
|
|
134
146
|
* @param provideContext The function that provides the context to descendants.
|
|
135
147
|
* @param context The default context instance to use when no custom context is provided.
|
|
136
148
|
* @template Z The type of the context.
|
|
@@ -166,9 +178,9 @@ function createPlugin(options) {
|
|
|
166
178
|
* }
|
|
167
179
|
* ```
|
|
168
180
|
*/
|
|
169
|
-
function createTrinity(
|
|
181
|
+
function createTrinity(useContext$1, provideContext$1, context) {
|
|
170
182
|
return [
|
|
171
|
-
|
|
183
|
+
useContext$1,
|
|
172
184
|
(_context = context, app) => provideContext$1(_context, app),
|
|
173
185
|
context
|
|
174
186
|
];
|
|
@@ -177,6 +189,16 @@ function createTrinity(createContext$1, provideContext$1, context) {
|
|
|
177
189
|
//#endregion
|
|
178
190
|
//#region src/composables/toArray/index.ts
|
|
179
191
|
/**
|
|
192
|
+
* @module toArray
|
|
193
|
+
*
|
|
194
|
+
* @remarks
|
|
195
|
+
* Utility function to normalize single values and arrays into arrays.
|
|
196
|
+
*
|
|
197
|
+
* Converts single values into single-element arrays, passes arrays through unchanged,
|
|
198
|
+
* and handles null/undefined by returning empty arrays. Perfect for functions that
|
|
199
|
+
* accept both single values and arrays as input (e.g., ID | ID[]).
|
|
200
|
+
*/
|
|
201
|
+
/**
|
|
180
202
|
* Converts a value to an array.
|
|
181
203
|
*
|
|
182
204
|
* @param value The value to convert.
|
|
@@ -202,6 +224,21 @@ function toArray(value) {
|
|
|
202
224
|
//#endregion
|
|
203
225
|
//#region src/composables/toReactive/index.ts
|
|
204
226
|
/**
|
|
227
|
+
* @module toReactive
|
|
228
|
+
*
|
|
229
|
+
* @remarks
|
|
230
|
+
* Utility function to convert values and refs into reactive proxies with ref unwrapping.
|
|
231
|
+
*
|
|
232
|
+
* Key features:
|
|
233
|
+
* - Automatic ref unwrapping
|
|
234
|
+
* - Deep reactive proxying
|
|
235
|
+
* - Map and Set support with ref unwrapping
|
|
236
|
+
* - Nested object/array reactivity
|
|
237
|
+
* - Type preservation
|
|
238
|
+
*
|
|
239
|
+
* Perfect for creating reactive versions of plain objects while automatically unwrapping refs.
|
|
240
|
+
*/
|
|
241
|
+
/**
|
|
205
242
|
* Converts a `MaybeRef` to a `UnwrapNestedRefs`.
|
|
206
243
|
*
|
|
207
244
|
* @param objectRef The object to convert.
|
|
@@ -322,6 +359,23 @@ function toReactive(objectRef) {
|
|
|
322
359
|
//#endregion
|
|
323
360
|
//#region src/composables/useHydration/index.ts
|
|
324
361
|
/**
|
|
362
|
+
* @module useHydration
|
|
363
|
+
*
|
|
364
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
|
|
365
|
+
*
|
|
366
|
+
* @remarks
|
|
367
|
+
* SSR hydration state management composable.
|
|
368
|
+
*
|
|
369
|
+
* Key features:
|
|
370
|
+
* - Hydration state detection (browser vs SSR)
|
|
371
|
+
* - Root component detection
|
|
372
|
+
* - Readonly hydration state refs
|
|
373
|
+
* - Plugin installation support
|
|
374
|
+
* - Perfect for hydration-safe rendering
|
|
375
|
+
*
|
|
376
|
+
* Essential for composables that need to behave differently during SSR vs client-side.
|
|
377
|
+
*/
|
|
378
|
+
/**
|
|
325
379
|
* Creates a new hydration instance.
|
|
326
380
|
*
|
|
327
381
|
* @returns A new hydration instance.
|
|
@@ -446,6 +500,24 @@ function useHydration(namespace = "v0:hydration") {
|
|
|
446
500
|
//#endregion
|
|
447
501
|
//#region src/composables/useBreakpoints/index.ts
|
|
448
502
|
/**
|
|
503
|
+
* @module useBreakpoints
|
|
504
|
+
*
|
|
505
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
|
|
506
|
+
*
|
|
507
|
+
* @remarks
|
|
508
|
+
* Responsive breakpoint detection composable with window resize handling.
|
|
509
|
+
*
|
|
510
|
+
* Key features:
|
|
511
|
+
* - Window matchMedia integration
|
|
512
|
+
* - Six built-in breakpoints (xs, sm, md, lg, xl, xxl)
|
|
513
|
+
* - Automatic resize listener with cleanup
|
|
514
|
+
* - SSR-safe (checks IN_BROWSER)
|
|
515
|
+
* - Hydration-aware
|
|
516
|
+
* - Custom breakpoint configuration
|
|
517
|
+
*
|
|
518
|
+
* Perfect for responsive layouts and conditional rendering based on screen size.
|
|
519
|
+
*/
|
|
520
|
+
/**
|
|
449
521
|
* Creates default breakpoint configuration.
|
|
450
522
|
*
|
|
451
523
|
* @returns The default breakpoint configuration object.
|
|
@@ -693,6 +765,21 @@ function useBreakpoints(namespace = "v0:breakpoints") {
|
|
|
693
765
|
//#endregion
|
|
694
766
|
//#region src/composables/useEventListener/index.ts
|
|
695
767
|
/**
|
|
768
|
+
* @module useEventListener
|
|
769
|
+
*
|
|
770
|
+
* @remarks
|
|
771
|
+
* Event listener composable with automatic cleanup on scope disposal.
|
|
772
|
+
*
|
|
773
|
+
* Key features:
|
|
774
|
+
* - Supports Window, Document, and HTMLElement targets
|
|
775
|
+
* - Reactive targets, events, and listeners
|
|
776
|
+
* - Event options support (capture, passive, once)
|
|
777
|
+
* - Automatic removeEventListener on unmount
|
|
778
|
+
* - Multiple overloads for type safety
|
|
779
|
+
*
|
|
780
|
+
* Perfect for safely managing event listeners in Vue components.
|
|
781
|
+
*/
|
|
782
|
+
/**
|
|
696
783
|
* Attaches an event listener to a target.
|
|
697
784
|
*
|
|
698
785
|
* @param target The target to attach the event listener to.
|
|
@@ -910,6 +997,23 @@ var Vuetify0LoggerAdapter = class {
|
|
|
910
997
|
//#endregion
|
|
911
998
|
//#region src/composables/useLogger/index.ts
|
|
912
999
|
/**
|
|
1000
|
+
* @module useLogger
|
|
1001
|
+
*
|
|
1002
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-logger
|
|
1003
|
+
*
|
|
1004
|
+
* @remarks
|
|
1005
|
+
* Logging composable with adapter pattern supporting console, consola, and pino.
|
|
1006
|
+
*
|
|
1007
|
+
* Key features:
|
|
1008
|
+
* - Multiple log levels (trace, debug, info, warn, error, fatal)
|
|
1009
|
+
* - Adapter pattern for console/consola/pino integration
|
|
1010
|
+
* - Enable/disable logging
|
|
1011
|
+
* - Fallback logger for undefined loggers
|
|
1012
|
+
* - Context logging support
|
|
1013
|
+
*
|
|
1014
|
+
* Uses adapter pattern to abstract logging implementation.
|
|
1015
|
+
*/
|
|
1016
|
+
/**
|
|
913
1017
|
* Creates a new logger instance.
|
|
914
1018
|
*
|
|
915
1019
|
* @param options The options for the logger instance.
|
|
@@ -1086,7 +1190,7 @@ function createLoggerPlugin(_options = {}) {
|
|
|
1086
1190
|
provideLoggerContext(context, app);
|
|
1087
1191
|
},
|
|
1088
1192
|
setup: (_app) => {
|
|
1089
|
-
if (
|
|
1193
|
+
if (__DEV__ && IN_BROWSER) window.__v0Logger__ = context;
|
|
1090
1194
|
}
|
|
1091
1195
|
});
|
|
1092
1196
|
}
|
|
@@ -1124,6 +1228,21 @@ function useLogger(namespace = "v0:logger") {
|
|
|
1124
1228
|
//#endregion
|
|
1125
1229
|
//#region src/composables/useRegistry/index.ts
|
|
1126
1230
|
/**
|
|
1231
|
+
* @module useRegistry
|
|
1232
|
+
*
|
|
1233
|
+
* @remarks
|
|
1234
|
+
* A foundational composable for managing collections of items (tickets) with:
|
|
1235
|
+
* - Unique ID-based access
|
|
1236
|
+
* - Index-based ordering
|
|
1237
|
+
* - Value-based reverse lookup
|
|
1238
|
+
* - Automatic reindexing
|
|
1239
|
+
* - Optional event emission
|
|
1240
|
+
* - Performance-optimized caching
|
|
1241
|
+
*
|
|
1242
|
+
* The registry serves as the base for many other composables in the system,
|
|
1243
|
+
* including useSelection, useForm, useTimeline, and more.
|
|
1244
|
+
*/
|
|
1245
|
+
/**
|
|
1127
1246
|
* Creates a new registry instance.
|
|
1128
1247
|
*
|
|
1129
1248
|
* @param options The options for the registry instance.
|
|
@@ -1249,14 +1368,14 @@ function useRegistry(options) {
|
|
|
1249
1368
|
}
|
|
1250
1369
|
function values() {
|
|
1251
1370
|
const cached = cache.get("values");
|
|
1252
|
-
if (
|
|
1371
|
+
if (!/* @__PURE__ */ isUndefined(cached)) return cached;
|
|
1253
1372
|
const values$1 = Array.from(collection.values());
|
|
1254
1373
|
cache.set("values", values$1);
|
|
1255
1374
|
return values$1;
|
|
1256
1375
|
}
|
|
1257
1376
|
function entries() {
|
|
1258
1377
|
const cached = cache.get("entries");
|
|
1259
|
-
if (
|
|
1378
|
+
if (!/* @__PURE__ */ isUndefined(cached)) return cached;
|
|
1260
1379
|
const entries$1 = Array.from(collection.entries());
|
|
1261
1380
|
cache.set("entries", entries$1);
|
|
1262
1381
|
return entries$1;
|
|
@@ -1274,6 +1393,7 @@ function useRegistry(options) {
|
|
|
1274
1393
|
function reindex() {
|
|
1275
1394
|
if (catalog.size > 0) catalog.clear();
|
|
1276
1395
|
if (directory.size > 0) directory.clear();
|
|
1396
|
+
invalidate();
|
|
1277
1397
|
let index = 0;
|
|
1278
1398
|
for (const ticket of values()) {
|
|
1279
1399
|
if (ticket.index !== index) {
|
|
@@ -1284,7 +1404,7 @@ function useRegistry(options) {
|
|
|
1284
1404
|
assign(ticket.value, ticket.id);
|
|
1285
1405
|
index++;
|
|
1286
1406
|
}
|
|
1287
|
-
|
|
1407
|
+
emit("reindex:registry");
|
|
1288
1408
|
}
|
|
1289
1409
|
function register(registration = {}) {
|
|
1290
1410
|
const size = collection.size;
|
|
@@ -1293,9 +1413,10 @@ function useRegistry(options) {
|
|
|
1293
1413
|
logger.warn(`Ticket with id "${id}" already exists in the registry. Skipping registration.`);
|
|
1294
1414
|
return get(id);
|
|
1295
1415
|
}
|
|
1416
|
+
const valueIsUndefined = /* @__PURE__ */ isUndefined(registration.value);
|
|
1296
1417
|
const index = registration.index ?? size;
|
|
1297
|
-
const value =
|
|
1298
|
-
const valueIsIndex =
|
|
1418
|
+
const value = valueIsUndefined ? index : registration.value;
|
|
1419
|
+
const valueIsIndex = valueIsUndefined;
|
|
1299
1420
|
const ticket = {
|
|
1300
1421
|
...registration,
|
|
1301
1422
|
id,
|
|
@@ -1403,6 +1524,21 @@ function createRegistryContext(_options) {
|
|
|
1403
1524
|
//#endregion
|
|
1404
1525
|
//#region src/composables/useSelection/index.ts
|
|
1405
1526
|
/**
|
|
1527
|
+
* @module useSelection
|
|
1528
|
+
*
|
|
1529
|
+
* @remarks
|
|
1530
|
+
* Base composable for managing selected items in a collection with Set-based tracking.
|
|
1531
|
+
*
|
|
1532
|
+
* Key features:
|
|
1533
|
+
* - Set-based selectedIds for O(1) selection checks
|
|
1534
|
+
* - Mandatory selection mode (prevents deselecting last item)
|
|
1535
|
+
* - Auto-enrollment option (selects non-disabled items on register)
|
|
1536
|
+
* - Disabled item filtering
|
|
1537
|
+
* - Computed selectedItems and selectedValues Sets
|
|
1538
|
+
*
|
|
1539
|
+
* Extends useRegistry and serves as the base for useSingle, useGroup, useStep, and useFeatures.
|
|
1540
|
+
*/
|
|
1541
|
+
/**
|
|
1406
1542
|
* Creates a new selection instance for managing multiple selected items.
|
|
1407
1543
|
*
|
|
1408
1544
|
* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
|
|
@@ -1448,11 +1584,10 @@ function createRegistryContext(_options) {
|
|
|
1448
1584
|
* console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
|
|
1449
1585
|
* ```
|
|
1450
1586
|
*/
|
|
1451
|
-
function createSelection(
|
|
1587
|
+
function createSelection(_options = {}) {
|
|
1588
|
+
const { disabled = false, enroll = false, mandatory = false, multiple = false,...options } = _options;
|
|
1452
1589
|
const registry = useRegistry(options);
|
|
1453
1590
|
const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
|
|
1454
|
-
const enroll = options?.enroll ?? false;
|
|
1455
|
-
const mandatory = options?.mandatory ?? false;
|
|
1456
1591
|
const selectedItems = computed(() => {
|
|
1457
1592
|
return new Set(Array.from(selectedIds).map((id) => registry.get(id)));
|
|
1458
1593
|
});
|
|
@@ -1460,7 +1595,7 @@ function createSelection(options) {
|
|
|
1460
1595
|
return new Set(Array.from(selectedItems.value).map((item) => item?.value));
|
|
1461
1596
|
});
|
|
1462
1597
|
function seek(direction = "first", from) {
|
|
1463
|
-
return registry.seek(direction, from, (ticket) => !ticket.disabled);
|
|
1598
|
+
return registry.seek(direction, from, (ticket) => !toValue(ticket.disabled));
|
|
1464
1599
|
}
|
|
1465
1600
|
function mandate() {
|
|
1466
1601
|
if (!mandatory || registry.size === 0 || selectedIds.size > 0) return;
|
|
@@ -1469,7 +1604,8 @@ function createSelection(options) {
|
|
|
1469
1604
|
}
|
|
1470
1605
|
function select(id) {
|
|
1471
1606
|
const item = registry.get(id);
|
|
1472
|
-
if (!item || item.disabled) return;
|
|
1607
|
+
if (!item || toValue(item.disabled)) return;
|
|
1608
|
+
if (!multiple) selectedIds.clear();
|
|
1473
1609
|
selectedIds.add(id);
|
|
1474
1610
|
}
|
|
1475
1611
|
function unselect(id) {
|
|
@@ -1477,7 +1613,7 @@ function createSelection(options) {
|
|
|
1477
1613
|
selectedIds.delete(id);
|
|
1478
1614
|
}
|
|
1479
1615
|
function toggle(id) {
|
|
1480
|
-
if (
|
|
1616
|
+
if (selected(id)) unselect(id);
|
|
1481
1617
|
else select(id);
|
|
1482
1618
|
}
|
|
1483
1619
|
function selected(id) {
|
|
@@ -1489,13 +1625,13 @@ function createSelection(options) {
|
|
|
1489
1625
|
disabled: false,
|
|
1490
1626
|
...registration,
|
|
1491
1627
|
id,
|
|
1492
|
-
isSelected: toRef(() =>
|
|
1628
|
+
isSelected: toRef(() => selected(id)),
|
|
1493
1629
|
select: () => select(id),
|
|
1494
1630
|
unselect: () => unselect(id),
|
|
1495
1631
|
toggle: () => toggle(id)
|
|
1496
1632
|
};
|
|
1497
1633
|
const ticket = registry.register(item);
|
|
1498
|
-
if (enroll && !item.disabled) selectedIds.add(ticket.id);
|
|
1634
|
+
if (enroll && !toValue(item.disabled)) selectedIds.add(ticket.id);
|
|
1499
1635
|
if (mandatory === "force") mandate();
|
|
1500
1636
|
return ticket;
|
|
1501
1637
|
}
|
|
@@ -1510,6 +1646,7 @@ function createSelection(options) {
|
|
|
1510
1646
|
}
|
|
1511
1647
|
return {
|
|
1512
1648
|
...registry,
|
|
1649
|
+
disabled,
|
|
1513
1650
|
selectedIds,
|
|
1514
1651
|
selectedItems,
|
|
1515
1652
|
selectedValues,
|
|
@@ -1591,6 +1728,20 @@ function useSelection(namespace = "v0:selection") {
|
|
|
1591
1728
|
//#endregion
|
|
1592
1729
|
//#region src/composables/useGroup/index.ts
|
|
1593
1730
|
/**
|
|
1731
|
+
* @module useGroup
|
|
1732
|
+
*
|
|
1733
|
+
* @remarks
|
|
1734
|
+
* Multi-selection composable that extends useSelection with batch operation support.
|
|
1735
|
+
*
|
|
1736
|
+
* Key features:
|
|
1737
|
+
* - Batch operations (select/unselect/toggle accept ID | ID[])
|
|
1738
|
+
* - selectedIndexes computed Set for position-based tracking
|
|
1739
|
+
* - Perfect for checkboxes, multi-select dropdowns, filter panels
|
|
1740
|
+
*
|
|
1741
|
+
* Inheritance chain: useRegistry → useSelection → useGroup
|
|
1742
|
+
* Extended by: useFeatures
|
|
1743
|
+
*/
|
|
1744
|
+
/**
|
|
1594
1745
|
* Creates a new group instance with batch selection operations.
|
|
1595
1746
|
*
|
|
1596
1747
|
* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
|
|
@@ -1647,8 +1798,13 @@ function useSelection(namespace = "v0:selection") {
|
|
|
1647
1798
|
* console.log(checkboxes.selectedIds) // Set { 'option-b', 'option-c' }
|
|
1648
1799
|
* ```
|
|
1649
1800
|
*/
|
|
1650
|
-
function createGroup(
|
|
1651
|
-
const
|
|
1801
|
+
function createGroup(_options = {}) {
|
|
1802
|
+
const { mandatory = false, multiple = true,...options } = _options;
|
|
1803
|
+
const registry = createSelection({
|
|
1804
|
+
...options,
|
|
1805
|
+
mandatory,
|
|
1806
|
+
multiple
|
|
1807
|
+
});
|
|
1652
1808
|
const selectedIndexes = computed(() => {
|
|
1653
1809
|
return new Set(Array.from(registry.selectedItems.value).map((item) => item?.index));
|
|
1654
1810
|
});
|
|
@@ -1735,6 +1891,23 @@ function useGroup(namespace) {
|
|
|
1735
1891
|
//#endregion
|
|
1736
1892
|
//#region src/composables/useTokens/index.ts
|
|
1737
1893
|
/**
|
|
1894
|
+
* @module useTokens
|
|
1895
|
+
*
|
|
1896
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-tokens
|
|
1897
|
+
*
|
|
1898
|
+
* @remarks
|
|
1899
|
+
* Design token registry with alias resolution and W3C Design Tokens format support.
|
|
1900
|
+
*
|
|
1901
|
+
* Key features:
|
|
1902
|
+
* - Alias resolution with circular reference detection
|
|
1903
|
+
* - Nested token flattening with dot notation
|
|
1904
|
+
* - W3C Design Tokens format ($value, $type, $description, $extensions)
|
|
1905
|
+
* - Path-based resolution (e.g., {colors}.blue.500)
|
|
1906
|
+
* - Resolution caching for performance (~28,590 ops/sec)
|
|
1907
|
+
*
|
|
1908
|
+
* Used by useTheme, useLocale, and useFeatures for token-based configuration.
|
|
1909
|
+
*/
|
|
1910
|
+
/**
|
|
1738
1911
|
* Creates a new token instance.
|
|
1739
1912
|
*
|
|
1740
1913
|
* @param tokens The tokens to use.
|
|
@@ -1974,6 +2147,24 @@ function flatten(tokens, prefix = "", flat = false) {
|
|
|
1974
2147
|
//#endregion
|
|
1975
2148
|
//#region src/composables/useFeatures/index.ts
|
|
1976
2149
|
/**
|
|
2150
|
+
* @module useFeatures
|
|
2151
|
+
*
|
|
2152
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-features
|
|
2153
|
+
*
|
|
2154
|
+
* @remarks
|
|
2155
|
+
* Feature flag system with boolean and token-based features.
|
|
2156
|
+
*
|
|
2157
|
+
* Key features:
|
|
2158
|
+
* - Boolean features (true/false activation)
|
|
2159
|
+
* - Token features with $variation support
|
|
2160
|
+
* - Auto-selection of enabled features
|
|
2161
|
+
* - Multi-select support for feature combinations
|
|
2162
|
+
* - Perfect for A/B testing, progressive rollout, feature toggles
|
|
2163
|
+
*
|
|
2164
|
+
* Inheritance chain: useRegistry → createSelection → createGroup → createFeatures
|
|
2165
|
+
* Integrates with useTokens for token-based features.
|
|
2166
|
+
*/
|
|
2167
|
+
/**
|
|
1977
2168
|
* Creates a new features instance.
|
|
1978
2169
|
*
|
|
1979
2170
|
* @param options The options for the features instance.
|
|
@@ -2133,6 +2324,21 @@ function useFeatures(namespace = "v0:features") {
|
|
|
2133
2324
|
|
|
2134
2325
|
//#endregion
|
|
2135
2326
|
//#region src/composables/useFilter/index.ts
|
|
2327
|
+
/**
|
|
2328
|
+
* @module useFilter
|
|
2329
|
+
*
|
|
2330
|
+
* @remarks
|
|
2331
|
+
* Reactive array filtering composable with multiple filter modes.
|
|
2332
|
+
*
|
|
2333
|
+
* Key features:
|
|
2334
|
+
* - Four filter modes: some, every, union, intersection
|
|
2335
|
+
* - Case-insensitive filtering
|
|
2336
|
+
* - Custom filter functions
|
|
2337
|
+
* - Reactive updates
|
|
2338
|
+
* - Perfect for search, multi-criteria filtering
|
|
2339
|
+
*
|
|
2340
|
+
* Filters arrays based on query strings with configurable matching strategies.
|
|
2341
|
+
*/
|
|
2136
2342
|
function defaultFilter(query, item, keys, mode = "some") {
|
|
2137
2343
|
const queries = Array.isArray(query) ? query.map((q) => String(q).toLowerCase()) : [String(query).toLowerCase()];
|
|
2138
2344
|
function match(value, q) {
|
|
@@ -2190,6 +2396,22 @@ function useFilter(query, items, options = {}) {
|
|
|
2190
2396
|
//#endregion
|
|
2191
2397
|
//#region src/composables/useForm/index.ts
|
|
2192
2398
|
/**
|
|
2399
|
+
* @module useForm
|
|
2400
|
+
*
|
|
2401
|
+
* @remarks
|
|
2402
|
+
* Form validation composable with async rule support and multiple validation modes.
|
|
2403
|
+
*
|
|
2404
|
+
* Key features:
|
|
2405
|
+
* - Sync and async validation rules
|
|
2406
|
+
* - Multiple validation modes (submit, change, combined)
|
|
2407
|
+
* - Tri-state isValid (null/true/false)
|
|
2408
|
+
* - isPristine tracking
|
|
2409
|
+
* - Silent validation mode
|
|
2410
|
+
* - Form-level validation and reset
|
|
2411
|
+
*
|
|
2412
|
+
* Each field is registered with validation rules and tracks its own state independently.
|
|
2413
|
+
*/
|
|
2414
|
+
/**
|
|
2193
2415
|
* Creates a new form instance.
|
|
2194
2416
|
*
|
|
2195
2417
|
* @param options The options for the form instance.
|
|
@@ -2391,6 +2613,22 @@ function useForm(namespace = "v0:form") {
|
|
|
2391
2613
|
//#endregion
|
|
2392
2614
|
//#region src/composables/useIntersectionObserver/index.ts
|
|
2393
2615
|
/**
|
|
2616
|
+
* @module useIntersectionObserver
|
|
2617
|
+
*
|
|
2618
|
+
* @remarks
|
|
2619
|
+
* IntersectionObserver composable with lifecycle management.
|
|
2620
|
+
*
|
|
2621
|
+
* Key features:
|
|
2622
|
+
* - IntersectionObserver API wrapper
|
|
2623
|
+
* - Pause/resume/stop functionality
|
|
2624
|
+
* - Automatic cleanup on unmount
|
|
2625
|
+
* - SSR-safe (checks SUPPORTS_INTERSECTION_OBSERVER)
|
|
2626
|
+
* - Hydration-aware
|
|
2627
|
+
* - Immediate callback option
|
|
2628
|
+
*
|
|
2629
|
+
* Perfect for lazy loading, infinite scroll, and visibility detection.
|
|
2630
|
+
*/
|
|
2631
|
+
/**
|
|
2394
2632
|
* A composable that uses the Intersection Observer API to detect when an element
|
|
2395
2633
|
* is visible in the viewport.
|
|
2396
2634
|
*
|
|
@@ -2555,6 +2793,20 @@ function useElementIntersection(target, options = {}) {
|
|
|
2555
2793
|
//#endregion
|
|
2556
2794
|
//#region src/composables/useKeydown/index.ts
|
|
2557
2795
|
/**
|
|
2796
|
+
* @module useKeydown
|
|
2797
|
+
*
|
|
2798
|
+
* @remarks
|
|
2799
|
+
* Keydown event listener composable with key filtering.
|
|
2800
|
+
*
|
|
2801
|
+
* Key features:
|
|
2802
|
+
* - Key-specific event handling
|
|
2803
|
+
* - preventDefault and stopPropagation options
|
|
2804
|
+
* - Automatic cleanup on scope disposal
|
|
2805
|
+
* - Auto-starts when in component scope
|
|
2806
|
+
*
|
|
2807
|
+
* Simplified wrapper around useEventListener for keyboard interactions.
|
|
2808
|
+
*/
|
|
2809
|
+
/**
|
|
2558
2810
|
* A composable that adds a keydown event listener to the document.
|
|
2559
2811
|
*
|
|
2560
2812
|
* @param handlers The key handlers to add.
|
|
@@ -2602,6 +2854,19 @@ function useKeydown(handlers) {
|
|
|
2602
2854
|
//#endregion
|
|
2603
2855
|
//#region src/composables/useSingle/index.ts
|
|
2604
2856
|
/**
|
|
2857
|
+
* @module useSingle
|
|
2858
|
+
*
|
|
2859
|
+
* @remarks
|
|
2860
|
+
* Single-selection composable that extends useSelection to enforce only one selected item.
|
|
2861
|
+
*
|
|
2862
|
+
* Key features:
|
|
2863
|
+
* - Auto-clears previous selection when selecting new item
|
|
2864
|
+
* - Singular computed properties (selectedId, selectedItem, selectedIndex, selectedValue)
|
|
2865
|
+
* - Perfect for tabs, radio buttons, theme selectors
|
|
2866
|
+
*
|
|
2867
|
+
* Inheritance chain: useRegistry → useSelection → useSingle
|
|
2868
|
+
*/
|
|
2869
|
+
/**
|
|
2605
2870
|
* Creates a new single selection instance that enforces only one selected item at a time.
|
|
2606
2871
|
*
|
|
2607
2872
|
* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
|
|
@@ -2651,26 +2916,24 @@ function useKeydown(handlers) {
|
|
|
2651
2916
|
* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
|
|
2652
2917
|
* ```
|
|
2653
2918
|
*/
|
|
2654
|
-
function createSingle(
|
|
2655
|
-
const
|
|
2656
|
-
const
|
|
2919
|
+
function createSingle(_options = {}) {
|
|
2920
|
+
const { mandatory = false, multiple = false,...options } = _options;
|
|
2921
|
+
const registry = createSelection({
|
|
2922
|
+
...options,
|
|
2923
|
+
mandatory,
|
|
2924
|
+
multiple
|
|
2925
|
+
});
|
|
2657
2926
|
const selectedId = computed(() => registry.selectedIds.values().next().value);
|
|
2658
2927
|
const selectedItem = computed(() => registry.selectedItems.value.values().next().value);
|
|
2659
2928
|
const selectedIndex = computed(() => selectedItem.value?.index ?? -1);
|
|
2660
2929
|
const selectedValue = computed(() => selectedItem.value?.value);
|
|
2661
|
-
function select(id) {
|
|
2662
|
-
const item = registry.get(id);
|
|
2663
|
-
if (!item || item.disabled) return;
|
|
2664
|
-
registry.selectedIds.clear();
|
|
2665
|
-
registry.select(id);
|
|
2666
|
-
}
|
|
2667
2930
|
function unselect(id) {
|
|
2668
2931
|
if (mandatory && registry.selectedIds.size === 1) return;
|
|
2669
2932
|
registry.selectedIds.delete(id);
|
|
2670
2933
|
}
|
|
2671
2934
|
function toggle(id) {
|
|
2672
2935
|
if (registry.selectedIds.has(id)) unselect(id);
|
|
2673
|
-
else select(id);
|
|
2936
|
+
else registry.select(id);
|
|
2674
2937
|
}
|
|
2675
2938
|
return {
|
|
2676
2939
|
...registry,
|
|
@@ -2678,7 +2941,6 @@ function createSingle(options) {
|
|
|
2678
2941
|
selectedItem,
|
|
2679
2942
|
selectedIndex,
|
|
2680
2943
|
selectedValue,
|
|
2681
|
-
select,
|
|
2682
2944
|
unselect,
|
|
2683
2945
|
toggle,
|
|
2684
2946
|
get size() {
|
|
@@ -2783,6 +3045,21 @@ var Vuetify0LocaleAdapter = class {
|
|
|
2783
3045
|
//#endregion
|
|
2784
3046
|
//#region src/composables/useLocale/index.ts
|
|
2785
3047
|
/**
|
|
3048
|
+
* @module useLocale
|
|
3049
|
+
*
|
|
3050
|
+
* @remarks
|
|
3051
|
+
* Internationalization (i18n) composable with adapter pattern for message translation.
|
|
3052
|
+
*
|
|
3053
|
+
* Key features:
|
|
3054
|
+
* - Locale selection with createSingle
|
|
3055
|
+
* - Token-based message storage with useTokens
|
|
3056
|
+
* - Numbered and named placeholder support ({0}, {name})
|
|
3057
|
+
* - Number formatting with Intl.NumberFormat
|
|
3058
|
+
* - Adapter pattern for integration with i18n providers
|
|
3059
|
+
*
|
|
3060
|
+
* Integrates with createSingle for locale selection and useTokens for message resolution.
|
|
3061
|
+
*/
|
|
3062
|
+
/**
|
|
2786
3063
|
* Creates a new locale instance.
|
|
2787
3064
|
*
|
|
2788
3065
|
* @param options The options for the locale instance.
|
|
@@ -2919,6 +3196,22 @@ function useLocale(namespace = "v0:locale") {
|
|
|
2919
3196
|
//#endregion
|
|
2920
3197
|
//#region src/composables/useMutationObserver/index.ts
|
|
2921
3198
|
/**
|
|
3199
|
+
* @module useMutationObserver
|
|
3200
|
+
*
|
|
3201
|
+
* @remarks
|
|
3202
|
+
* MutationObserver composable with lifecycle management.
|
|
3203
|
+
*
|
|
3204
|
+
* Key features:
|
|
3205
|
+
* - MutationObserver API wrapper
|
|
3206
|
+
* - Pause/resume/stop functionality
|
|
3207
|
+
* - Automatic cleanup on unmount
|
|
3208
|
+
* - SSR-safe (checks SUPPORTS_MUTATION_OBSERVER)
|
|
3209
|
+
* - Hydration-aware
|
|
3210
|
+
* - Configurable observation options (childList, attributes, characterData, etc.)
|
|
3211
|
+
*
|
|
3212
|
+
* Perfect for detecting DOM changes and responding to mutations.
|
|
3213
|
+
*/
|
|
3214
|
+
/**
|
|
2922
3215
|
* A composable that uses the Mutation Observer API to detect changes in the DOM.
|
|
2923
3216
|
*
|
|
2924
3217
|
* @param target The element to observe.
|
|
@@ -3061,6 +3354,23 @@ var Vuetify0PermissionAdapter = class extends PermissionAdapter {
|
|
|
3061
3354
|
//#endregion
|
|
3062
3355
|
//#region src/composables/usePermissions/index.ts
|
|
3063
3356
|
/**
|
|
3357
|
+
* @module usePermissions
|
|
3358
|
+
*
|
|
3359
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
|
|
3360
|
+
*
|
|
3361
|
+
* @remarks
|
|
3362
|
+
* Permission management composable with support for RBAC and ABAC patterns.
|
|
3363
|
+
*
|
|
3364
|
+
* Key features:
|
|
3365
|
+
* - Role-Based Access Control (RBAC) support
|
|
3366
|
+
* - Attribute-Based Access Control (ABAC) with context
|
|
3367
|
+
* - Functional permission conditions
|
|
3368
|
+
* - Token-based permission storage
|
|
3369
|
+
* - Adapter pattern for custom permission systems
|
|
3370
|
+
*
|
|
3371
|
+
* Built on useTokens for flexible permission configuration.
|
|
3372
|
+
*/
|
|
3373
|
+
/**
|
|
3064
3374
|
* Creates a new permissions instance.
|
|
3065
3375
|
*
|
|
3066
3376
|
* @param options The options for the permissions instance.
|
|
@@ -3207,15 +3517,27 @@ function usePermissions(namespace = "v0:permissions") {
|
|
|
3207
3517
|
//#endregion
|
|
3208
3518
|
//#region src/composables/useProxyModel/index.ts
|
|
3209
3519
|
/**
|
|
3210
|
-
*
|
|
3520
|
+
* @module useProxyModel
|
|
3521
|
+
*
|
|
3522
|
+
* @remarks
|
|
3523
|
+
* Proxy composable for bidirectional sync between selection registry and v-model.
|
|
3524
|
+
*
|
|
3525
|
+
* Key features:
|
|
3526
|
+
* - Bidirectional synchronization
|
|
3527
|
+
* - Array and single-value modes
|
|
3528
|
+
* - Automatic cleanup on scope disposal
|
|
3529
|
+
* - Perfect for form controls with selection backing
|
|
3530
|
+
*
|
|
3531
|
+
* Bridges the gap between selection composables and Vue's v-model.
|
|
3532
|
+
*/
|
|
3533
|
+
/**
|
|
3534
|
+
* Syncs a ref with a selection registry bidirectionally.
|
|
3211
3535
|
*
|
|
3212
3536
|
* @param registry The selection registry to bind to.
|
|
3213
|
-
* @param
|
|
3537
|
+
* @param model The ref to sync.
|
|
3214
3538
|
* @param options The options for the proxy model.
|
|
3215
|
-
* @param transformIn A function to transform the value before setting it.
|
|
3216
|
-
* @param transformOut A function to transform the value before getting it.
|
|
3217
3539
|
* @template Z The type of the selection ticket.
|
|
3218
|
-
* @returns A
|
|
3540
|
+
* @returns A function to stop the sync.
|
|
3219
3541
|
*
|
|
3220
3542
|
* @see https://0.vuetifyjs.com/composables/forms/use-proxy-model
|
|
3221
3543
|
*
|
|
@@ -3223,50 +3545,55 @@ function usePermissions(namespace = "v0:permissions") {
|
|
|
3223
3545
|
* ```ts
|
|
3224
3546
|
* import { createSelection, useProxyModel } from '@vuetify/v0'
|
|
3225
3547
|
*
|
|
3548
|
+
* const model = ref()
|
|
3226
3549
|
* const registry = createSelection({ events: true })
|
|
3227
3550
|
* registry.onboard([
|
|
3228
3551
|
* { id: 'item-1', value: 'Item 1' },
|
|
3229
3552
|
* { id: 'item-2', value: 'Item 2' },
|
|
3230
3553
|
* ])
|
|
3231
3554
|
*
|
|
3232
|
-
* const
|
|
3555
|
+
* const stop = useProxyModel(registry, model)
|
|
3233
3556
|
* ```
|
|
3234
3557
|
*/
|
|
3235
|
-
function useProxyModel(registry,
|
|
3236
|
-
const
|
|
3237
|
-
const
|
|
3238
|
-
const
|
|
3239
|
-
const isModelArray = /* @__PURE__ */ isArray(initial);
|
|
3558
|
+
function useProxyModel(registry, model, options) {
|
|
3559
|
+
const multiple = options?.multiple ?? false;
|
|
3560
|
+
const _transformIn = options?.transformIn;
|
|
3561
|
+
const _transformOut = options?.transformOut;
|
|
3240
3562
|
function transformIn(val) {
|
|
3241
|
-
|
|
3563
|
+
const value = toValue(val);
|
|
3564
|
+
return toArray(/* @__PURE__ */ isFunction(_transformIn) ? _transformIn(value) : value);
|
|
3242
3565
|
}
|
|
3243
3566
|
function transformOut(val) {
|
|
3244
3567
|
if (/* @__PURE__ */ isFunction(_transformOut)) return _transformOut(val);
|
|
3245
|
-
return
|
|
3246
|
-
}
|
|
3247
|
-
const
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3568
|
+
return multiple ? val : val[0];
|
|
3569
|
+
}
|
|
3570
|
+
const modelAsArray = transformIn(model);
|
|
3571
|
+
const pending = new Set(modelAsArray);
|
|
3572
|
+
for (const value of modelAsArray) {
|
|
3573
|
+
const ids = registry.browse(value);
|
|
3574
|
+
if (/* @__PURE__ */ isArray(ids)) {
|
|
3575
|
+
for (const id of ids) registry.select(id);
|
|
3576
|
+
pending.delete(value);
|
|
3577
|
+
} else if (ids) {
|
|
3578
|
+
registry.select(ids);
|
|
3579
|
+
pending.delete(value);
|
|
3253
3580
|
}
|
|
3254
|
-
}
|
|
3255
|
-
const
|
|
3256
|
-
|
|
3257
|
-
model.value = Array.from(toValue(val));
|
|
3258
|
-
|
|
3259
|
-
});
|
|
3260
|
-
const
|
|
3581
|
+
}
|
|
3582
|
+
const registryWatch = watch(registry.selectedValues, (val) => {
|
|
3583
|
+
modelWatch.pause();
|
|
3584
|
+
model.value = transformOut(Array.from(toValue(val)));
|
|
3585
|
+
modelWatch.resume();
|
|
3586
|
+
}, { flush: "sync" });
|
|
3587
|
+
const modelWatch = watch(model, (val) => {
|
|
3588
|
+
registryWatch.pause();
|
|
3261
3589
|
const currentIds = new Set(toValue(registry.selectedIds));
|
|
3262
3590
|
const targetIds = /* @__PURE__ */ new Set();
|
|
3263
|
-
for (const value of
|
|
3591
|
+
for (const value of transformIn(val)) {
|
|
3264
3592
|
const ids = registry.browse(value);
|
|
3265
3593
|
if (/* @__PURE__ */ isArray(ids)) for (const single of ids) targetIds.add(single);
|
|
3266
3594
|
else if (ids) targetIds.add(ids);
|
|
3267
3595
|
}
|
|
3268
|
-
|
|
3269
|
-
if (isModelArray) {
|
|
3596
|
+
if (multiple) {
|
|
3270
3597
|
for (const id of currentIds.difference(targetIds)) registry.selectedIds.delete(id);
|
|
3271
3598
|
for (const id of targetIds.difference(currentIds)) registry.selectedIds.add(id);
|
|
3272
3599
|
} else {
|
|
@@ -3275,55 +3602,48 @@ function useProxyModel(registry, _initial, options, _transformIn, _transformOut)
|
|
|
3275
3602
|
if (last !== void 0) registry.unselect(last);
|
|
3276
3603
|
if (next !== void 0) registry.select(next);
|
|
3277
3604
|
}
|
|
3278
|
-
|
|
3605
|
+
registryWatch.resume();
|
|
3606
|
+
}, {
|
|
3607
|
+
flush: "sync",
|
|
3608
|
+
deep: multiple
|
|
3279
3609
|
});
|
|
3280
3610
|
function onRegister(ticket) {
|
|
3281
|
-
if (!
|
|
3282
|
-
|
|
3283
|
-
|
|
3611
|
+
if (!pending.has(ticket.value) || ticket.disabled) return;
|
|
3612
|
+
registryWatch.pause();
|
|
3613
|
+
modelWatch.pause();
|
|
3284
3614
|
registry.select(ticket.id);
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
function onUnregister(ticket) {
|
|
3289
|
-
if (!internal.value.includes(ticket.value)) return;
|
|
3290
|
-
registryWatcher.pause();
|
|
3291
|
-
modelWatcher.pause();
|
|
3292
|
-
registry.unselect(ticket.id);
|
|
3293
|
-
registryWatcher.resume();
|
|
3294
|
-
modelWatcher.resume();
|
|
3295
|
-
}
|
|
3296
|
-
function onUpdate(ticket) {
|
|
3297
|
-
const hasValue = internal.value.includes(ticket.value);
|
|
3298
|
-
const isSelected = toValue(registry.selectedIds).has(ticket.id);
|
|
3299
|
-
if (!hasValue && isSelected) onUnregister(ticket);
|
|
3300
|
-
else if (hasValue && !isSelected) onRegister(ticket);
|
|
3301
|
-
}
|
|
3302
|
-
function onClear() {
|
|
3303
|
-
registryWatcher.pause();
|
|
3304
|
-
modelWatcher.pause();
|
|
3305
|
-
registry.selectedIds.clear();
|
|
3306
|
-
registryWatcher.resume();
|
|
3307
|
-
modelWatcher.resume();
|
|
3615
|
+
pending.delete(ticket.value);
|
|
3616
|
+
modelWatch.resume();
|
|
3617
|
+
registryWatch.resume();
|
|
3308
3618
|
}
|
|
3309
3619
|
registry.on("register:ticket", onRegister);
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
registry.off("unregister:ticket", onUnregister);
|
|
3318
|
-
registry.off("update:ticket", onUpdate);
|
|
3319
|
-
registry.off("clear:registry", onClear);
|
|
3320
|
-
}, true);
|
|
3321
|
-
return model;
|
|
3620
|
+
function stop() {
|
|
3621
|
+
registryWatch();
|
|
3622
|
+
modelWatch();
|
|
3623
|
+
registry.off("register:ticket", onRegister);
|
|
3624
|
+
}
|
|
3625
|
+
onScopeDispose(stop, true);
|
|
3626
|
+
return stop;
|
|
3322
3627
|
}
|
|
3323
3628
|
|
|
3324
3629
|
//#endregion
|
|
3325
3630
|
//#region src/composables/useProxyRegistry/index.ts
|
|
3326
3631
|
/**
|
|
3632
|
+
* @module useProxyRegistry
|
|
3633
|
+
*
|
|
3634
|
+
* @remarks
|
|
3635
|
+
* Proxy composable for reactive registry keys, values, entries, and size.
|
|
3636
|
+
*
|
|
3637
|
+
* Key features:
|
|
3638
|
+
* - Reactive proxy for registry data
|
|
3639
|
+
* - Deep or shallow reactivity options
|
|
3640
|
+
* - Event-based updates
|
|
3641
|
+
* - Automatic cleanup on scope disposal
|
|
3642
|
+
* - Transforms Map-based registry into reactive refs
|
|
3643
|
+
*
|
|
3644
|
+
* Perfect for exposing registry data as reactive computed properties.
|
|
3645
|
+
*/
|
|
3646
|
+
/**
|
|
3327
3647
|
* Creates a proxy registry that provides reactive objects for registry data.
|
|
3328
3648
|
*
|
|
3329
3649
|
* @param registry The registry instance to proxy.
|
|
@@ -3373,6 +3693,21 @@ function useProxyRegistry(registry, options) {
|
|
|
3373
3693
|
//#endregion
|
|
3374
3694
|
//#region src/composables/useQueue/index.ts
|
|
3375
3695
|
/**
|
|
3696
|
+
* @module useQueue
|
|
3697
|
+
*
|
|
3698
|
+
* @remarks
|
|
3699
|
+
* A queue composable for managing time-based collections with:
|
|
3700
|
+
* - Automatic timeout-based removal
|
|
3701
|
+
* - Pause/resume functionality
|
|
3702
|
+
* - FIFO (First In, First Out) ordering
|
|
3703
|
+
* - Manual dismissal support
|
|
3704
|
+
* - Queue progression management
|
|
3705
|
+
*
|
|
3706
|
+
* Built on top of useRegistry, the queue automatically manages timeouts for tickets,
|
|
3707
|
+
* ensuring only the first ticket in the queue is active at any time. When an ticket
|
|
3708
|
+
* expires or is removed, the next ticket in the queue automatically becomes active.
|
|
3709
|
+
*/
|
|
3710
|
+
/**
|
|
3376
3711
|
* Creates a new queue instance
|
|
3377
3712
|
*
|
|
3378
3713
|
* @param options The options for the queue instance
|
|
@@ -3538,6 +3873,22 @@ function useQueue(namespace = "v0:queue") {
|
|
|
3538
3873
|
//#endregion
|
|
3539
3874
|
//#region src/composables/useResizeObserver/index.ts
|
|
3540
3875
|
/**
|
|
3876
|
+
* @module useResizeObserver
|
|
3877
|
+
*
|
|
3878
|
+
* @remarks
|
|
3879
|
+
* ResizeObserver composable with lifecycle management.
|
|
3880
|
+
*
|
|
3881
|
+
* Key features:
|
|
3882
|
+
* - ResizeObserver API wrapper
|
|
3883
|
+
* - Pause/resume/stop functionality
|
|
3884
|
+
* - Automatic cleanup on unmount
|
|
3885
|
+
* - SSR-safe (checks SUPPORTS_OBSERVER)
|
|
3886
|
+
* - Hydration-aware
|
|
3887
|
+
* - Box model options (content-box/border-box)
|
|
3888
|
+
*
|
|
3889
|
+
* Perfect for responsive components and size-based rendering.
|
|
3890
|
+
*/
|
|
3891
|
+
/**
|
|
3541
3892
|
* A composable that uses the Resize Observer API to detect when an element's
|
|
3542
3893
|
* size changes.
|
|
3543
3894
|
*
|
|
@@ -3689,10 +4040,24 @@ function useElementSize(target) {
|
|
|
3689
4040
|
//#endregion
|
|
3690
4041
|
//#region src/composables/useStep/index.ts
|
|
3691
4042
|
/**
|
|
3692
|
-
*
|
|
4043
|
+
* @module useStep
|
|
4044
|
+
*
|
|
4045
|
+
* @remarks
|
|
4046
|
+
* Navigation composable that extends useSingle with first/last/next/prev/step methods.
|
|
4047
|
+
*
|
|
4048
|
+
* Key features:
|
|
4049
|
+
* - Configurable circular or bounded navigation
|
|
4050
|
+
* - Automatic disabled item skipping
|
|
4051
|
+
* - Arbitrary step counts (positive/negative)
|
|
4052
|
+
* - Perfect for wizards, carousels, pagination, onboarding flows
|
|
4053
|
+
*
|
|
4054
|
+
* Inheritance chain: useRegistry → useSelection → useSingle → useStep
|
|
4055
|
+
*/
|
|
4056
|
+
/**
|
|
4057
|
+
* Creates a new step instance with navigation through items.
|
|
3693
4058
|
*
|
|
3694
4059
|
* Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
|
|
3695
|
-
* for sequential navigation.
|
|
4060
|
+
* for sequential navigation. Supports both circular (wrapping) and bounded (stopping at edges) modes.
|
|
3696
4061
|
*
|
|
3697
4062
|
* @param options The options for the step instance.
|
|
3698
4063
|
* @template Z The type of the step ticket.
|
|
@@ -3701,7 +4066,7 @@ function useElementSize(target) {
|
|
|
3701
4066
|
*
|
|
3702
4067
|
* @remarks
|
|
3703
4068
|
* **Key Features:**
|
|
3704
|
-
* - **
|
|
4069
|
+
* - **Configurable Navigation**: `circular: true` for wrapping, `false` for bounded (default: false)
|
|
3705
4070
|
* - **Disabled Item Skipping**: Automatically skips disabled items during navigation
|
|
3706
4071
|
* - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
|
|
3707
4072
|
* - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
|
|
@@ -3709,15 +4074,20 @@ function useElementSize(target) {
|
|
|
3709
4074
|
* **Navigation Methods:**
|
|
3710
4075
|
* - `first()`: Select first non-disabled item
|
|
3711
4076
|
* - `last()`: Select last non-disabled item
|
|
3712
|
-
* - `next()`: Move to next item (wraps
|
|
3713
|
-
* - `prev()`: Move to previous item (wraps
|
|
4077
|
+
* - `next()`: Move to next item (wraps if circular, stops at end if bounded)
|
|
4078
|
+
* - `prev()`: Move to previous item (wraps if circular, stops at start if bounded)
|
|
3714
4079
|
* - `step(count)`: Move by `count` positions (negative for backward)
|
|
3715
4080
|
*
|
|
3716
|
-
* **
|
|
3717
|
-
* - Uses modulo arithmetic for
|
|
4081
|
+
* **Circular Mode (`circular: true`):**
|
|
4082
|
+
* - Uses modulo arithmetic for wrapping: `((index % length) + length) % length`
|
|
3718
4083
|
* - Works correctly with negative indexes and large step counts
|
|
3719
|
-
* -
|
|
3720
|
-
*
|
|
4084
|
+
* - Perfect for carousels, theme switchers, infinite scrolling
|
|
4085
|
+
*
|
|
4086
|
+
* **Bounded Mode (`circular: false`, default):**
|
|
4087
|
+
* - Navigation stops at boundaries (no wrapping)
|
|
4088
|
+
* - `next()` on last item does nothing
|
|
4089
|
+
* - `prev()` on first item does nothing
|
|
4090
|
+
* - Perfect for pagination, wizards with explicit completion, forms
|
|
3721
4091
|
*
|
|
3722
4092
|
* **Inheritance Chain:**
|
|
3723
4093
|
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
@@ -3728,26 +4098,31 @@ function useElementSize(target) {
|
|
|
3728
4098
|
* ```ts
|
|
3729
4099
|
* import { createStep } from '@vuetify/v0'
|
|
3730
4100
|
*
|
|
3731
|
-
*
|
|
3732
|
-
*
|
|
3733
|
-
*
|
|
3734
|
-
* { id: '
|
|
3735
|
-
* { id: '
|
|
3736
|
-
* { id: '
|
|
3737
|
-
* { id: 'confirm', value: 'Confirmation' },
|
|
4101
|
+
* // Bounded navigation (default) - for pagination
|
|
4102
|
+
* const pagination = createStep({ circular: false })
|
|
4103
|
+
* pagination.onboard([
|
|
4104
|
+
* { id: 'page-1', value: 1 },
|
|
4105
|
+
* { id: 'page-2', value: 2 },
|
|
4106
|
+
* { id: 'page-3', value: 3 },
|
|
3738
4107
|
* ])
|
|
3739
|
-
*
|
|
3740
|
-
*
|
|
3741
|
-
*
|
|
3742
|
-
*
|
|
3743
|
-
*
|
|
3744
|
-
*
|
|
3745
|
-
*
|
|
3746
|
-
*
|
|
3747
|
-
*
|
|
4108
|
+
* pagination.first() // Select page 1
|
|
4109
|
+
* pagination.prev() // Does nothing (already at first)
|
|
4110
|
+
* pagination.next() // Select page 2
|
|
4111
|
+
*
|
|
4112
|
+
* // Circular navigation - for carousels
|
|
4113
|
+
* const carousel = createStep({ circular: true })
|
|
4114
|
+
* carousel.onboard([
|
|
4115
|
+
* { id: 'slide-1', value: 'First' },
|
|
4116
|
+
* { id: 'slide-2', value: 'Second' },
|
|
4117
|
+
* { id: 'slide-3', value: 'Third' },
|
|
4118
|
+
* ])
|
|
4119
|
+
* carousel.first()
|
|
4120
|
+
* carousel.prev() // Wraps to 'slide-3'
|
|
4121
|
+
* carousel.next() // Wraps to 'slide-1'
|
|
3748
4122
|
* ```
|
|
3749
4123
|
*/
|
|
3750
|
-
function createStep(
|
|
4124
|
+
function createStep(_options = {}) {
|
|
4125
|
+
const { circular = false,...options } = _options;
|
|
3751
4126
|
const registry = createSingle(options);
|
|
3752
4127
|
function first() {
|
|
3753
4128
|
const ticket = registry.seek("first");
|
|
@@ -3769,12 +4144,15 @@ function createStep(options) {
|
|
|
3769
4144
|
function step(count = 1) {
|
|
3770
4145
|
const length = registry.size;
|
|
3771
4146
|
if (!length) return;
|
|
4147
|
+
const currentIndex = registry.selectedIndex.value;
|
|
3772
4148
|
const direction = Math.sign(count || 1);
|
|
3773
4149
|
let hops = 0;
|
|
3774
|
-
let index = wrapped(length,
|
|
4150
|
+
let index = circular ? wrapped(length, currentIndex + count) : currentIndex + count;
|
|
4151
|
+
if (!circular && (index < 0 || index >= length)) return;
|
|
3775
4152
|
let id = registry.lookup(index);
|
|
3776
|
-
while (id !== void 0 && registry.get(id)?.disabled && hops < length) {
|
|
3777
|
-
index = wrapped(length, index + direction);
|
|
4153
|
+
while (id !== void 0 && toValue(registry.get(id)?.disabled) && hops < length) {
|
|
4154
|
+
index = circular ? wrapped(length, index + direction) : index + direction;
|
|
4155
|
+
if (!circular && (index < 0 || index >= length)) return;
|
|
3778
4156
|
id = registry.lookup(index);
|
|
3779
4157
|
hops++;
|
|
3780
4158
|
}
|
|
@@ -3884,6 +4262,21 @@ var MemoryAdapter = class {
|
|
|
3884
4262
|
|
|
3885
4263
|
//#endregion
|
|
3886
4264
|
//#region src/composables/useStorage/index.ts
|
|
4265
|
+
/**
|
|
4266
|
+
* @module useStorage
|
|
4267
|
+
*
|
|
4268
|
+
* @remarks
|
|
4269
|
+
* Reactive storage composable with adapter pattern for localStorage, sessionStorage, or memory.
|
|
4270
|
+
*
|
|
4271
|
+
* Key features:
|
|
4272
|
+
* - Reactive refs that sync with storage
|
|
4273
|
+
* - localStorage, sessionStorage, and memory adapters
|
|
4274
|
+
* - Custom serialization support
|
|
4275
|
+
* - SSR fallback to memory adapter
|
|
4276
|
+
* - Automatic cleanup on remove/clear
|
|
4277
|
+
*
|
|
4278
|
+
* Uses adapter pattern to abstract storage implementation details.
|
|
4279
|
+
*/
|
|
3887
4280
|
const [useStorageContext, provideStorageContext] = createContext("v0:storage");
|
|
3888
4281
|
/**
|
|
3889
4282
|
* Creates a new storage instance.
|
|
@@ -4049,14 +4442,15 @@ var ThemeAdapter = class {
|
|
|
4049
4442
|
constructor(prefix) {
|
|
4050
4443
|
this.prefix = prefix;
|
|
4051
4444
|
}
|
|
4052
|
-
generate(colors) {
|
|
4445
|
+
generate(colors, isDark) {
|
|
4053
4446
|
let css = "";
|
|
4054
4447
|
for (const theme in colors) {
|
|
4055
4448
|
const themeColors = colors[theme];
|
|
4056
4449
|
if (!themeColors) continue;
|
|
4057
4450
|
const vars = Object.entries(themeColors).map(([key, val]) => ` --${this.prefix}-${key}: ${val};`).join("\n");
|
|
4058
|
-
css +=
|
|
4451
|
+
css += `[data-theme="${theme}"] {\n${vars}\n}\n`;
|
|
4059
4452
|
}
|
|
4453
|
+
if (isDark !== void 0) css += `:root {\n color-scheme: ${isDark ? "dark" : "light"};\n}\n`;
|
|
4060
4454
|
return css;
|
|
4061
4455
|
}
|
|
4062
4456
|
};
|
|
@@ -4075,9 +4469,35 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
|
|
|
4075
4469
|
this.cspNonce = options.cspNonce;
|
|
4076
4470
|
this.stylesheetId = options.stylesheetId ?? this.stylesheetId;
|
|
4077
4471
|
}
|
|
4078
|
-
|
|
4472
|
+
setup(app, context, target) {
|
|
4473
|
+
if (IN_BROWSER) {
|
|
4474
|
+
onScopeDispose(watch([context.colors, context.isDark], ([colors, isDark]) => {
|
|
4475
|
+
this.update(colors, isDark);
|
|
4476
|
+
}, { immediate: true }), true);
|
|
4477
|
+
if (/* @__PURE__ */ isNull(target)) return;
|
|
4478
|
+
const targetEl = target instanceof HTMLElement ? target : /* @__PURE__ */ isString(target) ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
|
|
4479
|
+
if (!targetEl) return;
|
|
4480
|
+
onScopeDispose(watch(context.selectedId, (id) => {
|
|
4481
|
+
if (!id) return;
|
|
4482
|
+
targetEl.dataset.theme = String(id);
|
|
4483
|
+
}, { immediate: true }), true);
|
|
4484
|
+
} else {
|
|
4485
|
+
const head = app._context?.provides?.usehead ?? app._context?.provides?.head;
|
|
4486
|
+
if (head?.push) {
|
|
4487
|
+
const id = context.selectedId.value;
|
|
4488
|
+
head.push({
|
|
4489
|
+
htmlAttrs: { "data-theme": id ? String(id) : "" },
|
|
4490
|
+
style: [{
|
|
4491
|
+
innerHTML: this.generate(context.colors.value, context.isDark.value),
|
|
4492
|
+
id: this.stylesheetId
|
|
4493
|
+
}]
|
|
4494
|
+
});
|
|
4495
|
+
}
|
|
4496
|
+
}
|
|
4497
|
+
}
|
|
4498
|
+
update(colors, isDark) {
|
|
4079
4499
|
if (!IN_BROWSER) return;
|
|
4080
|
-
this.upsert(this.generate(colors));
|
|
4500
|
+
this.upsert(this.generate(colors, isDark));
|
|
4081
4501
|
}
|
|
4082
4502
|
upsert(styles) {
|
|
4083
4503
|
if (!IN_BROWSER) return;
|
|
@@ -4095,6 +4515,24 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
|
|
|
4095
4515
|
//#endregion
|
|
4096
4516
|
//#region src/composables/useTheme/index.ts
|
|
4097
4517
|
/**
|
|
4518
|
+
* @module useTheme
|
|
4519
|
+
*
|
|
4520
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
4521
|
+
*
|
|
4522
|
+
* @remarks
|
|
4523
|
+
* Theme management composable with token resolution and CSS variable injection.
|
|
4524
|
+
*
|
|
4525
|
+
* Key features:
|
|
4526
|
+
* - Single-selection theme switching (extends createSingle)
|
|
4527
|
+
* - Token alias resolution via useTokens
|
|
4528
|
+
* - Lazy theme loading (compute colors only when selected)
|
|
4529
|
+
* - CSS variable generation via adapter pattern
|
|
4530
|
+
* - SSR support with head integration
|
|
4531
|
+
* - Theme cycling
|
|
4532
|
+
*
|
|
4533
|
+
* Integrates with createSingle for selection and useTokens for color resolution.
|
|
4534
|
+
*/
|
|
4535
|
+
/**
|
|
4098
4536
|
* Creates a new theme instance.
|
|
4099
4537
|
*
|
|
4100
4538
|
* @param options The options for the theme instance.
|
|
@@ -4153,6 +4591,7 @@ function createTheme(_options = {}) {
|
|
|
4153
4591
|
}
|
|
4154
4592
|
return resolved;
|
|
4155
4593
|
});
|
|
4594
|
+
const isDark = toRef(() => registry.selectedItem.value?.dark ?? false);
|
|
4156
4595
|
function cycle(themes$1 = names.value) {
|
|
4157
4596
|
const current = themes$1.indexOf(registry.selectedId.value ?? "");
|
|
4158
4597
|
const next = current === -1 ? 0 : (current + 1) % themes$1.length;
|
|
@@ -4174,6 +4613,7 @@ function createTheme(_options = {}) {
|
|
|
4174
4613
|
return {
|
|
4175
4614
|
...registry,
|
|
4176
4615
|
colors,
|
|
4616
|
+
isDark,
|
|
4177
4617
|
register,
|
|
4178
4618
|
cycle,
|
|
4179
4619
|
get size() {
|
|
@@ -4279,34 +4719,7 @@ function createThemePlugin(_options = {}) {
|
|
|
4279
4719
|
provideThemeContext(context, app);
|
|
4280
4720
|
},
|
|
4281
4721
|
setup: (app) => {
|
|
4282
|
-
|
|
4283
|
-
onScopeDispose(watch(context.colors, (colors) => {
|
|
4284
|
-
adapter.update(colors);
|
|
4285
|
-
}, { immediate: true }), true);
|
|
4286
|
-
if (target === null) return;
|
|
4287
|
-
const targetEl = target instanceof HTMLElement ? target : /* @__PURE__ */ isString(target) ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
|
|
4288
|
-
if (!targetEl) return;
|
|
4289
|
-
let prevClass = "";
|
|
4290
|
-
onScopeDispose(watch(context.selectedId, (id) => {
|
|
4291
|
-
if (!id) return;
|
|
4292
|
-
const themeClass = `${adapter.prefix}-theme--${id}`;
|
|
4293
|
-
if (prevClass) targetEl.classList.remove(prevClass);
|
|
4294
|
-
targetEl.classList.add(themeClass);
|
|
4295
|
-
prevClass = themeClass;
|
|
4296
|
-
}, { immediate: true }), true);
|
|
4297
|
-
} else {
|
|
4298
|
-
const head = app._context?.provides?.usehead ?? app._context?.provides?.head;
|
|
4299
|
-
if (head?.push) {
|
|
4300
|
-
const id = context.selectedId.value;
|
|
4301
|
-
head.push({
|
|
4302
|
-
htmlAttrs: { class: id ? `${adapter.prefix}-theme--${id}` : "" },
|
|
4303
|
-
style: [{
|
|
4304
|
-
innerHTML: adapter.generate(context.colors.value),
|
|
4305
|
-
id: adapter.stylesheetId
|
|
4306
|
-
}]
|
|
4307
|
-
});
|
|
4308
|
-
}
|
|
4309
|
-
}
|
|
4722
|
+
adapter.setup(app, context, target);
|
|
4310
4723
|
}
|
|
4311
4724
|
});
|
|
4312
4725
|
}
|
|
@@ -4340,6 +4753,21 @@ function useTheme(namespace = "v0:theme") {
|
|
|
4340
4753
|
//#endregion
|
|
4341
4754
|
//#region src/composables/useTimeline/index.ts
|
|
4342
4755
|
/**
|
|
4756
|
+
* @module useTimeline
|
|
4757
|
+
*
|
|
4758
|
+
* @remarks
|
|
4759
|
+
* Bounded undo/redo system with overflow management.
|
|
4760
|
+
*
|
|
4761
|
+
* Key features:
|
|
4762
|
+
* - Fixed-size history (default: 10 items)
|
|
4763
|
+
* - Undo/redo stack management
|
|
4764
|
+
* - Overflow queue (preserves oldest items)
|
|
4765
|
+
* - Automatic reindexing after operations
|
|
4766
|
+
* - Perfect for command pattern, history tracking
|
|
4767
|
+
*
|
|
4768
|
+
* Extends useRegistry with temporal navigation capabilities.
|
|
4769
|
+
*/
|
|
4770
|
+
/**
|
|
4343
4771
|
* Creates a new timeline instance.
|
|
4344
4772
|
*
|
|
4345
4773
|
* @param _options The options for the timeline instance.
|