adminforth 2.13.0-next.4 → 2.13.0-next.40

package/dist/spa/package.json

@@ -13,47 +13,47 @@
     "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",
+    "@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

@@ -73,7 +73,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"
@@ -182,8 +182,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 +195,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 +314,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 +338,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,7 +370,6 @@ 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();

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

@@ -17,7 +17,7 @@
       aria-describedby="helper-text-explanation"
       class="afcl-input  inline-flex bg-lightInputBackground border border-lightInputBorder rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0"
-      :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIOSDevice, 'text-sm': !isIOSDevice }"
+      :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIos, 'text-sm': !isIos }"
       :disabled="readonly"
     >
 
@@ -36,7 +36,10 @@
 <script setup lang="ts">
 
 import { ref } from 'vue';
-const isIOSDevice = isIOS();
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore();
+const isIos = coreStore.isIos;
 
 const props = defineProps<{
   type: string,
@@ -53,12 +56,5 @@ defineExpose({
   focus: () => input.value?.focus(),
 });
 
-function isIOS() {
-  return (
-    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-    (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
-  )
-}
-
 </script>
   

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

@@ -265,11 +265,11 @@ onMounted(() => {
 
   watch(() => props.modelValue, (value) => {
     updateFromProps();
-  });
+  }, {deep: true});
 
   watch(() => props.options, () => {
     updateFromProps();
-  });
+  }, { deep: true });
 
   addClickListener();
   

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

@@ -1,7 +1,8 @@
 <template>
   <textarea
     ref="input"
-    class="bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+    class="afcl-textarea bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-md block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+    :class="`${readonly ? 'opacity-50' : ''} ${isIos ? 'text-md' : 'text-sm'}`"
     :placeholder="placeholder"
     :value="modelValue"
     @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
@@ -11,6 +12,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore();
+const isIos = coreStore.isIos;
 
 const props = defineProps<{
   modelValue: string

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

@@ -221,6 +221,12 @@ export const useCoreStore = defineStore('core', () => {
     return userData.value && userFullnameField && userData.value[userFullnameField];
   })
 
+  const isIos = computed(() => {
+    return (
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+  )});
+
 
   return { 
     config,
@@ -245,5 +251,6 @@ export const useCoreStore = defineStore('core', () => {
     resetAdminUser,
     resetResource,
     isResourceFetching,
+    isIos
   }
 })

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

@@ -504,6 +504,7 @@ export interface AdminForthResourceInputCommon {
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           customActionIcons?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableBodyStart?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          tableRowReplace?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**

package/dist/spa/src/utils.ts

@@ -36,7 +36,20 @@ export async function callApi({path, method, body, headers}: {
     if (r.status == 401 ) {
       useUserStore().unauthorize();
       useCoreStore().resetAdminUser();
-      await router.push({ name: 'login' });
+      const currentPath = router.currentRoute.value.path;
+      const homeRoute = router.getRoutes().find(route => route.name === 'home');
+      const homePagePath = (homeRoute?.redirect as string) || '/';
+      let next = '';
+      if (currentPath !== '/login' && currentPath !== homePagePath) {
+        if (Object.keys(router.currentRoute.value.query).length > 0) {
+          next = currentPath + '?' + Object.entries(router.currentRoute.value.query).map(([key, value]) => `${key}=${value}`).join('&');
+        } else {
+          next = currentPath;
+        }
+        await router.push({ name: 'login', query: { next: next } });
+      } else {
+        await router.push({ name: 'login' });
+      }
       return null;
     } 
     return await r.json();
@@ -90,16 +103,17 @@ export const loadFile = (file: string) => {
   let baseUrl = '';
   if (file.startsWith('@/')) {
     path = file.replace('@/', '');
-    baseUrl = new URL(`./${path}`, import.meta.url.split('?')[0]).href;
+    baseUrl = new URL(`./${path}`, import.meta.url).href;
   } else if (file.startsWith('@@/')) {
     path = file.replace('@@/', '');
-    baseUrl = new URL(`./custom/${path}`, import.meta.url.split('?')[0]).href;
+    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
   } else {
-    baseUrl = new URL(`./${file}`, import.meta.url.split('?')[0]).href;
+    baseUrl = new URL(`./${file}`, import.meta.url).href;
   }
   return baseUrl;
 }
 
+
 export function checkEmptyValues(value: any, viewType: 'show' | 'list' ) {
   const config: CoreConfig | {} | null = useCoreStore().config;
   let emptyFieldPlaceholder = '';