adminforth 2.25.1 → 2.26.0-next.10

package/dist/spa/src/components/ResourceListTable.vue

@@ -10,7 +10,7 @@
             <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
         </div>      
     </div>
-    <table v-else class=" w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
+    <table v-else class="w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
 
       <tbody>
         <!-- table header -->
@@ -64,7 +64,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter((c: AdminForthResourceColumnInputCommon) => c.showIn?.list).length + 2"
+          :columns="resource?.columns.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list).length + 2"
           :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
@@ -182,7 +182,7 @@
 
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
                   :key="action.id"
                 >
                     <component
@@ -339,7 +339,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -360,7 +360,7 @@ const props = defineProps<{
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
   customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclaration,
+  tableRowReplaceInjection?: AdminForthComponentDeclarationFull,
 }>();
 
 // emits, update page
@@ -436,7 +436,7 @@ watch(() => props.rows, (newRows) => {
   columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id: string) {
+function addToCheckedValues(id: string | number) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -468,7 +468,7 @@ const allFromThisPageChecked = computed(() => {
   if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
-const ascArr = computed(() => sort.value.filter((s:any) => s.direction === 'asc').map((s: any) => s.field));
+const ascArr = computed(() => sort.value.filter((s: any) => s.direction === 'asc').map((s: any) => s.field));
 const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
@@ -487,9 +487,9 @@ function onSortButtonClick(event: any, field: string) {
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {
-      sort.value = sort.value.map((s: any) => s.field === field ? {field, direction: 'desc'} : s);
+      sort.value = sort.value.map((s) => s.field === field ? {field, direction: 'desc'} : s);
     } else {
-      sort.value = sort.value.filter((s: any) => s.field !== field);
+      sort.value = sort.value.filter((s) => s.field !== field);
     }
   }
 }
@@ -576,7 +576,7 @@ async function deleteRecord(row: any) {
 const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
 async function startCustomAction(actionId: string, row: any, extraData: Record<string, any> = {}) {
-  console.log('Starting custom action', actionId, row);
+
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
@@ -586,7 +586,7 @@ async function startCustomAction(actionId: string, row: any, extraData: Record<s
       resourceId: props.resource?.resourceId,
       actionId: actionId,
       recordId: row._primaryKeyValue,
-      extra: extraData,
+      extra: extraData
     }
   });
   

package/dist/spa/src/components/ResourceListTableVirtual.vue

@@ -18,8 +18,8 @@
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-20 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
-          <td scope="col" class="list-table-header-cell  p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
+        <tr class="t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+          <td scope="col" class="list-table-header-cell p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
               :disabled="!rows || !rows.length"
@@ -29,7 +29,7 @@
             </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell  px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
+          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
           
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
                 class="flex items-center " :class="{'cursor-pointer':c.sortable}">
@@ -69,7 +69,7 @@
         <SkeleteLoader 
           v-if="!rows" 
           :columns="resource?.columns.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list).length + 2"
-          :rows="rowHeights.length || 20"
+          :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
         />
@@ -94,7 +94,6 @@
 
         <!-- Visible rows -->
         <component
-            v-else
             v-for="(row, rowI) in visibleRows"
             :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
             :key="`row_${row._primaryKeyValue}`"
@@ -108,7 +107,7 @@
             :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
             @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
          >
-        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading" @click="(e)=>e.stopPropagation()">
+        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
             @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
@@ -116,7 +115,7 @@
           >
             <span class="sr-only">{{ $t('checkbox') }}</span>
           </Checkbox>
-          </td>
+        </td>
           <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4" :class="{'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
@@ -177,7 +176,7 @@
                 <template v-slot:tooltip>
                   {{ $t('Delete item') }}
                 </template>
-              </Tooltip>                
+              </Tooltip>
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -191,7 +190,7 @@
               </template>
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
                   :key="action.id"
                 >
                   <CallActionWrapper
@@ -251,9 +250,9 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
+  <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="inline-flex "
+    <div class="af-pagination-buttons-container inline-flex "
       v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
     >
         <!-- Buttons -->
@@ -279,11 +278,10 @@
           type="text"
           v-model="pageInput"
           :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-          class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+          class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
           @keydown="onPageKeydown($event)"
           @blur="validatePageInput()"
-        >
-        </input>
+        />
 
         <button
           class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
@@ -309,7 +307,7 @@
         <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
         <template v-else-if="resource && totalRows > 0">
           
-          <span class="hidden sm:inline">
+          <span class="af-pagination-info hidden sm:inline">
             <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
               <template v-slot:from>
                 <strong>{{ from }}</strong>
@@ -343,7 +341,7 @@
 <script setup lang="ts">
 
 
-import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref, onUnmounted } from 'vue';
+import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } from 'vue';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
@@ -352,18 +350,15 @@ import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 import { getIcon } from '@/utils';
-import {
-  IconInboxOutline,
-} from '@iconify-prerendered/vue-flowbite';
-
 import {
   IconEyeSolid,
   IconPenSolid,
-  IconTrashBinSolid
+  IconTrashBinSolid,
+  IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -387,7 +382,7 @@ const props = defineProps<{
   itemHeight?: number,
   bufferSize?: number,
   customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclaration
+  tableRowReplaceInjection?: AdminForthComponentDeclarationFull
 }>();
 
 // emits, update page
@@ -463,7 +458,7 @@ watch(() => props.rows, (newRows) => {
   columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id: any) {
+function addToCheckedValues(id: string | number) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -499,7 +494,7 @@ const ascArr = computed(() => sort.value.filter((s: any) => s.direction === 'asc
 const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
-function onSortButtonClick(event: any, field: any) {
+function onSortButtonClick(event: any, field: string) {
   // if ctrl key is pressed, add to sort otherwise sort by this field
   // in any case if field is already in sort, toggle direction
   
@@ -524,7 +519,7 @@ function onSortButtonClick(event: any, field: any) {
 
 const clickTarget = ref(null);
 
-async function onClick(e: any,row: any) {
+async function onClick(e: any, row: any) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
   await new Promise((resolve) => setTimeout(resolve, 100));

package/dist/spa/src/components/Sidebar.vue

@@ -28,7 +28,7 @@
           :class="{ 
             'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)))          }"
         />
-        <img :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
+        <img v-if="coreStore.config?.iconOnlySidebar?.logo" :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
         <span 
           v-if="coreStore.config?.showBrandNameInSidebar && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))"
           class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"

package/dist/spa/src/components/ThreeDotsMenu.vue

@@ -18,7 +18,7 @@
         'hidden': !showDropdown,
         'left-0 md:left-auto': checkboxes && checkboxes.length > 0
       }"
-      class="absolute z-30 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-auto max-w-64 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600 right-0">
+      class="absolute z-30 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-max max-w-64 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600 right-0">
         <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
           <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
             <div  

package/dist/spa/src/components/ValueRenderer.vue

@@ -117,7 +117,7 @@ import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { JsonViewer } from "vue3-json-viewer";
-import "vue3-json-viewer/dist/index.css";
+import "vue3-json-viewer/dist/vue3-json-viewer.css";
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
 
 import { useCoreStore } from '@/stores/core';

package/dist/spa/src/stores/core.ts

@@ -92,6 +92,7 @@ export const useCoreStore = defineStore('core', () => {
 
       // console.log('🔔 subscribeToMenuBadges', mi.badge, JSON.stringify(mi));
       if (mi.badge !== undefined) {
+        websocket.unsubscribe(`/opentopic/update-menu-badge/${mi.itemId}`);
         websocket.subscribe(`/opentopic/update-menu-badge/${mi.itemId}`, ({ badge }) => {
           mi.badge = badge;
         });
@@ -121,8 +122,6 @@ export const useCoreStore = defineStore('core', () => {
         item.badge = badge;
       }
     });
-    // TODO: This thing was created for something. Find out why
-    // websocket.unsubscribeAll();
     subscribeToMenuBadges();
 
   }

package/dist/spa/src/types/Back.ts

@@ -1206,8 +1206,8 @@ interface AdminForthInputConfigCustomization {
    * 
    * ```bashcreating rec
    * cd custom
-   * npm init -y
-   * npm install highcharts highcharts-vue
+   * pnpm init -y
+   * pnpm install highcharts highcharts-vue
    * ```
    * 
    * And specify vueUsesFile in AdminForth config:
@@ -1760,6 +1760,8 @@ export interface IOperationalResource {
   update: (primaryKey: any, record: any) => Promise<any>;
 
   delete: (primaryKey: any) => Promise<boolean>;
+  
+  deleteMany?(recordIds: any[]): Promise<number>;
 
   dataConnector: IAdminForthDataSourceConnectorBase;
 }
@@ -1811,7 +1813,6 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
-  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.

package/dist/spa/src/types/Common.ts

@@ -361,10 +361,24 @@ export interface AdminForthResourceInputCommon {
     recordLabel?: (item: any) => string,
 
 
+    /**
+     * If true, user will not see warning about unsaved changes when tries to leave edit or create page with unsaved changes.
+     * default is false
+     */
+    dontShowWarningAboutUnsavedChanges?: boolean,
+
     /**
      * General options for resource.
      */
     options?: {
+      
+
+      /**
+       * Show quick action icons for base actions (show, edit, delete) in list view. 
+       * By default, they are inside three dots dropdown menu. 
+       */
+      baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
+
 
       /**
        * Default sort for list view.
@@ -1116,6 +1130,8 @@ export interface AdminForthConfigMenuItem {
    * Item id will be automatically generated from hashed resourceId+Path+label
    */
   itemId?: string,  // todo move to runtime type
+  
+  url?: string
 }
 
 

package/dist/spa/src/types/FrontendAPI.ts

@@ -213,6 +213,3 @@ export enum AlertVariant {
   }
 
   
-  
-
-

package/dist/spa/src/utils/utils.ts

@@ -5,13 +5,13 @@ import router from "../router";
 import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
 import { Dropdown } from 'flowbite';
-import adminforth from '../adminforth';
+import adminforth, { useAdminforth } from '../adminforth';
 import sanitizeHtml  from 'sanitize-html'
 import debounce from 'debounce';
 import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
 import { i18nInstance } from '../i18n'
 import { useI18n } from 'vue-i18n';
-
+import { onBeforeRouteLeave } from 'vue-router';
 
 
 
@@ -616,4 +616,59 @@ export function getTimeAgoString(date: Date): string {
     const days = Math.floor(diffInSeconds / 86400);
     return `${days} ${days === 1 ? 'day' : 'days'} ago`;
   }
+}
+
+export class leaveGuardActiveClass {
+  private active = false;
+
+  isActive() {
+    return this.active;
+  }
+
+  setActive(value: boolean) {
+    this.active = value;
+  }
+}
+
+export async function onBeforeRouteLeaveCreateEditViewGuard(initialValues: any, record: any, checkIfWeCanLeavePage: () => boolean, leaveGuardActive: leaveGuardActiveClass, isActive: { value: boolean }): Promise<void> {
+  
+  const { confirm } = useAdminforth();
+  const { t } = useI18n();
+
+  onBeforeRouteLeave(async (to, from) => {
+    if (!isActive.value) {
+      return true;
+    }
+
+
+    if (leaveGuardActive.isActive()) {
+      return false;
+    }
+
+    if (checkIfWeCanLeavePage()) {
+      return true;
+    }
+
+    leaveGuardActive.setActive(true);
+
+    try {
+      const { changedFields } = compareOldAndNewRecord(
+        initialValues.value,
+        record.value
+      );
+
+      const messageHtml =
+        generateMessageHtmlForRecordChange(changedFields, t);
+
+      const answer = await confirm({
+        messageHtml,
+        yes: t('Yes'),
+        no: t('No'),
+      });
+
+      return answer;
+    } finally {
+      leaveGuardActive.setActive(false);
+    }
+  });
 }

package/dist/spa/src/views/CreateView.vue

@@ -79,7 +79,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, generateMessageHtmlForRecordChange } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditView } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
@@ -115,6 +115,7 @@ const readonlyColumns = ref([]);
 
 const cancelButtonClicked = ref(false);
 const wasSaveSuccessful = ref(false);
+const useLeaveGuard = ref( false );
 
 async function onUpdateRecord(newRecord: any) {
   record.value = newRecord;
@@ -125,6 +126,9 @@ function checkIfWeCanLeavePage() {
 }
 
 function onBeforeUnload(event: BeforeUnloadEvent) {
+  if (!useLeaveGuard.value) {
+    return;
+  }
   if (!checkIfWeCanLeavePage()) {
     event.preventDefault();
     event.returnValue = '';
@@ -137,23 +141,20 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
-onBeforeRouteLeave(async (to, from, next) => {
-  if (!checkIfWeCanLeavePage()) {
-    const { changedFields } = compareOldAndNewRecord(initialValues.value, record.value);
-    
-    const messageHtml = generateMessageHtmlForRecordChange(changedFields, t);
 
-    const answer = await confirm({ messageHtml: messageHtml, yes: t('Yes'), no: t('No') });
-    if (!answer) return next(false);
-  }
-  next();
-});
+const leaveGuardActive = new leaveGuardActiveClass();
+
+onBeforeRouteLeaveCreateEditViewGuard(initialValues, record, checkIfWeCanLeavePage, leaveGuardActive, useLeaveGuard);
+
+
 
 onBeforeMount(() => {
   clearSaveInterceptors(route.params.resourceId as string);
 });
 
 onMounted(async () => {
+  useLeaveGuard.value = coreStore.resource?.options?.dontShowWarningAboutUnsavedChanges !== true;
+
   loading.value = true;
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId as string,

package/dist/spa/src/views/EditView.vue

@@ -74,7 +74,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord, generateMessageHtmlForRecordChange } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord, generateMessageHtmlForRecordChange, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditViewGuard } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
@@ -104,8 +104,12 @@ const record: Ref<Record<string, any>> = ref({});
 const initialRecord = computed(() => coreStore.record);
 const wasSaveSuccessful = ref(false);
 const cancelButtonClicked = ref(false);
-
+const useLeaveGuard = ref( false );
+  
 function onBeforeUnload(event: BeforeUnloadEvent) {
+  if (!useLeaveGuard.value) {
+    return;
+  }
   if (!checkIfWeCanLeavePage()) {
     event.preventDefault();
     event.returnValue = '';
@@ -122,17 +126,8 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
-onBeforeRouteLeave(async (to, from, next) => {
-  if (!checkIfWeCanLeavePage()) {
-    const { changedFields } = compareOldAndNewRecord(initialRecord.value, record.value);
-    
-    const messageHtml = generateMessageHtmlForRecordChange(changedFields, t);
-
-    const answer = await confirm({ messageHtml: messageHtml, yes: t('Yes'), no: t('No') });
-    if (!answer) return next(false);
-  }
-  next();
-});
+const leaveGuardActive = new leaveGuardActiveClass();
+onBeforeRouteLeaveCreateEditViewGuard(initialRecord, record, checkIfWeCanLeavePage, leaveGuardActive, useLeaveGuard);
 
 const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
 
@@ -162,6 +157,7 @@ onBeforeMount(() => {
 });
 
 onMounted(async () => {
+  useLeaveGuard.value = coreStore.resource?.options?.dontShowWarningAboutUnsavedChanges !== true;
   loading.value = true;
 
   await coreStore.fetchResourceFull({

package/dist/spa/vite.config.ts

@@ -15,46 +15,6 @@ async function getNextAvailablePort(startPort: number | undefined) {
   return await portfinder.getPortPromise({ port: startPort });
 };
 
-function ignoreTailwindErrors(): Plugin {
-  return {
-    name: 'ignore-tailwind-errors',
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        const originalWrite = res.write;
-        res.write = function(chunk) {
-          if (typeof chunk === 'string' && chunk.includes('tailwind')) {
-            return true;
-          }
-          return originalWrite.call(this, chunk);
-        };
-        next();
-      });
-    },
-    config(config, { command }) {
-      if (command === 'build') {
-        // Override PostCSS config for build
-        config.css = config.css || {};
-        config.css.postcss = {
-          plugins: [
-            {
-              postcssPlugin: 'ignore-tailwind-errors',
-              Once(root, helpers) {
-                try {
-                  return tailwindcss()(root, helpers);
-                } catch (error: any) {
-                  console.warn('TailwindCSS warning ignored:', error.message);
-                  return;
-                }
-              }
-            }
-          ]
-        };
-      }
-    }
-  };
-}
-
-
 const appPort = await getNextAvailablePort(5173);
 const hmrPort = await getNextAvailablePort(5273);
 console.log(`SPA port: ${appPort}. HMR port: ${hmrPort}`);
@@ -89,7 +49,36 @@ export default defineConfig({
             return id.toString().split('node_modules/')[1].split('/')[0].toString();
           }
         },
+
+        // by default servers doesnt returns dotfiles
+        // so if we'll generate file with name like ".pnpm-BLnlxqcJ.js"
+        // it won't be loaded
+        assetFileNames: (chunkInfo) => {
+          if (chunkInfo.name && chunkInfo.name.startsWith('.pnpm')) {
+            return `assets/pnpm-${chunkInfo.name.slice(6)}-[hash].[ext]`;
+          }
+          return 'assets/[name]-[hash].[ext]';
+        },
+        entryFileNames: (chunkInfo) => {
+          if (chunkInfo.name && chunkInfo.name.startsWith('.pnpm')) {
+            return `assets/pnpm-${chunkInfo.name.slice(6)}-[hash].js`;
+          }
+          return 'assets/[name]-[hash].js';
+        },
+        chunkFileNames: (chunkInfo) => {
+          if (chunkInfo.name && chunkInfo.name.startsWith('.pnpm')) {
+            return `assets/pnpm-${chunkInfo.name.slice(6)}-[hash].js`;
+          }
+          return 'assets/[name]-[hash].js';
+        }
       },
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler'
+      }
+    }
+  }
 })