Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix: File upload component updated

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-26 14:20:47 +02:00
parent 6f1a6b930c
commit 0ca59dbc59
1 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/file/VFileUpload.vue
View File

@ -6,6 +6,7 @@ import VButton from '../button/VButton.vue';
import VButtonGroup from '../button/VButtonGroup.vue'; import VButtonGroup from '../button/VButtonGroup.vue';
import VFile from './VFile.vue'; import VFile from './VFile.vue';
import VMessage from '../message/VMessage.vue'; import VMessage from '../message/VMessage.vue';
import VScrollpanel from '../scrollpanel/VScrollpanel.vue';
import type IVFileUpload from './IVFileUpload.type'; import type IVFileUpload from './IVFileUpload.type';
import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload'; import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
import { computed, useId, ref, onMounted } from 'vue'; import { computed, useId, ref, onMounted } from 'vue';
@ -67,7 +68,6 @@ const handleSelect = (event: FileUploadSelectEvent) => {
if (!props.advanced && event.files.length > 0 && fileUploadRef.value) { if (!props.advanced && event.files.length > 0 && fileUploadRef.value) {
fileUploadRef.value.files = [event.files.at(-1)]; fileUploadRef.value.files = [event.files.at(-1)];
lastSelectedFile.value = event.files.at(-1); lastSelectedFile.value = event.files.at(-1);
} }
fileSelected.value = true; fileSelected.value = true;
}; };
@ -241,36 +241,40 @@ const globalStatusMessage = computed<{
</div> </div>
</template> </template>
<template #content="slotProps"> <template #content="slotProps">
<div v-if="props.advanced" style="margin-top: 0.5rem;"> <div v-if="props.advanced" style="margin-top: 0.75rem;" class="file-content">
<VMessage <VMessage
v-if="globalStatusMessage" v-if="globalStatusMessage"
:type="globalStatusMessage.type" :type="globalStatusMessage.type"
:title="globalStatusMessage.title" :title="globalStatusMessage.title"
/> />
<div v-if="slotProps.files.length > 0" class="file-area"> <VScrollpanel height="20rem">
<VFile <div class="file-area">
v-for="(file, index) in slotProps.files" <div v-if="slotProps.files.length > 0" class="file-non-uploaded-area">
:key="file.name + file.type + file.size" <VFile
:file="file" v-for="(file, index) in slotProps.files"
:index="index" :key="file.name + file.type + file.size"
:remove-file-callback="slotProps.removeFileCallback" :file="file"
:progress="fileProgressMap[file.name] || 0" :index="index"
status="pending" :remove-file-callback="slotProps.removeFileCallback"
advanced :progress="fileProgressMap[file.name] || 0"
/> status="pending"
</div> advanced
<div v-if="slotProps.uploadedFiles.length > 0" class="file-area"> />
<VFile </div>
v-for="(file, index) in slotProps.uploadedFiles" <div v-if="slotProps.uploadedFiles.length > 0" class="file-uploaded-area">
:key="file.name + file.type + file.size" <VFile
:file="file" v-for="(file, index) in slotProps.uploadedFiles"
:index="index" :key="file.name + file.type + file.size"
:remove-file-callback="slotProps.removeFileCallback" :file="file"
:progress="100" :index="index"
status="completed" :remove-file-callback="slotProps.removeFileCallback"
advanced :progress="100"
/> status="completed"
</div> advanced
/>
</div>
</div>
</VScrollpanel>
</div> </div>
<div v-else> <div v-else>
<VFile <VFile
@ -339,8 +343,17 @@ const globalStatusMessage = computed<{
color: var(--border-contrast-grey); color: var(--border-contrast-grey);
} }
.file-content,
.file-area{ .file-area{
margin-top: 0.75rem; display: flex;
flex-direction: column;
}
.file-content{gap: 0.75rem;}
.file-area{gap: 0.5rem;}
.file-non-uploaded-area,
.file-uploaded-area {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.25rem; gap: 0.25rem;