@data-fair/lib-vuetify 1.11.0 → 1.12.0

package/navigation-right.vue

@@ -1,35 +1,58 @@
 <template>
+  <!-- Right-side navigation drawer for larger screens -->
   <v-navigation-drawer
     v-if="display.lgAndUp.value"
-    class="navigation-right-drawer pl-2"
+    color="background"
+    class="pt-6"
     location="right"
     permanent
     floating
-    position="fixed"
-    color="surface"
-    style="padding-top: 60px; background-color: transparent;"
   >
-    <slot />
+    <template #default>
+      <v-list
+        data-iframe-height
+        bg-color="background"
+        density="compact"
+      >
+        <v-defaults-provider :defaults="{ VListItem: { rounded: true } }">
+          <slot />
+        </v-defaults-provider>
+      </v-list>
+    </template>
   </v-navigation-drawer>
-  <div
+
+  <!-- Floating action button for smaller screens -->
+  <v-fab
     v-else
-    class="navigation-right-button mt-4"
+    size="small"
+    color="primary"
+    location="top right"
+    app
+    icon
   >
+    <v-icon
+      :icon="mdiDotsVertical"
+    />
     <v-menu
-      location="bottom left"
+      activator="parent"
       :close-on-content-click="false"
     >
-      <template #activator="{ props }">
-        <v-btn
-          v-bind="props"
-          size="small"
-          color="primary"
-          :icon="mdiDotsVertical"
-        />
-      </template>
-      <slot />
+      <v-card
+        max-width="300"
+        class="mt-2"
+      >
+        <v-list
+          data-iframe-height
+          bg-color="background"
+          density="compact"
+        >
+          <v-defaults-provider :defaults="{ VListItem: { rounded: true } }">
+            <slot />
+          </v-defaults-provider>
+        </v-list>
+      </v-card>
     </v-menu>
-  </div>
+  </v-fab>
 </template>
 
 <script setup lang="ts">
@@ -39,11 +62,3 @@ import { useDisplay } from 'vuetify'
 const display = useDisplay()
 
 </script>
-
-<style>
-.navigation-right-button {
-  z-index: 1000;
-  position: fixed;
-  right: 20px;
-}
-</style>

package/navigation-right.vue.js

@@ -20,43 +20,79 @@ function __VLS_template() {
     };
     let __VLS_directives;
     let __VLS_styleScopedClasses;
-    // CSS variable injection 
-    // CSS variable injection end 
     let __VLS_resolvedLocalAndGlobalComponents;
     if (__VLS_ctx.display.lgAndUp.value) {
         const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VNavigationDrawer;
         /** @type { [typeof __VLS_components.VNavigationDrawer, typeof __VLS_components.vNavigationDrawer, typeof __VLS_components.VNavigationDrawer, typeof __VLS_components.vNavigationDrawer, ] } */
         // @ts-ignore
-        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ("navigation-right-drawer pl-2") }, location: ("right"), permanent: (true), floating: (true), position: ("fixed"), color: ("surface"), ...{ style: ({}) }, }));
-        const __VLS_2 = __VLS_1({ ...{ class: ("navigation-right-drawer pl-2") }, location: ("right"), permanent: (true), floating: (true), position: ("fixed"), color: ("surface"), ...{ style: ({}) }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-        var __VLS_6 = {};
-        __VLS_nonNullable(__VLS_5.slots).default;
+        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ color: ("background"), ...{ class: ("pt-6") }, location: ("right"), permanent: (true), floating: (true), }));
+        const __VLS_2 = __VLS_1({ color: ("background"), ...{ class: ("pt-6") }, location: ("right"), permanent: (true), floating: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { default: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
+            const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VList;
+            /** @type { [typeof __VLS_components.VList, typeof __VLS_components.vList, typeof __VLS_components.VList, typeof __VLS_components.vList, ] } */
+            // @ts-ignore
+            const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ dataIframeHeight: (true), bgColor: ("background"), density: ("compact"), }));
+            const __VLS_8 = __VLS_7({ dataIframeHeight: (true), bgColor: ("background"), density: ("compact"), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+            const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VDefaultsProvider;
+            /** @type { [typeof __VLS_components.VDefaultsProvider, typeof __VLS_components.vDefaultsProvider, typeof __VLS_components.VDefaultsProvider, typeof __VLS_components.vDefaultsProvider, ] } */
+            // @ts-ignore
+            const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ defaults: (({ VListItem: { rounded: true } })), }));
+            const __VLS_14 = __VLS_13({ defaults: (({ VListItem: { rounded: true } })), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+            var __VLS_18 = {};
+            __VLS_nonNullable(__VLS_17.slots).default;
+            const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
+            __VLS_nonNullable(__VLS_11.slots).default;
+            const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+        }
         const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
     }
     else {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("navigation-right-button mt-4") }, });
-        const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.VMenu;
+        const __VLS_19 = __VLS_resolvedLocalAndGlobalComponents.VFab;
+        /** @type { [typeof __VLS_components.VFab, typeof __VLS_components.vFab, typeof __VLS_components.VFab, typeof __VLS_components.vFab, ] } */
+        // @ts-ignore
+        const __VLS_20 = __VLS_asFunctionalComponent(__VLS_19, new __VLS_19({ size: ("small"), color: ("primary"), location: ("top right"), app: (true), icon: (true), }));
+        const __VLS_21 = __VLS_20({ size: ("small"), color: ("primary"), location: ("top right"), app: (true), icon: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_20));
+        const __VLS_25 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
+        /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+        // @ts-ignore
+        const __VLS_26 = __VLS_asFunctionalComponent(__VLS_25, new __VLS_25({ icon: ((__VLS_ctx.mdiDotsVertical)), }));
+        const __VLS_27 = __VLS_26({ icon: ((__VLS_ctx.mdiDotsVertical)), }, ...__VLS_functionalComponentArgsRest(__VLS_26));
+        const __VLS_31 = __VLS_resolvedLocalAndGlobalComponents.VMenu;
         /** @type { [typeof __VLS_components.VMenu, typeof __VLS_components.vMenu, typeof __VLS_components.VMenu, typeof __VLS_components.vMenu, ] } */
         // @ts-ignore
-        const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ location: ("bottom left"), closeOnContentClick: ((false)), }));
-        const __VLS_9 = __VLS_8({ location: ("bottom left"), closeOnContentClick: ((false)), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
-        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-        {
-            const { activator: __VLS_thisSlot } = __VLS_nonNullable(__VLS_12.slots);
-            const [{ props }] = __VLS_getSlotParams(__VLS_thisSlot);
-            const __VLS_13 = __VLS_resolvedLocalAndGlobalComponents.VBtn;
-            /** @type { [typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, ] } */
-            // @ts-ignore
-            const __VLS_14 = __VLS_asFunctionalComponent(__VLS_13, new __VLS_13({ ...(props), size: ("small"), color: ("primary"), icon: ((__VLS_ctx.mdiDotsVertical)), }));
-            const __VLS_15 = __VLS_14({ ...(props), size: ("small"), color: ("primary"), icon: ((__VLS_ctx.mdiDotsVertical)), }, ...__VLS_functionalComponentArgsRest(__VLS_14));
-        }
-        var __VLS_19 = {};
-        const __VLS_12 = __VLS_pickFunctionalComponentCtx(__VLS_7, __VLS_9);
+        const __VLS_32 = __VLS_asFunctionalComponent(__VLS_31, new __VLS_31({ activator: ("parent"), closeOnContentClick: ((false)), }));
+        const __VLS_33 = __VLS_32({ activator: ("parent"), closeOnContentClick: ((false)), }, ...__VLS_functionalComponentArgsRest(__VLS_32));
+        const __VLS_37 = __VLS_resolvedLocalAndGlobalComponents.VCard;
+        /** @type { [typeof __VLS_components.VCard, typeof __VLS_components.vCard, typeof __VLS_components.VCard, typeof __VLS_components.vCard, ] } */
+        // @ts-ignore
+        const __VLS_38 = __VLS_asFunctionalComponent(__VLS_37, new __VLS_37({ maxWidth: ("300"), ...{ class: ("mt-2") }, }));
+        const __VLS_39 = __VLS_38({ maxWidth: ("300"), ...{ class: ("mt-2") }, }, ...__VLS_functionalComponentArgsRest(__VLS_38));
+        const __VLS_43 = __VLS_resolvedLocalAndGlobalComponents.VList;
+        /** @type { [typeof __VLS_components.VList, typeof __VLS_components.vList, typeof __VLS_components.VList, typeof __VLS_components.vList, ] } */
+        // @ts-ignore
+        const __VLS_44 = __VLS_asFunctionalComponent(__VLS_43, new __VLS_43({ dataIframeHeight: (true), bgColor: ("background"), density: ("compact"), }));
+        const __VLS_45 = __VLS_44({ dataIframeHeight: (true), bgColor: ("background"), density: ("compact"), }, ...__VLS_functionalComponentArgsRest(__VLS_44));
+        const __VLS_49 = __VLS_resolvedLocalAndGlobalComponents.VDefaultsProvider;
+        /** @type { [typeof __VLS_components.VDefaultsProvider, typeof __VLS_components.vDefaultsProvider, typeof __VLS_components.VDefaultsProvider, typeof __VLS_components.vDefaultsProvider, ] } */
+        // @ts-ignore
+        const __VLS_50 = __VLS_asFunctionalComponent(__VLS_49, new __VLS_49({ defaults: (({ VListItem: { rounded: true } })), }));
+        const __VLS_51 = __VLS_50({ defaults: (({ VListItem: { rounded: true } })), }, ...__VLS_functionalComponentArgsRest(__VLS_50));
+        var __VLS_55 = {};
+        __VLS_nonNullable(__VLS_54.slots).default;
+        const __VLS_54 = __VLS_pickFunctionalComponentCtx(__VLS_49, __VLS_51);
+        __VLS_nonNullable(__VLS_48.slots).default;
+        const __VLS_48 = __VLS_pickFunctionalComponentCtx(__VLS_43, __VLS_45);
+        __VLS_nonNullable(__VLS_42.slots).default;
+        const __VLS_42 = __VLS_pickFunctionalComponentCtx(__VLS_37, __VLS_39);
+        __VLS_nonNullable(__VLS_36.slots).default;
+        const __VLS_36 = __VLS_pickFunctionalComponentCtx(__VLS_31, __VLS_33);
+        __VLS_nonNullable(__VLS_24.slots).default;
+        const __VLS_24 = __VLS_pickFunctionalComponentCtx(__VLS_19, __VLS_21);
     }
-    __VLS_styleScopedClasses['navigation-right-drawer'];
-    __VLS_styleScopedClasses['pl-2'];
-    __VLS_styleScopedClasses['navigation-right-button'];
-    __VLS_styleScopedClasses['mt-4'];
+    __VLS_styleScopedClasses['pt-6'];
+    __VLS_styleScopedClasses['mt-2'];
     var __VLS_slots;
     var __VLS_inheritedAttrs;
     const __VLS_refs = {};

package/package.json

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

package/style/global.scss

@@ -1,11 +1,17 @@
 @use 'vuetify' with (
   $color-pack: false,
-  $body-font-family: 'BodyFontFamily',
-  $heading-font-family: 'HeadingFontFamily'
+  $body-font-family: var(--d-body-font-family),
+  $heading-font-family: var(--d-heading-font-family)
 );
 
 // v-icon has an opacity when it is prepended in a list of items.
 // ref: https://github.com/vuetifyjs/vuetify/issues/18760
 .v-icon {
   --v-medium-emphasis-opacity: 1 !important;
+}
+
+// default font variables values provide retro-compatibility with the aliases we used before
+:root {
+  --d-body-font-family: BodyFontFamily;
+  --d-heading-font-family: HeadingFontFamily;
 }