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

Refactor #5592 - FileUpload & Overlay components

pull/5677/head
tugcekucukoglu 2024-04-30 12:58:12 +03:00
parent 2c45303235
commit 28d77998c0
7 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/dialog/Dialog.d.ts vendored
View File

@ -75,9 +75,9 @@ export interface DialogPassThroughOptions<T = any> {
*/ */
title?: DialogPassThroughOptionType<T>; 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. * Used to pass attributes to the maximizable Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}

4
components/lib/dialog/Dialog.vue
View File

@ -9,7 +9,7 @@
<slot name="header" :class="cx('title')"> <slot name="header" :class="cx('title')">
<span v-if="header" :id="ariaLabelledById" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span> <span v-if="header" :id="ariaLabelledById" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
</slot> </slot>
<div :class="cx('icons')" v-bind="ptm('icons')"> <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
<Button <Button
v-if="maximizable" v-if="maximizable"
:ref="maximizableRef" :ref="maximizableRef"
@ -296,7 +296,7 @@ export default {
} }
}, },
initDrag(event) { initDrag(event) {
if (event.target.closest('div').getAttribute('data-pc-section') === 'icons') { if (event.target.closest('div').getAttribute('data-pc-section') === 'headeractions') {
return; return;
} }

2
components/lib/dialog/style/DialogStyle.js
View File

@ -43,7 +43,7 @@ const classes = {
], ],
header: 'p-dialog-header', header: 'p-dialog-header',
title: 'p-dialog-title', title: 'p-dialog-title',
icons: 'p-dialog-header-actions', headerActions: 'p-dialog-header-actions',
maximizableButton: 'p-dialog-maximize-button', maximizableButton: 'p-dialog-maximize-button',
closeButton: 'p-dialog-close-button', closeButton: 'p-dialog-close-button',
content: 'p-dialog-content', content: 'p-dialog-content',

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

@ -1,16 +1,16 @@
<template> <template>
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" :class="cx('file')" v-bind="ptm('file')"> <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')" /> <img role="presentation" :class="cx('fileThumbnail')" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('fileThumbnail')" />
<div :class="cx('details')" v-bind="ptm('details')"> <div :class="cx('fileInfo')" v-bind="ptm('fileInfo')">
<div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div> <div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
<span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span> <span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
</div> </div>
<Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" /> <Badge :value="badgeValue" :class="cx('fileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('fileBadge')" />
<div :class="cx('actions')" v-bind="ptm('actions')"> <div :class="cx('fileActions')" v-bind="ptm('fileActions')">
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :unstyled="unstyled" :pt="ptm('removeButton')"> <Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('fileRemoveButton')" :unstyled="unstyled" :pt="ptm('fileRemoveButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" /> <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> </template>
</Button> </Button>
</div> </div>

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

@ -203,9 +203,9 @@ export interface FileUploadPassThroughOptions {
*/ */
input?: FileUploadPassThroughOptionType; 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. * Used to pass attributes to the choose button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
@ -239,13 +239,13 @@ export interface FileUploadPassThroughOptions {
*/ */
file?: FileUploadPassThroughOptionType; 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. * 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. * Used to pass attributes to the Badge component.
* @see {@link BadgePassThroughOptions} * @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} * @see {@link ButtonPassThroughOptions}
*/ */
removeButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>; fileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the empty's DOM element. * Used to pass attributes to the empty's DOM element.
*/ */

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

@ -1,23 +1,23 @@
<template> <template>
<div v-if="isAdvanced" :class="cx('root')" v-bind="ptmi('root')"> <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')" /> <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"> <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')"> <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"> <template #icon="iconProps">
<slot name="chooseicon" :class="cx('chooseIcon')"> <slot name="chooseicon">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" /> <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </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"> <template #icon="iconProps">
<slot name="uploadicon"> <slot name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" /> <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </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"> <template #icon="iconProps">
<slot name="cancelicon"> <slot name="cancelicon">
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" data-pc-section="cancelbuttonicon" /> <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> <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')"> <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"> <template #icon="iconProps">
<slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')"> <slot v-if="!hasFiles || auto" name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" /> <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
</slot> </slot>
<slot v-else name="chooseicon" :class="cx('chooseIcon')"> <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']" /> <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />

21
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -2,23 +2,20 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`], root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
buttonbar: 'p-fileupload-header', header: 'p-fileupload-header',
chooseButton: 'p-fileupload-choose-button', // TODO: Also add upload and clear chooseButton: 'p-fileupload-choose-button',
chooseIcon: 'p-fileupload-choose-icon', // TODO: remove uploadButton: 'p-fileupload-upload-button',
chooseButtonLabel: 'p-fileupload-choosebutton-label', // TODO: remove clearButton: 'p-fileupload-clear-button',
content: 'p-fileupload-content', 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', fileList: 'p-fileupload-file-list',
file: 'p-fileupload-file', file: 'p-fileupload-file',
thumbnail: 'p-fileupload-file-thumbnail', fileThumbnail: 'p-fileupload-file-thumbnail',
details: 'p-fileupload-file-info', fileInfo: 'p-fileupload-file-info',
fileName: 'p-fileupload-file-name', fileName: 'p-fileupload-file-name',
fileSize: 'p-fileupload-file-size', fileSize: 'p-fileupload-file-size',
badge: 'p-fileupload-file-badge', fileBadge: 'p-fileupload-file-badge',
actions: 'p-fileupload-file-actions', fileActions: 'p-fileupload-file-actions',
removeButton: 'p-fileupload-file-remove-button' fileRemoveButton: 'p-fileupload-file-remove-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({