adminforth 2.4.0-next.7 → 2.4.0-next.71

package/dist/modules/styles.js

@@ -51,11 +51,32 @@ export const styles = () => ({
         lightButtonsDisabled: "#f3f4f6", // button disabled
         lightButtonsDisabledText: "#f3f4f6", // button disabled text
         lightButtonsIcon: "#333333", // button icon
+        lightDropdownButtonsBackground: "#f9fafb", // dropdown button/input background color
+        lightDropownButtonsBorder: "#d1d5db", //border color
+        lightDropdownButtonsText: "#6b7280", //text color
+        lightDropdownButtonsPlaceholderText: "#6b7280", //placeholder text color
+        lightDropdownOptionsBackground: "#FFFFFF", //dropdown menu background color
+        lightDropdownOptionsHoverBackground: "#f3f4f6", //dropdown menu hover background color 
+        lightDropdownOptionsText: "#000000", //dropdown menu hover background color
+        lightCheckboxBgUnchecked: "alias:lightPrimaryContrast lighten", //checkbox unchecked state bg
+        lightCheckboxBgChecked: "alias:lightPrimary", //cheched state bg
+        lightCheckboxIconColor: "alias:lightPrimaryContrast lighten", //checked icon color
+        lightCheckboxBorderColor: "alias:lightPrimary darken", //border color
+        lightFocusRing: "alias:lightPrimary lighten", //focus ring color
+        lightTextLabel: "black", //text color of checkbox label
+        lightToggleBgUnactive: "#F9FAFB",
+        lightToggleBgActive: "alias:lightPrimary darken",
+        lightToggleCircleUnactive: "alias:lightPrimary",
+        lightToggleCircleActive: "#F9FAFB",
+        lightToggleRing: "alias:lightPrimary lighten",
+        lightToggleText: "black",
+        lightToggleBorderUnactive: "#E5E7EB",
+        lightToggleBorderActive: "alias:lightPrimary darken",
         // colors for dark theme
         darkHtml: "#111827",
         darkPrimary: "rgb(130 172 255)", // primary color
         darkPrimaryContrast: "alias:darkPrimary inverse", // primary color contrast
-        darkPrimaryOpacity: "#212A40", // primary color opacity
+        darkPrimaryOpacity: "alias:darkPrimary opacity:0.2", // primary color opacity
         darkNavbar: "#111827",
         darkNavbarBorder: "#e5e7eb",
         darkNavbarText: "#9ca3af",
@@ -85,7 +106,28 @@ export const styles = () => ({
         darkListBorder: "#444444",
         darkForm: "#111111",
         darkFormBorder: "#222222",
-        darkFormHeading: "alias:darkListTableHeading"
+        darkFormHeading: "alias:darkListTableHeading",
+        darkDropdownButtonsBackground: "alias:darkForm darken",
+        darkDropownButtonsBorder: "alias:darkForm lighten",
+        darkDropdownButtonsText: "#ffffff",
+        darkDropdownButtonsPlaceholderText: "#9ca3af",
+        darkDropdownOptionsBackground: "#alias:darkForm lighten",
+        darkDropdownOptionsHoverBackground: "alias:darkForm",
+        darkDropdownOptionsText: "#9ca3af",
+        darkCheckboxBgUnchecked: "alias:darkPrimaryContrast lighten", //checkbox unchecked state bg
+        darkCheckboxBgChecked: "alias:darkPrimary", //cheched state bg
+        darkCheckboxIconColor: "alias:darkPrimaryContrast lighten", //checked icon color
+        darkCheckboxBorderColor: "alias:darkPrimary darken", //border color
+        darkFocusRing: "alias:darkPrimary lighten",
+        darkTextLabel: "white",
+        darkToggleBgUnactive: "#F9FAFB",
+        darkToggleBgActive: "alias:darkPrimary darken",
+        darkToggleCircleUnactive: "alias:darkPrimary",
+        darkToggleCircleActive: "#F9FAFB",
+        darkToggleRing: "alias:darkPrimary lighten",
+        darkToggleText: "alias:darkPrimaryContrast lighten",
+        darkToggleBorderUnactive: "alias:darkPrimary lighten",
+        darkToggleBorderActive: "alias:darkPrimary darken",
     },
     boxShadow: {
         customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

package/dist/modules/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC;IAC3B,MAAM,EAAE;QACN,SAAS,EAAE,SAAS,EAAE,kBAAkB;QAExC,YAAY,EAAE,SAAS,EAAE,gBAAgB;QACzC,oBAAoB,EAAE,4BAA4B,EAAE,yBAAyB;QAC7E,mBAAmB,EAAE,iCAAiC,EAAE,wBAAwB;QAEhF,WAAW,EAAE,SAAS,EAAE,oBAAoB;QAC5C,iBAAiB,EAAE,kBAAkB,EAAE,SAAS;QAChD,eAAe,EAAE,SAAS,EAAE,cAAc;QAC1C,oBAAoB,EAAE,8BAA8B,EAAE,oBAAoB;QAC1E,qBAAqB,EAAE,8BAA8B,EAAE,qBAAqB;QAC5E,gBAAgB,EAAE,mCAAmC,EAAE,eAAe;QACtE,qBAAqB,EAAE,4BAA4B,EAAE,oBAAoB;QACzE,mBAAmB,EAAE,oBAAoB,EAAE,eAAe;QAE1D,YAAY,EAAE,SAAS,EAAE,qBAAqB;QAC9C,kBAAkB,EAAE,qCAAqC,EAAE,uBAAuB;QAClF,qBAAqB,EAAE,qCAAqC,EAAE,0BAA0B;QACxF,sBAAsB,EAAE,qCAAqC,EAAE,2BAA2B;QAC1F,gBAAgB,EAAE,SAAS,EAAE,yBAAyB;QACtD,qBAAqB,EAAE,+BAA+B,EAAE,+BAA+B;QACvF,sBAAsB,EAAE,+BAA+B,EAAE,gCAAgC;QACzF,mBAAmB,EAAE,oCAAoC,EAAE,kBAAkB;QAC7E,iBAAiB,EAAE,oCAAoC,EAAE,0BAA0B;QACnF,sBAAsB,EAAE,wBAAwB,EAAE,gCAAgC;QAClF,mBAAmB,EAAE,oCAAoC,EAAE,kBAAkB;QAE7E,SAAS,EAAE,SAAS,EAAE,uBAAuB;QAC7C,cAAc,EAAE,SAAS,EAAE,6BAA6B;QACxD,qBAAqB,EAAE,SAAS,EAAE,0BAA0B;QAC5D,yBAAyB,EAAE,qCAAqC,EAAE,+BAA+B;QACjG,kBAAkB,EAAE,SAAS,EAAE,uBAAuB;QACtD,sBAAsB,EAAE,kBAAkB,EAAE,sBAAsB;QAClE,wBAAwB,EAAE,SAAS,EAAE,6BAA6B;QAClE,eAAe,EAAE,SAAS,EAAE,yBAAyB;QACrD,kDAAkD;QAClD,+DAA+D;QAC/D,6DAA6D;QAC7D,0EAA0E;QAC1E,+DAA+D;QAC/D,mEAAmE;QACnE,4EAA4E;QAC5E,2DAA2D;QAE3D,SAAS,EAAE,SAAS,EAAE,uBAAuB;QAC7C,eAAe,EAAE,SAAS,EAAE,wBAAwB;QACpD,gBAAgB,EAAE,6BAA6B,EAAE,oBAAoB;QAErE,YAAY,EAAE,SAAS,EAAE,oBAAoB;QAC7C,kBAAkB,EAAE,SAAS,EAAE,gBAAgB;QAC/C,gBAAgB,EAAE,SAAS,EAAE,cAAc;QAC3C,iBAAiB,EAAE,SAAS,EAAE,eAAe;QAC7C,uBAAuB,EAAE,SAAS,EAAE,wBAAwB;QAC5D,kBAAkB,EAAE,SAAS,EAAE,gBAAgB;QAC/C,oBAAoB,EAAE,SAAS,EAAE,kBAAkB;QACnD,wBAAwB,EAAE,SAAS,EAAE,uBAAuB;QAC5D,gBAAgB,EAAE,SAAS,EAAE,cAAc;QAI3C,wBAAwB;QACxB,QAAQ,EAAE,SAAS;QAEnB,WAAW,EAAE,kBAAkB,EAAE,gBAAgB;QACjD,mBAAmB,EAAE,2BAA2B,EAAE,yBAAyB;QAC3E,kBAAkB,EAAE,SAAS,EAAE,wBAAwB;QAEvD,UAAU,EAAE,SAAS;QACrB,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,SAAS;QACzB,mBAAmB,EAAE,8BAA8B;QACnD,oBAAoB,EAAE,8BAA8B;QACpD,eAAe,EAAE,kCAAkC;QACnD,oBAAoB,EAAE,2BAA2B;QACjD,kBAAkB,EAAE,mBAAmB;QAEvC,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,mCAAmC;QACtD,oBAAoB,EAAE,mCAAmC;QACzD,qBAAqB,EAAE,mCAAmC;QAC1D,eAAe,EAAE,SAAS;QAC1B,oBAAoB,EAAE,+BAA+B;QACrD,qBAAqB,EAAE,+BAA+B;QACtD,kBAAkB,EAAE,mCAAmC;QACvD,gBAAgB,EAAE,mCAAmC;QACrD,qBAAqB,EAAE,uBAAuB;QAC9C,kBAAkB,EAAE,mCAAmC;QAGvD,QAAQ,EAAE,SAAS;QACnB,aAAa,EAAE,SAAS;QACxB,oBAAoB,EAAE,SAAS;QAC/B,wBAAwB,EAAE,SAAS;QACnC,iBAAiB,EAAE,SAAS;QAC5B,qBAAqB,EAAE,eAAe;QACtC,uBAAuB,EAAE,SAAS;QAClC,cAAc,EAAE,SAAS;QAEzB,QAAQ,EAAE,SAAS;QACnB,cAAc,EAAE,SAAS;QACzB,eAAe,EAAE,4BAA4B;KAE9C;IACD,SAAS,EAAE;QACT,WAAW,EAAE,8BAA8B,EAAE,iBAAiB;QAC9D,YAAY,EAAE,8BAA8B,EAAE,iBAAiB;QAC/D,eAAe,EAAE,8BAA8B,EAAE,iBAAiB;QAClE,mBAAmB,EAAE,8BAA8B,EAAE,iBAAiB;QACtE,kBAAkB,EAAE,8BAA8B,EAAE,iBAAiB;QACrE,sBAAsB,EAAE,8BAA8B,EAAE,iBAAiB;KAE1E;IACD,QAAQ,EAAE;QACR,iBAAiB,EAAE,MAAM;KAC1B;IACD,YAAY,EAAE;QACZ,SAAS,EAAE,OAAO;KACnB;CACF,CAAC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"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"}

package/dist/spa/index.html

@@ -14,7 +14,7 @@
           document.documentElement.classList.remove('dark')
       }
   </script> -->
-
+    <!-- /* IMPORTANT:ADMINFORTH HEAD */ -->
   </head>
   <body class="min-h-screen flex flex-col">
     <div id="app" class="grow bg-lightHtml dark:bg-darkHtml w-full"></div>

package/dist/spa/src/App.vue

@@ -24,7 +24,8 @@
             />
 
             <div class="flex items-center ms-3 ">
-              <span               
+              <span  
+                v-if="!coreStore.config?.singleTheme"
                 @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
                 <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
                 <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
@@ -76,11 +77,11 @@
       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="flex ms-2 m-4">
-          <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
+        <div class="af-logo-title-wrapper flex ms-2 m-4">
+          <img :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="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
+            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>
@@ -121,7 +122,7 @@
                 </svg>
               </button>
 
-              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
+              <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>
                       <MenuLink :item="child" isChild="true" @click="hideSidebar"/>
@@ -410,6 +411,14 @@ onBeforeMount(()=>{
   document.documentElement.classList.toggle('dark', theme.value === 'dark');
 })
 
+watch(() => coreStore.config?.singleTheme, (singleTheme) => {
+  if (singleTheme) {
+    theme.value = singleTheme;
+    window.localStorage.setItem('af__theme', singleTheme);
+    document.documentElement.classList.toggle('dark', theme.value === 'dark');
+  }
+}, { immediate: true })
+
 
 const ctaBadge: Ref<(AnnouncementBadgeResponse & { hash: string; }) | null> = computed(() => {
   const badge = coreStore.config?.announcementBadge;

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

@@ -2,12 +2,11 @@
   <button 
     v-bind="$attrs"
     type="submit" 
-    class="flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
+    class="afcl-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="{
-      'cursor-default': props.disabled,
-      'opacity-50': props.disabled,
-      'pointer-events-none': props.disabled,
+      'cursor-default opacity-50 pointer-events-none': props.disabled,
+      'active brightness-200 hover:brightness-150'  : props.active
     }"
   >
     <svg v-if="props.loader"
@@ -22,6 +21,7 @@
 const props = defineProps({
   loader: Boolean,
   disabled: Boolean,
+  active: Boolean,
 });
 
 </script>

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

@@ -1,21 +1,29 @@
 <template>
-  <div class="flex items-center h-5" :class="{'opacity-50' : props.disabled}">
-    <input :id="id" 
-      ref="rememberInput"
-      type="checkbox"
-      :checked="props.modelValue"
-      :disabled="props.disabled"
-      @change="$emit('update:modelValue', $event.target.checked)"
-      class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-lightPrimary cursor-pointer 
-        focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 checked:bg-lightPrimary checked:dark:bg-darkPrimary" /> 
+  <div class="afcl-checkbox flex items-center relative h-5" :class="{'opacity-50' : props.disabled}">
+    <div class="flex items-center justify-center">
+      <input :id="id" 
+        ref="rememberInput"
+        type="checkbox"
+        :checked="props.modelValue"
+        :disabled="props.disabled"
+        @change="$emit('update:modelValue', $event.target.checked)"
+        class="peer appearance-none min-w-4 min-h-4 bg-lightCheckboxBgUnchecked border border-lightCheckboxBorderColor rounded-sm checked:bg-lightCheckboxBgChecked 
+                        focus:ring-lightFocusRing dark:focus:ring-darkFocusRing dark:focus:ring-darkFocusRing
+                        focus:ring-2 dark:bg-darkCheckboxBgUnchecked dark:border-darkCheckboxBorderColor dark:checked:bg-darkCheckboxBgChecked cursor-pointer"
+        >     
+        <div class="pointer-events-none absolute text-lightCheckboxIconColor dark:text-darkCheckboxIconColor leading-none peer-checked:block hidden">
+          <IconCheckOutline width="18" height="18" />
+        </div> 
+    </div>
+    <label :for="id" class="ms-2 text-sm font-medium text-lightTextLabel dark:text-darkTextLabel">
+      <slot></slot>
+    </label>
+
   </div>
-  <label :for="id" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-    <slot></slot>
-  </label>
 </template>
 
 <script setup lang="ts">
-
+import { IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 const props = defineProps({
   modelValue: Boolean,
   disabled: Boolean,

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

@@ -1,6 +1,8 @@
 <template>
-    <component v-if="getFlagComponent(countryCode)" class="flag-icon rounded-sm" :is="getFlagComponent(countryCode)" />
+  <div class="aspect-[4/3] w-8 h-6 flex items-center justify-center">
+    <component v-if="getFlagComponent(countryCode)" :is="getFlagComponent(countryCode)" class="flag-icon w-full h-full object-contain rounded-sm"/>
     <span v-else-if="countryCode">{{ countryCode }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -5,13 +5,15 @@
     @dragleave.prevent="dragging = false"
     @drop.prevent="dragging = false; doEmit($event.dataTransfer.files)"
   >
-      <label :id="id" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 
+      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 
         hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
         :class="{
           'border-blue-600 dark:border-blue-400': dragging,
           'border-gray-300 dark:border-gray-600': !dragging,
           'bg-blue-50 dark:bg-blue-800': dragging,
           'bg-gray-50 dark:bg-gray-800': !dragging,
+          'min-h-32 h-full': props.multiple,
+          'h-32': !props.multiple,
         }"
       >
           <div class="flex flex-col items-center justify-center pt-5 pb-6">
@@ -20,7 +22,7 @@
               <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
               </svg>
-              <div v-else class="flex items-center justify-center w-full mt-1 mb-4">
+              <div v-else class="flex items-center justify-center flex-wrap gap-1 w-full mt-1 mb-4">
                 <template v-for="file in selectedFiles">
                   <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
                     <IconFileSolid class="w-5 h-5" />

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

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex z-0" :class="{'opacity-50' : readonly}">
+  <div class="afcl-input-wrapper flex z-0 relative" :class="{'opacity-50' : readonly}">
     <span
         v-if="$slots.prefix || prefix"
         class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
@@ -15,13 +15,15 @@
       @input="$emit('update:modelValue', $event.target?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
-      class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
+      class="afcl-input inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 dark:text-white translate-y-0"
       :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}"
       :disabled="readonly"
     >
 
-
+    <div v-if="$slots.rightIcon" class="absolute inset-y-0 right-0 pr-3 flex items-center">
+        <slot name="rightIcon" />
+    </div>
     <span
         v-if="$slots.suffix || suffix"
         class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-e-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 ">

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

@@ -0,0 +1,25 @@
+<template>
+  <JsonViewer
+    class="afcl-json-viewer min-w-[6rem]"
+    :value="value"
+    :expandDepth="expandDepth"
+    copyable
+    sort
+    :theme="currentTheme"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { JsonViewer } from 'vue3-json-viewer'
+import { useCoreStore } from '@/stores/core'
+
+defineProps<{
+  value: any
+  expandDepth?: number
+}>()
+
+const coreStore = useCoreStore()
+
+const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))
+</script>

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

@@ -2,7 +2,7 @@
   <router-link 
     v-bind="$attrs"
     :to="to"
-    class="text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110
+    class="afcl-link text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110
       cursor-pointer"
   >
     <slot></slot>

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

@@ -3,7 +3,7 @@
     v-bind="$attrs"
     :to="props.to"
     type="submit" 
-    class="flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
+    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="{
       'cursor-default': props.disabled,

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

@@ -1,16 +1,18 @@
 <template>
-  <div class="relative inline-block afcl-select" ref="internalSelect" 
+  <div class="afcl-select afcl-select-wrapper relative inline-block" ref="internalSelect" 
     :class="{'opacity-50': readonly}"
   >
     <div class="relative">
       <input
         ref="inputEl"
         type="text"
-        :readonly="readonly"
+        :readonly="readonly || searchDisabled"
         v-model="search"
         @click="inputClick"
         @input="inputInput"
-        class="block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-md leading-5 bg-lightDropdownButtonsBackground 
+        placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
+      dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
@@ -37,18 +39,19 @@
     <teleport to="body" v-if="teleportToBody && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
         class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
-          dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
+          dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+        @scroll="handleDropdownScroll">
         <div
           v-for="item in filteredItems"
           :key="item.value"
-          class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
+          class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
           :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
           @click="toogleItem(item)"
         >
           <slot name="item" :option="item"></slot>
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
-        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
+        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
           {{ options.length ? $t('No results found') : $t('No items here') }}
         </div>
 
@@ -60,22 +63,22 @@
 
     <div v-if="!teleportToBody && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
       class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
-        dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
+        dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+      @scroll="handleDropdownScroll">
       <div
         v-for="item in filteredItems"
         :key="item.value"
-        class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
+        class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
         :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
         @click="toogleItem(item)"
       >
         <slot name="item" :option="item"></slot>
         <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
       </div>
-      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
+      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
         {{ options.length ? $t('No results found') : $t('No items here') }}
       </div>
-
-      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-gray-400">
+      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-darkDropdownOptionsText">
         <slot name="extra-item"></slot>
       </div>
 
@@ -111,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, type Ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, type Ref } from 'vue';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
@@ -132,13 +135,17 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  searchDisabled: {
+    type: Boolean,
+    default: false,
+  },
   teleportToBody: {
     type: Boolean,
     default: false,
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
 
 const search = ref('');
 const showDropdown = ref(false);
@@ -159,6 +166,9 @@ function inputInput() {
     selectedItems.value = [];
     emit('update:modelValue', null);
   }
+  if (!props.searchDisabled) {
+    emit('search', search.value);
+  }
 }
 
 function updateFromProps() {
@@ -176,7 +186,7 @@ function updateFromProps() {
   }
 }
 
-function inputClick() {
+async function inputClick() {
   if (props.readonly) return;
   // Toggle local dropdown
   showDropdown.value = !showDropdown.value;
@@ -184,6 +194,11 @@ function inputClick() {
   if (!showDropdown.value && !search.value) {
     search.value = '';
   }
+
+  if(props.teleportToBody){
+    await nextTick();
+    handleScroll();
+  }
 }
 
 watch(
@@ -221,6 +236,15 @@ const handleScroll = () => {
   }
 };
 
+const handleDropdownScroll = (event: Event) => {
+  const target = event.target as HTMLElement;
+  const threshold = 10; // pixels from bottom
+  
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - threshold) {
+    emit('scroll-near-end');
+  }
+};
+
 onMounted(() => {
   updateFromProps();
 
@@ -241,7 +265,12 @@ onMounted(() => {
 });
 
 const filteredItems = computed(() => {
-  return props.options.filter(item =>
+
+  if (props.searchDisabled) {
+    return props.options || [];
+  }
+  
+  return (props.options || []).filter((item: any) =>
     item.label.toLowerCase().includes(search.value.toLowerCase())
   );
 });

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

@@ -1,8 +1,8 @@
 <template>
 
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+<div class="afcl-table-container relative overflow-x-auto shadow-md sm:rounded-lg">
+  <table class="afcl-table w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="afcl-table-thread text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
         <tr>
           <th scope="col" class="px-6 py-3"
             v-for="column in columns"
@@ -19,7 +19,7 @@
         <tr
           v-for="(item, index) in dataPage"
           :class="{
-            'odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800': evenHighlights,
+            'afcl-table-body odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800': evenHighlights,
             'border-b dark:border-gray-700': index !== dataPage.length - 1 || totalPages > 1,
           }"
         >
@@ -38,24 +38,24 @@
         </tr>
       </tbody>
   </table>
-  <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
+  <nav class="afcl-table-pagination-container flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
     v-if="totalPages > 1"
     :aria-label="$t('Table navigation')">
     <i18n-t 
-      keypath="Showing {from} to {to} of {total}" tag="span" class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"
+      keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
       <template #from><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
       <template #to><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
       <template #total><span class="font-semibold text-gray-900 dark:text-white">{{ props.data.length }}</span></template>
     </i18n-t>
 
-    <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+    <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
       <li v-for="page in totalPages" :key="page">
         <a href="#" 
           @click.prevent="switchPage(page)"
           :aria-current="page === page ? 'page' : undefined"
           :class='{
-            "text-blue-600 bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast hover:opacity-90": page === currentPage,
+            "afcl-table-pagination-button text-blue-600 bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast hover:opacity-90": page === currentPage,
             "text-gray-500 border bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white": page !== currentPage,
             "rounded-s-lg ms-0": page === 1,
             "rounded-e-lg": page === totalPages,

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

@@ -0,0 +1,32 @@
+<template>
+    <label class="inline-flex items-center cursor-pointer bor" :class="{'opacity-50' : props.disabled}">
+        <input :id="id" 
+            type="checkbox" 
+            value="" class="sr-only peer" 
+            :disabled="props.disabled"
+            :checked="props.modelValue"
+            @change="$emit('update:modelValue', $event.target.checked)"
+            > 
+            <div class="border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
+                peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
+                peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:top-[2px] peer-checked:border-none 
+                peer-checked:after:border-lightToggleBorderActive  after:content-[''] after:absolute after:top-[1px] 
+                after:start-[2px] after:bg-lightToggleCircleUnactive peer-checked:after:bg-lightToggleCircleActive dark:after:bg-darkToggleCircleUnactive after:border-lightToggleBgUnactive dark:after:border-darkToggleBgUnactive after:border after:rounded-full 
+                after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
+                dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive dark:peer-checked:after:bg-darkToggleCircleActive">
+            </div>
+        <label :for="id" class="cursor-pointer ms-3 text-sm font-medium text-lightToggleText dark:text-darkToggleText">
+            <slot></slot>
+        </label>
+    </label>
+</template>
+
+<script setup lang="ts">
+    const props = defineProps({
+        modelValue: Boolean,
+        disabled: Boolean,
+    });
+
+    defineEmits(['update:modelValue']);
+    const id = `afcb-${Math.random().toString(36).substring(7)}`
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="triggerEl" class="inline-flex items-center">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
       <slot></slot>
   </div>
   <div

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

@@ -19,6 +19,6 @@ export { default as Skeleton } from './Skeleton.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as MixedChart } from './MixedChart.vue';
 export { default as CountryFlag } from './CountryFlag.vue';
-
-
+export { default as JsonViewer } from './JsonViewer.vue';
+export { default as Toggle } from './Toggle.vue';
 

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

@@ -8,7 +8,7 @@ const modalStore = useModalStore();
   <Teleport to="body">
     <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
+            <div class="afcl-confirmation-container relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                     <svg class="w-3 h-3"  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"/>
@@ -19,11 +19,11 @@ const modalStore = useModalStore();
                     <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
-                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 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">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 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">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>