adminforth 2.26.0-next.3 → 2.26.0-next.30

package/dist/spa/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@iconify-prerendered/vue-flowbite':
         specifier: ^0.28.1754899090
         version: 0.28.1754899090(vue@3.5.29(typescript@5.4.5))
+      '@iconify-prerendered/vue-heroicons':
+        specifier: ^0.28.1721921294
+        version: 0.28.1721921294(vue@3.5.29(typescript@5.4.5))
       '@iconify-prerendered/vue-humbleicons':
         specifier: ^0.28.1754108846
         version: 0.28.1754108846(vue@3.5.29(typescript@5.4.5))
@@ -78,6 +81,9 @@ importers:
       '@types/node':
         specifier: ^20.12.5
         version: 20.19.37
+      '@types/sanitize-html':
+        specifier: ^2.16.1
+        version: 2.16.1
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
         version: 5.2.4(vite@5.4.21(@types/node@20.19.37)(sass@1.97.3))(vue@3.5.29(typescript@5.4.5))
@@ -335,6 +341,11 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  '@iconify-prerendered/vue-heroicons@0.28.1721921294':
+    resolution: {integrity: sha512-L/Xe9HeunSvUA2+KtlaRehFpKjdZPpzPWsynX1To4QmCPAF3YD0lwusV9fZrtkdi0Y5NYS8WZF1SDypkL65+dQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@iconify-prerendered/vue-humbleicons@0.28.1754108846':
     resolution: {integrity: sha512-O7X7bHh4QhR9ui098FK8Sh/fPA7JRg2rVrLxUpv8Xh0LpahI9u01YKy5flhkzcwwQ+A6zN2uuKI16rytrVVcaA==}
     peerDependencies:
@@ -669,6 +680,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/sanitize-html@2.16.1':
+    resolution: {integrity: sha512-n9wjs8bCOTyN/ynwD8s/nTcTreIHB1vf31vhLMGqUPNHaweKC4/fAl4Dj+hUlCTKYgm4P3k83fmiFfzkZ6sgMA==}
+
   '@types/web-bluetooth@0.0.14':
     resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
 
@@ -1265,6 +1279,9 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
+
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
@@ -2019,6 +2036,10 @@ snapshots:
     dependencies:
       vue: 3.5.29(typescript@5.4.5)
 
+  '@iconify-prerendered/vue-heroicons@0.28.1721921294(vue@3.5.29(typescript@5.4.5))':
+    dependencies:
+      vue: 3.5.29(typescript@5.4.5)
+
   '@iconify-prerendered/vue-humbleicons@0.28.1754108846(vue@3.5.29(typescript@5.4.5))':
     dependencies:
       vue: 3.5.29(typescript@5.4.5)
@@ -2253,6 +2274,10 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/sanitize-html@2.16.1':
+    dependencies:
+      htmlparser2: 10.1.0
+
   '@types/web-bluetooth@0.0.14': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -2960,6 +2985,13 @@ snapshots:
 
   hookable@5.5.3: {}
 
+  htmlparser2@10.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 7.0.1
+
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0

package/dist/spa/src/adminforth.ts

@@ -19,26 +19,13 @@ class FrontendAPI implements FrontendAPIInterface {
   public modalStore:any
   public filtersStore:any  
   public coreStore:any
-  private saveInterceptors: Record<string, Array<(ctx: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>>> = {};
-
-  public list: {
-    refresh(): Promise<{ error? : string }>;
-    silentRefresh(): Promise<{ error? : string }>;
-    silentRefreshRow(pk: any): Promise<{ error? : string }>;
-    closeThreeDotsDropdown(): Promise<{ error? : string }>;
-    closeUserMenuDropdown: () => void;
-    setFilter: (filter: FilterParams) => void;
-    updateFilter: (filter: FilterParams) => void;
-    clearFilters: () => void;
-  }
+  private saveInterceptors: Record<string, Array<Parameters<FrontendAPIInterface['registerSaveInterceptor']>[0]>> = {};
 
-  public menu: {
-    refreshMenuBadges: () => void;
-  }
+  public list: FrontendAPIInterface['list'];
 
-  public show: {
-    refresh(): void;
-  }
+  public menu: FrontendAPIInterface['menu'];
+
+  public show: FrontendAPIInterface['show'];
 
   closeUserMenuDropdown(): void {
     console.log('closeUserMenuDropdown')
@@ -70,9 +57,6 @@ class FrontendAPI implements FrontendAPIInterface {
         console.log('closeThreeDotsDropdown')
         return { error: 'Not implemented' }
       },
-      closeUserMenuDropdown: () => {
-        console.log('closeUserMenuDropdown')
-      },
       setFilter: this.setListFilter.bind(this),
       updateFilter: this.updateListFilter.bind(this),
       clearFilters: this.clearListFilters.bind(this),
@@ -83,11 +67,15 @@ class FrontendAPI implements FrontendAPIInterface {
         console.log('show.refresh')
       }
     }
+
+    this.closeUserMenuDropdown = () => {
+      console.log('closeUserMenuDropdown')
+    };
   }
 
   registerSaveInterceptor(
-    handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>,
-  ): void {
+    handler: Parameters<FrontendAPIInterface['registerSaveInterceptor']>[0]
+  ): ReturnType<FrontendAPIInterface['registerSaveInterceptor']> {
     const rid = router.currentRoute.value?.params?.resourceId as string;
     if (!rid) {
       return;
@@ -98,7 +86,7 @@ class FrontendAPI implements FrontendAPIInterface {
     this.saveInterceptors[rid].push(handler);
   }
 
-  async runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }> {
+  async runSaveInterceptors(params: Parameters<FrontendAPIInterface['runSaveInterceptors']>[0]): ReturnType<FrontendAPIInterface['runSaveInterceptors']> {
     const list = this.saveInterceptors[params.resourceId] || [];
     const aggregatedExtra: Record<string, any> = {};
     for (const fn of list) {
@@ -120,7 +108,7 @@ class FrontendAPI implements FrontendAPIInterface {
     return { ok: true, extra: aggregatedExtra };
   }
 
-  clearSaveInterceptors(resourceId?: string): void {
+  clearSaveInterceptors(resourceId?: Parameters<FrontendAPIInterface['clearSaveInterceptors']>[0]): ReturnType<FrontendAPIInterface['clearSaveInterceptors']> {
     if (resourceId) {
       delete this.saveInterceptors[resourceId];
     } else {
@@ -128,7 +116,7 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  confirm(params: ConfirmParams): Promise<boolean> {
+  confirm(params: Parameters<FrontendAPIInterface['confirm']>[0]): ReturnType<FrontendAPIInterface['confirm']> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
@@ -142,7 +130,7 @@ class FrontendAPI implements FrontendAPIInterface {
     })
   }
 
-  alert(params: AlertParams): void | Promise<string> | string {
+  alert(params: Parameters<FrontendAPIInterface['alert']>[0]): ReturnType<FrontendAPIInterface['alert']> {
     const toats = {
       message: params.message,
       messageHtml: params.messageHtml,
@@ -162,14 +150,14 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  listFilterValidation(filter: FilterParams): boolean {
+  listFilterValidation(filter: Parameters<FrontendAPIInterface['list']['setFilter']>[0]): boolean {
     if(router.currentRoute.value.meta.type !== 'list'){
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
     }
     return true
   }
 
-  setListFilter(filter: FilterParams): void {
+  setListFilter(filter: Parameters<FrontendAPIInterface['list']['setFilter']>[0]): ReturnType<FrontendAPIInterface['list']['setFilter']> {
     if(this.listFilterValidation(filter)){
       const existingFilterIndex = this.filtersStore.filters.findIndex((f: any) => {
         return f.field === filter.field && f.operator === filter.operator

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

@@ -43,7 +43,7 @@ const isIos = coreStore.isIos;
 
 const props = defineProps<{
   type: string,
-  fullWidth: boolean,
+  fullWidth?: boolean,
   modelValue: string,
   suffix?: string,
   prefix?: string,

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

@@ -6,7 +6,13 @@
     <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" 
+        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"
+        :class="props.backgroundCustomClasses"
+      >
         <!-- Modal content -->
         <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
 
@@ -19,6 +25,7 @@
           <div
             v-if="showConfirmationOnClose"
             class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60]"
+            :class="props.modalCustomClasses"
           >
             <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>
@@ -64,6 +71,8 @@ interface DialogProps {
   askForCloseConfirmation?: boolean
   closeConfirmationText?: string
   removeFromDomOnClose?: boolean
+  backgroundCustomClasses?: string
+  modalCustomClasses?: string
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
@@ -74,18 +83,24 @@ const props = withDefaults(defineProps<DialogProps>(), {
   askForCloseConfirmation: false,
   closeConfirmationText: 'Are you sure you want to close this dialog?',
   removeFromDomOnClose: false,
+  backgroundCustomClasses: '',
+  modalCustomClasses: '',
 })
 
 const showConfirmationOnClose = ref(false);
 
 
 async function open() {
-  await props.beforeOpenFunction?.();
+  if (props.beforeOpenFunction) {
+    await props.beforeOpenFunction?.();
+  }
   isModalOpen.value = true;
 }
 
 async function close() {
-  await props.beforeCloseFunction?.();
+  if (props.beforeCloseFunction) {
+    await props.beforeCloseFunction?.();
+  }
   isModalOpen.value = false;
 }
 

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

@@ -119,10 +119,12 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick,type PropType, t
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
+type ISingleSelectModelValue = string | number;
+
 const props = defineProps({
   options: Array,
   modelValue: {
-    type: Array as PropType<(string | number)[] | (string | number)>,
+    type: Array as PropType<(ISingleSelectModelValue)[] | ISingleSelectModelValue>,
     default: () => [],
   },
   multiple: {
@@ -201,7 +203,7 @@ function updateFromProps() {
         selectedItems.value = [];
       }
     } else {
-      selectedItems.value = props.options?.filter((item: any) => props.modelValue?.includes(item.value)) || [];
+      selectedItems.value = props.options?.filter((item: any) => (props.modelValue as (ISingleSelectModelValue)[])?.includes(item.value)) || [];
     }
   }
 }

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

@@ -91,12 +91,12 @@
       <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
     <div class="af-pagination-container flex flex-row items-center xs:flex-row xs:justify-between xs:items-center gap-3">
-      <div class="inline-flex" :class="isLoading || props.isLoading ? 'pointer-events-none select-none opacity-50' : ''">
+      <div class="inline-flex" :class="blockPagination ? 'pointer-events-none select-none opacity-50' : ''">
           <!-- Buttons -->
           <button
             class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
             @click="currentPage--; pageInput = currentPage.toString();" 
-            :disabled="currentPage <= 1 || isLoading || props.isLoading">
+            :disabled="currentPage <= 1 || blockPagination">
             <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 14 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -106,7 +106,7 @@
           <button
             class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
             @click="switchPage(1); pageInput = currentPage.toString();" 
-            :disabled="currentPage <= 1 || isLoading || props.isLoading">
+            :disabled="currentPage <= 1 || blockPagination">
             <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
             1
           </button>
@@ -123,7 +123,7 @@
           <button
             class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
             @click="currentPage = totalPages; pageInput = currentPage.toString();" 
-            :disabled="currentPage >= totalPages || isLoading || props.isLoading"
+            :disabled="currentPage >= totalPages || blockPagination"
           >
             {{ totalPages }}
 
@@ -131,7 +131,7 @@
           <button
             class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
             @click="currentPage++; pageInput = currentPage.toString();" 
-            :disabled="currentPage >= totalPages || isLoading || props.isLoading"
+            :disabled="currentPage >= totalPages || blockPagination"
           >
             <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 14 10">
@@ -163,7 +163,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[] | ((params: { offset: number, limit: number, sortField?: string, sortDirection?: 'asc' | 'desc' }) => Promise<{data: {[key: string]: any}[], total: number}>),
+      }[] | ((params: { offset: number, limit: number, sortField?: string, sortDirection?: 'asc' | 'desc' }, abortSignal?: AbortSignal) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
       isLoading?: boolean,
@@ -171,9 +171,11 @@
       defaultSortDirection?: 'asc' | 'desc',
       makeHeaderSticky?: boolean,
       makePaginationSticky?: boolean,
+      blockPaginationOnLoading?: boolean,
     }>(), {
       evenHighlights: true,
       pageSize: 5,
+      blockPaginationOnLoading: true,
     }
   );
 
@@ -188,6 +190,9 @@
   const isAtLeastOneLoading = ref<boolean[]>([false]);
   const currentSortField = ref<string | undefined>(props.defaultSortField);
   const currentSortDirection = ref<'asc' | 'desc'>(props.defaultSortDirection ?? 'asc');
+  const oldAbortController = ref<AbortController | null>(null);
+
+  const blockPagination = computed(() => (isLoading.value || props.isLoading) && props.blockPaginationOnLoading);
 
   onMounted(() => {
     // If defaultSortField points to a non-sortable column, ignore it
@@ -277,16 +282,25 @@
       isLoading.value = true;
       const currentLoadingIndex = currentPage.value;
       isAtLeastOneLoading.value[currentLoadingIndex] = true;
-      const result = await props.data({
-        offset: (currentLoadingIndex - 1) * props.pageSize,
-        limit: props.pageSize,
-        sortField: currentSortField.value,
-        ...(currentSortField.value ? { sortDirection: currentSortDirection.value } : {}),
-      });
+      const abortController = new AbortController();
+      if (oldAbortController.value) {
+        oldAbortController.value.abort();
+      }
+      oldAbortController.value = abortController;
+      const result = await props.data(
+        {
+          offset: (currentLoadingIndex - 1) * props.pageSize,
+          limit: props.pageSize,
+          sortField: currentSortField.value,
+          ...(currentSortField.value ? { sortDirection: currentSortDirection.value } : {}),
+        }, 
+        abortController.signal
+      );
       isAtLeastOneLoading.value[currentLoadingIndex] = false;
       if (isAtLeastOneLoading.value.every(v => v === false)) {
         isLoading.value = false;
       }
+      if(abortController.signal.aborted) return;
       dataResult.value = result;
     } else if (typeof props.data === 'object' && Array.isArray(props.data)) {
       const start = (currentPage.value - 1) * props.pageSize;
@@ -350,7 +364,7 @@ function sortArrayData(data:any[], sortField?:string, dir:'asc'|'desc'='asc') {
   });
 }
 
-function tableRowClick(row) {
+function tableRowClick(row: any) {
   emit("clickTableRow", row)
 }
 </script>

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

@@ -1,41 +1,42 @@
 <template>
   <Teleport to="body">
-  <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-[110] w-full h-full overflow-y-auto overflow-x-hidden flex items-center justify-center">
-    <div class="relative p-4 w-full max-w-md max-h-full" >
-            <div class="afcl-confirmation-container relative bg-lightAcceptModalBackground rounded-lg shadow dark:bg-darkAcceptModalBackground dark:shadow-black">
-        <button type="button" @click="modalStore.togleModal" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
-                    <svg class="w-3 h-3"  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 class="p-4 md:p-5 text-center">
-                    <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                        <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>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
-                </div>
-            </div>
+    <Modal 
+      ref="modalRef"
+      :beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
+      backgroundCustomClasses="z-[998]"
+      modalCustomClasses="z-[999]"
+    >
+      <div class="relative p-4 w-full max-w-md max-h-full" >
+        <button type="button" @click="modalStore.togleModal()" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
+          <svg class="w-3 h-3"  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 class="p-4 md:p-5 text-center">
+          <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <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>
+          <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
         </div>
-    </div>
-
-</Teleport>
+      </div>
+    </Modal>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { watch, onMounted, nextTick, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
-import { Modal } from 'flowbite';
+import { Modal } from '@/afcl';
 
+const modalRef = ref();
 const modalStore = useModalStore();
-const modalEl = ref(null);
-const modal = ref(null);
 
 watch( () => modalStore.isOpened, (newVal) => {
     if (newVal) {
@@ -46,35 +47,14 @@ watch( () => modalStore.isOpened, (newVal) => {
   }
 );
 
-onMounted(async () => {
-  await nextTick();
-  modal.value = new Modal(
-    modalEl.value,
-    {
-      closable: true,
-      backdrop: 'static',
-      backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-[100]"
-    }
-  );
-})
+
 
 function open() {
-  modal.value?.show();
+  modalRef.value.open();
 }
 
 function close() {
-  modal.value?.hide();
+  modalRef.value.close();
 }
 
-</script>
-
-<style scoped>
-.modal {
-  position: fixed;
-  z-index: 999;
-  top: 20%;
-  left: 50%;
-  width: 300px;
-  margin-left: -150px;
-}
-</style>
+</script>

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

@@ -6,17 +6,16 @@
         <slot></slot>
       </div>
     </div>
-    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2" v-if="coreStore.resourceColumnsError">
-      <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-        <span class="font-medium">{{ $t('Error!')}}</span> {{ coreStore.resourceColumnsError }}
-      </div>
+    <div v-if="coreStore.resourceColumnsError" >
+      <PageNotFound :errorMessage="coreStore.resourceColumnsError" />
     </div>
   </div>
 
 </template>
 
 <script setup>
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
+import Breadcrumbs from '@/components/Breadcrumbs.vue'; 
+import PageNotFound from '@/views/PageNotFound.vue';
 
 import { useCoreStore } from '@/stores/core';
 

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

@@ -16,11 +16,11 @@
         :unmasked="unmasked"
         :deletable="!column.editReadonly"
         @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
-        @update:recordFieldValue="({ fieldName, fieldValue }: { fieldName: string; fieldValue: any }) => setCurrentValue(fieldName, fieldValue)"
+        @update:recordFieldValue="recordFieldValueUpdate"
         @update:unmasked="$emit('update:unmasked', column.name)"
         @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
         @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
-        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_: any, index: any) => index !== arrayItemIndex))"
+        @delete="deleteHandler(arrayItemIndex)"
       />
     </div>
     <div class="flex items-center">
@@ -48,7 +48,7 @@
     :columnOptions="columnOptions"
     :unmasked="unmasked"
     @update:modelValue="setCurrentValue(column.name, $event)"
-    @update:recordFieldValue="({ fieldName, fieldValue }: { fieldName: string; fieldValue: any }) => setCurrentValue(fieldName, fieldValue)"
+    @update:recordFieldValue="recordFieldValueUpdate"
     @update:unmasked="$emit('update:unmasked', column.name)"
     @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
     @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
@@ -80,4 +80,12 @@
     await nextTick();
     arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
   }
+
+  function recordFieldValueUpdate({ fieldName, fieldValue }: { fieldName: string; fieldValue: any }) {
+    props.setCurrentValue(fieldName, fieldValue);
+  }
+
+  function deleteHandler(arrayItemIndex: number | string) {
+    props.setCurrentValue(props.column.name, props.currentValues[props.column.name].filter((_: any, index: any) => index !== arrayItemIndex));
+  }
 </script> 

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

@@ -11,7 +11,7 @@
       <div
         v-if="showMenu"
         ref="menuRef"
-        class="z-50 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
+        class="z-40 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
         :style="menuStyles"
       >
         <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('show'))">
@@ -57,14 +57,14 @@
             {{ $t('Delete item') }}
           </button>
         </template>
-        <div v-for="action in (resourceOptions.actions ?? []).filter(a => a.showIn?.listThreeDotsMenu)" :key="action.id" >
+        <div v-for="action in (resourceOptions.actions ?? []).filter((a: AdminForthActionInput) => a.showIn?.listThreeDotsMenu)" :key="action.id" >
             <button class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300" @click="() => { startCustomAction(action.id, record); showMenu = false; }">
               <component
                 :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
                 :meta="action.customComponent?.meta"
                 :row="record"
-                :resource="resource"
-                :adminUser="adminUser"
+                :resource="coreStore.resource"
+                :adminUser="coreStore.adminUser"
                 @callAction="(payload? : Object) => startCustomAction(action.id, record, payload)"
               >
                 <component
@@ -79,8 +79,8 @@
         <template v-if="customActionIconsThreeDotsMenuItems">
             <component 
                 v-for="c in customActionIconsThreeDotsMenuItems"
-                :is="getCustomComponent(c)"
-                :meta="c.meta"
+                :is="getCustomComponent(formatComponent(c))"
+                :meta="formatComponent(c).meta"
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
                 :record="record"
@@ -100,9 +100,10 @@ import {
   IconDotsHorizontalOutline
 } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, onBeforeUnmount, ref, nextTick, watch } from 'vue';
-import { getIcon, getCustomComponent } from '@/utils';
+import { getIcon, getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
+import { type AdminForthActionInput, type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common';
 
 const coreStore = useCoreStore();
 const showMenu = ref(false);
@@ -113,11 +114,11 @@ const menuStyles = ref<Record<string, string>>({});
 const props = defineProps<{
     resourceOptions: any;
     record: any;
-    customActionIconsThreeDotsMenuItems: any[];
+    customActionIconsThreeDotsMenuItems: AdminForthComponentDeclaration[];
     resourceId: string;
     deleteRecord: (record: any) => void;
     updateRecords: () => void;
-    startCustomAction: (actionId: string, record: any) => void;
+    startCustomAction: (actionId: string, row: any, extraData?: Record<string, any>) => void;
 }>();
 
 onMounted(() => {