From 4eea42cc68703598719665be82876cf1c6f5a1b1 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 27 Oct 2025 14:35:51 +0200
Subject: [PATCH 1/5] feat: add three dots menu for the each record in listView

---
 adminforth/modules/configValidator.ts         |   8 +-
 .../src/components/ListActionsThreeDots.vue   | 218 ++++++++++++++++++
 .../spa/src/components/ResourceListTable.vue  | 117 +++++-----
 .../components/ResourceListTableVirtual.vue   | 117 +++++-----
 adminforth/spa/src/views/ListView.vue         |  15 +-
 adminforth/types/Back.ts                      |   4 +-
 adminforth/types/Common.ts                    |   1 +
 7 files changed, 370 insertions(+), 110 deletions(-)
 create mode 100644 adminforth/spa/src/components/ListActionsThreeDots.vue

diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index 52755beb..e9bf4091 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -37,7 +37,7 @@ export default class ConfigValidator implements IConfigValidator {
 
   private static readonly LOGIN_INJECTION_KEYS = ['underInputs', 'underLoginButton', 'panelHeader'];
   private static readonly GLOBAL_INJECTION_KEYS = ['userMenu', 'header', 'sidebar', 'sidebarTop', 'everyPageBottom'];
-  private static readonly PAGE_INJECTION_KEYS = ['beforeBreadcrumbs', 'beforeActionButtons', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];
+  private static readonly PAGE_INJECTION_KEYS = ['beforeBreadcrumbs', 'beforeActionButtons', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons', 'customActionIconsThreeDotsMenuItems'];
 
   constructor(private adminforth: IAdminForth, private inputConfig: AdminForthInputConfig) {
     this.adminforth = adminforth;
@@ -404,12 +404,14 @@ export default class ConfigValidator implements IConfigValidator {
       }
       if (!action.showIn) {
         action.showIn = {
-          list: true,
+          listQuickIcon: true,
+          listThreeDotsMenu: false,
           showButton: false,
           showThreeDotsMenu: false,
         }
       } else {
-        action.showIn.list = action.showIn.list ?? true;
+        action.showIn.listQuickIcon = action.showIn.listQuickIcon ?? true;
+        action.showIn.listThreeDotsMenu = action.showIn.listThreeDotsMenu ?? false;
         action.showIn.showButton = action.showIn.showButton ?? false;
         action.showIn.showThreeDotsMenu = action.showIn.showThreeDotsMenu ?? false;
       }
diff --git a/adminforth/spa/src/components/ListActionsThreeDots.vue b/adminforth/spa/src/components/ListActionsThreeDots.vue
new file mode 100644
index 00000000..78856e0c
--- /dev/null
+++ b/adminforth/spa/src/components/ListActionsThreeDots.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="relative inline-block">
+  <div
+    ref="triggerRef"
+      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"
+    @click="toggleMenu"
+    >
+      <IconDotsHorizontalOutline class="w-6 h-6 text-lightPrimary dark:text-darkPrimary" />
+    </div>
+    <teleport to="body">
+      <div
+      v-if="showMenu"
+      ref="menuRef"
+      class="z-50 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
+      :style="menuStyles"
+      >
+        <template v-if="resourceOptions.moveBaseActionsOutOfThreeDotsMenu !== true">
+          <RouterLink
+            v-if="resourceOptions?.allowedActions?.show"
+            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"
+            :to="{ 
+              name: 'resource-show', 
+              params: { 
+                resourceId: props.resourceId, 
+                primaryKey: record._primaryKeyValue,
+              }
+            }"
+
+          >
+            <IconEyeSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            Show item
+          </RouterLink>
+
+          <RouterLink
+            v-if="resourceOptions?.allowedActions?.edit"
+            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"
+            :to="{ 
+              name: 'resource-edit', 
+              params: { 
+                resourceId: props.resourceId, 
+                primaryKey: record._primaryKeyValue,
+              }
+            }"
+          >
+            <IconPenSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            Edit item
+          </RouterLink>
+
+          <button
+            v-if="resourceOptions?.allowedActions?.delete"
+            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="deleteRecord(record)"
+          >
+            <IconTrashBinSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            Delete item
+          </button>
+        </template>
+        <div v-for="action in resourceOptions.actions.filter(a => 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 v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"></component>
+                {{ action.name }}
+            </button>
+        </div>
+        <template v-if="customActionIconsThreeDotsMenuItems">
+            <component 
+                v-for="c in customActionIconsThreeDotsMenuItems"
+                :is="getCustomComponent(c)"
+                :meta="c.meta"
+                :resource="coreStore.resource" 
+                :adminUser="coreStore.adminUser"
+                :record="record"
+                :updateRecords="props.updateRecords"
+            />
+        </template>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  IconEyeSolid,
+  IconPenSolid,
+  IconTrashBinSolid,
+  IconDotsHorizontalOutline
+} from '@iconify-prerendered/vue-flowbite';
+import { onMounted, onBeforeUnmount, ref, nextTick, watch } from 'vue';
+import { getIcon, getCustomComponent } from '@/utils';
+import { useCoreStore } from '@/stores/core';
+const coreStore = useCoreStore();
+const showMenu = ref(false);
+const triggerRef = ref<HTMLElement | null>(null);
+const menuRef = ref<HTMLElement | null>(null);
+const menuStyles = ref<Record<string, string>>({});
+
+const props = defineProps<{
+    resourceOptions: any;
+    record: any;
+    customActionIconsThreeDotsMenuItems: any[];
+    resourceId: string;
+    deleteRecord: (record: any) => void;
+    updateRecords: () => void;
+    startCustomAction: (actionId: string, record: any) => void;
+}>();
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScrollOrResize, true);
+  window.addEventListener('resize', handleScrollOrResize);
+  document.addEventListener('click', handleOutsideClick, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScrollOrResize, true);
+  window.removeEventListener('resize', handleScrollOrResize);
+  document.removeEventListener('click', handleOutsideClick, true);
+});
+
+watch(showMenu, async (isOpen) => {
+  if (isOpen) {
+    await nextTick();
+    // First pass: after DOM mount
+    updateMenuPosition();
+    // Second pass: after layout/paint to catch width changes (fonts/icons)
+    requestAnimationFrame(() => {
+      updateMenuPosition();
+      // Final safety: one micro-delay retry if width was still 0
+      setTimeout(() => updateMenuPosition(), 0);
+    });
+  }
+});
+
+function toggleMenu() {
+  if (!showMenu.value) {
+    // Provisional position to avoid flashing at left:0 on first open
+    const el = triggerRef.value;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      const gap = 8;
+      menuStyles.value = {
+        position: 'fixed',
+        top: `${Math.round(rect.bottom )}px`,
+        left: `${Math.round(rect.left)}px`,
+      };
+    }
+  }
+  showMenu.value = !showMenu.value;
+}
+
+function updateMenuPosition() {
+  const el = triggerRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const margin = 8; // gap around the trigger/menu
+  const menuEl = menuRef.value;
+  // Measure current menu size to align and decide flipping
+  let menuWidth = rect.width; // fallback to trigger width
+  let menuHeight = 0;
+  if (menuEl) {
+    const menuRect = menuEl.getBoundingClientRect();
+    // Prefer bounding rect; fallback to offset/scroll width if needed
+    const measuredW = menuRect.width || menuEl.offsetWidth || menuEl.scrollWidth;
+    if (measuredW > 0) menuWidth = measuredW;
+    const measuredH = menuRect.height || menuEl.offsetHeight || menuEl.scrollHeight;
+    if (measuredH > 0) menuHeight = measuredH;
+  }
+  // Right-align: right edge of menu == right edge of trigger
+  let left = rect.right - menuWidth;
+  // Clamp within viewport with small margin so it doesn't render off-screen
+  const minLeft = margin;
+  const maxLeft = Math.max(minLeft, window.innerWidth - margin - menuWidth);
+  left = Math.min(Math.max(left, minLeft), maxLeft);
+
+  // Determine whether to place above or below based on available space
+  const spaceBelow = window.innerHeight - rect.bottom - margin;
+  const spaceAbove = rect.top - margin;
+  const maxMenuHeight = Math.max(0, window.innerHeight - 2 * margin);
+
+  let top: number;
+  if (menuHeight === 0) {
+    // Unknown height yet (first pass). Prefer placing below; a subsequent pass will correct if needed.
+    top = rect.bottom + margin;
+  } else if (menuHeight <= spaceBelow) {
+    // Enough space below
+    top = rect.bottom + margin;
+  } else if (menuHeight <= spaceAbove) {
+    // Not enough below but enough above -> flip
+    top = rect.top - margin - menuHeight;
+  } else {
+    // Not enough space on either side: pick the side with more room and clamp within viewport
+    if (spaceBelow >= spaceAbove) {
+      top = Math.min(rect.bottom + margin, window.innerHeight - margin - menuHeight);
+    } else {
+      top = Math.max(margin, rect.top - margin - menuHeight);
+    }
+  }
+
+  menuStyles.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    maxHeight: `${Math.round(maxMenuHeight)}px`,
+    overflowY: 'auto',
+  };
+}
+
+function handleScrollOrResize() {
+  showMenu.value = false;
+}
+
+function handleOutsideClick(e: MouseEvent) {
+  const target = e.target as Node | null;
+  if (!target) return;
+  if (menuRef.value?.contains(target)) return;
+  if (triggerRef.value?.contains(target)) return;
+  showMenu.value = false;
+}
+
+</script>
\ No newline at end of file
diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index 09ac1171..c435c30a 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -113,57 +113,58 @@
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <Tooltip>
-                <RouterLink
-                  v-if="resource.options?.allowedActions?.show"
-                  :to="{ 
-                    name: 'resource-show', 
-                    params: { 
-                      resourceId: resource.resourceId, 
-                      primaryKey: row._primaryKeyValue,
-                    }
-                  }"
-
-                >
-                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
-                </RouterLink>
-
-                <template v-slot:tooltip>
-                  {{ $t('Show item') }}
-                </template>
-              </Tooltip>
-
-              <Tooltip>
-                <RouterLink
-                  v-if="resource.options?.allowedActions?.edit"
-                  :to="{ 
-                    name: 'resource-edit', 
-                    params: { 
-                      resourceId: resource.resourceId, 
-                      primaryKey: row._primaryKeyValue,
-                    }
-                  }"
-                >
-                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
-                </RouterLink>
-                <template v-slot:tooltip>
-                  {{ $t('Edit item') }}
-                </template>
-              </Tooltip>
-
-              <Tooltip>
-                <button
-                  v-if="resource.options?.allowedActions?.delete"
-                  @click="deleteRecord(row)"
-                >
-                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
-                </button>
-
-                <template v-slot:tooltip>
-                  {{ $t('Delete item') }}
-                </template>
-              </Tooltip>
-                
+              <template v-if="resource.options.moveBaseActionsOutOfThreeDotsMenu === true">
+                <Tooltip>
+                  <RouterLink
+                    v-if="resource.options?.allowedActions?.show"
+                    :to="{ 
+                      name: 'resource-show', 
+                      params: { 
+                        resourceId: resource.resourceId, 
+                        primaryKey: row._primaryKeyValue,
+                      }
+                    }"
+
+                  >
+                    <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
+                  </RouterLink>
+
+                  <template v-slot:tooltip>
+                    {{ $t('Show item') }}
+                  </template>
+                </Tooltip>
+
+                <Tooltip>
+                  <RouterLink
+                    v-if="resource.options?.allowedActions?.edit"
+                    :to="{ 
+                      name: 'resource-edit', 
+                      params: { 
+                        resourceId: resource.resourceId, 
+                        primaryKey: row._primaryKeyValue,
+                      }
+                    }"
+                  >
+                    <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
+                  </RouterLink>
+                  <template v-slot:tooltip>
+                    {{ $t('Edit item') }}
+                  </template>
+                </Tooltip>
+
+                <Tooltip>
+                  <button
+                    v-if="resource.options?.allowedActions?.delete"
+                    @click="deleteRecord(row)"
+                  >
+                    <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
+                  </button>
+
+                  <template v-slot:tooltip>
+                    {{ $t('Delete item') }}
+                  </template>
+                </Tooltip>
+              </template>
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -177,7 +178,7 @@
               </template>
 
               <template v-if="resource.options?.actions">
-                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list)" :key="action.id">
+                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)" :key="action.id">
                   <button
                     @click="startCustomAction(action.id, row)"
                   >
@@ -188,6 +189,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="resource.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) || resource.options.moveBaseActionsOutOfThreeDotsMenu !== true"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
           </td>
         </tr>
@@ -312,6 +323,7 @@ import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
@@ -326,6 +338,7 @@ const props = defineProps<{
   noRoundings?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
+  customActionIconsThreeDotsMenuItems?: any[]
 }>();
 
 // emits, update page
diff --git a/adminforth/spa/src/components/ResourceListTableVirtual.vue b/adminforth/spa/src/components/ResourceListTableVirtual.vue
index 7bdd93bc..adb1a514 100644
--- a/adminforth/spa/src/components/ResourceListTableVirtual.vue
+++ b/adminforth/spa/src/components/ResourceListTableVirtual.vue
@@ -123,57 +123,58 @@
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <Tooltip>
-                <RouterLink
-                  v-if="resource.options?.allowedActions?.show"
-                  :to="{ 
-                    name: 'resource-show', 
-                    params: { 
-                      resourceId: resource.resourceId, 
-                      primaryKey: row._primaryKeyValue,
-                    }
-                  }"
-
-                >
-                  <IconEyeSolid class="w-5 h-5 me-2"/>
-                </RouterLink>
-
-                <template v-slot:tooltip>
-                  {{ $t('Show item') }}
-                </template>
-              </Tooltip>
-
-              <Tooltip>
-                <RouterLink
-                  v-if="resource.options?.allowedActions?.edit"
-                  :to="{ 
-                    name: 'resource-edit', 
-                    params: { 
-                      resourceId: resource.resourceId, 
-                      primaryKey: row._primaryKeyValue,
-                    }
-                  }"
-                >
-                  <IconPenSolid class="w-5 h-5 me-2"/>
-                </RouterLink>
-                <template v-slot:tooltip>
-                  {{ $t('Edit item') }}
-                </template>
-              </Tooltip>
-
-              <Tooltip>
-                <button
-                  v-if="resource.options?.allowedActions?.delete"
-                  @click="deleteRecord(row)"
-                >
-                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
-                </button>
-
-                <template v-slot:tooltip>
-                  {{ $t('Delete item') }}
-                </template>
-              </Tooltip>
-                
+              <template v-if="resource.options.moveBaseActionsOutOfThreeDotsMenu === true">
+                <Tooltip>
+                  <RouterLink
+                    v-if="resource.options?.allowedActions?.show"
+                    :to="{ 
+                      name: 'resource-show', 
+                      params: { 
+                        resourceId: resource.resourceId, 
+                        primaryKey: row._primaryKeyValue,
+                      }
+                    }"
+
+                  >
+                    <IconEyeSolid class="w-5 h-5 me-2"/>
+                  </RouterLink>
+
+                  <template v-slot:tooltip>
+                    {{ $t('Show item') }}
+                  </template>
+                </Tooltip>
+
+                <Tooltip>
+                  <RouterLink
+                    v-if="resource.options?.allowedActions?.edit"
+                    :to="{ 
+                      name: 'resource-edit', 
+                      params: { 
+                        resourceId: resource.resourceId, 
+                        primaryKey: row._primaryKeyValue,
+                      }
+                    }"
+                  >
+                    <IconPenSolid class="w-5 h-5 me-2"/>
+                  </RouterLink>
+                  <template v-slot:tooltip>
+                    {{ $t('Edit item') }}
+                  </template>
+                </Tooltip>
+
+                <Tooltip>
+                  <button
+                    v-if="resource.options?.allowedActions?.delete"
+                    @click="deleteRecord(row)"
+                  >
+                    <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                  </button>
+
+                  <template v-slot:tooltip>
+                    {{ $t('Delete item') }}
+                  </template>
+                </Tooltip>
+              </template>
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -187,7 +188,7 @@
               </template>
 
               <template v-if="resource.options?.actions">
-                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list)" :key="action.id">
+                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)" :key="action.id">
                   <button
                     @click="startCustomAction(action.id, row)"
                   >
@@ -198,6 +199,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="resource.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) || resource.options.moveBaseActionsOutOfThreeDotsMenu !== true"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
           </td>
         </tr>
@@ -329,6 +340,7 @@ import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
@@ -346,6 +358,7 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
+  customActionIconsThreeDotsMenuItems?: any[]
 }>();
 
 // emits, update page
diff --git a/adminforth/spa/src/views/ListView.vue b/adminforth/spa/src/views/ListView.vue
index 22f39a3a..27ee9fb1 100644
--- a/adminforth/spa/src/views/ListView.vue
+++ b/adminforth/spa/src/views/ListView.vue
@@ -119,7 +119,7 @@
       :adminUser="coreStore.adminUser"
     />
     <ResourceListTableVirtual
-      v-if="isVirtualScrollEnabled"
+      v-if="isVirtualScrollEnabled && !coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -143,13 +143,18 @@
           ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
           : []
       "
+      :customActionIconsThreeDotsMenuItems="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems) 
+        ? coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems 
+        : coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems
+          ? [coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems]
+          : []"
       :container-height="1100"
       :item-height="52.5"
       :buffer-size="listBufferSize"
     />
 
     <ResourceListTable
-      v-else
+      v-else-if="!coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -173,6 +178,11 @@
           ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
           : []
       "
+      :customActionIconsThreeDotsMenuItems="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems) 
+        ? coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems 
+        : coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems
+          ? [coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems]
+          : []"
     />
 
     <component 
@@ -511,6 +521,7 @@ onMounted(async () => {
   await init();
   initThreeDotsDropdown();
   initInProcess = false;
+  console.log('ListView initialized:', coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems);
 });
 
 onUnmounted(() => {
diff --git a/adminforth/types/Back.ts b/adminforth/types/Back.ts
index 61556407..145455d5 100644
--- a/adminforth/types/Back.ts
+++ b/adminforth/types/Back.ts
@@ -839,7 +839,8 @@ interface AdminForthInputConfigCustomization {
 export interface AdminForthActionInput {
   name: string;
   showIn?: {
-      list?: boolean,
+      listQuickIcon?: boolean,
+      listThreeDotsMenu?: boolean,
       showButton?: boolean,
       showThreeDotsMenu?: boolean,
   };
@@ -1334,6 +1335,7 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
+  moveBaseActionsOutOfThreeDotsMenu?: boolean,
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.
diff --git a/adminforth/types/Common.ts b/adminforth/types/Common.ts
index 5e0dbf54..034aaec9 100644
--- a/adminforth/types/Common.ts
+++ b/adminforth/types/Common.ts
@@ -487,6 +487,7 @@ export interface AdminForthResourceInputCommon {
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           customActionIcons?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableBodyStart?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 

From 64f181014e198e3b389b2687bcb0dca9b5297a4c Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 27 Oct 2025 14:53:19 +0200
Subject: [PATCH 2/5] chore: remove console log from ListView initialization

---
 adminforth/spa/src/views/ListView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/adminforth/spa/src/views/ListView.vue b/adminforth/spa/src/views/ListView.vue
index 27ee9fb1..f560374d 100644
--- a/adminforth/spa/src/views/ListView.vue
+++ b/adminforth/spa/src/views/ListView.vue
@@ -521,7 +521,6 @@ onMounted(async () => {
   await init();
   initThreeDotsDropdown();
   initInProcess = false;
-  console.log('ListView initialized:', coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems);
 });
 
 onUnmounted(() => {

From 2fc9a839b55a964bda8f168d689fb3cbdaeb9866 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 27 Oct 2025 14:53:28 +0200
Subject: [PATCH 3/5] fix: handle potential null resourceOptions in actions
 filter

---
 adminforth/spa/src/components/ListActionsThreeDots.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/adminforth/spa/src/components/ListActionsThreeDots.vue b/adminforth/spa/src/components/ListActionsThreeDots.vue
index 78856e0c..abf17051 100644
--- a/adminforth/spa/src/components/ListActionsThreeDots.vue
+++ b/adminforth/spa/src/components/ListActionsThreeDots.vue
@@ -55,7 +55,7 @@
             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 => 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 v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"></component>
                 {{ action.name }}
@@ -138,7 +138,7 @@ function toggleMenu() {
       const gap = 8;
       menuStyles.value = {
         position: 'fixed',
-        top: `${Math.round(rect.bottom )}px`,
+        top: `${Math.round(rect.bottom)}px`,
         left: `${Math.round(rect.left)}px`,
       };
     }

From bc132640f146bf4c44d12b7d4e83821abec4e477 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Wed, 29 Oct 2025 11:51:27 +0200
Subject: [PATCH 4/5] feat: update resource options to support base actions as
 quick icons

---
 .../src/components/ListActionsThreeDots.vue   |  8 +-
 .../spa/src/components/ResourceListTable.vue  | 98 +++++++++----------
 .../components/ResourceListTableVirtual.vue   | 98 +++++++++----------
 adminforth/types/Back.ts                      |  2 +-
 4 files changed, 100 insertions(+), 106 deletions(-)

diff --git a/adminforth/spa/src/components/ListActionsThreeDots.vue b/adminforth/spa/src/components/ListActionsThreeDots.vue
index abf17051..d2d50f47 100644
--- a/adminforth/spa/src/components/ListActionsThreeDots.vue
+++ b/adminforth/spa/src/components/ListActionsThreeDots.vue
@@ -14,7 +14,7 @@
       class="z-50 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
       :style="menuStyles"
       >
-        <template v-if="resourceOptions.moveBaseActionsOutOfThreeDotsMenu !== true">
+        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('show'))">
           <RouterLink
             v-if="resourceOptions?.allowedActions?.show"
             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"
@@ -30,7 +30,8 @@
             <IconEyeSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
             Show item
           </RouterLink>
-
+        </template>
+        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('edit'))">
           <RouterLink
             v-if="resourceOptions?.allowedActions?.edit"
             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"
@@ -45,7 +46,8 @@
             <IconPenSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
             Edit item
           </RouterLink>
-
+        </template>
+        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('delete'))">
           <button
             v-if="resourceOptions?.allowedActions?.delete"
             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"
diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index 478f43d6..9b6f4e5e 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -113,58 +113,54 @@
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <template v-if="resource.options.moveBaseActionsOutOfThreeDotsMenu === true">
-                <Tooltip>
-                  <RouterLink
-                    v-if="resource.options?.allowedActions?.show"
-                    :to="{ 
-                      name: 'resource-show', 
-                      params: { 
-                        resourceId: resource.resourceId, 
-                        primaryKey: row._primaryKeyValue,
-                      }
-                    }"
-
-                  >
-                    <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
-                  </RouterLink>
-
-                  <template v-slot:tooltip>
-                    {{ $t('Show item') }}
-                  </template>
-                </Tooltip>
-
-                <Tooltip>
-                  <RouterLink
-                    v-if="resource.options?.allowedActions?.edit"
-                    :to="{ 
-                      name: 'resource-edit', 
-                      params: { 
-                        resourceId: resource.resourceId, 
-                        primaryKey: row._primaryKeyValue,
-                      }
-                    }"
-                  >
-                    <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
-                  </RouterLink>
-                  <template v-slot:tooltip>
-                    {{ $t('Edit item') }}
-                  </template>
-                </Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
+                <RouterLink
+                  v-if="resource.options?.allowedActions?.show"
+                  :to="{ 
+                    name: 'resource-show', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
 
-                <Tooltip>
-                  <button
-                    v-if="resource.options?.allowedActions?.delete"
-                    @click="deleteRecord(row)"
-                  >
-                    <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
-                  </button>
+                >
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
+                </RouterLink>
+
+                <template v-slot:tooltip>
+                  {{ $t('Show item') }}
+                </template>
+              </Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
+                <RouterLink
+                  v-if="resource.options?.allowedActions?.edit"
+                  :to="{ 
+                    name: 'resource-edit', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
+                >
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
+                </RouterLink>
+                <template v-slot:tooltip>
+                  {{ $t('Edit item') }}
+                </template>
+              </Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
+                <button
+                  v-if="resource.options?.allowedActions?.delete"
+                  @click="deleteRecord(row)"
+                >
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
+                </button>
 
-                  <template v-slot:tooltip>
-                    {{ $t('Delete item') }}
-                  </template>
-                </Tooltip>
-              </template>
+                <template v-slot:tooltip>
+                  {{ $t('Delete item') }}
+                </template>
+              </Tooltip>
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -209,7 +205,7 @@
                 </Tooltip>
               </template>
               <ListActionsThreeDots
-                v-if="resource.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) || resource.options.moveBaseActionsOutOfThreeDotsMenu !== true"
+                v-if="resource.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) || !resource?.options.baseActionsAsQuickIcons ||(resource?.options.baseActionsAsQuickIcons && resource?.options.baseActionsAsQuickIcons.length <= 2)"
                 :resourceOptions="resource?.options"
                 :record="row"
                 :updateRecords="()=>emits('update:records', true)"
diff --git a/adminforth/spa/src/components/ResourceListTableVirtual.vue b/adminforth/spa/src/components/ResourceListTableVirtual.vue
index 2fb16014..edf53864 100644
--- a/adminforth/spa/src/components/ResourceListTableVirtual.vue
+++ b/adminforth/spa/src/components/ResourceListTableVirtual.vue
@@ -123,58 +123,54 @@
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <template v-if="resource.options.moveBaseActionsOutOfThreeDotsMenu === true">
-                <Tooltip>
-                  <RouterLink
-                    v-if="resource.options?.allowedActions?.show"
-                    :to="{ 
-                      name: 'resource-show', 
-                      params: { 
-                        resourceId: resource.resourceId, 
-                        primaryKey: row._primaryKeyValue,
-                      }
-                    }"
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
+                <RouterLink
+                  v-if="resource.options?.allowedActions?.show"
+                  :to="{ 
+                    name: 'resource-show', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
 
-                  >
-                    <IconEyeSolid class="w-5 h-5 me-2"/>
-                  </RouterLink>
-
-                  <template v-slot:tooltip>
-                    {{ $t('Show item') }}
-                  </template>
-                </Tooltip>
-
-                <Tooltip>
-                  <RouterLink
-                    v-if="resource.options?.allowedActions?.edit"
-                    :to="{ 
-                      name: 'resource-edit', 
-                      params: { 
-                        resourceId: resource.resourceId, 
-                        primaryKey: row._primaryKeyValue,
-                      }
-                    }"
-                  >
-                    <IconPenSolid class="w-5 h-5 me-2"/>
-                  </RouterLink>
-                  <template v-slot:tooltip>
-                    {{ $t('Edit item') }}
-                  </template>
-                </Tooltip>
-
-                <Tooltip>
-                  <button
-                    v-if="resource.options?.allowedActions?.delete"
-                    @click="deleteRecord(row)"
-                  >
-                    <IconTrashBinSolid class="w-5 h-5 me-2"/>
-                  </button>
+                >
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
+                </RouterLink>
+
+                <template v-slot:tooltip>
+                  {{ $t('Show item') }}
+                </template>
+              </Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
+                <RouterLink
+                  v-if="resource.options?.allowedActions?.edit"
+                  :to="{ 
+                    name: 'resource-edit', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
+                >
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
+                </RouterLink>
+                <template v-slot:tooltip>
+                  {{ $t('Edit item') }}
+                </template>
+              </Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
+                <button
+                  v-if="resource.options?.allowedActions?.delete"
+                  @click="deleteRecord(row)"
+                >
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
+                </button>
 
-                  <template v-slot:tooltip>
-                    {{ $t('Delete item') }}
-                  </template>
-                </Tooltip>
-              </template>
+                <template v-slot:tooltip>
+                  {{ $t('Delete item') }}
+                </template>
+              </Tooltip>                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -223,7 +219,7 @@
                 </Tooltip>
               </template>
               <ListActionsThreeDots
-                v-if="resource.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) || resource.options.moveBaseActionsOutOfThreeDotsMenu !== true"
+                v-if="resource.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) || resource.options.baseActionsAsQuickIcons !== true"
                 :resourceOptions="resource?.options"
                 :record="row"
                 :updateRecords="()=>emits('update:records', true)"
diff --git a/adminforth/types/Back.ts b/adminforth/types/Back.ts
index 890ec5ed..66fefe3e 100644
--- a/adminforth/types/Back.ts
+++ b/adminforth/types/Back.ts
@@ -1337,7 +1337,7 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
-  moveBaseActionsOutOfThreeDotsMenu?: boolean,
+  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.

From 1215d7bdbedee48a66902f8c48e90df14ab0380e Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Wed, 29 Oct 2025 13:02:41 +0200
Subject: [PATCH 5/5] chore: adjust template indentation and formatting for
 better readability in ListActionsThreeDots.vue

---
 .../spa/src/components/ListActionsThreeDots.vue  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/adminforth/spa/src/components/ListActionsThreeDots.vue b/adminforth/spa/src/components/ListActionsThreeDots.vue
index d2d50f47..dd2990da 100644
--- a/adminforth/spa/src/components/ListActionsThreeDots.vue
+++ b/adminforth/spa/src/components/ListActionsThreeDots.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="relative inline-block">
-  <div
-    ref="triggerRef"
+    <div
+      ref="triggerRef"
       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"
-    @click="toggleMenu"
+      @click="toggleMenu"
     >
       <IconDotsHorizontalOutline class="w-6 h-6 text-lightPrimary dark:text-darkPrimary" />
     </div>
     <teleport to="body">
       <div
-      v-if="showMenu"
-      ref="menuRef"
-      class="z-50 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
-      :style="menuStyles"
+        v-if="showMenu"
+        ref="menuRef"
+        class="z-50 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
+        :style="menuStyles"
       >
         <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('show'))">
           <RouterLink
             v-if="resourceOptions?.allowedActions?.show"
             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"
-            :to="{ 
+            :to="{
               name: 'resource-show', 
               params: { 
                 resourceId: props.resourceId,