vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 Refactor #3833 - For FileUpload

pull/3868/head
mertsincan 2023-04-15 14:34:56 +03:00
parent 7f3f1eac03
commit 08291512c1
4 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/components/fileupload.js
View File

@ -291,6 +291,10 @@ const FileUploadSlots = [
{
name: 'cancelicon',
description: 'Custom cancel icon template.'
},
{
name: 'fileremoveicon',
description: 'Custom remove icon template for each file.'
}
];

15
components/lib/fileupload/FileContent.vue
View File

@ -7,7 +7,12 @@
<FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
</div>
<div class="p-fileupload-file-actions">
<FileUploadButton icon="pi pi-times" @click="$emit('remove', index)" class="p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"></FileUploadButton>
<FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
<template #icon="iconProps">
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
<component v-else :is="'TimesIcon'" :class="iconProps.class" aria-hidden="true" />
</template>
</FileUploadButton>
</div>
</div>
</template>
@ -15,6 +20,7 @@
<script>
import Badge from 'primevue/badge';
import Button from 'primevue/button';
import TimesIcon from 'primevue/icon/times';
export default {
emits: ['remove'],
@ -34,6 +40,10 @@ export default {
previewWidth: {
type: Number,
default: 50
},
templates: {
type: null,
default: null
}
},
methods: {
@ -52,7 +62,8 @@ export default {
},
components: {
FileUploadButton: Button,
FileUploadBadge: Badge
FileUploadBadge: Badge,
TimesIcon
}
};
</script>

13
components/lib/fileupload/FileUpload.d.ts vendored
View File

@ -330,6 +330,19 @@ export interface FileUploadSlots {
* Custom cancel icon template.
*/
cancelicon(): VNode[];
/**
* Custom remove icon template for each file.
*/
fileremoveicon(scope: {
/**
* File to upload.
*/
file: File;
/**
* The index of file
*/
index: number;
}): VNode[];
}
export interface FileUploadEmits {

4
components/lib/fileupload/FileUpload.vue
View File

@ -29,8 +29,8 @@
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
<FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" />
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
<FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" />
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" />
<FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" />
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" />
</slot>
<div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty">
<slot name="empty"></slot>