adminforth 2.26.0-next.3 → 2.26.0-next.31

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

@@ -1,5 +1,5 @@
 <template >
-  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
+  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionFront) => action.showInThreeDotsDropdown))">
     <button 
       ref="buttonTriggerRef"
       @click="toggleDropdownVisibility"
@@ -46,11 +46,12 @@
           <li v-for="action in customActions" :key="action.id">
             <div class="wrapper"> 
               <component
-                :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
-                :meta="action.customComponent?.meta"
+                v-if="action.customComponent"
+                :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
+                :meta="formatComponent(action.customComponent).meta"
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
               >
-                <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
+                <a @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                   <div class="flex items-center gap-2">
                     <component 
                       v-if="action.icon" 
@@ -64,7 +65,7 @@
             </div>
           </li>
           <li v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)" :key="action.id">
-            <a href="#" @click.prevent="startBulkAction(action.id)" 
+            <a @click.prevent="startBulkAction(action.id)" 
                 class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
                 :class="{
                   'pointer-events-none': checkboxes && checkboxes.length === 0,
@@ -88,14 +89,14 @@
 
 
 <script setup lang="ts">
-import { getCustomComponent, getIcon } from '@/utils';
+import { getCustomComponent, getIcon, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { useAdminforth } from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
-import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
 
 const { list, alert} = useAdminforth();
@@ -109,8 +110,8 @@ const buttonTriggerRef = ref<HTMLElement | null>(null);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
-  customActions: Array<AdminForthActionInput>,
-  bulkActions: Array<AdminForthBulkActionCommon>,
+  customActions: Array<AdminForthActionFront>,
+  bulkActions: Array<AdminForthBulkActionFront>,
   checkboxes: Array,
   updateList: {
     type: Function,

package/dist/spa/src/i18n.ts

@@ -51,6 +51,6 @@ export function initI18n(app: ReturnType<typeof createApp>) {
     },
   });
   app.use(i18n);
-  i18nInstance = i18n 
+  i18nInstance = i18n as typeof i18nInstance
   return i18n
 }

package/dist/spa/src/renderers/CountryFlag.vue

@@ -1,5 +1,5 @@
 <template>
-    <Tooltip>
+    <component :is="shouldShowTooltip ? Tooltip : 'span'">
       <span class="flex items-center">
         <CountryFlag class="w-[1.6rem] h-[1.2rem]" :countryCode="countryIsoLow" />
         <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
@@ -8,7 +8,7 @@
       <template v-if="shouldShowTooltip" #tooltip>
         {{ countryName }}
       </template>
-    </Tooltip>
+    </component>
 </template>
 
 <script setup>  

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

@@ -4,9 +4,11 @@ import { callAdminForthApi } from '@/utils';
 import websocket from '@/websocket';
 import { useAdminforth } from '@/adminforth';
 
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend, AdminForthResourceFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
+
+
 export const useCoreStore = defineStore('core', () => {
   const { alert } = useAdminforth();
   const resourceById: Ref<Record<string, ResourceVeryShort>> = ref({});
@@ -15,7 +17,7 @@ export const useCoreStore = defineStore('core', () => {
   const menu: Ref<AdminForthConfigMenuItem[]> = ref([]);
   const config: Ref<AdminForthConfigForFrontend | null> = ref(null);
   const record: Ref<any | null> = ref({});
-  const resource: Ref<AdminForthResourceCommon | null> = ref(null);
+  const resource: Ref<AdminForthResourceFrontend | null> = ref(null);
   const userData: Ref<UserData | null> = ref(null);
   const isResourceFetching = ref(false);
   const isInternetError = ref(false);

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

@@ -1,4 +1,4 @@
-import type { Express, Request } from 'express';
+import type { Express, Request, Response } from 'express';
 import type { Writable } from 'stream';
 
 import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, AdminForthResourcePages,
@@ -67,6 +67,10 @@ export interface IHttpServer {
       headers: {[key: string]: string}, 
       cookies: {[key: string]: string}, 
       response: IAdminForthHttpResponse,
+      requestUrl: string,
+      abortSignal: AbortSignal,
+      _raw_express_req: Request,
+      _raw_express_res: Response,
     ) => void,
   }): void;
 
@@ -183,9 +187,23 @@ export interface IAdminForthDataSourceConnector {
    * For string fields:
    *  - {@link AdminForthResourceColumn.maxLength}
    * For numbers:
+   *  // min/max are used inside getMinMaxForColumns from base connector
    *  - {@link AdminForthResourceColumn.min}
    *  - {@link AdminForthResourceColumn.max}
-   *  - {@link AdminForthResourceColumn.minValue}, {@link AdminForthResourceColumn.maxValue}, {@link AdminForthResourceColumn.enum}, {@link AdminForthResourceColumn.foreignResource}, {@link AdminForthResourceColumn.sortable}, {@link AdminForthResourceColumn.backendOnly}, {@link AdminForthResourceColumn.masked}, {@link AdminForthResourceColumn.virtual}, {@link AdminForthResourceColumn.components}, {@link AdminForthResourceColumn.allowMinMaxQuery}, {@link AdminForthResourceColumn.editingNote}, {@link AdminForthResourceColumn.showIn}, {@link AdminForthResourceColumn.isUnique}, {@link AdminForthResourceColumn.validation})
+   *  - {@link AdminForthResourceColumn.minValue}, 
+   *  - {@link AdminForthResourceColumn.maxValue}, 
+   *  - {@link AdminForthResourceColumn.enum}, 
+   *  - {@link AdminForthResourceColumn.foreignResource}, 
+   *  - {@link AdminForthResourceColumn.sortable}, 
+   *  - {@link AdminForthResourceColumn.backendOnly}, 
+   *  - {@link AdminForthResourceColumn.masked}, 
+   *  - {@link AdminForthResourceColumn.virtual}, 
+   *  - {@link AdminForthResourceColumn.components}, 
+   *  - {@link AdminForthResourceColumn.allowMinMaxQuery}, 
+   *  - {@link AdminForthResourceColumn.editingNote}, 
+   *  - {@link AdminForthResourceColumn.showIn}, 
+   *  - {@link AdminForthResourceColumn.isUnique}, 
+   *  - {@link AdminForthResourceColumn.validation})
    * Also you can additionally save original column type to {@link AdminForthResourceColumn._underlineType}. This might be later used
    * in {@link IAdminForthDataSourceConnector.getFieldValue} and {@link IAdminForthDataSourceConnector.setFieldValue} methods.
    * 
@@ -292,6 +310,8 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
   }): Promise<{ok: boolean, error?: string}>;
 
   getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
+
+  deleteMany?({resource, recordIds}:{resource: AdminForthResource, recordIds: any[]}): Promise<number>;
 }
 
 
@@ -1621,7 +1641,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
-    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    underLoginButton: Array<AdminForthComponentDeclarationFull>,
     panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
@@ -1809,9 +1829,8 @@ export type AllowedActions = {
 /**
  * General options for resource.
  */
-export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
+export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions' | 'actions'> {
 
-  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.

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

@@ -314,6 +314,25 @@ export type FieldGroup = {
   noTitle?: boolean;
 };
 
+export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id'> {
+  id: string;
+}
+
+export interface AdminForthBulkActionFront extends Omit<AdminForthBulkActionCommon, 'id'> {
+  id: string,
+}
+
+type AdminforthOptionsCommon = NonNullable<AdminForthResourceCommon['options']>;
+
+export interface AdminForthOptionsForFrontend extends Omit<AdminforthOptionsCommon, 'actions' | 'bulkActions'> {
+  actions?: AdminForthActionFront[],
+  bulkActions?: AdminForthBulkActionFront[],
+}
+
+export interface AdminForthResourceFrontend extends Omit<AdminForthResourceCommon, 'options'> {
+  options: AdminForthOptionsForFrontend;
+}
+
 /**
  * Resource describes one table or collection in database.
  * AdminForth generates set of pages for 'list', 'show', 'edit', 'create', 'filter' operations for each resource.
@@ -361,16 +380,24 @@ export interface AdminForthResourceInputCommon {
     recordLabel?: (item: any) => string,
 
 
-    /**
-     * If true, user will not see warning about unsaved changes when tries to leave edit or create page with unsaved changes.
-     * default is false
-     */
-    dontShowWarningAboutUnsavedChanges?: boolean,
 
     /**
      * General options for resource.
      */
     options?: {
+      
+      /**
+       * 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,
+
+      /**
+       * Show quick action icons for base actions (show, edit, delete) in list view. 
+       * By default, they are inside three dots dropdown menu. 
+       */
+      baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
+
 
       /**
        * Default sort for list view.
@@ -956,6 +983,18 @@ export interface AdminForthResourceColumnCommon extends AdminForthResourceColumn
 
   editingNote?: { create?: string, edit?: string },
 
+  /*
+  ______________________________________________
+  |                                             |
+  | Min and max values are used                 |
+  | in getMinMaxForColumns from base connector  |
+  |_____________________________________________|
+        |
+        |
+        |
+        |
+        V  
+  */
   /**
    * Minimal value stored in this field.
    */
@@ -1152,6 +1191,7 @@ export interface AdminForthConfigForFrontend {
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclaration>,
     panelHeader: Array<AdminForthComponentDeclaration>,
+    underLoginButton: Array<AdminForthComponentDeclaration>,
   },
   rememberMeDuration: string,
   showBrandNameInSidebar: boolean,

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

@@ -144,7 +144,7 @@ export interface FrontendAPIInterface {
     /**
      * Run save interceptors for a specific resource or all resources if no resourceId is provided
      */
-    runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }>;
+    runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: any; }>;
 
     /**
      * Clear save interceptors for a specific resource or all resources if no resourceId is provided
@@ -152,6 +152,11 @@ export interface FrontendAPIInterface {
      * @param resourceId - The resource ID to clear interceptors for
      */
     clearSaveInterceptors(resourceId?: string): void;
+
+    /**
+     * Register a save interceptor for a specific resource
+     */
+    registerSaveInterceptor(handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: any; }>): void;
 }
 
 export type ConfirmParams = {

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

@@ -4,13 +4,18 @@ import { type AdminForthResourceCommon } from '../types/Common';
 import { useAdminforth } from '@/adminforth';
 import { showErrorTost } from '@/composables/useFrontendApi'
 
-
+let getResourceDataLastAbortController: AbortController | null = null;
 export async function getList(resource: AdminForthResourceCommon, isPageLoaded: boolean, page: number | null , pageSize: number, sort: any, checkboxes:{ value: any[] }, filters: any = [] ) {
   let rows: any[] = [];
   let totalRows: number | null = null;
   if (!isPageLoaded) {
     return; 
   }
+  const abortController = new AbortController();
+  if (getResourceDataLastAbortController) {
+    getResourceDataLastAbortController.abort();
+  }
+  getResourceDataLastAbortController = abortController;
   const data = await callAdminForthApi({
     path: '/get_resource_data',
     method: 'POST',
@@ -21,7 +26,8 @@ export async function getList(resource: AdminForthResourceCommon, isPageLoaded:
       offset: ((page || 1) - 1) * pageSize,
       filters: filters,
       sort: sort,
-    }
+    },
+    abortSignal: abortController.signal
   });
   if (data.error) {
     showErrorTost(data.error);

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

@@ -1,6 +1,6 @@
 import { nextTick, onMounted, ref, resolveComponent } from 'vue';
 import type { CoreConfig } from '../spa_types/core';
-import type { ValidationObject } from '../types/Common.js';
+import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, ValidationObject } from '../types/Common.js';
 import router from "../router";
 import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
@@ -19,11 +19,12 @@ const LS_LANG_KEY = `afLanguage`;
 const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
 const ITEMS_PER_PAGE_LIMIT = 100;
 
-export async function callApi({path, method, body, headers, silentError = false}: {
+export async function callApi({path, method, body, headers, silentError = false, abortSignal}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
   body?: any
   headers?: Record<string, string>
   silentError?: boolean
+  abortSignal?: AbortSignal
 }): Promise<any> {
   const t = i18nInstance?.global.t || ((s: string) => s)
   const options = {
@@ -34,6 +35,7 @@ export async function callApi({path, method, body, headers, silentError = false}
       ...headers
     },
     body: JSON.stringify(body),
+    signal: abortSignal
   };
   const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
   try {
@@ -68,28 +70,45 @@ export async function callApi({path, method, body, headers, silentError = false}
       return null;
     }
 
-    if (!silentError) {
+    if (!silentError && !(e instanceof DOMException && e.name === 'AbortError')) {
       adminforth.alert({variant:'danger', message: t('Something went wrong, please try again later'),})
     }
     console.error(`error in callApi ${path}`, e);
   }
 }
 
-export async function callAdminForthApi({ path, method, body=undefined, headers=undefined, silentError = false }: {
-  path: string,
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
-  body?: any,
-  headers?: Record<string, string>,
-  silentError?: boolean
+export async function callAdminForthApi(
+  { 
+    path, 
+    method, 
+    body=undefined, 
+    headers=undefined, 
+    silentError = false,
+    abortSignal = undefined
+  }: {
+    path: string,
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
+    body?: any,
+    headers?: Record<string, string>,
+    silentError?: boolean,
+    abortSignal?: AbortSignal
 }): Promise<any> {
   try {
-    return callApi({path: `/adminapi/v1${path}`, method, body, headers, silentError} );
+    return callApi({path: `/adminapi/v1${path}`, method, body, headers, silentError, abortSignal} );
   } catch (e) {
     console.error('error', e);
     return { error: `Unexpected error: ${e}` };
   }
 }
 
+export function formatComponent(component: AdminForthComponentDeclaration): AdminForthComponentDeclarationFull {
+  if (typeof component === 'string') {
+    return { file: component, meta: {} };
+  } else {
+    return { file: component.file, meta: component.meta };
+  }
+}
+
 export function getCustomComponent({ file, meta }: { file: string, meta?: any }) {
   const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
   return resolveComponent(name);

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

@@ -2,8 +2,8 @@
   <div class="relative w-full">
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -36,8 +36,8 @@
     </BreadcrumbsWithButtons>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -61,8 +61,8 @@
     </ResourceForm>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -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, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditView } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, formatComponent } 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';
@@ -88,7 +88,7 @@ import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
-import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
 
 const isValid = ref(false);

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

@@ -1,8 +1,8 @@
 <template>
   <div class="relative w-full">
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="editableRecord"
       :resource="coreStore.resource"
@@ -32,8 +32,8 @@
     </BreadcrumbsWithButtons>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -56,8 +56,8 @@
     </ResourceForm>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -82,7 +82,8 @@ import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
-import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import { formatComponent } from '@/utils';
+import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();

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

@@ -11,8 +11,8 @@
 
     <component 
       v-if="!coreStore.isResourceFetching && !initInProcess"
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -21,8 +21,8 @@
     <BreadcrumbsWithButtons>
       <component 
         v-if="!coreStore.isResourceFetching && !initInProcess"
-        v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeActionButtons || []"
-        :is="getCustomComponent(c)"
+        v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeActionButtons as AdminForthComponentDeclaration[] || []"
+        :is="getCustomComponent(formatComponent(c))"
         :meta="(c as AdminForthComponentDeclarationFull).meta"
         :resource="coreStore.resource"
         :adminUser="coreStore.adminUser"
@@ -114,14 +114,14 @@
 
     <component 
       v-if="!coreStore.isResourceFetching && !initInProcess"
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
     />
-    <ResourceListTableVirtual
-      v-if="isVirtualScrollEnabled && !coreStore.isResourceFetching"
+    <ResourceListTable
+      v-if="!coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -153,49 +153,16 @@
       :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
         ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
         : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || undefined"
+
       :container-height="1100"
       :item-height="52.5"
       :buffer-size="listBufferSize"
-    />
-
-    <ResourceListTable
-      v-else-if="!coreStore.isResourceFetching"
-      :resource="coreStore.resource"
-      :rows="rows"
-      :page="page"
-      @update:page="page = $event"
-      @update:sort="sort = $event"
-      @update:checkboxes="checkboxes = $event"
-      @update:records="getListInner"
-      :sort="sort"
-      :pageSize="pageSize"
-      :totalRows="totalRows"
-      :checkboxes="checkboxes"
-      :customActionsInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.customActionIcons)
-        ? coreStore.resourceOptions.pageInjections.list.customActionIcons
-        : coreStore.resourceOptions?.pageInjections?.list?.customActionIcons
-          ? [coreStore.resourceOptions.pageInjections.list.customActionIcons]
-          : []
-      "
-      :tableBodyStartInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableBodyStart)
-        ? coreStore.resourceOptions.pageInjections.list.tableBodyStart
-        : coreStore.resourceOptions?.pageInjections?.list?.tableBodyStart
-          ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
-          : []
-      "
-      :customActionIconsThreeDotsMenuItems="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems) 
-        ? coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems 
-        : coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems
-          ? [coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems]
-          : []"
-      :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
-        ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
-        : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || undefined"
+      :isVirtualScrollEnabled="isVirtualScrollEnabled"
     />
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -206,17 +173,16 @@
 
 <script setup lang="ts">
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import ResourceListTableVirtual from '@/components/ResourceListTableVirtual.vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
-import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
+import { callAdminForthApi, currentQuery, getIcon, setQuery, formatComponent } from '@/utils';
 import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { getCustomComponent, initThreeDotsDropdown, getList, startBulkAction } from '@/utils';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { Tooltip } from '@/afcl'
-import type { AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull } from '@/types/Common';
 
 
 import {