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

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

@ -6,6 +6,7 @@ import VButton from '../button/VButton.vue';
import VButtonGroup from '../button/VButtonGroup.vue';
import VFile from './VFile.vue';
import VMessage from '../message/VMessage.vue';
import VScrollpanel from '../scrollpanel/VScrollpanel.vue';
import type IVFileUpload from './IVFileUpload.type';
import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
import { computed, useId, ref, onMounted } from 'vue';
@ -67,7 +68,6 @@ const handleSelect = (event: FileUploadSelectEvent) => {
if (!props.advanced && event.files.length > 0 && fileUploadRef.value) {
fileUploadRef.value.files = [event.files.at(-1)];
lastSelectedFile.value = event.files.at(-1);
}
fileSelected.value = true;
};
@ -241,13 +241,15 @@ const globalStatusMessage = computed<{
</div>
</template>
<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
v-if="globalStatusMessage"
:type="globalStatusMessage.type"
:title="globalStatusMessage.title"
/>
<div v-if="slotProps.files.length > 0" class="file-area">
<VScrollpanel height="20rem">
<div class="file-area">
<div v-if="slotProps.files.length > 0" class="file-non-uploaded-area">
<VFile
v-for="(file, index) in slotProps.files"
:key="file.name + file.type + file.size"
@ -259,7 +261,7 @@ const globalStatusMessage = computed<{
advanced
/>
</div>
<div v-if="slotProps.uploadedFiles.length > 0" class="file-area">
<div v-if="slotProps.uploadedFiles.length > 0" class="file-uploaded-area">
<VFile
v-for="(file, index) in slotProps.uploadedFiles"
:key="file.name + file.type + file.size"
@ -272,6 +274,8 @@ const globalStatusMessage = computed<{
/>
</div>
</div>
</VScrollpanel>
</div>
<div v-else>
<VFile
v-if="lastSelectedFile"
@ -339,8 +343,17 @@ const globalStatusMessage = computed<{
color: var(--border-contrast-grey);
}
.file-content,
.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;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.25rem;