adminforth 2.17.0-next.7 → 2.17.0-next.71

package/dist/spa/src/App.vue

@@ -196,7 +196,7 @@ import { getCustomComponent } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
 import { initFrontedAPI } from '@/adminforth';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
 import { Tooltip } from '@/afcl'
 
@@ -204,6 +204,9 @@ const coreStore = useCoreStore();
 const toastStore = useToastStore();
 const userStore = useUserStore();
 
+const { menu } = useAdminforth();
+let { closeUserMenuDropdown } = useAdminforth();
+
 initFrontedAPI()
 
 createHead()
@@ -310,7 +313,7 @@ watch(dropdownUserButton, (dropdownUserButton) => {
       document.querySelector('#dropdown-user') as HTMLElement,
       document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
     );
-    adminforth.closeUserMenuDropdown = () => {
+    closeUserMenuDropdown = () => {
       dd.hide();
     }
   }
@@ -329,7 +332,7 @@ onMounted(async () => {
   // before init flowbite we have to wait router initialized because it affects dom(our v-ifs) and fetch menu
   await initRouter();
 
-  adminforth.menu.refreshMenuBadges = async () => {
+  menu.refreshMenuBadges = async () => {
     await coreStore.fetchMenuBadges();
   }
 

package/dist/spa/src/adminforth.ts

@@ -19,11 +19,12 @@ class FrontendAPI implements FrontendAPIInterface {
   public modalStore:any
   public filtersStore:any  
   public coreStore:any
+  private saveInterceptors: Record<string, Array<(ctx: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>>> = {};
 
   public list: {
     refresh(): Promise<{ error? : string }>;
     silentRefresh(): Promise<{ error? : string }>;
-    silentRefreshRow(): Promise<{ error? : string }>;
+    silentRefreshRow(pk: any): Promise<{ error? : string }>;
     closeThreeDotsDropdown(): Promise<{ error? : string }>;
     closeUserMenuDropdown: () => void;
     setFilter: (filter: FilterParams) => void;
@@ -84,6 +85,49 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
+  registerSaveInterceptor(
+    handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>,
+  ): void {
+    const rid = router.currentRoute.value?.params?.resourceId as string;
+    if (!rid) {
+      return;
+    }
+    if (!this.saveInterceptors[rid]) {
+      this.saveInterceptors[rid] = [];
+    }
+    this.saveInterceptors[rid].push(handler);
+  }
+
+  async runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }> {
+    const list = this.saveInterceptors[params.resourceId] || [];
+    const aggregatedExtra: Record<string, any> = {};
+    for (const fn of list) {
+      try {
+        const res = await fn(params);
+        if (typeof res !== 'object' || typeof res.ok !== 'boolean') {
+          return { ok: false, error: 'Invalid interceptor return value' };
+        }
+        if (!res.ok) { 
+          return { ok: false, error: res.error ?? 'Interceptor failed' };
+        }
+        if (res.extra) {
+          Object.assign(aggregatedExtra, res.extra);
+        }
+      } catch (e: any) {
+        return { ok: false, error: e?.message || String(e) };
+      }
+    }
+    return { ok: true, extra: aggregatedExtra };
+  }
+
+  clearSaveInterceptors(resourceId?: string): void {
+    if (resourceId) {
+      delete this.saveInterceptors[resourceId];
+    } else {
+      this.saveInterceptors = {};
+    }
+  }
+
   confirm(params: ConfirmParams): Promise<boolean> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
@@ -180,5 +224,20 @@ export function initFrontedAPI() {
   api.filtersStore = useFiltersStore();
 }
 
+export function useAdminforth() {
+  const api = frontendAPI as FrontendAPI;
+  return {
+    registerSaveInterceptor: (handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>) => api.registerSaveInterceptor(handler),
+    alert: (params: AlertParams) => api.alert(params),
+    confirm: (params: ConfirmParams) => api.confirm(params),
+    list: api.list,
+    show: api.show,
+    menu: api.menu,
+    closeUserMenuDropdown: () => api.closeUserMenuDropdown(),
+    runSaveInterceptors: (params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => api.runSaveInterceptors(params),
+    clearSaveInterceptors: (resourceId?: string) => api.clearSaveInterceptors(resourceId),
+  };
+}
+
 
 export default frontendAPI;

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

@@ -134,7 +134,6 @@ onMounted(() => {
 })
 
 watch(start, () => {
-  //console.log('⚡ emit', start.value)
   emit('update:valueStart', start.value)
 })
 

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

@@ -55,14 +55,14 @@
         <!-- Confirmation Modal -->
         <div
           v-if="showConfirmationOnClose"
-          class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-60"
+          class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60]"
         >
           <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
             <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
             <p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
             <div class="flex justify-end">
               <Button
-                class="me-3"
+                class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
                 @click="showConfirmationOnClose = false"
               >
                 Cancel

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

@@ -100,7 +100,9 @@ import { humanifySize } from '@/utils';
 import { ref, type Ref, computed } from 'vue';
 import { IconFileSolid } from '@iconify-prerendered/vue-flowbite';
 import { watch } from 'vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { alert } = useAdminforth();
 
 const props = defineProps<{
   extensions: string[],
@@ -175,7 +177,7 @@ function doEmit(filesIn: FileList) {
     );
     
     if (isDuplicate) {
-      adminforth.alert({
+      alert({
         message: `The file "${file.name}" is already selected.`,
         variant: 'warning',
       });
@@ -183,14 +185,14 @@ function doEmit(filesIn: FileList) {
     }
 
     if (!allowedExtensions.includes(`.${extension}`)) {
-      adminforth.alert({
+      alert({
         message: `Sorry, the file type .${extension} is not allowed. Please upload a file with one of the following extensions: ${allowedExtensions.join(', ')}`,
         variant: 'danger',
       });
       return;
     }
     if (size > maxSizeBytes) {
-      adminforth.alert({
+      alert({
         message: `Sorry, the file size ${humanifySize(size)} exceeds the maximum allowed size of ${humanifySize(maxSizeBytes)}.`,
         variant: 'danger',
       });

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

@@ -38,7 +38,7 @@
       </div>
     </div>
     <teleport to="body" v-if="(teleportToBody  || teleportToTop) && showDropdown">
-      <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop, 'z-10': teleportToBody, 'z-[1000]': teleportToTop}"
+      <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop, 'z-30': teleportToBody, 'z-[1000]': teleportToTop}"
         class="fixed w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
           dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
         @scroll="handleDropdownScroll">

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

@@ -1,8 +1,7 @@
 <template>
-  <div class="afcl-table-container relative overflow-x-auto shadow-md rounded-lg">
-    <div class="overflow-x-auto w-full">
+  <div class="afcl-table-container relative overflow-x-auto overflow-y-auto shadow-md rounded-lg">
       <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
-          <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
+          <thead class="afcl-table-thread z-40 text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText" :class="makeHeaderSticky ? 'sticky top-0' : ''">
             <tr>
               <th
                 scope="col"
@@ -79,10 +78,11 @@
             </tr>
           </tbody>
       </table>
-    </div>
     <nav class="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground mt-2 flex flex-col gap-2 items-center sm:flex-row justify-center sm:justify-between px-4 pb-4" 
       v-if="totalPages > 1"
-      :aria-label="$t('Table navigation')">
+      :aria-label="$t('Table navigation')"
+      :class="makePaginationSticky ? 'sticky bottom-0 pt-4' : ''"
+    >
     <i18n-t 
       keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-center text-lightTablePaginationText dark:text-darkTablePaginationText sm:mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
@@ -169,6 +169,8 @@
       isLoading?: boolean,
       defaultSortField?: string,
       defaultSortDirection?: 'asc' | 'desc',
+      makeHeaderSticky?: boolean,
+      makePaginationSticky?: boolean,
     }>(), {
       evenHighlights: true,
       pageSize: 5,

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

@@ -9,9 +9,7 @@
       ref="tooltip"
     >
       <slot name="tooltip"></slot>
-      <div class="tooltip-arrow absolute -top-2" data-popper-arrow>
-        <div class="absolute top-0 -left-0.5 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-lightTooltipBackground dark:border-b-darkTooltipBackground"></div>
-      </div>
+      <div class="tooltip-arrow" data-popper-arrow></div>
     </div>
   </teleport>
 </template>
@@ -50,4 +48,40 @@ function mouseOff() {
   showTooltip.value = false;
 }
 
-</script>
+</script>
+
+<style>
+.tooltip .tooltip-arrow,
+.tooltip .tooltip-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tooltip .tooltip-arrow {
+  visibility: hidden;
+}
+
+.tooltip .tooltip-arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
+  bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+  top: -4px;
+}
+
+.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+  right: -4px;
+}
+
+.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+  left: -4px;
+}
+</style>

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

@@ -86,7 +86,20 @@
       :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
     <Input
-      v-else-if="['decimal', 'float'].includes(type || column.type)"
+      v-else-if="(type || column.type) === 'decimal'"
+      ref="input"
+      type="number"
+      inputmode="decimal"
+      class="w-40"
+      placeholder="0.0"
+      :fullWidth="true"
+      :prefix="column.inputPrefix"
+      :suffix="column.inputSuffix"
+      :modelValue="String(value)"
+      @update:modelValue="$emit('update:modelValue', String($event))"
+    />
+    <Input
+      v-else-if="(type || column.type) === 'float'"
       ref="input"
       type="number"
       step="0.1"

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

@@ -197,12 +197,10 @@ onMounted(() => {
 })
 
 watch(start, () => {
-  //console.log('⚡ emit', start.value)
   emit('update:valueStart', start.value)
 })
 
 watch(end, () => {
-  //console.log('⚡ emit', end.value)
   emit('update:valueEnd', end.value)
 })
 

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

@@ -53,9 +53,6 @@ const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 const minFormatted = computed(() => Math.floor(<number>props.min));
 const maxFormatted = computed(() => Math.ceil(<number>props.max));
 
-const isChanged = computed(() => {
-  return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
-});
 
 const start = ref<string | number>(props.valueStart);
 const end = ref<string | number>(props.valueEnd);
@@ -92,17 +89,23 @@ function updateEndFromProps() {
 }
 
 watch(start, () => {
-  console.log('⚡ emit', start.value)
   emit('update:valueStart', start.value)
 })
 
 watch(end, () => {
-  console.log('⚡ emit', end.value)
   emit('update:valueEnd', end.value);
 })
 
 watch([minFormatted,maxFormatted], () => {
-  setSliderValues(minFormatted.value, maxFormatted.value)
+  if ( !start.value && end.value ) {
+    setSliderValues(minFormatted.value, end.value);
+  } else if ( start.value && !end.value ) {
+    setSliderValues(start.value, maxFormatted.value);
+  } else if ( !start.value && !end.value ) {
+    setSliderValues(minFormatted.value, maxFormatted.value);
+  } else {
+    setSliderValues(start.value, end.value);
+  }
 })
 
 function setSliderValues(start: any, end: any) {

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

@@ -123,9 +123,9 @@
                 :min="getFilterMinValue(c.name)"
                 :max="getFilterMaxValue(c.name)"
                 :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
                 :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
               />
 
               <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
@@ -133,14 +133,14 @@
                   type="number"
                   aria-describedby="helper-text-explanation"
                   :placeholder="$t('From')"
-                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
                   :modelValue="getFilterItem({ column: c, operator: 'gte' })"
                 />
                 <Input
                   type="number"
                   aria-describedby="helper-text-explanation"
                   :placeholder="$t('To')"
-                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
+                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
                   :modelValue="getFilterItem({ column: c, operator: 'lte' })"
                 />
               </div>

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/MenuLink.vue

@@ -16,6 +16,9 @@
       class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
     >
     </component>
+    <IconFileImageOutline v-else
+      class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
+    />
     <div 
       class="overflow-hidden block ms-3 pr-4 text-left rtl:text-right transition-all duration-200 ease-in-out"
       :class="{
@@ -57,6 +60,7 @@ import { getIcon } from '@/utils';
 import { Tooltip } from '@/afcl';
 import { ref, watch, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
+import { IconFileImageOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);