@vuetify/v0 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -13
- package/dist/browser/index.js +884 -808
- package/dist/components/index.d.ts +4 -4
- package/dist/components/index.js +5 -6
- package/dist/{components-Cc48kKWf.js → components-DVuB4lnH.js} +14 -187
- package/dist/composables/index.d.ts +4 -4
- package/dist/composables/index.js +6 -6
- package/dist/{composables-7Cbs2sdO.js → composables-yeVk-ULz.js} +368 -101
- package/dist/constants/index.d.ts +1 -1
- package/dist/constants/index.js +1 -1
- package/dist/factories/index.d.ts +2 -2
- package/dist/factories/index.js +2 -2
- package/dist/{factories-CPq2yMlr.js → factories-BEpawPUw.js} +32 -15
- package/dist/{globals--2b7sF4-.js → globals-DZvNEOB4.js} +1 -1
- package/dist/{index-BqrLvboW.d.ts → index-Ckt12ON6.d.ts} +38 -24
- package/dist/{index-BnsMFYhs.d.ts → index-D0L_ydyW.d.ts} +364 -375
- package/dist/{index-z_zwVNP8.d.ts → index-DVKeyWc5.d.ts} +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.js +7 -7
- package/dist/transformers/index.js +1 -1
- package/dist/{transformers-BAeg3QJF.js → transformers-CWrxLIkw.js} +1 -1
- package/dist/{useTheme-DSYiiz0R.js → useTheme-DCXkw_kv.js} +153 -189
- package/package.json +12 -38
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { createContext, createPlugin, createTrinity, useContext } from "./factories-
|
|
1
|
+
import { createContext, createPlugin, createTrinity, useContext } from "./factories-BEpawPUw.js";
|
|
2
2
|
import { genId, isArray, isObject, isString, mergeDeep } from "./utilities-D9rWEgQK.js";
|
|
3
|
-
import { IN_BROWSER, __LOGGER_ENABLED__ } from "./globals
|
|
4
|
-
import {
|
|
5
|
-
import { computed, getCurrentInstance, onMounted, onScopeDispose, shallowReactive, shallowReadonly, shallowRef, toRef, watch } from "vue";
|
|
3
|
+
import { IN_BROWSER, __LOGGER_ENABLED__ } from "./globals-DZvNEOB4.js";
|
|
4
|
+
import { computed, getCurrentInstance, onMounted, onScopeDispose, readonly, shallowReactive, shallowReadonly, shallowRef, toRef, watch } from "vue";
|
|
6
5
|
|
|
7
6
|
//#region src/composables/useHydration/index.ts
|
|
8
7
|
const [useHydrationContext, provideHydrationContext] = createContext("v0:hydration");
|
|
@@ -97,58 +96,54 @@ function createBreakpoints(options = {}) {
|
|
|
97
96
|
const sorted = Object.entries(breakpoints).sort((a, b) => a[1] - b[1]);
|
|
98
97
|
const names = sorted.map(([n]) => n);
|
|
99
98
|
const mb = typeof mobileBreakpoint === "number" ? mobileBreakpoint : breakpoints[mobileBreakpoint] ?? breakpoints.md;
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
xlAndDown: true,
|
|
121
|
-
xxlAndDown: true,
|
|
122
|
-
update
|
|
123
|
-
});
|
|
99
|
+
const name = shallowRef("xs");
|
|
100
|
+
const width = shallowRef(0);
|
|
101
|
+
const height = shallowRef(0);
|
|
102
|
+
const isMobile = shallowRef(true);
|
|
103
|
+
const xs = shallowRef(true);
|
|
104
|
+
const sm = shallowRef(false);
|
|
105
|
+
const md = shallowRef(false);
|
|
106
|
+
const lg = shallowRef(false);
|
|
107
|
+
const xl = shallowRef(false);
|
|
108
|
+
const xxl = shallowRef(false);
|
|
109
|
+
const smAndUp = shallowRef(false);
|
|
110
|
+
const mdAndUp = shallowRef(false);
|
|
111
|
+
const lgAndUp = shallowRef(false);
|
|
112
|
+
const xlAndUp = shallowRef(false);
|
|
113
|
+
const xxlAndUp = shallowRef(false);
|
|
114
|
+
const smAndDown = shallowRef(true);
|
|
115
|
+
const mdAndDown = shallowRef(true);
|
|
116
|
+
const lgAndDown = shallowRef(true);
|
|
117
|
+
const xlAndDown = shallowRef(true);
|
|
118
|
+
const xxlAndDown = shallowRef(true);
|
|
124
119
|
function update() {
|
|
125
120
|
if (!IN_BROWSER) return;
|
|
126
|
-
|
|
127
|
-
|
|
121
|
+
width.value = window.innerWidth;
|
|
122
|
+
height.value = window.innerHeight;
|
|
128
123
|
let current = "xs";
|
|
129
|
-
for (let i = sorted.length - 1; i >= 0; i--) if (
|
|
124
|
+
for (let i = sorted.length - 1; i >= 0; i--) if (width.value >= sorted[i][1]) {
|
|
130
125
|
current = sorted[i][0];
|
|
131
126
|
break;
|
|
132
127
|
}
|
|
133
|
-
|
|
128
|
+
name.value = current;
|
|
134
129
|
const index = names.indexOf(current);
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
130
|
+
isMobile.value = width.value < mb;
|
|
131
|
+
xs.value = index === 0;
|
|
132
|
+
sm.value = index === 1;
|
|
133
|
+
md.value = index === 2;
|
|
134
|
+
lg.value = index === 3;
|
|
135
|
+
xl.value = index === 4;
|
|
136
|
+
xxl.value = index === 5;
|
|
137
|
+
smAndUp.value = index >= 1;
|
|
138
|
+
mdAndUp.value = index >= 2;
|
|
139
|
+
lgAndUp.value = index >= 3;
|
|
140
|
+
xlAndUp.value = index >= 4;
|
|
141
|
+
xxlAndUp.value = index >= 5;
|
|
142
|
+
smAndDown.value = index <= 1;
|
|
143
|
+
mdAndDown.value = index <= 2;
|
|
144
|
+
lgAndDown.value = index <= 3;
|
|
145
|
+
xlAndDown.value = index <= 4;
|
|
146
|
+
xxlAndDown.value = index <= 5;
|
|
152
147
|
}
|
|
153
148
|
if (getCurrentInstance()) onMounted(() => {
|
|
154
149
|
const { isHydrated } = useHydration();
|
|
@@ -164,7 +159,30 @@ function createBreakpoints(options = {}) {
|
|
|
164
159
|
window.addEventListener("resize", listener, { passive: true });
|
|
165
160
|
if (getCurrentInstance()) onScopeDispose(() => window.removeEventListener("resize", listener));
|
|
166
161
|
}
|
|
167
|
-
return
|
|
162
|
+
return {
|
|
163
|
+
breakpoints,
|
|
164
|
+
name: readonly(name),
|
|
165
|
+
width: readonly(width),
|
|
166
|
+
height: readonly(height),
|
|
167
|
+
isMobile: readonly(isMobile),
|
|
168
|
+
xs: readonly(xs),
|
|
169
|
+
sm: readonly(sm),
|
|
170
|
+
md: readonly(md),
|
|
171
|
+
lg: readonly(lg),
|
|
172
|
+
xl: readonly(xl),
|
|
173
|
+
xxl: readonly(xxl),
|
|
174
|
+
smAndUp: readonly(smAndUp),
|
|
175
|
+
mdAndUp: readonly(mdAndUp),
|
|
176
|
+
lgAndUp: readonly(lgAndUp),
|
|
177
|
+
xlAndUp: readonly(xlAndUp),
|
|
178
|
+
xxlAndUp: readonly(xxlAndUp),
|
|
179
|
+
smAndDown: readonly(smAndDown),
|
|
180
|
+
mdAndDown: readonly(mdAndDown),
|
|
181
|
+
lgAndDown: readonly(lgAndDown),
|
|
182
|
+
xlAndDown: readonly(xlAndDown),
|
|
183
|
+
xxlAndDown: readonly(xxlAndDown),
|
|
184
|
+
update
|
|
185
|
+
};
|
|
168
186
|
}
|
|
169
187
|
/**
|
|
170
188
|
* Creates a Vue plugin for managing responsive breakpoints with automatic updates.
|
|
@@ -304,21 +322,19 @@ var Vuetify0LoggerAdapter = class {
|
|
|
304
322
|
format(level, message, ...args) {
|
|
305
323
|
const timestamp = this.timestamps ? this.timestamp() : "";
|
|
306
324
|
const prefixTag = `[${this.prefix} ${level.toLowerCase()}]`;
|
|
307
|
-
|
|
325
|
+
return [[
|
|
308
326
|
timestamp,
|
|
309
327
|
prefixTag,
|
|
310
328
|
message
|
|
311
|
-
].filter(Boolean).join(" ");
|
|
312
|
-
return [formattedMessage, ...args];
|
|
329
|
+
].filter(Boolean).join(" "), ...args];
|
|
313
330
|
}
|
|
314
331
|
timestamp() {
|
|
315
332
|
if (!IN_BROWSER) return (/* @__PURE__ */ new Date()).toISOString();
|
|
316
|
-
|
|
317
|
-
return now.toTimeString().split(" ")[0];
|
|
333
|
+
return (/* @__PURE__ */ new Date()).toTimeString().split(" ")[0] ?? "";
|
|
318
334
|
}
|
|
319
335
|
style(level) {
|
|
320
336
|
if (!this.colors || !IN_BROWSER) return "";
|
|
321
|
-
|
|
337
|
+
return {
|
|
322
338
|
trace: "color: #64748b",
|
|
323
339
|
debug: "color: #3b82f6",
|
|
324
340
|
info: "color: #10b981",
|
|
@@ -326,8 +342,7 @@ var Vuetify0LoggerAdapter = class {
|
|
|
326
342
|
error: "color: #ef4444",
|
|
327
343
|
fatal: "color: #dc2626; font-weight: bold",
|
|
328
344
|
silent: ""
|
|
329
|
-
};
|
|
330
|
-
return styles[level] || "";
|
|
345
|
+
}[level] || "";
|
|
331
346
|
}
|
|
332
347
|
log(level, method, message, ...args) {
|
|
333
348
|
const [formattedMessage, ...restArgs] = this.format(level, message, ...args);
|
|
@@ -353,7 +368,7 @@ function createLogger(options = {}) {
|
|
|
353
368
|
const currentLevel = shallowRef(initialLevel);
|
|
354
369
|
const isEnabled = shallowRef(initialEnabled);
|
|
355
370
|
function value(level$1) {
|
|
356
|
-
|
|
371
|
+
return {
|
|
357
372
|
trace: 0,
|
|
358
373
|
debug: 1,
|
|
359
374
|
info: 2,
|
|
@@ -361,8 +376,7 @@ function createLogger(options = {}) {
|
|
|
361
376
|
error: 4,
|
|
362
377
|
fatal: 5,
|
|
363
378
|
silent: 6
|
|
364
|
-
};
|
|
365
|
-
return levels[level$1] ?? 2;
|
|
379
|
+
}[level$1] ?? 2;
|
|
366
380
|
}
|
|
367
381
|
function can(level$1) {
|
|
368
382
|
if (!isEnabled.value) return false;
|
|
@@ -468,6 +482,8 @@ function createLoggerPlugin(options = {}) {
|
|
|
468
482
|
* @template Z The type of items managed by the registry.
|
|
469
483
|
* @template E The type of the registry context.
|
|
470
484
|
* @returns The registry context object.
|
|
485
|
+
*
|
|
486
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-registry
|
|
471
487
|
*/
|
|
472
488
|
function useRegistry(options) {
|
|
473
489
|
const logger = useLogger();
|
|
@@ -719,13 +735,16 @@ function useSelection(options) {
|
|
|
719
735
|
if (selectedIds.has(id)) unselect(id);
|
|
720
736
|
else select(id);
|
|
721
737
|
}
|
|
738
|
+
function selected(id) {
|
|
739
|
+
return selectedIds.has(id);
|
|
740
|
+
}
|
|
722
741
|
function register(registration = {}) {
|
|
723
742
|
const id = registration.id ?? genId();
|
|
724
743
|
const item = {
|
|
725
744
|
disabled: false,
|
|
726
745
|
...registration,
|
|
727
746
|
id,
|
|
728
|
-
|
|
747
|
+
isSelected: toRef(() => selectedIds.has(id)),
|
|
729
748
|
select: () => select(id),
|
|
730
749
|
unselect: () => unselect(id),
|
|
731
750
|
toggle: () => toggle(id)
|
|
@@ -755,42 +774,27 @@ function useSelection(options) {
|
|
|
755
774
|
mandate,
|
|
756
775
|
select,
|
|
757
776
|
unselect,
|
|
758
|
-
toggle
|
|
777
|
+
toggle,
|
|
778
|
+
selected
|
|
759
779
|
};
|
|
760
780
|
}
|
|
761
|
-
|
|
762
|
-
//#endregion
|
|
763
|
-
//#region src/composables/useGroup/index.ts
|
|
764
781
|
/**
|
|
765
|
-
* Creates a
|
|
766
|
-
*
|
|
782
|
+
* Creates a selection registry context with full injection/provision control.
|
|
783
|
+
* Returns the complete trinity for advanced usage scenarios.
|
|
767
784
|
*
|
|
768
|
-
* @param
|
|
769
|
-
* @
|
|
770
|
-
* @template
|
|
771
|
-
* @
|
|
785
|
+
* @param namespace The namespace for the selection registry context
|
|
786
|
+
* @param options Optional configuration for selection behavior.
|
|
787
|
+
* @template Z The structure of the registry selection items.
|
|
788
|
+
* @template E The available methods for the selection's context.
|
|
789
|
+
* @returns A tuple containing the inject function, provide function, and the selection context.
|
|
772
790
|
*/
|
|
773
|
-
function
|
|
774
|
-
const
|
|
775
|
-
const
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
function select(ids) {
|
|
779
|
-
for (const id of toArray(ids)) registry.select(id);
|
|
780
|
-
}
|
|
781
|
-
function unselect(ids) {
|
|
782
|
-
for (const id of toArray(ids)) registry.unselect(id);
|
|
791
|
+
function createSelectionContext(namespace, options) {
|
|
792
|
+
const [useSelectionContext, _provideSelectionContext] = createContext(namespace);
|
|
793
|
+
const context = useSelection(options);
|
|
794
|
+
function provideSelectionContext(_context = context, app) {
|
|
795
|
+
return _provideSelectionContext(_context, app);
|
|
783
796
|
}
|
|
784
|
-
|
|
785
|
-
for (const id of toArray(ids)) registry.toggle(id);
|
|
786
|
-
}
|
|
787
|
-
return {
|
|
788
|
-
...registry,
|
|
789
|
-
select,
|
|
790
|
-
unselect,
|
|
791
|
-
toggle,
|
|
792
|
-
selectedIndexes
|
|
793
|
-
};
|
|
797
|
+
return createTrinity(useSelectionContext, provideSelectionContext, context);
|
|
794
798
|
}
|
|
795
799
|
|
|
796
800
|
//#endregion
|
|
@@ -806,7 +810,7 @@ function useGroup(options) {
|
|
|
806
810
|
*/
|
|
807
811
|
function useSingle(options) {
|
|
808
812
|
const registry = useSelection(options);
|
|
809
|
-
const mandatory = options?.mandatory ??
|
|
813
|
+
const mandatory = options?.mandatory ?? false;
|
|
810
814
|
const selectedId = computed(() => registry.selectedIds.values().next().value);
|
|
811
815
|
const selectedItem = computed(() => registry.selectedItems.value.values().next().value);
|
|
812
816
|
const selectedIndex = computed(() => selectedItem.value?.index ?? -1);
|
|
@@ -815,7 +819,7 @@ function useSingle(options) {
|
|
|
815
819
|
const item = registry.get(id);
|
|
816
820
|
if (!item || item.disabled) return;
|
|
817
821
|
registry.selectedIds.clear();
|
|
818
|
-
registry.
|
|
822
|
+
registry.select(id);
|
|
819
823
|
}
|
|
820
824
|
function unselect(id) {
|
|
821
825
|
if (mandatory && registry.selectedIds.size === 1) return;
|
|
@@ -836,64 +840,23 @@ function useSingle(options) {
|
|
|
836
840
|
toggle
|
|
837
841
|
};
|
|
838
842
|
}
|
|
839
|
-
|
|
840
|
-
//#endregion
|
|
841
|
-
//#region src/composables/useStep/index.ts
|
|
842
843
|
/**
|
|
843
|
-
* Creates a
|
|
844
|
-
*
|
|
844
|
+
* Creates a single selection registry context with full injection/provision control.
|
|
845
|
+
* Returns the complete trinity for advanced usage scenarios.
|
|
845
846
|
*
|
|
846
|
-
* @param
|
|
847
|
-
* @
|
|
848
|
-
* @template
|
|
849
|
-
* @
|
|
847
|
+
* @param namespace The namespace for the single selection registry context
|
|
848
|
+
* @param options Optional configuration for single selection behavior.
|
|
849
|
+
* @template Z The structure of the registry single selection items.
|
|
850
|
+
* @template E The available methods for the single's context.
|
|
851
|
+
* @returns A tuple containing the inject function, provide function, and the single selection context.
|
|
850
852
|
*/
|
|
851
|
-
function
|
|
852
|
-
const
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
registry.select(registry.lookup(0));
|
|
857
|
-
}
|
|
858
|
-
function last() {
|
|
859
|
-
const size = registry.size;
|
|
860
|
-
if (size === 0) return;
|
|
861
|
-
registry.selectedIds.clear();
|
|
862
|
-
registry.select(registry.lookup(size - 1));
|
|
863
|
-
}
|
|
864
|
-
function next() {
|
|
865
|
-
step(1);
|
|
866
|
-
}
|
|
867
|
-
function prev() {
|
|
868
|
-
step(-1);
|
|
869
|
-
}
|
|
870
|
-
function wrapped(length, index) {
|
|
871
|
-
return (index + length) % length;
|
|
872
|
-
}
|
|
873
|
-
function step(count = 1) {
|
|
874
|
-
const length = registry.size;
|
|
875
|
-
if (!length) return;
|
|
876
|
-
const direction = Math.sign(count || 1);
|
|
877
|
-
let hops = 0;
|
|
878
|
-
let index = wrapped(length, registry.selectedIndex.value + count);
|
|
879
|
-
let id = registry.lookup(index);
|
|
880
|
-
while (id !== void 0 && registry.get(id)?.disabled && hops < length) {
|
|
881
|
-
index = wrapped(length, index + direction);
|
|
882
|
-
id = registry.lookup(index);
|
|
883
|
-
hops++;
|
|
884
|
-
}
|
|
885
|
-
if (id === void 0 || hops === length) return;
|
|
886
|
-
registry.selectedIds.clear();
|
|
887
|
-
registry.select(id);
|
|
853
|
+
function createSingleContext(namespace, options) {
|
|
854
|
+
const [useSingleContext, _provideSingleContext] = createContext(namespace);
|
|
855
|
+
const context = useSingle(options);
|
|
856
|
+
function provideSingleContext(_context = context, app) {
|
|
857
|
+
return _provideSingleContext(_context, app);
|
|
888
858
|
}
|
|
889
|
-
return
|
|
890
|
-
...registry,
|
|
891
|
-
first,
|
|
892
|
-
last,
|
|
893
|
-
next,
|
|
894
|
-
prev,
|
|
895
|
-
step
|
|
896
|
-
};
|
|
859
|
+
return createTrinity(useSingleContext, provideSingleContext, context);
|
|
897
860
|
}
|
|
898
861
|
|
|
899
862
|
//#endregion
|
|
@@ -906,13 +869,15 @@ function useStep(options) {
|
|
|
906
869
|
* @template Z The structure of the registry token items.
|
|
907
870
|
* @template E The available methods for the token's context.
|
|
908
871
|
* @returns The token context object.
|
|
872
|
+
*
|
|
873
|
+
* @see https://0.vuetifyjs.com/composables/registration/use-tokens
|
|
909
874
|
* @see https://www.designtokens.org/tr/drafts/format/
|
|
910
875
|
*/
|
|
911
|
-
function useTokens(tokens = {}) {
|
|
876
|
+
function useTokens(tokens = {}, options = {}) {
|
|
912
877
|
const logger = useLogger();
|
|
913
878
|
const registry = useRegistry();
|
|
914
879
|
const cache = /* @__PURE__ */ new Map();
|
|
915
|
-
registry.onboard(flatten(tokens));
|
|
880
|
+
registry.onboard(flatten(tokens, options.prefix, !!options.flat));
|
|
916
881
|
function isAlias(token) {
|
|
917
882
|
return isString(token) && token.length > 2 && token[0] === "{" && token.at(-1) === "}";
|
|
918
883
|
}
|
|
@@ -943,7 +908,7 @@ function useTokens(tokens = {}) {
|
|
|
943
908
|
if (found?.value === void 0) {
|
|
944
909
|
logger.warn(`Alias not found for "${String(reference)}"`);
|
|
945
910
|
cache.set(cacheKey, void 0);
|
|
946
|
-
return
|
|
911
|
+
return;
|
|
947
912
|
}
|
|
948
913
|
let result;
|
|
949
914
|
let current = found.value;
|
|
@@ -960,7 +925,7 @@ function useTokens(tokens = {}) {
|
|
|
960
925
|
if (current === void 0) {
|
|
961
926
|
logger.warn(`Path not found inside "${clean}": ${segments.join(".")}`);
|
|
962
927
|
cache.set(cacheKey, void 0);
|
|
963
|
-
return
|
|
928
|
+
return;
|
|
964
929
|
}
|
|
965
930
|
result = current;
|
|
966
931
|
} else if (isTokenAlias(current)) {
|
|
@@ -974,7 +939,8 @@ function useTokens(tokens = {}) {
|
|
|
974
939
|
}
|
|
975
940
|
return {
|
|
976
941
|
...registry,
|
|
977
|
-
resolve
|
|
942
|
+
resolve,
|
|
943
|
+
isAlias
|
|
978
944
|
};
|
|
979
945
|
}
|
|
980
946
|
/**
|
|
@@ -1002,14 +968,15 @@ function createTokensContext(namespace, tokens = {}) {
|
|
|
1002
968
|
* @param prefix An optional prefix to prepend to each token ID.
|
|
1003
969
|
* @returns An array of flattened tokens, each with an ID and value.
|
|
1004
970
|
*/
|
|
1005
|
-
function flatten(tokens, prefix = "") {
|
|
971
|
+
function flatten(tokens, prefix = "", flat = false) {
|
|
1006
972
|
const flattened = [];
|
|
1007
973
|
const stack = [{
|
|
1008
974
|
tokens,
|
|
1009
|
-
prefix
|
|
975
|
+
prefix,
|
|
976
|
+
flat
|
|
1010
977
|
}];
|
|
1011
978
|
while (stack.length > 0) {
|
|
1012
|
-
const { tokens: currentTokens, prefix: currentPrefix } = stack.pop();
|
|
979
|
+
const { tokens: currentTokens, prefix: currentPrefix, flat: flat$1 } = stack.pop();
|
|
1013
980
|
const meta = {};
|
|
1014
981
|
for (const k in currentTokens) if (k.startsWith("$")) meta[k] = currentTokens[k];
|
|
1015
982
|
if (Object.keys(meta).length > 0 && currentPrefix) flattened.push({
|
|
@@ -1033,7 +1000,7 @@ function flatten(tokens, prefix = "") {
|
|
|
1033
1000
|
value
|
|
1034
1001
|
});
|
|
1035
1002
|
const inner = value.$value;
|
|
1036
|
-
if (isObject(inner)) for (const innerKey in inner) {
|
|
1003
|
+
if (isObject(inner) && !flat$1) for (const innerKey in inner) {
|
|
1037
1004
|
if (innerKey.startsWith("$")) continue;
|
|
1038
1005
|
const child = inner[innerKey];
|
|
1039
1006
|
const childId = `${id}.${innerKey}`;
|
|
@@ -1047,14 +1014,23 @@ function flatten(tokens, prefix = "") {
|
|
|
1047
1014
|
});
|
|
1048
1015
|
else stack.push({
|
|
1049
1016
|
tokens: child,
|
|
1050
|
-
prefix: childId
|
|
1017
|
+
prefix: childId,
|
|
1018
|
+
flat: flat$1
|
|
1051
1019
|
});
|
|
1052
1020
|
}
|
|
1053
1021
|
continue;
|
|
1054
1022
|
}
|
|
1023
|
+
if (flat$1) {
|
|
1024
|
+
flattened.push({
|
|
1025
|
+
id,
|
|
1026
|
+
value
|
|
1027
|
+
});
|
|
1028
|
+
continue;
|
|
1029
|
+
}
|
|
1055
1030
|
stack.push({
|
|
1056
1031
|
tokens: value,
|
|
1057
|
-
prefix: id
|
|
1032
|
+
prefix: id,
|
|
1033
|
+
flat: flat$1
|
|
1058
1034
|
});
|
|
1059
1035
|
}
|
|
1060
1036
|
}
|
|
@@ -1123,17 +1099,23 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
|
|
|
1123
1099
|
* @template Z The type of theme context.
|
|
1124
1100
|
* @template E The type of theme items managed by the registry.
|
|
1125
1101
|
* @returns A tuple containing inject, provide functions and the theme context.
|
|
1102
|
+
*
|
|
1103
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
1126
1104
|
*/
|
|
1127
1105
|
function createTheme(namespace = "v0:theme", options = {}) {
|
|
1128
1106
|
const { themes = {}, palette = {} } = options;
|
|
1129
1107
|
const [useThemeContext, _provideThemeContext] = createContext(namespace);
|
|
1108
|
+
const tokens = useTokens({
|
|
1109
|
+
palette,
|
|
1110
|
+
...themes
|
|
1111
|
+
}, { flat: true });
|
|
1130
1112
|
const registry = useSingle();
|
|
1131
1113
|
for (const id in themes) {
|
|
1114
|
+
const { colors: value,...theme } = themes[id];
|
|
1132
1115
|
register({
|
|
1133
1116
|
id,
|
|
1134
|
-
value
|
|
1135
|
-
|
|
1136
|
-
lazy: themes[id].lazy ?? false
|
|
1117
|
+
value,
|
|
1118
|
+
...theme
|
|
1137
1119
|
});
|
|
1138
1120
|
if (id === options.default && !registry.selectedId.value) registry.select(id);
|
|
1139
1121
|
}
|
|
@@ -1142,7 +1124,7 @@ function createTheme(namespace = "v0:theme", options = {}) {
|
|
|
1142
1124
|
const resolved = {};
|
|
1143
1125
|
for (const theme of registry.values()) {
|
|
1144
1126
|
if (theme.lazy && theme.id !== registry.selectedId.value) continue;
|
|
1145
|
-
resolved[
|
|
1127
|
+
resolved[theme.id] = resolve(theme.value);
|
|
1146
1128
|
}
|
|
1147
1129
|
return resolved;
|
|
1148
1130
|
});
|
|
@@ -1151,26 +1133,11 @@ function createTheme(namespace = "v0:theme", options = {}) {
|
|
|
1151
1133
|
const next = current === -1 ? 0 : (current + 1) % themes$1.length;
|
|
1152
1134
|
registry.select(themes$1[next]);
|
|
1153
1135
|
}
|
|
1154
|
-
function resolve(
|
|
1136
|
+
function resolve(colors$1) {
|
|
1155
1137
|
const resolved = {};
|
|
1156
|
-
for (const [key, value] of Object.entries(colors$1)) resolved[key] =
|
|
1138
|
+
for (const [key, value] of Object.entries(colors$1)) resolved[key] = tokens.isAlias(value) ? tokens.resolve(value) : value;
|
|
1157
1139
|
return resolved;
|
|
1158
1140
|
}
|
|
1159
|
-
function resolveTokenReference(themeId, value) {
|
|
1160
|
-
return value.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, tokenKey) => {
|
|
1161
|
-
if (palette[tokenKey]) return isString(palette[tokenKey]) ? palette[tokenKey] : match;
|
|
1162
|
-
const [targetTheme, ...colorPath] = tokenKey.split(".");
|
|
1163
|
-
const colorKey = colorPath.join(".");
|
|
1164
|
-
if (targetTheme && colorKey) {
|
|
1165
|
-
const targetColors = themes[targetTheme];
|
|
1166
|
-
const resolved$1 = targetColors?.[colorKey];
|
|
1167
|
-
return isString(resolved$1) ? resolveTokenReference(targetTheme, resolved$1) : match;
|
|
1168
|
-
}
|
|
1169
|
-
const currentColors = themes[themeId];
|
|
1170
|
-
const resolved = currentColors?.[tokenKey];
|
|
1171
|
-
return isString(resolved) ? resolveTokenReference(themeId, resolved) : match;
|
|
1172
|
-
});
|
|
1173
|
-
}
|
|
1174
1141
|
function register(registration = {}) {
|
|
1175
1142
|
const item = {
|
|
1176
1143
|
lazy: false,
|
|
@@ -1194,9 +1161,11 @@ function createTheme(namespace = "v0:theme", options = {}) {
|
|
|
1194
1161
|
* Simple hook to access the theme context.
|
|
1195
1162
|
*
|
|
1196
1163
|
* @returns The theme context containing current theme state and utilities.
|
|
1164
|
+
*
|
|
1165
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
1197
1166
|
*/
|
|
1198
1167
|
function useTheme() {
|
|
1199
|
-
return useContext("v0:theme")
|
|
1168
|
+
return useContext("v0:theme");
|
|
1200
1169
|
}
|
|
1201
1170
|
/**
|
|
1202
1171
|
* Creates a Vue plugin for theme management with automatic color system updates.
|
|
@@ -1206,16 +1175,12 @@ function useTheme() {
|
|
|
1206
1175
|
* @param options Configuration for themes, palette, and adapter.
|
|
1207
1176
|
* @template Z The type of theme context.
|
|
1208
1177
|
* @template E The type of theme items.
|
|
1209
|
-
* @template R The type of token context.
|
|
1210
|
-
* @template O The type of token items.
|
|
1211
1178
|
* @returns A Vue plugin object with install method.
|
|
1179
|
+
*
|
|
1180
|
+
* @see https://0.vuetifyjs.com/composables/plugins/use-theme
|
|
1212
1181
|
*/
|
|
1213
1182
|
function createThemePlugin(_options = {}) {
|
|
1214
1183
|
const { adapter = new Vuetify0ThemeAdapter(), palette = {}, themes = {},...options } = _options;
|
|
1215
|
-
const [, provideThemeTokenContext, tokensContext] = createTokensContext("v0:theme:tokens", {
|
|
1216
|
-
palette,
|
|
1217
|
-
...themes
|
|
1218
|
-
});
|
|
1219
1184
|
const [, provideThemeContext, themeContext] = createTheme("v0:theme", {
|
|
1220
1185
|
...options,
|
|
1221
1186
|
themes,
|
|
@@ -1228,7 +1193,6 @@ function createThemePlugin(_options = {}) {
|
|
|
1228
1193
|
namespace: "v0:theme",
|
|
1229
1194
|
provide: (app) => {
|
|
1230
1195
|
provideThemeContext(themeContext, app);
|
|
1231
|
-
provideThemeTokenContext(tokensContext, app);
|
|
1232
1196
|
},
|
|
1233
1197
|
setup: () => {
|
|
1234
1198
|
if (IN_BROWSER) watch(themeContext.colors, update, {
|
|
@@ -1241,4 +1205,4 @@ function createThemePlugin(_options = {}) {
|
|
|
1241
1205
|
}
|
|
1242
1206
|
|
|
1243
1207
|
//#endregion
|
|
1244
|
-
export { ConsolaLoggerAdapter, PinoLoggerAdapter, Vuetify0LoggerAdapter, createBreakpoints, createBreakpointsPlugin, createHydration, createHydrationPlugin, createLogger, createLoggerPlugin, createRegistryContext, createTheme, createThemePlugin, createTokensContext, provideBreakpointsContext, provideHydrationContext, useBreakpoints, useBreakpointsContext,
|
|
1208
|
+
export { ConsolaLoggerAdapter, PinoLoggerAdapter, Vuetify0LoggerAdapter, createBreakpoints, createBreakpointsPlugin, createHydration, createHydrationPlugin, createLogger, createLoggerPlugin, createRegistryContext, createSelectionContext, createSingleContext, createTheme, createThemePlugin, createTokensContext, provideBreakpointsContext, provideHydrationContext, useBreakpoints, useBreakpointsContext, useHydration, useHydrationContext, useLogger, useRegistry, useSelection, useSingle, useTheme, useTokens };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuetify/v0",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Vuetify0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -16,42 +16,18 @@
|
|
|
16
16
|
"directory": "packages/0"
|
|
17
17
|
},
|
|
18
18
|
"exports": {
|
|
19
|
-
".":
|
|
20
|
-
"types": "./dist/index.d.ts",
|
|
21
|
-
"import": "./dist/index.js"
|
|
22
|
-
},
|
|
19
|
+
".": "./dist/index.js",
|
|
23
20
|
"./browser": {
|
|
24
21
|
"types": "./dist/index.d.ts",
|
|
25
22
|
"import": "./dist/browser/index.js"
|
|
26
23
|
},
|
|
27
|
-
"./components":
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"./
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
"./factories": {
|
|
36
|
-
"types": "./dist/factories/index.d.ts",
|
|
37
|
-
"import": "./dist/factories/index.js"
|
|
38
|
-
},
|
|
39
|
-
"./transformers": {
|
|
40
|
-
"types": "./dist/transformers/index.d.ts",
|
|
41
|
-
"import": "./dist/transformers/index.js"
|
|
42
|
-
},
|
|
43
|
-
"./constants": {
|
|
44
|
-
"types": "./dist/constants/index.d.ts",
|
|
45
|
-
"import": "./dist/constants/index.js"
|
|
46
|
-
},
|
|
47
|
-
"./types": {
|
|
48
|
-
"types": "./dist/types/index.d.ts",
|
|
49
|
-
"import": "./dist/types/index.js"
|
|
50
|
-
},
|
|
51
|
-
"./utilities": {
|
|
52
|
-
"types": "./dist/utilities/index.d.ts",
|
|
53
|
-
"import": "./dist/utilities/index.js"
|
|
54
|
-
}
|
|
24
|
+
"./components": "./dist/components/index.js",
|
|
25
|
+
"./composables": "./dist/composables/index.js",
|
|
26
|
+
"./factories": "./dist/factories/index.js",
|
|
27
|
+
"./transformers": "./dist/transformers/index.js",
|
|
28
|
+
"./constants": "./dist/constants/index.js",
|
|
29
|
+
"./types": "./dist/types/index.js",
|
|
30
|
+
"./utilities": "./dist/utilities/index.js"
|
|
55
31
|
},
|
|
56
32
|
"peerDependencies": {
|
|
57
33
|
"markdown": "^0.5.0",
|
|
@@ -78,13 +54,11 @@
|
|
|
78
54
|
"@vue/test-utils": "^2.4.6",
|
|
79
55
|
"tsdown": "^0.14.2",
|
|
80
56
|
"typescript": "5.8.3",
|
|
81
|
-
"unplugin-vue": "^
|
|
82
|
-
"vue": "^3.5.
|
|
57
|
+
"unplugin-vue": "^7.0.1",
|
|
58
|
+
"vue": "^3.5.21"
|
|
83
59
|
},
|
|
84
60
|
"scripts": {
|
|
85
|
-
"build": "
|
|
86
|
-
"build:bundler": "tsdown --config build/tsdown.bundler.config.ts",
|
|
87
|
-
"build:browser": "tsdown --config build/tsdown.browser.config.ts",
|
|
61
|
+
"build": "tsdown",
|
|
88
62
|
"typecheck": "vue-tsc --noEmit --incremental"
|
|
89
63
|
}
|
|
90
64
|
}
|