adminforth 2.26.0-next.1 → 2.26.0-next.11

package/dist/spa/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@iconify-prerendered/vue-flag": "^0.28.1748584105",
         "@iconify-prerendered/vue-flowbite": "^0.28.1754899090",
+        "@iconify-prerendered/vue-heroicons": "^0.28.1721921294",
         "@iconify-prerendered/vue-humbleicons": "^0.28.1754108846",
         "@unhead/vue": "^1.9.12",
         "@vueuse/core": "^10.10.0",
@@ -676,6 +677,18 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@iconify-prerendered/vue-heroicons": {
+      "version": "0.28.1721921294",
+      "resolved": "https://registry.npmjs.org/@iconify-prerendered/vue-heroicons/-/vue-heroicons-0.28.1721921294.tgz",
+      "integrity": "sha512-L/Xe9HeunSvUA2+KtlaRehFpKjdZPpzPWsynX1To4QmCPAF3YD0lwusV9fZrtkdi0Y5NYS8WZF1SDypkL65+dQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://www.buymeacoffee.com/kozack/"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@iconify-prerendered/vue-humbleicons": {
       "version": "0.28.1754108846",
       "resolved": "https://registry.npmjs.org/@iconify-prerendered/vue-humbleicons/-/vue-humbleicons-0.28.1754108846.tgz",

package/dist/spa/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@iconify-prerendered/vue-flag": "^0.28.1748584105",
     "@iconify-prerendered/vue-flowbite": "^0.28.1754899090",
+    "@iconify-prerendered/vue-heroicons": "^0.28.1721921294",
     "@iconify-prerendered/vue-humbleicons": "^0.28.1754108846",
     "@unhead/vue": "^1.9.12",
     "@vueuse/core": "^10.10.0",

package/dist/spa/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@iconify-prerendered/vue-flowbite':
         specifier: ^0.28.1754899090
         version: 0.28.1754899090(vue@3.5.29(typescript@5.4.5))
+      '@iconify-prerendered/vue-heroicons':
+        specifier: ^0.28.1721921294
+        version: 0.28.1721921294(vue@3.5.29(typescript@5.4.5))
       '@iconify-prerendered/vue-humbleicons':
         specifier: ^0.28.1754108846
         version: 0.28.1754108846(vue@3.5.29(typescript@5.4.5))
@@ -335,6 +338,11 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  '@iconify-prerendered/vue-heroicons@0.28.1721921294':
+    resolution: {integrity: sha512-L/Xe9HeunSvUA2+KtlaRehFpKjdZPpzPWsynX1To4QmCPAF3YD0lwusV9fZrtkdi0Y5NYS8WZF1SDypkL65+dQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@iconify-prerendered/vue-humbleicons@0.28.1754108846':
     resolution: {integrity: sha512-O7X7bHh4QhR9ui098FK8Sh/fPA7JRg2rVrLxUpv8Xh0LpahI9u01YKy5flhkzcwwQ+A6zN2uuKI16rytrVVcaA==}
     peerDependencies:
@@ -2019,6 +2027,10 @@ snapshots:
     dependencies:
       vue: 3.5.29(typescript@5.4.5)
 
+  '@iconify-prerendered/vue-heroicons@0.28.1721921294(vue@3.5.29(typescript@5.4.5))':
+    dependencies:
+      vue: 3.5.29(typescript@5.4.5)
+
   '@iconify-prerendered/vue-humbleicons@0.28.1754108846(vue@3.5.29(typescript@5.4.5))':
     dependencies:
       vue: 3.5.29(typescript@5.4.5)

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

@@ -80,12 +80,16 @@ const showConfirmationOnClose = ref(false);
 
 
 async function open() {
-  await props.beforeOpenFunction?.();
+  if (props.beforeOpenFunction) {
+    await props.beforeOpenFunction?.();
+  }
   isModalOpen.value = true;
 }
 
 async function close() {
-  await props.beforeCloseFunction?.();
+  if (props.beforeCloseFunction) {
+    await props.beforeCloseFunction?.();
+  }
   isModalOpen.value = false;
 }
 

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

@@ -1,41 +1,40 @@
 <template>
   <Teleport to="body">
-  <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-[110] w-full h-full overflow-y-auto overflow-x-hidden flex items-center justify-center">
-    <div class="relative p-4 w-full max-w-md max-h-full" >
-            <div class="afcl-confirmation-container relative bg-lightAcceptModalBackground rounded-lg shadow dark:bg-darkAcceptModalBackground dark:shadow-black">
-        <button type="button" @click="modalStore.togleModal" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
-                    <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                    </svg>
-                    <span class="sr-only">{{ $t('Close modal') }}</span>
-                </button>
-                <div class="p-4 md:p-5 text-center">
-                    <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-                    </svg>
-                    <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
-                    <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
-
-                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
-                        {{ modalStore?.modalContent?.acceptText }}
-                    </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
-                </div>
-            </div>
+    <Modal 
+      ref="modalRef"
+      :beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
+    >
+      <div class="relative p-4 w-full max-w-md max-h-full" >
+        <button type="button" @click="modalStore.togleModal()" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
+          <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+          </svg>
+          <span class="sr-only">{{ $t('Close modal') }}</span>
+        </button>
+        <div class="p-4 md:p-5 text-center">
+          <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+          </svg>
+          <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
+          <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
+
+          <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
+              {{ modalStore?.modalContent?.acceptText }}
+          </button>
+          <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
         </div>
-    </div>
-
-</Teleport>
+      </div>
+    </Modal>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { watch, onMounted, nextTick, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
-import { Modal } from 'flowbite';
+import { Modal } from '@/afcl';
 
+const modalRef = ref();
 const modalStore = useModalStore();
-const modalEl = ref(null);
-const modal = ref(null);
 
 watch( () => modalStore.isOpened, (newVal) => {
     if (newVal) {
@@ -46,35 +45,14 @@ watch( () => modalStore.isOpened, (newVal) => {
   }
 );
 
-onMounted(async () => {
-  await nextTick();
-  modal.value = new Modal(
-    modalEl.value,
-    {
-      closable: true,
-      backdrop: 'static',
-      backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-[100]"
-    }
-  );
-})
+
 
 function open() {
-  modal.value?.show();
+  modalRef.value.open();
 }
 
 function close() {
-  modal.value?.hide();
+  modalRef.value.close();
 }
 
-</script>
-
-<style scoped>
-.modal {
-  position: fixed;
-  z-index: 999;
-  top: 20%;
-  left: 50%;
-  width: 300px;
-  margin-left: -150px;
-}
-</style>
+</script>

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

@@ -1,15 +1,14 @@
 <template>
   <RouterLink 
-      :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+      :to="item.url || { name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+      :target="item.isOpenInNewTab ? '_blank' : '_self'"
       class="af-menu-link flex group relative items-center w-full py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-all duration-200 ease-in-out" 
       :class="{ 
         'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover': !['divider', 'gap', 'heading'].includes(item.type),
         'pl-6 pr-3.5': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
         'px-3.5 ': !isChild || (isSidebarIconOnly && !isSidebarHovering),
         'max-w-12': isSidebarIconOnly && !isSidebarHovering,
-        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
-        ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
-        ($route.name === item.path)
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': isItemActive(item)
       }"
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" 
@@ -61,6 +60,21 @@ import { Tooltip } from '@/afcl';
 import { ref, watch, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { IconFileImageOutline } from '@iconify-prerendered/vue-flowbite';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const isItemActive = (item: any) => {
+  if (item.url) {
+    return route.fullPath === item.url;
+  }
+
+  if (item.resourceId) {
+    return route.params.resourceId === item.resourceId && route.name === 'resource-list';
+  }
+
+  return route.name === item.path;
+};
 
 const props = defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);
 

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

@@ -10,7 +10,7 @@
             <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
         </div>      
     </div>
-    <table v-else class=" w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
+    <table v-else class="w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
 
       <tbody>
         <!-- table header -->
@@ -64,7 +64,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter((c: AdminForthResourceColumnInputCommon) => c.showIn?.list).length + 2"
+          :columns="resource?.columns.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list).length + 2"
           :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
@@ -182,7 +182,7 @@
 
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
                   :key="action.id"
                 >
                     <component
@@ -339,7 +339,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -360,7 +360,7 @@ const props = defineProps<{
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
   customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclaration,
+  tableRowReplaceInjection?: AdminForthComponentDeclarationFull,
 }>();
 
 // emits, update page
@@ -436,7 +436,7 @@ watch(() => props.rows, (newRows) => {
   columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id: string) {
+function addToCheckedValues(id: string | number) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -468,7 +468,7 @@ const allFromThisPageChecked = computed(() => {
   if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
-const ascArr = computed(() => sort.value.filter((s:any) => s.direction === 'asc').map((s: any) => s.field));
+const ascArr = computed(() => sort.value.filter((s: any) => s.direction === 'asc').map((s: any) => s.field));
 const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
@@ -487,9 +487,9 @@ function onSortButtonClick(event: any, field: string) {
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {
-      sort.value = sort.value.map((s: any) => s.field === field ? {field, direction: 'desc'} : s);
+      sort.value = sort.value.map((s) => s.field === field ? {field, direction: 'desc'} : s);
     } else {
-      sort.value = sort.value.filter((s: any) => s.field !== field);
+      sort.value = sort.value.filter((s) => s.field !== field);
     }
   }
 }
@@ -576,7 +576,7 @@ async function deleteRecord(row: any) {
 const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
 async function startCustomAction(actionId: string, row: any, extraData: Record<string, any> = {}) {
-  console.log('Starting custom action', actionId, row);
+
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
@@ -586,7 +586,7 @@ async function startCustomAction(actionId: string, row: any, extraData: Record<s
       resourceId: props.resource?.resourceId,
       actionId: actionId,
       recordId: row._primaryKeyValue,
-      extra: extraData,
+      extra: extraData
     }
   });
   

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

@@ -18,8 +18,8 @@
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-20 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
-          <td scope="col" class="list-table-header-cell  p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
+        <tr class="t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+          <td scope="col" class="list-table-header-cell p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
               :disabled="!rows || !rows.length"
@@ -29,7 +29,7 @@
             </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell  px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
+          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
           
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
                 class="flex items-center " :class="{'cursor-pointer':c.sortable}">
@@ -69,7 +69,7 @@
         <SkeleteLoader 
           v-if="!rows" 
           :columns="resource?.columns.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list).length + 2"
-          :rows="rowHeights.length || 20"
+          :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
         />
@@ -94,7 +94,6 @@
 
         <!-- Visible rows -->
         <component
-            v-else
             v-for="(row, rowI) in visibleRows"
             :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
             :key="`row_${row._primaryKeyValue}`"
@@ -108,7 +107,7 @@
             :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
             @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
          >
-        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading" @click="(e)=>e.stopPropagation()">
+        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
             @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
@@ -116,7 +115,7 @@
           >
             <span class="sr-only">{{ $t('checkbox') }}</span>
           </Checkbox>
-          </td>
+        </td>
           <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4" :class="{'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
@@ -177,7 +176,7 @@
                 <template v-slot:tooltip>
                   {{ $t('Delete item') }}
                 </template>
-              </Tooltip>                
+              </Tooltip>
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -191,7 +190,7 @@
               </template>
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
                   :key="action.id"
                 >
                   <CallActionWrapper
@@ -251,9 +250,9 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
+  <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="inline-flex "
+    <div class="af-pagination-buttons-container inline-flex "
       v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
     >
         <!-- Buttons -->
@@ -279,11 +278,10 @@
           type="text"
           v-model="pageInput"
           :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-          class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+          class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
           @keydown="onPageKeydown($event)"
           @blur="validatePageInput()"
-        >
-        </input>
+        />
 
         <button
           class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
@@ -309,7 +307,7 @@
         <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
         <template v-else-if="resource && totalRows > 0">
           
-          <span class="hidden sm:inline">
+          <span class="af-pagination-info hidden sm:inline">
             <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
               <template v-slot:from>
                 <strong>{{ from }}</strong>
@@ -343,7 +341,7 @@
 <script setup lang="ts">
 
 
-import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref, onUnmounted } from 'vue';
+import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } from 'vue';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
@@ -352,18 +350,15 @@ 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
+  IconTrashBinSolid,
+  IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -387,7 +382,7 @@ const props = defineProps<{
   itemHeight?: number,
   bufferSize?: number,
   customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclaration
+  tableRowReplaceInjection?: AdminForthComponentDeclarationFull
 }>();
 
 // emits, update page
@@ -463,7 +458,7 @@ watch(() => props.rows, (newRows) => {
   columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id: any) {
+function addToCheckedValues(id: string | number) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -499,7 +494,7 @@ const ascArr = computed(() => sort.value.filter((s: any) => s.direction === 'asc
 const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
-function onSortButtonClick(event: any, field: any) {
+function onSortButtonClick(event: any, field: string) {
   // if ctrl key is pressed, add to sort otherwise sort by this field
   // in any case if field is already in sort, toggle direction
   
@@ -524,7 +519,7 @@ function onSortButtonClick(event: any, field: any) {
 
 const clickTarget = ref(null);
 
-async function onClick(e: any,row: any) {
+async function onClick(e: any, row: any) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
   await new Promise((resolve) => setTimeout(resolve, 100));

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

@@ -9,7 +9,8 @@
       '-translate-x-full': !sideBarOpen, 
       'transform-none': sideBarOpen,
       'sidebar-collapsed': iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering,
-      'sidebar-expanded': !iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)
+      'sidebar-expanded': !iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering),
+      'sidebar-floating': isSidebarIconOnly && isSidebarHovering
      }"
     aria-label="Sidebar"
   >
@@ -217,6 +218,9 @@
   
   .sidebar-expanded {
     width: v-bind(expandedWidth); /* Expanded width (w-64) */
+  }
+
+  .sidebar-floating {
     box-shadow: 3px 0px 12px -2px rgba(0, 0, 0, 0.15);
   }
 

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

@@ -1760,6 +1760,8 @@ export interface IOperationalResource {
   update: (primaryKey: any, record: any) => Promise<any>;
 
   delete: (primaryKey: any) => Promise<boolean>;
+  
+  deleteMany?(recordIds: any[]): Promise<number>;
 
   dataConnector: IAdminForthDataSourceConnectorBase;
 }
@@ -1811,7 +1813,6 @@ 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

@@ -371,6 +371,14 @@ export interface AdminForthResourceInputCommon {
      * General options for resource.
      */
     options?: {
+      
+
+      /**
+       * Show quick action icons for base actions (show, edit, delete) in list view. 
+       * By default, they are inside three dots dropdown menu. 
+       */
+      baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
+
 
       /**
        * Default sort for list view.
@@ -1122,6 +1130,8 @@ export interface AdminForthConfigMenuItem {
    * Item id will be automatically generated from hashed resourceId+Path+label
    */
   itemId?: string,  // todo move to runtime type
+  
+  url?: string
 }
 
 

package/dist/types/Back.d.ts

@@ -1535,6 +1535,7 @@ export interface IOperationalResource {
     }>;
     update: (primaryKey: any, record: any) => Promise<any>;
     delete: (primaryKey: any) => Promise<boolean>;
+    deleteMany?(recordIds: any[]): Promise<number>;
     dataConnector: IAdminForthDataSourceConnectorBase;
 }
 /**
@@ -1573,7 +1574,6 @@ 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.