adminforth 3.35.1 → 4.0.1

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

@@ -1,99 +1,82 @@
-<template >
-  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionFront) => action.showInThreeDotsDropdown))">
-    <Button 
-      ref="buttonTriggerRef"
-      @click="toggleDropdownVisibility"
-      class="py-2.5 px-2.5 text-lightThreeDotsMenuIconDots hover:text-lightThreeDotsMenuIconDotsHover dark:text-darkThreeDotsMenuIconDots  dark:hover:text-darkThreeDotsMenuIconDotsHover"
-      variant="secondary"
+<template>
+  <DropdownMenu
+    v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionFront) => action.showInThreeDotsDropdown))"
+    v-model:open="showDropdown"
+    placement="bottom-start"
+    :closeOnSelect="false"
+    keepMounted
+    :contentClass="['max-w-64', THREE_DOTS_MENU_CONTENT_CLASSES]"
+  >
+    <template #trigger>
+      <Button
+        iconOnly
+        class="text-lightThreeDotsMenuIconDots hover:text-lightThreeDotsMenuIconDotsHover dark:text-darkThreeDotsMenuIconDots  dark:hover:text-darkThreeDotsMenuIconDotsHover"
+        variant="secondary"
+      >
+        <IconEllipsis aria-hidden="true" />
+      </Button>
+    </template>
+
+    <DropdownMenuItem
+      v-for="(item, i) in threeDotsDropdownItems"
+      :key="`dropdown-item-${i}`"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      :disabled="!!(checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes)"
+      @click="injectedComponentClick(i, $event)"
     >
-      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
-        <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
-      </svg>
-    </Button>
-
-    <!-- Dropdown menu -->
-    <div 
-      ref="dropdownRef"
-      :class="{
-        'block': showDropdown,
-        'hidden': !showDropdown,
-        'left-0': openToRight,
-        'right-0': !openToRight
-      }"
-      class="absolute z-50 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-max max-w-64 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
-        <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
-          <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
-            <div  
-              class="block hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
-              :class="{
-                'pointer-events-none': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
-                'opacity-50': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
-                'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
-              }"
-              @click="injectedComponentClick(i, $event)"
-            >
-              <div class="wrapper" v-if="getCustomComponent(item)">
-                <component 
-                  :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)!"
-                  :meta="item.meta" 
-                  :resource="coreStore.resource" 
-                  :adminUser="coreStore.adminUser"
-                  :checkboxes="checkboxes"
-                  :updateList="props.updateList"
-                  :clearCheckboxes="clearCheckboxes"
-                />
-              </div>
-            </div>
-          </li>
-          <li v-for="(action, i) in customActions" :key="action.id">
-            <div 
-              class="wrapper"                 
-              @click="injectedComponentClick(threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i, $event)"
-            > 
-              <component
-                :ref="(el: any) => setComponentRef(el, threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
-                :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
-                :meta="formatComponent(action.customComponent).meta"
-                @callAction="(payload? : Object) => handleActionClick(action, payload)"
-              >
-                <a @click.prevent class="block">
-                  <div class="flex items-center gap-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-                    <component 
-                      v-if="action.icon && !actionLoadingStates[action.id!]" 
-                      :is="getIcon(action.icon)" 
-                      class="w-4 h-4 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
-                    />
-                    <Spinner
-                      v-if="actionLoadingStates[action.id!]"
-                      class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
-                    />
-                    {{ action.name }}
-                  </div>
-                </a>
-              </component>
-            </div>
-          </li>
-          <li v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)" :key="action.id">
-            <a @click.prevent="startBulkAction(action.id)" 
-                class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
-                :class="{
-                  'pointer-events-none': checkboxes && checkboxes.length === 0,
-                  'opacity-50': checkboxes && checkboxes.length === 0,
-                  'cursor-not-allowed': checkboxes && checkboxes.length === 0
-                }">
-              <div class="flex items-center gap-2">
-                <component 
-                  v-if="action.icon" 
-                  :is="getIcon(action.icon)" 
-                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
-                />
-                {{ action.label }}
-              </div>
-            </a>
-          </li>
-        </ul>
-    </div>
-  </div>
+      <component
+        v-if="getCustomComponent(item)"
+        :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)!"
+        :meta="item.meta"
+        :resource="coreStore.resource"
+        :adminUser="coreStore.adminUser"
+        :checkboxes="checkboxes"
+        :updateList="props.updateList"
+        :clearCheckboxes="clearCheckboxes"
+      />
+    </DropdownMenuItem>
+
+    <DropdownMenuItem
+      v-for="(action, i) in customActions"
+      :key="action.id"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      @click="injectedComponentClick(threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i, $event)"
+    >
+      <component
+        :ref="(el: any) => setComponentRef(el, threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
+        :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
+        :meta="formatComponent(action.customComponent).meta"
+        @callAction="(payload? : Object) => handleActionClick(action, payload)"
+      >
+        <!-- preventDefault marks the click as handled by the action component -->
+        <span @click.prevent class="flex flex-1 items-center gap-2">
+          <component
+            v-if="action.icon && !actionLoadingStates[action.id!]"
+            :is="getIcon(action.icon)"
+            class="w-4 h-4 text-lightInputIconColor dark:text-darkInputIconColor"
+          />
+          <Spinner
+            v-if="actionLoadingStates[action.id!]"
+            class="w-4 h-4 text-lightSkeletonBackgroundColor dark:text-darkSkeletonBackgroundColor fill-lightListTableText dark:fill-darkListTableText"
+          />
+          {{ action.name }}
+        </span>
+      </component>
+    </DropdownMenuItem>
+
+    <DropdownMenuItem
+      v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)"
+      :key="action.id"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      :disabled="!!(checkboxes && checkboxes.length === 0)"
+      @click="startBulkAction(action.id!)"
+    >
+      <template v-if="action.icon" #icon>
+        <component :is="getIcon(action.icon)" />
+      </template>
+      {{ action.label }}
+    </DropdownMenuItem>
+  </DropdownMenu>
 </template>
 
 
@@ -103,9 +86,11 @@ import { useCoreStore } from '@/stores/core';
 import { useAdminforth } from '@/adminforth';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
-import { ref, nextTick, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
+import { ref, type ComponentPublicInstance, onMounted } from 'vue';
 import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
-import { Spinner, Button } from '@/afcl';
+import { Spinner, Button, DropdownMenu, DropdownMenuItem } from '@/afcl';
+import { IconEllipsis } from '@iconify-prerendered/vue-lucide';
+import { THREE_DOTS_MENU_CONTENT_CLASSES, THREE_DOTS_MENU_ITEM_CLASSES } from '@/utils/threeDotsMenu';
 
 const { list, alert} = useAdminforth();
 const route = useRoute();
@@ -113,10 +98,7 @@ const coreStore = useCoreStore();
 const router = useRouter();
 const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 const showDropdown = ref(false);
-const openToRight = ref(true);
 const actionLoadingStates = ref<Record<string, boolean>>({});
-const dropdownRef = ref<HTMLElement | null>(null);
-const buttonTriggerRef = ref<ComponentPublicInstance | null>(null);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
@@ -178,8 +160,8 @@ function startBulkAction(actionId: string) {
   showDropdown.value = false;
 }
 
-async function injectedComponentClick(index: number, event?: MouseEvent) {
-  if (event?.defaultPrevented) {
+async function injectedComponentClick(index: number, event: MouseEvent) {
+  if (event.defaultPrevented) {
     showDropdown.value = false;
     return;
   }
@@ -190,42 +172,12 @@ async function injectedComponentClick(index: number, event?: MouseEvent) {
   showDropdown.value = false;
 }
 
-async function toggleDropdownVisibility() {
-  showDropdown.value = !showDropdown.value;
-  if (!showDropdown.value) return;
-  await nextTick();
-  const triggerRect = (buttonTriggerRef.value!.$el as HTMLElement).getBoundingClientRect();
-  const appEl = document.getElementById('app')!;
-  const appContentRight = appEl.getBoundingClientRect().right - parseFloat(getComputedStyle(appEl).paddingRight);
-  openToRight.value = triggerRect.left + dropdownRef.value!.offsetWidth <= appContentRight;
-}
-
-function handleClickOutside(e: MouseEvent) {
-  if (!dropdownRef.value) return
-
-  const triggerEl = buttonTriggerRef.value?.$el as HTMLElement | undefined;
-
-  if (!dropdownRef.value.contains(e.target as Node) && !triggerEl?.contains(e.target as Node)) {
-    showDropdown.value = false;
-  }
-}
-
 onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside)
-})
+  list.closeThreeDotsDropdown = () => {
+    showDropdown.value = false;
+  };
+});
 
 </script>
 
-<style lang="scss" scoped>
-  .wrapper {
-    @apply px-4 py-2 
-    hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover 
-    dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover
-    cursor-pointer;
-  }
-</style>
 

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

@@ -1,15 +1,14 @@
 <template>
     
 
-<div class="afcl-toast flex items-center w-full p-4 rounded-lg shadow-lg dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText border-l-4"
-    :class="variantConfig.borderClass"
+<div class="afcl-toast flex items-center w-full p-3 pe-4 rounded-lg shadow-popover dark:shadow-darkPopover dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText"
     role="alert"
     @mouseenter="pauseTimer"
     @mouseleave="resumeTimer"
 >
     <div class="relative w-8 h-8 flex items-center justify-center">
         <div class="absolute af-toast-icon inline-flex items-center justify-center flex-shrink-0 rounded-lg w-full h-full" :class="variantConfig.iconClass">
-            <component :is="variantConfig.icon" class="w-5 h-5" aria-hidden="true" />
+            <component :is="variantConfig.icon" class="w-4 h-4" aria-hidden="true" />
         </div>
         <svg v-if="hasTimer" class="absolute inset-0 w-full h-full rotate-180">
             <rect
@@ -40,10 +39,8 @@
             </div>
         </div>
     </div>
-    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-lg focus:ring-2 focus:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus:ring-darkToastCloseIconFocusRing" >
-        <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"/>
-        </svg>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-default focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus-visible:ring-darkToastCloseIconFocusRing" >
+        <IconX class="w-3.5 h-3.5" />
     </button>
 </div>
 
@@ -53,7 +50,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, computed, ref } from 'vue';
 import { useToastStore } from '@/stores/toast';
-import { IconInfoCircleSolid, IconCloseCircleSolid, IconExclamationCircleSolid, IconCheckCircleSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconInfo, IconCircleX, IconTriangleAlert, IconCircleCheck, IconX } from '@iconify-prerendered/vue-lucide';
 
 const toastStore = useToastStore();
 const emit = defineEmits(['close']);
@@ -70,28 +67,24 @@ const props = defineProps<{
 
 const VARIANT_CONFIGS = {
     info: {
-        icon: IconInfoCircleSolid,
-        borderClass: 'border-lightPrimary dark:border-darkPrimary',
-        iconClass: 'text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity dark:bg-darkPrimary/50 dark:!text-blue-100',
+        icon: IconInfo,
+        iconClass: 'text-lightPrimary bg-lightPrimaryOpacity dark:text-darkPrimary dark:bg-darkPrimaryOpacity',
         strokeClass: 'stroke-lightPrimary/50 dark:stroke-darkPrimary/30',
     },
     danger: {
-        icon: IconCloseCircleSolid,
-        borderClass: 'border-red-500 dark:border-red-800',
-        iconClass: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
-        strokeClass: 'stroke-red-500 dark:stroke-red-700',
+        icon: IconCircleX,
+        iconClass: 'text-lightDanger bg-lightDangerSoft dark:text-darkDanger dark:bg-darkDangerSoft',
+        strokeClass: 'stroke-lightDanger/50 dark:stroke-darkDanger/30',
     },
     warning: {
-        icon: IconExclamationCircleSolid,
-        borderClass: 'border-orange-500 dark:border-orange-700',
-        iconClass: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
-        strokeClass: 'stroke-orange-500 dark:stroke-orange-600',
+        icon: IconTriangleAlert,
+        iconClass: 'text-lightWarning bg-lightWarningSoft dark:text-darkWarning dark:bg-darkWarningSoft',
+        strokeClass: 'stroke-lightWarning/50 dark:stroke-darkWarning/30',
     },
     success: {
-        icon: IconCheckCircleSolid,
-        borderClass: 'border-green-500 dark:border-green-800',
-        iconClass: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
-        strokeClass: 'stroke-green-500 dark:stroke-green-600',
+        icon: IconCircleCheck,
+        iconClass: 'text-lightSuccess bg-lightSuccessSoft dark:text-darkSuccess dark:bg-darkSuccessSoft',
+        strokeClass: 'stroke-lightSuccess/50 dark:stroke-darkSuccess/30',
     },
 } as const;
 

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

@@ -1,43 +1,23 @@
 <template>
-  <div v-if="options && options.length" class="min-w-40">
-    <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm 
-      bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText 
-      hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover 
-      dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover
-      w-full select-none "
-      @click="showDropdown = !showDropdown"
+  <DropdownMenuAccordion v-if="options && options.length" :label="$t('Settings')" :triggerClass="USER_MENU_ITEM_CLASSES">
+    <DropdownMenuItem
+      v-for="option in options"
+      :key="option.slug ?? option.pageLabel"
+      :to="getRoute(option)"
+      :class="USER_MENU_ITEM_CLASSES"
     >
-        <span>{{ $t('Settings') }}</span>
-        <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
-            :class="{ 'transform rotate-180': showDropdown }"
-      />
-    </div>
-
-    <!-- collapsed submenu stays in layout with zero height, so popup width already fits its widest item and does not jump on expand -->
-    <div :class="{ 'h-0 overflow-hidden invisible': !showDropdown }">
-
-      <router-link class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
-        bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText 
-        hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover 
-        dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover
-        w-full text-select-none pl-5 select-none"
-        v-for="option in options"
-        :to="getRoute(option)"
-      >
-        <span class="mr-1">
-          <component v-if="option.icon" :is="getIcon(option.icon)" class="w-5 h-5 transition duration-75" ></component>
-        </span>
-        <span>{{ option.pageLabel }}</span>
-      </router-link>
-    </div>
-
-   
-  </div>
+      <template v-if="option.icon" #icon>
+        <component :is="getIcon(option.icon)" />
+      </template>
+      {{ option.pageLabel }}
+    </DropdownMenuItem>
+  </DropdownMenuAccordion>
 </template>
 
 <script setup lang="ts">
-import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
-import { computed, ref, onMounted, watch } from 'vue';
+import { computed } from 'vue';
+import { DropdownMenuAccordion, DropdownMenuItem } from '@/afcl';
+import { USER_MENU_ITEM_CLASSES } from '@/utils/userMenu';
 import { useCoreStore } from '@/stores/core';
 import { getIcon } from '@/utils';
 import { useRouter } from 'vue-router';
@@ -47,7 +27,6 @@ const router = useRouter();
 const coreStore = useCoreStore();
 const { t } = useI18n();
 
-const showDropdown = ref(false);
 const props = defineProps(['meta', 'resource']);
 
 const options = computed(() => {

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

@@ -8,7 +8,7 @@
       <span
         v-if="record[column.name] && column.isArray?.enabled"
         v-for="foreignResource in record[column.name]"
-        class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
+        class="inline-flex items-center rounded-full m-0.5 bg-lightButtonGroupActiveBackground dark:bg-darkButtonGroupActiveBackground text-lightButtonGroupActiveText dark:text-darkButtonGroupActiveText h-5 px-2 text-xs font-medium"
       >
         <RouterLink
           v-if="foreignResource && foreignResource?.pk"
@@ -53,14 +53,14 @@
         {{ record[column.name].label }}
       </p>
       <div v-else>
-        <span class="text-gray-400">-</span>
+        <span class="text-lightInputPlaceholderText dark:text-darkInputPlaceholderText">-</span>
       </div>
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="record[column.name] === true" class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
-      <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
+      <span v-if="record[column.name] === true" class="af-true-value-icon gap-1" :class="[BADGE_CLASSES, TRUE_BADGE_CLASSES]"><IconCheck class="w-3 h-3" aria-hidden="true" />{{ $t('Yes') }}</span>
+      <span v-else-if="record[column.name] === false" class="af-false-value-icon" :class="[BADGE_CLASSES, FALSE_BADGE_CLASSES]">{{ $t('No') }}</span>
+      <span v-else class="border-dashed text-lightInputIconColor border-lightInputBorder dark:text-darkInputIconColor dark:border-darkInputBorder" :class="BADGE_CLASSES">{{ $t('Unset') }}</span>
     </span>
     <span
       v-else-if="column.type === 'json' && column.isArray?.enabled"
@@ -70,19 +70,19 @@
         <span
           v-if="column.isArray.itemType === 'boolean' && arrayItem"
           :key="`${column.name}-${arrayItemIndex}-true`"
-          class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          class="af-true-value-icon gap-1" :class="[BADGE_CLASSES, TRUE_BADGE_CLASSES]">
           {{ $t('Yes') }}
         </span>
         <span
           v-else-if="column.isArray.itemType === 'boolean'"
           :key="`${column.name}-${arrayItemIndex}-false`"
-          class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          class="af-false-value-icon" :class="[BADGE_CLASSES, FALSE_BADGE_CLASSES]">
           {{ $t('No') }}
         </span>
         <span
           v-else
           :key="`${column.name}-${arrayItemIndex}`"
-          class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
+          class="inline-flex items-center rounded-full m-0.5 bg-lightButtonGroupActiveBackground dark:bg-darkButtonGroupActiveBackground text-lightButtonGroupActiveText dark:text-darkButtonGroupActiveText h-5 px-2 text-xs font-medium"
         >
           {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type as "show" | "list") }}
         </span>
@@ -119,12 +119,17 @@ import {checkEmptyValues, formatDate, formatDateTime, formatTime} from '@/utils'
 import { useRoute, useRouter } from 'vue-router';
 import "vue3-json-viewer/dist/vue3-json-viewer.css";
 import { computed, defineAsyncComponent } from 'vue';
+import { IconCheck } from '@iconify-prerendered/vue-lucide';
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
 const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
 
 import { useCoreStore } from '@/stores/core';
 import type { any } from 'zod';
 
+const BADGE_CLASSES = 'inline-flex items-center whitespace-nowrap me-2 px-2 h-5 rounded-full border text-xs font-medium';
+const TRUE_BADGE_CLASSES = 'bg-lightSuccessSoft text-lightSuccess border-lightSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess dark:border-darkSuccessBorder';
+const FALSE_BADGE_CLASSES = 'bg-lightSecondaryDarken text-lightInputIconColor border-transparent dark:bg-darkSecondaryLighten dark:text-darkInputIconColor';
+
 const coreStore = useCoreStore();
 const route = useRoute();
 

package/dist/spa/src/components/icons/IconCalendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+    <path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>
   </svg>
-</template>
+</template>

package/dist/spa/src/components/icons/IconTime.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"></path>
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
   </svg>
-</template>
+</template>

package/dist/spa/src/index.scss

@@ -25,11 +25,15 @@
 //   }
 // }
 
-body {
+html {
   scrollbar-gutter: stable;
 }
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .af-button-shadow {
-  box-shadow: -0px 6px 6px rgb(0, 0, 0, 0.1);
+  box-shadow: 0 1px 1px rgb(24 24 27 / 0.05);
 }
 
 *{

package/dist/spa/src/main.ts

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import '@fontsource-variable/geist'
+import '@fontsource-variable/geist-mono'
 /* IMPORTANT:ADMINFORTH IMPORTS */
 
 

package/dist/spa/src/renderers/CompactField.vue

@@ -1,7 +1,7 @@
 <template>
   <Tooltip>
-    <span class="flex items-center">
-      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="min-w-5 min-h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    <span class="flex items-center gap-1.5 font-mono text-[12.5px]">
+      {{ visualValue }} <IconCopy @click.stop="copyToCB" class="min-w-4 w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 
 import { computed, ref, onMounted, nextTick } from 'vue';
-import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconCopy } from '@iconify-prerendered/vue-lucide';
 import Tooltip from '@/afcl/Tooltip.vue';
 import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';

package/dist/spa/src/renderers/CompactUUID.vue

@@ -1,7 +1,7 @@
 <template>
   <Tooltip>
-    <span class="flex items-center">
-      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="min-w-5 min-h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    <span class="flex items-center gap-1.5 font-mono text-[12.5px]">
+      {{ visualValue }} <IconCopy @click.stop="copyToCB" class="min-w-4 w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 
 import { computed, ref, onMounted, nextTick } from 'vue';
-import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconCopy } from '@iconify-prerendered/vue-lucide';
 import Tooltip from '@/afcl/Tooltip.vue';
 import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';

package/dist/spa/src/renderers/SensitiveBlurCell.vue

@@ -51,23 +51,23 @@
       </span>
     </div>
 
-    <span v-if="eyeButton" class="shrink-0 w-5 h-5">
-      <IconEyeSolid
+    <span v-if="eyeButton" class="shrink-0 w-4 h-4">
+      <IconEye
         v-if="!show"
         @click.stop="toggle"
-        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+        class="w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors"
       />
-      <IconEyeSlashSolid
+      <IconEyeOff
         v-else
         @click.stop="toggle"
-        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+        class="w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors"
       />
     </span>
 
-    <span v-if="showCopy && rawValue" class="shrink-0 w-5 h-5">
-      <IconFileCopyAltSolid
+    <span v-if="showCopy && rawValue" class="shrink-0 w-4 h-4">
+      <IconCopy
         @click.stop="copyToCB"
-        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+        class="w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors"
       />
     </span>
   </div>
@@ -76,7 +76,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { IconFileCopyAltSolid, IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconCopy, IconEye, IconEyeOff } from '@iconify-prerendered/vue-lucide';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import Tooltip from '@/afcl/Tooltip.vue';
 import { useAdminforth } from '@/adminforth';

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

@@ -0,0 +1,7 @@
+// colors of the three dots menus (list header and list rows), themable with the ThreeDotsMenu tokens
+export const THREE_DOTS_MENU_CONTENT_CLASSES = `bg-lightThreeDotsMenuBodyBackground text-lightThreeDotsMenuBodyText
+  dark:bg-darkThreeDotsMenuBodyBackground dark:text-darkThreeDotsMenuBodyText`;
+
+export const THREE_DOTS_MENU_ITEM_CLASSES = `hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover
+  focus-visible:bg-lightThreeDotsMenuBodyBackgroundHover dark:focus-visible:bg-darkThreeDotsMenuBodyBackgroundHover
+  dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover`;

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

@@ -0,0 +1,5 @@
+// colors of the user menu items, themable with the UserMenu tokens
+export const USER_MENU_ITEM_CLASSES = `bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover
+  focus-visible:bg-lightUserMenuItemBackgroundHover aria-expanded:bg-lightUserMenuItemBackgroundHover
+  dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover
+  dark:focus-visible:bg-darkUserMenuItemBackgroundHover dark:aria-expanded:bg-darkUserMenuItemBackgroundHover`;