From 1e8bfbb7c7d912f999b1129d57826a95bb53bf5c Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 11 Aug 2025 04:53:42 +0800
Subject: [PATCH] fix(ui): InputFile wasn't using BasicInputFile

---
 .../components/Form/Input/BasicInputFile.vue  | 13 ++++-
 .../src/components/Form/Input/InputFile.vue   | 58 ++++++-------------
 2 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/packages/ui/src/components/Form/Input/BasicInputFile.vue b/packages/ui/src/components/Form/Input/BasicInputFile.vue
index 6ca465dae..8688cf170 100644
--- a/packages/ui/src/components/Form/Input/BasicInputFile.vue
+++ b/packages/ui/src/components/Form/Input/BasicInputFile.vue
@@ -2,7 +2,10 @@
 import { useDebounce } from '@vueuse/core'
 import { ref } from 'vue'
 
-defineProps<{
+const props = defineProps<{
+  class?: string | string[] | null
+  isDraggingClasses?: string | string[] | null
+  isNotDraggingClasses?: string | string[] | null
   accept?: string
   multiple?: boolean
 }>()
@@ -28,6 +31,12 @@ function handleFileChange(e: Event) {
 <template>
   <label
     relative cursor-pointer
+    :class="[
+      props.class,
+      isDragging
+        ? [...Array.isArray(isDraggingClasses) ? isDraggingClasses : [isDraggingClasses]]
+        : [...Array.isArray(isNotDraggingClasses) ? isNotDraggingClasses : [isNotDraggingClasses]],
+    ]"
     @dragover="isDragging = true"
     @dragleave="isDragging = false"
   >
@@ -35,7 +44,7 @@ function handleFileChange(e: Event) {
       type="file"
       :accept="accept"
       :multiple="multiple"
-      class="absolute inset-0 h-full w-full opacity-0"
+      class="absolute inset-0 cursor-pointer appearance-none opacity-0"
       @change="handleFileChange"
     >
     <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files" />
diff --git a/packages/ui/src/components/Form/Input/InputFile.vue b/packages/ui/src/components/Form/Input/InputFile.vue
index a555da24e..f1bdb1b06 100644
--- a/packages/ui/src/components/Form/Input/InputFile.vue
+++ b/packages/ui/src/components/Form/Input/InputFile.vue
@@ -1,71 +1,49 @@
 <script setup lang="ts">
-import { useDebounce } from '@vueuse/core'
-import { ref } from 'vue'
+import BasicInputFile from './BasicInputFile.vue'
 
 defineProps<{
   accept?: string
   multiple?: boolean
 }>()
-
-const files = defineModel<File[]>({ required: false, default: () => [] })
-const firstFile = ref<File>()
-
-const isDragging = ref(false)
-const isDraggingDebounced = useDebounce(isDragging, 150)
-
-function handleFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
-
-  if (input.files && input.files.length > 0) {
-    firstFile.value = input.files[0]
-  }
-
-  files.value = Array.from(input.files || [])
-  isDragging.value = false
-}
 </script>
 
 <template>
-  <label
-    relative
+  <BasicInputFile
     class="min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6"
-    :class="[
-      isDraggingDebounced ? 'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700' : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
-      isDraggingDebounced ? 'bg-primary-50/5 dark:bg-primary-900/5' : 'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
+    :is-not-dragging-classes="[
+      'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
+      'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
+    ]"
+    :is-dragging-classes="[
+      'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700',
+      'bg-primary-50/5 dark:bg-primary-900/5',
     ]"
     border="dashed 2"
     transition="all duration-300"
-    cursor-pointer opacity-95
+    opacity-95
     hover="scale-100 opacity-100 shadow-md dark:shadow-lg"
-    @dragover="isDragging = true"
-    @dragleave="isDragging = false"
+
+    :accept="accept"
+    :multiple="multiple"
   >
-    <input
-      type="file"
-      :accept="accept"
-      :multiple="multiple"
-      cursor-pointer
-      class="absolute inset-0 h-full w-full opacity-0"
-      @change="handleFileChange"
-    >
-    <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files">
+    <template #default="{ isDragging }">
       <div
         class="flex flex-col items-center"
         :class="[
-          isDraggingDebounced ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
+          isDragging ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
         ]"
       >
         <div i-solar:upload-square-line-duotone mb-2 text-5xl />
         <p font-medium text="center lg">
           Upload
         </p>
-        <p v-if="isDraggingDebounced" text="center" text-sm>
+        <p v-if="isDragging" text="center" text-sm>
           Release to upload
         </p>
         <p v-else text="center" text-sm>
           Click or drag and drop a file here
         </p>
       </div>
-    </slot>
-  </label>
+    </template>
+  </BasicInputFile>
 </template>