feat(FileUpload): add preview prop (#5443)

Author: benjamincanac

src/runtime/components/FileUpload.vue

@@ -93,6 +93,11 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
    * @IconifyIcon
    */
   fileDeleteIcon?: IconProps['name']
+  /**
+   * Show the file preview/list after upload.
+   * @defaultValue true
+   */
+  preview?: boolean
   class?: any
   ui?: FileUpload['slots']
 }
@@ -146,7 +151,8 @@ const props = withDefaults(defineProps<FileUploadProps<M>>(), {
   interactive: true,
   fileDelete: true,
   layout: 'grid',
-  position: 'outside'
+  position: 'outside',
+  preview: true
 })
 const emits = defineEmits<FileUploadEmits>()
 const slots = defineSlots<FileUploadSlots<M>>()
@@ -268,7 +274,7 @@ defineExpose({
 
 <template>
   <DefineFilesTemplate>
-    <template v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
+    <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
       <div :class="ui.files({ class: props.ui?.files })">

test/components/FileUpload.spec.ts

@@ -63,6 +63,7 @@ describe('FileUpload', () => {
     ['with multiple', { props: { ...props, multiple: true } }],
     ['without dropzone', { props: { dropzone: false } }],
     ['without interactive', { props: { interactive: false } }],
+    ['without preview', { props: { ...props, preview: false } }],
     ['with required', { props: { required: true } }],
     ['with disabled', { props: { disabled: true } }],
     ['with fileIcon', { props: { ...props, fileIcon: 'i-lucide-house' } }],

test/components/__snapshots__/FileUpload-vue.spec.ts.snap

@@ -960,3 +960,17 @@ exports[`FileUpload > renders without interactive correctly 1`] = `
   <!--v-if--><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
+
+exports[`FileUpload > renders without preview correctly 1`] = `
+"<div class="relative flex flex-col">
+  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <!--v-if-->
+    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if--><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
+</div>"
+`;

test/components/__snapshots__/FileUpload.spec.ts.snap

@@ -960,3 +960,17 @@ exports[`FileUpload > renders without interactive correctly 1`] = `
   <!--v-if--><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
+
+exports[`FileUpload > renders without preview correctly 1`] = `
+"<div class="relative flex flex-col">
+  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <!--v-if-->
+    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if--><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
+</div>"
+`;