@data-fair/lib-vuetify 1.4.1 → 1.5.1

package/index.d.ts

@@ -1,4 +1,5 @@
 import { type Session } from '@data-fair/lib-vue/session.js';
 import { VuetifyOptions } from 'vuetify';
 export declare function vuetifySessionOptions(session: Session): VuetifyOptions;
+export declare function vuetifySessionStyle(session: Session): string;
 export declare function defaultOptions(searchParams: Record<string, string>, darkCookie?: boolean, locale?: string): VuetifyOptions;

package/index.js

@@ -14,6 +14,7 @@ const baseDarkColors = {
   success: '#00E676' // green.accent3
 }
 export function vuetifySessionOptions (session) {
+  if (!session.site.value) { throw new Error('vuetifySessionOptions requires fething site info in session util') }
   const colors = { ...baseColors, ...session.site.value?.colors }
   return {
     ssr: false,
@@ -26,23 +27,44 @@ export function vuetifySessionOptions (session) {
       themes: {
         light: {
           dark: false,
-          colors
+          colors,
+          variables: {
+            // deactivate automatic partial transparencies
+            // best to control colors precisely and ensure sufficient contrast for readability
+            'high-emphasis-opacity': 1,
+            'medium-emphasis-opacity': 0.87
+          }
         }
       }
     },
     defaults: {
+      global: {
+        // the default density is way too low
+        density: 'comfortable'
+      },
       VCard: {
-        // grey outlined card by default
-        variant: 'outlined',
-        // TODO: replace this with a cleaner border-opacity prop https://vuetifyjs.com/en/styles/borders/#theme-colors ?
-        style: 'border-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !important;'
+        // white card with light grey border by default
+        variant: 'elevated',
+        elevation: 0,
+        border: 'sm'
       }
     }
   }
 }
+export function vuetifySessionStyle (session) {
+  if (!session.site.value) { throw new Error('vuetifySectionStyle requires fething site info in session util') }
+  return `
+.v-application .text-primary!important {
+  color: ${session.site.value.colors['text-primary']};
+}
+.v-application .text-secondary!important {
+  color: ${session.site.value.colors['text-secondary']};
+}
+  `
+}
 // TODO: deprecate this in favor of sessionVuetifyOptions
 export function defaultOptions (searchParams, darkCookie = false, locale = 'fr') {
-  console.warn('vuetify.defaultOptions is deprecated, use sessionVuetifyOptions')
+  // console.warn('vuetify.defaultOptions is deprecated, use vuetifySessionOptions')
   const dark = searchParams?.dark ? searchParams.dark === 'true' : darkCookie
   const searchParamsColors = {}
   for (const colorCode of ['primary', 'secondary']) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vuetify",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "Components based on the Vuetify 3 UI lib for the data-fair stack.",
   "main": "index.js",
   "files": [
@@ -16,7 +16,7 @@
     "build": "cd .. && npm run build"
   },
   "peerDependencies": {
-    "@data-fair/lib-vue": "^1.9.0",
+    "@data-fair/lib-vue": "^1.9.3",
     "ofetch": "1",
     "vue-i18n": "10",
     "vuetify": "3"

package/user-avatar.vue

@@ -8,33 +8,33 @@
       class="primary-avatar"
       :size="36"
     >
-      <img
+      <v-img
         :src="userAvatarUrl"
         aria-hidden
         alt=""
-      >
+      />
     </v-avatar>
     <v-avatar
       v-else
       class="primary-avatar"
       :size="36"
     >
-      <img
+      <v-img
         :src="accountAvatarUrl"
         aria-hidden
         alt=""
-      >
+      />
     </v-avatar>
     <v-avatar
       v-if="showSecondAvatar"
       class="secondary-avatar"
       :size="28"
     >
-      <img
+      <v-img
         :src="userAvatarUrl"
         aria-hidden
         alt=""
-      >
+      />
     </v-avatar>
   </div>
 </template>

package/user-avatar.vue.js

@@ -48,29 +48,41 @@ function __VLS_template() {
         // @ts-ignore
         const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ("primary-avatar") }, size: ((36)), }));
         const __VLS_2 = __VLS_1({ ...{ class: ("primary-avatar") }, size: ((36)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), });
+        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VImg;
+        /** @type { [typeof __VLS_components.VImg, typeof __VLS_components.vImg, ] } */
+        // @ts-ignore
+        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), }));
+        const __VLS_8 = __VLS_7({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
         __VLS_nonNullable(__VLS_5.slots).default;
         const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
     }
     else {
-        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
+        const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
         /** @type { [typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, ] } */
         // @ts-ignore
-        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ class: ("primary-avatar") }, size: ((36)), }));
-        const __VLS_8 = __VLS_7({ ...{ class: ("primary-avatar") }, size: ((36)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
-        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.accountAvatarUrl)), "aria-hidden": (true), alt: (""), });
-        __VLS_nonNullable(__VLS_11.slots).default;
-        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+        const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ class: ("primary-avatar") }, size: ((36)), }));
+        const __VLS_14 = __VLS_13({ ...{ class: ("primary-avatar") }, size: ((36)), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+        const __VLS_18 = __VLS_resolvedLocalAndGlobalComponents.VImg;
+        /** @type { [typeof __VLS_components.VImg, typeof __VLS_components.vImg, ] } */
+        // @ts-ignore
+        const __VLS_19 = __VLS_asFunctionalComponent(__VLS_18, new __VLS_18({ src: ((__VLS_ctx.accountAvatarUrl)), "aria-hidden": (true), alt: (""), }));
+        const __VLS_20 = __VLS_19({ src: ((__VLS_ctx.accountAvatarUrl)), "aria-hidden": (true), alt: (""), }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+        __VLS_nonNullable(__VLS_17.slots).default;
+        const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
     }
     if (__VLS_ctx.showSecondAvatar) {
-        const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
+        const __VLS_24 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
         /** @type { [typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, ] } */
         // @ts-ignore
-        const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ class: ("secondary-avatar") }, size: ((28)), }));
-        const __VLS_14 = __VLS_13({ ...{ class: ("secondary-avatar") }, size: ((28)), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
-        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), });
-        __VLS_nonNullable(__VLS_17.slots).default;
-        const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
+        const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({ ...{ class: ("secondary-avatar") }, size: ((28)), }));
+        const __VLS_26 = __VLS_25({ ...{ class: ("secondary-avatar") }, size: ((28)), }, ...__VLS_functionalComponentArgsRest(__VLS_25));
+        const __VLS_30 = __VLS_resolvedLocalAndGlobalComponents.VImg;
+        /** @type { [typeof __VLS_components.VImg, typeof __VLS_components.vImg, ] } */
+        // @ts-ignore
+        const __VLS_31 = __VLS_asFunctionalComponent(__VLS_30, new __VLS_30({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), }));
+        const __VLS_32 = __VLS_31({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), }, ...__VLS_functionalComponentArgsRest(__VLS_31));
+        __VLS_nonNullable(__VLS_29.slots).default;
+        const __VLS_29 = __VLS_pickFunctionalComponentCtx(__VLS_24, __VLS_26);
     }
     __VLS_styleScopedClasses['sd-avatar'];
     __VLS_styleScopedClasses['has-secondary-avatar'];