adminforth 2.4.0-next.24 → 2.4.0-next.240

package/dist/spa/src/views/SettingsView.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="mt-20 h-full w-full" :class="{ 'hidden': initialTabSet === false }">
+    <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
+      <p>No setting pages configured or still loading...</p>
+    </div>
+      <VerticalTabs v-else ref="VerticalTabsRef" v-model:active-tab="activeTab" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+c.slug]>
+        <div class="flex items-center justify-center whitespace-nowrap w-full px-4 gap-2" @click="setURL(c)">
+          <component v-if="c.icon" :is="getIcon(c.icon)" class="w-5 h-5 group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+          {{ c.pageLabel }}
+        </div>
+      </template>
+
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`${settingPageSlotName(c,i)}-content`" v-slot:[c.slug]>
+        <component 
+          :is="getCustomComponent({file: c.component || ''})"
+          :resource="coreStore.resource"
+          :adminUser="coreStore.adminUser"
+        />
+      </template>
+    </VerticalTabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useCoreStore } from '@/stores/core';
+import { getCustomComponent, getIcon } from '@/utils';
+import { Dropdown } from 'flowbite';
+import adminforth from '@/adminforth';
+import { VerticalTabs } from '@/afcl'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const coreStore = useCoreStore();
+const router = useRouter();
+
+const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
+const dropdownUserButton = ref<HTMLElement | null>(null);
+const VerticalTabsRef = ref();
+const activeTab = ref('');
+const initialTabSet = ref(false);
+
+watch(() => route?.params?.page, (val) => {
+  handleURLChange(val as string | null);
+});
+
+async function initRouter() {
+  await router.isReady();
+  routerIsReady.value = true;
+}
+
+watch(dropdownUserButton, (el) => {
+  if (el) {
+    const dd = new Dropdown(
+      document.querySelector('#dropdown-user') as HTMLElement,
+      document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
+    );
+    adminforth.closeUserMenuDropdown = () => dd.hide();
+  }
+});
+
+onMounted(async () => {
+  if (coreStore.adminUser) {
+    await loadMenu();
+    loginRedirectCheckIsReady.value = true;
+    const routeParamsPage = route?.params?.page;
+    if (!routeParamsPage) {
+      if (coreStore.config?.settingPages?.[0]) {
+        setURL(coreStore.config.settingPages[0]);
+      }
+    } else {
+      handleURLChange(routeParamsPage as string | null);
+    }
+  }
+});
+
+async function loadMenu() {
+  await initRouter();
+  await coreStore.fetchMenuAndResource();
+}
+
+function slugifyString(str: string): string {
+  return str
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-_]/g, '-');
+}
+
+function setURL(item: {
+  pageLabel: string;
+  slug?: string | undefined;
+}) {
+  router.replace({
+    name: 'settings',
+    params: { page: item?.slug }
+  });
+}
+
+function handleURLChange(val: string | null) {
+  let isParamInTabs;
+  for (const c of coreStore?.config?.settingPages || []) {
+    if (c.slug ? c.slug === val : slugifyString(c.pageLabel) === val) {
+      isParamInTabs = true;
+      break;
+    }
+  }
+  if (isParamInTabs) {
+    VerticalTabsRef.value.setActiveTab(val);
+    activeTab.value = val as string;
+    if (!initialTabSet.value) initialTabSet.value = true;
+  } else {
+    if (coreStore.config?.settingPages?.[0]) {
+      setURL(coreStore.config.settingPages[0]);
+    }
+  }
+}
+</script>

package/dist/spa/src/views/ShowView.vue

@@ -4,7 +4,7 @@
       v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
       :is="getCustomComponent(c)"
-      :meta="c.meta"
+      :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -15,7 +15,7 @@
           v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" 
           :key="action.id"
           @click="startCustomAction(action.id)"
-          :disabled="actionLoadingStates[action.id]"
+          :disabled="actionLoadingStates[action.id!]"
           class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         >
           <component 
@@ -28,28 +28,28 @@
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="af-add-new-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-add-new-button flex items-center py-1 px-3 text-sm font-medium text-lightShowViewButtonText focus:outline-none bg-lightShowViewButtonBackground rounded border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-lightShowViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-darkShowViewButtonText dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover rounded-default gap-1"
       >
-        <IconPlusOutline class="w-4 h-4 me-2"/>
+        <IconPlusOutline class="w-4 h-4"/>
         {{ $t('Add new') }}
       </RouterLink>
 
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center af-edit-button py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-edit-button py-1 px-3 text-sm font-medium text-lightShowViewButtonText focus:outline-none bg-lightShowViewButtonBackground rounded-default border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-lightShowViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-darkShowViewButtonText dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover gap-1"
       >
         <IconPenSolid class="w-4 h-4" />
         {{ $t('Edit') }}
       </RouterLink>
 
       <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="flex items-center af-delete-button py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-delete-button py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-lightShowViewButtonBackground  border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-red-500 dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover gap-1"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         {{ $t('Delete') }}
       </button>
 
       <ThreeDotsMenu 
-        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
+        :threeDotsDropdownItems="(coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems as [])"
         :customActions="customActions"
       ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
@@ -57,7 +57,7 @@
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
       :is="getCustomComponent(c)"
-      :meta="c.meta"
+      :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -76,11 +76,11 @@
       v-else-if="coreStore.record"
       class="relative w-full flex flex-col gap-4"
     >
-    <div v-if="!groups.length && allColumns.length">
+    <div v-if="!groups.length && allColumns?.length">
       <ShowTable
-        :columns="allColumns"
         :resource="coreStore.resource"
         :record="coreStore.record"
+        :columns="allColumns as Array<{ name: string; label?: string; components?: any }>"
       />
     </div>
     <template v-else> 
@@ -93,12 +93,12 @@
           :record="coreStore.record"
         />
       </template>
-      <template v-if="otherColumns.length > 0">
+      <template v-if="otherColumns && otherColumns.length > 0">
         <ShowTable
-          :columns="otherColumns"
           groupName="Other Fields"
           :resource="coreStore.resource"
           :record="coreStore.record"
+          :columns="otherColumns as Array<{ name: string; label?: string; components?: any }>"
         />
       </template>
     </template>
@@ -112,8 +112,7 @@
       v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
       :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :column="column"
+      :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -140,6 +139,7 @@ import ShowTable from '@/components/ShowTable.vue';
 import adminforth from "@/adminforth";
 import { useI18n } from 'vue-i18n';
 import { getIcon } from '@/utils';
+import { type AdminForthComponentDeclarationFull, type AdminForthResourceColumnCommon, type FieldGroup } from '@/types/Common.js';
 
 const route = useRoute();
 const router = useRouter();
@@ -147,62 +147,65 @@ const loading = ref(true);
 const { t } = useI18n();
 const coreStore = useCoreStore();
 
-const actionLoadingStates = ref({});
+const actionLoadingStates = ref<Record<string, boolean>>({});
 
 const customActions = computed(() => {
-  return coreStore.resource?.options?.actions?.filter(a => a.showIn?.showThreeDotsMenu) || [];
+  return coreStore.resource?.options?.actions?.filter((a: any) => a.showIn?.showThreeDotsMenu) || [];
 });
 
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
-    resourceId: route.params.resourceId
+    resourceId: route.params.resourceId as string,
   });
   initThreeDotsDropdown();
   await coreStore.fetchRecord({
-    resourceId: route.params.resourceId, 
-    primaryKey: route.params.primaryKey,
+    resourceId: route.params.resourceId as string, 
+    primaryKey: route.params.primaryKey as string,
     source: 'show',
   });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+  if(coreStore.resourceOptions){
+    checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+  }
   loading.value = false;
 });
 
 const groups = computed(() => {
   let fieldGroupType;
-  if (coreStore.resource.options?.showFieldGroups) {
-    fieldGroupType = coreStore.resource.options.showFieldGroups;
-  } else if (coreStore.resource.options?.showFieldGroups === null) {
-    fieldGroupType = [];
-  } else {
-    fieldGroupType = coreStore.resource.options?.fieldGroups;
+  if (coreStore.resource) {
+    if (coreStore.resource.options?.showFieldGroups) {
+      fieldGroupType = coreStore.resource.options.showFieldGroups;
+    } else if (coreStore.resource.options?.showFieldGroups === null) {
+      fieldGroupType = [];
+    } else {
+      fieldGroupType = coreStore.resource.options?.fieldGroups;
+    }
   }
+  const activeGroups: typeof fieldGroupType | [] = fieldGroupType ?? [];
 
-  const activeGroups = fieldGroupType ?? [];
-
-  return activeGroups.map(group => ({
+  return activeGroups.map((group: FieldGroup) => ({
     ...group,
-    columns: coreStore.resource.columns.filter(
-      col => group.columns.includes(col.name) && col.showIn.show
+    columns: coreStore.resource?.columns.filter(
+      col => group.columns.includes(col.name) && col.showIn?.show
     ),
   }));
 });
 
 const allColumns = computed(() => {
-  return coreStore.resource.columns.filter(col => col.showIn.show);
+  return coreStore.resource?.columns.filter(col => col.showIn?.show);
 });
 
 const otherColumns = computed(() => {
   const groupedColumnNames = new Set(
-    groups.value.flatMap(group => group.columns.map(col => col.name))
+    groups.value.flatMap(group => group.columns.map((col: AdminForthResourceColumnCommon) => col.name))
   );
 
-  return coreStore.resource.columns.filter(
-    col => !groupedColumnNames.has(col.name) && col.showIn.show
+  return coreStore.resource?.columns.filter(
+    col => !groupedColumnNames.has(col.name) && col.showIn?.show
   );
 });
 
-async function deleteRecord(row) {
+async function deleteRecord() {
   const data = await adminforth.confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
@@ -231,7 +234,7 @@ async function deleteRecord(row) {
     
 }
 
-async function startCustomAction(actionId) {  
+async function startCustomAction(actionId: string) {  
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
@@ -263,8 +266,8 @@ async function startCustomAction(actionId) {
   
   if (data?.ok) {
     await coreStore.fetchRecord({
-      resourceId: route.params.resourceId, 
-      primaryKey: route.params.primaryKey,
+      resourceId: route.params.resourceId as string, 
+      primaryKey: route.params.primaryKey as string,
       source: 'show',
     });
 
@@ -281,4 +284,21 @@ async function startCustomAction(actionId) {
   }
 }
 
+adminforth.show.refresh = () => {
+  (async () => {
+    try {
+      loading.value = true;
+      await coreStore.fetchRecord({
+        resourceId: String(route.params.resourceId),
+        primaryKey: String(route.params.primaryKey),
+        source: 'show',
+      });
+    } catch (e) {
+      showErrorTost((e as Error).message);
+    } finally {
+      loading.value = false;
+    }
+  })();
+}
+
 </script>

package/dist/spa/src/websocket.ts

@@ -1,8 +1,13 @@
 
 const subscriptions: { [topic: string]: ((data: any) => void)[] } = {};
+
+interface ExtendedWebSocket extends WebSocket {
+  connected?: boolean;
+}
+
 const state: {
   status: 'connecting' | 'connected' | 'disconnected';
-  ws: WebSocket | null;
+  ws: ExtendedWebSocket | null;
 } = {
   status: 'connecting',
   ws: null

package/dist/spa/tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

package/dist/spa/vite.config.ts

@@ -1,18 +1,60 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import portfinder from 'portfinder';
+import { Plugin } from 'vite';
+import tailwindcss from 'tailwindcss';
+
 
 /**
  * Find the next available port after a specified port.
  * @param {number} startPort - The starting port to check.
  * @returns {Promise<number>} - A promise that resolves with the next available port.
  */
-async function getNextAvailablePort(startPort) {
+async function getNextAvailablePort(startPort: number | undefined) {
   return await portfinder.getPortPromise({ port: startPort });
 };
 
+function ignoreTailwindErrors(): Plugin {
+  return {
+    name: 'ignore-tailwind-errors',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const originalWrite = res.write;
+        res.write = function(chunk) {
+          if (typeof chunk === 'string' && chunk.includes('tailwind')) {
+            return true;
+          }
+          return originalWrite.call(this, chunk);
+        };
+        next();
+      });
+    },
+    config(config, { command }) {
+      if (command === 'build') {
+        // Override PostCSS config for build
+        config.css = config.css || {};
+        config.css.postcss = {
+          plugins: [
+            {
+              postcssPlugin: 'ignore-tailwind-errors',
+              Once(root, helpers) {
+                try {
+                  return tailwindcss()(root, helpers);
+                } catch (error: any) {
+                  console.warn('TailwindCSS warning ignored:', error.message);
+                  return;
+                }
+              }
+            }
+          ]
+        };
+      }
+    }
+  };
+}
+
+
 const appPort = await getNextAvailablePort(5173);
 const hmrPort = await getNextAvailablePort(5273);
 console.log(`SPA port: ${appPort}. HMR port: ${hmrPort}`);
@@ -27,6 +69,7 @@ export default defineConfig({
     },
   },
   plugins: [
+    //ignoreTailwindErrors(),
     vue(),
   ],
   resolve: {