@data-fair/lib-vue 1.21.1 → 1.23.0

package/async-action.js

@@ -1,44 +1,47 @@
 // similar to withUiNotif but more powerful
-import { ref, readonly, shallowReadonly, shallowRef } from 'vue'
-import { useUiNotif, getFullNotif, getErrorMsg } from './ui-notif.js'
-export function useAsyncAction (fn, options) {
-  if (typeof options === 'function') {
-    options = { finally: options }
-  }
-  const { sendUiNotif } = useUiNotif()
-  const notif = shallowRef()
-  const loading = ref(false)
-  const error = ref()
-  const execute = async function (...args) {
-    loading.value = true
-    notif.value = undefined
-    error.value = undefined
-    try {
-      const result = await fn(...args)
-      if (options?.success) {
-        const successNotif = getFullNotif(options?.success, 'success')
-        notif.value = successNotif
-        if (options?.catch !== 'success' && options?.catch !== 'all') {
-          sendUiNotif(successNotif)
+import { ref, readonly, shallowReadonly, shallowRef } from 'vue';
+import { useUiNotif, getFullNotif, getErrorMsg } from './ui-notif.js';
+export function useAsyncAction(fn, options) {
+    if (typeof options === 'function') {
+        options = { finally: options };
+    }
+    const { sendUiNotif } = useUiNotif();
+    const notif = shallowRef();
+    const loading = ref(false);
+    const error = ref();
+    const execute = async function (...args) {
+        loading.value = true;
+        notif.value = undefined;
+        error.value = undefined;
+        try {
+            const result = await fn(...args);
+            if (options?.success) {
+                const successNotif = getFullNotif(options?.success, 'success');
+                notif.value = successNotif;
+                if (options?.catch !== 'success' && options?.catch !== 'all') {
+                    sendUiNotif(successNotif);
+                }
+            }
+            loading.value = false;
+            if (options?.finally)
+                await options?.finally();
+            return result;
         }
-      }
-      loading.value = false
-      if (options?.finally) { await options?.finally() }
-      return result
-    } catch (err) {
-      const abortError = err.name === 'AbortError' || err.cause?.name === 'AbortError'
-      if (!abortError) {
-        error.value = getErrorMsg(err)
-        const errorNotif = getFullNotif({ msg: options?.error ?? '', error: err })
-        notif.value = errorNotif
-        if (options?.catch !== 'error' && options?.catch !== 'all') {
-          sendUiNotif(errorNotif)
+        catch (err) {
+            const abortError = err.name === 'AbortError' || err.cause?.name === 'AbortError';
+            if (!abortError) {
+                error.value = getErrorMsg(err);
+                const errorNotif = getFullNotif({ msg: options?.error ?? '', error: err });
+                notif.value = errorNotif;
+                if (options?.catch !== 'error' && options?.catch !== 'all') {
+                    sendUiNotif(errorNotif);
+                }
+            }
+            loading.value = false;
+            if (options?.finally && !abortError)
+                await options?.finally();
         }
-      }
-      loading.value = false
-      if (options?.finally && !abortError) { await options?.finally() }
-    }
-  }
-  return { execute, notif: shallowReadonly(notif), loading: readonly(loading), error: readonly(error) }
+    };
+    return { execute, notif: shallowReadonly(notif), loading: readonly(loading), error: readonly(error) };
 }
-export default useAsyncAction
+export default useAsyncAction;

package/computed-deep-diff.js

@@ -0,0 +1,9 @@
+import { computed } from 'vue';
+import equal from 'fast-deep-equal';
+export const computedDeepDiff = (getter, options) => {
+    return computed((oldValue) => {
+        const newValue = getter();
+        return (oldValue !== undefined && equal(newValue, oldValue)) ? oldValue : newValue;
+    }, options);
+};
+export default computedDeepDiff;

package/concept-filters.d.ts

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

package/concept-filters.js

@@ -1,22 +1,28 @@
 // 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]
-      }
+import { reactive, watch } from 'vue';
+export function getConceptFilters(searchParams, datasetId) {
+    const conceptFilters = {};
+    const datasetFiltersPrefix = datasetId && `_d_${datasetId}_`;
+    for (const key of Object.keys(searchParams)) {
+        if (key.startsWith('_c_'))
+            conceptFilters[key] = searchParams[key];
+        if (datasetFiltersPrefix && key.startsWith(datasetFiltersPrefix)) {
+            conceptFilters[key.replace(datasetFiltersPrefix, '')] = searchParams[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
+    return conceptFilters;
+}
+export function useConceptFilters(reactiveSearchParams, datasetId) {
+    const conceptFilters = reactive({});
+    // we use a watch and mutations on a reactive to prevent triggering reactivity on unrelated changes in reactive search params
+    watch(reactiveSearchParams, () => {
+        const newConceptFilters = getConceptFilters(reactiveSearchParams, datasetId);
+        Object.assign(conceptFilters, newConceptFilters);
+        for (const key of Object.keys(conceptFilters)) {
+            if (!(key in newConceptFilters))
+                delete conceptFilters[key];
+        }
+    }, { immediate: true });
+    return conceptFilters;
 }
-export default useConceptFilters
+export default useConceptFilters;

package/deep-diff.d.ts

@@ -0,0 +1,3 @@
+import { type ComputedGetter, type ComputedOptions, type WatchSource, type WatchCallback, type WatchOptions } from 'vue';
+export declare const computedDeepDiff: <Type>(getter: ComputedGetter<Type>, options: ComputedOptions) => import("vue").ComputedRef<Type>;
+export declare const watchDeepDiff: (source: WatchSource, callback: WatchCallback, options: WatchOptions) => import("vue").WatchHandle;

package/deep-diff.js

@@ -0,0 +1,14 @@
+import { computed, watch } from 'vue';
+import equal from 'fast-deep-equal';
+export const computedDeepDiff = (getter, options) => {
+    return computed((oldValue) => {
+        const newValue = getter();
+        return (oldValue !== undefined && equal(newValue, oldValue)) ? oldValue : newValue;
+    }, options);
+};
+export const watchDeepDiff = (source, callback, options) => {
+    return watch(source, (newValue, oldValue, onCleanup) => {
+        if (!equal(newValue, oldValue))
+            callback(newValue, oldValue, onCleanup);
+    }, options);
+};

package/fetch.js

@@ -1,53 +1,60 @@
-import { ofetch } from 'ofetch'
-import { withQuery } from 'ufo'
-import { computed, isRef, watch, ref, shallowRef, readonly, shallowReadonly } from 'vue'
-import { useUiNotif } from '@data-fair/lib-vue/ui-notif.js'
-export function useFetch (url, options = {}) {
-  const { sendUiNotif } = useUiNotif()
-  if (typeof url === 'function') { url = computed(url) }
-  const fullUrl = computed(() => {
-    let fullUrl = isRef(url) ? url.value : url
-    if (!fullUrl) { return null }
-    const query = isRef(options.query) ? options.query.value : options.query
-    if (query) { fullUrl = withQuery(fullUrl, query) }
-    return fullUrl
-  })
-  const data = shallowRef(null)
-  const loading = ref(false)
-  const initialized = ref(false)
-  const error = shallowRef(null)
-  let abortController
-  const refresh = async () => {
-    initialized.value = true
-    if (!fullUrl.value) { return null }
-    error.value = null
-    if (abortController) { abortController.abort() }
-    loading.value = true
-    abortController = new AbortController()
-    try {
-      data.value = await ofetch(fullUrl.value, { signal: abortController.signal })
-    } catch (err) {
-      if (err.name !== 'AbortError' && err.cause?.name !== 'AbortError') {
-        error.value = err
-        if (options.notifError !== false) {
-          sendUiNotif({ msg: '', error: err })
+import { ofetch } from 'ofetch';
+import { withQuery } from 'ufo';
+import { computed, isRef, watch, ref, shallowRef, readonly, shallowReadonly } from 'vue';
+import { useUiNotif } from '@data-fair/lib-vue/ui-notif.js';
+export function useFetch(url, options = {}) {
+    const { sendUiNotif } = useUiNotif();
+    if (typeof url === 'function')
+        url = computed(url);
+    const fullUrl = computed(() => {
+        let fullUrl = isRef(url) ? url.value : url;
+        if (!fullUrl)
+            return null;
+        const query = isRef(options.query) ? options.query.value : options.query;
+        if (query)
+            fullUrl = withQuery(fullUrl, query);
+        return fullUrl;
+    });
+    const data = shallowRef(null);
+    const loading = ref(false);
+    const initialized = ref(false);
+    const error = shallowRef(null);
+    let abortController;
+    const refresh = async () => {
+        initialized.value = true;
+        if (!fullUrl.value)
+            return null;
+        error.value = null;
+        if (abortController)
+            abortController.abort();
+        loading.value = true;
+        abortController = new AbortController();
+        try {
+            data.value = await ofetch(fullUrl.value, { signal: abortController.signal });
         }
-      }
+        catch (err) {
+            if (err.name !== 'AbortError' && err.cause?.name !== 'AbortError') {
+                error.value = err;
+                if (options.notifError !== false) {
+                    sendUiNotif({ msg: '', error: err });
+                }
+            }
+        }
+        loading.value = false;
+        return data.value;
+    };
+    if (options.watch !== false) {
+        watch(fullUrl, () => {
+            if (options.immediate !== false || initialized.value)
+                refresh();
+        }, { immediate: true });
     }
-    loading.value = false
-    return data.value
-  }
-  if (options.watch !== false) {
-    watch(fullUrl, () => {
-      if (options.immediate !== false || initialized.value) { refresh() }
-    }, { immediate: true })
-  }
-  return {
-    initialized: readonly(initialized),
-    data: shallowReadonly(data),
-    loading: readonly(loading),
-    error: shallowReadonly(error),
-    refresh,
-  }
+    return {
+        initialized: readonly(initialized),
+        data: shallowReadonly(data),
+        loading: readonly(loading),
+        error: shallowReadonly(error),
+        refresh,
+    };
 }
-export default useFetch
+export default useFetch;

package/locale-dayjs-global.js

@@ -1,8 +1,8 @@
 // same as locale-dayjs but in a module level singleton for convenience when not using SSR
-import { getLocaleDayjs } from './locale-dayjs.js'
+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')
+    throw new Error('this module uses a module level singleton, it cannot be used in SSR mode');
 }
-console.error('locale-dayjs-global is deprecated, please use create + use')
-export const { locale, dayjs } = getLocaleDayjs()
+console.error('locale-dayjs-global is deprecated, please use create + use');
+export const { locale, dayjs } = getLocaleDayjs();

package/locale-dayjs.js

@@ -1,38 +1,39 @@
-import { inject } 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'
-import duration from 'dayjs/plugin/duration.js'
-dayjs.extend(localizedFormat)
-dayjs.extend(relativeTime)
-dayjs.extend(duration)
+import { inject } 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';
+import duration from 'dayjs/plugin/duration.js';
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);
+dayjs.extend(duration);
 // main functionality, use through the createLocaleDayjs plugin and useLocaleDayjs composable
 // or as a global singleton through ./locale-dayjs-global.js
-export function getLocaleDayjs (locale) {
-  locale = locale ?? 'fr'
-  return {
-    locale,
-    duration: (...args) => {
-      // @ts-ignore
-      return dayjs.duration(...args).locale(locale)
-    },
-    dayjs: (...args) => {
-      // @ts-ignore
-      return dayjs(...args).locale(locale)
-    }
-  }
+export function getLocaleDayjs(locale) {
+    locale = locale ?? 'fr';
+    return {
+        locale,
+        duration: ((...args) => {
+            // @ts-ignore
+            return dayjs.duration(...args).locale(locale);
+        }),
+        dayjs: ((...args) => {
+            // @ts-ignore
+            return dayjs(...args).locale(locale);
+        })
+    };
 }
 // 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 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 function useLocaleDayjs() {
+    const localeDayjs = inject(localeDayjsKey);
+    if (!localeDayjs)
+        throw new Error('useLocaleDayjs requires using the plugin createLocaleDayjs');
+    return localeDayjs;
 }
-export default useLocaleDayjs
+export default useLocaleDayjs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vue",
-  "version": "1.21.1",
+  "version": "1.23.0",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [
@@ -30,6 +30,7 @@
   "dependencies": {
     "@data-fair/lib-common-types": "^1.7.1",
     "@data-fair/lib-utils": "^1.0.0",
+    "fast-deep-equal": "^3.1.3",
     "jwt-decode": "^4.0.0",
     "universal-cookie": "^7.2.0"
   },

package/reactive-search-params-global.js

@@ -1,7 +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'
+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')
+    throw new Error('this module uses a module level singleton, it cannot be used in SSR mode');
 }
-export default getReactiveSearchParams()
+export default getReactiveSearchParams();