sprintify-ui 0.11.5 → 0.11.7

package/dist/types/components/BaseForm.vue.d.ts

@@ -66,6 +66,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Show a browser warning when leaving the page with unsaved changes
+     */
+    showLeavePageWarning: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     /**
      * Autosave the form every time a input is changed
      */
@@ -134,6 +141,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Show a browser warning when leaving the page with unsaved changes
+     */
+    showLeavePageWarning: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     /**
      * Autosave the form every time a input is changed
      */
@@ -155,6 +169,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     showLoadingMask: boolean;
     showNotificationOnError: boolean;
     showNotificationOnSuccess: boolean;
+    showLeavePageWarning: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/components/BaseHeader.vue.d.ts

@@ -13,6 +13,7 @@ type __VLS_Props = {
         tooltip?: string;
         to?: RouteRecordRaw;
         href?: string;
+        target?: string;
     }[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
@@ -31,6 +32,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
         tooltip?: string;
         to?: RouteRecordRaw;
         href?: string;
+        target?: string;
     }[];
     subtitle: string;
     badge: BaseBadgeProps;

package/dist/types/index.d.ts

@@ -50,6 +50,7 @@ declare const messages: {
             go_to_page: string;
             invalid_value: string;
             just_now: string;
+            leave_page_warning: string;
             maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
@@ -151,6 +152,7 @@ declare const messages: {
             go_to_page: string;
             invalid_value: string;
             just_now: string;
+            leave_page_warning: string;
             maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseForm.mdx

@@ -19,6 +19,7 @@ It also handles errors gracefully—if you're using **BaseFields** (or component
 - **Sending Requests:** The component can be bound to an `axiosInstance`, which it uses to send POST, PUT, PATCH, or any other method requests to a specified `url`.
 - **Formatting JSON Payload:** By default, the form data is sent as JSON, but you can switch to `formData` by adjusting the `format` prop.
 - **Loading State:** A loading spinner can be displayed while the form is submitting. This spinner can have custom Tailwind CSS classes via the `twLoadingMask` prop, and it can be toggled on/off using `showLoadingMask`.
+- **Leave Warning (Opt-in):** When `showLeavePageWarning` is enabled, the component can show a native browser warning before leaving the page if form data has changed and is not saved yet.
 - **Error and Success Handling:** 
   - The component can display error messages next to fields (if those fields are wrapped in a **BaseField** and `name` prop is set and equivalent to the server response).  
   - It can also show a global success or error notification, which is controlled by `showNotificationOnSuccess` and `showNotificationOnError`. 
@@ -85,4 +86,4 @@ In the example below, the form will automatically save after a 400ms delay whene
 
 ## API
  
-<Controls />
+<Controls />

package/src/components/BaseForm.vue

@@ -51,7 +51,7 @@ import { serialize } from 'object-to-formdata';
 import { Method, DataFormat } from '@/types';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { config, useSnackbarsStore } from '@/index';
-import { debounce, get, isArray } from 'lodash';
+import { cloneDeep, debounce, get, isArray, isEqual } from 'lodash';
 import { t } from '@/i18n';
 import { twMerge } from 'tailwind-merge';
 
@@ -118,6 +118,13 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  /**
+   * Show a browser warning when leaving the page with unsaved changes
+   */
+  showLeavePageWarning: {
+    default: false,
+    type: Boolean,
+  },
   /**
    * Autosave the form every time a input is changed
    */
@@ -132,6 +139,8 @@ const emit = defineEmits(['error', 'success']);
 const form = ref<null | HTMLFormElement>(null);
 const loading = ref(false);
 const errors = ref<Record<string, string[]>>({});
+const dataSnapshot = ref<Record<string, any>>(cloneDeep(props.data));
+const hasUnsavedChanges = ref(false);
 
 const httpClient = computed((): AxiosInstance => {
   if (props.axiosInstance) {
@@ -235,6 +244,7 @@ async function query() {
       clearErrors();
 
       successHandler(response);
+      syncDataSnapshot();
 
       emit('success', response);
     })
@@ -322,6 +332,50 @@ function clearErrors(name = null): void {
   }
 }
 
+function syncDataSnapshot(): void {
+  dataSnapshot.value = cloneDeep(props.data);
+  hasUnsavedChanges.value = false;
+}
+
+function handleBeforeUnload(event: BeforeUnloadEvent): string | undefined {
+  if (!props.showLeavePageWarning || !hasUnsavedChanges.value) {
+    return;
+  }
+
+  const warningMessage = t('sui.leave_page_warning');
+
+  event.preventDefault();
+  event.returnValue = warningMessage;
+
+  return warningMessage;
+}
+
+watch(
+  () => props.data,
+  (value) => {
+    hasUnsavedChanges.value = !isEqual(value, dataSnapshot.value);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(() => props.data, syncDataSnapshot);
+
+onMounted(() => {
+  syncDataSnapshot();
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('beforeunload', handleBeforeUnload);
+  }
+});
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+  }
+});
+
 const disablingFields = reactive(new Set<string>());
 
 function disabledForm(uuid: string) {

package/src/components/BaseHeader.vue

@@ -54,6 +54,7 @@
               :is="attribute.to ? 'router-link' : (attribute.href ? 'a' : 'div')"
               :to="attribute.to"
               :href="attribute.href"
+              :target="attribute.target ?? undefined"
               class="flex items-center gap-1.5"
             >
               <BaseIcon
@@ -107,7 +108,7 @@ const props = withDefaults(
   defineProps<{
     title: string;
     subtitle?: string;
-    attributes?: { icon?: string; label: string; tooltip?: string, to?: RouteRecordRaw, href?: string }[];
+    attributes?: { icon?: string; label: string; tooltip?: string, to?: RouteRecordRaw, href?: string, target?: string }[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';

package/src/lang/en.json

@@ -42,6 +42,7 @@
     "go_to_page": "Go to ",
     "invalid_value": "Invalid value",
     "just_now": "Just now",
+    "leave_page_warning": "Changes you made may not be saved.",
     "maximum_x_decimal_places": "Maximum 1 decimal place|Maximum {count} decimal places",
     "min_x_characters": "{x} characters minimum",
     "month": "Month",

package/src/lang/fr.json

@@ -42,6 +42,7 @@
     "go_to_page": "Page",
     "invalid_value": "Valeur invalide",
     "just_now": "à l’instant",
+    "leave_page_warning": "Les modifications que vous avez apportées pourraient ne pas être enregistrées.",
     "maximum_x_decimal_places": "Maximum 1 décimale|Maximum {count} décimales",
     "min_x_characters": "{x} caractères minimum",
     "month": "Mois",