adminforth 2.4.0-next.21 → 2.4.0-next.211

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+  <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-size': 'cover',
       'background-position': 'center',
-      'background-blend-mode': 'darken'
+      'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
     }: {}"
   >
     
@@ -27,7 +27,7 @@
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
-            <div class="af-login-modal-content relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+            <div class="af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" :class=" { 'rounded-b-none  overflow-hidden': error } ">
                 <!-- Modal header -->
                 <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
 
@@ -39,7 +39,7 @@
                         :meta="c.meta"
                       />
                     </template>
-                    <h3 v-else class="text-xl font-semibold text-gray-900 dark:text-white">
+                    <h3 v-else class="text-xl font-semibold text-lightLoginViewText dark:text-darkLoginViewTextColor">
                       {{ $t('Sign in to') }} {{ coreStore.config?.brandName }}
                     </h3>
                 </div>
@@ -47,7 +47,7 @@
                 <div class="af-login-modal-body p-4 md:p-5">
                     <form class="space-y-4" @submit.prevent>
                         <div>
-                            <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
+                            <label for="username" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
                             <Input 
                               v-model="username"
                               autocomplete="username"  
@@ -55,22 +55,20 @@
                               name="username" 
                               id="username" 
                               ref="usernameInput"
-                              oninput="setCustomValidity('')"
                               @keydown.enter="passwordInput.focus()"
                               class="w-full"
                               placeholder="name@company.com" required />
                         </div>
                         <div class="">
-                            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your password') }}</label>
+                            <label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your password') }}</label>
                             <Input 
                               v-model="password"
                               ref="passwordInput"
                               autocomplete="current-password"
-                              oninput="setCustomValidity('')"
                               @keydown.enter="login"
                               :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
                               <template #rightIcon>
-                                <button type="button" @click="showPw = !showPw" class="text-gray-400 dark:text-gray-300">
+                                <button type="button" @click="showPw = !showPw" class="text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
                                   <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
                                   <IconEyeSlashSolid class="w-5 h-5" v-else />
                                 </button>
@@ -92,34 +90,25 @@
                           v-for="c in coreStore?.config?.loginPageInjections?.underInputs || []"
                           :is="getCustomComponent(c)"
                           :meta="c.meta"
+                          @update:disableLoginButton="setDisableLoginButton($event)"
                         />
-
-                        <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-                          <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                          </svg>
-                          <span class="sr-only">{{ $t('Info') }}</span>
-                          <div>
-                            {{ error }}
-                          </div>
-                        </div>
-
-                        <div v-if="coreStore.config?.loginPromptHTML"
-                          class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
+                        
+                        <div v-if="loginPromptHTML"
+                          class="flex items-center p-4 mb-4 text-sm text-lightLoginViewPromptText rounded-lg bg-lightLoginViewPromptBackground dark:bg-darkLoginViewPromptBackground dark:text-darkLoginViewPromptText" role="alert"
                         >
                           <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                             <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                           </svg>
                           <span class="sr-only">{{ $t('Info') }}</span>
-                          <div v-html="coreStore.config?.loginPromptHTML"></div>
+                          <div v-html="loginPromptHTML"></div>
                         </div>
-                        <Button @click="login" :loader="inProgress" :disabled="inProgress" class="w-full">
+                        <Button @click="login" :loader="inProgress" :disabled="inProgress || disableLoginButton" class="w-full">
                           {{ $t('Login to your account') }}
                         </Button>
                     </form>
-
                 </div>
             </div>
+            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-9" />
         </div>
     </div> 
 
@@ -127,7 +116,7 @@
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 
 import { getCustomComponent } from '@/utils';
 import { onBeforeMount, onMounted, ref, computed } from 'vue';
@@ -138,6 +127,7 @@ import { callAdminForthApi, loadFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { Button, Checkbox, Input } from '@/afcl';
 import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/ErrorMessage.vue';
 
 const { t } = useI18n();
 
@@ -150,18 +140,28 @@ const password = ref('');
 const route = useRoute();
 const router = useRouter();
 const inProgress = ref(false);
-
+const loginPromptHTML = ref()
 const coreStore = useCoreStore();
 const user = useUserStore();
 
 const showPw = ref(false);
 
 const error = ref(null);
+const disableLoginButton = ref(false);
 
 const backgroundPosition = computed(() => {
   return coreStore.config?.loginBackgroundPosition || '1/2';
 });
 
+
+async function getLoginFormConfig() {
+  const response = await callAdminForthApi({
+    path: '/get_login_form_config',
+    method: 'GET',
+  });
+  loginPromptHTML.value = response.loginPromptHTML;
+}
+
 onBeforeMount(() => {
   if (localStorage.getItem('isAuthorized') === 'true') {
     // if route has next param, redirect
@@ -175,6 +175,7 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
+  getLoginFormConfig();
     if (coreStore.config?.demoCredentials) {
       const [demoUsername, demoPassword] = coreStore.config.demoCredentials.split(':');
       username.value = demoUsername;
@@ -185,16 +186,6 @@ onMounted(async () => {
 
 
 async function login() {
-  
-  if (!username.value) {
-    usernameInput.value.setCustomValidity(t('Please fill out this field.'));
-    return;
-  }
-  if (!password.value) {
-    passwordInput.value.setCustomValidity(t('Please fill out this field.'));
-    return;
-  }
-
   if (inProgress.value) {
     return;
   }
@@ -220,5 +211,8 @@ async function login() {
 
 }
 
+function setDisableLoginButton(value: boolean) {
+  disableLoginButton.value = value;
+}
 
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex" 
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="af-resource-parent p-4 flex" 
     :class="limitHeightToPage ? 'h-[calc(100dvh-3.5rem)]': undefined"
   >
     <RouterView/>
@@ -33,7 +33,7 @@ const limitHeightToPage = computed(() => {
   }
   const listPageInjects = coreStore.resource.options.pageInjections.list;
   
-  for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
+  for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.beforeActionButtons, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
     if (pi) {
       for (const piItem of pi) {
         if (!piItem.meta?.thinEnoughToShrinkTable) {

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="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 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 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: {