adminforth 2.17.0-next.30 → 2.17.0-next.31

package/commands/createCustomComponent/templates/customCrud/afterBreadcrumbs.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

package/commands/createCustomComponent/templates/customCrud/beforeActionButtons.vue.hbs

@@ -13,9 +13,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
+const { alert } = useAdminforth();
 const { t } = useI18n();
 
 const props = defineProps<{
@@ -30,7 +31,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

package/commands/createCustomComponent/templates/customCrud/beforeBreadcrumbs.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

package/commands/createCustomComponent/templates/customCrud/bottom.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

package/commands/createCustomComponent/templates/customCrud/threeDotsDropdownItems.vue.hbs

@@ -12,12 +12,14 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth} from '@/adminforth';
 import { onMounted } from 'vue';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -29,7 +31,7 @@ const menuItems = [
   {
     label: 'Show Success Alert',
     action: () => {
-      adminforth.alert({
+      alert({
         message: t('Success Alert'),
         variant: 'success',
       });

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/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);
 }
 

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

@@ -28,7 +28,7 @@ import { useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent, getIcon } from '@/utils';
 import { Dropdown } from 'flowbite';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { VerticalTabs } from '@/afcl'
 import { useRoute } from 'vue-router'
 
@@ -36,6 +36,7 @@ const route = useRoute()
 const coreStore = useCoreStore();
 const router = useRouter();
 
+let { closeUserMenuDropdown } = useAdminforth();
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 const dropdownUserButton = ref<HTMLElement | null>(null);
@@ -58,7 +59,7 @@ watch(dropdownUserButton, (el) => {
       document.querySelector('#dropdown-user') as HTMLElement,
       document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
     );
-    adminforth.closeUserMenuDropdown = () => dd.hide();
+    closeUserMenuDropdown = () => dd.hide();
   }
 });
 

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

@@ -144,16 +144,17 @@ import {callAdminForthApi} from '@/utils';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import ShowTable from '@/components/ShowTable.vue';
-import adminforth from "@/adminforth";
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { getIcon } from '@/utils';
-import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import { type AdminForthComponentDeclarationFull, type AdminForthResourceColumnCommon, type FieldGroup } from '@/types/Common.js';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
 const { t } = useI18n();
+const { confirm, alert, show } = useAdminforth();
 const coreStore = useCoreStore();
 
 const actionLoadingStates = ref<Record<string, boolean>>({});
@@ -206,7 +207,7 @@ const allColumns = computed(() => {
 
 const otherColumns = computed(() => {
   const groupedColumnNames = new Set(
-    groups.value.flatMap(group => group.columns.map((col: AdminForthResourceColumnCommon) => col.name))
+    groups.value.flatMap(group => group.columns?.map((col: AdminForthResourceColumnCommon) => col.name))
   );
 
   return coreStore.resource?.columns.filter(
@@ -215,7 +216,7 @@ const otherColumns = computed(() => {
 });
 
 async function deleteRecord() {
-  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'),
@@ -282,7 +283,7 @@ async function startCustomAction(actionId: string, extra: any) {
     });
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -294,7 +295,7 @@ async function startCustomAction(actionId: string, extra: any) {
   }
 }
 
-adminforth.show.refresh = () => {
+show.refresh = () => {
   (async () => {
     try {
       loading.value = true;

package/dist/types/FrontendAPI.d.ts

@@ -8,9 +8,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...
      * }
@@ -28,9 +29,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
@@ -72,13 +74,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.
@@ -97,9 +100,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
@@ -127,6 +130,25 @@ 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/types/FrontendAPI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendAPI.d.ts","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3E,MAAM,WAAW,oBAAoB;IAEjC;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,MAAM,EAAC,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAG3D,IAAI,EAAE;QAEF;;WAEG;QACH,OAAO,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAExC;;;;WAIG;QACH,aAAa,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAE9C;;WAEG;QACH,gBAAgB,CAAE,EAAE,EAAE,GAAG,GAAG,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAEzD;;WAEG;QACH,sBAAsB,IAAI,IAAI,CAAC;QAE/B;;;;;;;;;;;;;;;;;;;;;;;;WAwBG;QACH,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEtC;;;;;;;;;;;;;;;;WAgBG;QACH,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEzC;;WAEG;QACH,YAAY,IAAI,IAAI,CAAC;KACxB,CAAA;IAED,IAAI,EAAE;QACF;;;WAGG;QACH,OAAO,IAAI,IAAI,CAAC;KACnB,CAAA;IAED,IAAI,EAAE;QACF;;WAEG;QACH,iBAAiB,IAAI,IAAI,CAAC;KAC7B,CAAA;IAED;;OAEG;IACH,qBAAqB,IAAI,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,aAAa,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CAEf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;IAEnD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE;QAAC,KAAK,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;CAE3C,CAAA;AAID,oBAAY,YAAY;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd"}
+{"version":3,"file":"FrontendAPI.d.ts","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3E,MAAM,WAAW,oBAAoB;IAEjC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,MAAM,EAAC,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAG3D,IAAI,EAAE;QAEF;;WAEG;QACH,OAAO,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAExC;;;;WAIG;QACH,aAAa,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAE9C;;WAEG;QACH,gBAAgB,CAAE,EAAE,EAAE,GAAG,GAAG,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAEzD;;WAEG;QACH,sBAAsB,IAAI,IAAI,CAAC;QAE/B;;;;;;;;;;;;;;;;;;;;;;;;;WAyBG;QACH,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEtC;;;;;;;;;;;;;;;;WAgBG;QACH,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEzC;;WAEG;QACH,YAAY,IAAI,IAAI,CAAC;KACxB,CAAA;IAED,IAAI,EAAE;QACF;;;WAGG;QACH,OAAO,IAAI,IAAI,CAAC;KACnB,CAAA;IAED,IAAI,EAAE;QACF;;WAEG;QACH,iBAAiB,IAAI,IAAI,CAAC;KAC7B,CAAA;IAED;;OAEG;IACH,qBAAqB,IAAI,IAAI,CAAC;IAE9B;;OAEG;IACH,mBAAmB,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,QAAQ,GAAC,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;KAAE,GAAG,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;KAAE,CAAC,CAAC;IAE5K;;;;OAIG;IACH,qBAAqB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,MAAM,aAAa,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CAEf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;IAEnD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE;QAAC,KAAK,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;CAE3C,CAAA;AAID,oBAAY,YAAY;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd"}

package/dist/types/FrontendAPI.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendAPI.js","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AA2LA,MAAM,CAAN,IAAY,YAKT;AALH,WAAY,YAAY;IACpB,iCAAiB,CAAA;IACjB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACf,CAAC,EALS,YAAY,KAAZ,YAAY,QAKrB"}
+{"version":3,"file":"FrontendAPI.js","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AA0MA,MAAM,CAAN,IAAY,YAKT;AALH,WAAY,YAAY;IACpB,iCAAiB,CAAA;IACjB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACf,CAAC,EALS,YAAY,KAAZ,YAAY,QAKrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.17.0-next.30",
+  "version": "2.17.0-next.31",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",