primevue 3.26.0 → 3.27.0

package/paginator/paginator.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.paginator=function(e,t,a,n,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(a),s=o(n),l=o(r),p={name:"CurrentPageReport",props:{pageCount:{type:Number,default:0},currentPage:{type:Number,default:0},page:{type:Number,default:0},first:{type:Number,default:0},rows:{type:Number,default:0},totalRecords:{type:Number,default:0},template:{type:String,default:"({currentPage} of {totalPages})"}},computed:{text(){return this.template.replace("{currentPage}",this.currentPage).replace("{totalPages}",this.pageCount).replace("{first}",this.pageCount>0?this.first+1:0).replace("{last}",Math.min(this.first+this.rows,this.totalRecords)).replace("{rows}",this.rows).replace("{totalRecords}",this.totalRecords)}}};const g={class:"p-paginator-current"};p.render=function(e,a,n,r,o,i){return t.openBlock(),t.createElementBlock("span",g,t.toDisplayString(i.text),1)};var c={name:"FirstPageLink",computed:{containerClass(){return["p-paginator-first p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:i.default}};const u=[t.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-double-left"},null,-1)];c.render=function(e,a,n,r,o,i){const s=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},u,2)),[[s]])};var d={name:"JumpToPageDropdown",emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},methods:{onChange(e){this.$emit("page-change",e)}},computed:{pageOptions(){let e=[];for(let t=0;t<this.pageCount;t++)e.push({label:String(t+1),value:t});return e}},components:{JTPDropdown:s.default}};d.render=function(e,a,n,r,o,i){const s=t.resolveComponent("JTPDropdown");return t.openBlock(),t.createBlock(s,{modelValue:n.page,options:i.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":a[0]||(a[0]=e=>i.onChange(e)),class:"p-paginator-page-options",disabled:n.disabled},null,8,["modelValue","options","disabled"])};var m={name:"JumpToPageInput",inheritAttrs:!1,emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},data(){return{d_page:this.page}},watch:{page(e){this.d_page=e}},methods:{onChange(e){e!==this.page&&(this.d_page=e,this.$emit("page-change",e-1))}},computed:{inputArialabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.jumpToPageInputLabel:void 0}},components:{JTPInput:l.default}};m.render=function(e,a,n,r,o,i){const s=t.resolveComponent("JTPInput");return t.openBlock(),t.createBlock(s,{ref:"jtpInput",modelValue:o.d_page,class:"p-paginator-page-input","aria-label":i.inputArialabel,disabled:n.disabled,"onUpdate:modelValue":i.onChange},null,8,["modelValue","aria-label","disabled","onUpdate:modelValue"])};var h={name:"LastPageLink",computed:{containerClass(){return["p-paginator-last p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:i.default}};const P=[t.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-double-right"},null,-1)];h.render=function(e,a,n,r,o,i){const s=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},P,2)),[[s]])};var k={name:"NextPageLink",computed:{containerClass(){return["p-paginator-next p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:i.default}};const f=[t.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-right"},null,-1)];k.render=function(e,a,n,r,o,i){const s=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},f,2)),[[s]])};var b={name:"PageLinks",inheritAttrs:!1,emits:["click"],props:{value:Array,page:Number},methods:{onPageLinkClick(e,t){this.$emit("click",{originalEvent:e,value:t})},ariaPageLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g,e):void 0}},computed:{},directives:{ripple:i.default}};const v={class:"p-paginator-pages"},C=["aria-label","aria-current","onClick"];b.render=function(e,a,n,r,o,i){const s=t.resolveDirective("ripple");return t.openBlock(),t.createElementBlock("span",v,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,(e=>t.withDirectives((t.openBlock(),t.createElementBlock("button",{key:e,class:t.normalizeClass(["p-paginator-page p-paginator-element p-link",{"p-highlight":e-1===n.page}]),type:"button","aria-label":i.ariaPageLabel(e),"aria-current":e-1===n.page?"page":void 0,onClick:t=>i.onPageLinkClick(t,e)},[t.createTextVNode(t.toDisplayString(e),1)],10,C)),[[s]]))),128))])};var L={name:"PrevPageLink",computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:i.default}};const w=[t.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-left"},null,-1)];L.render=function(e,a,n,r,o,i){const s=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},w,2)),[[s]])};var y={name:"RowsPerPageDropdown",emits:["rows-change"],props:{options:Array,rows:Number,disabled:Boolean},methods:{onChange(e){this.$emit("rows-change",e)}},computed:{rowsOptions(){let e=[];if(this.options)for(let t=0;t<this.options.length;t++)e.push({label:String(this.options[t]),value:this.options[t]});return e}},components:{RPPDropdown:s.default}};y.render=function(e,a,n,r,o,i){const s=t.resolveComponent("RPPDropdown");return t.openBlock(),t.createBlock(s,{modelValue:n.rows,options:i.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":a[0]||(a[0]=e=>i.onChange(e)),class:"p-paginator-rpp-options",disabled:n.disabled},null,8,["modelValue","options","disabled"])};var B={name:"Paginator",emits:["update:first","update:rows","page"],props:{totalRecords:{type:Number,default:0},rows:{type:Number,default:0},first:{type:Number,default:0},pageLinkSize:{type:Number,default:5},rowsPerPageOptions:{type:Array,default:null},template:{type:[Object,String],default:"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"},currentPageReportTemplate:{type:null,default:"({currentPage} of {totalPages})"},alwaysShow:{type:Boolean,default:!0}},data(){return{d_first:this.first,d_rows:this.rows}},watch:{first(e){this.d_first=e},rows(e){this.d_rows=e},totalRecords(e){this.page>0&&e&&this.d_first>=e&&this.changePage(this.pageCount-1)}},mounted(){this.setPaginatorAttribute(),this.createStyle()},methods:{changePage(e){const t=this.pageCount;if(e>=0&&e<t){this.d_first=this.d_rows*e;const a={page:e,first:this.d_first,rows:this.d_rows,pageCount:t};this.$emit("update:first",this.d_first),this.$emit("update:rows",this.d_rows),this.$emit("page",a)}},changePageToFirst(e){this.isFirstPage||this.changePage(0),e.preventDefault()},changePageToPrev(e){this.changePage(this.page-1),e.preventDefault()},changePageLink(e){this.changePage(e.value-1),e.originalEvent.preventDefault()},changePageToNext(e){this.changePage(this.page+1),e.preventDefault()},changePageToLast(e){this.isLastPage||this.changePage(this.pageCount-1),e.preventDefault()},onRowChange(e){this.d_rows=e,this.changePage(this.page)},createStyle(){if(this.hasBreakpoints()){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";const t=Object.keys(this.template),a={};t.sort(((e,t)=>parseInt(e)-parseInt(t))).forEach((e=>{a[e]=this.template[e]}));for(const[t,[n]]of Object.entries(Object.entries(a))){const r=Object.entries(a)[t-1]?`and (min-width:${Object.keys(a)[t-1]})`:"";e+="default"===n?`\n                            @media screen ${r} {\n                                .paginator[${this.attributeSelector}],\n                                .p-paginator-default{\n                                    display: flex !important;\n                                }\n                            }\n                        `:`\n                        .paginator[${this.attributeSelector}], .p-paginator-${n} {\n                                display: none !important;\n                            }\n                        @media screen ${r} and (max-width: ${n}) {\n                            .paginator[${this.attributeSelector}], .p-paginator-${n} {\n                                display: flex !important;\n                            }\n                            .paginator[${this.attributeSelector}],\n                            .p-paginator-default{\n                                display: none !important;\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},hasBreakpoints(){return"object"==typeof this.template},getPaginatorClasses(e){return[{"p-paginator-default":!this.hasBreakpoints(),[`p-paginator-${e}`]:this.hasBreakpoints()}]},setPaginatorAttribute(){this.$refs.paginator&&this.$refs.paginator.length>=0&&[...this.$refs.paginator].forEach((e=>{e.setAttribute(this.attributeSelector,"")}))},getAriaLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria[e]:void 0}},computed:{templateItems(){let e={};if(this.hasBreakpoints()){e=this.template,e.default||(e.default="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown");for(const t in e)e[t]=this.template[t].split(" ").map((e=>e.trim()));return e}return e.default=this.template.split(" ").map((e=>e.trim())),e},page(){return Math.floor(this.d_first/this.d_rows)},pageCount(){return Math.ceil(this.totalRecords/this.d_rows)},isFirstPage(){return 0===this.page},isLastPage(){return this.page===this.pageCount-1},calculatePageLinkBoundaries(){const e=this.pageCount,t=Math.min(this.pageLinkSize,e);let a=Math.max(0,Math.ceil(this.page-t/2)),n=Math.min(e-1,a+t-1);const r=this.pageLinkSize-(n-a+1);return a=Math.max(0,a-r),[a,n]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,a=t[0],n=t[1];for(var r=a;r<=n;r++)e.push(r+1);return e},currentState(){return{page:this.page,first:this.d_first,rows:this.d_rows}},empty(){return 0===this.pageCount},currentPage(){return this.pageCount>0?this.page+1:0},attributeSelector:()=>e.UniqueComponentId()},components:{CurrentPageReport:p,FirstPageLink:c,LastPageLink:h,NextPageLink:k,PageLinks:b,PrevPageLink:L,RowsPerPageDropdown:y,JumpToPageDropdown:d,JumpToPageInput:m}};const N={key:0},$={key:0,class:"p-paginator-left-content"},D={key:1,class:"p-paginator-right-content"};return function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-paginator-default {\n    display: flex;\n}\n.p-paginator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n.p-paginator-left-content {\n    margin-right: auto;\n}\n.p-paginator-right-content {\n    margin-left: auto;\n}\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-paginator-element:focus {\n    z-index: 1;\n    position: relative;\n}\n"),B.render=function(e,a,n,r,o,i){const s=t.resolveComponent("FirstPageLink"),l=t.resolveComponent("PrevPageLink"),p=t.resolveComponent("NextPageLink"),g=t.resolveComponent("LastPageLink"),c=t.resolveComponent("PageLinks"),u=t.resolveComponent("CurrentPageReport"),d=t.resolveComponent("RowsPerPageDropdown"),m=t.resolveComponent("JumpToPageDropdown"),h=t.resolveComponent("JumpToPageInput");return n.alwaysShow||i.pageLinks&&i.pageLinks.length>1?(t.openBlock(),t.createElementBlock("nav",N,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.templateItems,((r,P)=>(t.openBlock(),t.createElementBlock("div",{key:P,ref_for:!0,ref:"paginator",class:t.normalizeClass(["p-paginator p-component",i.getPaginatorClasses(P)])},[e.$slots.start?(t.openBlock(),t.createElementBlock("div",$,[t.renderSlot(e.$slots,"start",{state:i.currentState})])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r,(e=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:e},["FirstPageLink"===e?(t.openBlock(),t.createBlock(s,{key:0,"aria-label":i.getAriaLabel("firstPageLabel"),onClick:a[0]||(a[0]=e=>i.changePageToFirst(e)),disabled:i.isFirstPage||i.empty},null,8,["aria-label","disabled"])):"PrevPageLink"===e?(t.openBlock(),t.createBlock(l,{key:1,"aria-label":i.getAriaLabel("prevPageLabel"),onClick:a[1]||(a[1]=e=>i.changePageToPrev(e)),disabled:i.isFirstPage||i.empty},null,8,["aria-label","disabled"])):"NextPageLink"===e?(t.openBlock(),t.createBlock(p,{key:2,"aria-label":i.getAriaLabel("nextPageLabel"),onClick:a[2]||(a[2]=e=>i.changePageToNext(e)),disabled:i.isLastPage||i.empty},null,8,["aria-label","disabled"])):"LastPageLink"===e?(t.openBlock(),t.createBlock(g,{key:3,"aria-label":i.getAriaLabel("lastPageLabel"),onClick:a[3]||(a[3]=e=>i.changePageToLast(e)),disabled:i.isLastPage||i.empty},null,8,["aria-label","disabled"])):"PageLinks"===e?(t.openBlock(),t.createBlock(c,{key:4,"aria-label":i.getAriaLabel("pageLabel"),value:i.pageLinks,page:i.page,onClick:a[4]||(a[4]=e=>i.changePageLink(e))},null,8,["aria-label","value","page"])):"CurrentPageReport"===e?(t.openBlock(),t.createBlock(u,{key:5,"aria-live":"polite",template:n.currentPageReportTemplate,currentPage:i.currentPage,page:i.page,pageCount:i.pageCount,first:o.d_first,rows:o.d_rows,totalRecords:n.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===e&&n.rowsPerPageOptions?(t.openBlock(),t.createBlock(d,{key:6,"aria-label":i.getAriaLabel("rowsPerPageLabel"),rows:o.d_rows,options:n.rowsPerPageOptions,onRowsChange:a[5]||(a[5]=e=>i.onRowChange(e)),disabled:i.empty},null,8,["aria-label","rows","options","disabled"])):"JumpToPageDropdown"===e?(t.openBlock(),t.createBlock(m,{key:7,"aria-label":i.getAriaLabel("jumpToPageDropdownLabel"),page:i.page,pageCount:i.pageCount,onPageChange:a[6]||(a[6]=e=>i.changePage(e)),disabled:i.empty},null,8,["aria-label","page","pageCount","disabled"])):"JumpToPageInput"===e?(t.openBlock(),t.createBlock(h,{key:8,page:i.currentPage,onPageChange:a[7]||(a[7]=e=>i.changePage(e)),disabled:i.empty},null,8,["page","disabled"])):t.createCommentVNode("",!0)],64)))),128)),e.$slots.end?(t.openBlock(),t.createElementBlock("div",D,[t.renderSlot(e.$slots,"end",{state:i.currentState})])):t.createCommentVNode("",!0)],2)))),128))])):t.createCommentVNode("",!0)},B}(primevue.utils,Vue,primevue.ripple,primevue.dropdown,primevue.inputnumber);
+this.primevue=this.primevue||{},this.primevue.paginator=function(e,t,a,n,o,r,i,l,s){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=p(a),g=p(n),u=p(o),d=p(r),m=p(i),h=p(l),k=p(s),f={name:"CurrentPageReport",props:{pageCount:{type:Number,default:0},currentPage:{type:Number,default:0},page:{type:Number,default:0},first:{type:Number,default:0},rows:{type:Number,default:0},totalRecords:{type:Number,default:0},template:{type:String,default:"({currentPage} of {totalPages})"}},computed:{text(){return this.template.replace("{currentPage}",this.currentPage).replace("{totalPages}",this.pageCount).replace("{first}",this.pageCount>0?this.first+1:0).replace("{last}",Math.min(this.first+this.rows,this.totalRecords)).replace("{rows}",this.rows).replace("{totalRecords}",this.totalRecords)}}};const P={class:"p-paginator-current"};f.render=function(e,a,n,o,r,i){return t.openBlock(),t.createElementBlock("span",P,t.toDisplayString(i.text),1)};var b={name:"FirstPageLink",props:{template:{type:Function,default:null}},computed:{containerClass(){return["p-paginator-first p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},components:{AngleDoubleLeftIcon:c.default},directives:{ripple:g.default}};b.render=function(e,a,n,o,r,i){const l=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.template||"AngleDoubleLeftIcon"),{class:"p-paginator-icon"}))],2)),[[l]])};var v={name:"JumpToPageDropdown",emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},methods:{onChange(e){this.$emit("page-change",e)}},computed:{pageOptions(){let e=[];for(let t=0;t<this.pageCount;t++)e.push({label:String(t+1),value:t});return e}},components:{JTPDropdown:u.default}};v.render=function(e,a,n,o,r,i){const l=t.resolveComponent("JTPDropdown");return t.openBlock(),t.createBlock(l,{modelValue:n.page,options:i.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":a[0]||(a[0]=e=>i.onChange(e)),class:"p-paginator-page-options",disabled:n.disabled},null,8,["modelValue","options","disabled"])};var C={name:"JumpToPageInput",inheritAttrs:!1,emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},data(){return{d_page:this.page}},watch:{page(e){this.d_page=e}},methods:{onChange(e){e!==this.page&&(this.d_page=e,this.$emit("page-change",e-1))}},computed:{inputArialabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.jumpToPageInputLabel:void 0}},components:{JTPInput:d.default}};C.render=function(e,a,n,o,r,i){const l=t.resolveComponent("JTPInput");return t.openBlock(),t.createBlock(l,{ref:"jtpInput",modelValue:r.d_page,class:"p-paginator-page-input","aria-label":i.inputArialabel,disabled:n.disabled,"onUpdate:modelValue":i.onChange},null,8,["modelValue","aria-label","disabled","onUpdate:modelValue"])};var y={name:"LastPageLink",props:{template:{type:Function,default:null}},computed:{containerClass(){return["p-paginator-last p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},components:{AngleDoubleRightIcon:m.default},directives:{ripple:g.default}};y.render=function(e,a,n,o,r,i){const l=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.template||"AngleDoubleRightIcon"),{class:"p-paginator-icon"}))],2)),[[l]])};var L={name:"NextPageLink",props:{template:{type:Function,default:null}},computed:{containerClass(){return["p-paginator-next p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},components:{AngleRightIcon:h.default},directives:{ripple:g.default}};L.render=function(e,a,n,o,r,i){const l=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.template||"AngleRightIcon"),{class:"p-paginator-icon"}))],2)),[[l]])};var w={name:"PageLinks",inheritAttrs:!1,emits:["click"],props:{value:Array,page:Number},methods:{onPageLinkClick(e,t){this.$emit("click",{originalEvent:e,value:t})},ariaPageLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g,e):void 0}},computed:{},directives:{ripple:g.default}};const B={class:"p-paginator-pages"},D=["aria-label","aria-current","onClick"];w.render=function(e,a,n,o,r,i){const l=t.resolveDirective("ripple");return t.openBlock(),t.createElementBlock("span",B,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,(e=>t.withDirectives((t.openBlock(),t.createElementBlock("button",{key:e,class:t.normalizeClass(["p-paginator-page p-paginator-element p-link",{"p-highlight":e-1===n.page}]),type:"button","aria-label":i.ariaPageLabel(e),"aria-current":e-1===n.page?"page":void 0,onClick:t=>i.onPageLinkClick(t,e)},[t.createTextVNode(t.toDisplayString(e),1)],10,D)),[[l]]))),128))])};var $={name:"PrevPageLink",props:{template:{type:Function,default:null}},computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},components:{AngleLeftIcon:k.default},directives:{ripple:g.default}};$.render=function(e,a,n,o,r,i){const l=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.template||"AngleLeftIcon"),{class:"p-paginator-icon"}))],2)),[[l]])};var N={name:"RowsPerPageDropdown",emits:["rows-change"],props:{options:Array,rows:Number,disabled:Boolean},methods:{onChange(e){this.$emit("rows-change",e)}},computed:{rowsOptions(){let e=[];if(this.options)for(let t=0;t<this.options.length;t++)e.push({label:String(this.options[t]),value:this.options[t]});return e}},components:{RPPDropdown:u.default}};N.render=function(e,a,n,o,r,i){const l=t.resolveComponent("RPPDropdown");return t.openBlock(),t.createBlock(l,{modelValue:n.rows,options:i.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":a[0]||(a[0]=e=>i.onChange(e)),class:"p-paginator-rpp-options",disabled:n.disabled},null,8,["modelValue","options","disabled"])};var R={name:"Paginator",emits:["update:first","update:rows","page"],props:{totalRecords:{type:Number,default:0},rows:{type:Number,default:0},first:{type:Number,default:0},pageLinkSize:{type:Number,default:5},rowsPerPageOptions:{type:Array,default:null},template:{type:[Object,String],default:"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"},currentPageReportTemplate:{type:null,default:"({currentPage} of {totalPages})"},alwaysShow:{type:Boolean,default:!0}},data(){return{d_first:this.first,d_rows:this.rows}},watch:{first(e){this.d_first=e},rows(e){this.d_rows=e},totalRecords(e){this.page>0&&e&&this.d_first>=e&&this.changePage(this.pageCount-1)}},mounted(){this.setPaginatorAttribute(),this.createStyle()},methods:{changePage(e){const t=this.pageCount;if(e>=0&&e<t){this.d_first=this.d_rows*e;const a={page:e,first:this.d_first,rows:this.d_rows,pageCount:t};this.$emit("update:first",this.d_first),this.$emit("update:rows",this.d_rows),this.$emit("page",a)}},changePageToFirst(e){this.isFirstPage||this.changePage(0),e.preventDefault()},changePageToPrev(e){this.changePage(this.page-1),e.preventDefault()},changePageLink(e){this.changePage(e.value-1),e.originalEvent.preventDefault()},changePageToNext(e){this.changePage(this.page+1),e.preventDefault()},changePageToLast(e){this.isLastPage||this.changePage(this.pageCount-1),e.preventDefault()},onRowChange(e){this.d_rows=e,this.changePage(this.page)},createStyle(){if(this.hasBreakpoints()){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";const t=Object.keys(this.template),a={};t.sort(((e,t)=>parseInt(e)-parseInt(t))).forEach((e=>{a[e]=this.template[e]}));for(const[t,[n]]of Object.entries(Object.entries(a))){const o=Object.entries(a)[t-1]?`and (min-width:${Object.keys(a)[t-1]})`:"";e+="default"===n?`\n                            @media screen ${o} {\n                                .paginator[${this.attributeSelector}],\n                                .p-paginator-default{\n                                    display: flex !important;\n                                }\n                            }\n                        `:`\n                        .paginator[${this.attributeSelector}], .p-paginator-${n} {\n                                display: none !important;\n                            }\n                        @media screen ${o} and (max-width: ${n}) {\n                            .paginator[${this.attributeSelector}], .p-paginator-${n} {\n                                display: flex !important;\n                            }\n                            .paginator[${this.attributeSelector}],\n                            .p-paginator-default{\n                                display: none !important;\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},hasBreakpoints(){return"object"==typeof this.template},getPaginatorClasses(e){return[{"p-paginator-default":!this.hasBreakpoints(),[`p-paginator-${e}`]:this.hasBreakpoints()}]},setPaginatorAttribute(){this.$refs.paginator&&this.$refs.paginator.length>=0&&[...this.$refs.paginator].forEach((e=>{e.setAttribute(this.attributeSelector,"")}))},getAriaLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria[e]:void 0}},computed:{templateItems(){let e={};if(this.hasBreakpoints()){e=this.template,e.default||(e.default="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown");for(const t in e)e[t]=this.template[t].split(" ").map((e=>e.trim()));return e}return e.default=this.template.split(" ").map((e=>e.trim())),e},page(){return Math.floor(this.d_first/this.d_rows)},pageCount(){return Math.ceil(this.totalRecords/this.d_rows)},isFirstPage(){return 0===this.page},isLastPage(){return this.page===this.pageCount-1},calculatePageLinkBoundaries(){const e=this.pageCount,t=Math.min(this.pageLinkSize,e);let a=Math.max(0,Math.ceil(this.page-t/2)),n=Math.min(e-1,a+t-1);const o=this.pageLinkSize-(n-a+1);return a=Math.max(0,a-o),[a,n]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,a=t[0],n=t[1];for(var o=a;o<=n;o++)e.push(o+1);return e},currentState(){return{page:this.page,first:this.d_first,rows:this.d_rows}},empty(){return 0===this.pageCount},currentPage(){return this.pageCount>0?this.page+1:0},attributeSelector:()=>e.UniqueComponentId()},components:{CurrentPageReport:f,FirstPageLink:b,LastPageLink:y,NextPageLink:L,PageLinks:w,PrevPageLink:$,RowsPerPageDropdown:N,JumpToPageDropdown:v,JumpToPageInput:C}};const x={key:0},T={key:0,class:"p-paginator-left-content"},A={key:1,class:"p-paginator-right-content"};return function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===a&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-paginator-default {\n    display: flex;\n}\n.p-paginator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n.p-paginator-left-content {\n    margin-right: auto;\n}\n.p-paginator-right-content {\n    margin-left: auto;\n}\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-paginator-element:focus {\n    z-index: 1;\n    position: relative;\n}\n"),R.render=function(e,a,n,o,r,i){const l=t.resolveComponent("FirstPageLink"),s=t.resolveComponent("PrevPageLink"),p=t.resolveComponent("NextPageLink"),c=t.resolveComponent("LastPageLink"),g=t.resolveComponent("PageLinks"),u=t.resolveComponent("CurrentPageReport"),d=t.resolveComponent("RowsPerPageDropdown"),m=t.resolveComponent("JumpToPageDropdown"),h=t.resolveComponent("JumpToPageInput");return n.alwaysShow||i.pageLinks&&i.pageLinks.length>1?(t.openBlock(),t.createElementBlock("nav",x,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.templateItems,((o,k)=>(t.openBlock(),t.createElementBlock("div",{key:k,ref_for:!0,ref:"paginator",class:t.normalizeClass(["p-paginator p-component",i.getPaginatorClasses(k)])},[e.$slots.start?(t.openBlock(),t.createElementBlock("div",T,[t.renderSlot(e.$slots,"start",{state:i.currentState})])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o,(o=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:o},["FirstPageLink"===o?(t.openBlock(),t.createBlock(l,{key:0,"aria-label":i.getAriaLabel("firstPageLabel"),template:e.$slots.firstpagelinkicon,onClick:a[0]||(a[0]=e=>i.changePageToFirst(e)),disabled:i.isFirstPage||i.empty},null,8,["aria-label","template","disabled"])):"PrevPageLink"===o?(t.openBlock(),t.createBlock(s,{key:1,"aria-label":i.getAriaLabel("prevPageLabel"),template:e.$slots.prevpagelinkicon,onClick:a[1]||(a[1]=e=>i.changePageToPrev(e)),disabled:i.isFirstPage||i.empty},null,8,["aria-label","template","disabled"])):"NextPageLink"===o?(t.openBlock(),t.createBlock(p,{key:2,"aria-label":i.getAriaLabel("nextPageLabel"),template:e.$slots.nextpagelinkicon,onClick:a[2]||(a[2]=e=>i.changePageToNext(e)),disabled:i.isLastPage||i.empty},null,8,["aria-label","template","disabled"])):"LastPageLink"===o?(t.openBlock(),t.createBlock(c,{key:3,"aria-label":i.getAriaLabel("lastPageLabel"),template:e.$slots.lastpagelinkicon,onClick:a[3]||(a[3]=e=>i.changePageToLast(e)),disabled:i.isLastPage||i.empty},null,8,["aria-label","template","disabled"])):"PageLinks"===o?(t.openBlock(),t.createBlock(g,{key:4,"aria-label":i.getAriaLabel("pageLabel"),value:i.pageLinks,page:i.page,onClick:a[4]||(a[4]=e=>i.changePageLink(e))},null,8,["aria-label","value","page"])):"CurrentPageReport"===o?(t.openBlock(),t.createBlock(u,{key:5,"aria-live":"polite",template:n.currentPageReportTemplate,currentPage:i.currentPage,page:i.page,pageCount:i.pageCount,first:r.d_first,rows:r.d_rows,totalRecords:n.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===o&&n.rowsPerPageOptions?(t.openBlock(),t.createBlock(d,{key:6,"aria-label":i.getAriaLabel("rowsPerPageLabel"),rows:r.d_rows,options:n.rowsPerPageOptions,onRowsChange:a[5]||(a[5]=e=>i.onRowChange(e)),disabled:i.empty},null,8,["aria-label","rows","options","disabled"])):"JumpToPageDropdown"===o?(t.openBlock(),t.createBlock(m,{key:7,"aria-label":i.getAriaLabel("jumpToPageDropdownLabel"),page:i.page,pageCount:i.pageCount,onPageChange:a[6]||(a[6]=e=>i.changePage(e)),disabled:i.empty},null,8,["aria-label","page","pageCount","disabled"])):"JumpToPageInput"===o?(t.openBlock(),t.createBlock(h,{key:8,page:i.currentPage,onPageChange:a[7]||(a[7]=e=>i.changePage(e)),disabled:i.empty},null,8,["page","disabled"])):t.createCommentVNode("",!0)],64)))),128)),e.$slots.end?(t.openBlock(),t.createElementBlock("div",A,[t.renderSlot(e.$slots,"end",{state:i.currentState})])):t.createCommentVNode("",!0)],2)))),128))])):t.createCommentVNode("",!0)},R}(primevue.utils,Vue,primevue.icons.angledoubleleft,primevue.ripple,primevue.dropdown,primevue.inputnumber,primevue.icons.angledoubleright,primevue.icons.angleright,primevue.icons.angleleft);

package/panel/Panel.d.ts

@@ -10,6 +10,16 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: PanelPassThroughMethodOptions) => PanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelPassThroughMethodOptions {
+    props: PanelProps;
+    state: PanelState;
+}
+
 /**
  * Custom toggle event.
  * @see {@link PanelEmits.toggle}
@@ -25,6 +35,67 @@ export interface PanelToggleEvent {
     value: boolean;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface PanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icons' DOM element.
+     */
+    icons?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the togglericon's DOM element.
+     */
+    togglerIcon?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleableContent?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: PanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface PanelState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    d_collapsed: boolean;
+}
+
 /**
  * Defines valid properties in Panel component.
  */
@@ -45,8 +116,14 @@ export interface PanelProps {
     collapsed?: boolean;
     /**
      * Uses to pass the custom value to read for the button inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     toggleButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelPassThroughOptions}
+     */
+    pt?: PanelPassThroughOptions;
 }
 
 /**
@@ -65,6 +142,20 @@ export interface PanelSlots {
      * Custom icons template.
      */
     icons(): VNode[];
+    /**
+     * Custom toggler icon template of panel.
+     * @param {Object} scope - toggler icon slot's params.
+     */
+    togglericon(scope: {
+        /**
+         * Collapsed state as a boolean
+         */
+        collapsed: boolean;
+    }): VNode[];
+    /**
+     * Custom footer template.
+     */
+    footer(): VNode[];
 }
 
 /**

package/panel/Panel.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="containerClass">
-        <div class="p-panel-header">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div class="p-panel-header" v-bind="ptm('header')">
             <slot name="header">
-                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title">{{ header }}</span>
+                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
             </slot>
-            <div class="p-panel-icons">
+            <div class="p-panel-icons" v-bind="ptm('icons')">
                 <slot name="icons"></slot>
                 <button
                     v-if="toggleable"
@@ -18,28 +18,37 @@
                     :aria-expanded="!d_collapsed"
                     @click="toggle"
                     @keydown="onKeyDown"
-                    v-bind="toggleButtonProps"
+                    v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
                 >
-                    <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
+                    <slot name="togglericon" :collapsed="d_collapsed">
+                        <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" v-bind="ptm('togglericon')" />
+                    </slot>
                 </button>
             </div>
         </div>
         <transition name="p-toggleable-content">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
-                <div class="p-panel-content">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
+                <div class="p-panel-content" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
+                <div v-if="$slots.footer" class="p-panel-footer" v-bind="ptm('footer')">
+                    <slot name="footer"></slot>
+                </div>
             </div>
         </transition>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import MinusIcon from 'primevue/icons/minus';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Panel',
+    extends: BaseComponent,
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,
@@ -87,6 +96,10 @@ export default {
             return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
         }
     },
+    components: {
+        PlusIcon,
+        MinusIcon
+    },
     directives: {
         ripple: Ripple
     }

package/panel/panel.cjs.js

@@ -1,15 +1,22 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+var MinusIcon = require('primevue/icons/minus');
+var PlusIcon = require('primevue/icons/plus');
 var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var MinusIcon__default = /*#__PURE__*/_interopDefaultLegacy(MinusIcon);
+var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Panel',
+    extends: BaseComponent__default["default"],
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,
@@ -57,35 +64,34 @@ var script = {
             return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
         }
     },
+    components: {
+        PlusIcon: PlusIcon__default["default"],
+        MinusIcon: MinusIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-panel-header" };
-const _hoisted_2 = ["id"];
-const _hoisted_3 = { class: "p-panel-icons" };
-const _hoisted_4 = ["id", "aria-label", "aria-controls", "aria-expanded"];
-const _hoisted_5 = ["id", "aria-labelledby"];
-const _hoisted_6 = { class: "p-panel-content" };
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-label", "aria-controls", "aria-expanded"];
+const _hoisted_3 = ["id", "aria-labelledby"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass)
-  }, [
-    vue.createElementVNode("div", _hoisted_1, [
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-header" }, _ctx.ptm('header')), [
       vue.renderSlot(_ctx.$slots, "header", {}, () => [
         ($props.header)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
               key: 0,
               id: $options.ariaId + '_header',
               class: "p-panel-title"
-            }, vue.toDisplayString($props.header), 9, _hoisted_2))
+            }, _ctx.ptm('title')), vue.toDisplayString($props.header), 17, _hoisted_1))
           : vue.createCommentVNode("", true)
       ]),
-      vue.createElementVNode("div", _hoisted_3, [
+      vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-icons" }, _ctx.ptm('icons')), [
         vue.renderSlot(_ctx.$slots, "icons"),
         ($props.toggleable)
           ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
@@ -99,34 +105,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-expanded": !$data.d_collapsed,
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
               onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-            }, $props.toggleButtonProps), [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass({ 'pi pi-minus': !$data.d_collapsed, 'pi pi-plus': $data.d_collapsed })
-              }, null, 2)
-            ], 16, _hoisted_4)), [
+            }, { ...$props.toggleButtonProps, ..._ctx.ptm('toggler') }), [
+              vue.renderSlot(_ctx.$slots, "togglericon", { collapsed: $data.d_collapsed }, () => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.d_collapsed ? 'PlusIcon' : 'MinusIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('togglericon'))), null, 16))
+              ])
+            ], 16, _hoisted_2)), [
               [_directive_ripple]
             ])
           : vue.createCommentVNode("", true)
-      ])
-    ]),
+      ], 16)
+    ], 16),
     vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
       default: vue.withCtx(() => [
-        vue.withDirectives(vue.createElementVNode("div", {
+        vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
           id: $options.ariaId + '_content',
           class: "p-toggleable-content",
           role: "region",
           "aria-labelledby": $options.ariaId + '_header'
-        }, [
-          vue.createElementVNode("div", _hoisted_6, [
+        }, _ctx.ptm('toggleablecontent')), [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-content" }, _ctx.ptm('content')), [
             vue.renderSlot(_ctx.$slots, "default")
-          ])
-        ], 8, _hoisted_5), [
+          ], 16),
+          (_ctx.$slots.footer)
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                class: "p-panel-footer"
+              }, _ctx.ptm('footer')), [
+                vue.renderSlot(_ctx.$slots, "footer")
+              ], 16))
+            : vue.createCommentVNode("", true)
+        ], 16, _hoisted_3), [
           [vue.vShow, !$data.d_collapsed]
         ])
       ]),
       _: 3
     })
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/panel/panel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),l=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Panel",emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{ariaId:()=>t.UniqueComponentId(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]},buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.header}},directives:{ripple:n(e).default}};const o={class:"p-panel-header"},i=["id"],r={class:"p-panel-icons"},d=["id","aria-label","aria-controls","aria-expanded"],s=["id","aria-labelledby"],p={class:"p-panel-content"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),a.render=function(e,t,n,a,c,u){const g=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(u.containerClass)},[l.createElementVNode("div",o,[l.renderSlot(e.$slots,"header",{},(()=>[n.header?(l.openBlock(),l.createElementBlock("span",{key:0,id:u.ariaId+"_header",class:"p-panel-title"},l.toDisplayString(n.header),9,i)):l.createCommentVNode("",!0)])),l.createElementVNode("div",r,[l.renderSlot(e.$slots,"icons"),n.toggleable?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,id:u.ariaId+"_header",type:"button",role:"button",class:"p-panel-header-icon p-panel-toggler p-link","aria-label":u.buttonAriaLabel,"aria-controls":u.ariaId+"_content","aria-expanded":!c.d_collapsed,onClick:t[0]||(t[0]=(...e)=>u.toggle&&u.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>u.onKeyDown&&u.onKeyDown(...e))},n.toggleButtonProps),[l.createElementVNode("span",{class:l.normalizeClass({"pi pi-minus":!c.d_collapsed,"pi pi-plus":c.d_collapsed})},null,2)],16,d)),[[g]]):l.createCommentVNode("",!0)])]),l.createVNode(l.Transition,{name:"p-toggleable-content"},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",{id:u.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":u.ariaId+"_header"},[l.createElementVNode("div",p,[l.renderSlot(e.$slots,"default")])],8,s),[[l.vShow,!c.d_collapsed]])])),_:3})],2)},module.exports=a;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/icons/minus"),o=require("primevue/icons/plus"),l=require("primevue/ripple"),n=require("primevue/utils"),a=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e),s=r(t),d=r(o),p=r(l),c={name:"Panel",extends:i.default,emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{ariaId:()=>n.UniqueComponentId(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]},buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.header}},components:{PlusIcon:d.default,MinusIcon:s.default},directives:{ripple:p.default}};const u=["id"],g=["id","aria-label","aria-controls","aria-expanded"],m=["id","aria-labelledby"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),c.render=function(e,t,o,l,n,r){const i=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:r.containerClass},e.ptm("root")),[a.createElementVNode("div",a.mergeProps({class:"p-panel-header"},e.ptm("header")),[a.renderSlot(e.$slots,"header",{},(()=>[o.header?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:0,id:r.ariaId+"_header",class:"p-panel-title"},e.ptm("title")),a.toDisplayString(o.header),17,u)):a.createCommentVNode("",!0)])),a.createElementVNode("div",a.mergeProps({class:"p-panel-icons"},e.ptm("icons")),[a.renderSlot(e.$slots,"icons"),o.toggleable?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,id:r.ariaId+"_header",type:"button",role:"button",class:"p-panel-header-icon p-panel-toggler p-link","aria-label":r.buttonAriaLabel,"aria-controls":r.ariaId+"_content","aria-expanded":!n.d_collapsed,onClick:t[0]||(t[0]=(...e)=>r.toggle&&r.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>r.onKeyDown&&r.onKeyDown(...e))},{...o.toggleButtonProps,...e.ptm("toggler")}),[a.renderSlot(e.$slots,"togglericon",{collapsed:n.d_collapsed},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(n.d_collapsed?"PlusIcon":"MinusIcon"),a.normalizeProps(a.guardReactiveProps(e.ptm("togglericon"))),null,16))]))],16,g)),[[i]]):a.createCommentVNode("",!0)],16)],16),a.createVNode(a.Transition,{name:"p-toggleable-content"},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",a.mergeProps({id:r.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":r.ariaId+"_header"},e.ptm("toggleablecontent")),[a.createElementVNode("div",a.mergeProps({class:"p-panel-content"},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16),e.$slots.footer?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:"p-panel-footer"},e.ptm("footer")),[a.renderSlot(e.$slots,"footer")],16)):a.createCommentVNode("",!0)],16,m),[[a.vShow,!n.d_collapsed]])])),_:3})],16)},module.exports=c;

package/panel/panel.esm.js

@@ -1,9 +1,13 @@
+import BaseComponent from 'primevue/basecomponent';
+import MinusIcon from 'primevue/icons/minus';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
-import { resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, mergeProps, createVNode, Transition, withCtx, vShow } from 'vue';
+import { resolveDirective, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, createBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, createVNode, Transition, withCtx, vShow } from 'vue';
 
 var script = {
     name: 'Panel',
+    extends: BaseComponent,
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,
@@ -51,35 +55,34 @@ var script = {
             return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
         }
     },
+    components: {
+        PlusIcon,
+        MinusIcon
+    },
     directives: {
         ripple: Ripple
     }
 };
 
-const _hoisted_1 = { class: "p-panel-header" };
-const _hoisted_2 = ["id"];
-const _hoisted_3 = { class: "p-panel-icons" };
-const _hoisted_4 = ["id", "aria-label", "aria-controls", "aria-expanded"];
-const _hoisted_5 = ["id", "aria-labelledby"];
-const _hoisted_6 = { class: "p-panel-content" };
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-label", "aria-controls", "aria-expanded"];
+const _hoisted_3 = ["id", "aria-labelledby"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass)
-  }, [
-    createElementVNode("div", _hoisted_1, [
+  return (openBlock(), createElementBlock("div", mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
+    createElementVNode("div", mergeProps({ class: "p-panel-header" }, _ctx.ptm('header')), [
       renderSlot(_ctx.$slots, "header", {}, () => [
         ($props.header)
-          ? (openBlock(), createElementBlock("span", {
+          ? (openBlock(), createElementBlock("span", mergeProps({
               key: 0,
               id: $options.ariaId + '_header',
               class: "p-panel-title"
-            }, toDisplayString($props.header), 9, _hoisted_2))
+            }, _ctx.ptm('title')), toDisplayString($props.header), 17, _hoisted_1))
           : createCommentVNode("", true)
       ]),
-      createElementVNode("div", _hoisted_3, [
+      createElementVNode("div", mergeProps({ class: "p-panel-icons" }, _ctx.ptm('icons')), [
         renderSlot(_ctx.$slots, "icons"),
         ($props.toggleable)
           ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
@@ -93,34 +96,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-expanded": !$data.d_collapsed,
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
               onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-            }, $props.toggleButtonProps), [
-              createElementVNode("span", {
-                class: normalizeClass({ 'pi pi-minus': !$data.d_collapsed, 'pi pi-plus': $data.d_collapsed })
-              }, null, 2)
-            ], 16, _hoisted_4)), [
+            }, { ...$props.toggleButtonProps, ..._ctx.ptm('toggler') }), [
+              renderSlot(_ctx.$slots, "togglericon", { collapsed: $data.d_collapsed }, () => [
+                (openBlock(), createBlock(resolveDynamicComponent($data.d_collapsed ? 'PlusIcon' : 'MinusIcon'), normalizeProps(guardReactiveProps(_ctx.ptm('togglericon'))), null, 16))
+              ])
+            ], 16, _hoisted_2)), [
               [_directive_ripple]
             ])
           : createCommentVNode("", true)
-      ])
-    ]),
+      ], 16)
+    ], 16),
     createVNode(Transition, { name: "p-toggleable-content" }, {
       default: withCtx(() => [
-        withDirectives(createElementVNode("div", {
+        withDirectives(createElementVNode("div", mergeProps({
           id: $options.ariaId + '_content',
           class: "p-toggleable-content",
           role: "region",
           "aria-labelledby": $options.ariaId + '_header'
-        }, [
-          createElementVNode("div", _hoisted_6, [
+        }, _ctx.ptm('toggleablecontent')), [
+          createElementVNode("div", mergeProps({ class: "p-panel-content" }, _ctx.ptm('content')), [
             renderSlot(_ctx.$slots, "default")
-          ])
-        ], 8, _hoisted_5), [
+          ], 16),
+          (_ctx.$slots.footer)
+            ? (openBlock(), createElementBlock("div", mergeProps({
+                key: 0,
+                class: "p-panel-footer"
+              }, _ctx.ptm('footer')), [
+                renderSlot(_ctx.$slots, "footer")
+              ], 16))
+            : createCommentVNode("", true)
+        ], 16, _hoisted_3), [
           [vShow, !$data.d_collapsed]
         ])
       ]),
       _: 3
     })
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/panel/panel.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{UniqueComponentId as t}from"primevue/utils";import{resolveDirective as l,openBlock as a,createElementBlock as n,normalizeClass as o,createElementVNode as i,renderSlot as s,toDisplayString as d,createCommentVNode as r,withDirectives as p,mergeProps as c,createVNode as g,Transition as u,withCtx as h,vShow as m}from"vue";var b={name:"Panel",emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{ariaId:()=>t(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]},buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.header}},directives:{ripple:e}};const f={class:"p-panel-header"},y=["id"],v={class:"p-panel-icons"},_=["id","aria-label","aria-controls","aria-expanded"],x=["id","aria-labelledby"],B={class:"p-panel-content"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),b.render=function(e,t,b,w,C,I){const P=l("ripple");return a(),n("div",{class:o(I.containerClass)},[i("div",f,[s(e.$slots,"header",{},(()=>[b.header?(a(),n("span",{key:0,id:I.ariaId+"_header",class:"p-panel-title"},d(b.header),9,y)):r("",!0)])),i("div",v,[s(e.$slots,"icons"),b.toggleable?p((a(),n("button",c({key:0,id:I.ariaId+"_header",type:"button",role:"button",class:"p-panel-header-icon p-panel-toggler p-link","aria-label":I.buttonAriaLabel,"aria-controls":I.ariaId+"_content","aria-expanded":!C.d_collapsed,onClick:t[0]||(t[0]=(...e)=>I.toggle&&I.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>I.onKeyDown&&I.onKeyDown(...e))},b.toggleButtonProps),[i("span",{class:o({"pi pi-minus":!C.d_collapsed,"pi pi-plus":C.d_collapsed})},null,2)],16,_)),[[P]]):r("",!0)])]),g(u,{name:"p-toggleable-content"},{default:h((()=>[p(i("div",{id:I.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":I.ariaId+"_header"},[i("div",B,[s(e.$slots,"default")])],8,x),[[m,!C.d_collapsed]])])),_:3})],2)};export{b as default};
+import e from"primevue/basecomponent";import t from"primevue/icons/minus";import o from"primevue/icons/plus";import l from"primevue/ripple";import{UniqueComponentId as n}from"primevue/utils";import{resolveDirective as a,openBlock as i,createElementBlock as s,mergeProps as r,createElementVNode as p,renderSlot as d,toDisplayString as c,createCommentVNode as g,withDirectives as u,createBlock as m,resolveDynamicComponent as h,normalizeProps as f,guardReactiveProps as b,createVNode as v,Transition as y,withCtx as _,vShow as x}from"vue";var I={name:"Panel",extends:e,emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{ariaId:()=>n(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]},buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.header}},components:{PlusIcon:o,MinusIcon:t},directives:{ripple:l}};const B=["id"],P=["id","aria-label","aria-controls","aria-expanded"],$=["id","aria-labelledby"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),I.render=function(e,t,o,l,n,I){const w=a("ripple");return i(),s("div",r({class:I.containerClass},e.ptm("root")),[p("div",r({class:"p-panel-header"},e.ptm("header")),[d(e.$slots,"header",{},(()=>[o.header?(i(),s("span",r({key:0,id:I.ariaId+"_header",class:"p-panel-title"},e.ptm("title")),c(o.header),17,B)):g("",!0)])),p("div",r({class:"p-panel-icons"},e.ptm("icons")),[d(e.$slots,"icons"),o.toggleable?u((i(),s("button",r({key:0,id:I.ariaId+"_header",type:"button",role:"button",class:"p-panel-header-icon p-panel-toggler p-link","aria-label":I.buttonAriaLabel,"aria-controls":I.ariaId+"_content","aria-expanded":!n.d_collapsed,onClick:t[0]||(t[0]=(...e)=>I.toggle&&I.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>I.onKeyDown&&I.onKeyDown(...e))},{...o.toggleButtonProps,...e.ptm("toggler")}),[d(e.$slots,"togglericon",{collapsed:n.d_collapsed},(()=>[(i(),m(h(n.d_collapsed?"PlusIcon":"MinusIcon"),f(b(e.ptm("togglericon"))),null,16))]))],16,P)),[[w]]):g("",!0)],16)],16),v(y,{name:"p-toggleable-content"},{default:_((()=>[u(p("div",r({id:I.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":I.ariaId+"_header"},e.ptm("toggleablecontent")),[p("div",r({class:"p-panel-content"},e.ptm("content")),[d(e.$slots,"default")],16),e.$slots.footer?(i(),s("div",r({key:0,class:"p-panel-footer"},e.ptm("footer")),[d(e.$slots,"footer")],16)):g("",!0)],16,$),[[x,!n.d_collapsed]])])),_:3})],16)};export{I as default};