adminforth 2.13.0-next.5 → 2.13.0-next.50

package/dist/spa/package.json

@@ -13,47 +13,48 @@
     "i18n:extract": "echo {} > i18n-empty.json && vue-i18n-extract report --vueFiles \"./src/**/*.{js,vue,ts}\" --output ./i18n-messages.json --languageFiles \"i18n-empty.json\" --add"
   },
   "dependencies": {
-    "@iconify-prerendered/vue-flag": "^0.28.1754899047",
+    "@iconify-prerendered/vue-flag": "^0.28.1748584105",
     "@iconify-prerendered/vue-flowbite": "^0.28.1754899090",
-    "@unhead/vue": "^1.11.20",
-    "@vueuse/core": "^10.11.1",
+    "@iconify-prerendered/vue-humbleicons": "^0.28.1754108846",
+    "@unhead/vue": "^1.9.12",
+    "@vueuse/core": "^10.10.0",
     "apexcharts": "^4.7.0",
-    "dayjs": "^1.11.19",
-    "debounce": "^2.2.0",
-    "flowbite-datepicker": "^1.3.2",
-    "javascript-time-ago": "^2.5.12",
-    "pinia": "^2.3.1",
-    "sanitize-html": "^2.17.0",
-    "unhead": "^1.11.20",
+    "dayjs": "^1.11.11",
+    "debounce": "^2.1.0",
+    "flowbite-datepicker": "^1.2.6",
+    "javascript-time-ago": "^2.5.11",
+    "pinia": "^2.1.7",
+    "sanitize-html": "^2.13.0",
+    "unhead": "^1.9.12",
     "uuid": "^10.0.0",
-    "vue": "^3.5.22",
+    "vue": "^3.5.12",
     "vue-diff": "^1.2.4",
-    "vue-i18n": "^10.0.8",
-    "vue-router": "^4.6.3",
+    "vue-i18n": "^10.0.5",
+    "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.14.1",
-    "@tsconfig/node20": "^20.1.6",
-    "@types/node": "^20.19.24",
-    "@vitejs/plugin-vue": "^6.0.2",
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.8.1",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.33.0",
-    "flag-icons": "^7.5.0",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "flag-icons": "^7.2.3",
     "flowbite": "^3.1.2",
-    "i18n-iso-countries": "^7.14.0",
-    "npm-run-all2": "^6.2.6",
-    "portfinder": "^1.0.38",
-    "postcss": "^8.5.6",
-    "sass": "^1.93.3",
-    "tailwindcss": "^3.4.18",
-    "typescript": "~5.9.3",
-    "vite": "^7.2.4",
+    "i18n-iso-countries": "^7.12.0",
+    "npm-run-all2": "^6.1.2",
+    "portfinder": "^1.0.32",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.2",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.13",
     "vue-i18n-extract": "^2.0.7",
-    "vue-tsc": "^2.2.12",
-    "vue3-json-viewer": "^2.4.1"
+    "vue-tsc": "^2.0.11",
+    "vue3-json-viewer": "^2.2.2"
   }
 }

package/dist/spa/src/App.vue

@@ -24,6 +24,12 @@
             />
 
             <div class="flex items-center ms-3 ">
+              <Tooltip>
+                <IconWifiOff v-if="coreStore.isInternetError" class="blinking-icon w-8 h-8 text-red-500" />
+                <template #tooltip>
+                  {{$t('Internet connection lost')}}
+                </template>
+              </Tooltip>
               <span  
                 v-if="!coreStore.config?.singleTheme"
                 @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black  dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
@@ -35,12 +41,17 @@
                   ref="dropdownUserButton"
                   type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                   <span class="sr-only">{{ $t('Open user menu') }}</span>
-                  <svg class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                    <img 
+                      v-if="coreStore.userAvatarUrl"
+                      class="w-8 h-8 rounded-full object-cover" 
+                      :src="coreStore.userAvatarUrl" 
+                      alt="user photo"
+                    />
+                  <svg v-else class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                     <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
                   </svg>
                 </button>
               </div>
-
               <div class="z-50 hidden my-4 text-base list-none bg-lightUserMenuBackground divide-y divide-lightUserMenuBorder text-lightUserMenuText rounded shadow dark:shadow-black dark:bg-darkUserMenuBackground dark:divide-darkUserMenuBorder text-darkUserMenuText dark:shadow-black" id="dropdown-user">
                 <div class="px-4 py-3" role="none">
                   <p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
@@ -73,7 +84,7 @@
     </nav>
 
     <Sidebar 
-      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout && !headerOnlyLayout"
+      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout && !headerOnlyLayout && coreStore.menu.length > 0"
       :sideBarOpen="sideBarOpen"
       :forceIconOnly="route.meta?.sidebarAndHeader === 'preferIconOnly'"
       @hideSidebar="hideSidebar"
@@ -129,6 +140,19 @@
 
 <style lang="scss" scoped>
 
+  @keyframes blink {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.2;
+    }
+  }
+
+  .blinking-icon {
+    animation: blink 2s ease-in-out infinite;
+  }
+
   .fade-leave-active {
     @apply transition-opacity duration-500;
   }
@@ -163,6 +187,7 @@ import './index.scss'
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconWifiOff } from '@iconify-prerendered/vue-humbleicons';
 import AcceptModal from './components/AcceptModal.vue';
 import Sidebar from './components/Sidebar.vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -173,6 +198,7 @@ import {useToastStore} from '@/stores/toast';
 import { initFrontedAPI } from '@/adminforth';
 import adminforth from '@/adminforth';
 import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
+import { Tooltip } from '@/afcl'
 
 const coreStore = useCoreStore();
 const toastStore = useToastStore();
@@ -182,8 +208,6 @@ initFrontedAPI()
 
 createHead()
 const sideBarOpen = ref(false);
-const defaultLayout = ref(true);
-const headerOnlyLayout = ref(false);
 const route = useRoute();
 const router = useRouter();
 const publicConfigLoaded = ref(false);
@@ -197,6 +221,14 @@ const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'tru
 
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
+const defaultLayout = computed(() => {
+  return route.meta?.sidebarAndHeader !== 'none';
+});
+
+const headerOnlyLayout = computed(() => {
+  return route.meta?.sidebarAndHeader === 'headerOnly';
+});
+
 const expandedWidth = computed(() => coreStore.config?.iconOnlySidebar?.expandedSidebarWidth || '16.5rem');
 
 const theme = ref('light');
@@ -308,19 +340,6 @@ async function loadMenu() {
   loginRedirectCheckIsReady.value = true;
 }
 
-function handleCustomLayout() {
-  if (route.meta?.sidebarAndHeader === 'none') {
-    defaultLayout.value = false;
-  } else if (route.meta?.sidebarAndHeader === 'preferIconOnly') {
-    defaultLayout.value = true;
-    isSidebarIconOnly.value = true;
-  } else if (route.meta?.sidebarAndHeader === 'headerOnly') {
-    headerOnlyLayout.value = true;
-  } else {
-    defaultLayout.value = true;
-  }
-}
-
 function humanizeSnake(str: string): string {
   if (!str) {
     return '';
@@ -345,10 +364,11 @@ watch(title, (title) => {
   document.title = title;
 })
 
-watch([route, () => coreStore.resourceById, () => coreStore.config], async () => {
-  handleCustomLayout()
-  await new Promise((resolve) => setTimeout(resolve, 0));
- 
+watch(route, () => {
+  // Handle preferIconOnly layout
+  if (route.meta?.sidebarAndHeader === 'preferIconOnly') {
+    isSidebarIconOnly.value = true;
+  }
 });
 
 
@@ -376,11 +396,13 @@ onMounted(async () => {
   loadPublicConfig(); // and this
   // before init flowbite we have to wait router initialized because it affects dom(our v-ifs) and fetch menu
   await initRouter();
-  handleCustomLayout();
 
   adminforth.menu.refreshMenuBadges = async () => {
     await coreStore.fetchMenuBadges();
   }
+
+  window.addEventListener('online', () => coreStore.isInternetError = false);
+  window.addEventListener('offline', () => coreStore.isInternetError = true);
 })
 
 onBeforeMount(()=>{

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

@@ -22,7 +22,7 @@
               v-if="headerCloseButton"
               type="button"
               class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
-              @click="modal?.hide()"
+              @click="tryToHideModal"
             >
               <svg class="w-3 h-3" aria-hidden="true" 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"/>
@@ -51,13 +51,41 @@
           </div>
         </div>
       </div>
+      <div>
+        <!-- Confirmation Modal -->
+        <div
+          v-if="showConfirmationOnClose"
+          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"
+                @click="showConfirmationOnClose = false"
+              >
+                Cancel
+              </Button>
+              <Button
+                @click="
+                  showConfirmationOnClose = false;
+                  modal?.hide();
+                "
+              >
+                Confirm
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
 import Button from "./Button.vue";
-import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
+import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
 import { Modal } from 'flowbite';
 
 const modalEl = ref(null);
@@ -77,20 +105,42 @@ interface DialogProps {
   beforeCloseFunction?: (() => void | Promise<void>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
   closable?: boolean
+  askForCloseConfirmation?: boolean
+  closeConfirmationText?: string
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
   header: '',
   headerCloseButton: true,
-  buttons: () => [
-    { label: 'Close', onclick: (dialog: any) => dialog.hide(), type: '' },
-  ],
+  buttons: () => [],
   clickToCloseOutside: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
   closable: true,
+  askForCloseConfirmation: false,
+  closeConfirmationText: 'Are you sure you want to close this dialog?',
 })
 
+const buttons = computed<DialogButton[]>(() => {
+  if (props.buttons && props.buttons.length > 0) {
+    return props.buttons;
+  }
+  return [
+    {
+      label: 'Close',
+      onclick: (dialog: any) => {
+        if (!props.askForCloseConfirmation) {
+          dialog.hide();
+        } else {
+          showConfirmationOnClose.value = true;
+        }
+      },
+      options: {}
+    }
+  ];
+});
+
+const showConfirmationOnClose = ref(false);
 onMounted(async () => {
   //await one tick when all is mounted
   await nextTick();
@@ -129,6 +179,16 @@ function close() {
 defineExpose({
   open: open,
   close: close,
+  tryToHideModal: tryToHideModal,
 })
 
+function tryToHideModal() {
+  if (!props.askForCloseConfirmation ) {
+    modal.value?.hide();
+  } else {
+    showConfirmationOnClose.value = true;
+  }
+}
+
+
 </script>

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

@@ -13,6 +13,7 @@
         class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-md leading-5 bg-lightDropdownButtonsBackground 
         placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropdownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
         dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        :class="{'cursor-pointer': searchDisabled}"
         autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
@@ -265,11 +266,11 @@ onMounted(() => {
 
   watch(() => props.modelValue, (value) => {
     updateFromProps();
-  });
+  }, {deep: true});
 
   watch(() => props.options, () => {
     updateFromProps();
-  });
+  }, { deep: true });
 
   addClickListener();
   

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

@@ -83,13 +83,20 @@
           </td>
         </tr>
 
-        <tr @click="onClick($event,row)" 
-          v-else v-for="(row, rowI) in rows" :key="`row_${row._primaryKeyValue}`"
-          ref="rowRefs"
-          class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
-
-          :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
-        >
+         <component
+            v-else
+            v-for="(row, rowI) in rows"
+            :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
+            :key="`row_${row._primaryKeyValue}`"
+            :record="row"
+            :resource="resource"
+            :adminUser="coreStore.adminUser"
+            :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
+            @click="onClick($event, row)"
+            ref="rowRefs"
+            class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
+            :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
+         >
         <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)"
@@ -210,7 +217,7 @@
             </div>
             
           </td>
-        </tr>
+         </component>
       </tbody>
     </table>
   </div>
@@ -328,7 +335,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 
@@ -345,6 +352,7 @@ const props = defineProps<{
   noRoundings?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
+  tableRowReplaceInjection?: AdminForthComponentDeclaration,
 }>();
 
 // emits, update page

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

@@ -93,14 +93,21 @@
         </tr>
 
         <!-- Visible rows -->
-        <tr @click="onClick($event,row)" 
-          v-for="(row, rowI) in visibleRows" 
-          :key="`row_${row._primaryKeyValue}`"
-          ref="rowRefs"
-          class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
-          :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
-          @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
-        >
+        <component
+            v-else
+            v-for="(row, rowI) in visibleRows"
+            :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
+            :key="`row_${row._primaryKeyValue}`"
+            :record="row"
+            :resource="resource"
+            :adminUser="coreStore.adminUser"
+            :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
+            @click="onClick($event, row)"
+            ref="rowRefs"
+            class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
+            :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()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
@@ -224,7 +231,7 @@
               </template>
             </div>
           </td>
-        </tr>
+        </component>
 
         <!-- Bottom spacer -->
         <tr v-if="totalHeight > 0">
@@ -350,7 +357,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 
@@ -370,6 +377,7 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
+  tableRowReplaceInjection?: AdminForthComponentDeclaration
 }>();
 
 // emits, update page

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

@@ -14,9 +14,21 @@
     aria-label="Sidebar"
   >
     <div class="h-full px-3 pb-20 md:pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder pt-4" :class="{'sidebar-scroll':!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
-      <div class="af-logo-title-wrapper flex relative transition-all duration-300 ease-in-out h-8 items-center" :class="{'mb-4': isSidebarIconOnly && !isSidebarHovering, 'mx-4 mb-4': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
-        <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))) }" />
-        <img :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8 me-3" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
+      <div 
+        class="af-logo-title-wrapper flex relative transition-all duration-300 ease-in-out h-8 items-center" 
+        :class="{
+          'mb-4': isSidebarIconOnly && !isSidebarHovering, 'mx-4 mb-4': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering),
+          'justify-center': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))) 
+        }"
+      >
+        <img
+          :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" 
+          :alt="`${ coreStore.config?.brandName } Logo`"
+          class="af-logo h-8 me-3" 
+          :class="{ 
+            'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)))          }"
+        />
+        <img :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
         <span 
           v-if="coreStore.config?.showBrandNameInSidebar && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))"
           class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"

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

@@ -1,7 +1,8 @@
 <template >
-  <template v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
+  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
     <button 
-      data-dropdown-toggle="listThreeDotsDropdown" 
+      ref="buttonTriggerRef"
+      @click="toggleDropdownVisibility"
       class="flex items-center py-2 px-2 text-sm font-medium text-lightThreeDotsMenuIconDots focus:outline-none bg-lightThreeDotsMenuIconBackground rounded border border-lightThreeDotsMenuIconBackgroundBorder hover:bg-lightThreeDotsMenuIconBackgroundHover hover:text-lightThreeDotsMenuIconDotsHover focus:z-10 focus:ring-4 focus:ring-lightThreeDotsMenuIconFocus dark:focus:ring-darkThreeDotsMenuIconFocus dark:bg-darkThreeDotsMenuIconBackground dark:text-darkThreeDotsMenuIconDots dark:border-darkThreeDotsMenuIconBackgroundBorder dark:hover:text-darkThreeDotsMenuIconDotsHover dark:hover:bg-darkThreeDotsMenuIconBackgroundHover rounded-default"
     >
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
@@ -11,8 +12,9 @@
 
     <!-- Dropdown menu -->
     <div 
-      id="listThreeDotsDropdown" 
-      class="z-30 hidden bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
+      ref="dropdownRef"
+      :class="{'hidden': !showDropdown, 'block': showDropdown }"
+      class="absolute z-30 right-0 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
         <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
           <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
             <a  href="#" 
@@ -71,7 +73,7 @@
           </li>
         </ul>
     </div>
-  </template>
+  </div>
 </template>
 
 
@@ -82,7 +84,7 @@ import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
-import { ref, type ComponentPublicInstance } from 'vue';
+import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
 import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
 
@@ -91,6 +93,9 @@ const route = useRoute();
 const coreStore = useCoreStore();
 const router = useRouter();
 const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
+const showDropdown = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+const buttonTriggerRef = ref<HTMLElement | null>(null);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
@@ -169,6 +174,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
 function startBulkAction(actionId: string) {
   adminforth.list.closeThreeDotsDropdown();
   emit('startBulkAction', actionId);
+  showDropdown.value = false;
 }
 
 async function injectedComponentClick(index: number) {
@@ -176,5 +182,27 @@ async function injectedComponentClick(index: number) {
   if (componentRef && 'click' in componentRef) {
     (componentRef as any).click?.();
   }
+  showDropdown.value = false;
 }
+
+function toggleDropdownVisibility() {
+  showDropdown.value = !showDropdown.value;
+}
+
+function handleClickOutside(e: MouseEvent) {
+  if (!dropdownRef.value) return
+
+  if (!dropdownRef.value.contains(e.target as Node) && !buttonTriggerRef.value?.contains(e.target as Node)) {
+    showDropdown.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+})
+
 </script>

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

@@ -117,7 +117,7 @@ import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { JsonViewer } from "vue3-json-viewer";
-import "vue3-json-viewer/dist/vue3-json-viewer.css";
+import "vue3-json-viewer/dist/index.css";
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
 
 import { useCoreStore } from '@/stores/core';

package/dist/spa/src/stores/core.ts

@@ -17,6 +17,7 @@ export const useCoreStore = defineStore('core', () => {
   const resource: Ref<AdminForthResourceCommon | null> = ref(null);
   const userData: Ref<UserData | null> = ref(null);
   const isResourceFetching = ref(false);
+  const isInternetError = ref(false);
 
   const resourceColumnsWithFilters = computed(() => {
     if (!resource.value) {
@@ -221,6 +222,10 @@ export const useCoreStore = defineStore('core', () => {
     return userData.value && userFullnameField && userData.value[userFullnameField];
   })
 
+  const userAvatarUrl = computed(() => {
+    return userData.value?.userAvatarUrl || null;
+  });
+
   const isIos = computed(() => {
     return (
     /iPad|iPhone|iPod/.test(navigator.userAgent) ||
@@ -234,6 +239,7 @@ export const useCoreStore = defineStore('core', () => {
     menu, 
     username,
     userFullname,
+    userAvatarUrl,
     getPublicConfig,
     fetchMenuAndResource, 
     getLoginFormConfig,
@@ -251,6 +257,7 @@ export const useCoreStore = defineStore('core', () => {
     resetAdminUser,
     resetResource,
     isResourceFetching,
-    isIos
+    isIos,
+    isInternetError,
   }
 })

package/dist/spa/src/stores/filters.ts

@@ -14,6 +14,11 @@ export const useFiltersStore = defineStore('filters', () => {
         return sort.value;
     }
     const setFilter = (filter: any) => {
+        const index = filters.value.findIndex(f => f.field === filter.field);
+        if (filters.value[index]) {
+            filters.value[index] = filter;
+            return;
+        }
         filters.value.push(filter);
     }
     const setFilters = (f: any) => {