@data-fair/lib-vuetify 1.0.1 → 1.1.1

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/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/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@data-fair/lib-vuetify",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "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",
@@ -15,13 +16,14 @@
     "build": "cd .. && npm run build"
   },
   "peerDependencies": {
-    "@data-fair/lib-vue": "^1.0.1",
+    "@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/tutorial-alert.vue

@@ -18,7 +18,7 @@
           v-if="href"
           :href="href"
           target="_blank"
-        >{{ text || $t('readDoc') }}</a>
+        >{{ text || t('readDoc') }}</a>
         <template v-else>
           <span
             v-if="text"
@@ -37,15 +37,11 @@
       icon
       density="compact"
       color="success"
-      :title="show ? $t('closeHelp') : $t('readHelp')"
+      :title="show ? t('closeHelp') : t('readHelp')"
       @click="show = !show"
     >
-      <v-icon v-if="show">
-        mdi-close-circle
-      </v-icon>
-      <v-icon v-else>
-        mdi-information
-      </v-icon>
+      <v-icon v-if="show":icon="mdiCloseCircle" />
+      <v-icon v-else :icon="mdiInformation" />
     </v-btn>
   </div>
 </template>
@@ -62,7 +58,9 @@ en:
 </i18n>
 
 <script lang="ts">
-import { useTheme } from 'vuetify';
+import { useTheme } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+import { mdiCloseCircle, mdiInformation } from '@mdi/js'
 
 export default {
   props: {
@@ -73,12 +71,15 @@ export default {
     initial: { type: Boolean, default: true },
     persistent: { type: Boolean, default: false }
   },
-  setup() {
+  setup () {
     const theme = useTheme()
-    return {theme}
+    const { t } = useI18n({ useScope: 'local' })
+    return { theme, t }
   },
   data: () => ({
-    show: false
+    show: false,
+    mdiCloseCircle,
+    mdiInformation
   }),
   computed: {
     showBtn () {

package/tutorial-alert.vue.d.ts

@@ -28,8 +28,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     theme: import("vuetify", { with: { "resolution-mode": "import" } }).ThemeInstance;
+    t: import("vue-i18n").ComposerTranslation<{}, string, import("@intlify/core-base").RemoveIndexSignature<{
+        [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
+    }>, never, never, never>;
 }, {
     show: boolean;
+    mdiCloseCircle: string;
+    mdiInformation: string;
 }, {
     showBtn(): boolean;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/tutorial-alert.vue.js

@@ -1,5 +1,7 @@
 /// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
 import { useTheme } from 'vuetify';
+import { useI18n } from 'vue-i18n';
+import { mdiCloseCircle, mdiInformation } from '@mdi/js';
 export default (await import('vue')).defineComponent({
     props: {
         id: { type: String, required: true },
@@ -11,10 +13,13 @@ export default (await import('vue')).defineComponent({
     },
     setup() {
         const theme = useTheme();
-        return { theme };
+        const { t } = useI18n({ useScope: 'local' });
+        return { theme, t };
     },
     data: () => ({
-        show: false
+        show: false,
+        mdiCloseCircle,
+        mdiInformation
     }),
     computed: {
         showBtn() {
@@ -61,7 +66,7 @@ function __VLS_template() {
             var __VLS_6 = {};
             if (__VLS_ctx.href) {
                 __VLS_elementAsFunction(__VLS_intrinsicElements.a, __VLS_intrinsicElements.a)({ href: ((__VLS_ctx.href)), target: ("_blank"), });
-                (__VLS_ctx.text || __VLS_ctx.$t('readDoc'));
+                (__VLS_ctx.text || __VLS_ctx.t('readDoc'));
             }
             else {
                 if (__VLS_ctx.text) {
@@ -81,8 +86,8 @@ function __VLS_template() {
             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': {} }, ...{ class: ("toggle") }, icon: (true), density: ("compact"), color: ("success"), title: ((__VLS_ctx.show ? __VLS_ctx.$t('closeHelp') : __VLS_ctx.$t('readHelp'))), }));
-            const __VLS_9 = __VLS_8({ ...{ 'onClick': {} }, ...{ class: ("toggle") }, icon: (true), density: ("compact"), color: ("success"), title: ((__VLS_ctx.show ? __VLS_ctx.$t('closeHelp') : __VLS_ctx.$t('readHelp'))), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+            const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onClick': {} }, ...{ class: ("toggle") }, icon: (true), density: ("compact"), color: ("success"), title: ((__VLS_ctx.show ? __VLS_ctx.t('closeHelp') : __VLS_ctx.t('readHelp'))), }));
+            const __VLS_9 = __VLS_8({ ...{ 'onClick': {} }, ...{ class: ("toggle") }, icon: (true), density: ("compact"), color: ("success"), title: ((__VLS_ctx.show ? __VLS_ctx.t('closeHelp') : __VLS_ctx.t('readHelp'))), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
             let __VLS_13;
             const __VLS_14 = {
                 onClick: (...[$event]) => {
@@ -97,21 +102,17 @@ function __VLS_template() {
             let __VLS_11;
             if (__VLS_ctx.show) {
                 const __VLS_15 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
-                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
                 // @ts-ignore
-                const __VLS_16 = __VLS_asFunctionalComponent(__VLS_15, new __VLS_15({}));
-                const __VLS_17 = __VLS_16({}, ...__VLS_functionalComponentArgsRest(__VLS_16));
-                __VLS_nonNullable(__VLS_20.slots).default;
-                const __VLS_20 = __VLS_pickFunctionalComponentCtx(__VLS_15, __VLS_17);
+                const __VLS_16 = __VLS_asFunctionalComponent(__VLS_15, new __VLS_15({ icon: ((__VLS_ctx.mdiCloseCircle)), }));
+                const __VLS_17 = __VLS_16({ icon: ((__VLS_ctx.mdiCloseCircle)), }, ...__VLS_functionalComponentArgsRest(__VLS_16));
             }
             else {
                 const __VLS_21 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
-                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
                 // @ts-ignore
-                const __VLS_22 = __VLS_asFunctionalComponent(__VLS_21, new __VLS_21({}));
-                const __VLS_23 = __VLS_22({}, ...__VLS_functionalComponentArgsRest(__VLS_22));
-                __VLS_nonNullable(__VLS_26.slots).default;
-                const __VLS_26 = __VLS_pickFunctionalComponentCtx(__VLS_21, __VLS_23);
+                const __VLS_22 = __VLS_asFunctionalComponent(__VLS_21, new __VLS_21({ icon: ((__VLS_ctx.mdiInformation)), }));
+                const __VLS_23 = __VLS_22({ icon: ((__VLS_ctx.mdiInformation)), }, ...__VLS_functionalComponentArgsRest(__VLS_22));
             }
             __VLS_nonNullable(__VLS_12.slots).default;
             const __VLS_12 = __VLS_pickFunctionalComponentCtx(__VLS_7, __VLS_9);

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

@@ -48,10 +48,10 @@ const props = defineProps({
 })
 
 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.js

@@ -6,11 +6,11 @@ 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';

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