🐛 fix: bugs fixed

src/components/file/VFileUpload.vue

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