adminforth 2.8.2 → 2.9.0

package/dist/spa/src/App.vue

@@ -59,6 +59,9 @@
                       :adminUser="coreStore.adminUser"
                     />
                   </li>
+                  <li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
+                    <UserMenuSettingsButton />
+                  </li>
                   <li>
                     <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">{{ $t('Sign out') }}</button>
                   </li>
@@ -69,123 +72,22 @@
       </div>
     </nav>
 
-    <aside 
-      ref="sidebarAside"
+    <Sidebar 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
-      id="logo-lightSidebar" class="fixed border-none top-0 left-0 z-30 w-64 h-screen  transition-transform bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder  sm:translate-x-0 dark:bg-darkSidebar dark:border-darkSidebarBorder"
-      :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
-      aria-label="Sidebar"
-    >
-      <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
-        <div class="af-logo-title-wrapper flex ms-2 m-4">
-          <img v-if="coreStore.config?.showBrandLogoInSidebar !== false" :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
-          <span 
-            v-if="coreStore.config?.showBrandNameInSidebar"
-            class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
-          >
-            {{ coreStore.config?.brandName }}
-          </span>
-          <div class="flex items-center gap-2 w-auto" :class="{'w-full justify-end': coreStore.config?.showBrandLogoInSidebar === false}">
-            <component 
-              v-for="c in coreStore?.config?.globalInjections?.sidebarTop || []"
-              :is="getCustomComponent(c)"
-              :meta="c.meta"
-              :adminUser="coreStore.adminUser"
-            />
-          </div>
-        </div>
-
-        <ul class="af-sidebar-container space-y-2 font-medium">
-          <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
-            <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
-            <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-lightSidebarHeading dark:text-darkSidebarHeading
-            ">{{ item.label }}</div>
-            <li v-else-if="item.children" class="af-sidebar-expand-container">
-              <button @click="clickOnMenuItem(i)" type="button" class="af-sidebar-expand-button flex items-center w-full p-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover"
-                  :class="opened.includes(i) ? 'af-sidebar-dropdown-expanded' : 'af-sidebar-dropdown-collapsed'"
-                  :aria-controls="`dropdown-example${i}`"
-                  :data-collapse-toggle="`dropdown-example${i}`"
-              >
-
-                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
-
-                <span class="text-ellipsis overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
-
-                  <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-                    fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
-                    <Tooltip v-if="item.badgeTooltip">
-                      {{ item.badge }}
-                      <template #tooltip>
-                        {{ item.badgeTooltip }}
-                      </template>
-                    </Tooltip>
-                    <template v-else>
-                      {{ item.badge }}
-                    </template> 
-                  </span>
-                </span>
-
-                <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                </svg>
-              </button>
-
-              <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
-                <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
-                  <li class="af-sidebar-menu-link">
-                      <MenuLink :item="child" isChild="true" @click="hideSidebar"/>
-                    </li>
-                </template>
-            </ul>
-        </li>
-        <li v-else class="af-sidebar-menu-link">
-          <MenuLink :item="item" @click="hideSidebar"/>
-        </li>
-        </template>
-      </ul>
-
-
-        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent text-sm" role="alert"
-          v-if="ctaBadge"
-        >
-          <div class="flex items-center mb-3" :class="!ctaBadge.title ? 'float-right' : ''">
-            <!-- <span class="bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity  text-sm font-semibold me-2 px-2.5 py-0.5 rounded "
-              v-if="ctaBadge.title"
-            > -->
-            <span>
-              {{ctaBadge.title}}
-            </span>
-            <button type="button" 
-              class="ms-auto -mx-1.5 -my-1.5 bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity inline-flex justify-center items-center w-6 h-6  rounded-lg  p-1 hover:brightness-110" 
-              
-              data-dismiss-target="#dropdown-cta" aria-label="Close"
-              v-if="ctaBadge?.closable" @click="closeCTA"
-            >
-              <span class="sr-only">Close</span>
-              <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-              </svg>
-            </button>
-          </div>
-          <p class="mb-3 text-sm " v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
-          <p class="mb-3 text-sm fill-lightNavbarText dark:fill-darkPrimary text-lightNavbarText dark:text-darkNavbarPrimary" v-else>
-            {{ ctaBadge.text }}  
-          </p>
-          <!-- <a class="text-sm text-lightPrimary underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a> -->
-        </div>
-
-        <component 
-          v-for="c in coreStore?.config?.globalInjections?.sidebar || []"
-          :is="getCustomComponent(c)"
-          :meta="c.meta"
-          :adminUser="coreStore.adminUser"
-        />
-      </div>
-    </aside>
+      :sideBarOpen="sideBarOpen"
+      :forceIconOnly="route.meta?.sidebarAndHeader === 'preferIconOnly'"
+      @hideSidebar="hideSidebar"
+      @loadMenu="loadMenu"
+      @sidebarStateChange="handleSidebarStateChange"
+    />
 
-    <div class="sm:ml-64 max-w-[100vw] sm:max-w-[calc(100%-16rem)]" 
+    <div class="transition-all duration-300 ease-in-out max-w-[100vw]" 
+      :class="{
+        'sm:ml-20': isSidebarIconOnly,
+        'sm:ml-[264px]': !isSidebarIconOnly,
+        'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
+        'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly
+      }"
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout">
       <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
@@ -245,10 +147,20 @@
     @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);
+    }
+  }
+
+
 </style>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, onBeforeMount, nextTick, type Ref } from 'vue';
+import { computed, onMounted, ref, watch, onBeforeMount } from 'vue';
 import { RouterView } from 'vue-router';
 import { Dropdown } from 'flowbite'
 import './index.scss'
@@ -256,19 +168,15 @@ import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
-import MenuLink from './components/MenuLink.vue';
+import Sidebar from './components/Sidebar.vue';
 import { useRoute, useRouter } from 'vue-router';
-import { getIcon, verySimpleHash } from '@/utils';
 import { createHead } from 'unhead'
-import { loadFile } from '@/utils';
+import { getCustomComponent } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
-import { getCustomComponent } from '@/utils';
-import type { AdminForthConfigMenuItem, AnnouncementBadgeResponse } from './types/Common';
-import { Tooltip } from '@/afcl';
 import { initFrontedAPI } from '@/adminforth';
 import adminforth from '@/adminforth';
-
+import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
 
 const coreStore = useCoreStore();
 const toastStore = useToastStore();
@@ -281,16 +189,15 @@ const sideBarOpen = ref(false);
 const defaultLayout = ref(true);
 const route = useRoute();
 const router = useRouter();
-//create a ref to store the opened menu items with ts type;
-const opened = ref<(string|number)[]>([]);
 const publicConfigLoaded = ref(false);
 const dropdownUserButton = ref(null);
 
-const sidebarAside = ref(null);
 
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 
+const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'true');
+
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
 const theme = ref('light');
@@ -299,19 +206,16 @@ function hideSidebar(): void {
   sideBarOpen.value = false;
 }
 
+function handleSidebarStateChange(state: { isSidebarIconOnly: boolean }) {
+  isSidebarIconOnly.value = state.isSidebarIconOnly;
+}
+
+
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
   coreStore.toggleTheme();
 }
 
-function clickOnMenuItem(label: string | number) {
-  if (opened.value.includes(label)) {
-    opened.value = opened.value.filter((item) => item !== label);
-  } else {
-    opened.value.push(label);
-  }
- 
-}
 
 async function logout() {
   userStore.unauthorize();
@@ -326,7 +230,7 @@ async function initRouter() {
 
 async function loadMenu() {
   await initRouter();
-  if (!route.meta.customLayout) {
+  if (route.meta.sidebarAndHeader !== 'none') {
     // for custom layouts we don't need to fetch menu
     await coreStore.fetchMenuAndResource();
   }
@@ -334,8 +238,11 @@ async function loadMenu() {
 }
 
 function handleCustomLayout() {
-  if (route.meta?.customLayout) {
+  if (route.meta?.sidebarAndHeader === 'none') {
     defaultLayout.value = false;
+  } else if (route.meta?.sidebarAndHeader === 'preferIconOnly') {
+    defaultLayout.value = true;
+    isSidebarIconOnly.value = true;
   } else {
     defaultLayout.value = true;
   }
@@ -371,13 +278,6 @@ watch([route, () => coreStore.resourceById, () => coreStore.config], async () =>
  
 });
 
-watch(()=>coreStore.menu, () => {
-    coreStore.menu.forEach((item, i) => {
-    if (item.open) {
-      opened.value.push(i);
-    };
-  });
-})
 
 watch(dropdownUserButton, (dropdownUserButton) => {
   if (dropdownUserButton) {
@@ -396,11 +296,6 @@ async function loadPublicConfig() {
   publicConfigLoaded.value = true;
 }
 
-watch(sidebarAside, (sidebarAside) => {
-  if (sidebarAside) {
-    coreStore.fetchMenuBadges();
-  }
-})
 
 // initialize components based on data attribute selectors
 onMounted(async () => {
@@ -428,32 +323,4 @@ watch(() => coreStore.config?.singleTheme, (singleTheme) => {
   }
 }, { immediate: true })
 
-
-const ctaBadge: Ref<(AnnouncementBadgeResponse & { hash: string; }) | null> = computed(() => {
-  const badge = coreStore.config?.announcementBadge;
-  if (!badge) {
-    return null;
-  }
-  const hash = badge.closable ? verySimpleHash(JSON.stringify(badge)) : '';
-  if (badge.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
-    return null;
-  }
-  return {...badge, hash};
-});
-
-function closeCTA() {
-  if (!ctaBadge.value) {
-    return;
-  }
-  const hash = ctaBadge.value.hash;
-  window.localStorage.setItem(`ctaBadge-${hash}`, '1');
-  nextTick( async() => {
-    loadMenu();
-    await coreStore.fetchMenuBadges();
-    adminforth.menu.refreshMenuBadges();
-  })
-
-}
-
-
 </script>

package/dist/spa/src/adminforth.ts

@@ -120,23 +120,27 @@ class FrontendAPI implements FrontendAPIInterface {
   listFilterValidation(filter: FilterParams): boolean {
     if(router.currentRoute.value.meta.type !== 'list'){
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
-    } else {
-      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumnCommon) => col.name === filter.field)
-      if(!filterField){
-          throw new Error(`Field ${filter.field} is not available for filtering`)
-      }
-      
     }
     return true
   }
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f: any) => {return f.field === filter.field && f.operator === filter.operator})){
-        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      const existingFilterIndex = this.filtersStore.filters.findIndex((f: any) => {
+        return f.field === filter.field && f.operator === filter.operator
+      });
+      
+      if(existingFilterIndex !== -1){
+        // Update existing filter instead of throwing error
+        const filters = [...this.filtersStore.filters];
+        if (filter.value === undefined) {
+          filters.splice(existingFilterIndex, 1);
+        } else {
+          filters[existingFilterIndex] = filter;
+        }
+        this.filtersStore.setFilters(filters);
       } else {
-        this.filtersStore.setFilter(filter)
+        this.filtersStore.setFilter(filter);
       }
     }
   }

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

@@ -0,0 +1,91 @@
+<template>
+    <div v-if="isInitFinished" class="inline-flex rounded-md shadow-xs" role="group">
+        <button v-for="button in buttons" :key="`${button}-button-controll`" 
+            :disabled="slotProps[button].disabled"
+            class="inline-flex items-center text-sm font-medium border-t border-b border-r border-lightButtonGroupBorder focus:z-10 focus:ring-2 dark:border-darkButtonGroupBorder disabled:opacity-50 disabled:cursor-not-allowed"
+            :class="[
+                buttonsStyles[button] === 'rounded' ? 'border rounded-lg' 
+                : buttonsStyles[button] === 'rounded-left' ? 'border rounded-s-lg' 
+                : buttonsStyles[button] === 'rounded-right' ? 'border rounded-e-lg border-l-lightButtonGroupBackground focus:border-l-lightButtonGroupBorder dark:border-l-darkButtonGroupBackground dark:focus:border-l-darkButtonGroupBorder' 
+                : buttonsStyles[button] === 'no-rounded' ? 'border border-l-lightButtonGroupBackground focus:border-l-lightButtonGroupBorder dark:border-l-darkButtonGroupBackground dark:focus:border-l-darkButtonGroupBorder' 
+                : buttonsStyles[button] === 'rounded-left-with-right-border' ? 'border rounded-s-lg' : '',
+                (button === activeButton || props.solidColor === true) ? 'bg-lightButtonGroupActiveBackground text-lightButtonGroupActiveText focus:ring-lightButtonGroupActiveFocusRing dark:bg-darkButtonGroupActiveBackground dark:text-darkButtonGroupActiveText dark:focus:ring-darkButtonGroupActiveFocusRing' 
+                                        :'text-lightButtonGroupText bg-lightButtonGroupBackground focus:ring-lightButtonGroupFocusRing hover:bg-lightButtonGroupBackgroundHover hover:text-lightButtonGroupTextHover dark:bg-darkButtonGroupBackground dark:text-darkButtonGroupText dark:hover:text-darkButtonGroupTextHover dark:hover:bg-darkButtonGroupBackgroundHover dark:focus:ring-darkButtonGroupFocusRing'
+            ]"
+            @click="setActiveButton(button)"
+        >
+            <slot :name="`button:${button}`"></slot>
+        </button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { onMounted, useSlots, reactive, ref, type Ref } from 'vue';
+
+    const buttons : Ref<string[]> = ref([]);
+    const buttonsStyles : Ref<Record<string, string>> = ref({});
+    const activeButton = ref('');
+    const slotProps = reactive<Record<string, any>>({});
+    const isInitFinished = ref(false);
+    
+    const emits = defineEmits(['update:modelValue']);
+
+    const props = defineProps<{
+        solidColor?: boolean;
+        modelValue?: string;
+    }>();
+    
+    onMounted(() => {
+        const slots = useSlots();
+        buttons.value = Object.keys(slots).reduce((tbs: string[], tb: string) => {
+        if (tb.startsWith('button:')) {
+            tbs.push(tb.replace('button:', ''));
+        }
+        return tbs;
+        }, []);
+        if (buttons.value.length > 0) {
+            activeButton.value = buttons.value[0];
+        }
+        for (const button of buttons.value) {
+            const temp = {
+                [button]: getButtonsClasses(button)
+            }
+            buttonsStyles.value = { ...buttonsStyles.value, ...temp };
+            const slot = slots[`button:${button}`];
+            if (slot && slot()[0]?.props) {
+                slotProps[button] = slot()[0].props;
+            } else {
+                slotProps[button] = {};
+            }
+            if (slotProps[button]?.disabled === undefined) {
+                slotProps[button].disabled = false;
+            }
+        }
+        isInitFinished.value = true;
+    });
+
+
+    function setActiveButton(button: string) {
+        if (buttons.value.includes(button)) {
+        activeButton.value = button;
+        emits('update:modelValue', button);
+        }
+    }
+
+    function getButtonsClasses(button: string) {
+        const index = buttons.value.indexOf(button);
+        const lenght = buttons.value.length;
+        if ( lenght === 1 ) {
+            return 'rounded'
+        } else if ( lenght === 2 && index === 0 ) {
+            return 'rounded-left-with-right-border'
+        } else if ( index === 0 ) {
+            return 'rounded-left'
+        } else if ( index === lenght - 1 ) {
+            return 'rounded-right'
+        } else {
+            return 'no-rounded'
+        }
+    }
+
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+<a href="#" 
+    class="block max-w-sm bg-lightCardBackground border border-lightCardBorder rounded-lg shadow-sm hover:bg-lightCardBackgroundHover dark:bg-darkCardBackground dark:border-darkCardBorder dark:hover:bg-darkCardBackgroundHover"
+    :class="[
+        props.size === 'sm' ? 'p-2' : props.size === 'md' ? 'p-4' : 'p-6',
+        props.hideBorder ? 'border-0' : ''
+    ]"
+>
+
+<h5 class="font-bold tracking-tight text-lightCardTitle dark:text-darkCardTitle" :class="[props.size === 'sm' ? 'text-base' : props.size === 'md' ? 'text-lg mb-1' : 'text-xl mb-2']">{{ props.title }}</h5>
+<p class="font-normal text-lightCardDescription dark:text-darkCardDescription" :class="[props.size === 'sm' ? 'text-sm' : props.size === 'md' ? 'text-base' : 'text-lg']">{{ props.description }}</p>
+    <slot></slot>
+</a>
+</template>
+
+
+<script setup lang="ts">
+const props = defineProps<{
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    hideBorder?: boolean;
+}>();
+
+</script>

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

@@ -3,8 +3,8 @@
     v-bind="$attrs"
     :to="props.to"
     type="submit" 
-    class="afcl-link-button flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
-      focus:ring-4 focus:outline-none focus:ring-lightPrimary focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkPrimary dark:focus:ring-opacity-50"
+    class="afcl-link-button flex items-center justify-center gap-1 text-lightButtonsText bg-lightButtonsBackground border border-lightButtonsBorder dark:bg-darkButtonsBackground hover:bg-lightButtonsHover hover:border-lightButtonsBorderHover
+      focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
     :class="{
       'cursor-default': props.disabled,
       'opacity-50': props.disabled,

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="afcl-table-container relative overflow-x-auto shadow-md sm:rounded-lg">
+  <div class="afcl-table-container relative overflow-x-auto shadow-md rounded-lg">
     <div class="overflow-x-auto w-full">
       <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
           <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
@@ -73,11 +73,12 @@
       <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
     <div class="af-pagination-container flex flex-row items-center xs:flex-row xs:justify-between xs:items-center gap-3">
-      <div class="inline-flex">
+      <div class="inline-flex" :class="isLoading || props.isLoading ? 'pointer-events-none select-none opacity-50' : ''">
           <!-- Buttons -->
           <button
             class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
-            @click="currentPage--; pageInput = currentPage.toString();" :disabled="currentPage <= 1">
+            @click="currentPage--; pageInput = currentPage.toString();" 
+            :disabled="currentPage <= 1 || isLoading || props.isLoading">
             <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 14 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -86,12 +87,13 @@
           </button>
           <button
             class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
-            @click="switchPage(1); pageInput = currentPage.toString();" :disabled="currentPage <= 1">
+            @click="switchPage(1); pageInput = currentPage.toString();" 
+            :disabled="currentPage <= 1 || isLoading || props.isLoading">
             <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
             1
           </button>
           <div
-            contenteditable="true" 
+            :contenteditable="!isLoading && !props.isLoading"
             class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
             @keydown="onPageKeydown($event)"
             @input="onPageInput($event)"
@@ -102,14 +104,17 @@
 
           <button
             class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
-            @click="currentPage = totalPages; pageInput = currentPage.toString();" :disabled="currentPage >= totalPages">
+            @click="currentPage = totalPages; pageInput = currentPage.toString();" 
+            :disabled="currentPage >= totalPages || isLoading || props.isLoading"
+          >
             {{ totalPages }}
 
-            <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
           </button>
           <button
             class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
-            @click="currentPage++; pageInput = currentPage.toString();" :disabled="currentPage >= totalPages">
+            @click="currentPage++; pageInput = currentPage.toString();" 
+            :disabled="currentPage >= totalPages || isLoading || props.isLoading"
+          >
             <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 14 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -172,6 +177,10 @@
     columnWidths.value = !headerRefs.value ? [] : headerRefs.value.map((el: HTMLElement) => el.offsetWidth);
   });
 
+  watch([isLoading, () => props.isLoading], () => {
+    emit('update:tableLoading', isLoading.value || props.isLoading);
+  });
+
   const totalPages = computed(() => {
     return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
@@ -185,8 +194,8 @@
     pageInput.value = p.toString();
   }
 
-  const emites = defineEmits([
-    'update:activeTab',
+  const emit = defineEmits([
+    'update:tableLoading',
   ]);
   
   function onPageInput(event: any) {

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

@@ -1,10 +1,10 @@
 <template>
   <div class="md:flex">
-    <ul class="flex-column space-y space-y-4 text-sm font-medium text-lightVerticalTabsText dark:text-darkVerticalTabsText md:me-4 mb-4 md:mb-0">
+    <ul class="ps-6 flex-column space-y space-y-4 text-sm font-medium text-lightVerticalTabsText dark:text-darkVerticalTabsText md:me-4 mb-4 md:mb-0 md:mr-0 mr-6">
       <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
         <a 
           href="#"
-          @click="activeTab = tab"
+          @click="setActiveTab(tab)"
           class="inline-flex items-center px-4 py-3 rounded-lg w-full"
           :class="tab === activeTab ? 'text-lightVerticalTabsTextActive bg-lightVerticalTabsBackgroundActive active dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive' : 'text-lightVerticalTabsText dark:text-darkVerticalTabsText hover:text-lightVerticalTabsTextHover bg-lightVerticalTabsBackground hover:bg-lightVerticalTabsBackgroundHover dark:bg-darkVerticalTabsBackground dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:darkVerticalTabsTextHover'"
           aria-current="page"
@@ -13,14 +13,14 @@
         </a>
       </li>
     </ul>
-    <div class="ps-6  text-medium text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText  w-full ">
+    <div class="ps-6 text-medium text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText  w-full ">
       <slot :name="activeTab"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, useSlots, ref, type Ref } from 'vue';
+import { onMounted, useSlots, ref, type Ref } from 'vue';
   const tabs : Ref<string[]> = ref([]);
   const activeTab = ref('');
   const props = defineProps({
@@ -31,6 +31,11 @@
   const emites = defineEmits([
     'update:activeTab',
   ]);
+
+  defineExpose({
+    setActiveTab
+  });
+
   onMounted(() => {
     const slots = useSlots();
     tabs.value = Object.keys(slots).reduce((tbs: string[], tb: string) => {
@@ -44,6 +49,10 @@
     }
   });
 
-  
-
+  function setActiveTab(tab: string) {
+    if (tabs.value.includes(tab)) {
+      activeTab.value = tab;
+      emites('update:activeTab', tab);
+    }
+  }
 </script>

package/dist/spa/src/afcl/index.ts

@@ -23,3 +23,5 @@ export { default as JsonViewer } from './JsonViewer.vue';
 export { default as Toggle } from './Toggle.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as Textarea } from './Textarea.vue';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as Card } from './Card.vue';

package/dist/spa/src/components/Filters.vue

@@ -136,7 +136,7 @@
 
    <div class="flex justify-end gap-2">
       <button 
-        :disabled="!filtersStore.filters.length"
+        :disabled="!filtersStore.visibleFiltersCount"
         type="button" 
         class="flex items-center py-1 px-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
         @click="clear">{{ $t('Clear all') }}</button>
@@ -289,7 +289,7 @@ function getFilterItem({ column, operator }) {
 }
 
 async function clear() {
-  filtersStore.clearFilters();
+  filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))];
   emits('update:filters', [...filtersStore.filters]);
 }