@data-fair/lib-vue 0.1.0 → 1.0.0

package/concept-filters.js

@@ -1,24 +1,22 @@
 // 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;
+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;
+export default useConceptFilters

package/format/bytes.js

@@ -1,16 +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];
-        }
+  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
+  }
+  return '' // this is only for strict typing, but the code cannot go there, the return in the loop is always called
 }
-export default formatBytes;
+export default formatBytes

package/format/field.js

@@ -1,28 +1,21 @@
 // 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' ||
+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');
-        }
+      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;
+  }
+  return '' + value
 }
-export function getFieldLabel(field) {
-    return field.title || field['x-originalName'] || field.key;
+export function getFieldLabel (field) {
+  return field.title || field['x-originalName'] || field.key
 }

package/locale-dayjs-global.js

@@ -1,7 +1,7 @@
 // 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')
 }
-export const { locale, dayjs } = getLocaleDayjs();
+export const { locale, dayjs } = getLocaleDayjs()

package/locale-dayjs-types.js

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

package/locale-dayjs.js

@@ -1,32 +1,31 @@
-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);
+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);
-        }
-    };
+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 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": "0.1.0",
+  "version": "1.0.0",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [
@@ -9,11 +9,14 @@
   ],
   "author": "",
   "license": "MIT",
+  "scripts": {
+    "prepublishOnly": "cd .. && npm run prepublishOnly"
+  },
   "peerDependencies": {
-    "dayjs": "^1.11.13",
-    "ofetch": "^1.4.0",
-    "reconnecting-websocket": "^4.4.0",
-    "vue": "^3.5.11"
+    "dayjs": "1",
+    "ofetch": "1",
+    "reconnecting-websocket": "4",
+    "vue": "3"
   },
   "peerDependenciesMeta": {
     "reconnecting-websocket": {
@@ -24,12 +27,13 @@
     }
   },
   "dependencies": {
-    "@data-fair/lib-common-types": "^0.1.0",
-    "@data-fair/lib-utils": "^0.2.0",
+    "@data-fair/lib-common-types": "^1.1.0",
+    "@data-fair/lib-utils": "^1.0.0",
     "jwt-decode": "^4.0.0",
     "universal-cookie": "^7.2.0"
   },
   "devDependencies": {
+    "reconnecting-websocket": "^4.4.0",
     "vue-router": "^4.4.5"
   },
   "type": "module"

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()

package/reactive-search-params.js

@@ -1,155 +1,139 @@
 // 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);
+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];
+  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)
     }
-};
-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
-        }
+    if (Array.isArray(value)) {
+      const lastValue = value[value.length - 1]
+      if (typeof lastValue === 'string') {
+        state[key] = lastValue
+        unusedKeys.delete(key)
+      }
     }
-    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 });
-        });
+  }
+  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
     }
-    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();
-        });
+  }
+  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)
+      }
     }
-    return state;
+    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 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 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;
-        }
-    });
-};
+  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];
-        }
-    });
-};
+  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;
-        }
-    });
-};
+  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;
+  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