Refactor #3911 - For FileUpload

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;
 }
 
 /**