adminforth 3.35.1 → 4.0.1

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

@@ -1,70 +1,110 @@
-import { extendTailwindMerge, type ClassNameValue } from 'tailwind-merge';
-
-// `rounded-default` comes from the themable borderRadius.default token, tailwind-merge does not
-// know it out of the box and would not treat it as conflicting with rounded-* passed from outside
-const twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      rounded: [{ rounded: ['default'] }],
-    },
-  },
-});
+import { type ClassNameValue } from 'tailwind-merge';
+import { mergeClasses } from './classMerge';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+export type ButtonSize = 'md' | 'sm';
 
 export const buttonBaseStyles = `
   flex items-center justify-center
-  gap-1 border focus:ring-4 focus:outline-none
-  focus:ring-opacity-50 font-medium rounded-default
-  text-sm px-5 py-2.5 text-center transition-all duration-200
+  gap-1.5 border focus-visible:ring-[3px] focus:outline-none
+  font-medium rounded-default whitespace-nowrap
+  text-sm leading-5 px-3.5 py-1.5 text-center transition-colors duration-150
 `;
 
-export const buttonVariantStyles: Record<ButtonVariant, string> = {
+const variantStyles: Record<ButtonVariant, string> = {
   primary: `
     text-lightButtonsText bg-lightButtonsBackground border-lightButtonsBorder
-    dark:bg-darkButtonsBackground hover:bg-lightButtonsHover
-    hover:border-lightButtonsBorderHover focus:ring-lightButtonFocusRing
-    dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText
-    dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover
-    dark:hover:border-darkButtonsBorderHover
+    focus-visible:ring-lightButtonFocusRing
+
+    dark:text-darkButtonsText dark:bg-darkButtonsBackground dark:border-darkButtonsBorder
+    dark:focus-visible:ring-darkButtonFocusRing
   `,
 
   secondary: `
-    text-lightSecondaryContrast/90 bg-lightSecondary border-lightSecondaryContrast/15
-    hover:bg-lightSecondaryDarken focus:ring-lightSecondary hover:text-lightPrimary
+    text-lightSecondaryContrast/90 bg-lightSecondary border-lightSecondaryContrast/[0.17]
+    focus-visible:ring-lightFocusRing
 
-    dark:bg-darkSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast/60
-    dark:border-darkSecondaryContrast/15 dark:hover:bg-darkSecondaryLighten
-    dark:hover:text-white
+    dark:text-darkSecondaryContrast/80 dark:bg-darkSecondary dark:border-darkSecondaryContrast/[0.17]
+    dark:focus-visible:ring-darkFocusRing
   `,
 
   danger: `
     text-lightAcceptModalConfirmButtonText dark:text-darkAcceptModalConfirmButtonText
     bg-lightAcceptModalConfirmButtonBackground dark:bg-darkAcceptModalConfirmButtonBackground
-    hover:bg-lightAcceptModalConfirmButtonBackgroundHover dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover
-    focus:ring-lightAcceptModalConfirmButtonFocus dark:focus:ring-darkAcceptModalConfirmButtonFocus
-    border-transparent hover:border-transparent
+    focus-visible:ring-lightAcceptModalConfirmButtonFocus dark:focus-visible:ring-darkAcceptModalConfirmButtonFocus
+    border-transparent
+  `,
+
+  ghost: `
+    bg-transparent border-transparent text-lightInputIconColor focus-visible:ring-lightFocusRing
+    dark:text-darkInputIconColor dark:focus-visible:ring-darkFocusRing
   `,
 };
 
+// kept apart so a disabled button gets no hover feedback
+const variantHoverStyles: Record<ButtonVariant, string> = {
+  primary: `
+    hover:bg-lightButtonsHover hover:border-lightButtonsBorderHover
+    dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover
+  `,
+  secondary: `
+    hover:bg-lightSecondaryDarken hover:text-lightSecondaryContrast
+    dark:hover:bg-darkSecondaryLighten dark:hover:text-darkSecondaryContrast
+  `,
+  danger: `
+    hover:bg-lightAcceptModalConfirmButtonBackgroundHover hover:border-transparent
+    dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover
+  `,
+  ghost: `
+    hover:bg-lightSecondaryDarken hover:text-lightInputText
+    dark:hover:bg-darkSecondaryLighten dark:hover:text-darkInputText
+  `,
+};
+
+// public styles of an enabled button, for apps which style their own elements as AFCL buttons
+export const buttonVariantStyles = Object.fromEntries(
+  Object.entries(variantStyles).map(([variant, styles]) => [variant, `${styles} ${variantHoverStyles[variant as ButtonVariant]}`]),
+) as Record<ButtonVariant, string>;
+
+// md is the base size, its height comes from the padding and line height of the label
+export const buttonSizeStyles: Record<ButtonSize, string> = {
+  md: '',
+  sm: 'h-7 py-0 px-2.5 text-xs',
+};
+
+// a square button with one icon in the slot
+export const buttonIconOnlyStyles: Record<ButtonSize, string> = {
+  md: 'h-[2.125rem] w-[2.125rem] shrink-0 p-0 [&>svg]:w-4 [&>svg]:h-4',
+  sm: 'w-7 shrink-0 p-0 [&>svg]:w-4 [&>svg]:h-4',
+};
+
 export const buttonActiveStyles = 'active brightness-200 hover:brightness-150';
 
-export const buttonDisabledStyles = 'cursor-default opacity-50 pointer-events-none';
+export const buttonDisabledStyles = 'cursor-not-allowed opacity-50';
 
 
 export function getButtonClasses(
   options: {
     variant?: ButtonVariant;
+    size?: ButtonSize;
+    iconOnly?: boolean;
     shadow?: boolean;
     active?: boolean;
     disabled?: boolean;
   },
   ...extraClasses: ClassNameValue[]
 ): string {
-  return twMerge(
+  const variant = options.variant ?? 'primary';
+  const size = options.size ?? 'md';
+  return mergeClasses(
     buttonBaseStyles,
-    buttonVariantStyles[options.variant ?? 'primary'],
-    options.shadow && 'af-button-shadow',
+    variantStyles[variant],
+    !options.disabled && variantHoverStyles[variant],
+    buttonSizeStyles[size],
+    options.iconOnly && buttonIconOnlyStyles[size],
+    // ghost has no surface to lift
+    options.shadow && variant !== 'ghost' && 'af-button-shadow',
     options.active && buttonActiveStyles,
     options.disabled && buttonDisabledStyles,
     ...extraClasses,

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

@@ -0,0 +1,19 @@
+// categorical slots in fixed order, the first five are the chart palette drawn in design/system.html
+export const CHART_COLORS = [
+  "#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#008300", "#6250d6", "#e34948",
+  "#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F", "#EDC949", "#B07AA1", "#FF9DA6", "#9C755F", "#BAB0AC",
+  "#2B8A86", "#CC4D58", "#F7941D", "#F9C232", "#729B33", "#497288", "#16578D", "#5F4D99", "#F9F871", "#F9F871",
+];
+
+// merges ApexCharts options on the lowest level ({ chart: { height } } keeps the rest of chart),
+// every touched level is copied so the shared base options of a component are never mutated
+export function mergeChartOptions(options: any, overrides: any) {
+  for (const key in overrides) {
+    if (typeof overrides[key] === 'object' && !Array.isArray(overrides[key])) {
+      options[key] = { ...options[key] };
+      mergeChartOptions(options[key], overrides[key]);
+    } else {
+      options[key] = overrides[key];
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// `rounded-default` comes from the themable borderRadius.default token, tailwind-merge does not
+// know it out of the box and would not treat it as conflicting with rounded-* passed from outside
+export const mergeClasses = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      rounded: [{ rounded: ['default'] }],
+    },
+  },
+});

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

@@ -0,0 +1,10 @@
+import type { InjectionKey } from 'vue';
+
+export type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'left-start' | 'right-start';
+
+export interface DropdownMenuContext {
+  // called by DropdownMenuItem after its click handlers ran
+  itemSelected: () => void;
+}
+
+export const DROPDOWN_MENU_KEY: InjectionKey<DropdownMenuContext> = Symbol('afcl-dropdown-menu');

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

@@ -0,0 +1,12 @@
+export function humanifySize(size: number) {
+  if (!size) {
+    return '';
+  }
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024
+    i++
+  }
+  return `${size.toFixed(1)} ${units[i]}`
+}

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

@@ -27,4 +27,7 @@ export { default as Textarea } from './Textarea.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Card } from './Card.vue';
 export { default as Modal } from './Modal.vue';
+export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuAccordion } from './DropdownMenuAccordion.vue';
 export { buttonBaseStyles, buttonVariantStyles } from './buttonStyles.js';

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

@@ -6,39 +6,37 @@
       backgroundCustomClasses="z-[998]"
       modalCustomClasses="z-[999] flex items-center justify-center" 
     >
-      <div class="relative p-6 sm:p-8 sm:w-[440px] rounded-lg shadow-xl bg-lightAcceptModalBackground dark:bg-darkAcceptModalBackground" >
+      <div class="relative p-6 sm:w-[420px] rounded-xl shadow-popover dark:shadow-darkPopover bg-lightAcceptModalBackground dark:bg-darkAcceptModalBackground" >
         
-        <button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
-          <svg class="w-3.5 h-3.5" 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 type="button" @click="modalStore.togleModal()" class="absolute top-3 right-3 p-1.5 rounded-default text-lightAcceptModalCloseIcon hover:text-lightAcceptModalCloseIconHover hover:bg-lightAcceptModalCloseIconHoverBackground dark:text-darkAcceptModalCloseIcon dark:hover:text-darkAcceptModalCloseIconHover dark:hover:bg-darkAcceptModalCloseIconHoverBackground transition-colors" >
+          <IconX class="w-4 h-4" />
         </button>
 
         <div class="text-center flex flex-col">
-          <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-4 relative"
-            :class="modalStore.modalContent.dangerous ? 'bg-red-50 dark:bg-red-900/20' : 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity'">
-            <IconClipboardDocumentSolid class="w-10 h-10"
-              :class="modalStore.modalContent.dangerous ? 'text-red-500' : 'text-lightButtonsBackground dark:text-darkButtonsBackground'" />
-            <div class="absolute bottom-1 right-1 rounded-default w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800"
-              :class="modalStore.modalContent.dangerous ? 'bg-red-500' : 'bg-lightButtonsBackground dark:bg-darkButtonsBackground'">
+          <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-xl mb-4 relative"
+            :class="modalStore.modalContent.dangerous ? 'bg-lightDangerSoft dark:bg-darkDangerSoft' : 'bg-lightSecondaryDarken dark:bg-darkSecondaryLighten'">
+            <IconClipboardList class="w-6 h-6"
+              :class="modalStore.modalContent.dangerous ? 'text-lightAcceptModalWarningIcon dark:text-darkAcceptModalWarningIcon' : 'text-lightButtonsBackground dark:text-darkButtonsBackground'" />
+            <div class="absolute -bottom-1 -right-1 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-lightAcceptModalBackground dark:border-darkAcceptModalBackground"
+              :class="modalStore.modalContent.dangerous ? 'bg-lightAcceptModalConfirmButtonBackground dark:bg-darkAcceptModalConfirmButtonBackground' : 'bg-lightButtonsBackground dark:bg-darkButtonsBackground'">
                 <span class="text-lightButtonsText dark:text-darkButtonsText text-[10px] font-medium">!</span>
             </div>
           </div>
           
           <div class="flex flex-col gap-3">
-            <h3 v-if="modalStore?.modalContent?.title" class="text-2xl font-bold text-gray-900 dark:text-white">
+            <h3 v-if="modalStore?.modalContent?.title" class="text-lg font-semibold tracking-tight text-lightDialogHeaderText dark:text-darkDialogHeaderText">
               {{ modalStore.modalContent.title }}
             </h3>
             
-            <div class="text-[15px] text-gray-600 dark:text-gray-300">
-              <div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
-              <p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
+            <div class="text-sm text-lightAcceptModalText dark:text-darkAcceptModalText">
+              <div v-if="modalStore?.modalContent?.contentHTML" v-html="modalStore.modalContent.contentHTML"></div>
+              <p v-else-if="modalStore?.modalContent?.content">{{ modalStore.modalContent.content }}</p>
             </div>
           </div>
 
-          <hr class="border-t-2 border-gray-300 dark:border-gray-500 my-6">
+          <hr class="border-t border-lightDialogBreakLine dark:border-darkDialogBreakLine my-5">
 
-          <div class="flex justify-center gap-4 w-full">
+          <div class="flex justify-center gap-2 w-full">
             <Button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" variant="secondary" class="flex-1">
                 {{ modalStore?.modalContent?.cancelText }}
             </Button>
@@ -52,7 +50,7 @@
             </Button>
           </div>
 
-          <div v-if="modalStore?.modalContent?.guardMessage" class="flex items-center justify-center mt-6 text-xs text-gray-400 gap-1.5 font-medium">
+          <div v-if="modalStore?.modalContent?.guardMessage" class="flex items-center justify-center mt-5 text-xs text-lightAcceptModalText dark:text-darkAcceptModalText gap-1.5 font-medium">
             <IconShieldCheck class="w-4 h-4" />
             <span> {{ modalStore?.modalContent?.guardMessage }}</span>
           </div>
@@ -67,7 +65,7 @@
 import { watch, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
 import { Button, Modal } from '@/afcl';
-import { IconClipboardDocumentSolid, IconShieldCheck } from '@iconify-prerendered/vue-heroicons';
+import { IconClipboardList, IconShieldCheck, IconX } from '@iconify-prerendered/vue-lucide';
 
 
 const modalRef = ref();

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

@@ -1,29 +1,26 @@
 <template>
-  <nav class="flex" aria-label="Breadcrumb">
+  <nav class="flex items-center min-h-[2.25rem]" aria-label="Breadcrumb">
       <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
         <li class="inline-flex items-center">
-          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-lightBreadcrumbsHomepageText hover:text-lightBreadcrumbsHomepageTextHover dark:text-darkBreadcrumbsHomepageText dark:hover:text-darkBreadcrumbsHomepageTextHover">
-            <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-              <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
-            </svg>
+          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm text-lightBreadcrumbsHomepageText hover:text-lightBreadcrumbsHomepageTextHover dark:text-darkBreadcrumbsHomepageText dark:hover:text-darkBreadcrumbsHomepageTextHover">
+            <IconHouse class="w-3.5 h-3.5 me-1.5" aria-hidden="true" />
             {{ $t('Home') }}
           </RouterLink>
         </li>
         <li>
           <div class="flex items-center">
-            <svg class="rtl:rotate-180 w-3 h-3 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-            </svg>
-            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="text-sm font-medium text-lightBreadcrumbsText md:ms-2 dark:text-darkBreadcrumbsText">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
+            <IconChevronRight class="rtl:rotate-180 w-3.5 h-3.5 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-0.5" aria-hidden="true" />
+            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="md:ms-1"
+              :class="$route.params.primaryKey
+                ? 'text-sm text-lightBreadcrumbsHomepageText hover:text-lightBreadcrumbsHomepageTextHover dark:text-darkBreadcrumbsHomepageText dark:hover:text-darkBreadcrumbsHomepageTextHover'
+                : 'text-xl leading-7 font-semibold tracking-tight text-lightBreadcrumbsText dark:text-darkBreadcrumbsText'">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
           </div>
         </li>
 
         <li v-if="$route.params.primaryKey">
           <div class="flex items-center">
-            <svg class="rtl:rotate-180 w-3 h-3 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-            </svg>
-            <span class="ms-1 text-sm font-medium text-lightBreadcrumbsText md:ms-2 dark:text-darkBreadcrumbsText
+            <IconChevronRight class="rtl:rotate-180 w-3.5 h-3.5 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-0.5" aria-hidden="true" />
+            <span class="ms-1 text-xl leading-7 font-semibold tracking-tight text-lightBreadcrumbsText md:ms-1 dark:text-darkBreadcrumbsText
               max-w-80 truncate">
               {{ $route.name === 'resource-edit' ? $t('Edit') : $t('Show') }} {{ coreStore.record?._label }}</span>
           </div>
@@ -36,6 +33,7 @@
 
 <script setup>
 import { useCoreStore } from '@/stores/core';
+import { IconHouse, IconChevronRight } from '@iconify-prerendered/vue-lucide';
 
 const coreStore = useCoreStore()
 </script>

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

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2">
+    <div class="flex items-center justify-between mb-4 flex-wrap gap-y-2 gap-2">
       <Breadcrumbs />
-      <div class="flex items-center space-x-1 flex-wrap gap-y-1">
+      <div class="flex items-center gap-2 flex-wrap gap-y-1">
         <slot></slot>
       </div>
     </div>

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

@@ -12,4 +12,7 @@ function onClick() {
     if (props.disabled) return;
     emit('callAction', props.extra);
 }
+
+// menus forward clicks on the item padding around the wrapper here
+defineExpose({ click: onClick });
 </script>

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

@@ -36,7 +36,7 @@
       disableTogleOfSelectedItem
     >
       <template #extra-item v-if="columnLoadingState && columnLoadingState[column.name]?.loading">
-        <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
+        <div class="text-center text-lightDropdownButtonsPlaceholderText dark:text-darkDropdownButtonsPlaceholderText py-2 flex items-center justify-center gap-2">
           <Spinner class="w-4 h-4" />
           {{ $t('Loading...') }}
         </div>
@@ -157,7 +157,7 @@
       class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
       @click="$emit('delete')"
     >
-      <IconTrashBinSolid class="w-6 h-6 text-lightInputIcons dark:text-darkInputIcons"/>
+      <IconTrash2 class="w-4 h-4 text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText"/>
     </button>
     <button
       v-else-if="column.masked"
@@ -165,14 +165,14 @@
       @click="$emit('update:unmasked')"
       class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
     >
-      <IconEyeSolid class="w-6 h-6 text-lightInputIcons dark:text-darkInputIcons"  v-if="!unmasked[column.name]"/>
-      <IconEyeSlashSolid class="w-6 h-6 text-lightInputIcons dark:text-darkInputIcons" v-else />
+      <IconEye class="w-4 h-4 text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText"  v-if="!unmasked[column.name]"/>
+      <IconEyeOff class="w-4 h-4 text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText" v-else />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { IconEyeSlashSolid, IconEyeSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
+  import { IconEyeOff, IconEye, IconTrash2 } from '@iconify-prerendered/vue-lucide';
   import DatePicker from "@/afcl/DatePicker.vue";
   import Select from '@/afcl/Select.vue';
   import Input from '@/afcl/Input.vue';

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

@@ -27,11 +27,12 @@
       <Button
         v-if="!column.editReadonly"
         type="button"
-      @click="addArrayItem"
-      class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightInputText focus:outline-none bg-lightInputBackground rounded border border-lightInputBorder hover:bg-lightInputBackgroundHover hover:text-lightInputTextHover hover:border-lightInputBorderHover focus:z-10 focus:ring-4 focus:ring-lightInputFocusRing dark:focus:ring-darkInputFocusRing dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder dark:hover:darkInputTextHover dark:hover:bg-darkInputHover"
-      :class="{'mt-2': currentValues[column.name].length}"
-    >
-      <IconPlusOutline class="w-4 h-4"/>
+        variant="secondary"
+        class="me-2"
+        :class="{'mt-2': currentValues[column.name].length}"
+        @click="addArrayItem"
+      >
+      <IconPlus class="w-4 h-4"/>
         {{ $t('Add') }}
       </Button>
     </div>
@@ -59,7 +60,7 @@
 </template>
   
 <script setup lang="ts">
-  import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconPlus } from '@iconify-prerendered/vue-lucide';
   import ColumnValueInput from "./ColumnValueInput.vue";
   import { ref, watch, nextTick } from 'vue';
   import { Spinner, Button } from '@/afcl';

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

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: column.type === 'time'}">
+    <div class="mx-auto grid grid-cols-2 gap-2 mb-2" :class="{hidden: column.type === 'time'}">
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
           <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
         </div>
 
         <input ref="datepickerStartEl" type="text"
-               class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               class="bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-default shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder block w-full px-2.5 py-1.5 leading-5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                :placeholder="$t('From')">
       </div>
 
@@ -17,13 +17,13 @@
         </div>
 
         <input ref="datepickerEndEl" type="text"
-               class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               class="bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-default shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder block w-full px-2.5 py-1.5 leading-5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                :placeholder="$t('To')">
       </div>
     </div>
 
     <div>
-      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
+      <div class="mx-auto grid grid-cols-2 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">
@@ -31,7 +31,7 @@
             </div>
 
             <input v-model="startTime" type="time" id="start-time"
-                   class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-default shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder block w-full px-2.5 py-1.5 leading-5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                    value="00:00" required/>
           </div>
         </div>
@@ -43,17 +43,17 @@
             </div>
 
             <input v-model="endTime" type="time" id="end-time"
-                   class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-default shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder block w-full px-2.5 py-1.5 leading-5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                    value="00:00" required/>
           </div>
         </div>
       </div>
 
       <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              class="text-lightPrimary dark:text-darkPrimary 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 relative top-px" :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"

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

@@ -4,7 +4,7 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      class="flex-1 bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="flex-1 bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-default shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder block w-20 px-2.5 py-1.5 leading-5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
       :placeholder="$t('From')"
       v-model="start"
     >
@@ -13,7 +13,7 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      class="flex-1 bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="flex-1 bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-default shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder block w-20 px-2.5 py-1.5 leading-5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
       :placeholder="$t('To')"
       v-model="end"
     >

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

@@ -1,8 +1,6 @@
 <template>
-  <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-    </svg>
+  <div v-if="error" class="af-login-modal-error flex items-center p-3 mb-4 text-sm rounded-lg border text-lightDanger border-lightDangerBorder bg-lightDangerSoft dark:text-darkDanger dark:border-darkDangerBorder dark:bg-darkDangerSoft" role="alert">
+    <IconCircleAlert class="shrink-0 w-4 h-4 me-3" aria-hidden="true" />
     <span class="sr-only">{{ $t('Info') }}</span>
     <div>
       {{ error }}
@@ -11,6 +9,7 @@
 </template>
 
 <script setup>
+import { IconCircleAlert } from '@iconify-prerendered/vue-lucide';
 
 defineProps({
   error: {

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

@@ -2,34 +2,34 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="af-filters-sidebar fixed right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-lightFiltersBackgroung w-80 dark:bg-darkFiltersBackgroung shadow-xl dark:shadow-gray-900"
+      class="af-filters-sidebar fixed right-0 z-50 p-5 overflow-y-auto transition-transform translate-x-full bg-lightFiltersBackgroung w-[22rem] max-w-full border-l border-lightUserMenuBorder dark:border-darkUserMenuBorder dark:bg-darkFiltersBackgroung shadow-popover dark:shadow-darkPopover"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
       :style="{ height: `calc(100dvh ` }"
   >
-    <h5 id="drawer-navigation-label" class="text-base font-semibold text-lightFiltersHeaderText uppercase dark:text-darkFiltersHeaderText">
+    <h5 id="drawer-navigation-label" class="text-base font-semibold leading-8 text-lightFiltersHeaderText dark:text-darkFiltersHeaderText">
       {{ $t('Filters') }}
 
-      <button type="button" @click="$emit('hide')" class="text-lightFiltersCloseIcon bg-transparent hover:bg-lightFiltersCloseIconHoverBackground hover:text-lightFiltersCloseIconHover rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:text-darkFiltersCloseIcon dark:hover:bg-darkFiltersCloseIconHoverBackground dark:hover:text-darkFiltersCloseIconHover" >
-        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <button type="button" @click="$emit('hide')" class="text-lightFiltersCloseIcon bg-transparent hover:bg-lightFiltersCloseIconHoverBackground hover:text-lightFiltersCloseIconHover rounded-default text-sm p-1.5 absolute end-4 top-5 inline-flex items-center dark:text-darkFiltersCloseIcon dark:hover:bg-darkFiltersCloseIconHoverBackground dark:hover:text-darkFiltersCloseIconHover" >
+        <IconX aria-hidden="true" class="w-4 h-4" />
         <span class="sr-only">{{ $t('Close menu') }}</span>
       </button>
     </h5>
    
     <div class="py-4 ">
-      <ul class="space-y-3 font-medium text-sm">
+      <ul class="space-y-5 text-sm">
          <li v-for="c in columnsWithFilter" :key="c.name">
             <div class="flex flex-col">
               <div class="flex justify-between items-center">
-                <p class="dark:text-gray-400 my-1">{{ c.label }}</p>
+                <p class="my-1 text-[13px] font-medium text-lightFiltersHeaderText dark:text-darkFiltersHeaderText">{{ c.label }}</p>
                 <Tooltip v-if="filtersStore.filters.find(f => f.field === c.name)">
                 <button 
-                  class=" flex items-center justify-center w-7 h-7 my-1 hover:border rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                  class=" flex items-center justify-center w-6 h-6 my-0.5 rounded-default text-lightFiltersCloseIcon hover:text-lightFiltersCloseIconHover hover:bg-lightFiltersCloseIconHoverBackground dark:text-darkFiltersCloseIcon dark:hover:text-darkFiltersCloseIconHover dark:hover:bg-darkFiltersCloseIconHoverBackground"
                   :disabled="!filtersStore.filters.find(f => f.field === c.name)"
                   @click="filtersStore.clearFilter(c.name);"
                 > 
-                  <IconCloseOutline /> 
+                  <IconX class="w-3.5 h-3.5" /> 
                 </button>
                 <template #tooltip>
                   Clear filter
@@ -69,7 +69,7 @@
                 :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ))?.value || (c.filterOptions?.multiselect ? [] : '')"
               >
                 <template #extra-item v-if="columnLoadingState[c.name]?.loading">
-                  <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
+                  <div class="text-center text-lightDropdownButtonsPlaceholderText dark:text-darkDropdownButtonsPlaceholderText py-2 flex items-center justify-center gap-2">
                     <Spinner class="w-4 h-4" />
                     {{ $t('Loading...') }}
                   </div>
@@ -153,13 +153,13 @@
       <button 
         :disabled="!filtersStore.visibleFiltersCount"
         type="button" 
-        class="flex gap-1 items-center py-1 pr-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded-default border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
-        @click="clear"><IconCloseOutline class="ml-3"/> {{ $t('Clear all') }}</button>
+        class="flex gap-1.5 items-center h-[2.125rem] px-3 text-sm font-medium text-lightFiltersClearAllButtonText shadow-customLight focus:outline-none bg-lightFiltersClearAllButtonBackground rounded-default border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-lightFiltersClearAllButtonFocus dark:focus-visible:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="clear"><IconX class="w-4 h-4"/> {{ $t('Clear all') }}</button>
 
    </div>
   </div>
 
-  <div v-if="show"  class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0  z-40"
+  <div v-if="show"  class="bg-zinc-900/30 dark:bg-black/60 fixed inset-0  z-40"
     @click="$emit('hide')">
   </div>
 </template>
@@ -177,7 +177,7 @@ import Select from '@/afcl/Select.vue';
 import Spinner from '@/afcl/Spinner.vue';
 import debounce from 'debounce';
 import { Tooltip } from '@/afcl';
-import { IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconX } from '@iconify-prerendered/vue-lucide';
 import type { AdminforthFilterStore, AdminforthFilterStoreUnwrapped } from '@/spa_types/core';
 import type { AdminForthResourceColumnCommon, FilterParams, ColumnMinMaxValue } from '@/types/Common';
 import { AdminForthFilterOperators } from '@/types/Common';