adminforth 2.17.0-next.9 → 2.17.0

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

@@ -1,7 +1,7 @@
 import type { Express, Request } from 'express';
 import type { Writable } from 'stream';
 
-import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, 
+import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, AdminForthResourcePages,
   type AdminForthComponentDeclaration, 
   type AdminForthResourceCommon, 
   type AdminUser, type AllowedActionsResolved, 
@@ -12,7 +12,6 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   type AdminForthComponentDeclarationFull,
   type AdminForthConfigMenuItem,
   type AnnouncementBadgeResponse,
-  AdminForthResourcePages,
   type AdminForthResourceColumnInputCommon,
 } from './Common.js';
 
@@ -129,7 +128,7 @@ export interface IAdminForthSingleFilter {
   operator?: AdminForthFilterOperators.EQ | AdminForthFilterOperators.NE
   | AdminForthFilterOperators.GT | AdminForthFilterOperators.LT | AdminForthFilterOperators.GTE
   | AdminForthFilterOperators.LTE | AdminForthFilterOperators.LIKE | AdminForthFilterOperators.ILIKE
-  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN;
+  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN | AdminForthFilterOperators.IS_EMPTY | AdminForthFilterOperators.IS_NOT_EMPTY;
   value?: any;
   rightField?: string;
   insecureRawSQL?: string;
@@ -307,7 +306,7 @@ export interface IAdminForthAuth {
 
   removeCustomCookie({response, name}: {response: any, name: string}): void;
 
-  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry: number, expirySeconds: number, httpOnly: boolean}}): void;
+  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry?: number, expirySeconds: number, httpOnly: boolean}}): void;
 
   getCustomCookie({cookies, name}: {cookies: {key: string, value: string}[], name: string}): string | null;
 
@@ -360,16 +359,16 @@ export interface IAdminForth {
   tr(msg: string, category: string, lang: string, params: any, pluralizationNumber?: number): Promise<string>;
 
   createResourceRecord(
-    params: { resource: AdminForthResource, record: any, adminUser: AdminUser, extra?: HttpExtra }
+    params: { resource: AdminForthResource, record: any, response: IAdminForthHttpResponse, adminUser: AdminUser, extra?: HttpExtra }
   ): Promise<{ error?: string, createdRecord?: any, newRecordId?: any }>;
 
   updateResourceRecord(
-    params: { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra, updates?: never }
-    | { resource: AdminForthResource, recordId: any, record?: never, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra, updates: any }
+    params: { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, response: IAdminForthHttpResponse, extra?: HttpExtra, updates?: never }
+    | { resource: AdminForthResource, recordId: any, record?: never, oldRecord: any, adminUser: AdminUser, response: IAdminForthHttpResponse, extra?: HttpExtra, updates: any }
   ): Promise<{ error?: string }>;
 
   deleteResourceRecord(
-    params: { resource: AdminForthResource, recordId: string, adminUser: AdminUser, record: any, extra?: HttpExtra }
+    params: { resource: AdminForthResource, recordId: string, adminUser: AdminUser, record: any, response: IAdminForthHttpResponse, extra?: HttpExtra }
   ): Promise<{ error?: string }>;
 
   auth: IAdminForthAuth;
@@ -469,6 +468,13 @@ export interface IAdminForthPlugin {
   instanceUniqueRepresentation(pluginOptions: any) : string;
 
 
+  /**   
+   * If this method returns true, AdminForth will allow only one instance of plugin per whole app
+   * (only for case when we are creating copy of resource and activating plugins)
+   * If false, multiple instances of plugin can be installed on different resources.
+   */
+  shouldHaveSingleInstancePerWholeApp?(): boolean;
+
   /**
    * Optional method which will be called after AdminForth discovers all resources and their columns.
    * Can be used to validate types of columns, check if some columns are missing, etc.
@@ -539,6 +545,7 @@ export type BeforeDeleteSaveFunction = (params: {
   adminUser: AdminUser, 
   record: any, 
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -551,6 +558,7 @@ export type BeforeEditSaveFunction = (params: {
   record: any, // legacy, 'updates' should be used instead
   oldRecord: any,
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string | null}>;
 
@@ -561,6 +569,7 @@ export type BeforeCreateSaveFunction = (params: {
   adminUser: AdminUser, 
   record: any, 
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string | null, newRecordId?: string}>;
 
@@ -571,6 +580,7 @@ export type AfterCreateSaveFunction = (params: {
   record: any, 
   adminforth: IAdminForth,
   recordWithVirtualColumns?: any,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -584,6 +594,7 @@ export type AfterDeleteSaveFunction = (params: {
   adminUser: AdminUser, 
   record: any, 
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -596,6 +607,7 @@ export type AfterEditSaveFunction = (params: {
   record: any, // legacy, 'updates' should be used instead 
   oldRecord: any,
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -848,6 +860,7 @@ export interface AdminForthActionInput {
   name: string;
   showIn?: {
       list?: boolean,
+      listThreeDotsMenu?: boolean,
       showButton?: boolean,
       showThreeDotsMenu?: boolean,
   };
@@ -861,6 +874,7 @@ export interface AdminForthActionInput {
       resource: AdminForthResource;
       recordId: string;
       adminUser: AdminUser;
+      response: IAdminForthHttpResponse;
       extra?: HttpExtra;
       tr: Function;
   }) => Promise<{
@@ -1282,6 +1296,14 @@ export class Filters {
       subFilters,
     };
   }
+
+  static IS_EMPTY(field: string): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.IS_EMPTY, value: null };
+  }
+
+  static IS_NOT_EMPTY(field: string): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.IS_NOT_EMPTY, value: null };
+  }
 }
 
 export type FDataSort = (field: string, direction: AdminForthSortDirections) => IAdminForthSort;
@@ -1358,6 +1380,7 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
+  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.
@@ -1526,8 +1549,8 @@ export interface AdminForthBulkAction extends AdminForthBulkActionCommon {
    * Callback which will be called on backend when user clicks on action button.
    * It should return Promise which will be resolved when action is done.
    */
-  action: ({ resource, selectedIds, adminUser, tr }: { 
-    resource: AdminForthResource, selectedIds: Array<any>, adminUser: AdminUser, tr: (key: string, category?: string, params?: any) => string
+  action: ({ resource, selectedIds, adminUser, response, tr }: { 
+    resource: AdminForthResource, selectedIds: Array<any>, adminUser: AdminUser, response: IAdminForthHttpResponse, tr: (key: string, category?: string, params?: any) => string
   }) => Promise<{ ok: boolean, error?: string, successMessage?: string }>,
 
   /**

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

@@ -28,6 +28,8 @@ export enum AdminForthFilterOperators {
   NIN = 'nin',
   AND = 'and',
   OR = 'or',
+  IS_EMPTY = 'isEmpty',
+  IS_NOT_EMPTY = 'isNotEmpty',
 };
 
 export type FilterParams = {
@@ -294,7 +296,7 @@ export interface AdminForthComponentDeclarationFull {
     [key: string]: any,
   }
 }
-import { type AdminForthActionInput } from './Back.js' 
+import { type AdminForthActionInput, type AdminForthResource } from './Back.js' 
 export { type AdminForthActionInput } from './Back.js'
 
 export type AdminForthComponentDeclaration = AdminForthComponentDeclarationFull | string;
@@ -445,7 +447,7 @@ export interface AdminForthResourceInputCommon {
        * If you wish to open page in new tab, add `target=_blank` get param to returned URL, example:
        * 
        * ```ts
-       * listTableClickUrl: async (record, adminUser) => {
+       * listTableClickUrl: async (record, adminUser, resource) => {
        *   return `https://google.com/search?q=${record.name}&target=_blank`;
        * }
        * ```
@@ -455,7 +457,7 @@ export interface AdminForthResourceInputCommon {
        * Example:
        * 
        * ```ts
-       * listTableClickUrl: async (record, adminUser) => {
+       * listTableClickUrl: async (record, adminUser, resource) => {
        *   return null;
        * }
        * ```
@@ -464,7 +466,7 @@ export interface AdminForthResourceInputCommon {
        * @param adminUser - user who clicked
        * @returns 
        */
-      listTableClickUrl?: (record: any, adminUser: AdminUser) => Promise<string | null>,
+      listTableClickUrl?: (record: any, adminUser: AdminUser, resource: AdminForthResource) => Promise<string | null>,
 
       /**
        * Whether to refresh existing list rows automatically every N seconds.
@@ -503,6 +505,7 @@ export interface AdminForthResourceInputCommon {
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           customActionIcons?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableBodyStart?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableRowReplace?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
@@ -529,11 +532,6 @@ export interface AdminForthResourceInputCommon {
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
-          /**
-           * Custom Save button component for Edit page.
-           * Accepts props: [record, resource, adminUser, meta, saving, validating, isValid, disabled, saveRecord]
-           */
-          saveButton?: AdminForthComponentDeclaration,
         },
 
         /**
@@ -546,11 +544,6 @@ export interface AdminForthResourceInputCommon {
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
-          /**
-           * Custom Save button component for Create page.
-           * Accepts props: [record, resource, adminUser, meta, saving, validating, isValid, disabled, saveRecord]
-           */
-          saveButton?: AdminForthComponentDeclaration,
         },
       }
     },

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

@@ -10,9 +10,10 @@ export interface FrontendAPIInterface {
      * Example: 
      * 
      * ```ts
-     * import adminforth from '@/adminforth'
+     *import { useAdminforth } from '@/adminforth';
      * 
-     * const isConfirmed = await adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+     * const { confirm } = useAdminforth();
+     * const isConfirmed = await confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
      * if (isConfirmed) {
      *  your code...
      * }
@@ -31,9 +32,10 @@ export interface FrontendAPIInterface {
      * Example:
      * 
      * ```ts
-     * import adminforth from '@/adminforth'
+     * import { useAdminforth } from '@/adminforth';
+     * const { alert } = useAdminforth();
      * 
-     * adminforth.alert({message: 'Hello', variant: 'success'})
+     * alert({message: 'Hello', variant: 'success'})
      * ```
      * 
      * @param params - The parameters of the alert
@@ -76,13 +78,14 @@ export interface FrontendAPIInterface {
          * Example:
          * 
          * ```ts
-         * import adminforth from '@/adminforth'
+         * import { useAdminforth } from '@/adminforth';
          * 
+         * const { list } = useAdminforth();
          * // Regular filter (will show in badge if column.showIn.filter !== false)
-         * adminforth.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
          * 
          * // Hidden filter (won't show in badge if column.showIn.filter === false)
-         * adminforth.list.setFilter({field: 'internal_status', operator: 'eq', value: 'active'})
+         * list.setFilter({field: 'internal_status', operator: 'eq', value: 'active'})
          * ```
          * 
          * Please note that you can set/update filter even for fields which have showIn.filter=false in resource configuration.
@@ -102,9 +105,9 @@ export interface FrontendAPIInterface {
          * Example:
          * 
          * ```ts
-         * import adminforth from '@/adminforth';
-         * 
-         * adminforth.list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * import { useAdminforth } from '@/adminforth';
+         * const { list } = useAdminforth();
+         * list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
          * ```
          * 
          * @param filter - The filter to update
@@ -136,6 +139,18 @@ export interface FrontendAPIInterface {
      * Close the user menu dropdown
      */
     closeUserMenuDropdown(): void;
+
+    /**
+     * 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; }>;
+
+    /**
+     * Clear save interceptors for a specific resource or all resources if no resourceId is provided
+     * 
+     * @param resourceId - The resource ID to clear interceptors for
+     */
+    clearSaveInterceptors(resourceId?: string): void;
 }
 
 export type ConfirmParams = {

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

@@ -17,25 +17,7 @@
       >
         {{ $t('Cancel') }}
       </button>
-
-      <!-- Custom Save Button injection -->
-      <component
-        v-if="createSaveButtonInjection"
-        :is="getCustomComponent(createSaveButtonInjection)"
-        :meta="createSaveButtonInjection.meta"
-        :record="record"
-        :resource="coreStore.resource"
-        :adminUser="coreStore.adminUser"
-        :saving="saving"
-        :validating="validating"
-        :isValid="isValid"
-        :disabled="saving || (validating && !isValid)"
-        :saveRecord="saveRecord"
-      />
-      
-      <!-- Default Save Button fallback -->
       <button  
-        v-else
         @click="() => saveRecord()"
         class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
@@ -99,12 +81,12 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, ref, watch, nextTick } from 'vue';
+import { onMounted, onBeforeMount, ref, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
@@ -121,18 +103,12 @@ const router = useRouter();
 const record = ref({});
 
 const coreStore = useCoreStore();
+const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
 
 const { t } = useI18n();
 
 const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
 
-const createSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
-  const raw: any = coreStore.resourceOptions?.pageInjections?.create?.saveButton as any;
-  if (!raw) return null;
-  const item = Array.isArray(raw) ? raw[0] : raw;
-  return item as AdminForthComponentDeclarationFull;
-});
-
 const initialValues = ref({});
 
 const readonlyColumns = ref([]);
@@ -142,6 +118,10 @@ async function onUpdateRecord(newRecord: any) {
   record.value = newRecord;
 }
 
+onBeforeMount(() => {
+  clearSaveInterceptors(route.params.resourceId as string);
+});
+
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
@@ -182,7 +162,7 @@ onMounted(async () => {
   initThreeDotsDropdown();
 });
 
-async function saveRecord(opts?: { confirmationResult?: any }) {
+async function saveRecord() {
   if (!isValid.value) {
     validating.value = true;
     await nextTick();
@@ -194,6 +174,18 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
   const requiredColumns = coreStore.resource?.columns.filter(c => c.required?.create === true) || [];
   const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value, coreStore.resource?.columns || []) === false);  
   saving.value = true;
+  const interceptorsResult = await runSaveInterceptors({
+    action: 'create',
+    values: record.value,
+    resource: coreStore.resource,
+    resourceId: route.params.resourceId as string,
+  });
+  if (!interceptorsResult.ok) {
+    saving.value = false;
+    if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
+    return;
+  }
+  const interceptorConfirmationResult = (interceptorsResult.extra as Record<string, any>)?.confirmationResult;
   const response = await callAdminForthApi({
     method: 'POST',
     path: `/create_record`,
@@ -202,7 +194,7 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
       record: record.value,
       requiredColumnsToSkip,
       meta: {
-        ...(opts?.confirmationResult ? { confirmationResult: opts.confirmationResult } : {}),
+        ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
       },
     },
   });
@@ -220,7 +212,7 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
         primaryKey: response.newRecordId
       } 
     });
-    adminforth.alert({
+    alert({
       message: t('Record created successfully!'),
       variant: 'success'
     });
@@ -236,7 +228,7 @@ function scrollToInvalidField() {
     }
   }
   const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
-  adminforth.alert({
+  alert({
     messageHtml: errorMessage,
     variant: 'danger'
   });

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

@@ -16,25 +16,7 @@
       >
         {{ $t('Cancel') }}
       </button>
-
-      <!-- Custom Save Button injection -->
-      <component
-        v-if="editSaveButtonInjection"
-        :is="getCustomComponent(editSaveButtonInjection)"
-        :meta="editSaveButtonInjection.meta"
-        :record="editableRecord"
-        :resource="coreStore.resource"
-        :adminUser="coreStore.adminUser"
-        :saving="saving"
-        :validating="validating"
-        :isValid="isValid"
-        :disabled="saving || (validating && !isValid)"
-        :saveRecord="saveRecord"
-      />
-      
-      <!-- Default Save Button fallback -->
       <button
-        v-else
         @click="() => saveRecord()"
         class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
@@ -94,17 +76,18 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { computed, onMounted, ref, type Ref, nextTick, watch } from 'vue';
+import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();
 const coreStore = useCoreStore();
+const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -124,13 +107,6 @@ watch(record, (newVal) => {
 
 const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
 
-const editSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
-  const raw: any = coreStore.resourceOptions?.pageInjections?.edit?.saveButton as any;
-  if (!raw) return null;
-  const item = Array.isArray(raw) ? raw[0] : raw;
-  return item as AdminForthComponentDeclarationFull;
-});
-
 async function onUpdateRecord(newRecord: Record<string, any>) {
   record.value = newRecord;
 }
@@ -152,6 +128,10 @@ const editableRecord = computed(() => {
   return newRecord;
 })
 
+onBeforeMount(() => {
+  clearSaveInterceptors(route.params.resourceId as string);
+});
+
 onMounted(async () => {
   loading.value = true;
 
@@ -173,7 +153,7 @@ onMounted(async () => {
   loading.value = false;
 });
 
-async function saveRecord(opts?: { confirmationResult?: any }) {
+async function saveRecord() {
   if (!isValid.value) {
     validating.value = true;
     await nextTick();
@@ -184,6 +164,18 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
   }
 
   saving.value = true;
+  const interceptorsResult = await runSaveInterceptors({
+    action: 'edit',
+    values: record.value,
+    resource: coreStore.resource,
+    resourceId: route.params.resourceId as string,
+  });
+  if (!interceptorsResult.ok) {
+    saving.value = false;
+    if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
+    return;
+  }
+  const interceptorConfirmationResult = interceptorsResult.extra?.confirmationResult;
   const updates: Record<string, any> = {};
   for (const key in record.value) {
     let columnIsUpdated = false;
@@ -216,14 +208,14 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
       recordId: route.params.primaryKey,
       record: updates,
       meta: {
-        ...(opts?.confirmationResult ? { confirmationResult: opts.confirmationResult } : {}),
+        ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
       },
     },
   });
   if (resp.error && resp.error !== 'Operation aborted by hook') {
     showErrorTost(resp.error);
   } else {
-    adminforth.alert({
+    alert({
       message: t('Record updated successfully'),
       variant: 'success',
       timeout: 400000
@@ -242,7 +234,7 @@ function scrollToInvalidField() {
     }
   }
   const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
-  adminforth.alert({
+  alert({
     messageHtml: errorMessage,
     variant: 'danger'
   });

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

@@ -119,7 +119,7 @@
       :adminUser="coreStore.adminUser"
     />
     <ResourceListTableVirtual
-      v-if="isVirtualScrollEnabled"
+      v-if="isVirtualScrollEnabled && !coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -143,6 +143,11 @@
           ? [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"
@@ -152,7 +157,7 @@
     />
 
     <ResourceListTable
-      v-else
+      v-else-if="!coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -176,6 +181,11 @@
           ? [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"
@@ -215,10 +225,10 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 
 import Filters from '@/components/Filters.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
 const filtersShow = ref(false);
-
+const { confirm, alert, list } = useAdminforth();
 const coreStore = useCoreStore();
 const filtersStore = useFiltersStore();
 
@@ -345,7 +355,7 @@ async function refreshExistingList(pk?: any) {
 async function startBulkAction(actionId: string) {
   const action = coreStore.resource?.options?.bulkActions?.find(a => a.id === actionId);
   if (action?.confirm) {
-    const confirmed = await adminforth.confirm({
+    const confirmed = await confirm({
       message: action.confirm,
     });
     if (!confirmed) {
@@ -370,7 +380,7 @@ async function startBulkAction(actionId: string) {
     await getList();
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -454,7 +464,7 @@ async function init() {
   clearAutoRefresher();
   if (coreStore.resource!.options?.listRowsAutoRefreshSeconds) {
     listAutorefresher = setInterval(async () => {
-      await adminforth.list.silentRefresh();
+      await list.silentRefresh();
     }, coreStore.resource!.options.listRowsAutoRefreshSeconds * 1000);
   }
 }
@@ -464,7 +474,7 @@ watch([page, sort, () => filtersStore.filters], async () => {
   await getList();
 }, { deep: true });
 
-adminforth.list.refresh = async () => {
+list.refresh = async () => {
   const result = await getList();
 
   if (!result) {
@@ -478,11 +488,11 @@ adminforth.list.refresh = async () => {
   return {};
 };
 
-adminforth.list.silentRefresh = async () => {
+list.silentRefresh = async () => {
   return await refreshExistingList();
 }
 
-adminforth.list.silentRefreshRow = async (pk: any) => {
+list.silentRefreshRow = async (pk: any) => {
   return await refreshExistingList(pk);
 }