@data-fair/lib-vuetify 1.0.0 → 1.1.0

package/auto-imports.js

@@ -0,0 +1,11 @@
+// made for https://github.com/unplugin/unplugin-auto-import
+import vueAutoImports from '@data-fair/lib-vue/auto-imports.js'
+export default [
+  ...vueAutoImports,
+  {
+    '@data-fair/lib-vuetify/personal-menu.vue': [['default', 'dfPersonalMenu']],
+    '@data-fair/lib-vuetify/tutorial-alert.vue': [['default', 'dfTutorialAlert']],
+    '@data-fair/lib-vuetify/user-avatar.vue': [['default', 'dfUserAvatar']]
+  }
+]
+// # sourceMappingURL=auto-imports.js.map

package/date-range-picker.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 
 const props = defineProps({

package/date-range-picker.vue.d.ts

@@ -1,11 +1,42 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    label?: string | undefined;
-    max?: string | undefined;
-    min?: string | undefined;
-    $props: {
-        readonly label?: string | undefined;
-        readonly max?: string | undefined;
-        readonly min?: string | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    min: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    max: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    min: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    max: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: string | undefined) => any) | undefined;
+}>, {
+    label: string;
+    max: string;
+    min: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/date-range-picker.vue.js

@@ -114,20 +114,33 @@ function __VLS_template() {
 const __VLS_self = (await import('vue')).defineComponent({
     setup() {
         return {
-            $props: __VLS_makeOptional(props),
-            ...props,
             model: model,
             start: start,
             end: end,
         };
     },
+    __typeEmits: {},
+    props: {
+        ...{},
+        ...{
+            min: { type: String, default: undefined },
+            max: { type: String, default: undefined },
+            label: { type: String, default: undefined }
+        },
+    },
 });
 export default (await import('vue')).defineComponent({
     setup() {
-        return {
-            $props: __VLS_makeOptional(props),
-            ...props,
-        };
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        ...{},
+        ...{
+            min: { type: String, default: undefined },
+            max: { type: String, default: undefined },
+            label: { type: String, default: undefined }
+        },
     },
 });
 ;

package/default.scss

@@ -0,0 +1,10 @@
+@use 'vuetify' with (
+  $color-pack: false,
+  $body-font-family: 'Nunito'
+);
+
+// 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;
+}

package/index.d.ts

@@ -1,2 +1,2 @@
 import { VuetifyOptions } from 'vuetify';
-export declare function defaultOptions(searchParams: Record<string, string>, darkCookie?: boolean): VuetifyOptions;
+export declare function defaultOptions(searchParams: Record<string, string>, darkCookie?: boolean, locale?: 'fr' | 'en'): VuetifyOptions;

package/index.js

@@ -13,7 +13,7 @@ const baseDarkColors = {
   primary: '#2196F3', // blue.base
   success: '#00E676' // green.accent3
 }
-export function defaultOptions (searchParams, darkCookie = false) {
+export function defaultOptions (searchParams, darkCookie = false, locale = 'fr') {
   const dark = searchParams?.dark ? searchParams.dark === 'true' : darkCookie
   const searchParamsColors = {}
   for (const colorCode of ['primary', 'secondary']) {
@@ -25,9 +25,9 @@ export function defaultOptions (searchParams, darkCookie = false) {
   return {
     ssr: false,
     locale: {
-      locale: 'fr',
+      locale,
       messages: { fr, en }
-    }, // TODO: sync this with the i18n locale
+    },
     theme: {
       defaultTheme,
       themes: {

package/owner-avatar.vue

@@ -17,7 +17,7 @@
   </v-tooltip>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
 const ownerProps = defineProps({

package/owner-avatar.vue.d.ts

@@ -1,7 +1,14 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    owner: Record<string, any>;
-    $props: {
-        readonly owner?: Record<string, any> | undefined;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    owner: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    owner: {
+        type: ObjectConstructor;
+        default: null;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {
+    owner: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/owner-avatar.vue.js

@@ -84,19 +84,26 @@ function __VLS_template() {
 const __VLS_self = (await import('vue')).defineComponent({
     setup() {
         return {
-            $props: __VLS_makeOptional(ownerProps),
-            ...ownerProps,
             avatarUrl: avatarUrl,
             label: label,
         };
     },
+    props: {
+        owner: {
+            type: Object,
+            default: null
+        }
+    },
 });
 export default (await import('vue')).defineComponent({
     setup() {
-        return {
-            $props: __VLS_makeOptional(ownerProps),
-            ...ownerProps,
-        };
+        return {};
+    },
+    props: {
+        owner: {
+            type: Object,
+            default: null
+        }
     },
 });
 ;

package/owner-pick.vue

@@ -37,12 +37,12 @@ en:
   message: Choisissez un propriétaire
 </i18n>
 
-<script setup>
+<script setup lang="ts">
 import { watch, computed } from 'vue'
 import { computedAsync } from '@vueuse/core'
 import { ofetch } from 'ofetch'
 import { useI18n } from 'vue-i18n'
-import { useSessionAuthenticated } from '@data-fair/lib/vue/session.js'
+import { useSessionAuthenticated, type Account } from '@data-fair/lib-vue/session.js'
 
 const { t } = useI18n({ useScope: 'local' })
 
@@ -60,8 +60,7 @@ const session = useSessionAuthenticated()
 const owners = computedAsync(async () => {
   const user = session.state.user
 
-  /** @type {import('@data-fair/lib-common-types/session').Account[]} */
-  const owners = []
+  const owners: Account[] = []
   if (props.otherAccounts || session.state.account.type === 'user') {
     owners.push({ type: 'user', id: user.id, name: user.name })
   }
@@ -92,10 +91,7 @@ const owners = computedAsync(async () => {
   return owners
 })
 
-/**
- * @param {import('@data-fair/lib-common-types/session').Account} owner
- */
-const getLabel = (owner) => {
+const getLabel = (owner: Account) => {
   if (owner.type === 'user' && owner.id === session.state.user?.id) return t('yourself')
   if (owner.type === 'organization') {
     if (owner.department) return `${t('org')} ${owner.name} / ${owner.departmentName || owner.department}`

package/owner-pick.vue.d.ts

@@ -1,11 +1,50 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    otherAccounts: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideSingle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    message: {
+        type: StringConstructor;
+        default: null;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+    ready: {
+        type: import("vue").PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: any) => any;
+    "update:ready": (ready: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    otherAccounts: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideSingle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    message: {
+        type: StringConstructor;
+        default: null;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+    ready: {
+        type: import("vue").PropType<boolean>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: any) => any) | undefined;
+    "onUpdate:ready"?: ((ready: boolean) => any) | undefined;
+}>, {
+    message: string;
     otherAccounts: boolean;
     hideSingle: boolean;
-    message: string;
-    $props: {
-        readonly otherAccounts?: boolean | undefined;
-        readonly hideSingle?: boolean | undefined;
-        readonly message?: string | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/owner-pick.vue.js

@@ -3,7 +3,7 @@ import { watch, computed } from 'vue';
 import { computedAsync } from '@vueuse/core';
 import { ofetch } from 'ofetch';
 import { useI18n } from 'vue-i18n';
-import { useSessionAuthenticated } from '@data-fair/lib/vue/session.js';
+import { useSessionAuthenticated } from '@data-fair/lib-vue/session.js';
 const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
 const { t } = useI18n({ useScope: 'local' });
 const props = defineProps({
@@ -16,7 +16,6 @@ const ready = defineModel('ready', { type: Boolean, default: false });
 const session = useSessionAuthenticated();
 const owners = computedAsync(async () => {
     const user = session.state.user;
-    /** @type {import('@data-fair/lib-common-types/session').Account[]} */
     const owners = [];
     if (props.otherAccounts || session.state.account.type === 'user') {
         owners.push({ type: 'user', id: user.id, name: user.name });
@@ -47,9 +46,6 @@ const owners = computedAsync(async () => {
     }
     return owners;
 });
-/**
- * @param {import('@data-fair/lib-common-types/session').Account} owner
- */
 const getLabel = (owner) => {
     if (owner.type === 'user' && owner.id === session.state.user?.id)
         return t('yourself');
@@ -164,8 +160,6 @@ function __VLS_template() {
 const __VLS_self = (await import('vue')).defineComponent({
     setup() {
         return {
-            $props: __VLS_makeOptional(props),
-            ...props,
             t: t,
             model: model,
             owners: owners,
@@ -173,13 +167,28 @@ const __VLS_self = (await import('vue')).defineComponent({
             status: status,
         };
     },
+    __typeEmits: {},
+    props: {
+        ...{},
+        ...{
+            otherAccounts: { type: Boolean, default: false },
+            hideSingle: { type: Boolean, default: true },
+            message: { type: String, default: null }
+        },
+    },
 });
 export default (await import('vue')).defineComponent({
     setup() {
-        return {
-            $props: __VLS_makeOptional(props),
-            ...props,
-        };
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        ...{},
+        ...{
+            otherAccounts: { type: Boolean, default: false },
+            hideSingle: { type: Boolean, default: true },
+            message: { type: String, default: null }
+        },
     },
 });
 ;

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@data-fair/lib-vuetify",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Components based on the Vuetify 3 UI lib for the data-fair stack.",
   "main": "index.js",
   "files": [
     "**/*.js",
     "**/*.d.ts",
-    "**/*.vue"
+    "**/*.vue",
+    "**/*.scss"
   ],
   "author": "",
   "license": "MIT",
   "scripts": {
-    "prepublishOnly": "cd .. && npm run prepublishOnly"
+    "prepublishOnly": "cd .. && npm run prepublishOnly",
+    "build": "cd .. && npm run build"
   },
   "peerDependencies": {
-    "ofetch": "^1.4.0",
-    "vue-i18n": "^10.0.4",
-    "vuetify": "^3.7.2"
+    "@data-fair/lib-vue": "^1.1.0",
+    "ofetch": "1",
+    "vue-i18n": "10",
+    "vuetify": "3"
   },
   "type": "module",
   "dependencies": {
-    "@data-fair/lib-common-types": "^1.1.0"
+    "@data-fair/lib-common-types": "^1.1.0",
+    "@mdi/js": "^7.4.47"
   }
 }

package/personal-menu.vue

@@ -224,10 +224,10 @@ en:
   cancelDeletion: Cancel the deletion of the user
 </i18n>
 
-<script setup>
+<script setup lang="ts">
 import { computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useSession } from '@data-fair/lib/vue/session.js'
+import { useSession } from '@data-fair/lib-vue/session.js'
 import { useTheme } from 'vuetify'
 import UserAvatar from './user-avatar.vue'
 

package/personal-menu.vue.d.ts

@@ -1,19 +1,28 @@
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    darkModeSwitch: boolean;
-    $props: {
-        readonly darkModeSwitch?: boolean | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_TemplateResult = {
+declare function __VLS_template(): {
     slots: {
         "actions-before"?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };
-declare var __VLS_inheritedAttrs: {};

package/personal-menu.vue.js

@@ -1,7 +1,7 @@
 /// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
 import { computed, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useSession } from '@data-fair/lib/vue/session.js';
+import { useSession } from '@data-fair/lib-vue/session.js';
 import { useTheme } from 'vuetify';
 import UserAvatar from './user-avatar.vue';
 const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
@@ -459,8 +459,6 @@ function __VLS_template() {
 const __VLS_self = (await import('vue')).defineComponent({
     setup() {
         return {
-            $props: __VLS_makeOptional(__VLS_props),
-            ...__VLS_props,
             UserAvatar: UserAvatar,
             theme: theme,
             session: session,
@@ -470,13 +468,22 @@ 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: __VLS_makeOptional(__VLS_props),
-            ...__VLS_props,
-        };
+        return {};
+    },
+    props: {
+        darkModeSwitch: {
+            type: Boolean,
+            default: false
+        }
     },
 });
 export default {};

package/tutorial-alert.vue

@@ -61,8 +61,8 @@ en:
   readDoc: Read the documentation
 </i18n>
 
-<script>
-import { useTheme } from 'vuetify';
+<script lang="ts">
+import { useTheme } from 'vuetify'
 
 export default {
   props: {
@@ -73,9 +73,9 @@ export default {
     initial: { type: Boolean, default: true },
     persistent: { type: Boolean, default: false }
   },
-  setup() {
+  setup () {
     const theme = useTheme()
-    return {theme}
+    return { theme }
   },
   data: () => ({
     show: false

package/ui-notif.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-snackbar
+    v-if="notification"
+    ref="notificationSnackbar"
+    v-model="showNotification"
+    class="ui-notification"
+    v-bind="fullSnackbarProps"
+  >
+    <p>{{ notification.msg }}</p>
+    <p
+      v-if="notification.type === 'error'"
+      class="ml-3"
+      v-html="notification.errorMsg"
+    />
+
+    <template #actions>
+      <v-btn
+        icon
+        @click.native="showNotification = false"
+      >
+        <v-icon :icon="mdiClose" />
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useUiNotif } from '@data-fair/lib-vue/ui-notif.js'
+import inIframe from '@data-fair/lib-utils/in-iframe.js'
+import { mdiClose } from '@mdi/js'
+
+const uiNotif = useUiNotif()
+
+const notification = computed(() => uiNotif.notification.value)
+const showNotification = ref(false)
+
+watch(() => notification.value, async () => {
+  showNotification.value = false
+  if (!inIframe && notification.value) {
+    await new Promise(resolve => setTimeout(resolve, 300))
+    showNotification.value = true
+  }
+}, {immediate: true})
+
+const { snackbarProps } = defineProps({
+  snackbarProps: {
+    type: Object,
+    default () {
+      return { tile: true, right: true, bottom: true, timeout: 30000 }
+    }
+  }
+})
+
+const fullSnackbarProps = computed(() => {
+  const props = { ...snackbarProps }
+  if (!notification.value) return props
+  if (notification.value.type === 'error') props.timeout = -1
+  props.color = notification.value.type
+  return props
+})
+
+</script>
+
+<style>
+</style>

package/ui-notif.vue.d.ts

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    snackbarProps: {
+        type: ObjectConstructor;
+        default(): {
+            tile: boolean;
+            right: boolean;
+            bottom: boolean;
+            timeout: number;
+        };
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    snackbarProps: {
+        type: ObjectConstructor;
+        default(): {
+            tile: boolean;
+            right: boolean;
+            bottom: boolean;
+            timeout: number;
+        };
+    };
+}>> & Readonly<{}>, {
+    snackbarProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/ui-notif.vue.js

@@ -0,0 +1,154 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { computed, ref, watch } from 'vue';
+import { useUiNotif } from '@data-fair/lib-vue/ui-notif.js';
+import inIframe from '@data-fair/lib-utils/in-iframe.js';
+import { mdiClose } from '@mdi/js';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const uiNotif = useUiNotif();
+const notification = computed(() => uiNotif.notification.value);
+const showNotification = ref(false);
+watch(() => notification.value, async () => {
+    showNotification.value = false;
+    if (!inIframe && notification.value) {
+        await new Promise(resolve => setTimeout(resolve, 300));
+        showNotification.value = true;
+    }
+}, { immediate: true });
+const __VLS_props = defineProps({
+    snackbarProps: {
+        type: Object,
+        default() {
+            return { tile: true, right: true, bottom: true, timeout: 30000 };
+        }
+    }
+});
+const { snackbarProps } = __VLS_props;
+const fullSnackbarProps = computed(() => {
+    const props = { ...snackbarProps };
+    if (!notification.value)
+        return props;
+    if (notification.value.type === 'error')
+        props.timeout = -1;
+    props.color = notification.value.type;
+    return props;
+});
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        snackbarProps: {
+            type: Object,
+            default() {
+                return { tile: true, right: true, bottom: true, timeout: 30000 };
+            }
+        }
+    },
+});
+;
+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.notification) {
+        const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VSnackbar;
+        /** @type { [typeof __VLS_components.VSnackbar, typeof __VLS_components.vSnackbar, typeof __VLS_components.VSnackbar, typeof __VLS_components.vSnackbar, ] } */
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ref: ("notificationSnackbar"), modelValue: ((__VLS_ctx.showNotification)), ...{ class: ("ui-notification") }, ...(__VLS_ctx.fullSnackbarProps), }));
+        const __VLS_2 = __VLS_1({ ref: ("notificationSnackbar"), modelValue: ((__VLS_ctx.showNotification)), ...{ class: ("ui-notification") }, ...(__VLS_ctx.fullSnackbarProps), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        // @ts-ignore navigation for `const notificationSnackbar = ref()`
+        __VLS_ctx.notificationSnackbar;
+        var __VLS_6 = {};
+        __VLS_elementAsFunction(__VLS_intrinsicElements.p, __VLS_intrinsicElements.p)({});
+        (__VLS_ctx.notification.msg);
+        if (__VLS_ctx.notification.type === 'error') {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.p)({ ...{ class: ("ml-3") }, });
+            __VLS_directiveAsFunction(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.notification.errorMsg) }, null, null);
+        }
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { actions: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
+            const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.VBtn;
+            /** @type { [typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, ] } */
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onClick': {} }, icon: (true), }));
+            const __VLS_9 = __VLS_8({ ...{ 'onClick': {} }, icon: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+            let __VLS_13;
+            const __VLS_14 = {
+                onClick: (...[$event]) => {
+                    if (!((__VLS_ctx.notification)))
+                        return;
+                    __VLS_ctx.showNotification = false;
+                }
+            };
+            let __VLS_10;
+            let __VLS_11;
+            const __VLS_15 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
+            /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+            // @ts-ignore
+            const __VLS_16 = __VLS_asFunctionalComponent(__VLS_15, new __VLS_15({ icon: ((__VLS_ctx.mdiClose)), }));
+            const __VLS_17 = __VLS_16({ icon: ((__VLS_ctx.mdiClose)), }, ...__VLS_functionalComponentArgsRest(__VLS_16));
+            __VLS_nonNullable(__VLS_12.slots).default;
+            const __VLS_12 = __VLS_pickFunctionalComponentCtx(__VLS_7, __VLS_9);
+        }
+        const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    }
+    __VLS_styleScopedClasses['ui-notification'];
+    __VLS_styleScopedClasses['ml-3'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "notificationSnackbar": __VLS_6,
+    };
+    var $refs;
+    return {
+        slots: __VLS_slots,
+        refs: $refs,
+        attrs: {},
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            mdiClose: mdiClose,
+            notification: notification,
+            showNotification: showNotification,
+            fullSnackbarProps: fullSnackbarProps,
+        };
+    },
+    props: {
+        snackbarProps: {
+            type: Object,
+            default() {
+                return { tile: true, right: true, bottom: true, timeout: 30000 };
+            }
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        snackbarProps: {
+            type: Object,
+            default() {
+                return { tile: true, right: true, bottom: true, timeout: 30000 };
+            }
+        }
+    },
+});
+;
+//# sourceMappingURL=ui-notif.vue.js.map

package/user-avatar.vue

@@ -39,19 +39,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
-import { useSession } from '@data-fair/lib/vue/session.js'
+import { useSession } from '@data-fair/lib-vue/session.js'
 
 const props = defineProps({
   showAccount: { type: Boolean, default: false }
 })
 
 const session = useSession()
-const userAvatarUrl = computed(() => session.state.user && `/simple-directory/api/avatars/user/${session.state.user.id}/avatar.png`)
+const userAvatarUrl = computed(() => session.state.user && `${session.options.directoryUrl}/api/avatars/user/${session.state.user.id}/avatar.png`)
 const accountAvatarUrl = computed(() => {
   if (!session.state.account) return
-  let url = `/simple-directory/api/avatars/${session.state.account.type}/${session.state.account.id}`
+  let url = `${session.options.directoryUrl}/api/avatars/${session.state.account.type}/${session.state.account.id}`
   if (session.state.account.department) url += `/${session.state.account.department}`
   url += '/avatar.png'
   return url

package/user-avatar.vue.d.ts

@@ -1,7 +1,14 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    showAccount: boolean;
-    $props: {
-        readonly showAccount?: boolean | undefined;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    showAccount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    showAccount: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {
+    showAccount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/user-avatar.vue.js

@@ -1,16 +1,16 @@
 /// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
 import { computed } from 'vue';
-import { useSession } from '@data-fair/lib/vue/session.js';
+import { useSession } from '@data-fair/lib-vue/session.js';
 const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
 const props = defineProps({
     showAccount: { type: Boolean, default: false }
 });
 const session = useSession();
-const userAvatarUrl = computed(() => session.state.user && `/simple-directory/api/avatars/user/${session.state.user.id}/avatar.png`);
+const userAvatarUrl = computed(() => session.state.user && `${session.options.directoryUrl}/api/avatars/user/${session.state.user.id}/avatar.png`);
 const accountAvatarUrl = computed(() => {
     if (!session.state.account)
         return;
-    let url = `/simple-directory/api/avatars/${session.state.account.type}/${session.state.account.id}`;
+    let url = `${session.options.directoryUrl}/api/avatars/${session.state.account.type}/${session.state.account.id}`;
     if (session.state.account.department)
         url += `/${session.state.account.department}`;
     url += '/avatar.png';
@@ -91,21 +91,22 @@ function __VLS_template() {
 const __VLS_self = (await import('vue')).defineComponent({
     setup() {
         return {
-            $props: __VLS_makeOptional(props),
-            ...props,
             session: session,
             userAvatarUrl: userAvatarUrl,
             accountAvatarUrl: accountAvatarUrl,
             showSecondAvatar: showSecondAvatar,
         };
     },
+    props: {
+        showAccount: { type: Boolean, default: false }
+    },
 });
 export default (await import('vue')).defineComponent({
     setup() {
-        return {
-            $props: __VLS_makeOptional(props),
-            ...props,
-        };
+        return {};
+    },
+    props: {
+        showAccount: { type: Boolean, default: false }
     },
 });
 ;

package/vite.d.ts

@@ -0,0 +1,11 @@
+export declare const autoImports: (string | {
+    '@data-fair/lib-vue/session.js': string[];
+    '@data-fair/lib-vue/reactive-search-params.js': string[];
+    '@data-fair/lib-vue/locale-dayjs.js': string[];
+    '@data-fair/lib-vue/concept-filters.js': string[];
+    '@data-fair/lib-vue/ui-notif.js': string[];
+} | {
+    '@data-fair/lib-vuetify/personal-menu.vue': string[][];
+    '@data-fair/lib-vuetify/tutorial-alert.vue': string[][];
+    '@data-fair/lib-vuetify/user-avatar.vue': string[][];
+})[];

package/vite.js

@@ -0,0 +1,11 @@
+// made for https://github.com/unplugin/unplugin-auto-import
+import { autoImports as vueAutoImports } from '@data-fair/lib-vue/vite.js'
+export const autoImports = [
+  ...vueAutoImports,
+  {
+    '@data-fair/lib-vuetify/personal-menu.vue': [['default', 'dfPersonalMenu']],
+    '@data-fair/lib-vuetify/tutorial-alert.vue': [['default', 'dfTutorialAlert']],
+    '@data-fair/lib-vuetify/user-avatar.vue': [['default', 'dfUserAvatar']]
+  }
+]
+// # sourceMappingURL=vite.js.map