🐛 fix: bugs fixed

This commit is contained in:
Paul Valerie GOMA 2025-07-27 00:27:20 +02:00
parent fbfa6e33fc
commit f15fdb8e18

View File

@ -7,6 +7,7 @@ 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 VScrollpanel from '../scrollpanel/VScrollpanel.vue';
import VLabelErrorProxy from './VLabelErrorProxy.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 } from 'vue'; import { computed, useId, ref } from 'vue';
@ -26,7 +27,7 @@ const props = withDefaults(defineProps<IVFileUpload>(), {
validMessage: '', validMessage: '',
hint: '', hint: '',
disabled: false, disabled: false,
invalidFileSizeMessage: 'Taille de fichier invalide, la taille du fichier doit être plus petite que {1.}', invalidFileSizeMessage: 'Taille de fichier {0} invalide, la taille du fichier doit être plus petite que {1}',
invalidFileLimitMessage: 'Nombre maximal des fichiers atteint, le nombre maximal est {0.}', invalidFileLimitMessage: 'Nombre maximal des fichiers atteint, le nombre maximal est {0.}',
invalidFileTypeMessage: 'Type de fichier invalide, le type de fichier {0} n\'est pas pris en charge', invalidFileTypeMessage: 'Type de fichier invalide, le type de fichier {0} n\'est pas pris en charge',
accept: undefined, accept: undefined,
@ -95,6 +96,9 @@ const handleProgress = (event: FileUploadProgressEvent) => {
const handleError = (event: FileUploadErrorEvent) => { const handleError = (event: FileUploadErrorEvent) => {
emit('error', event); emit('error', event);
hasActiveError.value = true; hasActiveError.value = true;
if (!props.advanced && fileUploadRef.value) {
fileUploadRef.value.uploadedFiles = [];
}
} }
const lastSelectedFile = computed(() => { const lastSelectedFile = computed(() => {
@ -102,7 +106,6 @@ const lastSelectedFile = computed(() => {
return files.at(-1) ?? null; return files.at(-1) ?? null;
}); });
const uploadEvent = (callback: () => void) => { const uploadEvent = (callback: () => void) => {
callback(); callback();
}; };
@ -110,11 +113,9 @@ const uploadEvent = (callback: () => void) => {
const padding = computed(() => props.advanced ? '1.125rem' : '0rem') const padding = computed(() => props.advanced ? '1.125rem' : '0rem')
const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent'); const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent');
const error = computed(() => hasActiveError.value);
const labelState = computed(() => { const labelState = computed(() => {
if(!error.value && !props.disabled) return 'default'; if(!hasActiveError.value && !props.disabled) return 'default';
else if(error.value && !props.disabled) return 'error'; else if(hasActiveError.value && !props.disabled) return 'error';
else return undefined else return undefined
}) })
@ -221,21 +222,21 @@ const globalStatusMessage = computed<{
title="parcourir les fichiers" title="parcourir les fichiers"
/> />
<span <span
v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0)" v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0) && !hasActiveError"
:class="[styles['text-body-SM-detail-text-Regular']]" :class="[styles['text-body-SM-detail-text-Regular']]"
> >
Aucun fichier sélectionné Aucun fichier sélectionné
</span> </span>
</div> </div>
</template> </template>
<template #empty> <template #empty v-if="props.advanced && !hasActiveError">
<div class="fileupload-empty" v-if="props.advanced" :class="[styles['text-body-SM-detail-text-Regular']]"> <div class="fileupload-empty" :class="[styles['text-body-SM-detail-text-Regular']]">
<i class="ri-upload-cloud-line upload-cloud-icon"></i> <i class="ri-upload-cloud-line upload-cloud-icon"></i>
<p>Glissez-déposez les fichiers ici pour les téléverser.</p> <p>Glissez-déposez les fichiers ici pour les téléverser.</p>
</div> </div>
</template> </template>
<template #content="slotProps"> <template #content="slotProps">
<div v-if="props.advanced" style="margin-top: 0.75rem;" class="file-content"> <div v-if="props.advanced && !hasActiveError" style="margin-top: 0.75rem;" class="file-content">
<VMessage <VMessage
v-if="globalStatusMessage" v-if="globalStatusMessage"
:type="globalStatusMessage.type" :type="globalStatusMessage.type"
@ -270,7 +271,7 @@ const globalStatusMessage = computed<{
</div> </div>
</VScrollpanel> </VScrollpanel>
</div> </div>
<div v-else> <div v-if="!props.advanced && !hasActiveError">
<VFile <VFile
v-if="lastSelectedFile" v-if="lastSelectedFile"
:file="lastSelectedFile" :file="lastSelectedFile"
@ -284,13 +285,19 @@ const globalStatusMessage = computed<{
status="completed" status="completed"
/> />
</div> </div>
<VHint <div
v-for="message of slotProps.messages" role="alert"
:key="message" aria-live="polite"
:title="message" >
type="alert" <VHint
icon v-for="message of slotProps.messages"
/> :key="message"
:title="message"
type="alert"
icon
/>
</div>
<VLabelErrorProxy :hasError="(slotProps.messages ?? []).length > 0" @update:error="hasActiveError = $event" />
</template> </template>
</FileUpload> </FileUpload>
</div> </div>