fix: install vite 7 and resolve conflicts with new version

Author: yaroslav8765

adminforth/spa/package-lock.json

@@ -36,7 +36,7 @@
     "@rushstack/eslint-patch": "^1.14.1",
     "@tsconfig/node20": "^20.1.6",
     "@types/node": "^20.19.24",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.2",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.8.1",
     "autoprefixer": "^10.4.21",
@@ -51,7 +51,7 @@
     "sass": "^1.93.3",
     "tailwindcss": "^3.4.18",
     "typescript": "~5.9.3",
-    "vite": "^5.4.21",
+    "vite": "^7.2.4",
     "vue-i18n-extract": "^2.0.7",
     "vue-tsc": "^2.2.12",
     "vue3-json-viewer": "^2.4.1"

adminforth/spa/package.json

@@ -22,13 +22,21 @@
         }"
       >
         <img
-          :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" 
+          :src="imgUrl" 
           :alt="`${ coreStore.config?.brandName } Logo`"
           class="af-logo h-8 me-3" 
           :class="{ 
-            'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)))          }"
+            'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)))
+          }"
+        />
+        <img 
+          :src="iconOnlySidebar" 
+          :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) 
+          }" 
         />
-        <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"
@@ -320,6 +328,14 @@ const coreStore = useCoreStore();
 const opened = ref<(string|number)[]>([]);
 const sidebarAside = ref(null);
 
+const imgUrl = ref<string>('');
+const iconOnlySidebar = ref<string>('');
+
+onMounted(async () => {
+  imgUrl.value = await loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg') as string;
+  iconOnlySidebar.value = await loadFile(coreStore.config?.iconOnlySidebar?.logo || '') as string;
+});
+
 const smQuery = window.matchMedia('(min-width: 640px)');
 const isMobile = ref(!smQuery.matches);
 const iconOnlySidebarEnabled = computed(() => props.forceIconOnly === true || coreStore.config?.iconOnlySidebar?.enabled !== false);

adminforth/spa/src/components/Sidebar.vue

@@ -82,27 +82,28 @@ export function getIcon(icon: string) {
   return resolveComponent(compName);
 }
 
-export const loadFile = (file: string) => {
+export const loadFile = async (file: string) => {
   if (file.startsWith('http')) {
     return file;
   }
-  console.log('file', file);
   let path;
   let baseUrl = '';
+  const files = import.meta.glob('/**/*', { import: 'default' });
+
   if (file.startsWith('@/')) {
-    path = file.replace('@/', '');
-    console.log('path', path);
-    const fileModulePath = `./${path}`;
-    console.log('imort.meta.url', import.meta.url);
-    baseUrl = new URL(`./${path}` ,import.meta.url).href;
-    console.log('baseUrl', baseUrl);
+    path = file.replace('@/', '/src/');
   } else if (file.startsWith('@@/')) {
-    path = file.replace('@@/', '');
-    const fileModulePath = `./${path}`;
-    baseUrl = new URL(`./${path}`, new URL(import.meta.url).origin + new URL(import.meta.url).pathname).href;
+    path = file.replace('@@/', '/src/custom/');
+  } else {
+    path = `./${file}`;
+  }
+  
+  const match = files[path];
+  if (!match) {
+    console.error(`File ${file} not found`);
   } else {
-    const fileModulePath = `./${file}`;
-    baseUrl = new URL(`./${file}`, new URL(import.meta.url).origin + new URL(import.meta.url).pathname).href;
+    const result = await match();
+    baseUrl = typeof result === 'string' ? result : '';
   }
   return baseUrl;
 }

adminforth/spa/src/utils.ts

@@ -1,15 +1,15 @@
 <template>
   <div class="relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-screen h-screen"
     :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
-      'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
+      'background-image': 'url(' + backgroundImage + ')',
       'background-size': 'cover',
       'background-position': 'center',
       'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
     }: {}"
   >
 
     <img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
-      :src="loadFile(coreStore.config?.loginBackgroundImage)"
+      :src="backgroundImage"
       class="position-absolute top-0 left-0 h-screen object-cover w-0"
       :class="{
         '1/2': 'md:w-1/2',
@@ -158,6 +158,7 @@ const backgroundPosition = computed(() => {
   return coreStore.config?.loginBackgroundPosition || '1/2';
 });
 
+const backgroundImage = ref<string>('');
 
 onBeforeMount(() => {
   if (localStorage.getItem('isAuthorized') === 'true') {
@@ -173,6 +174,9 @@ onBeforeMount(() => {
 
 onMounted(async () => {
   coreStore.getLoginFormConfig();
+  if (coreStore.config?.loginBackgroundImage) {
+    backgroundImage.value = await loadFile(coreStore.config?.loginBackgroundImage) as string;
+  }
     if (coreStore.config?.demoCredentials) {
       const [demoUsername, demoPassword] = coreStore.config.demoCredentials.split(':');
       username.value = demoUsername;

adminforth/spa/src/views/LoginView.vue

@@ -92,4 +92,7 @@ export default defineConfig({
       },
     },
   },
+  optimizeDeps: {
+    exclude: ['@vitejs/plugin-vue']
+  }
 })

adminforth/spa/vite.config.ts

@@ -131,7 +131,9 @@ export const admin = new AdminForth({
           customLayout: true,
       }}
     }],
-   
+    iconOnlySidebar: {
+      logo: '@/assets/logo.svg',
+    },   
     vueUsesFile: '@@/vueUses.ts',  // @@ is alias to custom directory,
     brandName: 'New Reality',
     showBrandNameInSidebar: true,

dev-demo/index.ts

@@ -82,9 +82,9 @@ export default {
       //   // return true;
       //   return adminUser.dbUser.email !== "adminforth";
       // },
-      // usersFilterToAllowSkipSetup: (adminUser: AdminUser) => {
-      //   return adminUser.dbUser.email === "adminforth";
-      // },
+      usersFilterToAllowSkipSetup: (adminUser: AdminUser) => {
+        return adminUser.dbUser.email === "adminforth";
+      },
       passkeys: {
         credentialResourceID: "passkeys",
         credentialIdFieldName: "credential_id",