🐛 fix: bugs fixed
This commit is contained in:
parent
fbfa6e33fc
commit
f15fdb8e18
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user