feat: 为文件上传组件添加自定义图片插槽支持

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"

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>

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;
+        }
+      >;
+    };
+  }
 }