@vuetify/nightly 3.8.1-dev.2025-04-07 → 3.8.1-dev.2025-04-12
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/CHANGELOG.md +12 -3
- package/dist/json/attributes.json +2954 -2954
- package/dist/json/importMap-labs.json +30 -30
- package/dist/json/importMap.json +146 -146
- package/dist/json/web-types.json +5723 -5723
- package/dist/vuetify-labs.cjs +97 -28
- package/dist/vuetify-labs.css +5455 -5455
- package/dist/vuetify-labs.d.ts +63 -58
- package/dist/vuetify-labs.esm.js +98 -29
- package/dist/vuetify-labs.esm.js.map +1 -1
- package/dist/vuetify-labs.js +97 -28
- package/dist/vuetify-labs.min.css +2 -2
- package/dist/vuetify.cjs +97 -28
- package/dist/vuetify.cjs.map +1 -1
- package/dist/vuetify.css +5597 -5597
- package/dist/vuetify.d.ts +63 -58
- package/dist/vuetify.esm.js +98 -29
- package/dist/vuetify.esm.js.map +1 -1
- package/dist/vuetify.js +97 -28
- package/dist/vuetify.js.map +1 -1
- package/dist/vuetify.min.css +2 -2
- package/dist/vuetify.min.js +1160 -1156
- package/dist/vuetify.min.js.map +1 -1
- package/lib/composables/theme.d.ts +6 -1
- package/lib/composables/theme.js +94 -26
- package/lib/composables/theme.js.map +1 -1
- package/lib/entry-bundler.js +1 -1
- package/lib/framework.d.ts +63 -58
- package/lib/framework.js +1 -1
- package/lib/util/globals.d.ts +1 -0
- package/lib/util/globals.js +1 -0
- package/lib/util/globals.js.map +1 -1
- package/package.json +1 -1
package/dist/vuetify-labs.d.ts
CHANGED
@@ -132,11 +132,12 @@ type DeepPartial<T> = T extends object ? {
|
|
132
132
|
} : T;
|
133
133
|
type ThemeOptions = false | {
|
134
134
|
cspNonce?: string;
|
135
|
-
defaultTheme?: string;
|
135
|
+
defaultTheme?: 'light' | 'dark' | 'system' | string;
|
136
136
|
variations?: false | VariationsOptions;
|
137
137
|
themes?: Record<string, ThemeDefinition>;
|
138
138
|
stylesheetId?: string;
|
139
139
|
scope?: string;
|
140
|
+
unimportant?: boolean;
|
140
141
|
};
|
141
142
|
type ThemeDefinition = DeepPartial<InternalThemeDefinition>;
|
142
143
|
interface VariationsOptions {
|
@@ -173,11 +174,15 @@ interface OnColors {
|
|
173
174
|
'on-info': string;
|
174
175
|
}
|
175
176
|
interface ThemeInstance {
|
177
|
+
change: (themeName: string) => void;
|
178
|
+
cycle: (themeArray?: string[]) => void;
|
179
|
+
toggle: (themeArray?: [string, string]) => void;
|
176
180
|
readonly isDisabled: boolean;
|
177
181
|
readonly themes: Ref<Record<string, InternalThemeDefinition>>;
|
178
182
|
readonly name: Readonly<Ref<string>>;
|
179
183
|
readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
|
180
184
|
readonly computedThemes: DeepReadonly<Ref<Record<string, InternalThemeDefinition>>>;
|
185
|
+
readonly prefix: string;
|
181
186
|
readonly themeClasses: Readonly<Ref<string | undefined>>;
|
182
187
|
readonly styles: Readonly<Ref<string>>;
|
183
188
|
readonly global: {
|
@@ -96780,40 +96785,43 @@ declare module 'vue' {
|
|
96780
96785
|
$children?: VNodeChild
|
96781
96786
|
}
|
96782
96787
|
export interface GlobalComponents {
|
96788
|
+
VAlert: VAlert
|
96789
|
+
VAlertTitle: VAlertTitle
|
96783
96790
|
VApp: VApp
|
96791
|
+
VAutocomplete: VAutocomplete
|
96784
96792
|
VAppBar: VAppBar
|
96785
96793
|
VAppBarNavIcon: VAppBarNavIcon
|
96786
96794
|
VAppBarTitle: VAppBarTitle
|
96787
|
-
VAvatar: VAvatar
|
96788
|
-
VAlert: VAlert
|
96789
|
-
VAlertTitle: VAlertTitle
|
96790
|
-
VAutocomplete: VAutocomplete
|
96791
96795
|
VBadge: VBadge
|
96796
|
+
VAvatar: VAvatar
|
96792
96797
|
VBanner: VBanner
|
96793
96798
|
VBannerActions: VBannerActions
|
96794
96799
|
VBannerText: VBannerText
|
96800
|
+
VBtn: VBtn
|
96801
|
+
VBtnGroup: VBtnGroup
|
96802
|
+
VBtnToggle: VBtnToggle
|
96803
|
+
VBottomNavigation: VBottomNavigation
|
96795
96804
|
VBreadcrumbs: VBreadcrumbs
|
96796
96805
|
VBreadcrumbsItem: VBreadcrumbsItem
|
96797
96806
|
VBreadcrumbsDivider: VBreadcrumbsDivider
|
96807
|
+
VChip: VChip
|
96808
|
+
VCarousel: VCarousel
|
96809
|
+
VCarouselItem: VCarouselItem
|
96798
96810
|
VBottomSheet: VBottomSheet
|
96799
|
-
|
96800
|
-
|
96801
|
-
VBtn: VBtn
|
96802
|
-
VCheckbox: VCheckbox
|
96803
|
-
VCheckboxBtn: VCheckboxBtn
|
96811
|
+
VCode: VCode
|
96812
|
+
VChipGroup: VChipGroup
|
96804
96813
|
VCard: VCard
|
96805
96814
|
VCardActions: VCardActions
|
96806
96815
|
VCardItem: VCardItem
|
96807
96816
|
VCardSubtitle: VCardSubtitle
|
96808
96817
|
VCardText: VCardText
|
96809
96818
|
VCardTitle: VCardTitle
|
96810
|
-
VBtnToggle: VBtnToggle
|
96811
|
-
VChipGroup: VChipGroup
|
96812
|
-
VCarousel: VCarousel
|
96813
|
-
VCarouselItem: VCarouselItem
|
96814
|
-
VColorPicker: VColorPicker
|
96815
|
-
VCode: VCode
|
96816
96819
|
VCombobox: VCombobox
|
96820
|
+
VCheckbox: VCheckbox
|
96821
|
+
VCheckboxBtn: VCheckboxBtn
|
96822
|
+
VDialog: VDialog
|
96823
|
+
VCounter: VCounter
|
96824
|
+
VColorPicker: VColorPicker
|
96817
96825
|
VDataTable: VDataTable
|
96818
96826
|
VDataTableHeaders: VDataTableHeaders
|
96819
96827
|
VDataTableFooter: VDataTableFooter
|
@@ -96827,32 +96835,28 @@ declare module 'vue' {
|
|
96827
96835
|
VDatePickerMonth: VDatePickerMonth
|
96828
96836
|
VDatePickerMonths: VDatePickerMonths
|
96829
96837
|
VDatePickerYears: VDatePickerYears
|
96830
|
-
VCounter: VCounter
|
96831
|
-
VChip: VChip
|
96832
|
-
VEmptyState: VEmptyState
|
96833
|
-
VDivider: VDivider
|
96834
96838
|
VExpansionPanels: VExpansionPanels
|
96835
96839
|
VExpansionPanel: VExpansionPanel
|
96836
96840
|
VExpansionPanelText: VExpansionPanelText
|
96837
96841
|
VExpansionPanelTitle: VExpansionPanelTitle
|
96838
|
-
|
96839
|
-
|
96842
|
+
VDivider: VDivider
|
96843
|
+
VEmptyState: VEmptyState
|
96840
96844
|
VField: VField
|
96841
96845
|
VFieldLabel: VFieldLabel
|
96842
|
-
VFooter: VFooter
|
96843
96846
|
VFileInput: VFileInput
|
96847
|
+
VFooter: VFooter
|
96848
|
+
VFab: VFab
|
96844
96849
|
VIcon: VIcon
|
96845
96850
|
VComponentIcon: VComponentIcon
|
96846
96851
|
VSvgIcon: VSvgIcon
|
96847
96852
|
VLigatureIcon: VLigatureIcon
|
96848
96853
|
VClassIcon: VClassIcon
|
96849
|
-
|
96850
|
-
VLabel: VLabel
|
96851
|
-
VInfiniteScroll: VInfiniteScroll
|
96854
|
+
VImg: VImg
|
96852
96855
|
VItemGroup: VItemGroup
|
96853
96856
|
VItem: VItem
|
96857
|
+
VInput: VInput
|
96854
96858
|
VKbd: VKbd
|
96855
|
-
|
96859
|
+
VLabel: VLabel
|
96856
96860
|
VList: VList
|
96857
96861
|
VListGroup: VListGroup
|
96858
96862
|
VListImg: VListImg
|
@@ -96862,66 +96866,67 @@ declare module 'vue' {
|
|
96862
96866
|
VListItemSubtitle: VListItemSubtitle
|
96863
96867
|
VListItemTitle: VListItemTitle
|
96864
96868
|
VListSubheader: VListSubheader
|
96869
|
+
VInfiniteScroll: VInfiniteScroll
|
96865
96870
|
VMain: VMain
|
96866
|
-
VNavigationDrawer: VNavigationDrawer
|
96867
|
-
VMenu: VMenu
|
96868
|
-
VOtpInput: VOtpInput
|
96869
|
-
VOverlay: VOverlay
|
96870
96871
|
VMessages: VMessages
|
96872
|
+
VMenu: VMenu
|
96873
|
+
VNavigationDrawer: VNavigationDrawer
|
96871
96874
|
VNumberInput: VNumberInput
|
96872
|
-
|
96875
|
+
VOtpInput: VOtpInput
|
96873
96876
|
VProgressLinear: VProgressLinear
|
96874
|
-
|
96877
|
+
VPagination: VPagination
|
96878
|
+
VOverlay: VOverlay
|
96875
96879
|
VProgressCircular: VProgressCircular
|
96876
|
-
|
96880
|
+
VRadioGroup: VRadioGroup
|
96877
96881
|
VRating: VRating
|
96882
|
+
VSelect: VSelect
|
96883
|
+
VSheet: VSheet
|
96878
96884
|
VSelectionControl: VSelectionControl
|
96885
|
+
VSkeletonLoader: VSkeletonLoader
|
96879
96886
|
VSelectionControlGroup: VSelectionControlGroup
|
96880
96887
|
VSlideGroup: VSlideGroup
|
96881
96888
|
VSlideGroupItem: VSlideGroupItem
|
96882
|
-
VSnackbar: VSnackbar
|
96883
|
-
VSheet: VSheet
|
96884
|
-
VSkeletonLoader: VSkeletonLoader
|
96885
96889
|
VSlider: VSlider
|
96890
|
+
VSnackbar: VSnackbar
|
96886
96891
|
VSwitch: VSwitch
|
96887
|
-
VTab: VTab
|
96888
|
-
VTabs: VTabs
|
96889
|
-
VTabsWindow: VTabsWindow
|
96890
|
-
VTabsWindowItem: VTabsWindowItem
|
96891
|
-
VSystemBar: VSystemBar
|
96892
96892
|
VStepper: VStepper
|
96893
96893
|
VStepperActions: VStepperActions
|
96894
96894
|
VStepperHeader: VStepperHeader
|
96895
96895
|
VStepperItem: VStepperItem
|
96896
96896
|
VStepperWindow: VStepperWindow
|
96897
96897
|
VStepperWindowItem: VStepperWindowItem
|
96898
|
-
VTextarea: VTextarea
|
96899
96898
|
VTable: VTable
|
96899
|
+
VTab: VTab
|
96900
|
+
VTabs: VTabs
|
96901
|
+
VTabsWindow: VTabsWindow
|
96902
|
+
VTabsWindowItem: VTabsWindowItem
|
96903
|
+
VTimeline: VTimeline
|
96904
|
+
VTimelineItem: VTimelineItem
|
96905
|
+
VTextField: VTextField
|
96900
96906
|
VToolbar: VToolbar
|
96901
96907
|
VToolbarTitle: VToolbarTitle
|
96902
96908
|
VToolbarItems: VToolbarItems
|
96903
|
-
|
96904
|
-
|
96905
|
-
VTimelineItem: VTimelineItem
|
96909
|
+
VTextarea: VTextarea
|
96910
|
+
VTooltip: VTooltip
|
96906
96911
|
VWindow: VWindow
|
96907
96912
|
VWindowItem: VWindowItem
|
96908
|
-
|
96913
|
+
VSystemBar: VSystemBar
|
96909
96914
|
VConfirmEdit: VConfirmEdit
|
96910
96915
|
VDataIterator: VDataIterator
|
96911
96916
|
VDefaultsProvider: VDefaultsProvider
|
96912
96917
|
VForm: VForm
|
96913
|
-
VHover: VHover
|
96914
96918
|
VContainer: VContainer
|
96915
96919
|
VCol: VCol
|
96916
96920
|
VRow: VRow
|
96917
96921
|
VSpacer: VSpacer
|
96922
|
+
VHover: VHover
|
96918
96923
|
VLayout: VLayout
|
96919
96924
|
VLayoutItem: VLayoutItem
|
96920
96925
|
VLazy: VLazy
|
96921
96926
|
VLocaleProvider: VLocaleProvider
|
96922
96927
|
VNoSsr: VNoSsr
|
96923
|
-
VParallax: VParallax
|
96924
96928
|
VRadio: VRadio
|
96929
|
+
VParallax: VParallax
|
96925
96930
|
VRangeSlider: VRangeSlider
|
96926
96931
|
VResponsive: VResponsive
|
96927
96932
|
VSnackbarQueue: VSnackbarQueue
|
@@ -96946,26 +96951,26 @@ declare module 'vue' {
|
|
96946
96951
|
VExpandTransition: VExpandTransition
|
96947
96952
|
VExpandXTransition: VExpandXTransition
|
96948
96953
|
VDialogTransition: VDialogTransition
|
96949
|
-
|
96950
|
-
VFileUploadItem: VFileUploadItem
|
96951
|
-
VStepperVertical: VStepperVertical
|
96952
|
-
VStepperVerticalItem: VStepperVerticalItem
|
96953
|
-
VStepperVerticalActions: VStepperVerticalActions
|
96954
|
+
VIconBtn: VIconBtn
|
96954
96955
|
VCalendar: VCalendar
|
96955
96956
|
VCalendarDay: VCalendarDay
|
96956
96957
|
VCalendarHeader: VCalendarHeader
|
96957
96958
|
VCalendarInterval: VCalendarInterval
|
96958
96959
|
VCalendarIntervalEvent: VCalendarIntervalEvent
|
96959
96960
|
VCalendarMonthDay: VCalendarMonthDay
|
96960
|
-
|
96961
|
+
VFileUpload: VFileUpload
|
96962
|
+
VFileUploadItem: VFileUploadItem
|
96963
|
+
VStepperVertical: VStepperVertical
|
96964
|
+
VStepperVerticalItem: VStepperVerticalItem
|
96965
|
+
VStepperVerticalActions: VStepperVerticalActions
|
96961
96966
|
VPicker: VPicker
|
96962
96967
|
VPickerTitle: VPickerTitle
|
96963
|
-
VTimePicker: VTimePicker
|
96964
|
-
VTimePickerClock: VTimePickerClock
|
96965
|
-
VTimePickerControls: VTimePickerControls
|
96966
96968
|
VTreeview: VTreeview
|
96967
96969
|
VTreeviewItem: VTreeviewItem
|
96968
96970
|
VTreeviewGroup: VTreeviewGroup
|
96971
|
+
VTimePicker: VTimePicker
|
96972
|
+
VTimePickerClock: VTimePickerClock
|
96973
|
+
VTimePickerControls: VTimePickerControls
|
96969
96974
|
VDateInput: VDateInput
|
96970
96975
|
VPullToRefresh: VPullToRefresh
|
96971
96976
|
}
|
package/dist/vuetify-labs.esm.js
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
/*!
|
2
|
-
* Vuetify v3.8.1-dev.2025-04-
|
2
|
+
* Vuetify v3.8.1-dev.2025-04-12
|
3
3
|
* Forged by John Leider
|
4
4
|
* Released under the MIT License.
|
5
5
|
*/
|
6
6
|
|
7
|
-
import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
|
7
|
+
import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
|
8
8
|
|
9
9
|
// Types
|
10
10
|
// eslint-disable-line vue/prefer-import-from-vue
|
@@ -81,6 +81,7 @@ const IN_BROWSER = typeof window !== 'undefined';
|
|
81
81
|
const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
|
82
82
|
const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
|
83
83
|
const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
|
84
|
+
const SUPPORTS_MATCH_MEDIA = IN_BROWSER && 'matchMedia' in window && typeof window.matchMedia === 'function';
|
84
85
|
|
85
86
|
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
86
87
|
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
@@ -2281,6 +2282,7 @@ const makeThemeProps = propsFactory({
|
|
2281
2282
|
function genDefaults$2() {
|
2282
2283
|
return {
|
2283
2284
|
defaultTheme: 'light',
|
2285
|
+
prefix: 'v-',
|
2284
2286
|
variations: {
|
2285
2287
|
colors: [],
|
2286
2288
|
lighten: 0,
|
@@ -2362,7 +2364,10 @@ function genDefaults$2() {
|
|
2362
2364
|
}
|
2363
2365
|
}
|
2364
2366
|
},
|
2365
|
-
stylesheetId: 'vuetify-theme-stylesheet'
|
2367
|
+
stylesheetId: 'vuetify-theme-stylesheet',
|
2368
|
+
scoped: false,
|
2369
|
+
unimportant: false,
|
2370
|
+
utilities: true
|
2366
2371
|
};
|
2367
2372
|
}
|
2368
2373
|
function parseThemeOptions() {
|
@@ -2385,21 +2390,21 @@ function parseThemeOptions() {
|
|
2385
2390
|
function createCssClass(lines, selector, content, scope) {
|
2386
2391
|
lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => ` ${line};\n`), '}\n');
|
2387
2392
|
}
|
2388
|
-
function genCssVariables(theme) {
|
2393
|
+
function genCssVariables(theme, prefix) {
|
2389
2394
|
const lightOverlay = theme.dark ? 2 : 1;
|
2390
2395
|
const darkOverlay = theme.dark ? 1 : 2;
|
2391
2396
|
const variables = [];
|
2392
2397
|
for (const [key, value] of Object.entries(theme.colors)) {
|
2393
2398
|
const rgb = parseColor(value);
|
2394
|
-
variables.push(
|
2399
|
+
variables.push(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
|
2395
2400
|
if (!key.startsWith('on-')) {
|
2396
|
-
variables.push(
|
2401
|
+
variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
|
2397
2402
|
}
|
2398
2403
|
}
|
2399
2404
|
for (const [key, value] of Object.entries(theme.variables)) {
|
2400
2405
|
const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
|
2401
2406
|
const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
|
2402
|
-
variables.push(
|
2407
|
+
variables.push(`--${prefix}${key}: ${rgb ?? value}`);
|
2403
2408
|
}
|
2404
2409
|
return variables;
|
2405
2410
|
}
|
@@ -2443,7 +2448,8 @@ function getScopedSelector(selector, scope) {
|
|
2443
2448
|
const scopeSelector = `:where(${scope})`;
|
2444
2449
|
return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
|
2445
2450
|
}
|
2446
|
-
function upsertStyles(
|
2451
|
+
function upsertStyles(id, cspNonce, styles) {
|
2452
|
+
const styleEl = getOrCreateStyleElement(id, cspNonce);
|
2447
2453
|
if (!styleEl) return;
|
2448
2454
|
styleEl.innerHTML = styles;
|
2449
2455
|
}
|
@@ -2463,8 +2469,17 @@ function getOrCreateStyleElement(id, cspNonce) {
|
|
2463
2469
|
// Composables
|
2464
2470
|
function createTheme(options) {
|
2465
2471
|
const parsedOptions = parseThemeOptions(options);
|
2466
|
-
const
|
2472
|
+
const _name = shallowRef(parsedOptions.defaultTheme);
|
2467
2473
|
const themes = ref(parsedOptions.themes);
|
2474
|
+
const systemName = shallowRef('light');
|
2475
|
+
const name = computed({
|
2476
|
+
get() {
|
2477
|
+
return _name.value === 'system' ? systemName.value : _name.value;
|
2478
|
+
},
|
2479
|
+
set(val) {
|
2480
|
+
_name.value = val;
|
2481
|
+
}
|
2482
|
+
});
|
2468
2483
|
const computedThemes = computed(() => {
|
2469
2484
|
const acc = {};
|
2470
2485
|
for (const [name, original] of Object.entries(themes.value)) {
|
@@ -2485,28 +2500,49 @@ function createTheme(options) {
|
|
2485
2500
|
const current = computed(() => computedThemes.value[name.value]);
|
2486
2501
|
const styles = computed(() => {
|
2487
2502
|
const lines = [];
|
2503
|
+
const important = parsedOptions.unimportant ? '' : ' !important';
|
2504
|
+
const scoped = parsedOptions.scoped ? parsedOptions.prefix : '';
|
2488
2505
|
if (current.value?.dark) {
|
2489
2506
|
createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
|
2490
2507
|
}
|
2491
|
-
createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
|
2508
|
+
createCssClass(lines, ':root', genCssVariables(current.value, parsedOptions.prefix), parsedOptions.scope);
|
2492
2509
|
for (const [themeName, theme] of Object.entries(computedThemes.value)) {
|
2493
|
-
createCssClass(lines,
|
2494
|
-
}
|
2495
|
-
|
2496
|
-
|
2497
|
-
|
2498
|
-
|
2499
|
-
|
2500
|
-
|
2501
|
-
|
2502
|
-
|
2503
|
-
|
2504
|
-
|
2510
|
+
createCssClass(lines, `.${parsedOptions.prefix}theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme, parsedOptions.prefix)], parsedOptions.scope);
|
2511
|
+
}
|
2512
|
+
if (parsedOptions.utilities) {
|
2513
|
+
const bgLines = [];
|
2514
|
+
const fgLines = [];
|
2515
|
+
const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
|
2516
|
+
for (const key of colors) {
|
2517
|
+
if (key.startsWith('on-')) {
|
2518
|
+
createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
|
2519
|
+
} else {
|
2520
|
+
createCssClass(bgLines, `.${scoped}bg-${key}`, [`--${parsedOptions.prefix}theme-overlay-multiplier: var(--${parsedOptions.prefix}theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`, `color: rgb(var(--${parsedOptions.prefix}theme-on-${key}))${important}`], parsedOptions.scope);
|
2521
|
+
createCssClass(fgLines, `.${scoped}text-${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
|
2522
|
+
createCssClass(fgLines, `.${scoped}border-${key}`, [`--${parsedOptions.prefix}border-color: var(--${parsedOptions.prefix}theme-${key})`], parsedOptions.scope);
|
2523
|
+
}
|
2505
2524
|
}
|
2525
|
+
lines.push(...bgLines, ...fgLines);
|
2506
2526
|
}
|
2507
|
-
lines.push(...bgLines, ...fgLines);
|
2508
2527
|
return lines.map((str, i) => i === 0 ? str : ` ${str}`).join('');
|
2509
2528
|
});
|
2529
|
+
const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
|
2530
|
+
const themeNames = computed(() => Object.keys(computedThemes.value));
|
2531
|
+
if (SUPPORTS_MATCH_MEDIA) {
|
2532
|
+
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
2533
|
+
function updateSystemName() {
|
2534
|
+
systemName.value = media.matches ? 'dark' : 'light';
|
2535
|
+
}
|
2536
|
+
updateSystemName();
|
2537
|
+
media.addEventListener('change', updateSystemName, {
|
2538
|
+
passive: true
|
2539
|
+
});
|
2540
|
+
if (getCurrentScope()) {
|
2541
|
+
onScopeDispose(() => {
|
2542
|
+
media.removeEventListener('change', updateSystemName);
|
2543
|
+
});
|
2544
|
+
}
|
2545
|
+
}
|
2510
2546
|
function install(app) {
|
2511
2547
|
if (parsedOptions.isDisabled) return;
|
2512
2548
|
const head = app._context.provides.usehead;
|
@@ -2544,22 +2580,55 @@ function createTheme(options) {
|
|
2544
2580
|
updateStyles();
|
2545
2581
|
}
|
2546
2582
|
function updateStyles() {
|
2547
|
-
upsertStyles(
|
2583
|
+
upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
|
2548
2584
|
}
|
2549
2585
|
}
|
2550
2586
|
}
|
2551
|
-
|
2587
|
+
function change(themeName) {
|
2588
|
+
if (!themeNames.value.includes(themeName)) {
|
2589
|
+
consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
|
2590
|
+
return;
|
2591
|
+
}
|
2592
|
+
name.value = themeName;
|
2593
|
+
}
|
2594
|
+
function cycle() {
|
2595
|
+
let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeNames.value;
|
2596
|
+
const currentIndex = themeArray.indexOf(name.value);
|
2597
|
+
const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % themeArray.length;
|
2598
|
+
change(themeArray[nextIndex]);
|
2599
|
+
}
|
2600
|
+
function toggle() {
|
2601
|
+
let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['light', 'dark'];
|
2602
|
+
cycle(themeArray);
|
2603
|
+
}
|
2604
|
+
const globalName = new Proxy(name, {
|
2605
|
+
get(target, prop) {
|
2606
|
+
return target[prop];
|
2607
|
+
},
|
2608
|
+
set(target, prop, val) {
|
2609
|
+
if (prop === 'value') {
|
2610
|
+
deprecate(`theme.global.name.value = ${val}`, `theme.change('${val}')`);
|
2611
|
+
}
|
2612
|
+
// @ts-expect-error
|
2613
|
+
target[prop] = val;
|
2614
|
+
return true;
|
2615
|
+
}
|
2616
|
+
});
|
2552
2617
|
return {
|
2553
2618
|
install,
|
2619
|
+
change,
|
2620
|
+
cycle,
|
2621
|
+
toggle,
|
2554
2622
|
isDisabled: parsedOptions.isDisabled,
|
2555
2623
|
name,
|
2556
2624
|
themes,
|
2557
2625
|
current,
|
2558
2626
|
computedThemes,
|
2627
|
+
prefix: parsedOptions.prefix,
|
2559
2628
|
themeClasses,
|
2560
2629
|
styles,
|
2561
2630
|
global: {
|
2562
|
-
name,
|
2631
|
+
name: globalName,
|
2563
2632
|
current
|
2564
2633
|
}
|
2565
2634
|
};
|
@@ -2570,7 +2639,7 @@ function provideTheme(props) {
|
|
2570
2639
|
if (!theme) throw new Error('Could not find Vuetify theme injection');
|
2571
2640
|
const name = computed(() => props.theme ?? theme.name.value);
|
2572
2641
|
const current = computed(() => theme.themes.value[name.value]);
|
2573
|
-
const themeClasses = computed(() => theme.isDisabled ? undefined :
|
2642
|
+
const themeClasses = computed(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
|
2574
2643
|
const newTheme = {
|
2575
2644
|
...theme,
|
2576
2645
|
name,
|
@@ -31565,7 +31634,7 @@ function createVuetify$1() {
|
|
31565
31634
|
};
|
31566
31635
|
});
|
31567
31636
|
}
|
31568
|
-
const version$1 = "3.8.1-dev.2025-04-
|
31637
|
+
const version$1 = "3.8.1-dev.2025-04-12";
|
31569
31638
|
createVuetify$1.version = version$1;
|
31570
31639
|
|
31571
31640
|
// Vue's inject() can only be used in setup
|
@@ -31850,7 +31919,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
31850
31919
|
|
31851
31920
|
/* eslint-disable local-rules/sort-imports */
|
31852
31921
|
|
31853
|
-
const version = "3.8.1-dev.2025-04-
|
31922
|
+
const version = "3.8.1-dev.2025-04-12";
|
31854
31923
|
|
31855
31924
|
/* eslint-disable local-rules/sort-imports */
|
31856
31925
|
|