adminforth 2.4.0-next.3 → 2.4.0-next.300

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

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

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

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

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

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

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

@@ -1,6 +1,8 @@
 <template>
-    <component v-if="getFlagComponent(countryCode)" class="flag-icon rounded-sm" :is="getFlagComponent(countryCode)" />
+  <div class="aspect-[4/3] w-8 h-6 flex items-center justify-center">
+    <component v-if="getFlagComponent(countryCode)" :is="getFlagComponent(countryCode)" class="flag-icon  h-full object-contain rounded-sm"/>
     <span v-else-if="countryCode">{{ countryCode }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -22,5 +24,6 @@ const getFlagComponent = (countryCode: string) => {
         box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2), 
             inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
             0px 0px 3px #00000030;
+        width: auto;
     }
 </style>

package/dist/spa/src/{components/CustomDatePicker.vue → afcl/DatePicker.vue}

@@ -2,15 +2,15 @@
   <div>
     <div class="grid w-40 gap-4 mb-2">
       <div>
-        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-lightDatePickerButtonText dark:text-darkDatePickerButtonText">{{ label }}</label>
 
         <div class="relative" :class="{hidden: column.type === 'time'}">
           <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-gray-500 dark:text-gray-400"/>
+            <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
           </div>
 
           <input ref="datepickerStartEl"  type="text"
-                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+                 class="af-pick-date-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-lg 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"
                 :placeholder="$t('Select date')" :disabled="readonly" />
           
         </div>
@@ -22,18 +22,17 @@
         <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-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <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" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+            <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-lg 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"
                    value="00:00" :disabled="readonly" 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-lightDatePickerExpandText dark:text-darkDatePickerExpandText text-base font-medium hover:underline p-0 inline-flex items-center 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"
@@ -197,4 +196,91 @@ function focus() {
 defineExpose({
   focus,
 });
-</script>
+</script>
+
+<style lang="css" scoped>
+
+:global(.datepicker-controls button svg),
+:global(.datepicker-controls button) {
+  @apply text-lightDatePickerCalendarText;
+}
+
+:global( .datepicker-dropdown ),
+:global( .datepicker-picker ) {
+  @apply !bg-lightDatePickerCalendarBackground
+}
+
+:global(.datepicker-controls button:hover) {
+  @apply bg-lightDatePickerCalendarArrowButtonBackgroundHover;    
+}
+
+:global(.datepicker-controls button) {
+  @apply ring-lightDatePickerCalendarArrowButtonFocusRing bg-lightDatePickerCalendarArrowButtonBackground;    
+}
+
+:global(.datepicker-controls button:focus) {
+  @apply ring-lightDatePickerCalendarArrowButtonFocusRing;
+}
+
+:global(.days-of-week span) {
+  @apply text-lightDatePickerCalendarDaysOfWeekText;
+}
+
+:global(.datepicker-grid span) {
+  @apply text-lightDatePickerCalendarDateButtonText; 
+}
+
+:global(.datepicker-grid span:hover:not(.selected)) {
+  @apply bg-lightDatePickerCalendarDateButtonBackgroundHover; 
+}
+
+:global(.datepicker-grid .selected ) {
+  @apply text-lightDatePickerCalendarDateActiveButtonText bg-lightDatePickerCalendarDateActiveButtonBackground; 
+}
+
+
+
+
+
+
+
+
+:global(.dark .datepicker-controls button svg),
+:global(.dark .datepicker-controls button) {
+  @apply text-darkDatePickerCalendarMainText;
+}
+
+:global(.dark .datepicker-dropdown),
+:global(.dark .datepicker-picker) {
+  @apply !bg-darkDatePickerCalendarBackground;
+}
+
+:global(.dark .datepicker-controls button:hover) {
+  @apply bg-darkDatePickerCalendarArrowButtonBackgroundHover;    
+}
+
+:global(.dark .datepicker-controls button) {
+  @apply ring-darkDatePickerCalendarArrowButtonFocusRing bg-darkDatePickerCalendarArrowButtonBackground;    
+}
+
+:global(.dark .datepicker-controls button) {
+  @apply ring-darkDatePickerCalendarArrowButtonFocusRing;    
+}
+
+:global(.dark .days-of-week span) {
+  @apply text-darkDatePickerCalendarDaysOfWeekText;
+}
+
+:global(.dark .datepicker-grid span) {
+  @apply text-darkDatePickerCalendarDateButtonText; 
+}
+
+:global(.dark .datepicker-grid span:hover:not(.selected)) {
+  @apply bg-darkDatePickerCalendarDateButtonBackgroundHover; 
+}
+
+:global(.dark .datepicker-grid .selected) {
+  @apply text-darkDatePickerCalendarDateActiveButtonText 
+         bg-darkDatePickerCalendarDateActiveButtonBackground; 
+}
+</style>

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

@@ -6,22 +6,22 @@
     <slot name="trigger"></slot>
   </div>
   <Teleport to="body">
-    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
-      <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="$attrs.class?.includes('w-') ? '' : 'w-full'">
+    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="[scrollbar-gutter:stable] hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
+      <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="($attrs.class as string)?.includes('w-') ? '' : 'w-full'">
         <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
+        <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
           <!-- Modal header -->
           <div
             v-if="header"
-            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200"
+            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
           >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
               {{ header }}
             </h3>
             <button
               v-if="headerCloseButton"
               type="button"
-              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              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"
               @click="modal?.hide()"
             >
               <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
@@ -31,13 +31,13 @@
             </button>
           </div>
           <!-- Modal body -->
-          <div class="p-4 md:p-5 space-y-4 text-gray-700 dark:text-gray-400">
+          <div class="p-4 md:p-5 space-y-4 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-gray-200 rounded-b dark:border-gray-600"
+            class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
           >
             <Button
               v-for="(button, buttonIndex) in buttons"
@@ -63,24 +63,33 @@ import { Modal } from 'flowbite';
 const modalEl = ref(null);
 const modal: Ref<Modal|null> = ref(null);
 
-const props = defineProps({
-  header: {
-    type: String,
-    default: '',
-  },
-  headerCloseButton: {
-    type: Boolean,
-    default: true,
-  },
-  buttons: {
-    type: Array,
-    default: () => [{ label: 'Close', onclick: (dialog) => dialog.hide(), type: '' }],
-  },
-  clickToCloseOutside: {
-    type: Boolean,
-    default: true,
-  },
-});
+interface DialogButton {
+  label: string
+  onclick: (dialog: any) => void
+  options?: Record<string, any> 
+}
+
+interface DialogProps {
+  header?: string
+  headerCloseButton?: boolean
+  buttons?: DialogButton[]
+  clickToCloseOutside?: boolean
+  beforeCloseFunction?: (() => void | Promise<void>) | null
+  beforeOpenFunction?: (() => void | Promise<void>) | null
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  header: '',
+  headerCloseButton: true,
+  buttons: () => [
+    { label: 'Close', onclick: (dialog: any) => dialog.hide(), type: '' },
+  ],
+  clickToCloseOutside: true,
+  beforeCloseFunction: null,
+  beforeOpenFunction: null,
+  closable: true,
+})
 
 onMounted(async () => {
   //await one tick when all is mounted
@@ -88,8 +97,19 @@ onMounted(async () => {
   modal.value = new Modal(
     modalEl.value,
     {
+      closable: props.closable,
       backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
-    },
+      onHide: async () => {
+        if (props.beforeCloseFunction) {
+          await props.beforeCloseFunction();
+        }
+      },
+      onShow: async () => {
+        if (props.beforeOpenFunction) {
+          await props.beforeOpenFunction();
+        }
+      },
+    }
   );
 })
 

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

@@ -3,48 +3,91 @@
   <form class="flex items-center justify-center w-full"
     @dragover.prevent="dragging = true"
     @dragleave.prevent="dragging = false"
-    @drop.prevent="dragging = false; doEmit($event.dataTransfer.files)"
+    @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
-      <label :id="id" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 
-        hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
+      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer
+        hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
         :class="{
-          'border-blue-600 dark:border-blue-400': dragging,
-          'border-gray-300 dark:border-gray-600': !dragging,
-          'bg-blue-50 dark:bg-blue-800': dragging,
-          'bg-gray-50 dark:bg-gray-800': !dragging,
+          'border-lightDropzoneBorderDragging dark:border-darkDropzoneBorderDragging': dragging,
+          'border-lightDropzoneBorder dark:border-darkDropzoneBorder': !dragging,
+          'bg-lightDropzoneBackgroundDragging dark:bg-darkDropzoneBackgroundDragging': dragging,
+          'bg-lightDropzoneBackground dark:bg-darkDropzoneBackground': !dragging,
+          'min-h-32 h-full': props.multiple,
+          'h-32': !props.multiple,
         }"
       >
-          <div class="flex flex-col items-center justify-center pt-5 pb-6">
-              
-            
-              <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-              </svg>
-              <div v-else class="flex items-center justify-center w-full mt-1 mb-4">
-                <template v-for="file in selectedFiles">
-                  <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
-                    <IconFileSolid class="w-5 h-5" />
-                    {{ file.name }} ({{ humanifySize(file.size) }})
-                  </p>
-                </template>
-
+        <input
+          :id="id"
+          type="file"
+          class="hidden"
+          :accept="props.extensions.join(',')"
+          @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
+          :multiple="props.multiple || false"
+        />
+
+        <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>
+
+          <div
+            v-else
+            class="flex items-center justify-center  py-1 flex-wrap gap-2 w-full gap-2 mt-1 mb-4 px-4"
+          >
+            <template v-for="(file, index) in selectedFiles" :key="index">
+              <div
+                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-md 
+                      flex items-center gap-1 px-2 py-1 group"
+              >
+                <IconFileSolid class="w-4 h-4 flex-shrink-0" />
+                <span class="truncate max-w-[200px]">{{ file.name }}</span>
+                <span class="text-xs">({{ humanifySize(file.size) }})</span>
+                <button
+                  type="button"
+                  @click.prevent.stop="removeFile(index)"
+                  class="text-lightDropzoneIcon dark:text-darkDropzoneIcon hover:text-red-600 dark:hover:text-red-400 
+                        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>
+                </button>
               </div>
-
-              <p v-if="!selectedFiles.length" class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">{{ $t('Click to upload') }}</span> {{ $t('or drag and drop') }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">
-                {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
-                <template v-if="props.maxSizeBytes">
-                 (Max size: {{ humanifySize(props.maxSizeBytes) }})
-                </template>
-              </p>
+            </template>
           </div>
-          <input :id="id" type="file" class="hidden" 
-            :accept="props.extensions.join(', ')"
-            @change="doEmit($event.target.files)"
-            :multiple="props.multiple || false"
-          />
+
+          <p
+            v-if="!selectedFiles.length"
+            class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"
+          >
+            <span class="font-semibold">{{ $t('Click to upload') }}</span>
+            {{ $t('or drag and drop') }}
+          </p>
+
+          <p class="text-xs text-lightDropzoneText dark:text-darkDropzoneText">
+            {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
+            <template v-if="props.maxSizeBytes">
+              (Max size: {{ humanifySize(props.maxSizeBytes) }})
+            </template>
+          </p>
+        </div>
       </label>
-    </form> 
+    </form>
 </template>
 
 <script setup lang="ts">
@@ -71,12 +114,17 @@ const selectedFiles: Ref<{
   mime: string,
 }[]> = ref([]);
 
+const storedFiles: Ref<File[]> = ref([]);
+
 watch(() => props.modelValue, (files) => {
-  selectedFiles.value = Array.from(files).map(file => ({
-    name: file.name,
-    size: file.size,
-    mime: file.type,
-  }));
+  if (files && files.length > 0) {
+    selectedFiles.value = Array.from(files).map(file => ({
+      name: file.name,
+      size: file.size,
+      mime: file.type,
+    }));
+    storedFiles.value = Array.from(files);
+  }
 });
 
 function doEmit(filesIn: FileList) {
@@ -108,26 +156,37 @@ function doEmit(filesIn: FileList) {
       });
       return;
     }
-
+    
     validFiles.push(file);
   });
 
   if (!multiple) {
-    validFiles.splice(1);
+    storedFiles.value = validFiles.slice(0, 1);
+  } else {
+    storedFiles.value = [...storedFiles.value, ...validFiles];
   }
-  selectedFiles.value = validFiles.map(file => ({
+  
+  selectedFiles.value = storedFiles.value.map(file => ({
     name: file.name,
     size: file.size,
     mime: file.type,
   }));
 
-  emit('update:modelValue', validFiles);
+  emit('update:modelValue', storedFiles.value);
+
 }
 
 const dragging = ref(false);
 
+function removeFile(index: number) {
+  storedFiles.value = storedFiles.value.filter((_, i) => i !== index);
+  selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index);
+  emit('update:modelValue', storedFiles.value);
+}
+
 function clear() {
   selectedFiles.value = [];
+  storedFiles.value = [];
   emit('update:modelValue', []);
   const form = document.getElementById(id)?.closest('form');
   form?.reset();