@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.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: {
|
@@ -82943,40 +82948,43 @@ declare module 'vue' {
|
|
82943
82948
|
$children?: VNodeChild
|
82944
82949
|
}
|
82945
82950
|
export interface GlobalComponents {
|
82951
|
+
VAlert: VAlert
|
82952
|
+
VAlertTitle: VAlertTitle
|
82946
82953
|
VApp: VApp
|
82954
|
+
VAutocomplete: VAutocomplete
|
82947
82955
|
VAppBar: VAppBar
|
82948
82956
|
VAppBarNavIcon: VAppBarNavIcon
|
82949
82957
|
VAppBarTitle: VAppBarTitle
|
82950
|
-
VAvatar: VAvatar
|
82951
|
-
VAlert: VAlert
|
82952
|
-
VAlertTitle: VAlertTitle
|
82953
|
-
VAutocomplete: VAutocomplete
|
82954
82958
|
VBadge: VBadge
|
82959
|
+
VAvatar: VAvatar
|
82955
82960
|
VBanner: VBanner
|
82956
82961
|
VBannerActions: VBannerActions
|
82957
82962
|
VBannerText: VBannerText
|
82963
|
+
VBtn: VBtn
|
82964
|
+
VBtnGroup: VBtnGroup
|
82965
|
+
VBtnToggle: VBtnToggle
|
82966
|
+
VBottomNavigation: VBottomNavigation
|
82958
82967
|
VBreadcrumbs: VBreadcrumbs
|
82959
82968
|
VBreadcrumbsItem: VBreadcrumbsItem
|
82960
82969
|
VBreadcrumbsDivider: VBreadcrumbsDivider
|
82970
|
+
VChip: VChip
|
82971
|
+
VCarousel: VCarousel
|
82972
|
+
VCarouselItem: VCarouselItem
|
82961
82973
|
VBottomSheet: VBottomSheet
|
82962
|
-
|
82963
|
-
|
82964
|
-
VBtn: VBtn
|
82965
|
-
VCheckbox: VCheckbox
|
82966
|
-
VCheckboxBtn: VCheckboxBtn
|
82974
|
+
VCode: VCode
|
82975
|
+
VChipGroup: VChipGroup
|
82967
82976
|
VCard: VCard
|
82968
82977
|
VCardActions: VCardActions
|
82969
82978
|
VCardItem: VCardItem
|
82970
82979
|
VCardSubtitle: VCardSubtitle
|
82971
82980
|
VCardText: VCardText
|
82972
82981
|
VCardTitle: VCardTitle
|
82973
|
-
VBtnToggle: VBtnToggle
|
82974
|
-
VChipGroup: VChipGroup
|
82975
|
-
VCarousel: VCarousel
|
82976
|
-
VCarouselItem: VCarouselItem
|
82977
|
-
VColorPicker: VColorPicker
|
82978
|
-
VCode: VCode
|
82979
82982
|
VCombobox: VCombobox
|
82983
|
+
VCheckbox: VCheckbox
|
82984
|
+
VCheckboxBtn: VCheckboxBtn
|
82985
|
+
VDialog: VDialog
|
82986
|
+
VCounter: VCounter
|
82987
|
+
VColorPicker: VColorPicker
|
82980
82988
|
VDataTable: VDataTable
|
82981
82989
|
VDataTableHeaders: VDataTableHeaders
|
82982
82990
|
VDataTableFooter: VDataTableFooter
|
@@ -82990,32 +82998,28 @@ declare module 'vue' {
|
|
82990
82998
|
VDatePickerMonth: VDatePickerMonth
|
82991
82999
|
VDatePickerMonths: VDatePickerMonths
|
82992
83000
|
VDatePickerYears: VDatePickerYears
|
82993
|
-
VCounter: VCounter
|
82994
|
-
VChip: VChip
|
82995
|
-
VEmptyState: VEmptyState
|
82996
|
-
VDivider: VDivider
|
82997
83001
|
VExpansionPanels: VExpansionPanels
|
82998
83002
|
VExpansionPanel: VExpansionPanel
|
82999
83003
|
VExpansionPanelText: VExpansionPanelText
|
83000
83004
|
VExpansionPanelTitle: VExpansionPanelTitle
|
83001
|
-
|
83002
|
-
|
83005
|
+
VDivider: VDivider
|
83006
|
+
VEmptyState: VEmptyState
|
83003
83007
|
VField: VField
|
83004
83008
|
VFieldLabel: VFieldLabel
|
83005
|
-
VFooter: VFooter
|
83006
83009
|
VFileInput: VFileInput
|
83010
|
+
VFooter: VFooter
|
83011
|
+
VFab: VFab
|
83007
83012
|
VIcon: VIcon
|
83008
83013
|
VComponentIcon: VComponentIcon
|
83009
83014
|
VSvgIcon: VSvgIcon
|
83010
83015
|
VLigatureIcon: VLigatureIcon
|
83011
83016
|
VClassIcon: VClassIcon
|
83012
|
-
|
83013
|
-
VLabel: VLabel
|
83014
|
-
VInfiniteScroll: VInfiniteScroll
|
83017
|
+
VImg: VImg
|
83015
83018
|
VItemGroup: VItemGroup
|
83016
83019
|
VItem: VItem
|
83020
|
+
VInput: VInput
|
83017
83021
|
VKbd: VKbd
|
83018
|
-
|
83022
|
+
VLabel: VLabel
|
83019
83023
|
VList: VList
|
83020
83024
|
VListGroup: VListGroup
|
83021
83025
|
VListImg: VListImg
|
@@ -83025,66 +83029,67 @@ declare module 'vue' {
|
|
83025
83029
|
VListItemSubtitle: VListItemSubtitle
|
83026
83030
|
VListItemTitle: VListItemTitle
|
83027
83031
|
VListSubheader: VListSubheader
|
83032
|
+
VInfiniteScroll: VInfiniteScroll
|
83028
83033
|
VMain: VMain
|
83029
|
-
VNavigationDrawer: VNavigationDrawer
|
83030
|
-
VMenu: VMenu
|
83031
|
-
VOtpInput: VOtpInput
|
83032
|
-
VOverlay: VOverlay
|
83033
83034
|
VMessages: VMessages
|
83035
|
+
VMenu: VMenu
|
83036
|
+
VNavigationDrawer: VNavigationDrawer
|
83034
83037
|
VNumberInput: VNumberInput
|
83035
|
-
|
83038
|
+
VOtpInput: VOtpInput
|
83036
83039
|
VProgressLinear: VProgressLinear
|
83037
|
-
|
83040
|
+
VPagination: VPagination
|
83041
|
+
VOverlay: VOverlay
|
83038
83042
|
VProgressCircular: VProgressCircular
|
83039
|
-
|
83043
|
+
VRadioGroup: VRadioGroup
|
83040
83044
|
VRating: VRating
|
83045
|
+
VSelect: VSelect
|
83046
|
+
VSheet: VSheet
|
83041
83047
|
VSelectionControl: VSelectionControl
|
83048
|
+
VSkeletonLoader: VSkeletonLoader
|
83042
83049
|
VSelectionControlGroup: VSelectionControlGroup
|
83043
83050
|
VSlideGroup: VSlideGroup
|
83044
83051
|
VSlideGroupItem: VSlideGroupItem
|
83045
|
-
VSnackbar: VSnackbar
|
83046
|
-
VSheet: VSheet
|
83047
|
-
VSkeletonLoader: VSkeletonLoader
|
83048
83052
|
VSlider: VSlider
|
83053
|
+
VSnackbar: VSnackbar
|
83049
83054
|
VSwitch: VSwitch
|
83050
|
-
VTab: VTab
|
83051
|
-
VTabs: VTabs
|
83052
|
-
VTabsWindow: VTabsWindow
|
83053
|
-
VTabsWindowItem: VTabsWindowItem
|
83054
|
-
VSystemBar: VSystemBar
|
83055
83055
|
VStepper: VStepper
|
83056
83056
|
VStepperActions: VStepperActions
|
83057
83057
|
VStepperHeader: VStepperHeader
|
83058
83058
|
VStepperItem: VStepperItem
|
83059
83059
|
VStepperWindow: VStepperWindow
|
83060
83060
|
VStepperWindowItem: VStepperWindowItem
|
83061
|
-
VTextarea: VTextarea
|
83062
83061
|
VTable: VTable
|
83062
|
+
VTab: VTab
|
83063
|
+
VTabs: VTabs
|
83064
|
+
VTabsWindow: VTabsWindow
|
83065
|
+
VTabsWindowItem: VTabsWindowItem
|
83066
|
+
VTimeline: VTimeline
|
83067
|
+
VTimelineItem: VTimelineItem
|
83068
|
+
VTextField: VTextField
|
83063
83069
|
VToolbar: VToolbar
|
83064
83070
|
VToolbarTitle: VToolbarTitle
|
83065
83071
|
VToolbarItems: VToolbarItems
|
83066
|
-
|
83067
|
-
|
83068
|
-
VTimelineItem: VTimelineItem
|
83072
|
+
VTextarea: VTextarea
|
83073
|
+
VTooltip: VTooltip
|
83069
83074
|
VWindow: VWindow
|
83070
83075
|
VWindowItem: VWindowItem
|
83071
|
-
|
83076
|
+
VSystemBar: VSystemBar
|
83072
83077
|
VConfirmEdit: VConfirmEdit
|
83073
83078
|
VDataIterator: VDataIterator
|
83074
83079
|
VDefaultsProvider: VDefaultsProvider
|
83075
83080
|
VForm: VForm
|
83076
|
-
VHover: VHover
|
83077
83081
|
VContainer: VContainer
|
83078
83082
|
VCol: VCol
|
83079
83083
|
VRow: VRow
|
83080
83084
|
VSpacer: VSpacer
|
83085
|
+
VHover: VHover
|
83081
83086
|
VLayout: VLayout
|
83082
83087
|
VLayoutItem: VLayoutItem
|
83083
83088
|
VLazy: VLazy
|
83084
83089
|
VLocaleProvider: VLocaleProvider
|
83085
83090
|
VNoSsr: VNoSsr
|
83086
|
-
VParallax: VParallax
|
83087
83091
|
VRadio: VRadio
|
83092
|
+
VParallax: VParallax
|
83088
83093
|
VRangeSlider: VRangeSlider
|
83089
83094
|
VResponsive: VResponsive
|
83090
83095
|
VSnackbarQueue: VSnackbarQueue
|
@@ -83109,26 +83114,26 @@ declare module 'vue' {
|
|
83109
83114
|
VExpandTransition: VExpandTransition
|
83110
83115
|
VExpandXTransition: VExpandXTransition
|
83111
83116
|
VDialogTransition: VDialogTransition
|
83112
|
-
|
83113
|
-
VFileUploadItem: VFileUploadItem
|
83114
|
-
VStepperVertical: VStepperVertical
|
83115
|
-
VStepperVerticalItem: VStepperVerticalItem
|
83116
|
-
VStepperVerticalActions: VStepperVerticalActions
|
83117
|
+
VIconBtn: VIconBtn
|
83117
83118
|
VCalendar: VCalendar
|
83118
83119
|
VCalendarDay: VCalendarDay
|
83119
83120
|
VCalendarHeader: VCalendarHeader
|
83120
83121
|
VCalendarInterval: VCalendarInterval
|
83121
83122
|
VCalendarIntervalEvent: VCalendarIntervalEvent
|
83122
83123
|
VCalendarMonthDay: VCalendarMonthDay
|
83123
|
-
|
83124
|
+
VFileUpload: VFileUpload
|
83125
|
+
VFileUploadItem: VFileUploadItem
|
83126
|
+
VStepperVertical: VStepperVertical
|
83127
|
+
VStepperVerticalItem: VStepperVerticalItem
|
83128
|
+
VStepperVerticalActions: VStepperVerticalActions
|
83124
83129
|
VPicker: VPicker
|
83125
83130
|
VPickerTitle: VPickerTitle
|
83126
|
-
VTimePicker: VTimePicker
|
83127
|
-
VTimePickerClock: VTimePickerClock
|
83128
|
-
VTimePickerControls: VTimePickerControls
|
83129
83131
|
VTreeview: VTreeview
|
83130
83132
|
VTreeviewItem: VTreeviewItem
|
83131
83133
|
VTreeviewGroup: VTreeviewGroup
|
83134
|
+
VTimePicker: VTimePicker
|
83135
|
+
VTimePickerClock: VTimePickerClock
|
83136
|
+
VTimePickerControls: VTimePickerControls
|
83132
83137
|
VDateInput: VDateInput
|
83133
83138
|
VPullToRefresh: VPullToRefresh
|
83134
83139
|
}
|
package/dist/vuetify.esm.js
CHANGED
@@ -1,15 +1,16 @@
|
|
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, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, 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, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, TransitionGroup, Transition, 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
|
const IN_BROWSER = typeof window !== 'undefined';
|
10
10
|
const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
|
11
11
|
const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
|
12
12
|
const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
|
13
|
+
const SUPPORTS_MATCH_MEDIA = IN_BROWSER && 'matchMedia' in window && typeof window.matchMedia === 'function';
|
13
14
|
|
14
15
|
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
15
16
|
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
@@ -2754,6 +2755,7 @@ const makeThemeProps = propsFactory({
|
|
2754
2755
|
function genDefaults$1() {
|
2755
2756
|
return {
|
2756
2757
|
defaultTheme: 'light',
|
2758
|
+
prefix: 'v-',
|
2757
2759
|
variations: {
|
2758
2760
|
colors: [],
|
2759
2761
|
lighten: 0,
|
@@ -2835,7 +2837,10 @@ function genDefaults$1() {
|
|
2835
2837
|
}
|
2836
2838
|
}
|
2837
2839
|
},
|
2838
|
-
stylesheetId: 'vuetify-theme-stylesheet'
|
2840
|
+
stylesheetId: 'vuetify-theme-stylesheet',
|
2841
|
+
scoped: false,
|
2842
|
+
unimportant: false,
|
2843
|
+
utilities: true
|
2839
2844
|
};
|
2840
2845
|
}
|
2841
2846
|
function parseThemeOptions() {
|
@@ -2858,21 +2863,21 @@ function parseThemeOptions() {
|
|
2858
2863
|
function createCssClass(lines, selector, content, scope) {
|
2859
2864
|
lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => ` ${line};\n`), '}\n');
|
2860
2865
|
}
|
2861
|
-
function genCssVariables(theme) {
|
2866
|
+
function genCssVariables(theme, prefix) {
|
2862
2867
|
const lightOverlay = theme.dark ? 2 : 1;
|
2863
2868
|
const darkOverlay = theme.dark ? 1 : 2;
|
2864
2869
|
const variables = [];
|
2865
2870
|
for (const [key, value] of Object.entries(theme.colors)) {
|
2866
2871
|
const rgb = parseColor(value);
|
2867
|
-
variables.push(
|
2872
|
+
variables.push(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
|
2868
2873
|
if (!key.startsWith('on-')) {
|
2869
|
-
variables.push(
|
2874
|
+
variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
|
2870
2875
|
}
|
2871
2876
|
}
|
2872
2877
|
for (const [key, value] of Object.entries(theme.variables)) {
|
2873
2878
|
const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
|
2874
2879
|
const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
|
2875
|
-
variables.push(
|
2880
|
+
variables.push(`--${prefix}${key}: ${rgb ?? value}`);
|
2876
2881
|
}
|
2877
2882
|
return variables;
|
2878
2883
|
}
|
@@ -2916,7 +2921,8 @@ function getScopedSelector(selector, scope) {
|
|
2916
2921
|
const scopeSelector = `:where(${scope})`;
|
2917
2922
|
return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
|
2918
2923
|
}
|
2919
|
-
function upsertStyles(
|
2924
|
+
function upsertStyles(id, cspNonce, styles) {
|
2925
|
+
const styleEl = getOrCreateStyleElement(id, cspNonce);
|
2920
2926
|
if (!styleEl) return;
|
2921
2927
|
styleEl.innerHTML = styles;
|
2922
2928
|
}
|
@@ -2936,8 +2942,17 @@ function getOrCreateStyleElement(id, cspNonce) {
|
|
2936
2942
|
// Composables
|
2937
2943
|
function createTheme(options) {
|
2938
2944
|
const parsedOptions = parseThemeOptions(options);
|
2939
|
-
const
|
2945
|
+
const _name = shallowRef(parsedOptions.defaultTheme);
|
2940
2946
|
const themes = ref(parsedOptions.themes);
|
2947
|
+
const systemName = shallowRef('light');
|
2948
|
+
const name = computed({
|
2949
|
+
get() {
|
2950
|
+
return _name.value === 'system' ? systemName.value : _name.value;
|
2951
|
+
},
|
2952
|
+
set(val) {
|
2953
|
+
_name.value = val;
|
2954
|
+
}
|
2955
|
+
});
|
2941
2956
|
const computedThemes = computed(() => {
|
2942
2957
|
const acc = {};
|
2943
2958
|
for (const [name, original] of Object.entries(themes.value)) {
|
@@ -2958,28 +2973,49 @@ function createTheme(options) {
|
|
2958
2973
|
const current = computed(() => computedThemes.value[name.value]);
|
2959
2974
|
const styles = computed(() => {
|
2960
2975
|
const lines = [];
|
2976
|
+
const important = parsedOptions.unimportant ? '' : ' !important';
|
2977
|
+
const scoped = parsedOptions.scoped ? parsedOptions.prefix : '';
|
2961
2978
|
if (current.value?.dark) {
|
2962
2979
|
createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
|
2963
2980
|
}
|
2964
|
-
createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
|
2981
|
+
createCssClass(lines, ':root', genCssVariables(current.value, parsedOptions.prefix), parsedOptions.scope);
|
2965
2982
|
for (const [themeName, theme] of Object.entries(computedThemes.value)) {
|
2966
|
-
createCssClass(lines,
|
2967
|
-
}
|
2968
|
-
|
2969
|
-
|
2970
|
-
|
2971
|
-
|
2972
|
-
|
2973
|
-
|
2974
|
-
|
2975
|
-
|
2976
|
-
|
2977
|
-
|
2983
|
+
createCssClass(lines, `.${parsedOptions.prefix}theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme, parsedOptions.prefix)], parsedOptions.scope);
|
2984
|
+
}
|
2985
|
+
if (parsedOptions.utilities) {
|
2986
|
+
const bgLines = [];
|
2987
|
+
const fgLines = [];
|
2988
|
+
const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
|
2989
|
+
for (const key of colors) {
|
2990
|
+
if (key.startsWith('on-')) {
|
2991
|
+
createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
|
2992
|
+
} else {
|
2993
|
+
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);
|
2994
|
+
createCssClass(fgLines, `.${scoped}text-${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
|
2995
|
+
createCssClass(fgLines, `.${scoped}border-${key}`, [`--${parsedOptions.prefix}border-color: var(--${parsedOptions.prefix}theme-${key})`], parsedOptions.scope);
|
2996
|
+
}
|
2978
2997
|
}
|
2998
|
+
lines.push(...bgLines, ...fgLines);
|
2979
2999
|
}
|
2980
|
-
lines.push(...bgLines, ...fgLines);
|
2981
3000
|
return lines.map((str, i) => i === 0 ? str : ` ${str}`).join('');
|
2982
3001
|
});
|
3002
|
+
const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
|
3003
|
+
const themeNames = computed(() => Object.keys(computedThemes.value));
|
3004
|
+
if (SUPPORTS_MATCH_MEDIA) {
|
3005
|
+
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
3006
|
+
function updateSystemName() {
|
3007
|
+
systemName.value = media.matches ? 'dark' : 'light';
|
3008
|
+
}
|
3009
|
+
updateSystemName();
|
3010
|
+
media.addEventListener('change', updateSystemName, {
|
3011
|
+
passive: true
|
3012
|
+
});
|
3013
|
+
if (getCurrentScope()) {
|
3014
|
+
onScopeDispose(() => {
|
3015
|
+
media.removeEventListener('change', updateSystemName);
|
3016
|
+
});
|
3017
|
+
}
|
3018
|
+
}
|
2983
3019
|
function install(app) {
|
2984
3020
|
if (parsedOptions.isDisabled) return;
|
2985
3021
|
const head = app._context.provides.usehead;
|
@@ -3017,22 +3053,55 @@ function createTheme(options) {
|
|
3017
3053
|
updateStyles();
|
3018
3054
|
}
|
3019
3055
|
function updateStyles() {
|
3020
|
-
upsertStyles(
|
3056
|
+
upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
|
3021
3057
|
}
|
3022
3058
|
}
|
3023
3059
|
}
|
3024
|
-
|
3060
|
+
function change(themeName) {
|
3061
|
+
if (!themeNames.value.includes(themeName)) {
|
3062
|
+
consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
|
3063
|
+
return;
|
3064
|
+
}
|
3065
|
+
name.value = themeName;
|
3066
|
+
}
|
3067
|
+
function cycle() {
|
3068
|
+
let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeNames.value;
|
3069
|
+
const currentIndex = themeArray.indexOf(name.value);
|
3070
|
+
const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % themeArray.length;
|
3071
|
+
change(themeArray[nextIndex]);
|
3072
|
+
}
|
3073
|
+
function toggle() {
|
3074
|
+
let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['light', 'dark'];
|
3075
|
+
cycle(themeArray);
|
3076
|
+
}
|
3077
|
+
const globalName = new Proxy(name, {
|
3078
|
+
get(target, prop) {
|
3079
|
+
return target[prop];
|
3080
|
+
},
|
3081
|
+
set(target, prop, val) {
|
3082
|
+
if (prop === 'value') {
|
3083
|
+
deprecate(`theme.global.name.value = ${val}`, `theme.change('${val}')`);
|
3084
|
+
}
|
3085
|
+
// @ts-expect-error
|
3086
|
+
target[prop] = val;
|
3087
|
+
return true;
|
3088
|
+
}
|
3089
|
+
});
|
3025
3090
|
return {
|
3026
3091
|
install,
|
3092
|
+
change,
|
3093
|
+
cycle,
|
3094
|
+
toggle,
|
3027
3095
|
isDisabled: parsedOptions.isDisabled,
|
3028
3096
|
name,
|
3029
3097
|
themes,
|
3030
3098
|
current,
|
3031
3099
|
computedThemes,
|
3100
|
+
prefix: parsedOptions.prefix,
|
3032
3101
|
themeClasses,
|
3033
3102
|
styles,
|
3034
3103
|
global: {
|
3035
|
-
name,
|
3104
|
+
name: globalName,
|
3036
3105
|
current
|
3037
3106
|
}
|
3038
3107
|
};
|
@@ -3043,7 +3112,7 @@ function provideTheme(props) {
|
|
3043
3112
|
if (!theme) throw new Error('Could not find Vuetify theme injection');
|
3044
3113
|
const name = computed(() => props.theme ?? theme.name.value);
|
3045
3114
|
const current = computed(() => theme.themes.value[name.value]);
|
3046
|
-
const themeClasses = computed(() => theme.isDisabled ? undefined :
|
3115
|
+
const themeClasses = computed(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
|
3047
3116
|
const newTheme = {
|
3048
3117
|
...theme,
|
3049
3118
|
name,
|
@@ -29241,7 +29310,7 @@ function createVuetify$1() {
|
|
29241
29310
|
};
|
29242
29311
|
});
|
29243
29312
|
}
|
29244
|
-
const version$1 = "3.8.1-dev.2025-04-
|
29313
|
+
const version$1 = "3.8.1-dev.2025-04-12";
|
29245
29314
|
createVuetify$1.version = version$1;
|
29246
29315
|
|
29247
29316
|
// Vue's inject() can only be used in setup
|
@@ -29266,7 +29335,7 @@ const createVuetify = function () {
|
|
29266
29335
|
...options
|
29267
29336
|
});
|
29268
29337
|
};
|
29269
|
-
const version = "3.8.1-dev.2025-04-
|
29338
|
+
const version = "3.8.1-dev.2025-04-12";
|
29270
29339
|
createVuetify.version = version;
|
29271
29340
|
|
29272
29341
|
export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };
|