adminforth 2.26.0-next.29 → 2.26.0-next.30

package/dist/spa/package-lock.json

@@ -34,6 +34,7 @@
         "@tailwindcss/typography": "^0.5.19",
         "@tsconfig/node20": "^20.1.4",
         "@types/node": "^20.12.5",
+        "@types/sanitize-html": "^2.16.1",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/tsconfig": "^0.5.1",
@@ -1642,6 +1643,49 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/sanitize-html": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@types/sanitize-html/-/sanitize-html-2.16.1.tgz",
+      "integrity": "sha512-n9wjs8bCOTyN/ynwD8s/nTcTreIHB1vf31vhLMGqUPNHaweKC4/fAl4Dj+hUlCTKYgm4P3k83fmiFfzkZ6sgMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^10.1"
+      }
+    },
+    "node_modules/@types/sanitize-html/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@types/sanitize-html/node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",

package/dist/spa/package.json

@@ -39,6 +39,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.12.5",
+    "@types/sanitize-html": "^2.16.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",

package/dist/spa/pnpm-lock.yaml

@@ -81,6 +81,9 @@ importers:
       '@types/node':
         specifier: ^20.12.5
         version: 20.19.37
+      '@types/sanitize-html':
+        specifier: ^2.16.1
+        version: 2.16.1
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
         version: 5.2.4(vite@5.4.21(@types/node@20.19.37)(sass@1.97.3))(vue@3.5.29(typescript@5.4.5))
@@ -677,6 +680,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/sanitize-html@2.16.1':
+    resolution: {integrity: sha512-n9wjs8bCOTyN/ynwD8s/nTcTreIHB1vf31vhLMGqUPNHaweKC4/fAl4Dj+hUlCTKYgm4P3k83fmiFfzkZ6sgMA==}
+
   '@types/web-bluetooth@0.0.14':
     resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
 
@@ -1273,6 +1279,9 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
+
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
@@ -2265,6 +2274,10 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/sanitize-html@2.16.1':
+    dependencies:
+      htmlparser2: 10.1.0
+
   '@types/web-bluetooth@0.0.14': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -2972,6 +2985,13 @@ snapshots:
 
   hookable@5.5.3: {}
 
+  htmlparser2@10.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 7.0.1
+
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0

package/dist/spa/src/adminforth.ts

@@ -19,26 +19,13 @@ class FrontendAPI implements FrontendAPIInterface {
   public modalStore:any
   public filtersStore:any  
   public coreStore:any
-  private saveInterceptors: Record<string, Array<(ctx: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>>> = {};
-
-  public list: {
-    refresh(): Promise<{ error? : string }>;
-    silentRefresh(): Promise<{ error? : string }>;
-    silentRefreshRow(pk: any): Promise<{ error? : string }>;
-    closeThreeDotsDropdown(): Promise<{ error? : string }>;
-    closeUserMenuDropdown: () => void;
-    setFilter: (filter: FilterParams) => void;
-    updateFilter: (filter: FilterParams) => void;
-    clearFilters: () => void;
-  }
+  private saveInterceptors: Record<string, Array<Parameters<FrontendAPIInterface['registerSaveInterceptor']>[0]>> = {};
 
-  public menu: {
-    refreshMenuBadges: () => void;
-  }
+  public list: FrontendAPIInterface['list'];
 
-  public show: {
-    refresh(): void;
-  }
+  public menu: FrontendAPIInterface['menu'];
+
+  public show: FrontendAPIInterface['show'];
 
   closeUserMenuDropdown(): void {
     console.log('closeUserMenuDropdown')
@@ -70,9 +57,6 @@ class FrontendAPI implements FrontendAPIInterface {
         console.log('closeThreeDotsDropdown')
         return { error: 'Not implemented' }
       },
-      closeUserMenuDropdown: () => {
-        console.log('closeUserMenuDropdown')
-      },
       setFilter: this.setListFilter.bind(this),
       updateFilter: this.updateListFilter.bind(this),
       clearFilters: this.clearListFilters.bind(this),
@@ -83,11 +67,15 @@ class FrontendAPI implements FrontendAPIInterface {
         console.log('show.refresh')
       }
     }
+
+    this.closeUserMenuDropdown = () => {
+      console.log('closeUserMenuDropdown')
+    };
   }
 
   registerSaveInterceptor(
-    handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>,
-  ): void {
+    handler: Parameters<FrontendAPIInterface['registerSaveInterceptor']>[0]
+  ): ReturnType<FrontendAPIInterface['registerSaveInterceptor']> {
     const rid = router.currentRoute.value?.params?.resourceId as string;
     if (!rid) {
       return;
@@ -98,7 +86,7 @@ class FrontendAPI implements FrontendAPIInterface {
     this.saveInterceptors[rid].push(handler);
   }
 
-  async runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }> {
+  async runSaveInterceptors(params: Parameters<FrontendAPIInterface['runSaveInterceptors']>[0]): ReturnType<FrontendAPIInterface['runSaveInterceptors']> {
     const list = this.saveInterceptors[params.resourceId] || [];
     const aggregatedExtra: Record<string, any> = {};
     for (const fn of list) {
@@ -120,7 +108,7 @@ class FrontendAPI implements FrontendAPIInterface {
     return { ok: true, extra: aggregatedExtra };
   }
 
-  clearSaveInterceptors(resourceId?: string): void {
+  clearSaveInterceptors(resourceId?: Parameters<FrontendAPIInterface['clearSaveInterceptors']>[0]): ReturnType<FrontendAPIInterface['clearSaveInterceptors']> {
     if (resourceId) {
       delete this.saveInterceptors[resourceId];
     } else {
@@ -128,7 +116,7 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  confirm(params: ConfirmParams): Promise<boolean> {
+  confirm(params: Parameters<FrontendAPIInterface['confirm']>[0]): ReturnType<FrontendAPIInterface['confirm']> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
@@ -142,7 +130,7 @@ class FrontendAPI implements FrontendAPIInterface {
     })
   }
 
-  alert(params: AlertParams): void | Promise<string> | string {
+  alert(params: Parameters<FrontendAPIInterface['alert']>[0]): ReturnType<FrontendAPIInterface['alert']> {
     const toats = {
       message: params.message,
       messageHtml: params.messageHtml,
@@ -162,14 +150,14 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  listFilterValidation(filter: FilterParams): boolean {
+  listFilterValidation(filter: Parameters<FrontendAPIInterface['list']['setFilter']>[0]): boolean {
     if(router.currentRoute.value.meta.type !== 'list'){
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
     }
     return true
   }
 
-  setListFilter(filter: FilterParams): void {
+  setListFilter(filter: Parameters<FrontendAPIInterface['list']['setFilter']>[0]): ReturnType<FrontendAPIInterface['list']['setFilter']> {
     if(this.listFilterValidation(filter)){
       const existingFilterIndex = this.filtersStore.filters.findIndex((f: any) => {
         return f.field === filter.field && f.operator === filter.operator

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

@@ -43,7 +43,7 @@ const isIos = coreStore.isIos;
 
 const props = defineProps<{
   type: string,
-  fullWidth: boolean,
+  fullWidth?: boolean,
   modelValue: string,
   suffix?: string,
   prefix?: string,

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

@@ -119,10 +119,12 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick,type PropType, t
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
+type ISingleSelectModelValue = string | number;
+
 const props = defineProps({
   options: Array,
   modelValue: {
-    type: Array as PropType<(string | number)[] | (string | number)>,
+    type: Array as PropType<(ISingleSelectModelValue)[] | ISingleSelectModelValue>,
     default: () => [],
   },
   multiple: {
@@ -201,7 +203,7 @@ function updateFromProps() {
         selectedItems.value = [];
       }
     } else {
-      selectedItems.value = props.options?.filter((item: any) => props.modelValue?.includes(item.value)) || [];
+      selectedItems.value = props.options?.filter((item: any) => (props.modelValue as (ISingleSelectModelValue)[])?.includes(item.value)) || [];
     }
   }
 }

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

@@ -364,7 +364,7 @@ function sortArrayData(data:any[], sortField?:string, dir:'asc'|'desc'='asc') {
   });
 }
 
-function tableRowClick(row) {
+function tableRowClick(row: any) {
   emit("clickTableRow", row)
 }
 </script>

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

@@ -16,11 +16,11 @@
         :unmasked="unmasked"
         :deletable="!column.editReadonly"
         @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
-        @update:recordFieldValue="({ fieldName, fieldValue }: { fieldName: string; fieldValue: any }) => setCurrentValue(fieldName, fieldValue)"
+        @update:recordFieldValue="recordFieldValueUpdate"
         @update:unmasked="$emit('update:unmasked', column.name)"
         @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
         @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
-        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_: any, index: any) => index !== arrayItemIndex))"
+        @delete="deleteHandler(arrayItemIndex)"
       />
     </div>
     <div class="flex items-center">
@@ -48,7 +48,7 @@
     :columnOptions="columnOptions"
     :unmasked="unmasked"
     @update:modelValue="setCurrentValue(column.name, $event)"
-    @update:recordFieldValue="({ fieldName, fieldValue }: { fieldName: string; fieldValue: any }) => setCurrentValue(fieldName, fieldValue)"
+    @update:recordFieldValue="recordFieldValueUpdate"
     @update:unmasked="$emit('update:unmasked', column.name)"
     @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
     @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
@@ -80,4 +80,12 @@
     await nextTick();
     arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
   }
+
+  function recordFieldValueUpdate({ fieldName, fieldValue }: { fieldName: string; fieldValue: any }) {
+    props.setCurrentValue(fieldName, fieldValue);
+  }
+
+  function deleteHandler(arrayItemIndex: number | string) {
+    props.setCurrentValue(props.column.name, props.currentValues[props.column.name].filter((_: any, index: any) => index !== arrayItemIndex));
+  }
 </script> 

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

@@ -57,14 +57,14 @@
             {{ $t('Delete item') }}
           </button>
         </template>
-        <div v-for="action in (resourceOptions.actions ?? []).filter(a => a.showIn?.listThreeDotsMenu)" :key="action.id" >
+        <div v-for="action in (resourceOptions.actions ?? []).filter((a: AdminForthActionInput) => a.showIn?.listThreeDotsMenu)" :key="action.id" >
             <button class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300" @click="() => { startCustomAction(action.id, record); showMenu = false; }">
               <component
                 :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
                 :meta="action.customComponent?.meta"
                 :row="record"
-                :resource="resource"
-                :adminUser="adminUser"
+                :resource="coreStore.resource"
+                :adminUser="coreStore.adminUser"
                 @callAction="(payload? : Object) => startCustomAction(action.id, record, payload)"
               >
                 <component
@@ -79,8 +79,8 @@
         <template v-if="customActionIconsThreeDotsMenuItems">
             <component 
                 v-for="c in customActionIconsThreeDotsMenuItems"
-                :is="getCustomComponent(c)"
-                :meta="c.meta"
+                :is="getCustomComponent(formatComponent(c))"
+                :meta="formatComponent(c).meta"
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
                 :record="record"
@@ -100,9 +100,10 @@ import {
   IconDotsHorizontalOutline
 } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, onBeforeUnmount, ref, nextTick, watch } from 'vue';
-import { getIcon, getCustomComponent } from '@/utils';
+import { getIcon, getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
+import { type AdminForthActionInput, type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common';
 
 const coreStore = useCoreStore();
 const showMenu = ref(false);
@@ -113,11 +114,11 @@ const menuStyles = ref<Record<string, string>>({});
 const props = defineProps<{
     resourceOptions: any;
     record: any;
-    customActionIconsThreeDotsMenuItems: any[];
+    customActionIconsThreeDotsMenuItems: AdminForthComponentDeclaration[];
     resourceId: string;
     deleteRecord: (record: any) => void;
     updateRecords: () => void;
-    startCustomAction: (actionId: string, record: any) => void;
+    startCustomAction: (actionId: string, row: any, extraData?: Record<string, any>) => void;
 }>();
 
 onMounted(() => {

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

@@ -103,12 +103,12 @@
 
         <component
           v-for="(row, rowI) in rowsToRender"
-          :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
+          :is="tableRowReplaceInjection ? getCustomComponent(formatComponent(tableRowReplaceInjection)) : 'tr'"
           :key="`row_${row._primaryKeyValue}`"
           :record="row"
           :resource="resource"
           :adminUser="coreStore.adminUser"
-          :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
+          :meta="tableRowReplaceInjection ? formatComponent(tableRowReplaceInjection).meta : undefined"
           @click="onClick($event, row)"
           ref="rowRefs"
           class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
@@ -203,17 +203,17 @@
                   :key="action.id"
                 >
                     <component
-                      :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
-                      :meta="action.customComponent?.meta"
+                      v-if="action.customComponent"
+                      :is="action.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
+                      :meta="formatComponent(action.customComponent).meta"
                       :row="row"
                       :resource="resource"
-                      :adminUser="adminUser"
-                      @callAction="(payload? : Object) => startCustomAction(action.id, row, payload)"
+                      :adminUser="coreStore.adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id as string | number, row, payload)"
                     >
                       <button
                         type="button"
                         class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
-                        :disabled="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
@@ -236,7 +236,7 @@
                 :deleteRecord="deleteRecord"
                 :resourceId="resource.resourceId"
                 :startCustomAction="startCustomAction"
-                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems ?? []"
               />
             </div>
             
@@ -347,7 +347,7 @@ import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } f
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
@@ -360,7 +360,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -383,8 +383,8 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
-  customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclarationFull,
+  customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
+  tableRowReplaceInjection?: AdminForthComponentDeclaration,
   isVirtualScrollEnabled: boolean
 }>();
 
@@ -414,7 +414,7 @@ const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 const showListActionsThreeDots = computed(() => {
   return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
     || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
-    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || !props.resource?.options?.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
     || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
 })
 
@@ -609,7 +609,7 @@ async function deleteRecord(row: any) {
 
 const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId: string, row: any, extraData: Record<string, any> = {}) {
+async function startCustomAction(actionId: string | number, row: any, extraData: Record<string, any> = {}) {
 
   actionLoadingStates.value[actionId] = true;
 

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

@@ -52,7 +52,7 @@
         </div>
       </div>
 
-     <div v-if="coreStore.config.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
+     <div v-if="coreStore?.config?.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
       <IconExclamationCircleOutline class="inline-block align-text-bottom mr-0,5 w-5 h-5" />
       Default user <strong>"adminforth"</strong> detected. Delete it and create your own account.
     </div>

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

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

package/dist/spa/src/i18n.ts

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

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

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

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

@@ -1641,7 +1641,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
-    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    underLoginButton: Array<AdminForthComponentDeclarationFull>,
     panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
@@ -1829,7 +1829,7 @@ export type AllowedActions = {
 /**
  * General options for resource.
  */
-export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
+export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions' | 'actions'> {
 
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by

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

@@ -314,6 +314,25 @@ export type FieldGroup = {
   noTitle?: boolean;
 };
 
+export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id'> {
+  id: string;
+}
+
+export interface AdminForthBulkActionFront extends Omit<AdminForthBulkActionCommon, 'id'> {
+  id: string,
+}
+
+type AdminforthOptionsCommon = NonNullable<AdminForthResourceCommon['options']>;
+
+export interface AdminForthOptionsForFrontend extends Omit<AdminforthOptionsCommon, 'actions' | 'bulkActions'> {
+  actions?: AdminForthActionFront[],
+  bulkActions?: AdminForthBulkActionFront[],
+}
+
+export interface AdminForthResourceFrontend extends Omit<AdminForthResourceCommon, 'options'> {
+  options: AdminForthOptionsForFrontend;
+}
+
 /**
  * Resource describes one table or collection in database.
  * AdminForth generates set of pages for 'list', 'show', 'edit', 'create', 'filter' operations for each resource.
@@ -361,17 +380,17 @@ export interface AdminForthResourceInputCommon {
     recordLabel?: (item: any) => string,
 
 
-    /**
-     * If true, user will not see warning about unsaved changes when tries to leave edit or create page with unsaved changes.
-     * default is false
-     */
-    dontShowWarningAboutUnsavedChanges?: boolean,
 
     /**
      * General options for resource.
      */
     options?: {
       
+      /**
+       * If true, user will not see warning about unsaved changes when tries to leave edit or create page with unsaved changes.
+       * default is false
+       */
+      dontShowWarningAboutUnsavedChanges?: boolean,
 
       /**
        * Show quick action icons for base actions (show, edit, delete) in list view. 
@@ -1172,6 +1191,7 @@ export interface AdminForthConfigForFrontend {
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclaration>,
     panelHeader: Array<AdminForthComponentDeclaration>,
+    underLoginButton: Array<AdminForthComponentDeclaration>,
   },
   rememberMeDuration: string,
   showBrandNameInSidebar: boolean,

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

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