@data-fair/lib-vue 1.25.5 → 1.26.0

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.26.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'],
     }