@vuetify/v0 0.0.8 → 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 -464
- 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-D-M1DZRo.js → composables-TCjvMHyU.mjs} +590 -160
- package/dist/constants/{index.d.ts → index.d.mts} +1 -1
- package/dist/constants/{index.js → index.mjs} +3 -3
- package/dist/{globals-B2jAuapu.js → globals-y0mJ6Eg7.mjs} +2 -2
- package/dist/{index-Bcj8Vovs.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-BJF0Dsww.js +0 -350
- package/dist/composables/index.d.ts +0 -3
- package/dist/index-DoTdnxOm.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,48 +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
|
|
3558
|
+
function useProxyModel(registry, model, options) {
|
|
3559
|
+
const multiple = options?.multiple ?? false;
|
|
3560
|
+
const _transformIn = options?.transformIn;
|
|
3561
|
+
const _transformOut = options?.transformOut;
|
|
3238
3562
|
function transformIn(val) {
|
|
3239
|
-
|
|
3563
|
+
const value = toValue(val);
|
|
3564
|
+
return toArray(/* @__PURE__ */ isFunction(_transformIn) ? _transformIn(value) : value);
|
|
3240
3565
|
}
|
|
3241
3566
|
function transformOut(val) {
|
|
3242
3567
|
if (/* @__PURE__ */ isFunction(_transformOut)) return _transformOut(val);
|
|
3243
|
-
return
|
|
3244
|
-
}
|
|
3245
|
-
const
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
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);
|
|
3251
3580
|
}
|
|
3252
|
-
}
|
|
3253
|
-
const
|
|
3254
|
-
|
|
3255
|
-
model.value = Array.from(toValue(val));
|
|
3256
|
-
|
|
3257
|
-
});
|
|
3258
|
-
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();
|
|
3259
3589
|
const currentIds = new Set(toValue(registry.selectedIds));
|
|
3260
3590
|
const targetIds = /* @__PURE__ */ new Set();
|
|
3261
|
-
for (const value of
|
|
3591
|
+
for (const value of transformIn(val)) {
|
|
3262
3592
|
const ids = registry.browse(value);
|
|
3263
3593
|
if (/* @__PURE__ */ isArray(ids)) for (const single of ids) targetIds.add(single);
|
|
3264
3594
|
else if (ids) targetIds.add(ids);
|
|
3265
3595
|
}
|
|
3266
|
-
|
|
3267
|
-
if (isModelArray) {
|
|
3596
|
+
if (multiple) {
|
|
3268
3597
|
for (const id of currentIds.difference(targetIds)) registry.selectedIds.delete(id);
|
|
3269
3598
|
for (const id of targetIds.difference(currentIds)) registry.selectedIds.add(id);
|
|
3270
3599
|
} else {
|
|
@@ -3273,55 +3602,48 @@ function useProxyModel(registry, initial, options, _transformIn, _transformOut)
|
|
|
3273
3602
|
if (last !== void 0) registry.unselect(last);
|
|
3274
3603
|
if (next !== void 0) registry.select(next);
|
|
3275
3604
|
}
|
|
3276
|
-
|
|
3605
|
+
registryWatch.resume();
|
|
3606
|
+
}, {
|
|
3607
|
+
flush: "sync",
|
|
3608
|
+
deep: multiple
|
|
3277
3609
|
});
|
|
3278
3610
|
function onRegister(ticket) {
|
|
3279
|
-
if (!
|
|
3280
|
-
|
|
3281
|
-
|
|
3611
|
+
if (!pending.has(ticket.value) || ticket.disabled) return;
|
|
3612
|
+
registryWatch.pause();
|
|
3613
|
+
modelWatch.pause();
|
|
3282
3614
|
registry.select(ticket.id);
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
function onUnregister(ticket) {
|
|
3287
|
-
if (!internal.value.includes(ticket.value)) return;
|
|
3288
|
-
registryWatcher.pause();
|
|
3289
|
-
modelWatcher.pause();
|
|
3290
|
-
registry.unselect(ticket.id);
|
|
3291
|
-
registryWatcher.resume();
|
|
3292
|
-
modelWatcher.resume();
|
|
3293
|
-
}
|
|
3294
|
-
function onUpdate(ticket) {
|
|
3295
|
-
const hasValue = internal.value.includes(ticket.value);
|
|
3296
|
-
const isSelected = toValue(registry.selectedIds).has(ticket.id);
|
|
3297
|
-
if (!hasValue && isSelected) onUnregister(ticket);
|
|
3298
|
-
else if (hasValue && !isSelected) onRegister(ticket);
|
|
3299
|
-
}
|
|
3300
|
-
function onClear() {
|
|
3301
|
-
registryWatcher.pause();
|
|
3302
|
-
modelWatcher.pause();
|
|
3303
|
-
registry.selectedIds.clear();
|
|
3304
|
-
registryWatcher.resume();
|
|
3305
|
-
modelWatcher.resume();
|
|
3615
|
+
pending.delete(ticket.value);
|
|
3616
|
+
modelWatch.resume();
|
|
3617
|
+
registryWatch.resume();
|
|
3306
3618
|
}
|
|
3307
3619
|
registry.on("register:ticket", onRegister);
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
registry.off("unregister:ticket", onUnregister);
|
|
3316
|
-
registry.off("update:ticket", onUpdate);
|
|
3317
|
-
registry.off("clear:registry", onClear);
|
|
3318
|
-
}, true);
|
|
3319
|
-
return model;
|
|
3620
|
+
function stop() {
|
|
3621
|
+
registryWatch();
|
|
3622
|
+
modelWatch();
|
|
3623
|
+
registry.off("register:ticket", onRegister);
|
|
3624
|
+
}
|
|
3625
|
+
onScopeDispose(stop, true);
|
|
3626
|
+
return stop;
|
|
3320
3627
|
}
|
|
3321
3628
|
|
|
3322
3629
|
//#endregion
|
|
3323
3630
|
//#region src/composables/useProxyRegistry/index.ts
|
|
3324
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
|
+
/**
|
|
3325
3647
|
* Creates a proxy registry that provides reactive objects for registry data.
|
|
3326
3648
|
*
|
|
3327
3649
|
* @param registry The registry instance to proxy.
|
|
@@ -3371,6 +3693,21 @@ function useProxyRegistry(registry, options) {
|
|
|
3371
3693
|
//#endregion
|
|
3372
3694
|
//#region src/composables/useQueue/index.ts
|
|
3373
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
|
+
/**
|
|
3374
3711
|
* Creates a new queue instance
|
|
3375
3712
|
*
|
|
3376
3713
|
* @param options The options for the queue instance
|
|
@@ -3536,6 +3873,22 @@ function useQueue(namespace = "v0:queue") {
|
|
|
3536
3873
|
//#endregion
|
|
3537
3874
|
//#region src/composables/useResizeObserver/index.ts
|
|
3538
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
|
+
/**
|
|
3539
3892
|
* A composable that uses the Resize Observer API to detect when an element's
|
|
3540
3893
|
* size changes.
|
|
3541
3894
|
*
|
|
@@ -3687,10 +4040,24 @@ function useElementSize(target) {
|
|
|
3687
4040
|
//#endregion
|
|
3688
4041
|
//#region src/composables/useStep/index.ts
|
|
3689
4042
|
/**
|
|
3690
|
-
*
|
|
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.
|
|
3691
4058
|
*
|
|
3692
4059
|
* Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
|
|
3693
|
-
* for sequential navigation.
|
|
4060
|
+
* for sequential navigation. Supports both circular (wrapping) and bounded (stopping at edges) modes.
|
|
3694
4061
|
*
|
|
3695
4062
|
* @param options The options for the step instance.
|
|
3696
4063
|
* @template Z The type of the step ticket.
|
|
@@ -3699,7 +4066,7 @@ function useElementSize(target) {
|
|
|
3699
4066
|
*
|
|
3700
4067
|
* @remarks
|
|
3701
4068
|
* **Key Features:**
|
|
3702
|
-
* - **
|
|
4069
|
+
* - **Configurable Navigation**: `circular: true` for wrapping, `false` for bounded (default: false)
|
|
3703
4070
|
* - **Disabled Item Skipping**: Automatically skips disabled items during navigation
|
|
3704
4071
|
* - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
|
|
3705
4072
|
* - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
|
|
@@ -3707,15 +4074,20 @@ function useElementSize(target) {
|
|
|
3707
4074
|
* **Navigation Methods:**
|
|
3708
4075
|
* - `first()`: Select first non-disabled item
|
|
3709
4076
|
* - `last()`: Select last non-disabled item
|
|
3710
|
-
* - `next()`: Move to next item (wraps
|
|
3711
|
-
* - `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)
|
|
3712
4079
|
* - `step(count)`: Move by `count` positions (negative for backward)
|
|
3713
4080
|
*
|
|
3714
|
-
* **
|
|
3715
|
-
* - Uses modulo arithmetic for
|
|
4081
|
+
* **Circular Mode (`circular: true`):**
|
|
4082
|
+
* - Uses modulo arithmetic for wrapping: `((index % length) + length) % length`
|
|
3716
4083
|
* - Works correctly with negative indexes and large step counts
|
|
3717
|
-
* -
|
|
3718
|
-
*
|
|
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
|
|
3719
4091
|
*
|
|
3720
4092
|
* **Inheritance Chain:**
|
|
3721
4093
|
* `useRegistry` → `createSelection` → `createSingle` → `createStep`
|
|
@@ -3726,26 +4098,31 @@ function useElementSize(target) {
|
|
|
3726
4098
|
* ```ts
|
|
3727
4099
|
* import { createStep } from '@vuetify/v0'
|
|
3728
4100
|
*
|
|
3729
|
-
*
|
|
3730
|
-
*
|
|
3731
|
-
*
|
|
3732
|
-
* { id: '
|
|
3733
|
-
* { id: '
|
|
3734
|
-
* { id: '
|
|
3735
|
-
* { 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 },
|
|
3736
4107
|
* ])
|
|
3737
|
-
*
|
|
3738
|
-
*
|
|
3739
|
-
*
|
|
3740
|
-
*
|
|
3741
|
-
*
|
|
3742
|
-
*
|
|
3743
|
-
*
|
|
3744
|
-
*
|
|
3745
|
-
*
|
|
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'
|
|
3746
4122
|
* ```
|
|
3747
4123
|
*/
|
|
3748
|
-
function createStep(
|
|
4124
|
+
function createStep(_options = {}) {
|
|
4125
|
+
const { circular = false,...options } = _options;
|
|
3749
4126
|
const registry = createSingle(options);
|
|
3750
4127
|
function first() {
|
|
3751
4128
|
const ticket = registry.seek("first");
|
|
@@ -3767,12 +4144,15 @@ function createStep(options) {
|
|
|
3767
4144
|
function step(count = 1) {
|
|
3768
4145
|
const length = registry.size;
|
|
3769
4146
|
if (!length) return;
|
|
4147
|
+
const currentIndex = registry.selectedIndex.value;
|
|
3770
4148
|
const direction = Math.sign(count || 1);
|
|
3771
4149
|
let hops = 0;
|
|
3772
|
-
let index = wrapped(length,
|
|
4150
|
+
let index = circular ? wrapped(length, currentIndex + count) : currentIndex + count;
|
|
4151
|
+
if (!circular && (index < 0 || index >= length)) return;
|
|
3773
4152
|
let id = registry.lookup(index);
|
|
3774
|
-
while (id !== void 0 && registry.get(id)?.disabled && hops < length) {
|
|
3775
|
-
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;
|
|
3776
4156
|
id = registry.lookup(index);
|
|
3777
4157
|
hops++;
|
|
3778
4158
|
}
|
|
@@ -3882,6 +4262,21 @@ var MemoryAdapter = class {
|
|
|
3882
4262
|
|
|
3883
4263
|
//#endregion
|
|
3884
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
|
+
*/
|
|
3885
4280
|
const [useStorageContext, provideStorageContext] = createContext("v0:storage");
|
|
3886
4281
|
/**
|
|
3887
4282
|
* Creates a new storage instance.
|
|
@@ -4047,14 +4442,15 @@ var ThemeAdapter = class {
|
|
|
4047
4442
|
constructor(prefix) {
|
|
4048
4443
|
this.prefix = prefix;
|
|
4049
4444
|
}
|
|
4050
|
-
generate(colors) {
|
|
4445
|
+
generate(colors, isDark) {
|
|
4051
4446
|
let css = "";
|
|
4052
4447
|
for (const theme in colors) {
|
|
4053
4448
|
const themeColors = colors[theme];
|
|
4054
4449
|
if (!themeColors) continue;
|
|
4055
4450
|
const vars = Object.entries(themeColors).map(([key, val]) => ` --${this.prefix}-${key}: ${val};`).join("\n");
|
|
4056
|
-
css +=
|
|
4451
|
+
css += `[data-theme="${theme}"] {\n${vars}\n}\n`;
|
|
4057
4452
|
}
|
|
4453
|
+
if (isDark !== void 0) css += `:root {\n color-scheme: ${isDark ? "dark" : "light"};\n}\n`;
|
|
4058
4454
|
return css;
|
|
4059
4455
|
}
|
|
4060
4456
|
};
|
|
@@ -4073,9 +4469,35 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
|
|
|
4073
4469
|
this.cspNonce = options.cspNonce;
|
|
4074
4470
|
this.stylesheetId = options.stylesheetId ?? this.stylesheetId;
|
|
4075
4471
|
}
|
|
4076
|
-
|
|
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) {
|
|
4077
4499
|
if (!IN_BROWSER) return;
|
|
4078
|
-
this.upsert(this.generate(colors));
|
|
4500
|
+
this.upsert(this.generate(colors, isDark));
|
|
4079
4501
|
}
|
|
4080
4502
|
upsert(styles) {
|
|
4081
4503
|
if (!IN_BROWSER) return;
|
|
@@ -4093,6 +4515,24 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
|
|
|
4093
4515
|
//#endregion
|
|
4094
4516
|
//#region src/composables/useTheme/index.ts
|
|
4095
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
|
+
/**
|
|
4096
4536
|
* Creates a new theme instance.
|
|
4097
4537
|
*
|
|
4098
4538
|
* @param options The options for the theme instance.
|
|
@@ -4151,6 +4591,7 @@ function createTheme(_options = {}) {
|
|
|
4151
4591
|
}
|
|
4152
4592
|
return resolved;
|
|
4153
4593
|
});
|
|
4594
|
+
const isDark = toRef(() => registry.selectedItem.value?.dark ?? false);
|
|
4154
4595
|
function cycle(themes$1 = names.value) {
|
|
4155
4596
|
const current = themes$1.indexOf(registry.selectedId.value ?? "");
|
|
4156
4597
|
const next = current === -1 ? 0 : (current + 1) % themes$1.length;
|
|
@@ -4172,6 +4613,7 @@ function createTheme(_options = {}) {
|
|
|
4172
4613
|
return {
|
|
4173
4614
|
...registry,
|
|
4174
4615
|
colors,
|
|
4616
|
+
isDark,
|
|
4175
4617
|
register,
|
|
4176
4618
|
cycle,
|
|
4177
4619
|
get size() {
|
|
@@ -4277,34 +4719,7 @@ function createThemePlugin(_options = {}) {
|
|
|
4277
4719
|
provideThemeContext(context, app);
|
|
4278
4720
|
},
|
|
4279
4721
|
setup: (app) => {
|
|
4280
|
-
|
|
4281
|
-
onScopeDispose(watch(context.colors, (colors) => {
|
|
4282
|
-
adapter.update(colors);
|
|
4283
|
-
}, { immediate: true }), true);
|
|
4284
|
-
if (target === null) return;
|
|
4285
|
-
const targetEl = target instanceof HTMLElement ? target : /* @__PURE__ */ isString(target) ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
|
|
4286
|
-
if (!targetEl) return;
|
|
4287
|
-
let prevClass = "";
|
|
4288
|
-
onScopeDispose(watch(context.selectedId, (id) => {
|
|
4289
|
-
if (!id) return;
|
|
4290
|
-
const themeClass = `${adapter.prefix}-theme--${id}`;
|
|
4291
|
-
if (prevClass) targetEl.classList.remove(prevClass);
|
|
4292
|
-
targetEl.classList.add(themeClass);
|
|
4293
|
-
prevClass = themeClass;
|
|
4294
|
-
}, { immediate: true }), true);
|
|
4295
|
-
} else {
|
|
4296
|
-
const head = app._context?.provides?.usehead ?? app._context?.provides?.head;
|
|
4297
|
-
if (head?.push) {
|
|
4298
|
-
const id = context.selectedId.value;
|
|
4299
|
-
head.push({
|
|
4300
|
-
htmlAttrs: { class: id ? `${adapter.prefix}-theme--${id}` : "" },
|
|
4301
|
-
style: [{
|
|
4302
|
-
innerHTML: adapter.generate(context.colors.value),
|
|
4303
|
-
id: adapter.stylesheetId
|
|
4304
|
-
}]
|
|
4305
|
-
});
|
|
4306
|
-
}
|
|
4307
|
-
}
|
|
4722
|
+
adapter.setup(app, context, target);
|
|
4308
4723
|
}
|
|
4309
4724
|
});
|
|
4310
4725
|
}
|
|
@@ -4338,6 +4753,21 @@ function useTheme(namespace = "v0:theme") {
|
|
|
4338
4753
|
//#endregion
|
|
4339
4754
|
//#region src/composables/useTimeline/index.ts
|
|
4340
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
|
+
/**
|
|
4341
4771
|
* Creates a new timeline instance.
|
|
4342
4772
|
*
|
|
4343
4773
|
* @param _options The options for the timeline instance.
|