adminforth 3.35.1 → 4.0.1

package/dist/spa/src/utils/utils.ts

@@ -4,7 +4,6 @@ import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull
 import router from "../router";
 import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
-import { Dropdown } from 'flowbite';
 import adminforth, { useAdminforth } from '../adminforth';
 import DOMPurify  from 'dompurify'
 import debounce from 'debounce';
@@ -241,22 +240,22 @@ export function getIcon(icon: string) {
   return resolveComponent(compName);
 }
 
+// URLs of the files an app config references as '@/...' (SPA src) or '@@/...' (app custom folder, copied to src/custom).
+// The glob is explicit: Vite turns a template in new URL(`../${path}`, import.meta.url) into a one-level glob,
+// which misses files in nested folders like '@@/assets/logo.svg'.
+const assetUrls = import.meta.glob<string>(
+  ['../**', '!../**/*.{vue,ts,tsx,js,mjs,cjs,css,scss,sass,json,yaml,yml,md,html}'],
+  { eager: true, query: '?url', import: 'default' },
+);
+
 export const loadFile = (file: string) => {
   if (file.startsWith('http')) {
     return file;
   }
-  let path;
-  let baseUrl = '';
-  if (file.startsWith('@/')) {
-    path = file.replace('@/', '');
-    baseUrl = new URL(`../${path}`, import.meta.url).href;
-  } else if (file.startsWith('@@/')) {
-    path = file.replace('@@/', '');
-    baseUrl = new URL(`../custom/${path}`, import.meta.url).href;
-  } else {
-    baseUrl = new URL(`../${file}`, import.meta.url).href;
+  if (file.startsWith('@@/')) {
+    return assetUrls[`../custom/${file.slice('@@/'.length)}`];
   }
-  return baseUrl;
+  return assetUrls[`../${file.replace('@/', '')}`];
 }
 
 
@@ -288,21 +287,6 @@ export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
   }
 }
 
-export function initThreeDotsDropdown() {
-  const threeDotsDropdown: HTMLElement | null = document.querySelector('#listThreeDotsDropdown');
-  if (threeDotsDropdown) {
-    // this resource has three dots dropdown
-    const dd = new Dropdown(
-      threeDotsDropdown, 
-      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement,
-      { placement: 'bottom-end' }
-    );
-    adminforth.list.closeThreeDotsDropdown = () => {
-      dd.hide();
-    }
-  }
-}
-
 export function applyRegexValidation(value: any, validation: ValidationObject[] | undefined) {
 
   if ( validation?.length ) {
@@ -350,18 +334,7 @@ export function verySimpleHash(str: string): string {
   return `${str.split('').reduce((a, b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)}`;
 }
 
-export function humanifySize(size: number) {
-  if (!size) {
-    return '';
-  }
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let i = 0
-  while (size >= 1024 && i < units.length - 1) {
-    size /= 1024
-    i++
-  }
-  return `${size.toFixed(1)} ${units[i]}`
-}
+export { humanifySize } from '../afcl/fileSize';
 
 export function protectAgainstXSS(value: string) {
   return DOMPurify.sanitize(value, {

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

@@ -1,8 +1,8 @@
 <template>
   <div class="w-full mt-[36px]">
-    <div class="w-full border dark:border-darkFormBorder border-gray-200 rounded-lg overflow-hidden shadow-resourseFormShadow dark:shadow-darkResourseFormShadow bg-white dark:bg-darkForm">
+    <div class="w-full border dark:border-darkFormBorder border-lightFormBorder rounded-lg overflow-hidden shadow-resourseFormShadow dark:shadow-darkResourseFormShadow bg-lightForm dark:bg-darkForm">
       
-      <div class="flex px-6 items-center border-b border-gray-200 dark:border-darkFormBorder bg-lightFormHeading dark:bg-darkFormHeading h-[40px]">
+      <div class="flex px-5 items-center border-b border-lightFormBorder dark:border-darkFormBorder bg-lightFormHeading dark:bg-darkFormHeading h-[40px]">
         <div class="w-[208px] flex-shrink-0 pr-6 text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText font-bold">
           {{ $t('Field') }}
         </div>
@@ -14,7 +14,7 @@
       <div
         v-for="i in 10"
         :key="i"
-        class="flex items-center bg-lightForm dark:bg-darkForm border-b border-gray-100 dark:border-darkFormBorder h-[75px]"
+        class="flex items-center bg-lightForm dark:bg-darkForm border-b border-lightFormBorder dark:border-darkFormBorder h-[58px]"
       >
         <div class="w-[208px] flex-shrink-0 px-6 flex items-center">
           <Skeleton class="w-24 h-[10px]" />

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

@@ -13,7 +13,7 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <Button @click="() => {cancelButtonClicked = true; $router.back()}"
-        class="af-cancel-button h-[2.125rem] px-3 mr-2"
+        class="af-cancel-button h-[2.125rem] px-3"
         variant="secondary"
       >
         {{ $t('Cancel') }}
@@ -21,11 +21,11 @@
       <Button  
         @click="() => saveRecord()"
         class="af-save-button h-[2.125rem] px-3 text-lightCreateViewSaveButtonText hover:text-lightCreateViewSaveButtonTextHover dark:text-darkCreateViewSaveButtonText dark:hover:text-darkCreateViewSaveButtonTextHover"
-        variant="secondary"
+        variant="primary"
         :disabled="saving || (validatingMode && !isValid) || resourceFormRef?.isValidating"
       > 
         <Spinner v-if="saving || resourceFormRef?.isValidating" class="w-4 h-4" />
-        <IconFloppyDiskSolid v-else class="w-4 h-4" />
+        <IconSave v-else class="w-4 h-4" />
         {{ $t('Save') }}
       </Button>
 
@@ -79,8 +79,8 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, formatComponent, atob_function } from '@/utils';
-import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, formatComponent, atob_function } from '@/utils';
+import { IconSave } from '@iconify-prerendered/vue-lucide';
 import { onMounted, onBeforeMount, onBeforeUnmount, ref  } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
@@ -192,7 +192,6 @@ onMounted(async () => {
   record.value = initialValues.value;
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions!.allowedActions,'create');
-  initThreeDotsDropdown();
 });
 
 async function saveRecord() {

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

@@ -12,7 +12,7 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <Button @click="() => {cancelButtonClicked = true; $router.back()}"
-        class="h-[2.125rem] px-3 mr-2 text-lightEditViewButtonText dark:text-darkEditViewButtonText"
+        class="h-[2.125rem] px-3 text-lightEditViewButtonText dark:text-darkEditViewButtonText"
         variant="secondary"
       >
         {{ $t('Cancel') }}
@@ -21,10 +21,10 @@
         @click="() => saveRecord()"
         class="h-[2.125rem] px-3 text-sm text-lightEditViewSaveButtonText hover:text-lightEditViewSaveButtonTextHover dark:text-darkEditViewSaveButtonText dark:hover:text-darkEditViewSaveButtonTextHover"
         :disabled="saving || (validatingMode && !isValid) || resourceFormRef?.isValidating"
-        variant="secondary"
+        variant="primary"
       >
         <Spinner v-if="saving || resourceFormRef?.isValidating" class="w-4 h-4" />
-        <IconFloppyDiskSolid v-else class="w-4 h-4" />
+        <IconSave v-else class="w-4 h-4" />
         {{ $t('Save') }}
       </Button>
 
@@ -77,8 +77,8 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord, generateMessageHtmlForRecordChange, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditViewGuard } from '@/utils';
-import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, compareOldAndNewRecord, generateMessageHtmlForRecordChange, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditViewGuard } from '@/utils';
+import { IconSave } from '@iconify-prerendered/vue-lucide';
 import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
@@ -170,7 +170,6 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId as string 
   });
-  initThreeDotsDropdown();
 
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId as string,

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

@@ -12,7 +12,7 @@
     </Teleport>
 
     <component 
-      v-if="!coreStore.isResourceFetching && !initInProcess"
+      v-if="isResourceReady"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs as AdminForthComponentDeclaration[] || []"
       :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
@@ -21,125 +21,122 @@
     />
 
     <BreadcrumbsWithButtons>
-      <component 
-        v-if="!coreStore.isResourceFetching && !initInProcess"
-        v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeActionButtons as AdminForthComponentDeclaration[] || []"
-        :is="getCustomComponent(formatComponent(c))"
-        :meta="(c as AdminForthComponentDeclarationFull).meta"
-        :resource="coreStore.resource"
-        :adminUser="coreStore.adminUser"
-        :checkboxes="checkboxes"
-        :clearCheckboxes="clearCheckboxes"
-      />
-      <Button
-        @click="()=>{checkboxes = []}"
-        v-if="checkboxes.length"
-        data-tooltip-target="tooltip-remove-all"
-        class="h-[2.125rem] px-2.5"
-        variant="secondary"
-      >
-          <Tooltip>
-            <IconBanOutline class="w-5 h-5 "/>
-              <template #tooltip >
-                  Remove selection
-              </template>
-          </Tooltip>
-      </Button>
-
-      <div 
-        v-if="checkboxes.length"
-        v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
-      >
+      <template v-if="isResourceReady">
+        <component 
+          v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeActionButtons as AdminForthComponentDeclaration[] || []"
+          :is="getCustomComponent(formatComponent(c))"
+          :meta="(c as AdminForthComponentDeclarationFull).meta"
+          :resource="coreStore.resource"
+          :adminUser="coreStore.adminUser"
+          :checkboxes="checkboxes"
+          :clearCheckboxes="clearCheckboxes"
+        />
         <Button
-          v-if="!action.showInThreeDotsDropdown"
-          :key="action.id"
-          @click="startBulkActionInner(action.id!)"
-          class="h-[2.125rem] px-2.5"
-          :class="action.buttonCustomCssClass || ''"
+          @click="()=>{checkboxes = []}"
+          v-if="checkboxes.length"
+          data-tooltip-target="tooltip-remove-all"
           variant="secondary"
+          iconOnly
         >
-          <component
-            v-if="action.icon && !bulkActionLoadingStates[action.id!]"
-            :is="getIcon(action.icon)"
-            class="w-5 h-5 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"></component>
-            <Spinner
-              v-if="bulkActionLoadingStates[action.id!]"
-              class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
-            />
-          {{ `${action.label} (${checkboxes.length})` }}
-          <div v-if="action.badge" class="text-white bg-gradient-to-r from-purple-500 
-          via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none
-           focus:ring-purple-300 dark:focus:ring-purple-800 
-            font-medium rounded-default text-xs px-1 ml-1 text-center ">
-            {{ action.badge }}            
-          </div>
+            <Tooltip>
+              <IconBan class="w-4 h-4"/>
+                <template #tooltip >
+                    Remove selection
+                </template>
+            </Tooltip>
         </Button>
-      </div>
-      <div
-        v-if="checkboxes.length"
-        v-for="(action,i) in coreStore.resource?.options?.actions?.filter(a => a.showIn?.bulkButton)" 
-      >
+
+        <div 
+          v-if="checkboxes.length"
+          v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
+        >
+          <Button
+            v-if="!action.showInThreeDotsDropdown"
+            :key="action.id"
+            @click="startBulkActionInner(action.id!)"
+            class="h-[2.125rem] px-2.5"
+            :class="action.buttonCustomCssClass || ''"
+            variant="secondary"
+          >
+            <component
+              v-if="action.icon && !bulkActionLoadingStates[action.id!]"
+              :is="getIcon(action.icon)"
+              class="w-4 h-4 transition duration-75"></component>
+              <Spinner
+                v-if="bulkActionLoadingStates[action.id!]"
+                class="w-4 h-4 text-lightSkeletonBackgroundColor dark:text-darkSkeletonBackgroundColor fill-lightListTableText dark:fill-darkListTableText"
+              />
+            {{ `${action.label} (${checkboxes.length})` }}
+            <div v-if="action.badge" class="inline-flex items-center h-[1.125rem] px-1.5 ml-1 rounded-full bg-purple-600 text-white text-[11px] font-semibold">
+              {{ action.badge }}
+            </div>
+          </Button>
+        </div>
+        <div
+          v-if="checkboxes.length"
+          v-for="(action,i) in coreStore.resource?.options?.actions?.filter(a => a.showIn?.bulkButton)" 
+        >
+          <Button
+            :key="action.id"
+            @click="startCustomBulkActionInner(action.id!)"
+            class="h-[2.125rem] px-2.5"
+            variant="secondary"
+          >
+            <component
+              v-if="action.icon && !customActionLoadingStates[action.id!]"
+              :is="getIcon(action.icon)"
+              class="w-4 h-4 transition duration-75"></component>
+              <Spinner
+                v-if="customActionLoadingStates[action.id!]"
+                class="w-4 h-4 text-lightSkeletonBackgroundColor dark:text-darkSkeletonBackgroundColor fill-lightListTableText dark:fill-darkListTableText"
+              />
+              {{ `${action.name} (${checkboxes.length})` }}
+          </Button>
+        </div>
+
+        <LinkButton v-if="coreStore.resource?.options?.allowedActions?.create"
+          :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
+          class="af-create-button h-[2.125rem] px-2.5"
+        >
+          <IconPlus class="w-4 h-4"/>
+          <span>{{ $t('Create') }}</span>
+        </LinkButton>
+
         <Button
-          :key="action.id"
-          @click="startCustomBulkActionInner(action.id!)"
-          class="h-[2.125rem] px-2.5"
+          class="af-filter-button h-[2.125rem] px-3 py-3"
+          @click="()=>{filtersShow = !filtersShow}"
+          v-if="coreStore.resource?.options?.allowedActions?.filter"
           variant="secondary"
         >
-          <component
-            v-if="action.icon && !customActionLoadingStates[action.id!]"
-            :is="getIcon(action.icon)"
-            class="w-5 h-5 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"></component>
-            <Spinner
-              v-if="customActionLoadingStates[action.id!]"
-              class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
-            />
-            {{ `${action.name} (${checkboxes.length})` }}
-        </Button>
-      </div>
-
-      <LinkButton v-if="coreStore.resource?.options?.allowedActions?.create"
-        :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="af-create-button h-[2.125rem] px-2.5"
-      >
-        <IconPlusOutline class="w-4 h-4"/>
-        <span>{{ $t('Create') }}</span>
-      </LinkButton>
-
-      <Button
-        class="af-filter-button h-[2.125rem] px-3 py-3"
-        @click="()=>{filtersShow = !filtersShow}"
-        v-if="coreStore.resource?.options?.allowedActions?.filter"
-        variant="secondary"
-      >
-        <IconFilterOutline class="w-4 h-4"/>
-        <span>{{ $t('Filter') }}</span>
-        <div v-if="filtersStore.visibleFiltersCount" class="flex items-center gap-1 ms-1">
-          <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
-              {{ filtersStore.visibleFiltersCount }}
-          </span>
+          <IconListFilter class="w-4 h-4"/>
+          <span>{{ $t('Filter') }}</span>
+          <div v-if="filtersStore.visibleFiltersCount" class="flex items-center gap-1 ms-1">
+            <span class="inline-flex items-center justify-center min-w-[1.125rem] h-[1.125rem] px-1 rounded-full text-[11px] font-semibold tabular-nums bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast">
+                {{ filtersStore.visibleFiltersCount }}
+            </span>
           
-          <div 
-            @click.stop="filtersStore.clearFilters()"
-            class="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
-          >
-            <IconCloseOutline class="w-4 h-4 text-red-500" />
+            <div 
+              @click.stop="filtersStore.clearFilters()"
+              class="p-0.5 rounded text-lightInputIconColor hover:text-lightInputText hover:bg-lightButtonGroupBackgroundHover dark:text-darkInputIconColor dark:hover:text-darkInputText dark:hover:bg-darkButtonGroupBackgroundHover transition-colors"
+            >
+              <IconX class="w-3.5 h-3.5" />
+            </div>
           </div>
-        </div>
-      </Button>
-
-      <ThreeDotsMenu 
-        v-if="!coreStore.isResourceFetching"
-        :threeDotsDropdownItems="(coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems as [])"
-        :bulkActions="coreStore.resource?.options?.bulkActions"
-        :checkboxes="checkboxes"
-        @startBulkAction="startBulkActionInner"
-        :updateList="getListInner"
-        :clearCheckboxes="clearCheckboxes"
-        ></ThreeDotsMenu>
+        </Button>
+
+        <ThreeDotsMenu 
+          :threeDotsDropdownItems="(coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems as [])"
+          :bulkActions="coreStore.resource?.options?.bulkActions"
+          :checkboxes="checkboxes"
+          @startBulkAction="startBulkActionInner"
+          :updateList="getListInner"
+          :clearCheckboxes="clearCheckboxes"
+          ></ThreeDotsMenu>
+      </template>
     </BreadcrumbsWithButtons>
 
     <component 
-      v-if="!coreStore.isResourceFetching && !initInProcess"
+      v-if="isResourceReady"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs as AdminForthComponentDeclaration[] || []"
       :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
@@ -209,18 +206,18 @@ import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, currentQuery, getIcon, setQuery, formatComponent, executeCustomBulkAction } from '@/utils';
 import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { getCustomComponent, initThreeDotsDropdown, getList, startBulkAction } from '@/utils';
+import { getCustomComponent, getList, startBulkAction } from '@/utils';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { Tooltip, Spinner, Button, LinkButton } from '@/afcl'
 import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
 import { useI18n } from 'vue-i18n';
 
 import {
-  IconBanOutline,
-  IconFilterOutline,
-  IconPlusOutline,
-  IconCloseOutline
-} from '@iconify-prerendered/vue-flowbite';
+  IconBan,
+  IconListFilter,
+  IconPlus,
+  IconX
+} from '@iconify-prerendered/vue-lucide';
 
 import Filters from '@/components/Filters.vue';
 import { useAdminforth } from '@/adminforth';
@@ -233,6 +230,9 @@ const { t } = useI18n();
 
 const route = useRoute();
 
+// previous resource stays in the store until the new one is applied, its injections must not render here
+const isResourceReady = computed(() => coreStore.resource?.resourceId === route.params.resourceId);
+
 const page = ref(1);
 const columnsMinMax = ref({});
 const sort = ref();
@@ -524,7 +524,6 @@ watch(() => filtersStore.filters, async (to, from) => {
 onMounted(async () => {
   initInProcess = true;
   await init();
-  initThreeDotsDropdown();
   initInProcess = false;
 });
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-screen h-screen"
+  <div class="relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-full h-screen"
     :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
@@ -76,8 +76,8 @@
                               :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
                               <template #rightIcon>
                                 <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 />
+                                  <IconEye class="w-4 h-4" v-if="!showPw" />
+                                  <IconEyeOff class="w-4 h-4" v-else />
                                 </button>
                               </template>
                             </Input>
@@ -142,7 +142,7 @@ import { getCustomComponent, formatComponent } from '@/utils';
 import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
-import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconEye, IconEyeOff } from '@iconify-prerendered/vue-lucide';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter, useRoute } from 'vue-router';
 import { Button, Checkbox, Input, Spinner } from '@/afcl';

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

@@ -15,10 +15,10 @@
         :to="nextRecordRoute ?? $route"
         @click="handleNextClick()"
         :class="!nextRecordRoute ? 'opacity-50 pointer-events-none cursor-not-allowed' : ''"
-        class="h-[2.125rem] text-lightListViewButtonText dark:text-darkListViewButtonText px-3 py-3"
+        class="h-[2.125rem] text-lightListViewButtonText dark:text-darkListViewButtonText px-3"
         variant="secondary"
       >
-        <Spinner v-if="isFetchingNextPage" class="w-4 h-4 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300" />
+        <Spinner v-if="isFetchingNextPage" class="w-4 h-4 text-lightSkeletonBackgroundColor dark:text-darkSkeletonBackgroundColor fill-lightListTableText dark:fill-darkListTableText" />
         {{ $t('Next') }}
       </LinkButton>
 
@@ -40,11 +40,11 @@
               <component 
                 v-if="action.icon && !actionLoadingStates[action.id!]" 
                 :is="getIcon(action.icon)" 
-                class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
+                class="w-4 h-4 text-lightInputIconColor dark:text-darkInputIconColor"
               />
               <Spinner
                 v-if="actionLoadingStates[action.id!]"
-                class="w-5 h-5 me-2 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                class="w-4 h-4 text-lightSkeletonBackgroundColor dark:text-darkSkeletonBackgroundColor fill-lightListTableText dark:fill-darkListTableText"
               />
               {{ action.name }}
             </Button>
@@ -56,7 +56,7 @@
         class="af-add-new-button h-[2.125rem] px-2.5"
         variant="secondary"
       >
-        <IconPlusOutline class="w-4 h-4"/>
+        <IconPlus class="w-4 h-4"/>
         {{ $t('Add new') }}
       </LinkButton>
 
@@ -64,15 +64,15 @@
         class="h-[2.125rem] af-edit-button px-2.5"
         variant="secondary"
       >
-        <IconPenSolid class="w-4 h-4" />
+        <IconPencil class="w-4 h-4" />
         {{ $t('Edit') }}
       </LinkButton>
 
       <Button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="h-[2.125rem] af-delete-button px-3 text-red-600 hover:text-red-700 focus:z-10 dark:text-red-500 dark:hover:text-darkShowViewButtonTextHover"
+        class="h-[2.125rem] af-delete-button px-3 text-lightInputErrorColor hover:text-lightInputErrorColor focus-visible:z-10 dark:text-darkInputErrorColor dark:hover:text-darkInputErrorColor"
         variant="secondary"  
       >
-        <IconTrashBinSolid class="w-4 h-4" />
+        <IconTrash2 class="w-4 h-4" />
         {{ $t('Delete') }}
       </Button>
 
@@ -100,18 +100,18 @@
     >
       <div 
         v-if="groups && groups.length > 0" 
-        class="text-md font-semibold px-6 py-3 flex flex-1 items-center bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground dark:text-darkShowTableHeadingText border-b border-lightShowTableBodyBorder dark:border-darkShowTableBodyBorder"
+        class="text-sm font-semibold px-5 py-3 flex flex-1 items-center bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground dark:text-darkShowTableHeadingText border-b border-lightShowTableBodyBorder dark:border-darkShowTableBodyBorder"
       >
-        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded-full w-32"></div>
+        <div class="h-3 bg-lightSkeletonBackgroundColor dark:bg-darkSkeletonBackgroundColor rounded-full w-32"></div>
       </div>
 
       <table class="w-full text-sm text-left table-fixed border-collapse">
         <thead class="bg-lightShowTableUnderHeadingBackground dark:bg-darkShowTableUnderHeadingBackground block md:table-row-group">
           <tr class="block md:table-row">
-            <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText">
+            <th scope="col" class="px-5 py-2.5 text-xs font-medium hidden md:w-56 md:table-cell text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText">
               {{ $t('Field') }}
             </th>
-            <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:table-cell text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText">
+            <th scope="col" class="px-5 py-2.5 text-xs font-medium hidden md:table-cell text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText">
               {{ $t('Value') }}
             </th>
           </tr>
@@ -125,13 +125,13 @@
           >
             <td class="px-6 py-[15.5px] relative block md:table-cell pb-0 md:pb-[15.5px]">
               <div class="md:absolute md:inset-0 flex items-center px-6 py-[15.5px]">
-                <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full w-24"></div>
+                <div class="h-2.5 bg-lightSkeletonBackgroundColor dark:bg-darkSkeletonBackgroundColor rounded-full w-24"></div>
               </div>
             </td>
 
             <td class="px-6 py-[15.5px] whitespace-pre-wrap block md:table-cell">
               <div class="flex items-center h-full min-h-[21px]">
-                <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full w-full max-w-[280px]"></div>
+                <div class="h-2.5 bg-lightSkeletonBackgroundColor dark:bg-darkSkeletonBackgroundColor rounded-full w-full max-w-[280px]"></div>
               </div>
             </td>
           </tr>
@@ -172,7 +172,7 @@
     </template>
     </div>
 
-    <div v-else class="text-center text-gray-500 dark:text-gray-400 mt-10">
+    <div v-else class="text-center text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText mt-10">
       {{ $t('Ooops. Record not found') }}
     </div>
 
@@ -196,8 +196,8 @@
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 
 import { useCoreStore } from '@/stores/core';
-import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown, formatComponent, executeCustomAction } from '@/utils';
-import { IconPenSolid, IconTrashBinSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+import { getCustomComponent, checkAcessByAllowedActions, formatComponent, executeCustomAction } from '@/utils';
+import { IconPencil, IconTrash2, IconPlus } from '@iconify-prerendered/vue-lucide';
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';
@@ -271,7 +271,6 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId as string,
   });
-  initThreeDotsDropdown();
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId as string, 
     primaryKey: route.params.primaryKey as string,