adminforth 1.3.23 → 1.3.25

package/dist/modules/configValidator.js

@@ -28,7 +28,7 @@ export default class ConfigValidator {
         }
         return [];
     }
-    validateComponent(component, errors, ignoreExistsCheck = false) {
+    validateComponent(component, errors) {
         if (!component) {
             return component;
         }
@@ -39,6 +39,12 @@ export default class ConfigValidator {
         else {
             obj = component;
         }
+        let ignoreExistsCheck = false;
+        if (this.adminforth.codeInjector.allComponentNames.hasOwnProperty(component.file)) {
+            // not obvious, but if we are in this if, it means that this is plugin component
+            // if component is plugin component, we don't need to check if it exists in users folder
+            ignoreExistsCheck = true;
+        }
         if (!ignoreExistsCheck) {
             errors.push(...this.checkCustomFileExists(obj.file));
         }
@@ -98,10 +104,7 @@ export default class ConfigValidator {
         }
         if (this.config.customization.customPages) {
             this.config.customization.customPages.forEach((page, i) => {
-                // validate component if it's not plugin injection
-                if (this.adminforth.codeInjector.allComponentNames.hasOwnProperty(page.component)) {
-                    const validatedPage = this.validateComponent(page.component, errors, true);
-                }
+                this.validateComponent(page.component, errors);
             });
         }
         else {
@@ -298,9 +301,14 @@ export default class ConfigValidator {
                 });
                 res.options.bulkActions = bulkActions;
                 // if pageInjection is a string, make array with one element. Also check file exists
-                const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+                const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'];
+                const possiblePages = ['list', 'show', 'create', 'edit'];
                 if (res.options.pageInjections) {
                     Object.entries(res.options.pageInjections).map(([key, value]) => {
+                        if (!possiblePages.includes(key)) {
+                            const similar = suggestIfTypo(possiblePages, key);
+                            errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${key}", allowed keys are ${possiblePages.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+                        }
                         Object.entries(value).map(([injection, target]) => {
                             if (possibleInjections.includes(injection)) {
                                 if (!Array.isArray(res.options.pageInjections[key][injection])) {
@@ -312,7 +320,8 @@ export default class ConfigValidator {
                                 });
                             }
                             else {
-                                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                                const similar = suggestIfTypo(possibleInjections, injection);
+                                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
                             }
                         });
                     });
@@ -417,13 +426,7 @@ export default class ConfigValidator {
             for (const column of resource.columns) {
                 if (column.components) {
                     for (const [key, comp] of Object.entries(column.components)) {
-                        let ignoreExistsCheck = false;
-                        if (this.adminforth.codeInjector.allComponentNames[comp.file]) {
-                            // not obvious, but if we are in this if, it means that this is plugin component
-                            // and there is no sense to check if it exists in users folder
-                            ignoreExistsCheck = true;
-                        }
-                        column.components[key] = this.validateComponent(comp, errors, ignoreExistsCheck);
+                        column.components[key] = this.validateComponent(comp, errors);
                     }
                 }
             }

package/dist/modules/operationalResource.js

@@ -32,8 +32,15 @@ export default class OperationalResource {
             })).data[0] || null;
         });
     }
-    list(filter, limit, offset, sort) {
-        return __awaiter(this, void 0, void 0, function* () {
+    list(filter_1) {
+        return __awaiter(this, arguments, void 0, function* (filter, limit = null, offset = null, sort = []) {
+            // check if type of limit and offset is number
+            if (limit !== null && typeof limit !== 'number') {
+                throw new Error('Limit must be a number');
+            }
+            if (offset !== null && typeof offset !== 'number') {
+                throw new Error('Offset must be a number');
+            }
             let appliedLimit = limit;
             if (limit === null) {
                 appliedLimit = 1000000000;

package/modules/configValidator.ts

@@ -32,7 +32,8 @@ export default class ConfigValidator implements IConfigValidator {
     return [];
   }
 
-  validateComponent(component: AdminForthComponentDeclaration, errors: Array<string>, ignoreExistsCheck: boolean = false): AdminForthComponentDeclaration {
+  validateComponent(component: AdminForthComponentDeclaration, errors: Array<string>): AdminForthComponentDeclaration {
+    
     if (!component) {
       return component;
     }
@@ -42,6 +43,18 @@ export default class ConfigValidator implements IConfigValidator {
     } else {
       obj = component;
     }
+
+    let ignoreExistsCheck = false;
+    if (
+      this.adminforth.codeInjector.allComponentNames.hasOwnProperty(
+        (component as AdminForthComponentDeclarationFull).file)
+    ) {
+      // not obvious, but if we are in this if, it means that this is plugin component
+      // if component is plugin component, we don't need to check if it exists in users folder
+      ignoreExistsCheck = true;
+    }
+    
+
     if (!ignoreExistsCheck) {
       errors.push(...this.checkCustomFileExists(obj.file));
     }
@@ -109,10 +122,7 @@ export default class ConfigValidator implements IConfigValidator {
 
     if (this.config.customization.customPages) {
       this.config.customization.customPages.forEach((page, i) => {
-        // validate component if it's not plugin injection
-        if (this.adminforth.codeInjector.allComponentNames.hasOwnProperty(page.component as PropertyKey)) {
-          const validatedPage = this.validateComponent(page.component, errors, true);
-        }
+        this.validateComponent(page.component, errors);
       });
     } else {
       this.config.customization.customPages = [];
@@ -341,9 +351,16 @@ export default class ConfigValidator implements IConfigValidator {
         res.options.bulkActions = bulkActions;
 
         // if pageInjection is a string, make array with one element. Also check file exists
-        const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+        const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'];
+        const possiblePages = ['list', 'show', 'create', 'edit'];
+
         if (res.options.pageInjections) {
           Object.entries(res.options.pageInjections).map(([key, value]) => {
+            if (!possiblePages.includes(key)) {
+              const similar = suggestIfTypo(possiblePages, key);
+              errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${key}", allowed keys are ${possiblePages.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+            }
+
             Object.entries(value).map(([injection, target]) => {
               if (possibleInjections.includes(injection)) {
                 if (!Array.isArray(res.options.pageInjections[key][injection])) {
@@ -354,7 +371,8 @@ export default class ConfigValidator implements IConfigValidator {
                   res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
                 });
               } else {
-                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                const similar = suggestIfTypo(possibleInjections, injection);
+                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
               }
             });
 
@@ -477,13 +495,8 @@ export default class ConfigValidator implements IConfigValidator {
         if (column.components) {
 
           for (const [key, comp] of Object.entries(column.components as Record<string, AdminForthComponentDeclarationFull>)) {
-            let ignoreExistsCheck = false;
-            if (this.adminforth.codeInjector.allComponentNames[comp.file]) {
-              // not obvious, but if we are in this if, it means that this is plugin component
-              // and there is no sense to check if it exists in users folder
-              ignoreExistsCheck = true;
-            }
-            column.components[key] = this.validateComponent(comp, errors, ignoreExistsCheck);
+            
+            column.components[key] = this.validateComponent(comp, errors);
           }
         }
       }

package/modules/operationalResource.ts

@@ -36,10 +36,18 @@ export default class OperationalResource implements IOperationalResource {
 
   async list(
       filter: IAdminForthFilter | IAdminForthFilter[], 
-      limit: number | null, 
-      offset: number | null, 
-      sort: IAdminForthSort | IAdminForthSort[]
+      limit: number | null = null, 
+      offset: number | null = null,
+      sort: IAdminForthSort | IAdminForthSort[] = []
   ): Promise<any[]> {
+    // check if type of limit and offset is number
+    if (limit !== null && typeof limit !== 'number') {
+      throw new Error('Limit must be a number');
+    }
+    if (offset !== null && typeof offset !== 'number') {
+      throw new Error('Offset must be a number');
+    }
+
     let appliedLimit = limit;
     if (limit === null) {
       appliedLimit = 1000000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.23",
+  "version": "1.3.25",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/App.vue

@@ -165,7 +165,7 @@
       </div>
     </div>
     <AcceptModal />
-    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse">
+    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse z-50">
       <transition-group
         name="fade"
         tag="div"

package/spa/src/components/ResourceListTable.vue

@@ -230,10 +230,8 @@
 <script setup>
 
 
-import { initFlowbite } from 'flowbite';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { callAdminForthApi, getIcon } from '@/utils';
+import { computed, ref, watch } from 'vue';
+import { callAdminForthApi } from '@/utils';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';

package/spa/src/components/ThreeDotsMenu.vue

@@ -0,0 +1,43 @@
+<template >
+  <template v-if="threeDotsDropdownItems?.length">
+    <button 
+      data-dropdown-toggle="listThreeDotsDropdown" 
+      class="flex items-center py-2 px-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+    >
+      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
+        <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
+      </svg>
+    </button>
+
+    <!-- Dropdown menu -->
+    <div 
+      id="listThreeDotsDropdown" 
+      class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconButton">
+          <li v-for="item in threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
+            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+              <component :is="getCustomComponent(item)" 
+                :meta="item.meta" 
+                :resource="coreStore.resource" 
+                :adminUser="coreStore.adminUser"
+              />
+            </a>
+          </li>
+        </ul>
+    </div>
+  </template>
+</template>
+
+
+<script setup lang="ts">
+
+import { getCustomComponent } from '@/utils';
+import { useCoreStore } from '@/stores/core'
+
+const coreStore = useCoreStore()
+
+const props = defineProps<{
+  threeDotsDropdownItems: any[]
+}>()
+
+</script>

package/spa/src/components/Toast.vue

@@ -1,7 +1,8 @@
 <template>
     
 
-<div id="toast-default" class="flex  items-center w-full p-4 text-gray-500 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert"
+<div id="toast-default" class="flex  items-center w-full p-4 text-gray-500 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+    role="alert"
     :class="
         {
             'danger': 'bg-red-100',

package/spa/src/composables/useStores.ts

@@ -24,17 +24,11 @@ import type { AdminForthResourceColumn } from '@/types/AdminForthConfig';
 
 declare global {
   interface Window {
-    adminforth: {
-      confirm: (params: ConfirmParams) => Promise<void>;
-      alert: (params: AlertParams) => void;
-      setListFilter: (filter: any) => void;
-      updateListFilter: (filter: any) => void;
-      clearListFilters: () => void;
-    };
+    adminforth: FrontendAPIInterface;
   }
 }
 
-export class FrontendAPI implements FrontendAPIInterface {
+export class FrontendAPI {
   private toastStore:any
   private modalStore:any
   private filtersStore:any  
@@ -45,14 +39,19 @@ export class FrontendAPI implements FrontendAPIInterface {
     }
     this.toastStore = useToastStore();
     this.modalStore = useModalStore();
-    console.log(this.toastStore, this.modalStore,'init of adminforth frontend api')
+    
     window.adminforth = {
       confirm: this.confirm.bind(this),
       alert: this.alert.bind(this),
-      setListFilter: this.setListFilter.bind(this),
-      updateListFilter: this.updateListFilter.bind(this),
-      clearListFilters: this.clearListFilters.bind(this),
-    }
+
+      list: {
+        refresh: () => {/* will be redefined in list*/},
+        closeThreeDotsDropdown: () => {/* will be redefined in list*/},
+        setFilter: () => this.setListFilter.bind(this),
+        updateFilter: () => this.updateListFilter.bind(this),
+        clearFilters: () => this.clearListFilters.bind(this),
+      }
+    };
   }
 
   confirm(params: ConfirmParams): Promise<void> {

package/spa/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import ResourceParent from '@/views/ResourceParent.vue';
-import { useFiltersStore } from '@/stores/filters';
+
 /* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
 
 const router = createRouter({

package/spa/src/stores/core.ts

@@ -47,6 +47,10 @@ export const useCoreStore = defineStore('core', () => {
     if (!resource.value) {
       throw new Error('Columns not fetched yet');
     }
+    const col = resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey);
+    if (!col) {
+      throw new Error(`Primary key not found in resource ${resourceId}`);
+    }
 
     const respData = await callAdminForthApi({
       path: '/get_resource_data',
@@ -56,7 +60,7 @@ export const useCoreStore = defineStore('core', () => {
         resourceId: resourceId,
         filters: [
           {
-            field: resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey).name,
+            field: col.name,
             operator: 'eq',
             value: primaryKey
           }

package/spa/src/stores/filters.ts

@@ -3,7 +3,14 @@ import { defineStore } from 'pinia';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
-    
+    const sort: Ref<any> = ref({});
+
+    const setSort = (s: any) => {
+        sort.value = s;
+    }
+    const getSort = () => {
+        return sort.value;
+    }
     const setFilter = (filter: any) => {
         filters.value.push(filter);
     }
@@ -16,5 +23,5 @@ export const useFiltersStore = defineStore('filters', () => {
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters}
+    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
 })

package/spa/src/utils.ts

@@ -2,9 +2,10 @@ import { onMounted, ref, resolveComponent } from 'vue';
 import type {  CoreConfig } from './spa_types/core';
 
 import router from "./router";
-import { useRouter } from 'vue-router';
 import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
+import { Dropdown } from 'flowbite';
+
 
 export async function callApi({path, method, body=undefined}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
@@ -100,4 +101,16 @@ export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
   }
 }
 
-
+export function initThreeDotsDropdown() {
+  const threeDotsDropdown: HTMLElement | null = document.querySelector('#listThreeDotsDropdown');
+  if (threeDotsDropdown) {
+    // this resource has three dots dropdown
+    const dd = new Dropdown(
+      threeDotsDropdown, 
+      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement, 
+    );
+    window.adminforth.list.closeThreeDotsDropdown = () => {
+      dd.hide();
+    }
+  }
+}

package/spa/src/views/CreateView.vue

@@ -29,6 +29,10 @@
         Save
       </button>
 
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.create?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -73,12 +77,13 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
 const isValid = ref(false);
@@ -116,6 +121,7 @@ onMounted(async () => {
   });
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
+  initThreeDotsDropdown();
 });
 
 async function saveRecord() {

package/spa/src/views/EditView.vue

@@ -25,6 +25,10 @@
         Save
       </button>
 
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.edit?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -69,11 +73,13 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
+
 
 const coreStore = useCoreStore();
 
@@ -107,12 +113,13 @@ const editableRecord = computed(() => {
 })
 
 onMounted(async () => {
-
   loading.value = true;
 
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
+  initThreeDotsDropdown();
+
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,

package/spa/src/views/ListView.vue

@@ -72,6 +72,10 @@
             {{ filtersStore.filters.length }}
         </span>
       </button>
+
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
     <component 
@@ -112,11 +116,12 @@ import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, getIcon } from '@/utils';
-import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
+import { initFlowbite } from 'flowbite';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
 import {
@@ -138,6 +143,11 @@ const page = ref(1);
 const columnsMinMax = ref({});
 const sort = ref([]);
 
+watch(() => sort, async (to, from) => {
+  // in store sort might be needed for plugins
+  filtersStore.setSort(sort.value);
+}, {deep: true});
+
 const rows = ref(null);
 const totalRows = ref(0);
 const checkboxes = ref([]);
@@ -148,9 +158,6 @@ const DEFAULT_PAGE_SIZE = 10;
 const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
 
 
-
-
-
 async function getList() {
   rows.value = null;
   const data = await callAdminForthApi({
@@ -224,6 +231,8 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  initFlowbite();
+
   // !!! clear filters should be in same tick with sort assignment so that watch can catch it
   filtersStore.clearFilters();
   if (coreStore.resource.options?.defaultSort) {
@@ -234,8 +243,7 @@ async function init() {
   } else {
     sort.value = [];
   }
-  console.log('↘️init fired');
-  // await getList();
+  // await getList(); - Not needed here, watch will trigger it
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
     method: 'POST',
@@ -246,19 +254,21 @@ async function init() {
 }
 
 watch([page, sort, () => filtersStore.filters], async () => {
-  console.log('↘️watch fired getList');
   await getList();
 }, { deep: true });
 
+window.adminforth.list.refresh = async () => {
+  await getList();
+}
+
 watch(() => filtersStore.filters, async (to, from) => {
   page.value = 1;
   checkboxes.value = [];
 }, {deep: true});
 
 onMounted(async () => {
-  console.log('🧱onMounted fired');
-  initFlowbite(); 
   await init();
+  initThreeDotsDropdown();
 });
 
 

package/spa/src/views/LoginView.vue

@@ -174,7 +174,7 @@ async function login() {
     body: {
       username,
       password,
-      rememberMe: rememberInput.value.checked,
+      rememberMe: rememberInput.value?.checked,
     }
   });
   inProgress.value = false;

package/spa/src/views/ShowView.vue

@@ -22,6 +22,10 @@
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
       </button>
+
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
     <component 
@@ -119,31 +123,27 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
-import { getCustomComponent, checkAcessByAllowedActions } from '@/utils';
+import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
-const item = ref(null);
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
 
-console.log(route.params,'showWiev');
-
-
 const coreStore = useCoreStore();
-const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
+  initThreeDotsDropdown();
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
@@ -176,9 +176,8 @@ async function deleteRecord(row) {
 
     } catch (e) {
       console.error(e);
-      };
-    }
-
+    };
+  }
     
 }
 

package/types/AdminForthConfig.ts

@@ -1043,6 +1043,7 @@ export type AdminForthResource = {
           beforeBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**

package/types/FrontendAPI.ts

@@ -19,6 +19,7 @@ export interface FrontendAPIInterface {
      * @returns A promise that resolves when the user confirms the dialog
      */   
     confirm(params:ConfirmParams ): Promise<void>;
+    
     /**
      * Show an alert
      * 
@@ -33,37 +34,53 @@ export interface FrontendAPIInterface {
      * @param params - The parameters of the alert
      */
     alert(params:AlertParams): void;
-    /**
-     * Add a filter to the list of filters.
-     * Works only when user located on the list page.
-     * Can be used to set filter from charts or other components in pageInjections.
-     * 
-     * Example:
-     * 
-     * ```ts
-     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
-     * ```
-     * 
-     * @param filter - The filter to add
-     */
-    setListFilter(filter: any): void;
-    /**
-     * Update a filter in the list of filters
-     * 
-     * Example:
-     * 
-     * ```ts
-     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
-     * ```
-     * 
-     * @param filter - The filter to update
-     */
-    updateListFilter(filter: any): void;
-    /**
-     * Clear all filters from the list
-     */
-    clearListFilters(): void;
 
+
+    list: {
+
+        /**
+         * Refresh the list
+         */
+        refresh(): void;
+
+        /**
+         * Close the three dots dropdown
+         */
+        closeThreeDotsDropdown(): void;
+
+        /**
+         * Set a filter in the list
+         * Works only when user located on the list page.
+         * Can be used to set filter from charts or other components in pageInjections.
+         * 
+         * Example:
+         * 
+         * ```ts
+         * window.adminforth.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * ```
+         * 
+         * @param filter - The filter to set
+         */
+        setFilter(filter: any): void;
+
+        /**
+         * Update a filter in the list
+         * 
+         * Example:
+         * 
+         * ```ts
+         * window.adminforth.list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * ```
+         * 
+         * @param filter - The filter to update
+         */
+        updateFilter(filter: any): void;
+
+        /**
+         * Clear all filters from the list
+         */
+        clearFilters(): void;
+    }
 }
 
 export type ConfirmParams = {