primevue 3.28.0 → 3.29.0

package/fileupload/fileupload.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.fileupload=function(e,t,l,o,i,s,a,n,p,r,d){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),m=c(t),h=c(l),f=c(o),g=c(i),v=c(s),b=c(a),B=c(n),y=c(r),F={extends:u.default,emits:["remove"],props:{files:{type:Array,default:()=>[]},badgeSeverity:{type:String,default:"warning"},badgeValue:{type:String,default:null},previewWidth:{type:Number,default:50},templates:{type:null,default:null}},methods:{formatSize(e){if(0===e)return"0 B";let t=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,t)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]}},components:{FileUploadButton:m.default,FileUploadBadge:y.default,TimesIcon:f.default}};const C=["alt","src","width"];F.render=function(e,t,l,o,i,s){const a=d.resolveComponent("FileUploadBadge"),n=d.resolveComponent("TimesIcon"),p=d.resolveComponent("FileUploadButton");return d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(l.files,((t,o)=>(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:t.name+t.type+t.size,class:"p-fileupload-file"},e.ptm("file")),[d.createElementVNode("img",d.mergeProps({role:"presentation",class:"p-fileupload-file-thumbnail",alt:t.name,src:t.objectURL,width:l.previewWidth},e.ptm("thumbnail")),null,16,C),d.createElementVNode("div",d.mergeProps({class:"p-fileupload-file-details"},e.ptm("details")),[d.createElementVNode("div",d.mergeProps({class:"p-fileupload-file-name"},e.ptm("fileName")),d.toDisplayString(t.name),17),d.createElementVNode("span",d.mergeProps({class:"p-fileupload-file-size"},e.ptm("fileSize")),d.toDisplayString(s.formatSize(t.size)),17),d.createVNode(a,{value:l.badgeValue,class:"p-fileupload-file-badge",severity:l.badgeSeverity,pt:e.ptm("badge")},null,8,["value","severity","pt"])],16),d.createElementVNode("div",d.mergeProps({class:"p-fileupload-file-actions"},e.ptm("actions")),[d.createVNode(p,{onClick:t=>e.$emit("remove",o),text:"",rounded:"",severity:"danger",class:"p-fileupload-file-remove",pt:e.ptm("removeButton")},{icon:d.withCtx((i=>[l.templates.fileremoveicon?(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.templates.fileremoveicon),{key:0,class:d.normalizeClass(i.class),file:t,index:o},null,8,["class","file","index"])):(d.openBlock(),d.createBlock(n,d.mergeProps({key:1,class:i.class,"aria-hidden":"true"},e.ptm("removeButton").icon),null,16,["class"]))])),_:2},1032,["onClick","pt"])],16)],16)))),128)};var k={name:"FileUpload",extends:u.default,emits:["select","uploader","before-upload","progress","upload","error","before-send","clear","remove","remove-uploaded-file"],props:{name:{type:String,default:null},url:{type:String,default:null},mode:{type:String,default:"advanced"},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},disabled:{type:Boolean,default:!1},auto:{type:Boolean,default:!1},maxFileSize:{type:Number,default:null},invalidFileSizeMessage:{type:String,default:"{0}: Invalid file size, file size should be smaller than {1}."},invalidFileTypeMessage:{type:String,default:"{0}: Invalid file type, allowed file types: {1}."},fileLimit:{type:Number,default:null},invalidFileLimitMessage:{type:String,default:"Maximum number of files exceeded, limit is {0} at most."},withCredentials:{type:Boolean,default:!1},previewWidth:{type:Number,default:50},chooseLabel:{type:String,default:null},uploadLabel:{type:String,default:null},cancelLabel:{type:String,default:null},customUpload:{type:Boolean,default:!1},showUploadButton:{type:Boolean,default:!0},showCancelButton:{type:Boolean,default:!0},chooseIcon:{type:String,default:void 0},uploadIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0},style:null,class:null},duplicateIEEvent:!1,data:()=>({uploadedFileCount:0,files:[],messages:[],focused:!1,progress:null,uploadedFiles:[]}),methods:{onFileSelect(e){if("drop"!==e.type&&this.isIE11()&&this.duplicateIEEvent)return void(this.duplicateIEEvent=!1);this.messages=[],this.files=this.files||[];let t=e.dataTransfer?e.dataTransfer.files:e.target.files;for(let e of t)this.isFileSelected(e)||this.validate(e)&&(this.isImage(e)&&(e.objectURL=window.URL.createObjectURL(e)),this.files.push(e));this.$emit("select",{originalEvent:e,files:this.files}),this.fileLimit&&this.checkFileLimit(),this.auto&&this.hasFiles&&!this.isFileLimitExceeded()&&this.upload(),"drop"!==e.type&&this.isIE11()?this.clearIEInput():this.clearInputElement()},choose(){this.$refs.fileInput.click()},upload(){if(this.customUpload)this.fileLimit&&(this.uploadedFileCount+=this.files.length),this.$emit("uploader",{files:this.files}),this.clear();else{let e=new XMLHttpRequest,t=new FormData;this.$emit("before-upload",{xhr:e,formData:t});for(let e of this.files)t.append(this.name,e,e.name);e.upload.addEventListener("progress",(e=>{e.lengthComputable&&(this.progress=Math.round(100*e.loaded/e.total)),this.$emit("progress",{originalEvent:e,progress:this.progress})})),e.onreadystatechange=()=>{4===e.readyState&&(this.progress=0,e.status>=200&&e.status<300?(this.fileLimit&&(this.uploadedFileCount+=this.files.length),this.$emit("upload",{xhr:e,files:this.files})):this.$emit("error",{xhr:e,files:this.files}),this.uploadedFiles.push(...this.files),this.clear())},e.open("POST",this.url,!0),this.$emit("before-send",{xhr:e,formData:t}),e.withCredentials=this.withCredentials,e.send(t)}},clear(){this.files=[],this.messages=null,this.$emit("clear"),this.isAdvanced&&this.clearInputElement()},onFocus(){this.focused=!0},onBlur(){this.focused=!1},isFileSelected(e){if(this.files&&this.files.length)for(let t of this.files)if(t.name+t.type+t.size===e.name+e.type+e.size)return!0;return!1},isIE11:()=>!!window.MSInputMethodContext&&!!document.documentMode,validate(e){return this.accept&&!this.isFileTypeValid(e)?(this.messages.push(this.invalidFileTypeMessage.replace("{0}",e.name).replace("{1}",this.accept)),!1):!(this.maxFileSize&&e.size>this.maxFileSize)||(this.messages.push(this.invalidFileSizeMessage.replace("{0}",e.name).replace("{1}",this.formatSize(this.maxFileSize))),!1)},isFileTypeValid(e){let t=this.accept.split(",").map((e=>e.trim()));for(let l of t){if(this.isWildcard(l)?this.getTypeClass(e.type)===this.getTypeClass(l):e.type==l||this.getFileExtension(e).toLowerCase()===l.toLowerCase())return!0}return!1},getTypeClass:e=>e.substring(0,e.indexOf("/")),isWildcard:e=>-1!==e.indexOf("*"),getFileExtension:e=>"."+e.name.split(".").pop(),isImage:e=>/^image\//.test(e.type),onDragEnter(e){this.disabled||(e.stopPropagation(),e.preventDefault())},onDragOver(e){this.disabled||(p.DomHandler.addClass(this.$refs.content,"p-fileupload-highlight"),e.stopPropagation(),e.preventDefault())},onDragLeave(){this.disabled||p.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight")},onDrop(e){if(!this.disabled){p.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight"),e.stopPropagation(),e.preventDefault();const t=e.dataTransfer?e.dataTransfer.files:e.target.files;(this.multiple||t&&1===t.length)&&this.onFileSelect(e)}},onBasicUploaderClick(){this.hasFiles?this.upload():this.$refs.fileInput.click()},remove(e){this.clearInputElement();let t=this.files.splice(e,1)[0];this.files=[...this.files],this.$emit("remove",{file:t,files:this.files})},removeUploadedFile(e){let t=this.uploadedFiles.splice(e,1)[0];this.uploadedFiles=[...this.uploadedFiles],this.$emit("remove-uploaded-file",{file:t,files:this.uploadedFiles})},clearInputElement(){this.$refs.fileInput.value=""},clearIEInput(){this.$refs.fileInput&&(this.duplicateIEEvent=!0,this.$refs.fileInput.value="")},formatSize(e){if(0===e)return"0 B";let t=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,t)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]},isFileLimitExceeded(){return this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount&&this.focused&&(this.focused=!1),this.fileLimit&&this.fileLimit<this.files.length+this.uploadedFileCount},checkFileLimit(){this.isFileLimitExceeded()&&this.messages.push(this.invalidFileLimitMessage.replace("{0}",this.fileLimit.toString()))},onMessageClose(){this.messages=null}},computed:{isAdvanced(){return"advanced"===this.mode},isBasic(){return"basic"===this.mode},advancedChooseButtonClass(){return["p-button p-component p-fileupload-choose",this.class,{"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonClass(){return["p-button p-component p-fileupload-choose",this.class,{"p-fileupload-choose-selected":this.hasFiles,"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonLabel(){return this.auto?this.chooseButtonLabel:this.hasFiles?this.files.map((e=>e.name)).join(", "):this.chooseButtonLabel},hasFiles(){return this.files&&this.files.length>0},hasUploadedFiles(){return this.uploadedFiles&&this.uploadedFiles.length>0},chooseDisabled(){return this.disabled||this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount},uploadDisabled(){return this.disabled||!this.hasFiles||this.fileLimit&&this.fileLimit<this.files.length},cancelDisabled(){return this.disabled||!this.hasFiles},chooseButtonLabel(){return this.chooseLabel||this.$primevue.config.locale.choose},uploadButtonLabel(){return this.uploadLabel||this.$primevue.config.locale.upload},cancelButtonLabel(){return this.cancelLabel||this.$primevue.config.locale.cancel},completedLabel(){return this.$primevue.config.locale.completed},pendingLabel(){return this.$primevue.config.locale.pending}},components:{FileUploadButton:m.default,FileUploadProgressBar:b.default,FileUploadMessage:v.default,FileContent:F,PlusIcon:h.default,UploadIcon:g.default,TimesIcon:f.default},directives:{ripple:B.default}};const S=["multiple","accept","disabled"],L=["accept","disabled","multiple"];return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===l&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-fileupload-content {\n    position: relative;\n}\n.p-fileupload-content .p-progressbar {\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-button.p-fileupload-choose {\n    position: relative;\n    overflow: hidden;\n}\n.p-fileupload-buttonbar {\n    display: flex;\n    flex-wrap: wrap;\n}\n.p-fileupload > input[type='file'],\n.p-fileupload-basic input[type='file'] {\n    display: none;\n}\n.p-fluid .p-fileupload .p-button {\n    width: auto;\n}\n.p-fileupload-file {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n}\n.p-fileupload-file-thumbnail {\n    flex-shrink: 0;\n}\n.p-fileupload-file-actions {\n    margin-left: auto;\n}\n"),k.render=function(e,t,l,o,i,s){const a=d.resolveComponent("FileUploadButton"),n=d.resolveComponent("FileUploadProgressBar"),p=d.resolveComponent("FileUploadMessage"),r=d.resolveComponent("FileContent"),c=d.resolveDirective("ripple");return s.isAdvanced?(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:0,class:"p-fileupload p-fileupload-advanced p-component"},e.ptm("root")),[d.createElementVNode("input",d.mergeProps({ref:"fileInput",type:"file",onChange:t[0]||(t[0]=(...e)=>s.onFileSelect&&s.onFileSelect(...e)),multiple:l.multiple,accept:l.accept,disabled:s.chooseDisabled},e.ptm("input")),null,16,S),d.createElementVNode("div",d.mergeProps({class:"p-fileupload-buttonbar"},e.ptm("buttonbar")),[d.renderSlot(e.$slots,"header",d.mergeProps({files:i.files,uploadedFiles:i.uploadedFiles,chooseCallback:s.choose,uploadCallback:s.upload,clearCallback:s.clear},e.ptm("header")),(()=>[d.withDirectives((d.openBlock(),d.createElementBlock("span",d.mergeProps({class:s.advancedChooseButtonClass,style:l.style,onClick:t[1]||(t[1]=(...e)=>s.choose&&s.choose(...e)),onKeydown:t[2]||(t[2]=d.withKeys(((...e)=>s.choose&&s.choose(...e)),["enter"])),onFocus:t[3]||(t[3]=(...e)=>s.onFocus&&s.onFocus(...e)),onBlur:t[4]||(t[4]=(...e)=>s.onBlur&&s.onBlur(...e)),tabindex:"0"},e.ptm("button")),[d.renderSlot(e.$slots,"chooseicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.chooseIcon?"span":"PlusIcon"),d.mergeProps({class:["p-button-icon p-button-icon-left",l.chooseIcon],"aria-hidden":"true"},e.ptm("chooseIcon")),null,16,["class"]))])),d.createElementVNode("span",d.mergeProps({class:"p-button-label"},e.ptm("chooseButtonLabel")),d.toDisplayString(s.chooseButtonLabel),17)],16)),[[c]]),l.showUploadButton?(d.openBlock(),d.createBlock(a,{key:0,label:s.uploadButtonLabel,onClick:s.upload,disabled:s.uploadDisabled,pt:e.ptm("uploadButton")},{icon:d.withCtx((t=>[d.renderSlot(e.$slots,"uploadicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.uploadIcon?"span":"UploadIcon"),d.mergeProps({class:[t.class,l.uploadIcon],"aria-hidden":"true"},e.ptm("uploadButton").icon),null,16,["class"]))]))])),_:3},8,["label","onClick","disabled","pt"])):d.createCommentVNode("",!0),l.showCancelButton?(d.openBlock(),d.createBlock(a,{key:1,label:s.cancelButtonLabel,onClick:s.clear,disabled:s.cancelDisabled,pt:e.ptm("cancelButton")},{icon:d.withCtx((t=>[d.renderSlot(e.$slots,"cancelicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.cancelIcon?"span":"TimesIcon"),d.mergeProps({class:[t.class,l.cancelIcon],"aria-hidden":"true"},e.ptm("cancelButton").icon),null,16,["class"]))]))])),_:3},8,["label","onClick","disabled","pt"])):d.createCommentVNode("",!0)]))],16),d.createElementVNode("div",d.mergeProps({ref:"content",class:"p-fileupload-content",onDragenter:t[5]||(t[5]=(...e)=>s.onDragEnter&&s.onDragEnter(...e)),onDragover:t[6]||(t[6]=(...e)=>s.onDragOver&&s.onDragOver(...e)),onDragleave:t[7]||(t[7]=(...e)=>s.onDragLeave&&s.onDragLeave(...e)),onDrop:t[8]||(t[8]=(...e)=>s.onDrop&&s.onDrop(...e))},e.ptm("content")),[d.renderSlot(e.$slots,"content",{files:i.files,uploadedFiles:i.uploadedFiles,removeUploadedFileCallback:s.removeUploadedFile,removeFileCallback:s.remove,progress:i.progress,messages:i.messages},(()=>[s.hasFiles?(d.openBlock(),d.createBlock(n,{key:0,value:i.progress,showValue:!1,pt:e.ptm("progressbar")},null,8,["value","pt"])):d.createCommentVNode("",!0),(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(i.messages,(t=>(d.openBlock(),d.createBlock(p,{key:t,severity:"error",onClose:s.onMessageClose,pt:e.ptm("messages")},{default:d.withCtx((()=>[d.createTextVNode(d.toDisplayString(t),1)])),_:2},1032,["onClose","pt"])))),128)),s.hasFiles?(d.openBlock(),d.createBlock(r,{key:1,files:i.files,onRemove:s.remove,badgeValue:s.pendingLabel,previewWidth:l.previewWidth,templates:e.$slots,pt:e.pt},null,8,["files","onRemove","badgeValue","previewWidth","templates","pt"])):d.createCommentVNode("",!0),d.createVNode(r,{files:i.uploadedFiles,onRemove:s.removeUploadedFile,badgeValue:s.completedLabel,badgeSeverity:"success",previewWidth:l.previewWidth,templates:e.$slots,pt:e.pt},null,8,["files","onRemove","badgeValue","previewWidth","templates","pt"])])),!e.$slots.empty||s.hasFiles||s.hasUploadedFiles?d.createCommentVNode("",!0):(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:0,class:"p-fileupload-empty"},e.ptm("empty")),[d.renderSlot(e.$slots,"empty")],16))],16)],16)):s.isBasic?(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:1,class:"p-fileupload p-fileupload-basic p-component"},e.ptm("root")),[(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(i.messages,(t=>(d.openBlock(),d.createBlock(p,{key:t,severity:"error",onClose:s.onMessageClose,pt:e.ptm("messages")},{default:d.withCtx((()=>[d.createTextVNode(d.toDisplayString(t),1)])),_:2},1032,["onClose","pt"])))),128)),d.withDirectives((d.openBlock(),d.createElementBlock("span",d.mergeProps({class:s.basicChooseButtonClass,style:l.style,onMouseup:t[12]||(t[12]=(...e)=>s.onBasicUploaderClick&&s.onBasicUploaderClick(...e)),onKeydown:t[13]||(t[13]=d.withKeys(((...e)=>s.choose&&s.choose(...e)),["enter"])),onFocus:t[14]||(t[14]=(...e)=>s.onFocus&&s.onFocus(...e)),onBlur:t[15]||(t[15]=(...e)=>s.onBlur&&s.onBlur(...e)),tabindex:"0"},e.ptm("basicButton")),[!s.hasFiles||l.auto?d.renderSlot(e.$slots,"uploadicon",{key:0},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.uploadIcon?"span":"UploadIcon"),d.mergeProps({class:["p-button-icon p-button-icon-left",l.uploadIcon],"aria-hidden":"true"},e.ptm("uploadIcon")),null,16,["class"]))])):d.renderSlot(e.$slots,"chooseicon",{key:1},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.chooseIcon?"span":"PlusIcon"),d.mergeProps({class:["p-button-icon p-button-icon-left",l.chooseIcon],"aria-hidden":"true"},e.ptm("chooseIcon")),null,16,["class"]))])),d.createElementVNode("span",d.mergeProps({class:"p-button-label"},e.ptm("label")),d.toDisplayString(s.basicChooseButtonLabel),17),s.hasFiles?d.createCommentVNode("",!0):(d.openBlock(),d.createElementBlock("input",d.mergeProps({key:2,ref:"fileInput",type:"file",accept:l.accept,disabled:l.disabled,multiple:l.multiple,onChange:t[9]||(t[9]=(...e)=>s.onFileSelect&&s.onFileSelect(...e)),onFocus:t[10]||(t[10]=(...e)=>s.onFocus&&s.onFocus(...e)),onBlur:t[11]||(t[11]=(...e)=>s.onBlur&&s.onBlur(...e))},e.ptm("input")),null,16,L))],16)),[[c]])],16)):d.createCommentVNode("",!0)},k}(primevue.basecomponent,primevue.button,primevue.icons.plus,primevue.icons.times,primevue.icons.upload,primevue.message,primevue.progressbar,primevue.ripple,primevue.utils,primevue.badge,Vue);
+this.primevue=this.primevue||{},this.primevue.fileupload=function(e,t,l,o,i,s,a,n,p,r,d){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),h=c(t),m=c(l),f=c(o),g=c(i),v=c(s),b=c(a),B=c(n),y=c(r),F={extends:u.default,emits:["remove"],props:{files:{type:Array,default:()=>[]},badgeSeverity:{type:String,default:"warning"},badgeValue:{type:String,default:null},previewWidth:{type:Number,default:50},templates:{type:null,default:null}},methods:{formatSize(e){if(0===e)return"0 B";let t=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,t)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]}},components:{FileUploadButton:h.default,FileUploadBadge:y.default,TimesIcon:f.default}};const C=["alt","src","width"];F.render=function(e,t,l,o,i,s){const a=d.resolveComponent("FileUploadBadge"),n=d.resolveComponent("TimesIcon"),p=d.resolveComponent("FileUploadButton");return d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(l.files,((t,o)=>(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:t.name+t.type+t.size,class:"p-fileupload-file"},e.ptm("file")),[d.createElementVNode("img",d.mergeProps({role:"presentation",class:"p-fileupload-file-thumbnail",alt:t.name,src:t.objectURL,width:l.previewWidth},e.ptm("thumbnail")),null,16,C),d.createElementVNode("div",d.mergeProps({class:"p-fileupload-file-details"},e.ptm("details")),[d.createElementVNode("div",d.mergeProps({class:"p-fileupload-file-name"},e.ptm("fileName")),d.toDisplayString(t.name),17),d.createElementVNode("span",d.mergeProps({class:"p-fileupload-file-size"},e.ptm("fileSize")),d.toDisplayString(s.formatSize(t.size)),17),d.createVNode(a,{value:l.badgeValue,class:"p-fileupload-file-badge",severity:l.badgeSeverity,pt:e.ptm("badge")},null,8,["value","severity","pt"])],16),d.createElementVNode("div",d.mergeProps({class:"p-fileupload-file-actions"},e.ptm("actions")),[d.createVNode(p,{onClick:t=>e.$emit("remove",o),text:"",rounded:"",severity:"danger",class:"p-fileupload-file-remove",pt:e.ptm("removeButton")},{icon:d.withCtx((i=>[l.templates.fileremoveicon?(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.templates.fileremoveicon),{key:0,class:d.normalizeClass(i.class),file:t,index:o},null,8,["class","file","index"])):(d.openBlock(),d.createBlock(n,d.mergeProps({key:1,class:i.class,"aria-hidden":"true"},e.ptm("removeButton").icon),null,16,["class"]))])),_:2},1032,["onClick","pt"])],16)],16)))),128)};var k={name:"FileUpload",extends:u.default,emits:["select","uploader","before-upload","progress","upload","error","before-send","clear","remove","remove-uploaded-file"],props:{name:{type:String,default:null},url:{type:String,default:null},mode:{type:String,default:"advanced"},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},disabled:{type:Boolean,default:!1},auto:{type:Boolean,default:!1},maxFileSize:{type:Number,default:null},invalidFileSizeMessage:{type:String,default:"{0}: Invalid file size, file size should be smaller than {1}."},invalidFileTypeMessage:{type:String,default:"{0}: Invalid file type, allowed file types: {1}."},fileLimit:{type:Number,default:null},invalidFileLimitMessage:{type:String,default:"Maximum number of files exceeded, limit is {0} at most."},withCredentials:{type:Boolean,default:!1},previewWidth:{type:Number,default:50},chooseLabel:{type:String,default:null},uploadLabel:{type:String,default:null},cancelLabel:{type:String,default:null},customUpload:{type:Boolean,default:!1},showUploadButton:{type:Boolean,default:!0},showCancelButton:{type:Boolean,default:!0},chooseIcon:{type:String,default:void 0},uploadIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0},style:null,class:null},duplicateIEEvent:!1,data:()=>({uploadedFileCount:0,files:[],messages:[],focused:!1,progress:null,uploadedFiles:[]}),methods:{onFileSelect(e){if("drop"!==e.type&&this.isIE11()&&this.duplicateIEEvent)return void(this.duplicateIEEvent=!1);this.messages=[],this.files=this.files||[];let t=e.dataTransfer?e.dataTransfer.files:e.target.files;for(let e of t)this.isFileSelected(e)||this.validate(e)&&(this.isImage(e)&&(e.objectURL=window.URL.createObjectURL(e)),this.files.push(e));this.$emit("select",{originalEvent:e,files:this.files}),this.fileLimit&&this.checkFileLimit(),this.auto&&this.hasFiles&&!this.isFileLimitExceeded()&&this.upload(),"drop"!==e.type&&this.isIE11()?this.clearIEInput():this.clearInputElement()},choose(){this.$refs.fileInput.click()},upload(){if(this.customUpload)this.fileLimit&&(this.uploadedFileCount+=this.files.length),this.$emit("uploader",{files:this.files}),this.clear();else{let e=new XMLHttpRequest,t=new FormData;this.$emit("before-upload",{xhr:e,formData:t});for(let e of this.files)t.append(this.name,e,e.name);e.upload.addEventListener("progress",(e=>{e.lengthComputable&&(this.progress=Math.round(100*e.loaded/e.total)),this.$emit("progress",{originalEvent:e,progress:this.progress})})),e.onreadystatechange=()=>{4===e.readyState&&(this.progress=0,e.status>=200&&e.status<300?(this.fileLimit&&(this.uploadedFileCount+=this.files.length),this.$emit("upload",{xhr:e,files:this.files})):this.$emit("error",{xhr:e,files:this.files}),this.uploadedFiles.push(...this.files),this.clear())},e.open("POST",this.url,!0),this.$emit("before-send",{xhr:e,formData:t}),e.withCredentials=this.withCredentials,e.send(t)}},clear(){this.files=[],this.messages=null,this.$emit("clear"),this.isAdvanced&&this.clearInputElement()},onFocus(){this.focused=!0},onBlur(){this.focused=!1},isFileSelected(e){if(this.files&&this.files.length)for(let t of this.files)if(t.name+t.type+t.size===e.name+e.type+e.size)return!0;return!1},isIE11:()=>!!window.MSInputMethodContext&&!!document.documentMode,validate(e){return this.accept&&!this.isFileTypeValid(e)?(this.messages.push(this.invalidFileTypeMessage.replace("{0}",e.name).replace("{1}",this.accept)),!1):!(this.maxFileSize&&e.size>this.maxFileSize)||(this.messages.push(this.invalidFileSizeMessage.replace("{0}",e.name).replace("{1}",this.formatSize(this.maxFileSize))),!1)},isFileTypeValid(e){let t=this.accept.split(",").map((e=>e.trim()));for(let l of t){if(this.isWildcard(l)?this.getTypeClass(e.type)===this.getTypeClass(l):e.type==l||this.getFileExtension(e).toLowerCase()===l.toLowerCase())return!0}return!1},getTypeClass:e=>e.substring(0,e.indexOf("/")),isWildcard:e=>-1!==e.indexOf("*"),getFileExtension:e=>"."+e.name.split(".").pop(),isImage:e=>/^image\//.test(e.type),onDragEnter(e){this.disabled||(e.stopPropagation(),e.preventDefault())},onDragOver(e){this.disabled||(p.DomHandler.addClass(this.$refs.content,"p-fileupload-highlight"),e.stopPropagation(),e.preventDefault())},onDragLeave(){this.disabled||p.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight")},onDrop(e){if(!this.disabled){p.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight"),e.stopPropagation(),e.preventDefault();const t=e.dataTransfer?e.dataTransfer.files:e.target.files;(this.multiple||t&&1===t.length)&&this.onFileSelect(e)}},onBasicUploaderClick(){this.hasFiles?this.upload():this.$refs.fileInput.click()},remove(e){this.clearInputElement();let t=this.files.splice(e,1)[0];this.files=[...this.files],this.$emit("remove",{file:t,files:this.files})},removeUploadedFile(e){let t=this.uploadedFiles.splice(e,1)[0];this.uploadedFiles=[...this.uploadedFiles],this.$emit("remove-uploaded-file",{file:t,files:this.uploadedFiles})},clearInputElement(){this.$refs.fileInput.value=""},clearIEInput(){this.$refs.fileInput&&(this.duplicateIEEvent=!0,this.$refs.fileInput.value="")},formatSize(e){if(0===e)return"0 B";let t=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,t)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]},isFileLimitExceeded(){return this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount&&this.focused&&(this.focused=!1),this.fileLimit&&this.fileLimit<this.files.length+this.uploadedFileCount},checkFileLimit(){this.isFileLimitExceeded()&&this.messages.push(this.invalidFileLimitMessage.replace("{0}",this.fileLimit.toString()))},onMessageClose(){this.messages=null}},computed:{isAdvanced(){return"advanced"===this.mode},isBasic(){return"basic"===this.mode},advancedChooseButtonClass(){return["p-button p-component p-fileupload-choose",this.class,{"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonClass(){return["p-button p-component p-fileupload-choose",this.class,{"p-fileupload-choose-selected":this.hasFiles,"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonLabel(){return this.auto?this.chooseButtonLabel:this.hasFiles?this.files.map((e=>e.name)).join(", "):this.chooseButtonLabel},hasFiles(){return this.files&&this.files.length>0},hasUploadedFiles(){return this.uploadedFiles&&this.uploadedFiles.length>0},chooseDisabled(){return this.disabled||this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount},uploadDisabled(){return this.disabled||!this.hasFiles||this.fileLimit&&this.fileLimit<this.files.length},cancelDisabled(){return this.disabled||!this.hasFiles},chooseButtonLabel(){return this.chooseLabel||this.$primevue.config.locale.choose},uploadButtonLabel(){return this.uploadLabel||this.$primevue.config.locale.upload},cancelButtonLabel(){return this.cancelLabel||this.$primevue.config.locale.cancel},completedLabel(){return this.$primevue.config.locale.completed},pendingLabel(){return this.$primevue.config.locale.pending}},components:{FileUploadButton:h.default,FileUploadProgressBar:b.default,FileUploadMessage:v.default,FileContent:F,PlusIcon:m.default,UploadIcon:g.default,TimesIcon:f.default},directives:{ripple:B.default}};const S=["multiple","accept","disabled"],L=["accept","disabled","multiple"];return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===l&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-fileupload-content {\n    position: relative;\n}\n.p-fileupload-content .p-progressbar {\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-button.p-fileupload-choose {\n    position: relative;\n    overflow: hidden;\n}\n.p-fileupload-buttonbar {\n    display: flex;\n    flex-wrap: wrap;\n}\n.p-fileupload > input[type='file'],\n.p-fileupload-basic input[type='file'] {\n    display: none;\n}\n.p-fluid .p-fileupload .p-button {\n    width: auto;\n}\n.p-fileupload-file {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n}\n.p-fileupload-file-thumbnail {\n    flex-shrink: 0;\n}\n.p-fileupload-file-actions {\n    margin-left: auto;\n}\n"),k.render=function(e,t,l,o,i,s){const a=d.resolveComponent("FileUploadButton"),n=d.resolveComponent("FileUploadProgressBar"),p=d.resolveComponent("FileUploadMessage"),r=d.resolveComponent("FileContent"),c=d.resolveDirective("ripple");return s.isAdvanced?(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:0,class:"p-fileupload p-fileupload-advanced p-component"},e.ptm("root")),[d.createElementVNode("input",d.mergeProps({ref:"fileInput",type:"file",onChange:t[0]||(t[0]=(...e)=>s.onFileSelect&&s.onFileSelect(...e)),multiple:l.multiple,accept:l.accept,disabled:s.chooseDisabled},e.ptm("input")),null,16,S),d.createElementVNode("div",d.mergeProps({class:"p-fileupload-buttonbar"},e.ptm("buttonbar")),[d.renderSlot(e.$slots,"header",{files:i.files,uploadedFiles:i.uploadedFiles,chooseCallback:s.choose,uploadCallback:s.upload,clearCallback:s.clear},(()=>[d.withDirectives((d.openBlock(),d.createElementBlock("span",d.mergeProps({class:s.advancedChooseButtonClass,style:l.style,onClick:t[1]||(t[1]=(...e)=>s.choose&&s.choose(...e)),onKeydown:t[2]||(t[2]=d.withKeys(((...e)=>s.choose&&s.choose(...e)),["enter"])),onFocus:t[3]||(t[3]=(...e)=>s.onFocus&&s.onFocus(...e)),onBlur:t[4]||(t[4]=(...e)=>s.onBlur&&s.onBlur(...e)),tabindex:"0"},e.ptm("chooseButton")),[d.renderSlot(e.$slots,"chooseicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.chooseIcon?"span":"PlusIcon"),d.mergeProps({class:["p-button-icon p-button-icon-left",l.chooseIcon],"aria-hidden":"true"},e.ptm("chooseIcon")),null,16,["class"]))])),d.createElementVNode("span",d.mergeProps({class:"p-button-label"},e.ptm("chooseButtonLabel")),d.toDisplayString(s.chooseButtonLabel),17)],16)),[[c]]),l.showUploadButton?(d.openBlock(),d.createBlock(a,{key:0,label:s.uploadButtonLabel,onClick:s.upload,disabled:s.uploadDisabled,pt:e.ptm("uploadButton")},{icon:d.withCtx((t=>[d.renderSlot(e.$slots,"uploadicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.uploadIcon?"span":"UploadIcon"),d.mergeProps({class:[t.class,l.uploadIcon],"aria-hidden":"true"},e.ptm("uploadButton").icon),null,16,["class"]))]))])),_:3},8,["label","onClick","disabled","pt"])):d.createCommentVNode("",!0),l.showCancelButton?(d.openBlock(),d.createBlock(a,{key:1,label:s.cancelButtonLabel,onClick:s.clear,disabled:s.cancelDisabled,pt:e.ptm("cancelButton")},{icon:d.withCtx((t=>[d.renderSlot(e.$slots,"cancelicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.cancelIcon?"span":"TimesIcon"),d.mergeProps({class:[t.class,l.cancelIcon],"aria-hidden":"true"},e.ptm("cancelButton").icon),null,16,["class"]))]))])),_:3},8,["label","onClick","disabled","pt"])):d.createCommentVNode("",!0)]))],16),d.createElementVNode("div",d.mergeProps({ref:"content",class:"p-fileupload-content",onDragenter:t[5]||(t[5]=(...e)=>s.onDragEnter&&s.onDragEnter(...e)),onDragover:t[6]||(t[6]=(...e)=>s.onDragOver&&s.onDragOver(...e)),onDragleave:t[7]||(t[7]=(...e)=>s.onDragLeave&&s.onDragLeave(...e)),onDrop:t[8]||(t[8]=(...e)=>s.onDrop&&s.onDrop(...e))},e.ptm("content")),[d.renderSlot(e.$slots,"content",{files:i.files,uploadedFiles:i.uploadedFiles,removeUploadedFileCallback:s.removeUploadedFile,removeFileCallback:s.remove,progress:i.progress,messages:i.messages},(()=>[s.hasFiles?(d.openBlock(),d.createBlock(n,{key:0,value:i.progress,showValue:!1,pt:e.ptm("progressbar")},null,8,["value","pt"])):d.createCommentVNode("",!0),(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(i.messages,(t=>(d.openBlock(),d.createBlock(p,{key:t,severity:"error",onClose:s.onMessageClose,pt:e.ptm("message")},{default:d.withCtx((()=>[d.createTextVNode(d.toDisplayString(t),1)])),_:2},1032,["onClose","pt"])))),128)),s.hasFiles?(d.openBlock(),d.createBlock(r,{key:1,files:i.files,onRemove:s.remove,badgeValue:s.pendingLabel,previewWidth:l.previewWidth,templates:e.$slots,pt:e.pt},null,8,["files","onRemove","badgeValue","previewWidth","templates","pt"])):d.createCommentVNode("",!0),d.createVNode(r,{files:i.uploadedFiles,onRemove:s.removeUploadedFile,badgeValue:s.completedLabel,badgeSeverity:"success",previewWidth:l.previewWidth,templates:e.$slots,pt:e.pt},null,8,["files","onRemove","badgeValue","previewWidth","templates","pt"])])),!e.$slots.empty||s.hasFiles||s.hasUploadedFiles?d.createCommentVNode("",!0):(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:0,class:"p-fileupload-empty"},e.ptm("empty")),[d.renderSlot(e.$slots,"empty")],16))],16)],16)):s.isBasic?(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:1,class:"p-fileupload p-fileupload-basic p-component"},e.ptm("root")),[(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(i.messages,(t=>(d.openBlock(),d.createBlock(p,{key:t,severity:"error",onClose:s.onMessageClose,pt:e.ptm("messages")},{default:d.withCtx((()=>[d.createTextVNode(d.toDisplayString(t),1)])),_:2},1032,["onClose","pt"])))),128)),d.withDirectives((d.openBlock(),d.createElementBlock("span",d.mergeProps({class:s.basicChooseButtonClass,style:l.style,onMouseup:t[12]||(t[12]=(...e)=>s.onBasicUploaderClick&&s.onBasicUploaderClick(...e)),onKeydown:t[13]||(t[13]=d.withKeys(((...e)=>s.choose&&s.choose(...e)),["enter"])),onFocus:t[14]||(t[14]=(...e)=>s.onFocus&&s.onFocus(...e)),onBlur:t[15]||(t[15]=(...e)=>s.onBlur&&s.onBlur(...e)),tabindex:"0"},e.ptm("basicButton")),[!s.hasFiles||l.auto?d.renderSlot(e.$slots,"uploadicon",{key:0},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.uploadIcon?"span":"UploadIcon"),d.mergeProps({class:["p-button-icon p-button-icon-left",l.uploadIcon],"aria-hidden":"true"},e.ptm("uploadIcon")),null,16,["class"]))])):d.renderSlot(e.$slots,"chooseicon",{key:1},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(l.chooseIcon?"span":"PlusIcon"),d.mergeProps({class:["p-button-icon p-button-icon-left",l.chooseIcon],"aria-hidden":"true"},e.ptm("chooseIcon")),null,16,["class"]))])),d.createElementVNode("span",d.mergeProps({class:"p-button-label"},e.ptm("label")),d.toDisplayString(s.basicChooseButtonLabel),17),s.hasFiles?d.createCommentVNode("",!0):(d.openBlock(),d.createElementBlock("input",d.mergeProps({key:2,ref:"fileInput",type:"file",accept:l.accept,disabled:l.disabled,multiple:l.multiple,onChange:t[9]||(t[9]=(...e)=>s.onFileSelect&&s.onFileSelect(...e)),onFocus:t[10]||(t[10]=(...e)=>s.onFocus&&s.onFocus(...e)),onBlur:t[11]||(t[11]=(...e)=>s.onBlur&&s.onBlur(...e))},e.ptm("input")),null,16,L))],16)),[[c]])],16)):d.createCommentVNode("",!0)},k}(primevue.basecomponent,primevue.button,primevue.icons.plus,primevue.icons.times,primevue.icons.upload,primevue.message,primevue.progressbar,primevue.ripple,primevue.utils,primevue.badge,Vue);

package/galleria/Galleria.d.ts

@@ -9,6 +9,15 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+export declare type GalleriaPassThroughOptionType = GalleriaPassThroughAttributes | ((options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface GalleriaPassThroughMethodOptions {
+    props: GalleriaProps;
+    state: GalleriaState;
+}
 
 export interface GalleriaResponsiveOptions {
     /**
@@ -21,6 +30,188 @@ export interface GalleriaResponsiveOptions {
     numVisible: number;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link GalleriaProps.pt}
+ */
+export interface GalleriaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item wrapper's DOM element.
+     */
+    itemWrapper?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item container's DOM element.
+     */
+    itemContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous item button's DOM element.
+     */
+    previousItemButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous item icon's DOM element.
+     */
+    previousItemIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next item button's DOM element.
+     */
+    nextItemButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next item icon's DOM element.
+     */
+    nextItemIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the caption's DOM element.
+     */
+    caption?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail wrapper's DOM element.
+     */
+    thumbnailWrapper?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail container's DOM element.
+     */
+    thumbnailContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous thumbnail button's DOM element.
+     */
+    previousThumbnailButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous thumbnail icon's DOM element.
+     */
+    previousThumbnailIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail items container's DOM element.
+     */
+    thumbnailItemsContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail items' DOM element.
+     */
+    thumbnailItems?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail item's DOM element.
+     */
+    thumbnailItem?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail item content's DOM element.
+     */
+    thumbnailItemContent?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next thumbnail button's DOM element.
+     */
+    nextThumbnailButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next thumbnail icon's DOM element.
+     */
+    nextThumbnailIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: GalleriaPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface GalleriaPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Galleria component.
+ */
+export interface GalleriaState {
+    /**
+     * Current container visible state as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+    /**
+     * Style id of the component.
+     */
+    id: string;
+    /**
+     * Index of the first item as a number.
+     * @defaultValue 0
+     */
+    activeIndex: number;
+    /**
+     * Number of items per page as a number.
+     * @defaultValue 3
+     */
+    numVisible: number;
+    /**
+     * Current slide active state as a boolean.
+     * @defaultValue false
+     */
+    slideShowActive: boolean;
+    /**
+     * Number of items per page as a number.
+     * @defaultValue 3
+     */
+    d_numVisible: number;
+    /**
+     * Old number of items per page as a number.
+     * @defaultValue 3
+     */
+    d_oldNumVisible: number;
+    /**
+     * Current active item index as a number.
+     * @defaultValue 0
+     */
+    d_activeIndex: number;
+    /**
+     * The previous active item index as a number.
+     * @defaultValue 0
+     */
+    d_oldActiveItemIndex: number;
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     */
+    page: number;
+    /**
+     * Total shifted items' count as a number.
+     * @defaultValue 0
+     */
+    totalShiftedItems: number;
+}
+
 /**
  * Defines valid properties in Galleria component.
  */
@@ -152,6 +343,11 @@ export interface GalleriaProps {
      * Uses to pass all properties of the HTMLButtonElement to the next navigation button.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {GalleriaPassThroughOptions}
+     */
+    pt?: GalleriaPassThroughOptions;
 }
 /**
  * Defines valid slots in Galleria slots.

package/galleria/Galleria.vue

@@ -1,15 +1,16 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
             </transition>
         </div>
     </Portal>
-    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
+    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
@@ -17,6 +18,7 @@ import GalleriaContent from './GalleriaContent.vue';
 
 export default {
     name: 'Galleria',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'update:visible'],
     props: {

package/galleria/GalleriaContent.vue

@@ -1,12 +1,12 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps">
-        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')">
-            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" />
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }">
+        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
+            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" v-bind="ptm('closeIcon')" />
         </button>
-        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
+        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header" v-bind="ptm('header')">
             <component :is="$attrs.templates['header']" />
         </div>
-        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'">
+        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
             <GalleriaItem
                 :id="id"
                 v-model:activeIndex="activeIndex"
@@ -20,6 +20,7 @@
                 :autoPlay="$attrs.autoPlay"
                 @start-slideshow="startSlideShow"
                 @stop-slideshow="stopSlideShow"
+                :pt="pt"
             />
 
             <GalleriaThumbnails
@@ -38,15 +39,17 @@
                 :prevButtonProps="$attrs.prevButtonProps"
                 :nextButtonProps="$attrs.nextButtonProps"
                 @stop-slideshow="stopSlideShow"
+                :pt="pt"
             />
         </div>
-        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
+        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer" v-bind="ptm('footer')">
             <component :is="$attrs.templates['footer']" />
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import TimesIcon from 'primevue/icons/times';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
@@ -55,6 +58,7 @@ import GalleriaThumbnails from './GalleriaThumbnails.vue';
 
 export default {
     name: 'GalleriaContent',
+    extends: BaseComponent,
     inheritAttrs: false,
     interval: null,
     emits: ['activeitem-change', 'mask-hide'],

package/galleria/GalleriaItem.vue

@@ -1,20 +1,20 @@
 <template>
-    <div class="p-galleria-item-wrapper">
-        <div class="p-galleria-item-container">
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
-                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
+    <div class="p-galleria-item-wrapper" v-bind="ptm('itemWrapper')">
+        <div class="p-galleria-item-container" v-bind="ptm('itemContainer')">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
+                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" v-bind="ptm('previousItemIcon')" />
             </button>
-            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
+            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
-                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
+                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
             </button>
-            <div v-if="templates['caption']" class="p-galleria-caption">
+            <div v-if="templates['caption']" class="p-galleria-caption" v-bind="ptm('caption')">
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
             </div>
         </div>
-        <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
+        <ul v-if="showIndicators" class="p-galleria-indicators p-reset" v-bind="ptm('indicators')">
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
@@ -26,6 +26,7 @@
                 @click="onIndicatorClick(index)"
                 @mouseenter="onIndicatorMouseEnter(index)"
                 @keydown="onIndicatorKeyDown($event, index)"
+                v-bind="ptm('indicator')"
             >
                 <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@@ -35,12 +36,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'GalleriaItem',
+    extends: BaseComponent,
     emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
     props: {
         circular: {

package/galleria/GalleriaThumbnails.vue

@@ -1,11 +1,29 @@
 <template>
-    <div class="p-galleria-thumbnail-wrapper">
-        <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
-                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
+    <div class="p-galleria-thumbnail-wrapper" v-bind="ptm('thumbnailWrapper')">
+        <div class="p-galleria-thumbnail-container" v-bind="ptm('thumbnailContainer')">
+            <button
+                v-if="showThumbnailNavigators"
+                v-ripple
+                :class="navBackwardClass"
+                :disabled="isNavBackwardDisabled()"
+                type="button"
+                :aria-label="ariaPrevButtonLabel"
+                @click="navBackward($event)"
+                v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }"
+            >
+                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" v-bind="ptm('previousThumbnailIcon')" />
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
+                <div
+                    ref="itemsContainer"
+                    class="p-galleria-thumbnail-items"
+                    role="tablist"
+                    @transitionend="onTransitionEnd"
+                    @touchstart="onTouchStart($event)"
+                    @touchmove="onTouchMove($event)"
+                    @touchend="onTouchEnd($event)"
+                    v-bind="ptm('thumbnailItems')"
+                >
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
@@ -22,21 +40,39 @@
                         :aria-selected="activeIndex === index"
                         :aria-controls="containerId + '_item_' + index"
                         @keydown="onThumbnailKeydown($event, index)"
+                        v-bind="ptm('thumbnailItem')"
                     >
-                        <div class="p-galleria-thumbnail-item-content" :tabindex="activeIndex === index ? '0' : '-1'" :aria-label="ariaPageLabel(index + 1)" :aria-current="activeIndex === index ? 'page' : undefined" @click="onItemClick(index)">
+                        <div
+                            class="p-galleria-thumbnail-item-content"
+                            :tabindex="activeIndex === index ? '0' : '-1'"
+                            :aria-label="ariaPageLabel(index + 1)"
+                            :aria-current="activeIndex === index ? 'page' : undefined"
+                            @click="onItemClick(index)"
+                            v-bind="ptm('thumbnailItemContent')"
+                        >
                             <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
-                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" />
+            <button
+                v-if="showThumbnailNavigators"
+                v-ripple
+                :class="navForwardClass"
+                :disabled="isNavForwardDisabled()"
+                type="button"
+                :aria-label="ariaNextButtonLabel"
+                @click="navForward($event)"
+                v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }"
+            >
+                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-next-icon" v-bind="ptm('nextThumbnailIcon')" />
             </button>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
@@ -46,6 +82,7 @@ import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'GalleriaThumbnails',
+    extends: BaseComponent,
     emits: ['stop-slideshow', 'update:activeIndex'],
     props: {
         containerId: {