adminforth 3.35.1 → 4.0.1

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="grid w-40 gap-4 mb-2">
+    <div class="grid w-40 gap-2 mb-2">
       <div>
         <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-lightDatePickerButtonText dark:text-darkDatePickerButtonText">{{ label }}</label>
 
@@ -10,7 +10,7 @@
           </div>
 
           <input ref="datepickerStartEl"  type="text"
-                 class="af-pick-date-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-default block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+                 class="af-pick-date-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-default block w-full px-2.5 py-1.5 leading-5 shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                 :placeholder="$t('Select date')" :disabled="readonly" />
           
         </div>
@@ -18,24 +18,24 @@
     </div>
 
     <div>
-      <div class="grid w-40 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
+      <div class="grid w-40 gap-2 mb-2" :class="{hidden: !showTimeInputs}">
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
               <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
             <input v-model="startTime" type="time" id="start-time" step="1"
-                   class="af-pick-time-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-default block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+                   class="af-pick-time-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-default block w-full px-2.5 py-1.5 leading-5 shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                    value="00:00" :disabled="readonly" required/>
           </div>
         </div>
       </div>
 
       <button type="button"
-              class="text-lightDatePickerExpandText dark:text-darkDatePickerExpandText text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              class="text-lightDatePickerExpandText dark:text-darkDatePickerExpandText text-[13px] font-medium hover:underline p-0 inline-flex items-center gap-0.5 mb-2"
               :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
-        <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
+        <svg class="w-4 h-4" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              fill="none" viewBox="0 0 24 24">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -51,7 +51,7 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 
 import {useCoreStore} from '@/stores/core';
-import {FLEXIBLE_DATEPICKER_FORMAT} from '@/utils';
+import {FLEXIBLE_DATEPICKER_FORMAT} from '@/utils/dateUtils';
 
 import IconCalendar from "@/components/icons/IconCalendar.vue";
 import IconTime from "@/components/icons/IconTime.vue";

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

@@ -18,37 +18,35 @@
     <!-- Modal header -->
     <div
       v-if="header"
-      class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
+      class="flex items-center justify-between px-5 py-4 border-b rounded-t-xl dark:border-darkDialogBreakLine border-lightDialogBreakLine"
     >
-      <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
+      <h3 class="text-base font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
         {{ header }}
       </h3>
       <button
         v-if="headerCloseButton"
         type="button"
-        class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+        class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-default text-sm w-7 h-7 ms-auto inline-flex justify-center items-center focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
         @click="tryToCancelModal"
       >
-        <svg class="w-3 h-3" 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>
+        <IconX class="w-4 h-4" aria-hidden="true" />
         <span class="sr-only">{{ t('Close Modal') }}</span>
       </button>
     </div>
     <!-- Modal body -->
-    <div class="p-4 md:p-5 text-lightDialogBodyText dark:text-darkDialogBodyText">
+    <div class="px-5 py-4 text-sm text-lightDialogBodyText dark:text-darkDialogBodyText">
       <slot></slot>
     </div>
     <!-- Modal footer -->
     <div
       v-if="buttons.length"
-      class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
+      class="flex items-center justify-end flex-wrap gap-y-2 px-5 py-3 border-t border-lightDialogBreakLine rounded-b-xl bg-lightFormHeading dark:bg-darkFormHeading dark:border-darkDialogBreakLine"
     >
       <Button
         v-for="(button, buttonIndex) in buttons"
         :key="buttonIndex"
         v-bind="button.options"
-        :class="{ 'ms-3': buttonIndex > 0 }"
+        :class="{ 'ms-2': buttonIndex > 0 }"
         @click="button.onclick(dialog)"
         :mode="button.options?.mode || 'primary'"
       >
@@ -60,6 +58,7 @@
 
 <script setup lang="ts">
 import Button from "./Button.vue";
+import { IconX } from '@iconify-prerendered/vue-lucide';
 import { ref, computed, type Ref } from 'vue';
 import { Modal } from '@/afcl'
 import { useI18n } from "vue-i18n";

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

@@ -0,0 +1,210 @@
+<template>
+  <div ref="rootRef" v-bind="restAttrs" :class="rootClasses">
+    <div class="afcl-dropdown-menu-trigger" @click="onTriggerClick">
+      <slot name="trigger" :open="isOpen" />
+    </div>
+    <Teleport to="body" :disabled="!teleportToBody">
+      <div
+        v-if="keepMounted || isOpen"
+        v-show="isOpen"
+        ref="contentRef"
+        role="menu"
+        :class="contentClasses"
+        :style="fixedStyle"
+      >
+        <slot :close="close" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, useAttrs, watch } from 'vue';
+import { type ClassNameValue } from 'tailwind-merge';
+import { mergeClasses } from './classMerge';
+import { DROPDOWN_MENU_KEY, type DropdownMenuPlacement } from './dropdownMenuContext';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  placement?: DropdownMenuPlacement,
+  closeOnSelect?: boolean,
+  keepMounted?: boolean,
+  teleportToBody?: boolean,
+  contentClass?: ClassNameValue,
+}>(), {
+  placement: 'bottom-start',
+  closeOnSelect: true,
+  keepMounted: false,
+  teleportToBody: false,
+});
+
+const isOpen = defineModel<boolean>('open', { default: false });
+
+const attrs = useAttrs();
+const restAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const VIEWPORT_MARGIN = 8;
+const GAP = 6;
+
+const PLACEMENT_CLASSES: Record<DropdownMenuPlacement, string> = {
+  'bottom-start': 'top-full left-0 mt-1.5',
+  'bottom-end': 'top-full right-0 mt-1.5',
+  'left-start': 'top-0 right-full mr-2',
+  'right-start': 'top-0 left-full ml-2',
+};
+
+const OPPOSITE_PLACEMENT: Record<DropdownMenuPlacement, DropdownMenuPlacement> = {
+  'bottom-start': 'bottom-end',
+  'bottom-end': 'bottom-start',
+  'left-start': 'right-start',
+  'right-start': 'left-start',
+};
+
+const parentMenu = inject(DROPDOWN_MENU_KEY, null);
+
+const rootRef = ref<HTMLElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
+const flipped = ref(false);
+const measuring = ref(false);
+const fixedStyle = ref<Record<string, string>>();
+
+const currentPlacement = computed(() => flipped.value ? OPPOSITE_PLACEMENT[props.placement] : props.placement);
+
+const rootClasses = computed(() => mergeClasses('afcl-dropdown-menu relative inline-block', attrs.class as ClassNameValue));
+
+const contentClasses = computed(() => mergeClasses(
+  'afcl-dropdown-menu-content z-50 w-max min-w-[11rem] max-w-xs p-1 rounded-lg text-sm text-left',
+  'bg-lightDropdownOptionsBackground text-lightDropdownOptionsText shadow-popover',
+  'dark:bg-darkDropdownOptionsBackground dark:text-darkDropdownOptionsText dark:shadow-darkPopover',
+  props.teleportToBody ? 'fixed overflow-y-auto' : ['absolute', PLACEMENT_CLASSES[currentPlacement.value]],
+  measuring.value && 'invisible',
+  props.contentClass,
+));
+
+provide(DROPDOWN_MENU_KEY, {
+  itemSelected: () => {
+    if (props.closeOnSelect) {
+      close();
+    }
+  },
+});
+
+function open() {
+  isOpen.value = true;
+}
+
+function close() {
+  isOpen.value = false;
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+function onTriggerClick(e: MouseEvent) {
+  // a submenu trigger lives inside an item of the parent menu, opening it must not select that item
+  if (parentMenu) {
+    e.stopPropagation();
+  }
+  toggle();
+}
+
+function flipIfOutsideViewport() {
+  const content = contentRef.value!.getBoundingClientRect();
+  flipped.value = content.left < VIEWPORT_MARGIN || content.right > window.innerWidth - VIEWPORT_MARGIN;
+}
+
+// fixed positioning for teleported content, so menus inside scroll containers (tables) are not clipped
+function placeFixed() {
+  const trigger = rootRef.value!.getBoundingClientRect();
+  const content = contentRef.value!.getBoundingClientRect();
+  const sideways = props.placement === 'left-start' || props.placement === 'right-start';
+
+  let left: number;
+  let top: number;
+  let maxHeight = window.innerHeight - 2 * VIEWPORT_MARGIN;
+  if (sideways) {
+    left = props.placement === 'left-start' ? trigger.left - GAP - content.width : trigger.right + GAP;
+    top = Math.min(trigger.top, window.innerHeight - VIEWPORT_MARGIN - content.height);
+  } else {
+    left = props.placement === 'bottom-start' ? trigger.left : trigger.right - content.width;
+    const spaceBelow = window.innerHeight - trigger.bottom - GAP - VIEWPORT_MARGIN;
+    const spaceAbove = trigger.top - GAP - VIEWPORT_MARGIN;
+    const below = content.height <= spaceBelow || spaceBelow >= spaceAbove;
+    maxHeight = below ? spaceBelow : spaceAbove;
+    top = below ? trigger.bottom + GAP : trigger.top - GAP - Math.min(content.height, maxHeight);
+  }
+  const maxLeft = Math.max(VIEWPORT_MARGIN, window.innerWidth - VIEWPORT_MARGIN - content.width);
+
+  fixedStyle.value = {
+    top: `${Math.round(Math.max(VIEWPORT_MARGIN, top))}px`,
+    left: `${Math.round(Math.min(Math.max(left, VIEWPORT_MARGIN), maxLeft))}px`,
+    maxHeight: `${Math.round(maxHeight)}px`,
+  };
+}
+
+function onDocumentMousedown(e: MouseEvent) {
+  const target = e.target as Node;
+  if (rootRef.value?.contains(target) || contentRef.value?.contains(target)) {
+    return;
+  }
+  close();
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    close();
+  }
+}
+
+function onViewportChange(e: Event) {
+  // scrolling inside the menu itself must not close it
+  if (e.target instanceof Node && contentRef.value?.contains(e.target)) {
+    return;
+  }
+  close();
+}
+
+function addListeners() {
+  document.addEventListener('mousedown', onDocumentMousedown);
+  document.addEventListener('keydown', onKeydown);
+  if (props.teleportToBody) {
+    window.addEventListener('scroll', onViewportChange, true);
+    window.addEventListener('resize', onViewportChange);
+  }
+}
+
+function removeListeners() {
+  document.removeEventListener('mousedown', onDocumentMousedown);
+  document.removeEventListener('keydown', onKeydown);
+  window.removeEventListener('scroll', onViewportChange, true);
+  window.removeEventListener('resize', onViewportChange);
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) {
+    removeListeners();
+    return;
+  }
+  addListeners();
+  measuring.value = true;
+  flipped.value = false;
+  await nextTick();
+  if (props.teleportToBody) {
+    placeFixed();
+    // icons and web fonts can change the content width right after the first paint
+    requestAnimationFrame(() => isOpen.value && placeFixed());
+  } else {
+    flipIfOutsideViewport();
+  }
+  measuring.value = false;
+});
+
+onBeforeUnmount(removeListeners);
+
+defineExpose({ open, close, toggle });
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <div v-bind="restAttrs" :class="rootClasses">
+    <DropdownMenuItem
+      keepMenuOpen
+      :aria-expanded="isOpen"
+      :class="['afcl-dropdown-menu-accordion-trigger', triggerClass]"
+      @click="isOpen = !isOpen"
+    >
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon" />
+      </template>
+      {{ label }}
+      <template #suffix>
+        <IconChevronDown
+          class="w-4 h-4 text-lightInputIconColor dark:text-darkInputIconColor transition-transform duration-150"
+          :class="isOpen && 'rotate-180'"
+        />
+      </template>
+    </DropdownMenuItem>
+    <!-- collapsed items stay in layout with zero height, so the menu already fits its widest item and does not jump on expand -->
+    <div
+      role="group"
+      class="afcl-dropdown-menu-accordion-items [&>.afcl-dropdown-menu-item]:ps-9"
+      :class="!isOpen && 'h-0 overflow-hidden invisible'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { type ClassNameValue } from 'tailwind-merge';
+import { IconChevronDown } from '@iconify-prerendered/vue-lucide';
+import { mergeClasses } from './classMerge';
+import DropdownMenuItem from './DropdownMenuItem.vue';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{
+  label: string,
+  triggerClass?: ClassNameValue,
+}>(), {
+  triggerClass: '',
+});
+
+const isOpen = defineModel<boolean>('open', { default: false });
+
+const attrs = useAttrs();
+const restAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const rootClasses = computed(() => mergeClasses('afcl-dropdown-menu-accordion', attrs.class as ClassNameValue));
+</script>

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

@@ -0,0 +1,86 @@
+<template>
+  <component
+    :is="to && !disabled ? RouterLink : 'div'"
+    v-bind="restAttrs"
+    :to="disabled ? undefined : to"
+    role="menuitem"
+    :tabindex="disabled ? -1 : 0"
+    :aria-disabled="disabled || undefined"
+    :class="classes"
+    @click="select"
+    @keydown.enter.self.prevent="activate"
+    @keydown.space.self.prevent="activate"
+  >
+    <span
+      v-if="$slots.icon"
+      class="afcl-dropdown-menu-item-icon flex shrink-0 items-center [&>svg]:w-4 [&>svg]:h-4"
+      :class="!danger && 'text-lightInputIconColor dark:text-darkInputIconColor'"
+    >
+      <slot name="icon" />
+    </span>
+    <span class="min-w-0 flex-1">
+      <slot />
+    </span>
+    <span v-if="$slots.suffix" class="afcl-dropdown-menu-item-suffix ms-auto flex shrink-0 items-center gap-1 text-xs text-lightDropdownButtonsPlaceholderText dark:text-darkDropdownButtonsPlaceholderText">
+      <slot name="suffix" />
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useAttrs } from 'vue';
+import { RouterLink, type RouteLocationRaw } from 'vue-router';
+import { type ClassNameValue } from 'tailwind-merge';
+import { mergeClasses } from './classMerge';
+import { DROPDOWN_MENU_KEY } from './dropdownMenuContext';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  disabled?: boolean,
+  danger?: boolean,
+  to?: RouteLocationRaw,
+  // a click does not close the menu, e.g. on a row which expands nested items
+  keepMenuOpen?: boolean,
+}>();
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void,
+}>();
+
+const menu = inject(DROPDOWN_MENU_KEY, null);
+
+const attrs = useAttrs();
+const restAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const classes = computed(() => mergeClasses(
+  'afcl-dropdown-menu-item flex w-full items-center gap-2 px-3 py-2 rounded-md text-sm cursor-pointer select-none outline-none transition-colors',
+  // an expanded row (submenu or accordion trigger) stays highlighted
+  'aria-expanded:bg-lightDropdownOptionsHoverBackground dark:aria-expanded:bg-darkDropdownOptionsHoverBackground',
+  !props.disabled && [
+    'hover:bg-lightDropdownOptionsHoverBackground focus-visible:bg-lightDropdownOptionsHoverBackground',
+    'dark:hover:bg-darkDropdownOptionsHoverBackground dark:focus-visible:bg-darkDropdownOptionsHoverBackground',
+  ],
+  props.danger && 'text-lightInputErrorColor dark:text-darkInputErrorColor',
+  props.disabled && 'opacity-50 cursor-not-allowed',
+  attrs.class as ClassNameValue,
+));
+
+// keyboard activation goes through a real click, so RouterLink navigation runs as well
+function activate(e: KeyboardEvent) {
+  (e.currentTarget as HTMLElement).click();
+}
+
+function select(e: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  emit('click', e);
+  if (!props.keepMenuOpen) {
+    menu?.itemSelected();
+  }
+}
+</script>

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

@@ -5,7 +5,7 @@
     @dragleave.prevent="dragging = false"
     @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
-      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-default cursor-pointer
+      <label :id="id" class="flex flex-col items-center justify-center w-full border border-dashed rounded-lg cursor-pointer transition-colors
         hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
         :class="{
           'border-lightDropzoneBorderDragging dark:border-darkDropzoneBorderDragging': dragging,
@@ -26,23 +26,9 @@
         />
 
         <div class="flex flex-col items-center justify-center pt-5 pb-6">
-          <svg
-            v-if="!selectedFiles.length"
-            class="w-8 h-8 mb-4 text-lightDropzoneIcon dark:text-darkDropzoneIcon"
-            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>
+          <span v-if="!selectedFiles.length" class="flex items-center justify-center w-9 h-9 mb-3 rounded-lg border border-lightDropzoneBorder bg-lightDropzoneBackgroundHover text-lightDropzoneIcon dark:border-darkDropzoneBorder dark:bg-darkDropzoneBackgroundHover dark:text-darkDropzoneIcon">
+            <IconCloudUpload class="w-5 h-5" />
+          </span>
 
           <div
             v-else
@@ -53,7 +39,7 @@
                 class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-default 
                       flex items-center gap-1 px-2 py-1 group"
               >
-                <IconFileSolid class="w-4 h-4 flex-shrink-0" />
+                <IconFile class="w-4 h-4 flex-shrink-0" />
                 <span
                   class="truncate max-w-[200px]"
                   :title="file.name"
@@ -64,13 +50,11 @@
                 <button
                   type="button"
                   @click.prevent.stop="removeFile(index)"
-                  class="text-lightDropzoneIcon dark:text-darkDropzoneIcon hover:text-red-600 dark:hover:text-red-400 
+                  class="text-lightDropzoneIcon dark:text-darkDropzoneIcon hover:text-lightInputErrorColor dark:hover:text-darkInputErrorColor 
                         opacity-70 hover:opacity-100 transition-all"
                   :title="$t('Remove file')"
                 >
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
+                  <IconX class="w-3.5 h-3.5" />
                 </button>
               </div>
             </template>
@@ -80,7 +64,7 @@
             v-if="!selectedFiles.length"
             class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"
           >
-            <span class="font-semibold">{{ $t('Click to upload') }}</span>
+            <span class="font-medium text-lightPrimary dark:text-darkPrimary">{{ $t('Click to upload') }}</span>
             {{ $t('or drag and drop') }}
           </p>
 
@@ -96,9 +80,9 @@
 </template>
 
 <script setup lang="ts">
-import { humanifySize } from '@/utils';
+import { humanifySize } from './fileSize';
 import { ref, type Ref, computed } from 'vue';
-import { IconFileSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconFile, IconX, IconCloudUpload } from '@iconify-prerendered/vue-lucide';
 import { watch } from 'vue';
 import { useAdminforth } from '@/adminforth';
 

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

@@ -3,7 +3,7 @@
   <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-lightInputText bg-lightInputBackground border border-s-0 border-lightInputBorder rounded-s-default dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder">
+        class="inline-flex items-center px-2.5 text-sm text-lightInputIconColor bg-lightSecondaryDarken border border-e-0 border-lightInputBorder rounded-s-default dark:bg-darkSecondaryLighten dark:text-darkInputIconColor dark:border-darkInputBorder">
       <slot name="prefix">{{ prefix }}</slot>
     </span>
 
@@ -15,8 +15,8 @@
       @input="$emit('update:modelValue', type === 'number' ? numberInputValue(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
-      class="afcl-input  inline-flex bg-lightInputBackground text-lightInputText dark:text-darkInputText border border-lightInputBorder 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-darkInputBackground dark:border-darkInputBorder placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0"
+      class="afcl-input  inline-flex bg-lightInputBackground text-lightInputText dark:text-darkInputText border border-lightInputBorder rounded-0 shadow-customLight hover:border-lightInputBorderHover focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:hover:border-darkInputBorderHover dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder 
+      block w-20 px-2.5 py-1.5 leading-5 dark:bg-darkInputBackground dark:border-darkInputBorder placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0 transition-colors disabled:cursor-not-allowed"
       :class="{'rounded-l-default': !$slots.prefix && !prefix, 'rounded-r-default': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIos, 'text-sm': !isIos, 'pr-10': $slots.rightIcon }"
       :disabled="readonly"
     >
@@ -26,7 +26,7 @@
     </div>
     <span
         v-if="$slots.suffix || suffix"
-        class="inline-flex items-center px-3 text-sm text-lightInputText bg-lightInputBackground border border-s-0 border-lightInputBorder rounded-e-default dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder ">
+        class="inline-flex items-center px-2.5 text-sm text-lightInputIconColor bg-lightSecondaryDarken border border-s-0 border-lightInputBorder rounded-e-default dark:bg-darkSecondaryLighten dark:text-darkInputIconColor dark:border-darkInputBorder ">
       <slot name="suffix">{{ suffix }}</slot>
     </span>
     

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

@@ -33,5 +33,5 @@ const isExternal = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http');
 });
 
-const linkClasses = "afcl-link text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110 cursor-pointer";
+const linkClasses = "afcl-link font-medium text-lightPrimary underline decoration-lightPrimary/30 underline-offset-[3px] hover:decoration-lightPrimary dark:text-darkPrimary dark:decoration-darkPrimary/40 dark:hover:decoration-darkPrimary cursor-pointer transition-colors";
 </script>

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

@@ -1,5 +1,15 @@
 <template>
+  <!-- a link without href leaves the tab order and does not navigate -->
+  <a
+    v-if="props.disabled"
+    v-bind="restAttrs"
+    aria-disabled="true"
+    :class="buttonClasses"
+  >
+    <slot></slot>
+  </a>
   <router-link
+    v-else
     v-bind="restAttrs"
     :to="props.to"
     :class="buttonClasses"
@@ -11,7 +21,7 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue';
 import { type ClassNameValue } from 'tailwind-merge';
-import { getButtonClasses, type ButtonVariant } from './buttonStyles';
+import { getButtonClasses, type ButtonVariant, type ButtonSize } from './buttonStyles';
 import type { RouteLocationAsRelativeGeneric, RouteLocationAsPathGeneric } from 'vue-router';
 defineOptions({ inheritAttrs: false });
 
@@ -27,6 +37,8 @@ const props = withDefaults(defineProps<{
   disabled?: boolean;
   active?: boolean;
   variant?: ButtonVariant;
+  size?: ButtonSize;
+  iconOnly?: boolean;
   shadow?: boolean;
 }>(), {
   disabled: false,
@@ -38,6 +50,8 @@ const props = withDefaults(defineProps<{
 const buttonClasses = computed(() => getButtonClasses(
   {
     variant: props.variant,
+    size: props.size,
+    iconOnly: props.iconOnly,
     shadow: props.shadow,
     active: props.active,
     disabled: props.disabled,