adminforth 2.17.0-next.30 → 2.17.0-next.32

package/dist/spa/src/App.vue

@@ -196,7 +196,7 @@ import { getCustomComponent } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
 import { initFrontedAPI } from '@/adminforth';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
 import { Tooltip } from '@/afcl'
 
@@ -204,6 +204,9 @@ const coreStore = useCoreStore();
 const toastStore = useToastStore();
 const userStore = useUserStore();
 
+const { menu } = useAdminforth();
+let { closeUserMenuDropdown } = useAdminforth();
+
 initFrontedAPI()
 
 createHead()
@@ -310,7 +313,7 @@ watch(dropdownUserButton, (dropdownUserButton) => {
       document.querySelector('#dropdown-user') as HTMLElement,
       document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
     );
-    adminforth.closeUserMenuDropdown = () => {
+    closeUserMenuDropdown = () => {
       dd.hide();
     }
   }
@@ -329,7 +332,7 @@ onMounted(async () => {
   // before init flowbite we have to wait router initialized because it affects dom(our v-ifs) and fetch menu
   await initRouter();
 
-  adminforth.menu.refreshMenuBadges = async () => {
+  menu.refreshMenuBadges = async () => {
     await coreStore.fetchMenuBadges();
   }
 

package/dist/spa/src/adminforth.ts

@@ -24,7 +24,7 @@ class FrontendAPI implements FrontendAPIInterface {
   public list: {
     refresh(): Promise<{ error? : string }>;
     silentRefresh(): Promise<{ error? : string }>;
-    silentRefreshRow(): Promise<{ error? : string }>;
+    silentRefreshRow(pk: any): Promise<{ error? : string }>;
     closeThreeDotsDropdown(): Promise<{ error? : string }>;
     closeUserMenuDropdown: () => void;
     setFilter: (filter: FilterParams) => void;
@@ -228,7 +228,14 @@ export function useAdminforth() {
   const api = frontendAPI as FrontendAPI;
   return {
     registerSaveInterceptor: (handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>) => api.registerSaveInterceptor(handler),
-    api,
+    alert: (params: AlertParams) => api.alert(params),
+    confirm: (params: ConfirmParams) => api.confirm(params),
+    list: api.list,
+    show: api.show,
+    menu: api.menu,
+    closeUserMenuDropdown: () => api.closeUserMenuDropdown(),
+    runSaveInterceptors: (params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => api.runSaveInterceptors(params),
+    clearSaveInterceptors: (resourceId?: string) => api.clearSaveInterceptors(resourceId),
   };
 }
 

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

@@ -100,7 +100,9 @@ import { humanifySize } from '@/utils';
 import { ref, type Ref, computed } from 'vue';
 import { IconFileSolid } from '@iconify-prerendered/vue-flowbite';
 import { watch } from 'vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { alert } = useAdminforth();
 
 const props = defineProps<{
   extensions: string[],
@@ -175,7 +177,7 @@ function doEmit(filesIn: FileList) {
     );
     
     if (isDuplicate) {
-      adminforth.alert({
+      alert({
         message: `The file "${file.name}" is already selected.`,
         variant: 'warning',
       });
@@ -183,14 +185,14 @@ function doEmit(filesIn: FileList) {
     }
 
     if (!allowedExtensions.includes(`.${extension}`)) {
-      adminforth.alert({
+      alert({
         message: `Sorry, the file type .${extension} is not allowed. Please upload a file with one of the following extensions: ${allowedExtensions.join(', ')}`,
         variant: 'danger',
       });
       return;
     }
     if (size > maxSizeBytes) {
-      adminforth.alert({
+      alert({
         message: `Sorry, the file size ${humanifySize(size)} exceeds the maximum allowed size of ${humanifySize(maxSizeBytes)}.`,
         variant: 'danger',
       });

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

@@ -340,13 +340,14 @@ import {
 import router from '@/router';
 import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
+const { alert, confirm } = useAdminforth();
 const props = defineProps<{
   page: number,
   resource: AdminForthResourceCommon | null,
@@ -543,7 +544,7 @@ async function onClick(e: any, row: any) {
 }
 
 async function deleteRecord(row: any) {
-  const data = await adminforth.confirm({
+  const data = await confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
@@ -609,7 +610,7 @@ async function startCustomAction(actionId: string, row: any, extraData: Record<s
     emits('update:records', true);
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });

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

@@ -364,13 +364,14 @@ import {
 import router from '@/router';
 import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
+const { alert, confirm } = useAdminforth();
 const props = defineProps<{
   page: number,
   resource: AdminForthResourceCommon | null,
@@ -570,7 +571,7 @@ async function onClick(e: any,row: any) {
 }
 
 async function deleteRecord(row: any) {
-  const data = await adminforth.confirm({
+  const data = await confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
@@ -635,7 +636,7 @@ async function startCustomAction(actionId: string, row: any, extraData: Record<s
     emits('update:records', true);
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });

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

@@ -299,7 +299,9 @@ import { IconCloseSidebarSolid, IconOpenSidebarSolid } from '@iconify-prerendere
 import { getIcon, verySimpleHash, loadFile, getCustomComponent } from '@/utils';
 import { Tooltip } from '@/afcl';
 import type { AnnouncementBadgeResponse } from '@/types/Common';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { menu } = useAdminforth();
 
 interface Props {
   sideBarOpen: boolean;
@@ -424,7 +426,7 @@ function closeCTA() {
   nextTick( async() => {
     emit('loadMenu');
     await coreStore.fetchMenuBadges();
-    adminforth.menu.refreshMenuBadges();
+    menu.refreshMenuBadges();
   })
 }
 

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

@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { getCustomComponent, getIcon } from '@/utils';
 import { useCoreStore } from '@/stores/core';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
@@ -88,7 +88,7 @@ import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
 import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
 
-
+const { list, alert} = useAdminforth();
 const route = useRoute();
 const coreStore = useCoreStore();
 const router = useRouter();
@@ -119,7 +119,7 @@ function setComponentRef(el: ComponentPublicInstance | null, index: number) {
 }
 
 async function handleActionClick(action: AdminForthActionInput, payload: any) {
-  adminforth.list.closeThreeDotsDropdown();
+  list.closeThreeDotsDropdown();
   
   const actionId = action.id;
   const data = await callAdminForthApi({
@@ -156,7 +156,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
     });
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -164,7 +164,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
   }
   
   if (data?.error) {
-    adminforth.alert({
+    alert({
       message: data.error,
       variant: 'danger'
     });
@@ -172,7 +172,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
 }
 
 function startBulkAction(actionId: string) {
-  adminforth.list.closeThreeDotsDropdown();
+  list.closeThreeDotsDropdown();
   emit('startBulkAction', actionId);
   showDropdown.value = false;
 }

package/dist/spa/src/composables/useFrontendApi.ts

@@ -1,17 +1,21 @@
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
 
 export function showSuccesTost(message: string) {
-  adminforth.alert({ message, variant: 'success' });  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'success' });  
   return message;
 }
 
 export function showWarningTost(message: string) {
-  adminforth.alert({ message, variant: 'warning' });  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'warning' });  
   return message;
 }
 
 export function showErrorTost(message: string, timeout?: number) {
-  adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'danger', timeout: timeout || 30});  
   return message;
 }
 

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

@@ -15,10 +15,11 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { alert } = useAdminforth();
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
   const val = props.record[props.column.name];
@@ -34,7 +35,7 @@ const id = ref();
 
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
-  adminforth.alert({
+  alert({
     message: t('ID copied to clipboard'),
     variant: 'success',
   })

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

@@ -15,10 +15,11 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { alert } = useAdminforth();
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
   const val = props.record[props.column.name];
@@ -34,7 +35,7 @@ const id = ref();
 
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
-  adminforth.alert({
+  alert({
     message: t('ID copied to clipboard'),
     variant: 'success',
   })

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

@@ -2,12 +2,13 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 import websocket from '@/websocket';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
 export const useCoreStore = defineStore('core', () => {
+  const { alert } = useAdminforth();
   const resourceById: Ref<Record<string, ResourceVeryShort>> = ref({});
   const theme: Ref<'light'| 'dark'> = ref(window.localStorage.getItem('af__theme') as ('light'|'dark') || 'light');
 
@@ -157,7 +158,7 @@ export const useCoreStore = defineStore('core', () => {
     });
 
     if (respData.error) {
-      adminforth.alert({
+      alert({
         message: respData.error,
         variant: 'danger',
         timeout: 30,

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

@@ -359,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;
@@ -545,6 +545,7 @@ export type BeforeDeleteSaveFunction = (params: {
   adminUser: AdminUser, 
   record: any, 
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -557,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}>;
 
@@ -567,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}>;
 
@@ -577,6 +580,7 @@ export type AfterCreateSaveFunction = (params: {
   record: any, 
   adminforth: IAdminForth,
   recordWithVirtualColumns?: any,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -590,6 +594,7 @@ export type AfterDeleteSaveFunction = (params: {
   adminUser: AdminUser, 
   record: any, 
   adminforth: IAdminForth,
+  response: IAdminForthHttpResponse,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -602,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}>;
 
@@ -1543,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/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

@@ -86,7 +86,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import adminforth, { useAdminforth } from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
@@ -103,7 +103,7 @@ const router = useRouter();
 const record = ref({});
 
 const coreStore = useCoreStore();
-const { api } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
 
 const { t } = useI18n();
 
@@ -119,7 +119,7 @@ async function onUpdateRecord(newRecord: any) {
 }
 
 onBeforeMount(() => {
-  api.clearSaveInterceptors(route.params.resourceId as string);
+  clearSaveInterceptors(route.params.resourceId as string);
 });
 
 onMounted(async () => {
@@ -174,7 +174,7 @@ async function saveRecord() {
   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 api.runSaveInterceptors({
+  const interceptorsResult = await runSaveInterceptors({
     action: 'create',
     values: record.value,
     resource: coreStore.resource,
@@ -212,7 +212,7 @@ async function saveRecord() {
         primaryKey: response.newRecordId
       } 
     });
-    adminforth.alert({
+    alert({
       message: t('Record created successfully!'),
       variant: 'success'
     });
@@ -228,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

@@ -80,14 +80,14 @@ import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch } fr
 import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import adminforth, { useAdminforth } 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 { api } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -129,7 +129,7 @@ const editableRecord = computed(() => {
 })
 
 onBeforeMount(() => {
-  api.clearSaveInterceptors(route.params.resourceId as string);
+  clearSaveInterceptors(route.params.resourceId as string);
 });
 
 onMounted(async () => {
@@ -164,7 +164,7 @@ async function saveRecord() {
   }
 
   saving.value = true;
-  const interceptorsResult = await api.runSaveInterceptors({
+  const interceptorsResult = await runSaveInterceptors({
     action: 'edit',
     values: record.value,
     resource: coreStore.resource,
@@ -215,7 +215,7 @@ async function saveRecord() {
   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
@@ -234,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

@@ -225,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();
 
@@ -355,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) {
@@ -380,7 +380,7 @@ async function startBulkAction(actionId: string) {
     await getList();
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -464,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);
   }
 }
@@ -474,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) {
@@ -488,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);
 }