@data-fair/lib-vuetify 1.6.5 → 1.7.0

package/index.js

@@ -23,10 +23,10 @@ export function vuetifySessionOptions (session) {
       messages: { fr, en }
     },
     theme: {
-      defaultTheme: 'light',
+      defaultTheme: 'site',
       themes: {
-        light: {
-          dark: false,
+        site: {
+          dark: session.site.value?.dark,
           colors,
           variables: {
             // deactivate automatic partial transparencies

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vuetify",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "description": "Components based on the Vuetify 3 UI lib for the data-fair stack.",
   "main": "index.js",
   "files": [

package/personal-menu.vue

@@ -31,7 +31,7 @@
 
       <v-list
         outlined
-        class="py-0"
+        class="py-0 border-sm"
       >
         <!-- current account, not actionable -->
         <v-list-item
@@ -128,17 +128,17 @@
           class="personal-menu-switch-list-item"
         >
           <template #prepend>
-            <v-icon :icon="mdiShieldAlert" />
+            <v-icon :icon="mdiShieldAlert" color="admin" />
           </template>
           <v-list-item-title>
             <v-switch
-              v-model="user.adminMode"
+              :model-value="!!user.adminMode"
               color="admin"
               hide-details
               class="mt-0"
               density="compact"
               :label="t('adminMode')"
-              @change="session.setAdminMode"
+              @change="session.setAdminMode(!user.adminMode)"
             />
           </v-list-item-title>
         </v-list-item>
@@ -156,28 +156,6 @@
           <v-list-item-title>{{ t('backToAdmin') }}</v-list-item-title>
         </v-list-item>
 
-        <!-- switch dark mode -->
-        <v-list-item
-          v-if="darkModeSwitch"
-          density="compact"
-          class="personal-menu-switch-list-item"
-        >
-          <template #prepend>
-            <v-icon :icon="mdiWeatherNight" />
-          </template>
-          <v-list-item-title>
-            <v-switch
-              :input-value="session.state.dark"
-              hide-details
-              class="mt-0"
-              density="compact"
-              :label="t('darkMode')"
-              color="white"
-              @change="() => session.switchDark(!session.state.dark)"
-            />
-          </v-list-item-title>
-        </v-list-item>
-
         <!-- logout button -->
         <v-divider />
         <v-list-item
@@ -219,23 +197,16 @@ en:
 </i18n>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
+import { computed, toRefs, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useSession } from '@data-fair/lib-vue/session.js'
 import { useTheme } from 'vuetify'
 import UserAvatar from './user-avatar.vue'
-import { mdiAlert, mdiShieldAlert, mdiLogout, mdiAccountSwitchOutline, mdiWeatherNight } from '@mdi/js'
+import { mdiAlert, mdiShieldAlert, mdiLogout, mdiAccountSwitchOutline } from '@mdi/js'
 
 const theme = useTheme()
 const session = useSession()
 
-defineProps({
-  darkModeSwitch: {
-    type: Boolean,
-    default: false
-  }
-})
-
 const { t } = useI18n({ useScope: 'local' })
 const { user, account } = toRefs(session.state)
 const switchableOrganizations = computed(() => {

package/personal-menu.vue.d.ts

@@ -6,19 +6,7 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    darkModeSwitch: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    darkModeSwitch: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    darkModeSwitch: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/personal-menu.vue.js

@@ -4,16 +4,10 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from '@data-fair/lib-vue/session.js';
 import { useTheme } from 'vuetify';
 import UserAvatar from './user-avatar.vue';
-import { mdiAlert, mdiShieldAlert, mdiLogout, mdiAccountSwitchOutline, mdiWeatherNight } from '@mdi/js';
+import { mdiAlert, mdiShieldAlert, mdiLogout, mdiAccountSwitchOutline } from '@mdi/js';
 const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
 const theme = useTheme();
 const session = useSession();
-const __VLS_props = defineProps({
-    darkModeSwitch: {
-        type: Boolean,
-        default: false
-    }
-});
 const { t } = useI18n({ useScope: 'local' });
 const { user, account } = toRefs(session.state);
 const switchableOrganizations = computed(() => {
@@ -22,14 +16,7 @@ const switchableOrganizations = computed(() => {
         return;
     return user.organizations.filter(o => account.type === 'user' || account.id !== o.id || (account.department || null) !== (o.department || null));
 });
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    props: {
-        darkModeSwitch: {
-            type: Boolean,
-            default: false
-        }
-    },
-});
+const __VLS_fnComponent = (await import('vue')).defineComponent({});
 ;
 let __VLS_functionalComponentProps;
 function __VLS_template() {
@@ -95,8 +82,8 @@ function __VLS_template() {
         const __VLS_35 = __VLS_resolvedLocalAndGlobalComponents.VList;
         /** @type { [typeof __VLS_components.VList, typeof __VLS_components.vList, typeof __VLS_components.VList, typeof __VLS_components.vList, ] } */
         // @ts-ignore
-        const __VLS_36 = __VLS_asFunctionalComponent(__VLS_35, new __VLS_35({ outlined: (true), ...{ class: ("py-0") }, }));
-        const __VLS_37 = __VLS_36({ outlined: (true), ...{ class: ("py-0") }, }, ...__VLS_functionalComponentArgsRest(__VLS_36));
+        const __VLS_36 = __VLS_asFunctionalComponent(__VLS_35, new __VLS_35({ outlined: (true), ...{ class: ("py-0 border-sm") }, }));
+        const __VLS_37 = __VLS_36({ outlined: (true), ...{ class: ("py-0 border-sm") }, }, ...__VLS_functionalComponentArgsRest(__VLS_36));
         const __VLS_41 = __VLS_resolvedLocalAndGlobalComponents.VListItem;
         /** @type { [typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, ] } */
         // @ts-ignore
@@ -279,8 +266,8 @@ function __VLS_template() {
                 const __VLS_155 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
                 /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
                 // @ts-ignore
-                const __VLS_156 = __VLS_asFunctionalComponent(__VLS_155, new __VLS_155({ icon: ((__VLS_ctx.mdiShieldAlert)), }));
-                const __VLS_157 = __VLS_156({ icon: ((__VLS_ctx.mdiShieldAlert)), }, ...__VLS_functionalComponentArgsRest(__VLS_156));
+                const __VLS_156 = __VLS_asFunctionalComponent(__VLS_155, new __VLS_155({ icon: ((__VLS_ctx.mdiShieldAlert)), color: ("admin"), }));
+                const __VLS_157 = __VLS_156({ icon: ((__VLS_ctx.mdiShieldAlert)), color: ("admin"), }, ...__VLS_functionalComponentArgsRest(__VLS_156));
             }
             const __VLS_161 = __VLS_resolvedLocalAndGlobalComponents.VListItemTitle;
             /** @type { [typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, ] } */
@@ -290,11 +277,17 @@ function __VLS_template() {
             const __VLS_167 = __VLS_resolvedLocalAndGlobalComponents.VSwitch;
             /** @type { [typeof __VLS_components.VSwitch, typeof __VLS_components.vSwitch, ] } */
             // @ts-ignore
-            const __VLS_168 = __VLS_asFunctionalComponent(__VLS_167, new __VLS_167({ ...{ 'onChange': {} }, modelValue: ((__VLS_ctx.user.adminMode)), color: ("admin"), hideDetails: (true), ...{ class: ("mt-0") }, density: ("compact"), label: ((__VLS_ctx.t('adminMode'))), }));
-            const __VLS_169 = __VLS_168({ ...{ 'onChange': {} }, modelValue: ((__VLS_ctx.user.adminMode)), color: ("admin"), hideDetails: (true), ...{ class: ("mt-0") }, density: ("compact"), label: ((__VLS_ctx.t('adminMode'))), }, ...__VLS_functionalComponentArgsRest(__VLS_168));
+            const __VLS_168 = __VLS_asFunctionalComponent(__VLS_167, new __VLS_167({ ...{ 'onChange': {} }, modelValue: ((!!__VLS_ctx.user.adminMode)), color: ("admin"), hideDetails: (true), ...{ class: ("mt-0") }, density: ("compact"), label: ((__VLS_ctx.t('adminMode'))), }));
+            const __VLS_169 = __VLS_168({ ...{ 'onChange': {} }, modelValue: ((!!__VLS_ctx.user.adminMode)), color: ("admin"), hideDetails: (true), ...{ class: ("mt-0") }, density: ("compact"), label: ((__VLS_ctx.t('adminMode'))), }, ...__VLS_functionalComponentArgsRest(__VLS_168));
             let __VLS_173;
             const __VLS_174 = {
-                onChange: (__VLS_ctx.session.setAdminMode)
+                onChange: (...[$event]) => {
+                    if (!(!((!__VLS_ctx.user || !__VLS_ctx.account))))
+                        return;
+                    if (!((__VLS_ctx.user.isAdmin)))
+                        return;
+                    __VLS_ctx.session.setAdminMode(!__VLS_ctx.user.adminMode);
+                }
             };
             let __VLS_170;
             let __VLS_171;
@@ -340,74 +333,38 @@ function __VLS_template() {
             const __VLS_194 = __VLS_pickFunctionalComponentCtx(__VLS_189, __VLS_191);
             const __VLS_180 = __VLS_pickFunctionalComponentCtx(__VLS_175, __VLS_177);
         }
-        if (__VLS_ctx.darkModeSwitch) {
-            const __VLS_195 = __VLS_resolvedLocalAndGlobalComponents.VListItem;
-            /** @type { [typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, ] } */
-            // @ts-ignore
-            const __VLS_196 = __VLS_asFunctionalComponent(__VLS_195, new __VLS_195({ density: ("compact"), ...{ class: ("personal-menu-switch-list-item") }, }));
-            const __VLS_197 = __VLS_196({ density: ("compact"), ...{ class: ("personal-menu-switch-list-item") }, }, ...__VLS_functionalComponentArgsRest(__VLS_196));
-            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-            {
-                const { prepend: __VLS_thisSlot } = __VLS_nonNullable(__VLS_200.slots);
-                const __VLS_201 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
-                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
-                // @ts-ignore
-                const __VLS_202 = __VLS_asFunctionalComponent(__VLS_201, new __VLS_201({ icon: ((__VLS_ctx.mdiWeatherNight)), }));
-                const __VLS_203 = __VLS_202({ icon: ((__VLS_ctx.mdiWeatherNight)), }, ...__VLS_functionalComponentArgsRest(__VLS_202));
-            }
-            const __VLS_207 = __VLS_resolvedLocalAndGlobalComponents.VListItemTitle;
-            /** @type { [typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, ] } */
-            // @ts-ignore
-            const __VLS_208 = __VLS_asFunctionalComponent(__VLS_207, new __VLS_207({}));
-            const __VLS_209 = __VLS_208({}, ...__VLS_functionalComponentArgsRest(__VLS_208));
-            const __VLS_213 = __VLS_resolvedLocalAndGlobalComponents.VSwitch;
-            /** @type { [typeof __VLS_components.VSwitch, typeof __VLS_components.vSwitch, ] } */
-            // @ts-ignore
-            const __VLS_214 = __VLS_asFunctionalComponent(__VLS_213, new __VLS_213({ ...{ 'onChange': {} }, inputValue: ((__VLS_ctx.session.state.dark)), hideDetails: (true), ...{ class: ("mt-0") }, density: ("compact"), label: ((__VLS_ctx.t('darkMode'))), color: ("white"), }));
-            const __VLS_215 = __VLS_214({ ...{ 'onChange': {} }, inputValue: ((__VLS_ctx.session.state.dark)), hideDetails: (true), ...{ class: ("mt-0") }, density: ("compact"), label: ((__VLS_ctx.t('darkMode'))), color: ("white"), }, ...__VLS_functionalComponentArgsRest(__VLS_214));
-            let __VLS_219;
-            const __VLS_220 = {
-                onChange: (() => __VLS_ctx.session.switchDark(!__VLS_ctx.session.state.dark))
-            };
-            let __VLS_216;
-            let __VLS_217;
-            const __VLS_218 = __VLS_pickFunctionalComponentCtx(__VLS_213, __VLS_215);
-            __VLS_nonNullable(__VLS_212.slots).default;
-            const __VLS_212 = __VLS_pickFunctionalComponentCtx(__VLS_207, __VLS_209);
-            const __VLS_200 = __VLS_pickFunctionalComponentCtx(__VLS_195, __VLS_197);
-        }
-        const __VLS_221 = __VLS_resolvedLocalAndGlobalComponents.VDivider;
+        const __VLS_195 = __VLS_resolvedLocalAndGlobalComponents.VDivider;
         /** @type { [typeof __VLS_components.VDivider, typeof __VLS_components.vDivider, ] } */
         // @ts-ignore
-        const __VLS_222 = __VLS_asFunctionalComponent(__VLS_221, new __VLS_221({}));
-        const __VLS_223 = __VLS_222({}, ...__VLS_functionalComponentArgsRest(__VLS_222));
-        const __VLS_227 = __VLS_resolvedLocalAndGlobalComponents.VListItem;
+        const __VLS_196 = __VLS_asFunctionalComponent(__VLS_195, new __VLS_195({}));
+        const __VLS_197 = __VLS_196({}, ...__VLS_functionalComponentArgsRest(__VLS_196));
+        const __VLS_201 = __VLS_resolvedLocalAndGlobalComponents.VListItem;
         /** @type { [typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, ] } */
         // @ts-ignore
-        const __VLS_228 = __VLS_asFunctionalComponent(__VLS_227, new __VLS_227({ ...{ 'onClick': {} }, }));
-        const __VLS_229 = __VLS_228({ ...{ 'onClick': {} }, }, ...__VLS_functionalComponentArgsRest(__VLS_228));
-        let __VLS_233;
-        const __VLS_234 = {
+        const __VLS_202 = __VLS_asFunctionalComponent(__VLS_201, new __VLS_201({ ...{ 'onClick': {} }, }));
+        const __VLS_203 = __VLS_202({ ...{ 'onClick': {} }, }, ...__VLS_functionalComponentArgsRest(__VLS_202));
+        let __VLS_207;
+        const __VLS_208 = {
             onClick: (() => __VLS_ctx.session.logout())
         };
-        let __VLS_230;
-        let __VLS_231;
+        let __VLS_204;
+        let __VLS_205;
         __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
         {
-            const { prepend: __VLS_thisSlot } = __VLS_nonNullable(__VLS_232.slots);
-            const __VLS_235 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
+            const { prepend: __VLS_thisSlot } = __VLS_nonNullable(__VLS_206.slots);
+            const __VLS_209 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
             /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
             // @ts-ignore
-            const __VLS_236 = __VLS_asFunctionalComponent(__VLS_235, new __VLS_235({ icon: ((__VLS_ctx.mdiLogout)), }));
-            const __VLS_237 = __VLS_236({ icon: ((__VLS_ctx.mdiLogout)), }, ...__VLS_functionalComponentArgsRest(__VLS_236));
+            const __VLS_210 = __VLS_asFunctionalComponent(__VLS_209, new __VLS_209({ icon: ((__VLS_ctx.mdiLogout)), }));
+            const __VLS_211 = __VLS_210({ icon: ((__VLS_ctx.mdiLogout)), }, ...__VLS_functionalComponentArgsRest(__VLS_210));
         }
-        const __VLS_241 = __VLS_resolvedLocalAndGlobalComponents.VListItemTitle;
+        const __VLS_215 = __VLS_resolvedLocalAndGlobalComponents.VListItemTitle;
         /** @type { [typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, ] } */
         // @ts-ignore
-        const __VLS_242 = __VLS_asFunctionalComponent(__VLS_241, new __VLS_241({}));
-        const __VLS_243 = __VLS_242({}, ...__VLS_functionalComponentArgsRest(__VLS_242));
+        const __VLS_216 = __VLS_asFunctionalComponent(__VLS_215, new __VLS_215({}));
+        const __VLS_217 = __VLS_216({}, ...__VLS_functionalComponentArgsRest(__VLS_216));
         __VLS_directiveAsFunction(__VLS_directives.vT)(null, { ...__VLS_directiveBindingRestFields, value: ('logout') }, null, null);
-        const __VLS_232 = __VLS_pickFunctionalComponentCtx(__VLS_227, __VLS_229);
+        const __VLS_206 = __VLS_pickFunctionalComponentCtx(__VLS_201, __VLS_203);
         __VLS_nonNullable(__VLS_40.slots).default;
         const __VLS_40 = __VLS_pickFunctionalComponentCtx(__VLS_35, __VLS_37);
         const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
@@ -417,14 +374,13 @@ function __VLS_template() {
     __VLS_styleScopedClasses['personal-menu'];
     __VLS_styleScopedClasses['px-0'];
     __VLS_styleScopedClasses['py-0'];
+    __VLS_styleScopedClasses['border-sm'];
     __VLS_styleScopedClasses['text--secondary'];
     __VLS_styleScopedClasses['justify-center'];
     __VLS_styleScopedClasses['ma-0'];
     __VLS_styleScopedClasses['mb-2'];
     __VLS_styleScopedClasses['personal-menu-switch-list-item'];
     __VLS_styleScopedClasses['mt-0'];
-    __VLS_styleScopedClasses['personal-menu-switch-list-item'];
-    __VLS_styleScopedClasses['mt-0'];
     var __VLS_slots;
     var __VLS_inheritedAttrs;
     const __VLS_refs = {};
@@ -444,7 +400,6 @@ const __VLS_self = (await import('vue')).defineComponent({
             mdiShieldAlert: mdiShieldAlert,
             mdiLogout: mdiLogout,
             mdiAccountSwitchOutline: mdiAccountSwitchOutline,
-            mdiWeatherNight: mdiWeatherNight,
             theme: theme,
             session: session,
             t: t,
@@ -453,23 +408,11 @@ const __VLS_self = (await import('vue')).defineComponent({
             switchableOrganizations: switchableOrganizations,
         };
     },
-    props: {
-        darkModeSwitch: {
-            type: Boolean,
-            default: false
-        }
-    },
 });
 const __VLS_component = (await import('vue')).defineComponent({
     setup() {
         return {};
     },
-    props: {
-        darkModeSwitch: {
-            type: Boolean,
-            default: false
-        }
-    },
 });
 export default {};
 ;

package/theme-switcher.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-toolbar-items class="theme-switcher" v-if="session.fullSite.value?.theme.dark || session.fullSite.value?.theme.hc">
+    <v-menu
+      offset-y
+      nudge-left
+    >
+      <template #activator="{props: activatorProps}">
+        <v-btn
+          class="px-0"
+          :icon="mdiThemeLightDark"
+          :title="t('themeSwitch')"
+          v-bind="activatorProps"
+        />
+      </template>
+
+      <v-list class="border-sm">
+        <v-list-item density="compact" class="pl-0">
+          <v-radio-group
+            :model-value="session.theme.value"
+            density="comfortable"
+            color="primary"
+            hide-details
+            :label="t('themeSwitch')"
+            @update:modelValue="value => session.switchTheme(value as 'default' | 'dark' | 'hc')"
+          >
+            <v-radio :label="t('theme.default')" value="default"></v-radio>
+            <v-radio :label="t('theme.dark')" value="dark"></v-radio>
+            <v-radio :label="t('theme.hc')" value="hc"></v-radio>
+          </v-radio-group>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </v-toolbar-items>
+</template>
+
+<i18n lang="yaml">
+fr:
+  themeSwitch: Changer de thème
+  theme:
+    default: par défaut
+    dark: sombre
+    hc: contraste élevé
+en:
+  themeSwitch: Change theme
+  theme:
+    default: default
+    dark: dark
+    hc: high contrast
+</i18n>
+
+<script setup lang="ts">
+import { useSession } from '@data-fair/lib-vue/session.js'
+import { useI18n } from 'vue-i18n'
+import { mdiThemeLightDark } from '@mdi/js'
+
+
+const session = useSession()
+
+const { t } = useI18n({ useScope: 'local' })
+</script>
+
+<style>
+
+</style>

package/theme-switcher.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/theme-switcher.vue.js

@@ -0,0 +1,125 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { useSession } from '@data-fair/lib-vue/session.js';
+import { useI18n } from 'vue-i18n';
+import { mdiThemeLightDark } from '@mdi/js';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const session = useSession();
+const { t } = useI18n({ useScope: 'local' });
+const __VLS_fnComponent = (await import('vue')).defineComponent({});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    if (__VLS_ctx.session.fullSite.value?.theme.dark || __VLS_ctx.session.fullSite.value?.theme.hc) {
+        const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VToolbarItems;
+        /** @type { [typeof __VLS_components.VToolbarItems, typeof __VLS_components.vToolbarItems, typeof __VLS_components.VToolbarItems, typeof __VLS_components.vToolbarItems, ] } */
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ("theme-switcher") }, }));
+        const __VLS_2 = __VLS_1({ ...{ class: ("theme-switcher") }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VMenu;
+        /** @type { [typeof __VLS_components.VMenu, typeof __VLS_components.vMenu, typeof __VLS_components.VMenu, typeof __VLS_components.vMenu, ] } */
+        // @ts-ignore
+        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ offsetY: (true), nudgeLeft: (true), }));
+        const __VLS_8 = __VLS_7({ offsetY: (true), nudgeLeft: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { activator: __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+            const { props: activatorProps } = __VLS_getSlotParam(__VLS_thisSlot);
+            const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VBtn;
+            /** @type { [typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, ] } */
+            // @ts-ignore
+            const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ class: ("px-0") }, icon: ((__VLS_ctx.mdiThemeLightDark)), title: ((__VLS_ctx.t('themeSwitch'))), ...(activatorProps), }));
+            const __VLS_14 = __VLS_13({ ...{ class: ("px-0") }, icon: ((__VLS_ctx.mdiThemeLightDark)), title: ((__VLS_ctx.t('themeSwitch'))), ...(activatorProps), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+        }
+        const __VLS_18 = __VLS_resolvedLocalAndGlobalComponents.VList;
+        /** @type { [typeof __VLS_components.VList, typeof __VLS_components.vList, typeof __VLS_components.VList, typeof __VLS_components.vList, ] } */
+        // @ts-ignore
+        const __VLS_19 = __VLS_asFunctionalComponent(__VLS_18, new __VLS_18({ ...{ class: ("border-sm") }, }));
+        const __VLS_20 = __VLS_19({ ...{ class: ("border-sm") }, }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+        const __VLS_24 = __VLS_resolvedLocalAndGlobalComponents.VListItem;
+        /** @type { [typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, ] } */
+        // @ts-ignore
+        const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({ density: ("compact"), ...{ class: ("pl-0") }, }));
+        const __VLS_26 = __VLS_25({ density: ("compact"), ...{ class: ("pl-0") }, }, ...__VLS_functionalComponentArgsRest(__VLS_25));
+        const __VLS_30 = __VLS_resolvedLocalAndGlobalComponents.VRadioGroup;
+        /** @type { [typeof __VLS_components.VRadioGroup, typeof __VLS_components.vRadioGroup, typeof __VLS_components.VRadioGroup, typeof __VLS_components.vRadioGroup, ] } */
+        // @ts-ignore
+        const __VLS_31 = __VLS_asFunctionalComponent(__VLS_30, new __VLS_30({ ...{ 'onUpdate:modelValue': {} }, modelValue: ((__VLS_ctx.session.theme.value)), density: ("comfortable"), color: ("primary"), hideDetails: (true), label: ((__VLS_ctx.t('themeSwitch'))), }));
+        const __VLS_32 = __VLS_31({ ...{ 'onUpdate:modelValue': {} }, modelValue: ((__VLS_ctx.session.theme.value)), density: ("comfortable"), color: ("primary"), hideDetails: (true), label: ((__VLS_ctx.t('themeSwitch'))), }, ...__VLS_functionalComponentArgsRest(__VLS_31));
+        let __VLS_36;
+        const __VLS_37 = {
+            'onUpdate:modelValue': (value => __VLS_ctx.session.switchTheme(value))
+        };
+        let __VLS_33;
+        let __VLS_34;
+        const __VLS_38 = __VLS_resolvedLocalAndGlobalComponents.VRadio;
+        /** @type { [typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, ] } */
+        // @ts-ignore
+        const __VLS_39 = __VLS_asFunctionalComponent(__VLS_38, new __VLS_38({ label: ((__VLS_ctx.t('theme.default'))), value: ("default"), }));
+        const __VLS_40 = __VLS_39({ label: ((__VLS_ctx.t('theme.default'))), value: ("default"), }, ...__VLS_functionalComponentArgsRest(__VLS_39));
+        const __VLS_44 = __VLS_resolvedLocalAndGlobalComponents.VRadio;
+        /** @type { [typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, ] } */
+        // @ts-ignore
+        const __VLS_45 = __VLS_asFunctionalComponent(__VLS_44, new __VLS_44({ label: ((__VLS_ctx.t('theme.dark'))), value: ("dark"), }));
+        const __VLS_46 = __VLS_45({ label: ((__VLS_ctx.t('theme.dark'))), value: ("dark"), }, ...__VLS_functionalComponentArgsRest(__VLS_45));
+        const __VLS_50 = __VLS_resolvedLocalAndGlobalComponents.VRadio;
+        /** @type { [typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, ] } */
+        // @ts-ignore
+        const __VLS_51 = __VLS_asFunctionalComponent(__VLS_50, new __VLS_50({ label: ((__VLS_ctx.t('theme.hc'))), value: ("hc"), }));
+        const __VLS_52 = __VLS_51({ label: ((__VLS_ctx.t('theme.hc'))), value: ("hc"), }, ...__VLS_functionalComponentArgsRest(__VLS_51));
+        __VLS_nonNullable(__VLS_35.slots).default;
+        const __VLS_35 = __VLS_pickFunctionalComponentCtx(__VLS_30, __VLS_32);
+        __VLS_nonNullable(__VLS_29.slots).default;
+        const __VLS_29 = __VLS_pickFunctionalComponentCtx(__VLS_24, __VLS_26);
+        __VLS_nonNullable(__VLS_23.slots).default;
+        const __VLS_23 = __VLS_pickFunctionalComponentCtx(__VLS_18, __VLS_20);
+        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    }
+    __VLS_styleScopedClasses['theme-switcher'];
+    __VLS_styleScopedClasses['px-0'];
+    __VLS_styleScopedClasses['border-sm'];
+    __VLS_styleScopedClasses['pl-0'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    return {
+        slots: __VLS_slots,
+        refs: $refs,
+        attrs: {},
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            mdiThemeLightDark: mdiThemeLightDark,
+            session: session,
+            t: t,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+;
+//# sourceMappingURL=theme-switcher.vue.js.map