adminforth 2.12.11 → 2.13.0-next.2

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.1748584105",
+    "@iconify-prerendered/vue-flag": "^0.28.1754899047",
     "@iconify-prerendered/vue-flowbite": "^0.28.1754899090",
-    "@unhead/vue": "^1.9.12",
-    "@vueuse/core": "^10.10.0",
+    "@unhead/vue": "^1.11.20",
+    "@vueuse/core": "^10.11.1",
     "apexcharts": "^4.7.0",
-    "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",
+    "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",
     "uuid": "^10.0.0",
-    "vue": "^3.5.12",
+    "vue": "^3.5.22",
     "vue-diff": "^1.2.4",
-    "vue-i18n": "^10.0.5",
-    "vue-router": "^4.3.0",
+    "vue-i18n": "^10.0.8",
+    "vue-router": "^4.6.3",
     "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.8.0",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@rushstack/eslint-patch": "^1.14.1",
+    "@tsconfig/node20": "^20.1.6",
+    "@types/node": "^20.19.24",
+    "@vitejs/plugin-vue": "^6.0.2",
     "@vue/eslint-config-typescript": "^13.0.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",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.33.0",
+    "flag-icons": "^7.5.0",
     "flowbite": "^3.1.2",
-    "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",
+    "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",
     "vue-i18n-extract": "^2.0.7",
-    "vue-tsc": "^2.0.11",
-    "vue3-json-viewer": "^2.2.2"
+    "vue-tsc": "^2.2.12",
+    "vue3-json-viewer": "^2.4.1"
   }
 }

package/dist/spa/src/App.vue

@@ -52,7 +52,7 @@
                 </div>
 
                 <ul class="py-1" role="none">
-                  <li v-for="c in coreStore?.config?.globalInjections?.userMenu || []" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
+                  <li v-for="c in userMenuComponents" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
                     <component 
                       :is="getCustomComponent(c)"
                       :meta="c.meta"
@@ -73,7 +73,7 @@
     </nav>
 
     <Sidebar 
-      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
+      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout && !headerOnlyLayout"
       :sideBarOpen="sideBarOpen"
       :forceIconOnly="route.meta?.sidebarAndHeader === 'preferIconOnly'"
       @hideSidebar="hideSidebar"
@@ -81,12 +81,10 @@
       @sidebarStateChange="handleSidebarStateChange"
     />
 
-    <div class="transition-all duration-300 ease-in-out max-w-[100vw]" 
-      :class="{
-        'sm:ml-18': isSidebarIconOnly,
-        'sm:ml-[264px]': !isSidebarIconOnly,
-        'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
-        'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly
+    <div class="af-content-wrapper transition-all duration-300 ease-in-out max-w-[100vw]" 
+      :style="{
+        marginLeft: headerOnlyLayout ? 0 : isSidebarIconOnly ? '4.5rem' : expandedWidth,
+        maxWidth: headerOnlyLayout ? '100%' : isSidebarIconOnly ? 'calc(100% - 4.5rem)' : `calc(100% - ${expandedWidth})`
       }"
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout">
       <div class="p-0 dark:border-gray-700 mt-14">
@@ -147,12 +145,10 @@
     @apply opacity-100;
   }
 
-  @media (min-width: 640px) {
-    .sm\:ml-18 {
-      margin-left: 4.5rem;
-    }
-    .sm\:max-w-\[calc\(100\%-4\.5rem\)\] {
-      max-width: calc(100% - 4.5rem);
+  @media (max-width: 640px) {
+    .af-content-wrapper {
+      margin-left: 0 !important;
+      max-width: 100% !important;
     }
   }
 
@@ -187,6 +183,7 @@ initFrontedAPI()
 createHead()
 const sideBarOpen = ref(false);
 const defaultLayout = ref(true);
+const headerOnlyLayout = ref(false);
 const route = useRoute();
 const router = useRouter();
 const publicConfigLoaded = ref(false);
@@ -200,8 +197,82 @@ const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'tru
 
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
+const expandedWidth = computed(() => coreStore.config?.iconOnlySidebar?.expandedSidebarWidth || '16.5rem');
+
 const theme = ref('light');
 
+const userMenuComponents = computed(() => {
+  console.log('🪲🆕 userMenuComponents recomputed', JSON.parse(JSON.stringify(coreStore?.config?.globalInjections?.userMenu)));
+  return coreStore?.config?.globalInjections?.userMenu || [];
+})
+
+watch(
+  () => coreStore.config?.globalInjections?.userMenu,
+  (newVal, oldVal) => {
+    // Only log when it becomes undefined (you can relax this if needed)
+    if (newVal === undefined) {
+      const err = new Error('🔍 userMenu changed to undefined');
+      console.groupCollapsed(
+        '%c[TRACE] userMenu changed to undefined',
+        'color: red; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.log('Stack trace:');
+      console.log(err.stack);
+      console.groupEnd();
+    } else {
+      // Optional: log ALL changes for debugging
+      console.groupCollapsed(
+        '%c[DEBUG] userMenu changed',
+        'color: orange; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.groupEnd();
+    }
+  },
+  {
+    deep: false,
+    immediate: false,
+  }
+);
+
+watch(() => coreStore.config?.globalInjections, (v) => {
+  console.log("🔧 globalInjections replaced:", v);
+}, { deep: false });
+
+watch(
+  () => coreStore.config?.globalInjections?.userMenu,
+  (newVal, oldVal) => {
+    if (newVal === undefined) {
+      const err = new Error('🔍 userMenu changed to undefined');
+      console.groupCollapsed(
+        '%c[TRACE] userMenu changed to undefined',
+        'color: red; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.log('Stack trace:');
+      console.log(err.stack);
+      console.groupEnd();
+    } else {
+      console.groupCollapsed(
+        '%c[DEBUG] userMenu changed',
+        'color: orange; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.groupEnd();
+    }
+  },
+  { deep: false, immediate: false }
+);
+
 function hideSidebar(): void {
   sideBarOpen.value = false;
 }
@@ -243,6 +314,8 @@ function handleCustomLayout() {
   } 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;
   }

package/dist/spa/src/adminforth.ts

@@ -1,5 +1,5 @@
-import type { FilterParams, FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
-import type { AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
+import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
+import type { AdminForthFilterOperators, AdminForthResourceColumnCommon, FilterParams } from '@/types/Common';
 import { useToastStore } from '@/stores/toast';
 import { useModalStore } from '@/stores/modal';
 import { useCoreStore } from '@/stores/core';

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

@@ -142,7 +142,6 @@ watch(() => [options.value, chart.value], (value) => {
   if (!value || !chart.value) {
     return;
   }
-  console.log('options changed', options.value);
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {

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

@@ -1,5 +1,5 @@
 <template>
-    <!-- tag form used to reset the input (method .reset() in claer() function) -->
+    <!-- tag form used to reset the input (method .reset() in clear() function) -->
   <form class="flex items-center justify-center w-full"
     @dragover.prevent="dragging = true"
     @dragleave.prevent="dragging = false"
@@ -16,42 +16,88 @@
           'h-32': !props.multiple,
         }"
       >
-          <div class="flex flex-col items-center justify-center pt-5 pb-6">
-              
-            
-              <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-lightDropzoneIcon dark:text-darkDropzoneIcon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-              </svg>
-              <div v-else class="flex items-center justify-center flex-wrap gap-1 w-full mt-1 mb-4">
-                <template v-for="file in selectedFiles">
-                  <p class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon flex items-center gap-1">
-                    <IconFileSolid class="w-5 h-5" />
-                    {{ file.name }} ({{ humanifySize(file.size) }})
-                  </p>
-                </template>
-
+        <input
+          :id="id"
+          type="file"
+          class="hidden"
+          :accept="normalizedExtensions.join(',')"
+          @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
+          :multiple="props.multiple || false"
+        />
+
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+          <svg
+            v-if="!selectedFiles.length"
+            class="w-8 h-8 mb-4 text-lightDropzoneIcon dark:text-darkDropzoneIcon"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 16"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 
+                5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 
+                0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+            />
+          </svg>
+
+          <div
+            v-else
+            class="flex items-center justify-center py-1 flex-wrap gap-2 w-full mt-1 mb-4 px-4"
+          >
+            <template v-for="(file, index) in selectedFiles" :key="index">
+              <div
+                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-md 
+                      flex items-center gap-1 px-2 py-1 group"
+              >
+                <IconFileSolid class="w-4 h-4 flex-shrink-0" />
+                <span
+                  class="truncate max-w-[200px]"
+                  :title="file.name"
+                >
+                  {{ shortenFileName(file.name) }}
+                </span>
+                <span class="text-xs">({{ humanifySize(file.size) }})</span>
+                <button
+                  type="button"
+                  @click.prevent.stop="removeFile(index)"
+                  class="text-lightDropzoneIcon dark:text-darkDropzoneIcon hover:text-red-600 dark:hover:text-red-400 
+                        opacity-70 hover:opacity-100 transition-all"
+                  :title="$t('Remove file')"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
               </div>
-
-              <p v-if="!selectedFiles.length" class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"><span class="font-semibold">{{ $t('Click to upload') }}</span> {{ $t('or drag and drop') }}</p>
-              <p class="text-xs text-lightDropzoneText dark:text-darkDropzoneText">
-                {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
-                <template v-if="props.maxSizeBytes">
-                 (Max size: {{ humanifySize(props.maxSizeBytes) }})
-                </template>
-              </p>
+            </template>
           </div>
-          <input :id="id" type="file" class="hidden" 
-            :accept="props.extensions.join(', ')"
-            @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
-            :multiple="props.multiple || false"
-          />
+
+          <p
+            v-if="!selectedFiles.length"
+            class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"
+          >
+            <span class="font-semibold">{{ $t('Click to upload') }}</span>
+            {{ $t('or drag and drop') }}
+          </p>
+
+          <p class="text-xs text-lightDropzoneText dark:text-darkDropzoneText">
+            {{ normalizedExtensions.join(', ').toUpperCase().replace(/\./g, '') }}
+            <template v-if="props.maxSizeBytes">
+              (Max size: {{ humanifySize(props.maxSizeBytes) }})
+            </template>
+          </p>
+        </div>
       </label>
-    </form> 
+    </form>
 </template>
 
 <script setup lang="ts">
 import { humanifySize } from '@/utils';
-import { ref, type Ref } from 'vue';
+import { ref, type Ref, computed } from 'vue';
 import { IconFileSolid } from '@iconify-prerendered/vue-flowbite';
 import { watch } from 'vue';
 import adminforth from '@/adminforth';
@@ -67,25 +113,53 @@ const emit = defineEmits(['update:modelValue']);
 
 const id = `afcl-dropzone-${Math.random().toString(36).substring(7)}`;
 
+const normalizedExtensions = computed(() => {
+  return props.extensions.map(ext => {
+    const trimmed = ext.trim().toLowerCase();
+    return trimmed.startsWith('.') ? trimmed : `.${trimmed}`;
+  });
+});
+
 const selectedFiles: Ref<{
   name: string,
   size: number,
   mime: string,
 }[]> = ref([]);
 
+const storedFiles: Ref<File[]> = ref([]);
+
+function shortenFileName(name: string, maxLength = 24) {
+  if (name.length <= maxLength) return name;
+
+  const lastDotIndex = name.lastIndexOf('.');
+  const hasExtension = lastDotIndex > 0 && lastDotIndex < name.length - 1;
+  const extension = hasExtension ? name.slice(lastDotIndex + 1) : '';
+  const baseName = hasExtension ? name.slice(0, lastDotIndex) : name;
+
+  const startName = baseName.slice(0, 12);
+  const endName = baseName.split('').reverse().slice(0, 4).reverse().join('');
+  return hasExtension ? `${startName}...${endName}.${extension}` : `${startName}...${endName}`;
+}
+
 watch(() => props.modelValue, (files) => {
-  selectedFiles.value = Array.from(files).map(file => ({
-    name: file.name,
-    size: file.size,
-    mime: file.type,
-  }));
-});
+  if (files && files.length > 0) {
+    selectedFiles.value = Array.from(files).map(file => ({
+      name: file.name,
+      size: file.size,
+      mime: file.type,
+    }));
+    storedFiles.value = Array.from(files);
+  } else {
+    selectedFiles.value = [];
+    storedFiles.value = [];
+  }
+}, { immediate: true });
 
 function doEmit(filesIn: FileList) {
   
   const multiple = props.multiple || false;
   const files = Array.from(filesIn);
-  const allowedExtensions = props.extensions.map(ext => ext.toLowerCase());
+  const allowedExtensions = normalizedExtensions.value;
   const maxSizeBytes = props.maxSizeBytes;
 
   if (!files.length) return;
@@ -96,6 +170,18 @@ function doEmit(filesIn: FileList) {
     const extension = file.name.split('.').pop()?.toLowerCase() || '';
     const size = file.size;
 
+    const isDuplicate = storedFiles.value.some(
+      existingFile => existingFile.name === file.name && existingFile.size === file.size
+    );
+    
+    if (isDuplicate) {
+      adminforth.alert({
+        message: `The file "${file.name}" is already selected.`,
+        variant: 'warning',
+      });
+      return;
+    }
+
     if (!allowedExtensions.includes(`.${extension}`)) {
       adminforth.alert({
         message: `Sorry, the file type .${extension} is not allowed. Please upload a file with one of the following extensions: ${allowedExtensions.join(', ')}`,
@@ -110,26 +196,37 @@ function doEmit(filesIn: FileList) {
       });
       return;
     }
-
+    
     validFiles.push(file);
   });
 
   if (!multiple) {
-    validFiles.splice(1);
+    storedFiles.value = validFiles.slice(0, 1);
+  } else {
+    storedFiles.value = [...storedFiles.value, ...validFiles];
   }
-  selectedFiles.value = validFiles.map(file => ({
+  
+  selectedFiles.value = storedFiles.value.map(file => ({
     name: file.name,
     size: file.size,
     mime: file.type,
   }));
 
-  emit('update:modelValue', validFiles);
+  emit('update:modelValue', storedFiles.value);
+
 }
 
 const dragging = ref(false);
 
+function removeFile(index: number) {
+  storedFiles.value = storedFiles.value.filter((_, i) => i !== index);
+  selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index);
+  emit('update:modelValue', storedFiles.value);
+}
+
 function clear() {
   selectedFiles.value = [];
+  storedFiles.value = [];
   emit('update:modelValue', []);
   const form = document.getElementById(id)?.closest('form');
   form?.reset();