fix: enable multiple files selection in FwbFileInput

Improve file handling and layout for file inputs

Author: Sqrcz

src/components/FwbFileInput/FwbFileInput.vue

@@ -55,6 +55,7 @@
           :multiple="multiple"
           class="hidden"
           type="file"
+          @change="handleChange"
         >
       </label>
     </div>
@@ -112,7 +113,12 @@ const model = computed({
 const handleChange = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (props.multiple) {
-    model.value = Array.from(target.files ?? [])
+    const newFiles = Array.from(target.files ?? [])
+    if (Array.isArray(model.value) && model.value.length > 0) {
+      model.value = [...model.value, ...newFiles]
+    } else {
+      model.value = newFiles
+    }
   } else {
     model.value = target.files?.[0] ?? null
   }
@@ -129,15 +135,25 @@ const dropFileHandler = (event: DragEvent) => {
         }
       })
     if (props.multiple) {
-      model.value = arr
+      if (Array.isArray(model.value) && model.value.length > 0) {
+        model.value = [...model.value, ...arr]
+      } else {
+        model.value = arr
+      }
     } else {
-      model.value = arr[0]
+      model.value = arr[0] || null
     }
   } else if (event.dataTransfer?.files) {
-    Object.values(event.dataTransfer.files)
-      .forEach((file: File) => {
-        model.value = file
-      })
+    const files = Array.from(event.dataTransfer.files)
+    if (props.multiple) {
+      if (Array.isArray(model.value) && model.value.length > 0) {
+        model.value = [...model.value, ...files]
+      } else {
+        model.value = files
+      }
+    } else {
+      model.value = files[0] || null
+    }
   }
 }
 

src/components/FwbFileInput/composables/useFileInputClasses.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 
 import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
 
-const fileInpDefaultClasses = 'block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400'
+const fileInpDefaultClasses = 'block w-full py-1 px-2 text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400'
 const fileInpLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
 const fileInpDropzoneClasses = 'flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600'
 const fileDropzoneWrapClasses = 'flex flex-col items-center justify-center pt-5 pb-6'