@data-fair/lib-vue 1.15.5 → 1.16.0

package/async-action.js

@@ -1,9 +1,9 @@
 // similar to withUiNotif but more powerful
-import { ref } from 'vue'
+import { ref, readonly, shallowReadonly, shallowRef } from 'vue'
 import { useUiNotif, getFullNotif, getErrorMsg } from './ui-notif.js'
 export function useAsyncAction (fn, options) {
   const { sendUiNotif } = useUiNotif()
-  const notif = ref()
+  const notif = shallowRef()
   const loading = ref(false)
   const error = ref()
   const execute = async function (...args) {
@@ -31,6 +31,6 @@ export function useAsyncAction (fn, options) {
       loading.value = false
     }
   }
-  return { execute, notif, loading, error }
+  return { execute, notif: shallowReadonly(notif), loading: readonly(loading), error: readonly(error) }
 }
 export default useAsyncAction

package/fetch.d.ts

@@ -5,7 +5,8 @@ type UseFetchOptions = {
     watch?: Boolean;
     notifError?: Boolean;
 };
-export declare function useFetch<T>(url: string | Ref<string> | (() => string), options?: UseFetchOptions): {
+type OptionalUrl = string | null | undefined;
+export declare function useFetch<T>(url: OptionalUrl | Ref<OptionalUrl> | (() => OptionalUrl), options?: UseFetchOptions): {
     data: Ref<T | null>;
     loading: Ref<boolean>;
     initialized: Ref<boolean>;

package/fetch.js

@@ -1,22 +1,24 @@
 import { ofetch } from 'ofetch'
 import { withQuery } from 'ufo'
-import { computed, isRef, watch, ref } from 'vue'
+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 = ref(null)
+  const data = shallowRef(null)
   const loading = ref(false)
   const initialized = ref(false)
-  const error = ref(null)
+  const error = shallowRef(null)
   let abortController
   const refresh = async () => {
+    if (!fullUrl.value) { return null }
     initialized.value = true
     error.value = null
     if (abortController) { abortController.abort() }
@@ -38,6 +40,12 @@ export function useFetch (url, options = {}) {
   if (options.watch !== false) {
     watch(fullUrl, refresh, { immediate: true })
   }
-  return { initialized, data, loading, refresh, error }
+  return {
+    initialized: readonly(initialized),
+    data: shallowReadonly(data),
+    loading: readonly(loading),
+    error: shallowReadonly(error),
+    refresh,
+  }
 }
 export default useFetch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vue",
-  "version": "1.15.5",
+  "version": "1.16.0",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [

package/session.js

@@ -1,5 +1,6 @@
+import { shallowReadonly } from 'vue'
 import { FetchError } from 'ofetch'
-import { reactive, computed, watch, inject, ref } from 'vue'
+import { reactive, computed, watch, inject, ref, shallowRef, readonly } from 'vue'
 import { ofetch } from 'ofetch'
 import { jwtDecode } from 'jwt-decode'
 import cookiesModule from 'universal-cookie'
@@ -66,8 +67,8 @@ export async function getSession (initOptions) {
   })
   // the core state of the session that is filled by reading cookies
   const state = reactive({})
-  const fullSite = ref(null)
-  const site = ref(null)
+  const fullSite = shallowRef(null)
+  const site = shallowRef(null)
   const theme = ref(null)
   // 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)
@@ -283,9 +284,9 @@ export async function getSession (initOptions) {
     account: computed(() => state.account),
     accountRole: computed(() => state.accountRole),
     lang: computed(() => state.lang),
-    theme,
-    site,
-    fullSite,
+    theme: readonly(theme),
+    site: shallowReadonly(site),
+    fullSite: shallowReadonly(fullSite),
     loginUrl,
     login,
     logout,

package/ui-notif.d.ts

@@ -22,25 +22,7 @@ export declare function getErrorCode(error: any): number;
 export declare function getErrorMsg(error: any): string;
 export declare function getFullNotif(notif: PartialUiNotif, defaultType?: UiNotifBase['type']): UiNotif;
 export declare const getUiNotif: () => {
-    notification: import("vue").Ref<{
-        type?: ("default" | "info" | "success" | "warning") | undefined;
-        msg: string;
-    } | {
-        type: "error";
-        msg: string;
-        error?: any;
-        errorMsg: string;
-        clientError?: boolean | undefined;
-    } | null, UiNotif | {
-        type?: ("default" | "info" | "success" | "warning") | undefined;
-        msg: string;
-    } | {
-        type: "error";
-        msg: string;
-        error?: any;
-        errorMsg: string;
-        clientError?: boolean | undefined;
-    } | null>;
+    notification: import("vue").ShallowRef<UiNotif | null, UiNotif | null>;
     sendUiNotif: (partialNotif: PartialUiNotif) => void;
 };
 export declare const uiNotifKey: unique symbol;

package/ui-notif.js

@@ -1,7 +1,7 @@
 // simple composable to display store a UI notification
 // this will be transmitted to frame parent if available (compatible with v-iframe uiNotification message type)
 // or can be displayed locally by @data-fair/lib-vuetify/ui-notif.vue
-import { ref, inject } from 'vue'
+import { shallowRef, inject } from 'vue'
 import inIframe from '@data-fair/lib-utils/in-iframe.js'
 export function getErrorCode (error) {
   if (typeof error === 'string') { return 500 }
@@ -37,7 +37,7 @@ export function getFullNotif (notif, defaultType = 'default') {
   }
 }
 export const getUiNotif = () => {
-  const notification = ref(null)
+  const notification = shallowRef(null)
   function sendUiNotif (partialNotif) {
     const notif = notification.value = getFullNotif(partialNotif)
     if (inIframe) {