@data-fair/lib-vuetify 1.0.1 → 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/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.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",
@@ -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

@@ -62,7 +62,7 @@ en:
 </i18n>
 
 <script lang="ts">
-import { useTheme } from 'vuetify';
+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

@@ -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