From 17c4afefd93af4280a974b20a6dda158c49c2c0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 2 Jan 2025 09:55:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E6=96=87=E4=BB=B6=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=9B=BE=E7=89=87=E6=8F=92=E6=A7=BD=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../file-upload/file-upload-item.vue          | 11 +++++----
 .../components/file-upload/file-upload.vue    | 24 +++++++++++++++++--
 src/__fk-inputs__/inputs/p-file-upload.tsx    | 13 +++++++++-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/__fk-inputs__/components/file-upload/file-upload-item.vue b/src/__fk-inputs__/components/file-upload/file-upload-item.vue
index 8949c39..a2c9c88 100644
--- a/src/__fk-inputs__/components/file-upload/file-upload-item.vue
+++ b/src/__fk-inputs__/components/file-upload/file-upload-item.vue
@@ -48,11 +48,12 @@ const bageSeverity = computed<BadgeProps['severity']>(() => {
 
 <template>
   <div class="border p-2 rounded-md flex flex-wrap items-center gap-2">
-    <img
-      alt=""
-      :src="url"
-      class="w-10 h-10 shrink-0"
-    />
+    <slot name="image">
+      <img
+        :src="url"
+        class="w-10 h-10 shrink-0 of-hidden"
+      />
+    </slot>
     <div class="break-all break-anywhere">{{ filename }}</div>
     <Badge
       :value="bageValue"
diff --git a/src/__fk-inputs__/components/file-upload/file-upload.vue b/src/__fk-inputs__/components/file-upload/file-upload.vue
index edf29ec..0cd1a45 100644
--- a/src/__fk-inputs__/components/file-upload/file-upload.vue
+++ b/src/__fk-inputs__/components/file-upload/file-upload.vue
@@ -183,7 +183,17 @@ const onUploader = (event: FileUploadUploaderEvent) => {
           "
           :status="file.status"
           :progress="file.progress"
-        />
+        >
+          <template
+            #image
+            v-if="formkitContext.slots.image"
+          >
+            <component
+              :is="formkitContext.slots.image"
+              :url="file.url || file.rawFile?.objectURL || ''"
+            />
+          </template>
+        </FileUploadItem>
       </template>
 
       <!-- 待上传列表 -->
@@ -197,7 +207,17 @@ const onUploader = (event: FileUploadUploaderEvent) => {
           :filename="file.name"
           @remove="removeFileCallback(index)"
           status="pending"
-        />
+        >
+          <template
+            #image
+            v-if="formkitContext.slots.image"
+          >
+            <component
+              :is="formkitContext.slots.image"
+              :url="file.objectURL"
+            />
+          </template>
+        </FileUploadItem>
       </template>
     </template>
   </FileUpload>
diff --git a/src/__fk-inputs__/inputs/p-file-upload.tsx b/src/__fk-inputs__/inputs/p-file-upload.tsx
index 5e4005c..d0988c4 100644
--- a/src/__fk-inputs__/inputs/p-file-upload.tsx
+++ b/src/__fk-inputs__/inputs/p-file-upload.tsx
@@ -1,5 +1,5 @@
 import type { FormKitTypeDefinition } from '@formkit/core';
-import type { FormKitInputs } from '@formkit/inputs';
+import type { FormKitInputs, FormKitSlotData } from '@formkit/inputs';
 import { createSection, label, outer } from '@formkit/inputs';
 import { markRaw } from 'vue';
 import FileUploadComponent from '../components/file-upload/file-upload.vue';
@@ -44,4 +44,15 @@ declare module '@formkit/inputs' {
       autoUpload?: boolean;
     };
   }
+
+  interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+    PFileUpload: {
+      image: FormKitSlotData<
+        Props,
+        {
+          url: string;
+        }
+      >;
+    };
+  }
 }