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

Refactor #5426 - For FileUpload

pull/5507/head
tugcekucukoglu 2024-03-25 09:34:29 +03:00
parent 06a6d16337
commit e879d1d2c8
5 changed files with 40 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,15 +4,15 @@
<div :class="cx('details')" v-bind="ptm('details')"> <div :class="cx('details')" v-bind="ptm('details')">
<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>
<FileUploadBadge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" /> <Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
</div> </div>
<div :class="cx('actions')" v-bind="ptm('actions')"> <div :class="cx('actions')" v-bind="ptm('actions')">
<FileUploadButton @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('removeButton')" :unstyled="unstyled" :pt="ptm('removeButton')">
<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('removeButton')['icon']" />
</template> </template>
</FileUploadButton> </Button>
</div> </div>
</div> </div>
</template> </template>
@ -67,8 +67,8 @@ export default {
} }
}, },
components: { components: {
FileUploadButton: Button, Button,
FileUploadBadge: Badge, Badge,
TimesIcon TimesIcon
} }
}; };

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

@ -208,16 +208,9 @@ export interface FileUploadPassThroughOptions {
buttonbar?: FileUploadPassThroughOptionType; buttonbar?: 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}
*/ */
chooseButton?: FileUploadPassThroughOptionType; chooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the choose icon's DOM element.
*/
chooseIcon?: FileUploadPassThroughOptionType;
/**
* Used to pass attributes to the choose button label's DOM element.
*/
chooseButtonLabel?: FileUploadPassThroughOptionType;
/** /**
* Used to pass attributes to the upload button's DOM element. * Used to pass attributes to the upload button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
@ -280,13 +273,10 @@ export interface FileUploadPassThroughOptions {
*/ */
empty?: FileUploadPassThroughOptionType; empty?: FileUploadPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the basic mode's button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/ */
label?: FileUploadPassThroughOptionType; button?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the upload icon's DOM element.
*/
uploadIcon?: FileUploadPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

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

@ -3,33 +3,34 @@
<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('buttonbar')" v-bind="ptm('buttonbar')">
<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">
<span v-ripple :class="chooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="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')">
<slot name="chooseicon" :class="cx('chooseIcon')"> <template #icon="iconProps">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" /> <slot name="chooseicon" :class="cx('chooseIcon')">
</slot> <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" />
<span :class="cx('chooseButtonLabel')" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span> </slot>
</span> </template>
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')"> </Button>
<Button v-if="showUploadButton" :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>
</FileUploadButton> </Button>
<FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')"> <Button v-if="showCancelButton" :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" />
</slot> </slot>
</template> </template>
</FileUploadButton> </Button>
</slot> </slot>
</div> </div>
<div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false"> <div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages"> <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
<template v-if="hasFiles"> <template v-if="hasFiles">
<FileUploadProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" /> <ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</FileUploadMessage> <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</Message>
<FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" /> <FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</template> </template>
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" /> <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
@ -40,17 +41,18 @@
</div> </div>
</div> </div>
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')"> <div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')">
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</FileUploadMessage> <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</Message>
<span v-ripple :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')"> <Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('button')">
<slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')"> <template #icon="iconProps">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" /> <slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
</slot> <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
<slot v-else name="chooseicon" :class="cx('chooseIcon')"> </slot>
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" /> <slot v-else name="chooseicon" :class="cx('chooseIcon')">
</slot> <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
<span :class="cx('label')" v-bind="ptm('label')">{{ basicChooseButtonLabel }}</span> </slot>
<input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-bind="ptm('input')" /> </template>
</span> </Button>
<input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-bind="ptm('input')" />
</div> </div>
</template> </template>
@ -403,9 +405,9 @@ export default {
} }
}, },
components: { components: {
FileUploadButton: Button, Button,
FileUploadProgressBar: ProgressBar, ProgressBar,
FileUploadMessage: Message, Message,
FileContent, FileContent,
PlusIcon, PlusIcon,
UploadIcon, UploadIcon,

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

@ -4,10 +4,9 @@ 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-buttonbar', buttonbar: 'p-fileupload-buttonbar',
chooseButton: ({ instance, props }) => [ chooseButton: ({ instance, props }) => [
'p-component p-fileupload-choose', 'p-fileupload-choose',
{ {
'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles, 'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
'p-disabled': props.disabled,
'p-focus': instance.focused 'p-focus': instance.focused
} }
], ],

2
components/lib/themes/primeone/base/fileupload/index.js
View File

@ -5,7 +5,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.p-fileupload-choose input[type="file"] { .p-fileupload input[type="file"] {
display: none; display: none;
} }