adminforth 2.22.0-next.4 → 2.22.0-next.41

package/dist/spa/src/afcl/TreeMapChart.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="afcl-treemap -mb-2" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import ApexCharts, { type ApexOptions } from 'apexcharts';
+import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+
+const chart: Ref<HTMLDivElement | null> = ref(null);
+
+const props = defineProps<{
+  data: {
+    x: string,
+    [key: string]: any,
+  }[],
+  series: {
+    name: string,
+    fieldName: string,
+  }[],
+  options?: ApexOptions,
+}>();
+
+const optionsBase: ApexOptions = {
+  chart: {
+    height: 350,
+    type: 'treemap',
+    fontFamily: 'Inter, sans-serif',
+    toolbar: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+  dataLabels: {
+    enabled: true,
+    style: {
+      fontFamily: 'Inter, sans-serif',
+      colors: ['#FFFFFF'],
+    },
+  },
+  plotOptions: {
+    treemap: {
+      distributed: true,
+      enableShades: false,
+    },
+  },
+};
+
+const options = computed(() => {
+  if (props.data?.length > 0) {
+    props.series.forEach((s) => {
+      if (props.data[0][s.fieldName] === undefined) {
+        throw new Error(
+          `Field ${s.fieldName} not found even in first data point ${JSON.stringify(props.data[0])}, something is wrong`,
+        );
+      }
+    });
+  }
+
+  const nextOptions: ApexOptions = {
+    ...optionsBase,
+    series: props.series.map((s) => ({
+      name: s.name,
+      data: (props.data ?? []).map((item: any) => {
+        const { x, y: _ignoredY, ...rest } = item ?? {};
+        return {
+          x,
+          y: item?.[s.fieldName],
+          ...rest,
+        };
+      }),
+    })),
+  };
+
+  function mergeOptions(target: any, source: any) {
+    if (!source) {
+      return;
+    }
+    for (const key in source) {
+      if (typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        if (!target[key]) {
+          target[key] = {};
+        }
+        mergeOptions(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  mergeOptions(nextOptions, props.options);
+  return nextOptions;
+});
+
+let apexChart: ApexCharts | null = null;
+
+watch(() => [options.value, chart.value], (value) => {
+  if (!value || !chart.value) {
+    return;
+  }
+
+  if (apexChart) {
+    apexChart.updateOptions(options.value);
+  } else {
+    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart.render();
+  }
+});
+
+onUnmounted(() => {
+  if (apexChart) {
+    apexChart.destroy();
+  }
+});
+</script>
+
+<style lang="scss">
+:root {
+  --afcl-treemap-text: #FFFFFF;
+}
+
+[data-theme='dark'] {
+  --afcl-treemap-text: #FFFFFF;
+}
+
+.afcl-treemap {
+  .apexcharts-datalabel {
+    fill: var(--afcl-treemap-text);
+  }
+
+  .apexcharts-legend-text {
+    color: var(--afcl-treemap-text) !important;
+  }
+}
+</style>

package/dist/spa/src/afcl/index.ts

@@ -12,6 +12,7 @@ export { default as Dropzone } from './Dropzone.vue';
 export { default as AreaChart } from './AreaChart.vue';
 export { default as BarChart } from './BarChart.vue';
 export { default as PieChart } from './PieChart.vue';
+export { default as TreeMapChart } from './TreeMapChart.vue';
 export { default as Table } from './Table.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
 export { default as Spinner } from './Spinner.vue';
@@ -24,4 +25,5 @@ export { default as Toggle } from './Toggle.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as Textarea } from './Textarea.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
-export { default as Card } from './Card.vue';
+export { default as Card } from './Card.vue';
+export { default as Modal } from './Modal.vue';

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

@@ -14,6 +14,8 @@
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
                     <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
+                    <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
+
                     <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>

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

@@ -22,21 +22,23 @@
           class="bg-lightForm dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
           :class="{ 'border-b': i !== group.columns.length - 1}"
         >
-          <td class="px-6 py-4 flex items-center block md:table-cell pb-0 md:pb-4" 
+          <td class="px-6 py-4 flex items-center block pb-0 md:pb-4 relative md:table-cell" 
               :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
-            <span class="flex items-center gap-1">                     
-              {{ column.label }}
-              <Tooltip v-if="column.required[mode]">
+            <div class="absolute inset-0 flex items-center overflow-hidden px-6 py-4 max-h-32">
+              <span class="flex items-center gap-1">                     
+                {{ column.label }}
+                <Tooltip v-if="column.required[mode]">
 
-                <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                  :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
-                />
+                  <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
+                    :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
+                  />
 
-                <template #tooltip>
-                  {{ $t('Required field') }}
-                </template>
-              </Tooltip>
-            </span>
+                  <template #tooltip>
+                    {{ $t('Required field') }}
+                  </template>
+                </Tooltip>
+              </span>
+            </div>
           </td>
           <td
             class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell"

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

@@ -32,8 +32,10 @@
                   :record="coreStore.record"
               />
             <template v-else-if="checkShowIf(column, record, resource?.columns || [])">
-              <td class="px-6 py-4 relative block md:table-cell font-bold md:font-normal pb-0 md:pb-4">
-                {{ column.label }}
+              <td class="px-6 py-4 relative block flex justify-start font-bold md:font-normal pb-0 md:pb-4 relative md:table-cell">
+                <div class="absolute inset-0 flex items-center overflow-hidden px-6 py-4 max-h-32">
+                  {{ column.label }}
+                </div>
               </td>
               <td class="px-6 py-4 whitespace-pre-wrap" :data-af-column="column.name">
                 <component

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-44 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/stores/core.ts

@@ -121,7 +121,8 @@ export const useCoreStore = defineStore('core', () => {
         item.badge = badge;
       }
     });
-    websocket.unsubscribeAll();
+    // TODO: This thing was created for something. Find out why
+    // websocket.unsubscribeAll();
     subscribeToMenuBadges();
 
   }

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

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
  type ModalContentType = {
   title?: string;
   content?: string;
+  contentHTML?: string;
   acceptText?: string;
   cancelText?: string;
  }
@@ -12,7 +13,8 @@ import { defineStore } from 'pinia'
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
     title: 'title',
-    content: 'content',
+    content: '',
+    contentHTML: '',
     acceptText: 'acceptText',
     cancelText: 'cancelText',
   });  
@@ -31,7 +33,8 @@ export const useModalStore = defineStore('modal', () => {
   function setModalContent(content: ModalContentType) {
     modalContent.value = {
       title: content.title || 'title',
-      content: content.content || 'content',
+      content: content.content || '',
+      contentHTML: content.contentHTML || '',
       acceptText: content.acceptText || 'acceptText',
       cancelText: content.cancelText || 'cancelText',
     };
@@ -41,6 +44,7 @@ export const useModalStore = defineStore('modal', () => {
     modalContent.value = {
       title: 'title',
       content: 'content',
+      contentHTML: '',
       acceptText: 'acceptText',
       cancelText: 'cancelText',
     };

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

@@ -515,6 +515,7 @@ export type BeforeDataSourceRequestFunction = (params: {
     cookies: Record<string, string>,
     requestUrl: string,
   },
+  filtersTools: any,
   adminforth: IAdminForth,
 }) => Promise<{
   ok: boolean, 
@@ -1582,6 +1583,24 @@ export interface AdminForthInputConfig {
      * 
      */
     baseUrl?: string,
+
+
+    /**
+     * Most of components are explicitely registered in AdminForth e.g. when you are using them in renderers, page injections and so on.
+     * But some times you might want to have some components registered globally Explicitly. E.g. for ussage in other components without import.
+     * 
+     * ```ts
+     * componentsToExplicitRegister: [
+     *  {
+     *    file: '@@/my-component.vue',
+     *    meta: {
+     *      some: 'meta'
+     *    }
+     *  }
+     * ```
+     * 
+     */
+    componentsToExplicitRegister?: AdminForthComponentDeclarationFull[]
  
 }
 

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

@@ -361,6 +361,12 @@ 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.
      */

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

@@ -159,6 +159,10 @@ export type ConfirmParams = {
      * The message to display in the dialog
      */
     message?: string;
+    /**
+     * Message to display in the dialog as HTML (can be used instead of message)
+     */
+    messageHtml?: string;
     /**
      * The text to display in the "accept" button
      */
@@ -209,6 +213,3 @@ export enum AlertVariant {
   }
 
   
-  
-
-

package/dist/spa/src/types/adapters/CompletionAdapter.ts

@@ -17,9 +17,17 @@ export interface CompletionAdapter {
     content: string,
     stop: string[],
     maxTokens: number,
+    outputSchema?: any
   ): Promise<{
     content?: string;
     finishReason?: string;
     error?: string;
   }>;
+
+  /**
+   * This method should return the number of tokens in the input content.
+   * @param content - The input text for which to measure the token count
+   * @returns The number of tokens in the input content
+   */
+  measureTokensCount(content: string): Promise<number> | number;
 }

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

@@ -5,12 +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';
 
 
 
@@ -524,9 +525,10 @@ export function atob_function(source: string): string {
   return atob(source);
 }
 
-export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord: Record<string, any>): boolean {
+export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord: Record<string, any>): {ok: boolean, changedFields: Record<string, {oldValue: any, newValue: any}>} {
   const newKeys = Object.keys(newRecord);
   const coreStore = useCoreStore();
+  const changedColumns: Record<string, { oldValue: any, newValue: any }> = {};
 
   for (const key of newKeys) {
     const oldValue = typeof oldRecord[key] === 'object' && oldRecord[key] !== null ? JSON.stringify(oldRecord[key]) : oldRecord[key];
@@ -537,21 +539,23 @@ export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord
               oldValue === undefined || 
               oldValue === null || 
               oldValue === '' || 
-              (Array.isArray(oldValue) && oldValue.length === 0)
+              (Array.isArray(oldValue) && oldValue.length === 0) ||
+              oldValue === '[]' 
             ) 
               &&            
             ( 
               newValue === undefined || 
               newValue === null || 
               newValue === '' || 
-              (Array.isArray(newValue) && newValue.length === 0)
+              (Array.isArray(newValue) && newValue.length === 0) || 
+              newValue === '[]'
             )
       ) {
         // console.log(`Value for key ${key} is considered equal (empty)`)
         continue;
       }
 
-      const column = coreStore.resource.columns.find((c) => c.name === key);
+      const column = coreStore.resource?.columns.find((c) => c.name === key);
       if (column?.foreignResource) {
         if (newRecord[key] === oldRecord[key]?.pk) {
           // console.log(`Value for key ${key} is considered equal (foreign key)`)
@@ -559,8 +563,112 @@ export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord
         }
       }
       // console.log(`Value for key ${key} is different`, { oldValue: oldValue, newValue: newValue });
-      return false;
+      changedColumns[key] = { oldValue, newValue };
+    }
+  }
+  return { ok: Object.keys(changedColumns).length !== 0, changedFields: changedColumns };
+}
+
+export function generateMessageHtmlForRecordChange(changedFields: Record<string, { oldValue: any, newValue: any }>, t: ReturnType<typeof useI18n>['t']): string {
+  const coreStore = useCoreStore();
+
+  const escapeHtml = (value: any) => {
+    if (value === null || value === undefined || value === '') return `<em>${t('empty')}</em>`;
+    let s: string;
+    if (typeof value === 'object') {
+      try {
+        s = JSON.stringify(value);
+      } catch (e) {
+        s = String(value);
+      }
+    } else {
+      s = String(value);
     }
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+  };
+
+  const items = Object.keys(changedFields || {}).map(key => {
+    const column = coreStore.resource?.columns?.find((c: any) => c.name === key);
+    const label = column?.label || key;
+    const oldV = escapeHtml(changedFields[key].oldValue);
+    const newV = escapeHtml(changedFields[key].newValue);
+    return `<li class="truncate"><strong>${escapeHtml(label)}</strong>: <span class="af-old-value text-muted">${oldV}</span> &#8594; <span class="af-new-value">${newV}</span></li>`;
+  }).join('');
+
+  const listHtml = items ? `<ul class="mt-2 list-disc list-inside">${items}</ul>` : '';
+  const messageHtml = `<div>${escapeHtml(t('There are unsaved changes. Are you sure you want to leave this page?'))}${listHtml}</div>`;
+  return messageHtml; 
+}
+
+export function getTimeAgoString(date: Date): string {
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return `${diffInSeconds} ${diffInSeconds === 1 ? 'second' : 'seconds'} ago`;
+  } else if (diffInSeconds < 3600) {
+    const minutes = Math.floor(diffInSeconds / 60);
+    return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
+  } else if (diffInSeconds < 86400) {
+    const hours = Math.floor(diffInSeconds / 3600);
+    return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
+  } else {
+    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;
   }
-  return true;
+}
+
+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 } 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,16 +115,20 @@ const readonlyColumns = ref([]);
 
 const cancelButtonClicked = ref(false);
 const wasSaveSuccessful = ref(false);
+const useLeaveGuard = ref( false );
 
 async function onUpdateRecord(newRecord: any) {
   record.value = newRecord;
 }
 
 function checkIfWeCanLeavePage() {
-  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialValues.value, record.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialValues.value, record.value).ok === false;
 }
 
 function onBeforeUnload(event: BeforeUnloadEvent) {
+  if (!useLeaveGuard.value) {
+    return;
+  }
   if (!checkIfWeCanLeavePage()) {
     event.preventDefault();
     event.returnValue = '';
@@ -137,19 +141,20 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
-onBeforeRouteLeave(async (to, from, next) => {
-  if (!checkIfWeCanLeavePage()) {
-      const answer = await confirm({message: t('There are unsaved changes. Are you sure you want to leave this page?'), yes: 'Yes', no: '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 } 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 = '';
@@ -113,7 +117,7 @@ function onBeforeUnload(event: BeforeUnloadEvent) {
 }
 
 function checkIfWeCanLeavePage() {
-  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialRecord.value, record.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialRecord.value, record.value).ok === false;
 }
 
 window.addEventListener('beforeunload', onBeforeUnload);
@@ -122,13 +126,8 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
-onBeforeRouteLeave(async (to, from, next) => {
-  if (!checkIfWeCanLeavePage()) {
-      const answer = await confirm({message: t('There are unsaved changes. Are you sure you want to leave this page?'), yes: 'Yes', no: '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);
 
@@ -158,6 +157,7 @@ onBeforeMount(() => {
 });
 
 onMounted(async () => {
+  useLeaveGuard.value = coreStore.resource?.options?.dontShowWarningAboutUnsavedChanges !== true;
   loading.value = true;
 
   await coreStore.fetchResourceFull({

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

@@ -26,6 +26,8 @@
         :meta="(c as AdminForthComponentDeclarationFull).meta"
         :resource="coreStore.resource"
         :adminUser="coreStore.adminUser"
+        :checkboxes="checkboxes"
+        :clearCheckboxes="clearCheckboxes"
       />
       <button
         @click="()=>{checkboxes = []}"

package/dist/spa/tailwind.config.js

@@ -10,7 +10,7 @@ export default {
 
   darkMode: 'class',
   plugins: [
-
+    require('@tailwindcss/typography'),
   ],
 }