@data-fair/lib-vue 1.25.5 → 1.27.0

package/fetch.d.ts

@@ -6,6 +6,7 @@ export type UseFetchOptions = {
     watch?: Boolean;
     notifError?: Boolean;
     immediate?: Boolean;
+    waitFor?: MaybeRefOrGetter<Boolean>;
 };
 type OptionalUrl = string | null | undefined;
 export declare function useFetch<T>(url: MaybeRefOrGetter<OptionalUrl>, options?: UseFetchOptions): {

package/fetch.js

@@ -8,6 +8,9 @@ export function useFetch(url, options = {}) {
         url = computed(url);
     const fullUrl = computed(() => {
         let fullUrl = toValue(url);
+        const waitFor = toValue(options.waitFor);
+        if (waitFor === false)
+            return null;
         if (!fullUrl)
             return null;
         const query = toValue(options.query);

package/leave-guard.d.ts

@@ -0,0 +1,7 @@
+import type { MaybeRefOrGetter } from 'vue';
+type LeaveGuardOptions = {
+    locale?: MaybeRefOrGetter<string>;
+    message?: string;
+};
+export declare const useLeaveGuard: (isDirty: MaybeRefOrGetter<boolean>, options?: LeaveGuardOptions) => void;
+export default useLeaveGuard;

package/leave-guard.js

@@ -0,0 +1,26 @@
+// maybe this will be a part of vueuse someday https://github.com/vueuse/vueuse/issues/4350
+import { onBeforeRouteLeave } from 'vue-router';
+import { toValue, onMounted, onUnmounted } from 'vue';
+const messages = {
+    fr: 'Attention ! La page contient des modifications non enregistrées.',
+    en: 'Warning ! The page contains unsaved modifications.'
+};
+export const useLeaveGuard = (isDirty, options) => {
+    const getMessage = () => options?.message ?? messages[options?.locale ? toValue(options.locale) : 'en'] ?? messages.en;
+    // vue router guard
+    onBeforeRouteLeave(() => {
+        if (!toValue(isDirty))
+            return;
+        return window.confirm(getMessage());
+    });
+    // browser guard
+    const handleWindowClose = (e) => {
+        if (!toValue(isDirty))
+            return;
+        e.preventDefault();
+        e.returnValue = getMessage();
+    };
+    onMounted(() => window.addEventListener('beforeunload', handleWindowClose));
+    onUnmounted(() => window.removeEventListener('beforeunload', handleWindowClose));
+};
+export default useLeaveGuard;

package/package.json

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

package/vite.d.ts

@@ -8,6 +8,7 @@ export declare const autoImports: (string | {
     '@data-fair/lib-vue/edit-fetch.js': string[];
     '@data-fair/lib-vue/ws.js': string[];
     '@data-fair/lib-vue/async-action.js': string[];
+    '@data-fair/lib-vue/leave-guard.js': string[];
     '@data-fair/lib-vue/deep-diff.js': string[];
     '@data-fair/lib-vue/format/bytes.js': string[];
 })[];

package/vite.js

@@ -13,6 +13,7 @@ export const autoImports = [
         '@data-fair/lib-vue/edit-fetch.js': ['useEditFetch'],
         '@data-fair/lib-vue/ws.js': ['useWS'],
         '@data-fair/lib-vue/async-action.js': ['useAsyncAction'],
+        '@data-fair/lib-vue/leave-guard.js': ['useLeaveGuard'],
         '@data-fair/lib-vue/deep-diff.js': ['computedDeepDiff', 'watchDeepDiff'],
         '@data-fair/lib-vue/format/bytes.js': ['formatBytes'],
     }