adminforth 2.17.0-next.10 → 2.17.0-next.12

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

@@ -0,0 +1,235 @@
+<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?.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="{
+              name: 'resource-show', 
+              params: { 
+                resourceId: props.resourceId, 
+                primaryKey: record._primaryKeyValue,
+              }
+            }"
+
+          >
+            <IconEyeSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            {{ $t('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"
+            :to="{ 
+              name: 'resource-edit', 
+              params: { 
+                resourceId: props.resourceId, 
+                primaryKey: record._primaryKeyValue,
+              }
+            }"
+          >
+            <IconPenSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            {{ $t('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"
+            @click="deleteRecord(record)"
+          >
+            <IconTrashBinSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            {{ $t('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
+                :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
+                :meta="action.customComponent?.meta"
+                :row="record"
+                :resource="resource"
+                :adminUser="adminUser"
+                @callAction="(payload? : Object) => startCustomAction(action.id, record, payload)"
+              >
+                <component
+                  v-if="action.icon"
+                  :is="getIcon(action.icon)"
+                  class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                />
+                {{ $t(action.name) }}
+              </component>               
+            </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';
+import CallActionWrapper from '@/components/CallActionWrapper.vue'
+
+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>

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

@@ -120,7 +120,7 @@
           </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>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
                 <RouterLink
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
@@ -139,8 +139,7 @@
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
                 <RouterLink
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
@@ -157,8 +156,7 @@
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
                 <button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
@@ -170,7 +168,6 @@
                   {{ $t('Delete item') }}
                 </template>
               </Tooltip>
-                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -185,7 +182,7 @@
 
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
                   :key="action.id"
                 >
                     <component
@@ -213,6 +210,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="showListActionsThreeDots"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
             
           </td>
@@ -323,20 +330,18 @@ import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 import { getIcon } from '@/utils';
-import {
-  IconInboxOutline,
-} from '@iconify-prerendered/vue-flowbite';
-
 import {
   IconEyeSolid,
   IconPenSolid,
   IconTrashBinSolid,
+  IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
@@ -352,6 +357,7 @@ const props = defineProps<{
   noRoundings?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
+  customActionIconsThreeDotsMenuItems?: any[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration,
 }>();
 
@@ -369,6 +375,12 @@ const pageInput = ref('1');
 const page = ref(1);
 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 && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
+})
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
 const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));

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

@@ -130,7 +130,7 @@
           </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>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
                 <RouterLink
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
@@ -142,15 +142,14 @@
                   }"
 
                 >
-                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
                 </RouterLink>
 
                 <template v-slot:tooltip>
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
                 <RouterLink
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
@@ -161,26 +160,24 @@
                     }
                   }"
                 >
-                  <IconPenSolid class="w-5 h-5 me-2"/>
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
                 </RouterLink>
                 <template v-slot:tooltip>
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
                 <button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
-                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
                 </button>
 
                 <template v-slot:tooltip>
                   {{ $t('Delete item') }}
                 </template>
-              </Tooltip>
-                
+              </Tooltip>                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -192,10 +189,9 @@
                   :updateRecords="()=>emits('update:records', true)"
                 />
               </template>
-
-                            <template v-if="resource.options?.actions">
+              <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
                   :key="action.id"
                 >
                   <CallActionWrapper
@@ -228,6 +224,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="showListActionsThreeDots"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
           </td>
         </component>
@@ -359,6 +365,7 @@ import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
@@ -377,6 +384,7 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
+  customActionIconsThreeDotsMenuItems?: any[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration
 }>();
 
@@ -394,6 +402,12 @@ const pageInput = ref('1');
 const page = ref(1);
 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 && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
+})
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
 const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));

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

@@ -848,6 +848,7 @@ export interface AdminForthActionInput {
   name: string;
   showIn?: {
       list?: boolean,
+      listThreeDotsMenu?: boolean,
       showButton?: boolean,
       showThreeDotsMenu?: boolean,
   };
@@ -861,6 +862,7 @@ export interface AdminForthActionInput {
       resource: AdminForthResource;
       recordId: string;
       adminUser: AdminUser;
+      response: IAdminForthHttpResponse;
       extra?: HttpExtra;
       tr: Function;
   }) => Promise<{
@@ -1358,6 +1360,7 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
+  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.

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

@@ -503,6 +503,7 @@ export interface AdminForthResourceInputCommon {
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           customActionIcons?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableBodyStart?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableRowReplace?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },

package/dist/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,6 +143,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]
+          : []"
       :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
         ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
         : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || undefined"
@@ -152,7 +157,7 @@
     />
 
     <ResourceListTable
-      v-else
+      v-else-if="!coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -176,6 +181,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]
+          : []"
       :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
         ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
         : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || undefined"

package/dist/types/Back.d.ts

@@ -830,6 +830,7 @@ export interface AdminForthActionInput {
     name: string;
     showIn?: {
         list?: boolean;
+        listThreeDotsMenu?: boolean;
         showButton?: boolean;
         showThreeDotsMenu?: boolean;
     };
@@ -843,6 +844,7 @@ export interface AdminForthActionInput {
         resource: AdminForthResource;
         recordId: string;
         adminUser: AdminUser;
+        response: IAdminForthHttpResponse;
         extra?: HttpExtra;
         tr: Function;
     }) => Promise<{
@@ -1208,6 +1210,7 @@ export type AllowedActions = {
  * General options for resource.
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
+    baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[];
     /**
      * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
      * using checkboxes.