Refactor #3911 - For FileUpload

api-generator/components/fileupload.js

@@ -142,6 +142,12 @@ const FileUploadProps = [
         type: 'string',
         default: 'null',
         description: 'Style class of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/fileupload/FileContent.vue

@@ -1,16 +1,16 @@
 <template>
-    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file">
+    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file" v-bind="ptm('file')">
-        <img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
+        <img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
-        <div class="p-fileupload-file-details">
+        <div class="p-fileupload-file-details" v-bind="ptm('details')">
-            <div class="p-fileupload-file-name">{{ file.name }}</div>
+            <div class="p-fileupload-file-name" v-bind="ptm('fileName')">{{ file.name }}</div>
-            <span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
+            <span class="p-fileupload-file-size" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
-            <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
+            <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" :pt="ptm('badge')" />
         </div>
-        <div class="p-fileupload-file-actions">
+        <div class="p-fileupload-file-actions" v-bind="ptm('actions')">
-            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
+            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove" :pt="ptm('removeButton')">
                 <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" />
+                    <TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('removeButton')['icon']" />
                 </template>
             </FileUploadButton>
         </div>
@@ -19,10 +19,12 @@
 
 <script>
 import Badge from 'primevue/badge';
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import TimesIcon from 'primevue/icons/times';
 
 export default {
+    extends: BaseComponent,
     emits: ['remove'],
     props: {
         files: {

components/lib/fileupload/FileUpload.d.ts

@@ -8,8 +8,20 @@
  *
  */
 import { VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
+import { MessagePassThroughOptions } from '../message';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FileUploadPassThroughMethodOptions {
+    props: FileUploadProps;
+    state: FileUploadState;
+}
+
 /**
  * Custom select event.
  * @see {@link FileUploadEmits.select}
@@ -138,6 +150,139 @@ export interface FileUploadRemoveUploadedFile {
     files: File[];
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FileUploadProps.pt}
+ */
+export interface FileUploadPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header' DOM element.
+     */
+    header?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the choose icon's DOM element.
+     */
+    chooseIcon?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the upload button's DOM element.
+     */
+    uploadButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the cancel button's DOM element.
+     */
+    cancelButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the progressbar's DOM element.
+     */
+    progressbar?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the messages' DOM element.
+     */
+    messages?: MessagePassThroughOptions;
+    /**
+     * Uses to pass attributes to the empty's DOM element.
+     */
+    empty?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the basic button's DOM element.
+     */
+    basicButton?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the upload icon's DOM element.
+     */
+    uploadIcon?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the file's DOM element.
+     */
+    file?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail's DOM element.
+     */
+    thumbnail?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the details's DOM element.
+     */
+    details?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the fileName's DOM element.
+     */
+    fileName?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the fileSize's DOM element.
+     */
+    fileSize?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     */
+    badge?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the actions's DOM element.
+     */
+    actions?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove button's DOM element.
+     */
+    removeButton?: ButtonPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FileUploadPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in FileUpload component.
+ */
+export interface FileUploadState {
+    /**
+     * Current uploaded file count state as a number.
+     * @defaultValue 0
+     */
+    uploadedFileCount: number;
+    /**
+     * Current files.
+     */
+    files: any[];
+    /**
+     * Current messages.
+     */
+    messages: any[];
+    /**
+     * Current progress state as a number.
+     */
+    progress: number;
+    /**
+     * Current uploaded files.
+     */
+    uploadedFiles: any[];
+}
+
 /**
  * Defines valid properties in FileUpload component.
  */
@@ -257,6 +402,11 @@ export interface FileUploadProps {
      * Style class of the component.
      */
     class?: any;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FileUploadPassThroughOptions}
+     */
+    pt?: FileUploadPassThroughOptions;
 }
 
 /**

components/lib/fileupload/FileUpload.vue

@@ -1,58 +1,59 @@
 <template>
-    <div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component">
+    <div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component" v-bind="ptm('root')">
-        <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
+        <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
-        <div class="p-fileupload-buttonbar">
+        <div class="p-fileupload-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" v-bind="ptm('header')">
-                <span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
+                <span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('button')">
                     <slot name="chooseicon">
-                        <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" />
+                        <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
                     </slot>
-                    <span class="p-button-label">{{ chooseButtonLabel }}</span>
+                    <span class="p-button-label" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
                 </span>
-                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled">
+                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :pt="ptm('uploadButton')">
                     <template #icon="iconProps">
                         <slot name="uploadicon">
-                            <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" />
+                            <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" />
                         </slot>
                     </template>
                 </FileUploadButton>
-                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled">
+                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :pt="ptm('cancelButton')">
                     <template #icon="iconProps">
                         <slot name="cancelicon">
-                            <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" />
+                            <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" />
                         </slot>
                     </template>
                 </FileUploadButton>
             </slot>
         </div>
-        <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
+        <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')">
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
-                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" />
+                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :pt="ptm('progressbar')" />
-                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
+                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
-                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" />
+                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
-                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" />
+                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
             </slot>
-            <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty">
+            <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty" v-bind="ptm('empty')">
                 <slot name="empty"></slot>
             </div>
         </div>
     </div>
-    <div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component">
+    <div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component" v-bind="ptm('root')">
-        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
+        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
-        <span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
+        <span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('basicButton')">
             <slot v-if="!hasFiles || auto" name="uploadicon">
-                <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="['p-button-icon p-button-icon-left', uploadIcon]" aria-hidden="true" />
+                <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="['p-button-icon p-button-icon-left', uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />
             </slot>
             <slot v-else name="chooseicon">
-                <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" />
+                <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
             </slot>
-            <span class="p-button-label">{{ basicChooseButtonLabel }}</span>
+            <span class="p-button-label" v-bind="ptm('label')">{{ basicChooseButtonLabel }}</span>
-            <input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" />
+            <input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-bind="ptm('input')" />
         </span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import PlusIcon from 'primevue/icons/plus';
 import TimesIcon from 'primevue/icons/times';
@@ -65,6 +66,7 @@ import FileContent from './FileContent.vue';
 
 export default {
     name: 'FileUpload',
+    extends: BaseComponent,
     emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove', 'remove-uploaded-file'],
     props: {
         name: {