adminforth 2.25.0-test.9 → 2.25.1

package/dist/spa/package.json

@@ -30,8 +30,7 @@
     "vue-diff": "^1.2.4",
     "vue-i18n": "^10.0.5",
     "vue-router": "^4.3.0",
-    "vue-slider-component": "^4.1.0-beta.7",
-    "vue3-json-viewer": "^2.2.2"
+    "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
@@ -55,6 +54,7 @@
     "typescript": "~5.4.0",
     "vite": "^5.2.13",
     "vue-i18n-extract": "^2.0.7",
-    "vue-tsc": "^2.0.11"
+    "vue-tsc": "^2.0.11",
+    "vue3-json-viewer": "^2.2.2"
   }
 }

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

@@ -6,8 +6,7 @@
       focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
     :class="{
       'cursor-default opacity-50 pointer-events-none': props.disabled,
-      'active brightness-200 hover:brightness-150'  : props.active,
-      'text-lightSecondaryContrast/70 bg-lightSecondary border-lightSecondaryContrast/30 dark:bg-darkSecondary hover:bg-lightSecondary/60 hover:border-lightSecondaryContrast/60 focus:ring-lightSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast dark:border-darkSecondaryContrast/40 dark:hover:bg-darkSecondary/60 dark:hover:border-darkSecondary/60': props.mode === 'secondary',
+      'active brightness-200 hover:brightness-150'  : props.active
     }"
   >
     <svg v-if="props.loader"
@@ -19,16 +18,10 @@
 
 <script setup lang="ts">
 
-const props = withDefaults(defineProps<{
-  loader?: boolean;
-  disabled?: boolean;
-  active?: boolean;
-  mode?: 'primary' | 'secondary';
-}>(), {
-  loader: false,
-  disabled: false,
-  active: false,
-  mode: 'primary'
+const props = defineProps({
+  loader: Boolean,
+  disabled: Boolean,
+  active: Boolean,
 });
 
 </script>

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

@@ -1,188 +1,124 @@
 <template>
-  <Modal 
-    ref="modalRef" 
-    v-bind="$attrs"
-    :closeByClickOutside="clickToCloseOutside || closeByClickOutside"
-    :closeByEsc="closeByEsc || closable"
-    :beforeCloseFunction="beforeCloseFunction"
-    :beforeOpenFunction="beforeOpenFunction"
-    :askForCloseConfirmation="askForCloseConfirmation"
-    :closeConfirmationText="closeConfirmationText"
-    :removeFromDomOnClose="removeFromDomOnClose"
+  <div
+    v-if="$slots.trigger"
+    @click="modal?.show()" class="inline-flex items-center cursor-pointer"
   >
-    <template v-if="$slots.trigger" #trigger>
-      <slot name="trigger"></slot>
-    </template>
-
-    <!-- Modal header -->
-    <div
-      v-if="header"
-      class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
-    >
-      <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
-        {{ header }}
-      </h3>
-      <button
-        v-if="headerCloseButton"
-        type="button"
-        class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
-        @click="tryToHideModal"
-      >
-        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-        </svg>
-        <span class="sr-only">{{ t('Close Modal') }}</span>
-      </button>
-    </div>
-    <!-- Modal body -->
-    <div class="p-4 md:p-5 text-lightDialogBodyText dark:text-darkDialogBodyText">
-      <slot></slot>
-    </div>
-    <!-- Modal footer -->
-    <div
-      v-if="buttons.length"
-      class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
-    >
-      <Button
-        v-for="(button, buttonIndex) in buttons"
-        :key="buttonIndex"
-        v-bind="button.options"
-        :class="{ 'ms-3': buttonIndex > 0 }"
-        @click="button.onclick(dialog)"
-      >
-        {{ button.label }}
-      </Button>
+    <slot name="trigger"></slot>
+  </div>
+  <Teleport to="body">
+    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="[scrollbar-gutter:stable] hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
+      <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="($attrs.class as string)?.includes('w-') ? '' : 'w-full'">
+        <!-- Modal content -->
+        <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
+          <!-- Modal header -->
+          <div
+            v-if="header"
+            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
+          >
+            <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
+              {{ header }}
+            </h3>
+            <button
+              v-if="headerCloseButton"
+              type="button"
+              class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+              @click="tryToHideModal"
+            >
+              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+              </svg>
+              <span class="sr-only">Close modal</span>
+            </button>
+          </div>
+          <!-- Modal body -->
+          <div class="p-4 md:p-5 space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
+            <slot></slot>
+          </div>
+          <!-- Modal footer -->
+          <div
+            v-if="buttons.length"
+            class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
+          >
+            <Button
+              v-for="(button, buttonIndex) in buttons"
+              :key="buttonIndex"
+              v-bind="button.options"
+              :class="{ 'ms-3': buttonIndex > 0 }"
+              @click="button.onclick(modal)"
+            >
+              {{ button.label }}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <!-- Confirmation Modal -->
+        <div
+          v-if="showConfirmationOnClose"
+          class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60]"
+        >
+          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
+            <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
+            <p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
+            <div class="flex justify-end">
+              <Button
+                class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
+                @click="showConfirmationOnClose = false"
+              >
+                Cancel
+              </Button>
+              <Button
+                @click="
+                  showConfirmationOnClose = false;
+                  modal?.hide();
+                "
+              >
+                Confirm
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  </Modal>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import Button from "./Button.vue";
-import { ref, computed, type Ref } from 'vue';
-import { Modal } from '@/afcl'
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
-
-
-interface IDialogInsideButtonClickHandler {
-  hide: () => void
-}
+import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
+import { Modal } from 'flowbite';
 
+const modalEl = ref(null);
+const modal: Ref<Modal|null> = ref(null);
 
 interface DialogButton {
   label: string
-  onclick: (dialog: IDialogInsideButtonClickHandler) => void
+  onclick: (dialog: any) => void
   options?: Record<string, any> 
 }
 
-
 interface DialogProps {
-  /**
-   * The header text to display in the dialog. If not provided, no header will be displayed.
-   */
   header?: string
-
-  /**
-   * If true, a close button will be displayed in the dialog header. Default is true.
-   */
   headerCloseButton?: boolean
-
-  /**
-   * An array of buttons to display in the dialog footer. 
-   */
   buttons?: DialogButton[]
-
-  /**
-   * If true, clicking outside the dialog will close it. Default is true.
-   * 
-   * @deprecated Use `closeByClickOutside` instead
-   */
   clickToCloseOutside?: boolean
-
-  /**
-   * If true, pressing the Esc key will close the dialog. Default is true.
-   */
-  closeByEsc?: boolean
-
-  /**
-   * If true, clicking outside the dialog will close it. Default is true.
-   */
-  closeByClickOutside?: boolean
-
-  /**
-   * Function that will be called before the dialog is closed. 
-   */
   beforeCloseFunction?: (() => void | Promise<void>) | null
-
-  /**
-   * Function that will be called before the dialog is opened. 
-   */
   beforeOpenFunction?: (() => void | Promise<void>) | null
-
-  /**
-   * Disables close on Ecs button
-   * 
-   * @deprecated Use `closeByEsc` or  instead
-   */
   closable?: boolean
-
-  /**
-   * If true, the dialog will ask for confirmation before closing. Default is false.
-   */
   askForCloseConfirmation?: boolean
-
-  /**
-   * The text to display in the close confirmation dialog. Default is "Are you sure you want to close this dialog?".
-   */
   closeConfirmationText?: string
-
-  /**
-   * If true, the dialog will be removed from the DOM when closed. Default is false.
-   */
-  removeFromDomOnClose?: boolean
 }
 
-
-
-
-
-
-/**********  for the backward compatibility  ***************/
-class Dialog implements IDialogInsideButtonClickHandler {
-  hide: () => void
-  constructor( hide: () => void ) {
-    this.hide = hide;
-  }
-}
-const dialog: Ref<Dialog> = ref(
-  new Dialog(
-    () => {
-      if (dialog.value) {
-        tryToHideModal();
-      }
-    }
-  )
-);
-/*************************************************************/
-
-
-
-const modalRef = ref();
-
 const props = withDefaults(defineProps<DialogProps>(), {
   header: '',
   headerCloseButton: true,
   buttons: () => [],
-  clickToCloseOutside: false,
-  closeByEsc: true,
-  closeByClickOutside: true,
+  clickToCloseOutside: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
-  closable: false,
+  closable: true,
   askForCloseConfirmation: false,
   closeConfirmationText: 'Are you sure you want to close this dialog?',
-  removeFromDomOnClose: false,
 })
 
 const buttons = computed<DialogButton[]>(() => {
@@ -193,20 +129,51 @@ const buttons = computed<DialogButton[]>(() => {
     {
       label: 'Close',
       onclick: (dialog: any) => {
-        tryToHideModal();
+        if (!props.askForCloseConfirmation) {
+          dialog.hide();
+        } else {
+          showConfirmationOnClose.value = true;
+        }
       },
       options: {}
     }
   ];
 });
 
+const showConfirmationOnClose = ref(false);
+onMounted(async () => {
+  //await one tick when all is mounted
+  await nextTick();
+  modal.value = new Modal(
+    modalEl.value,
+    {
+      closable: props.closable,
+      backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
+      onHide: async () => {
+        if (props.beforeCloseFunction) {
+          await props.beforeCloseFunction();
+        }
+      },
+      onShow: async () => {
+        if (props.beforeOpenFunction) {
+          await props.beforeOpenFunction();
+        }
+      },
+    }
+  );
+})
+
+onUnmounted(() => {
+  //destroy tooltip
+  modal.value?.destroy();
+})
 
 function open() {
-  modalRef.value.open();
+  modal.value?.show();
 }
 
 function close() {
-  modalRef.value.hide();
+  modal.value?.hide();
 }
 
 defineExpose({
@@ -216,7 +183,11 @@ defineExpose({
 })
 
 function tryToHideModal() {
-  modalRef.value?.tryToHideModal();
+  if (!props.askForCloseConfirmation ) {
+    modal.value?.hide();
+  } else {
+    showConfirmationOnClose.value = true;
+  }
 }
 
 

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

@@ -6,12 +6,12 @@
     <slot name="trigger"></slot>
   </div>
   <Teleport to="body">
-      <div v-show="isModalOpen" v-if="!removeFromDom" @click="backdropClick" class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex" >
+      <div v-show="isModalOpen" v-if="!removeFromDom" @click="backdropClick" v-bind="$attrs" class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-1rem max-h-full flex" >
         <!-- Modal content -->
-        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
+        <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
 
           <!-- Modal body -->
-          <div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
+          <div class="p-4 md:p-5 space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
             <slot ></slot>
           </div>
          
@@ -57,8 +57,7 @@ const removeFromDom = computed(() => {
 })
 
 interface DialogProps {
-  closeByClickOutside?: boolean
-  closeByEsc?: boolean
+  clickToCloseOutside?: boolean
   beforeCloseFunction?: (() => void | Promise<void>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
   askForCloseConfirmation?: boolean
@@ -67,8 +66,7 @@ interface DialogProps {
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
-  closeByClickOutside: true,
-  closeByEsc: true,
+  clickToCloseOutside: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
   askForCloseConfirmation: false,
@@ -111,25 +109,8 @@ function toggleModal() {
   }
 }
 
-function onEsc(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    if (props.closeByEsc) {
-      tryToHideModal();
-    }
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onEsc)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onEsc)
-})
-
-
 function backdropClick(e: MouseEvent) {
-  if (props.closeByClickOutside && e.target === e.currentTarget) {
+  if (props.clickToCloseOutside && e.target === e.currentTarget) {
     tryToHideModal();
   }
 }

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

@@ -122,7 +122,7 @@ import { useElementSize } from '@vueuse/core'
 const props = defineProps({
   options: Array,
   modelValue: {
-    type: Array as PropType<(string | number)[] | (string | number)>,
+    type: Array as PropType<(string | number)[]>,
     default: () => [],
   },
   multiple: {

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

@@ -28,7 +28,7 @@
           :class="{ 
             'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (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) }" />
+        <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) }" />
         <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-max 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-auto 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/vue3-json-viewer.css";
+import "vue3-json-viewer/dist/index.css";
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
 
 import { useCoreStore } from '@/stores/core';

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

@@ -92,7 +92,6 @@ 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;
         });
@@ -122,6 +121,8 @@ 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

@@ -192,7 +192,7 @@ export interface IAdminForthDataSourceConnector {
    * 
    * @param resource 
    */
-  discoverFields(resource: AdminForthResource): Promise<{[key: string]: AdminForthResourceColumn}>;
+  discoverFields(resource: AdminForthResource, config: AdminForthConfig): Promise<{[key: string]: AdminForthResourceColumn}>;
 
 
   /**
@@ -1206,8 +1206,8 @@ interface AdminForthInputConfigCustomization {
    * 
    * ```bashcreating rec
    * cd custom
-   * pnpm init -y
-   * pnpm install highcharts highcharts-vue
+   * npm init -y
+   * npm install highcharts highcharts-vue
    * ```
    * 
    * And specify vueUsesFile in AdminForth config:
@@ -2056,6 +2056,7 @@ export interface AdminForthForeignResource extends AdminForthForeignResourceComm
       afterDatasourceResponse?: AfterDataSourceResponseFunction | Array<AfterDataSourceResponseFunction>,
     },
   },
+  onDelete?: 'cascade' | 'setNull'
 }
 
 export type ShowInModernInput = {

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

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

@@ -213,3 +213,6 @@ 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, { useAdminforth } from '../adminforth';
+import adminforth 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,59 +616,4 @@ 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);
-    }
-  });
 }