adminforth 2.26.2 → 2.27.0-next.2

package/dist/spa/src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <nav 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
-      class="fixed h-14 top-0 z-30 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
+      class="fixed h-14 top-0 z-30 w-full border-b drop-shadow-sm bg-lightNavbar dark:bg-darkNavbar dark:border-darkSidebarDevider"
     >
       <div class="af-header px-3 lg:px-5 lg:pl-3 flex items-center justify-between h-full w-full" >
           <div class="flex items-center justify-start rtl:justify-end">

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,6 +83,8 @@ 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);

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

@@ -3,6 +3,8 @@
     <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" >

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/CustomRangePicker.vue

@@ -19,8 +19,7 @@
     >
 
     <div v-if="min && max" class="w-full px-2.5">
-      <vue-slider
-        class="custom-slider"
+      <RangePicker
         :dot-size="20"
         height="7.99px"
         :min="minFormatted"
@@ -32,10 +31,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import VueSlider from 'vue-slider-component';
-import 'vue-slider-component/theme/antd.css'
 import {computed, onMounted, ref, watch} from "vue";
 import debounce from 'debounce'
+import RangePicker from './RangePicker.vue';
 
 const props = defineProps({
   valueStart: {
@@ -57,7 +55,19 @@ const maxFormatted = computed(() => Math.ceil(<number>props.max));
 const start = ref<string | number>(props.valueStart);
 const end = ref<string | number>(props.valueEnd);
 
-const sliderValue = ref([minFormatted.value, maxFormatted.value]);
+const sliderValue = ref<[number, number]>([minFormatted.value, maxFormatted.value]);
+
+watch([start, end], () => {
+  if ( !start.value && end.value ) {
+    setSliderValues(minFormatted.value, end.value);
+  } else if ( start.value && !end.value ) {
+    setSliderValues(start.value, maxFormatted.value);
+  } else if ( !start.value && !end.value ) {
+    setSliderValues(minFormatted.value, maxFormatted.value);
+  } else {
+    setSliderValues(start.value, end.value);
+  }
+})
 
 const updateFromSlider =
     debounce((value: [number, number]) => {
@@ -111,65 +121,4 @@ watch([minFormatted,maxFormatted], () => {
 function setSliderValues(start: any, end: any) {
   sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
 }
-</script>
-
-<style lang="scss" scoped>
-.custom-slider {
-    &:deep(.vue-slider-rail) {
-        background-color: rgb(229 231 235);
-    }
-
-    &:deep(.vue-slider-dot-handle) {
-        // apply bg-blue-500 to the handle when active
-        @apply bg-lightPrimary;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-dot-handle:hover) {
-        @apply bg-lightPrimary;
-        filter: brightness(1.1);
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-process) {
-      @apply bg-lightPrimaryOpacity;
-
-    }
-
-    &:deep(.vue-slider-process:hover) {
-      filter: brightness(1.1);
-      @apply bg-lightPrimaryOpacity;
-    }
-}
-
-.dark .custom-slider {
-  &:deep(.vue-slider-rail) {
-    background-color: rgb(55 65 81); // gray-700
-  }
-
-  &:deep(.vue-slider-dot-handle) {
-    @apply bg-darkPrimary;
-    border: none;
-    box-shadow: none;
-  }
-
-  &:deep(.vue-slider-dot-handle:hover) {
-    @apply bg-darkPrimary;
-    filter: brightness(1.1);
-    border: none;
-    box-shadow: none;
-  }
-
-  &:deep(.vue-slider-process) {
-    @apply bg-darkPrimaryOpacity;
-  }
-
-  &:deep(.vue-slider-process:hover) {
-    filter: brightness(1.1);
-    @apply bg-darkPrimaryOpacity;
-  }
-}
-
-</style>
+</script>

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

@@ -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(() => {