Refactor #5592 - FileUpload & Overlay components
tugcekucukoglu
parent
2c45303235
commit
28d77998c0
|
|
@ -75,9 +75,9 @@ export interface DialogPassThroughOptions<T = any> {
|
|||
*/
|
||||
title?: DialogPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the header icons' DOM element.
|
||||
* Used to pass attributes to the header actions' DOM element.
|
||||
*/
|
||||
icons?: DialogPassThroughOptionType<T>;
|
||||
headerActions?: DialogPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the maximizable Button component.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<slot name="header" :class="cx('title')">
|
||||
<span v-if="header" :id="ariaLabelledById" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
|
||||
</slot>
|
||||
<div :class="cx('icons')" v-bind="ptm('icons')">
|
||||
<div :class="cx('headerActions')" v-bind="ptm('headerActions')">
|
||||
<Button
|
||||
v-if="maximizable"
|
||||
:ref="maximizableRef"
|
||||
|
|
@ -296,7 +296,7 @@ export default {
|
|||
}
|
||||
},
|
||||
initDrag(event) {
|
||||
if (event.target.closest('div').getAttribute('data-pc-section') === 'icons') {
|
||||
if (event.target.closest('div').getAttribute('data-pc-section') === 'headeractions') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const classes = {
|
|||
],
|
||||
header: 'p-dialog-header',
|
||||
title: 'p-dialog-title',
|
||||
icons: 'p-dialog-header-actions',
|
||||
headerActions: 'p-dialog-header-actions',
|
||||
maximizableButton: 'p-dialog-maximize-button',
|
||||
closeButton: 'p-dialog-close-button',
|
||||
content: 'p-dialog-content',
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" :class="cx('file')" v-bind="ptm('file')">
|
||||
<img role="presentation" :class="cx('thumbnail')" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
|
||||
<div :class="cx('details')" v-bind="ptm('details')">
|
||||
<img role="presentation" :class="cx('fileThumbnail')" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('fileThumbnail')" />
|
||||
<div :class="cx('fileInfo')" v-bind="ptm('fileInfo')">
|
||||
<div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
|
||||
<span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
|
||||
</div>
|
||||
<Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
|
||||
<div :class="cx('actions')" v-bind="ptm('actions')">
|
||||
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :unstyled="unstyled" :pt="ptm('removeButton')">
|
||||
<Badge :value="badgeValue" :class="cx('fileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('fileBadge')" />
|
||||
<div :class="cx('fileActions')" v-bind="ptm('fileActions')">
|
||||
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('fileRemoveButton')" :unstyled="unstyled" :pt="ptm('fileRemoveButton')">
|
||||
<template #icon="iconProps">
|
||||
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
|
||||
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('removeButton')['icon']" />
|
||||
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('fileRemoveButton')['icon']" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -203,9 +203,9 @@ export interface FileUploadPassThroughOptions {
|
|||
*/
|
||||
input?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the buttonbar's DOM element.
|
||||
* Used to pass attributes to the header's DOM element.
|
||||
*/
|
||||
buttonbar?: FileUploadPassThroughOptionType;
|
||||
header?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the choose button's DOM element.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
|
|
@ -239,13 +239,13 @@ export interface FileUploadPassThroughOptions {
|
|||
*/
|
||||
file?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the thumbnail's DOM element.
|
||||
* Used to pass attributes to the file thumbnail's DOM element.
|
||||
*/
|
||||
thumbnail?: FileUploadPassThroughOptionType;
|
||||
fileThumbnail?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the details's DOM element.
|
||||
* Used to pass attributes to the file info's DOM element.
|
||||
*/
|
||||
details?: FileUploadPassThroughOptionType;
|
||||
fileInfo?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the fileName's DOM element.
|
||||
*/
|
||||
|
|
@ -258,16 +258,16 @@ export interface FileUploadPassThroughOptions {
|
|||
* Used to pass attributes to the Badge component.
|
||||
* @see {@link BadgePassThroughOptions}
|
||||
*/
|
||||
badge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
|
||||
fileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the actions's DOM element.
|
||||
* Used to pass attributes to the file actions' DOM element.
|
||||
*/
|
||||
actions?: FileUploadPassThroughOptionType;
|
||||
fileActions?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the remove button's DOM element.
|
||||
* Used to pass attributes to the file remove button's DOM element.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
removeButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
|
||||
fileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the empty's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<div v-if="isAdvanced" :class="cx('root')" v-bind="ptmi('root')">
|
||||
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
|
||||
<div :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
|
||||
<div :class="cx('header')" v-bind="ptm('header')">
|
||||
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
|
||||
<Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('chooseButton')">
|
||||
<template #icon="iconProps">
|
||||
<slot name="chooseicon" :class="cx('chooseIcon')">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" />
|
||||
<slot name="chooseicon">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</Button>
|
||||
<Button v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
|
||||
<Button v-if="showUploadButton" :class="cx('uploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
|
||||
<template #icon="iconProps">
|
||||
<slot name="uploadicon">
|
||||
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" />
|
||||
</slot>
|
||||
</template>
|
||||
</Button>
|
||||
<Button v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
|
||||
<Button v-if="showCancelButton" :class="cx('cancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
|
||||
<template #icon="iconProps">
|
||||
<slot name="cancelicon">
|
||||
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" data-pc-section="cancelbuttonicon" />
|
||||
|
|
@ -48,8 +48,8 @@
|
|||
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</Message>
|
||||
<Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('button')">
|
||||
<template #icon="iconProps">
|
||||
<slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
|
||||
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
|
||||
<slot v-if="!hasFiles || auto" name="uploadicon">
|
||||
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
|
||||
</slot>
|
||||
<slot v-else name="chooseicon" :class="cx('chooseIcon')">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
|
||||
|
|
|
|||
|
|
@ -2,23 +2,20 @@ import BaseStyle from 'primevue/base/style';
|
|||
|
||||
const classes = {
|
||||
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
|
||||
buttonbar: 'p-fileupload-header',
|
||||
chooseButton: 'p-fileupload-choose-button', // TODO: Also add upload and clear
|
||||
chooseIcon: 'p-fileupload-choose-icon', // TODO: remove
|
||||
chooseButtonLabel: 'p-fileupload-choosebutton-label', // TODO: remove
|
||||
header: 'p-fileupload-header',
|
||||
chooseButton: 'p-fileupload-choose-button',
|
||||
uploadButton: 'p-fileupload-upload-button',
|
||||
clearButton: 'p-fileupload-clear-button',
|
||||
content: 'p-fileupload-content',
|
||||
emptyContent: 'p-fileupload-empty-content', // TODO: remove
|
||||
uploadIcon: 'p-fileupload-upload-icon', // TODO: remove
|
||||
label: 'p-fileupload-button-label', // TODO: remove
|
||||
fileList: 'p-fileupload-file-list',
|
||||
file: 'p-fileupload-file',
|
||||
thumbnail: 'p-fileupload-file-thumbnail',
|
||||
details: 'p-fileupload-file-info',
|
||||
fileThumbnail: 'p-fileupload-file-thumbnail',
|
||||
fileInfo: 'p-fileupload-file-info',
|
||||
fileName: 'p-fileupload-file-name',
|
||||
fileSize: 'p-fileupload-file-size',
|
||||
badge: 'p-fileupload-file-badge',
|
||||
actions: 'p-fileupload-file-actions',
|
||||
removeButton: 'p-fileupload-file-remove-button'
|
||||
fileBadge: 'p-fileupload-file-badge',
|
||||
fileActions: 'p-fileupload-file-actions',
|
||||
fileRemoveButton: 'p-fileupload-file-remove-button'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
Loading…
Reference in New Issue