@data-fair/lib-vue 0.1.0

package/concept-filters.d.ts

@@ -0,0 +1,2 @@
+export declare function useConceptFilters(reactiveSearchParams: Record<string, string>, datasetId?: string): Record<string, string>;
+export default useConceptFilters;

package/concept-filters.js

@@ -0,0 +1,24 @@
+// filter reactiveSearchParams to conceptFilters (params prefixed by _c_)
+import { reactive, watch } from 'vue';
+export function useConceptFilters(reactiveSearchParams, datasetId) {
+    const conceptFilters = reactive({});
+    const datasetFiltersPrefix = datasetId && `_d_${datasetId}_`;
+    watch(reactiveSearchParams, () => {
+        for (const key of Object.keys(reactiveSearchParams)) {
+            if (key.startsWith('_c_'))
+                conceptFilters[key] = reactiveSearchParams[key];
+            if (datasetFiltersPrefix && key.startsWith(datasetFiltersPrefix)) {
+                conceptFilters[key.replace(datasetFiltersPrefix, '')] = reactiveSearchParams[key];
+            }
+        }
+        for (const key of Object.keys(conceptFilters)) {
+            if (key.startsWith('_c_') && reactiveSearchParams[key] === undefined)
+                delete conceptFilters[key];
+            if (datasetFiltersPrefix && !key.startsWith('_c_') && reactiveSearchParams[datasetFiltersPrefix + key] === undefined) {
+                delete conceptFilters[key];
+            }
+        }
+    }, { immediate: true });
+    return conceptFilters;
+}
+export default useConceptFilters;

package/format/bytes.d.ts

@@ -0,0 +1,2 @@
+export declare function formatBytes(bytes: number | string, locale?: string): string;
+export default formatBytes;

package/format/bytes.js

@@ -0,0 +1,16 @@
+const locales = {
+    fr: [[0, 'octet'], [1, 'octets'], [1000, 'ko'], [1000 * 1000, 'Mo'], [1000 * 1000 * 1000, 'Go'], [1000 * 1000 * 1000 * 1000, 'To'], [1000 * 1000 * 1000 * 1000 * 1000, 'Po']],
+    en: [[0, 'byte'], [1, 'bytes'], [1000, 'kb'], [1000 * 1000, 'Mb'], [1000 * 1000 * 1000, 'Gb'], [1000 * 1000 * 1000 * 1000, 'Tb'], [1000 * 1000 * 1000 * 1000 * 1000, 'Pb']]
+};
+export function formatBytes(bytes, locale = 'fr') {
+    const bytesInt = Math.abs(typeof bytes === 'string' ? parseInt(bytes, 10) : bytes);
+    const def = locales[locale] ?? locales.en;
+    for (let i = 0; i < def.length; i++) {
+        const step = def[i][0];
+        if (bytesInt < step || i === def.length - 1) {
+            return (bytesInt / (def[i - 1][0] || 1)).toLocaleString(locale, { maximumFractionDigits: 0 }) + ' ' + def[i - 1][1];
+        }
+    }
+    return ''; // this is only for strict typing, but the code cannot go there, the return in the loop is always called
+}
+export default formatBytes;

package/format/field.d.ts

@@ -0,0 +1,3 @@
+import type { Field } from '@data-fair/lib-common-types/application/index.js';
+export declare function formatField(item: Record<string, string | null | undefined | number | boolean>, field: Field): string;
+export declare function getFieldLabel(field: Field): string;

package/format/field.js

@@ -0,0 +1,28 @@
+// TODO: use locale-dayjs for localization of date formats
+import dayjs from 'dayjs';
+export function formatField(item, field) {
+    const value = item[field.key];
+    if (value === undefined || value === null || value === '')
+        return '';
+    if (field['x-labels']?.['' + item[field.key]])
+        return field['x-labels']['' + item[field.key]];
+    if (field.type === 'number' || field.type === 'integer')
+        return value.toLocaleString('fr');
+    if (typeof value === 'boolean')
+        return value ? 'Oui' : 'Non';
+    if (typeof value === 'string') {
+        if (field['x-refersTo'] === 'http://schema.org/Date' ||
+            field['x-refersTo'] === 'https://schema.org/startDate' ||
+            field['x-refersTo'] === 'https://schema.org/endDate' ||
+            field['x-refersTo'] === 'http://schema.org/dateCreated') {
+            if (field.format === 'date-time')
+                return dayjs(value).format('DD/MM/YYYY, HH[h]mm');
+            else
+                return dayjs(value).format('DD/MM/YYYY');
+        }
+    }
+    return '' + value;
+}
+export function getFieldLabel(field) {
+    return field.title || field['x-originalName'] || field.key;
+}

package/locale-dayjs-global.d.ts

@@ -0,0 +1,6 @@
+export declare const locale: import("vue").Ref<string, string>, dayjs: (date?: string | number | import("dayjs").Dayjs | Date | null | undefined) => import("dayjs").Dayjs & {
+    fromNow(withoutSuffix?: boolean): string;
+    from(compared: import("dayjs").ConfigType, withoutSuffix?: boolean): string;
+    toNow(withoutSuffix?: boolean): string;
+    to(compared: import("dayjs").ConfigType, withoutSuffix?: boolean): string;
+};

package/locale-dayjs-global.js

@@ -0,0 +1,7 @@
+// same as locale-dayjs but in a module level singleton for convenience when not using SSR
+import { getLocaleDayjs } from './locale-dayjs.js';
+// @ts-ignore
+if (import.meta.env?.SSR) {
+    throw new Error('this module uses a module level singleton, it cannot be used in SSR mode');
+}
+export const { locale, dayjs } = getLocaleDayjs();

package/locale-dayjs-types.d.ts

@@ -0,0 +1 @@
+export {};

package/locale-dayjs-types.js

@@ -0,0 +1 @@
+export {};

package/locale-dayjs.d.ts

@@ -0,0 +1,21 @@
+import type { Dayjs, ConfigType } from 'dayjs';
+import type { Ref, App } from 'vue';
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+type RelativeDayjs = Dayjs & {
+    fromNow(withoutSuffix?: boolean): string;
+    from(compared: ConfigType, withoutSuffix?: boolean): string;
+    toNow(withoutSuffix?: boolean): string;
+    to(compared: ConfigType, withoutSuffix?: boolean): string;
+};
+export declare function getLocaleDayjs(_locale?: Ref<string>): {
+    locale: Ref<string, string>;
+    dayjs: (date?: string | number | dayjs.Dayjs | Date | null | undefined) => RelativeDayjs;
+};
+export declare const localeDayjsKey: unique symbol;
+export declare function createLocaleDayjs(locale: Ref<string>): {
+    install(app: App): void;
+};
+export declare function useLocaleDayjs(): ReturnType<typeof getLocaleDayjs>;
+export default useLocaleDayjs;

package/locale-dayjs.js

@@ -0,0 +1,32 @@
+import { inject, ref } from 'vue';
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);
+// main functionality, use through the createLocaleDayjs plugin and useLocaleDayjs composable
+// or as a global singleton through ./locale-dayjs-global.js
+export function getLocaleDayjs(_locale) {
+    const locale = _locale ?? ref('fr');
+    return {
+        locale,
+        dayjs: (date) => {
+            return dayjs(date).locale(locale.value);
+        }
+    };
+}
+// uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
+export const localeDayjsKey = Symbol('localeDayjs');
+export function createLocaleDayjs(locale) {
+    const localeDayjs = getLocaleDayjs(locale);
+    return { install(app) { app.provide(localeDayjsKey, localeDayjs); } };
+}
+export function useLocaleDayjs() {
+    const localeDayjs = inject(localeDayjsKey);
+    if (!localeDayjs)
+        throw new Error('useLocaleDayjs requires using the plugin createLocaleDayjs');
+    return localeDayjs;
+}
+export default useLocaleDayjs;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@data-fair/lib-vue",
+  "version": "0.1.0",
+  "description": "Composables and other utilities for Vue applications in the data-fair stack.",
+  "main": "index.js",
+  "files": [
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "dayjs": "^1.11.13",
+    "ofetch": "^1.4.0",
+    "reconnecting-websocket": "^4.4.0",
+    "vue": "^3.5.11"
+  },
+  "peerDependenciesMeta": {
+    "reconnecting-websocket": {
+      "optional": true
+    },
+    "dayjs": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@data-fair/lib-common-types": "^0.1.0",
+    "@data-fair/lib-utils": "^0.2.0",
+    "jwt-decode": "^4.0.0",
+    "universal-cookie": "^7.2.0"
+  },
+  "devDependencies": {
+    "vue-router": "^4.4.5"
+  },
+  "type": "module"
+}

package/reactive-search-params-global.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Record<string, string>;
+export default _default;

package/reactive-search-params-global.js

@@ -0,0 +1,7 @@
+// same as use-reactive-search-params.js but in a module level singleton for convenience when not using SSR
+import { getReactiveSearchParams } from './reactive-search-params.js';
+// @ts-ignore
+if (import.meta.env?.SSR) {
+    throw new Error('this module uses a module level singleton, it cannot be used in SSR mode');
+}
+export default getReactiveSearchParams();

package/reactive-search-params.d.ts

@@ -0,0 +1,21 @@
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+export declare function getReactiveSearchParams(router?: Router): Record<string, string>;
+export declare const reactiveSearchParamsKey: unique symbol;
+export declare function createReactiveSearchParams(router?: Router): {
+    install(app: App): void;
+    value: Record<string, string>;
+};
+export declare function useReactiveSearchParams(): ReturnType<typeof getReactiveSearchParams>;
+export declare const useStringSearchParam: (key: string, options?: string | {
+    default?: string;
+}) => import("vue").WritableComputedRef<string, string>;
+export declare const useBooleanSearchParam: (key: string, options?: boolean | {
+    default?: boolean;
+    strings?: [string, string];
+}) => import("vue").WritableComputedRef<boolean, boolean>;
+export declare const useNumberSearchParam: (key: string) => import("vue").WritableComputedRef<number | null, number | null>;
+export declare const useStringsArraySearchParam: (key: string, options?: "csv" | {
+    style?: "csv";
+}) => import("vue").WritableComputedRef<string[], string[]>;
+export default useReactiveSearchParams;

package/reactive-search-params.js

@@ -0,0 +1,155 @@
+// inspired by useUrlSearchParams (https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams/index.ts)
+// but even simpler, without array values, always in history mode, and shared in a app plugin
+import { reactive, watch, inject, computed } from 'vue';
+import Debug from 'debug';
+const debug = Debug('reactive-search-params');
+debug.log = console.log.bind(console);
+const applySearchParams = (state, queryParams) => {
+    const unusedKeys = new Set(Object.keys(state));
+    for (const key of Object.keys(queryParams)) {
+        const value = queryParams[key];
+        if (typeof value === 'string') {
+            state[key] = value;
+            unusedKeys.delete(key);
+        }
+        if (Array.isArray(value)) {
+            const lastValue = value[value.length - 1];
+            if (typeof lastValue === 'string') {
+                state[key] = lastValue;
+                unusedKeys.delete(key);
+            }
+        }
+    }
+    for (const unusedKey of unusedKeys) {
+        delete state[unusedKey];
+    }
+};
+export function getReactiveSearchParams(router) {
+    // @ts-ignore
+    if (!import.meta.env?.SSR && !router) {
+        try {
+            // nuxt 3 way of reading router
+            // @ts-ignore
+            router = __unctx__.get('nuxt-app').use().$router;
+            debug('using nuxt 3 router implicitly');
+        }
+        catch (e) {
+            // nothing to do
+        }
+    }
+    const state = reactive({});
+    // 2 modes, 1 based on vue router, 1 based on window.location.search
+    if (router) {
+        debug('initialize reactive search params based on vue router');
+        watch(router.currentRoute, (route) => {
+            debug('route.query changed', route.query);
+            applySearchParams(state, route.query);
+        }, { immediate: true });
+        watch(state, () => {
+            debug('state changed', state);
+            router?.replace({ query: state });
+        });
+    }
+    else {
+        debug('initialize reactive search params based on window.location.search');
+        window.addEventListener('popstate', () => {
+            debug('update state based on window.location.search', window.location.search);
+            applySearchParams(state, Object.fromEntries(new URLSearchParams(window.location.search)));
+        });
+        applySearchParams(state, Object.fromEntries(new URLSearchParams(window.location.search)));
+        const updateUrl = () => {
+            debug('update url based on state', state);
+            const params = new URLSearchParams('');
+            for (const key of Object.keys(state)) {
+                const value = state[key];
+                if (value !== null && value !== undefined && value !== '') {
+                    params.set(key, value);
+                }
+            }
+            const newQuery = params.toString();
+            const newSearch = newQuery.length > 0 ? '?' + newQuery : '';
+            if (newSearch !== window.location.search) {
+                window.history.replaceState(window.history.state, window.document.title, window.location.pathname + newSearch);
+            }
+        };
+        watch(state, () => {
+            updateUrl();
+        });
+    }
+    return state;
+}
+// uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
+export const reactiveSearchParamsKey = Symbol('reactiveSearchParams');
+export function createReactiveSearchParams(router) {
+    const reactiveSearchParams = getReactiveSearchParams(router);
+    return {
+        install(app) { app.provide(reactiveSearchParamsKey, reactiveSearchParams); },
+        value: reactiveSearchParams
+    };
+}
+export function useReactiveSearchParams() {
+    const reactiveSearchParams = inject(reactiveSearchParamsKey);
+    if (!reactiveSearchParams)
+        throw new Error('useReactiveSearchParams requires using the plugin createReactiveSearchParams');
+    return reactiveSearchParams;
+}
+export const useStringSearchParam = (key, options = {}) => {
+    const reactiveSearchParams = useReactiveSearchParams();
+    const defaultValue = typeof options === 'string' ? options : (options.default ?? '');
+    return computed({
+        get: () => reactiveSearchParams[key] ?? defaultValue,
+        set: (value) => {
+            if (value === defaultValue)
+                delete reactiveSearchParams[key];
+            else
+                reactiveSearchParams[key] = value;
+        }
+    });
+};
+export const useBooleanSearchParam = (key, options = {}) => {
+    const reactiveSearchParams = useReactiveSearchParams();
+    const defaultValue = typeof options === 'boolean' ? options : (options.default ?? false);
+    const strings = (typeof options !== 'boolean' && options.strings) || ['1', '0'];
+    return computed({
+        get: () => key in reactiveSearchParams ? reactiveSearchParams[key] === strings[0] : defaultValue,
+        set: (value) => {
+            if (value === defaultValue)
+                delete reactiveSearchParams[key];
+            else
+                reactiveSearchParams[key] = value ? strings[0] : strings[1];
+        }
+    });
+};
+export const useNumberSearchParam = (key) => {
+    const reactiveSearchParams = useReactiveSearchParams();
+    return computed({
+        get: () => {
+            if (key in reactiveSearchParams) {
+                const value = Number(reactiveSearchParams[key]);
+                if (!isNaN(value))
+                    return value;
+            }
+            return null;
+        },
+        set: (value) => {
+            if (value === null)
+                delete reactiveSearchParams[key];
+            else
+                reactiveSearchParams[key] = '' + value;
+        }
+    });
+};
+export const useStringsArraySearchParam = (key, options = {}) => {
+    const reactiveSearchParams = useReactiveSearchParams();
+    // const style = typeof options === 'string' ? options : (options.style ?? 'csv')
+    return computed({
+        get: () => reactiveSearchParams[key] ? reactiveSearchParams[key]?.split(',') : [],
+        set: (value) => {
+            if (value.length === 0)
+                delete reactiveSearchParams[key];
+            else
+                reactiveSearchParams[key] = value.join(',');
+        }
+    });
+};
+export default useReactiveSearchParams;

package/session.d.ts

@@ -0,0 +1,46 @@
+import { type IncomingMessage } from 'node:http';
+import { type Ref, App } from 'vue';
+import { type RouteLocation } from 'vue-router';
+import { type fetch } from 'ofetch';
+import { type SessionState, type SessionStateAuthenticated } from '@data-fair/lib-common-types/session/index.js';
+interface GenericCookies {
+    get: (key: string) => string | undefined;
+    set: (key: string, value: string, options?: Record<string, any>) => void;
+    remove: (key: string) => void;
+}
+export interface SessionOptions {
+    route?: RouteLocation;
+    sitePath?: string;
+    directoryUrl?: string;
+    logoutRedirectUrl?: string;
+    req?: IncomingMessage;
+    cookies?: GenericCookies;
+    customFetch?: typeof fetch;
+}
+export interface Session {
+    state: SessionState;
+    loginUrl: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => string;
+    login: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => void;
+    logout: (redirect?: string) => Promise<void>;
+    switchOrganization: (org: string | null, dep?: string) => void;
+    setAdminMode: (adminMode: boolean, redirect?: string) => Promise<void>;
+    asAdmin: (user: any | null) => Promise<void>;
+    cancelDeletion: () => Promise<void>;
+    keepalive: () => Promise<void>;
+    switchDark: (value: boolean) => void;
+    switchLang: (value: string) => void;
+    topLocation: Ref<Location | undefined>;
+    options: SessionOptions;
+}
+export type SessionAuthenticated = Session & {
+    state: SessionStateAuthenticated;
+};
+export declare function getSession(initOptions: SessionOptions): Promise<Session>;
+export declare const sessionKey: unique symbol;
+export declare function createSession(initOptions: SessionOptions): Promise<{
+    install(app: App): void;
+    value: Session;
+}>;
+export declare function useSession(): Session;
+export declare function useSessionAuthenticated(errorBuilder?: () => any): SessionAuthenticated;
+export default useSession;

package/session.js

@@ -0,0 +1,289 @@
+import { reactive, computed, watch, inject } from 'vue';
+import { ofetch } from 'ofetch';
+import { jwtDecode } from 'jwt-decode';
+import cookiesModule from 'universal-cookie';
+import Debug from 'debug';
+const Cookies = cookiesModule;
+const debug = Debug('session');
+debug.log = console.log.bind(console);
+function jwtDecodeAlive(jwt) {
+    if (!jwt)
+        return;
+    const decoded = jwtDecode(jwt);
+    if (!decoded)
+        return;
+    const now = Math.ceil(Date.now().valueOf() / 1000);
+    if (typeof decoded.exp !== 'undefined' && decoded.exp < now) {
+        console.error(`token expired: ${decoded.exp}<${now},  ${JSON.stringify(decoded)}`);
+        return;
+    }
+    if (typeof decoded.nbf !== 'undefined' && decoded.nbf > now) {
+        console.warn(`token not yet valid: ${decoded.nbf}>${now}, ${JSON.stringify(decoded)}`);
+        // do not return null here, this is probably a false flag due to a slightly mismatched clock
+        // return null
+    }
+    return decoded;
+}
+const getTopLocation = () => {
+    try {
+        return window.top ? window.top.location : window.location;
+    }
+    catch (err) {
+        return window.location;
+    }
+};
+const goTo = (url) => {
+    const topLocation = getTopLocation();
+    if (topLocation == null) {
+        throw new TypeError('session.goTo was called without access to the window object or its location');
+    }
+    if (url)
+        topLocation.href = url;
+    else
+        topLocation.reload();
+};
+const defaultOptions = { directoryUrl: '/simple-directory', sitePath: '' };
+export async function getSession(initOptions) {
+    const options = { ...defaultOptions, ...initOptions };
+    const cookiesPath = options.sitePath + '/';
+    debug(`init directoryUrl=${options.directoryUrl}, cookiesPath=${cookiesPath}`);
+    const ssr = !!options.req;
+    if (ssr)
+        debug('run in SSR context');
+    const customFetch = initOptions?.customFetch ?? ofetch;
+    // use vue-router to detect page change and maintain a reference to the current page location
+    // top page if we are in iframe context
+    const topLocation = computed(() => {
+        if (ssr)
+            return undefined;
+        if (options.route?.fullPath) { /* empty */ } // adds reactivity
+        const location = getTopLocation();
+        debug('update location based on route change', location);
+        return location;
+    });
+    // the core state of the session that is filled by reading cookies
+    const state = reactive({});
+    // cookies are the source of truth and this information is transformed into the state reactive object
+    const cookies = initOptions?.cookies ?? new Cookies(options.req?.headers.cookie);
+    const readCookies = () => {
+        const darkCookie = cookies.get('theme_dark');
+        state.dark = darkCookie === '1' || darkCookie === 'true';
+        const langCookie = cookies.get('i18n_lang');
+        if (langCookie)
+            state.lang = langCookie;
+        else
+            delete state.lang;
+        const idToken = cookies.get('id_token');
+        const user = jwtDecodeAlive(idToken);
+        if (!user) {
+            delete state.user;
+            delete state.organization;
+            delete state.account;
+            delete state.accountRole;
+            return;
+        }
+        // this is to prevent null values that are put by SD versions that do not strictly respect their schema
+        for (const org of user.organizations) {
+            if (!org.department) {
+                delete org.department;
+                delete org.departmentName;
+            }
+        }
+        state.user = user;
+        const organizationId = cookies.get('id_token_org');
+        const departmentId = cookies.get('id_token_dep');
+        if (organizationId) {
+            if (departmentId) {
+                state.organization = state.user.organizations.find(o => o.id === organizationId && o.department === departmentId);
+            }
+            else {
+                state.organization = state.user.organizations.find(o => o.id === organizationId);
+            }
+        }
+        else {
+            delete state.organization;
+        }
+        if (state.organization) {
+            state.account = {
+                type: 'organization',
+                id: state.organization.id,
+                name: state.organization.name,
+                department: state.organization.department,
+                departmentName: state.organization.departmentName
+            };
+            state.accountRole = state.organization.role;
+        }
+        else {
+            state.account = {
+                type: 'user',
+                id: state.user.id,
+                name: state.user.name
+            };
+            state.accountRole = 'admin';
+        }
+    };
+    readCookies();
+    debug('initial state', state);
+    if (!ssr) {
+        // sessionData is also stored in localStorage as a way to access it in simpler pages that do not require use-session
+        // and in order to listen to storage event from other contexts and sync session info accross windows and tabs
+        const storageListener = (event) => {
+            if (event.key === 'sd-session' + options.sitePath)
+                readCookies();
+        };
+        window.addEventListener('storage', storageListener);
+        // we cannot use onUnmounted here or we get warnings "onUnmounted is called when there is no active component instance to be associated with. "
+        // TODO: should we have another cleanup mechanism ?
+        // onUnmounted(() => { window.removeEventListener('storage', storageListener) })
+        // trigger some full page refresh when some key session elements are changed
+        // the danger of simply using reactivity is too high, data must be re-fetched, etc.
+        watch(() => state.account, (account, oldAccount) => {
+            if (account?.type !== oldAccount?.type || account?.id !== oldAccount?.id || account?.department !== oldAccount?.department) {
+                goTo(null);
+            }
+        });
+        watch(() => state.lang, () => {
+            goTo(null);
+        });
+        watch(() => state.dark, () => {
+            goTo(null);
+        });
+        watch(state, (state) => {
+            if (!ssr) {
+                window.localStorage.setItem('sd-session' + options.sitePath, JSON.stringify(state));
+            }
+            debug('state changed', state);
+        });
+    }
+    // login can be performed as a simple link (please use target=top) or as a function
+    function loginUrl(redirect, extraParams = {}, immediateRedirect = true) {
+        // login can also be used to redirect user immediately if he is already logged
+        if (redirect && state.user && immediateRedirect)
+            return redirect;
+        if (!redirect && topLocation.value)
+            redirect = topLocation.value.href;
+        let url = `${options.directoryUrl}/login?redirect=${encodeURIComponent(redirect ?? '')}`;
+        Object.keys(extraParams).filter(key => ![null, undefined, ''].includes(extraParams[key])).forEach((key) => {
+            url += `&${key}=${encodeURIComponent(extraParams[key])}`;
+        });
+        return url;
+    }
+    const login = (redirect, extraParams = {}, immediateRedirect = true) => {
+        goTo(loginUrl(redirect, extraParams, immediateRedirect));
+    };
+    const logout = async (redirect) => {
+        await customFetch(`${options.directoryUrl}/api/auth`, { method: 'DELETE' });
+        // sometimes server side cookie deletion is not applied immediately in browser local js context
+        // so we do it here to
+        cookies.remove('id_token');
+        cookies.remove('id_token_org');
+        cookies.remove('id_token_dep');
+        goTo(redirect ?? options.logoutRedirectUrl ?? null);
+    };
+    const switchOrganization = (org, dep) => {
+        if (org)
+            cookies.set('id_token_org', org, { path: cookiesPath });
+        else
+            cookies.remove('id_token_org');
+        if (dep)
+            cookies.set('id_token_dep', dep, { path: cookiesPath });
+        else
+            cookies.remove('id_token_dep');
+        readCookies();
+    };
+    const setAdminMode = async (adminMode, redirect) => {
+        if (adminMode) {
+            const params = { adminMode: 'true' };
+            if (state.user != null)
+                params.email = state.user.email;
+            const url = loginUrl(redirect, params, true);
+            goTo(url);
+        }
+        else {
+            await customFetch(`${options.directoryUrl}/api/auth/adminmode`, { method: 'DELETE' });
+            goTo(redirect ?? null);
+        }
+    };
+    const asAdmin = async (user) => {
+        if (user) {
+            await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'POST', body: user });
+        }
+        else {
+            await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'DELETE' });
+        }
+        readCookies();
+    };
+    const cancelDeletion = async () => {
+        if (state.user == null)
+            return;
+        await customFetch(`${options.directoryUrl}/api/users/${state.user.id}`, { method: 'PATCH', body: ({ plannedDeletion: null }) });
+        readCookies();
+    };
+    const switchDark = (value) => {
+        const maxAge = 60 * 60 * 24 * 365; // 1 year
+        cookies.set('theme_dark', `${value}`, { maxAge, path: cookiesPath });
+        readCookies();
+    };
+    const switchLang = (value) => {
+        const maxAge = 60 * 60 * 24 * 365; // 1 year
+        cookies.set('i18n_lang', value, { maxAge, path: cookiesPath });
+        readCookies();
+    };
+    const keepalive = async () => {
+        if (state.user == null)
+            return;
+        window.localStorage.setItem('sd-keepalive' + options.sitePath, `${new Date().getTime()}`);
+        await customFetch(`${options.directoryUrl}/api/auth/keepalive`, { method: 'POST' });
+        readCookies();
+    };
+    // immediately performs a keepalive, but only on top windows (not iframes or popups)
+    // and only if it was not done very recently (maybe from a refreshed page next to this one)
+    if (!ssr && window.top === window.self) {
+        const lastKeepalive = window.localStorage.getItem('sd-keepalive' + options.sitePath);
+        if (!lastKeepalive || (new Date().getTime() - Number(lastKeepalive)) > 10000) {
+            await keepalive();
+        }
+    }
+    const session = {
+        state,
+        loginUrl,
+        login,
+        logout,
+        switchOrganization,
+        setAdminMode,
+        asAdmin,
+        cancelDeletion,
+        keepalive,
+        switchDark,
+        switchLang,
+        topLocation,
+        options
+    };
+    return session;
+}
+// uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
+export const sessionKey = Symbol('session');
+export async function createSession(initOptions) {
+    const session = await getSession(initOptions);
+    return {
+        install(app) { app.provide(sessionKey, session); },
+        value: session
+    };
+}
+export function useSession() {
+    const session = inject(sessionKey);
+    if (!session)
+        throw new Error('useSession requires using the plugin createSession');
+    return session;
+}
+export function useSessionAuthenticated(errorBuilder) {
+    const session = useSession();
+    if (!session.state.user) {
+        if (errorBuilder)
+            throw errorBuilder();
+        else
+            throw new Error('useSessionAuthenticated requires a logged in user');
+    }
+    return session;
+}
+export default useSession;

package/ui-notif-global.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    current: import("vue").Ref<{
+        type?: ("default" | "info" | "success" | "warning") | undefined;
+        msg: string;
+    } | {
+        type: "error";
+        msg: string;
+        error: any;
+        errorMsg: string;
+    } | null, import("./ui-notif.js").UiNotif | {
+        type?: ("default" | "info" | "success" | "warning") | undefined;
+        msg: string;
+    } | {
+        type: "error";
+        msg: string;
+        error: any;
+        errorMsg: string;
+    } | null>;
+    send: (partialNotif: import("./ui-notif.js").PartialUiNotif) => void;
+};
+export default _default;

package/ui-notif-global.js

@@ -0,0 +1,7 @@
+// same as use-ui-notif.js but in a module level singleton for convenience when not using SSR
+import { getUiNotif } from './ui-notif.js';
+// @ts-ignore
+if (import.meta.env?.SSR) {
+    throw new Error('this module uses a module level singleton, it cannot be used in SSR mode');
+}
+export default getUiNotif();

package/ui-notif.d.ts

@@ -0,0 +1,44 @@
+import type { Ref, App } from 'vue';
+export type UiNotif = UiNotifBase | UiNotifError;
+export interface PartialUiNotif {
+    type?: 'default' | 'info' | 'success' | 'warning' | 'error';
+    msg: string;
+    error?: any;
+    errorMsg?: string;
+}
+interface UiNotifBase {
+    type?: 'default' | 'info' | 'success' | 'warning';
+    msg: string;
+}
+interface UiNotifError {
+    type: 'error';
+    msg: string;
+    error: any;
+    errorMsg: string;
+}
+export declare const getUiNotif: () => {
+    current: Ref<{
+        type?: ("default" | "info" | "success" | "warning") | undefined;
+        msg: string;
+    } | {
+        type: "error";
+        msg: string;
+        error: any;
+        errorMsg: string;
+    } | null, UiNotif | {
+        type?: ("default" | "info" | "success" | "warning") | undefined;
+        msg: string;
+    } | {
+        type: "error";
+        msg: string;
+        error: any;
+        errorMsg: string;
+    } | null>;
+    send: (partialNotif: PartialUiNotif) => void;
+};
+export declare const uiNotifKey: unique symbol;
+export declare function createUiNotif(): {
+    install(app: App): void;
+};
+export declare function useUiNotif(): ReturnType<typeof getUiNotif>;
+export default useUiNotif;

package/ui-notif.js

@@ -0,0 +1,38 @@
+import { ref, inject } from 'vue';
+import inIframe from '@data-fair/lib-utils/in-iframe.js';
+function getFullNotif(notif) {
+    if (typeof notif === 'string')
+        return { msg: notif, type: 'default' };
+    if (notif.error) {
+        notif.type = 'error';
+        notif.errorMsg = (notif.error.response && (notif.error.response.data || notif.error.response.status)) || notif.error.message || notif.error;
+    }
+    notif.type = notif.type || 'default';
+    if (inIframe) {
+        window.top?.postMessage({ vIframe: true, uiNotification: notif }, '*');
+    }
+    else {
+        console.log('notification', notif);
+    }
+    throw new Error('invalid UI notification');
+}
+export const getUiNotif = () => {
+    const current = ref(null);
+    const send = (partialNotif) => {
+        current.value = getFullNotif(partialNotif);
+    };
+    return { current, send };
+};
+// uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
+export const uiNotifKey = Symbol('uiNotif');
+export function createUiNotif() {
+    const uiNotif = getUiNotif();
+    return { install(app) { app.provide(uiNotifKey, uiNotif); } };
+}
+export function useUiNotif() {
+    const session = inject(uiNotifKey);
+    if (!session)
+        throw new Error('useUiNotif requires using the plugin createUiNotif');
+    return session;
+}
+export default useUiNotif;

package/ws.d.ts

@@ -0,0 +1,8 @@
+import reconnectingWebSocketModule from 'reconnecting-websocket';
+export declare function useWS(path: string): {
+    opened: import("vue").Ref<boolean, boolean>;
+    ws: reconnectingWebSocketModule.default;
+    subscribe: <T>(channel: string, listener: (message: T) => void) => void;
+    unsubscribe: (channel: string, listener: (message: any) => void) => void;
+} | undefined;
+export default useWS;

package/ws.js

@@ -0,0 +1,66 @@
+import reconnectingWebSocketModule from 'reconnecting-websocket';
+import { ref, reactive, onScopeDispose } from 'vue';
+const ReconnectingWebSocket = reconnectingWebSocketModule;
+const getWS = (path) => {
+    if (!window.WebSocket)
+        return;
+    // @ts-ignore
+    if (import.meta.env?.SSR)
+        return;
+    const url = (window.location.origin + path).replace('http:', 'ws:').replace('https:', 'wss:');
+    const ws = new ReconnectingWebSocket(url);
+    const subscriptions = reactive({});
+    const opened = ref(false);
+    ws.addEventListener('open', () => {
+        opened.value = true;
+        for (const channel of Object.keys(subscriptions)) {
+            if (subscriptions[channel].length) {
+                ws.send(JSON.stringify({ type: 'subscribe', channel }));
+            }
+            else {
+                ws.send(JSON.stringify({ type: 'unsubscribe', channel }));
+                delete subscriptions[channel];
+            }
+        }
+    });
+    ws.addEventListener('close', () => {
+        opened.value = false;
+    });
+    ws.onmessage = (event) => {
+        const body = JSON.parse(event.data);
+        if (body.type === 'message') {
+            if (subscriptions[body.channel]?.length) {
+                for (const listener of subscriptions[body.channel]) {
+                    listener(body.data);
+                }
+            }
+        }
+    };
+    function subscribe(channel, listener) {
+        if (!subscriptions[channel]) {
+            subscriptions[channel] = [];
+            if (opened.value)
+                ws.send(JSON.stringify({ type: 'subscribe', channel }));
+        }
+        subscriptions[channel].push(listener);
+        onScopeDispose(() => {
+            unsubscribe(channel, listener);
+        });
+    }
+    const unsubscribe = (channel, listener) => {
+        if (subscriptions[channel]) {
+            subscriptions[channel] = subscriptions[channel].filter(l => l !== listener);
+            if (subscriptions[channel].length === 0 && opened.value) {
+                ws.send(JSON.stringify({ type: 'unsubscribe', channel }));
+                delete subscriptions[channel];
+            }
+        }
+    };
+    return { opened, ws, subscribe, unsubscribe };
+};
+const sockets = {};
+export function useWS(path) {
+    sockets[path] = sockets[path] ?? getWS(path);
+    return sockets[path];
+}
+export default useWS;