primevue 3.17.0 → 3.18.0

package/paginator/paginator.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.paginator=function(e,t,n,a){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(t),i=o(n),s=o(a),l={name:"CurrentPageReport",inheritAttrs:!1,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"};l.render=function(t,n,a,o,r,i){return e.openBlock(),e.createElementBlock("span",p,e.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:r.default}};const g=[e.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-double-left"},null,-1)];c.render=function(t,n,a,o,r,i){const s=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(i.containerClass),type:"button"},g,2)),[[s]])};var u={name:"LastPageLink",computed:{containerClass(){return["p-paginator-last p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:r.default}};const d=[e.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-double-right"},null,-1)];u.render=function(t,n,a,o,r,i){const s=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(i.containerClass),type:"button"},d,2)),[[s]])};var m={name:"NextPageLink",computed:{containerClass(){return["p-paginator-next p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:r.default}};const h=[e.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-right"},null,-1)];m.render=function(t,n,a,o,r,i){const s=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(i.containerClass),type:"button"},h,2)),[[s]])};var k={name:"PageLinks",inheritAttrs:!1,emits:["click"],props:{value:Array,page:Number},methods:{onPageLinkClick(e,t){this.$emit("click",{originalEvent:e,value:t})}},directives:{ripple:r.default}};const P={class:"p-paginator-pages"},f=["onClick"];k.render=function(t,n,a,o,r,i){const s=e.resolveDirective("ripple");return e.openBlock(),e.createElementBlock("span",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(t=>e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:t,class:e.normalizeClass(["p-paginator-page p-paginator-element p-link",{"p-highlight":t-1===a.page}]),type:"button",onClick:e=>i.onPageLinkClick(e,t)},[e.createTextVNode(e.toDisplayString(t),1)],10,f)),[[s]]))),128))])};var b={name:"PrevPageLink",computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:r.default}};const v=[e.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-left"},null,-1)];b.render=function(t,n,a,o,r,i){const s=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(i.containerClass),type:"button"},v,2)),[[s]])};var w={name:"RowsPerPageDropdown",inheritAttrs:!1,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:i.default}};w.render=function(t,n,a,o,r,i){const s=e.resolveComponent("RPPDropdown");return e.openBlock(),e.createBlock(s,{modelValue:a.rows,options:i.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[0]||(n[0]=e=>i.onChange(e)),class:"p-paginator-rpp-options",disabled:a.disabled},null,8,["modelValue","options","disabled"])};var C={name:"JumpToPageDropdown",inheritAttrs:!1,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:i.default}};C.render=function(t,n,a,o,r,i){const s=e.resolveComponent("JTPDropdown");return e.openBlock(),e.createBlock(s,{modelValue:a.page,options:i.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[0]||(n[0]=e=>i.onChange(e)),class:"p-paginator-page-options",disabled:a.disabled},null,8,["modelValue","options","disabled"])};var y={name:"JumpToPageInput",inheritAttrs:!1,emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},methods:{onChange(e){this.$emit("page-change",e-1)}},components:{JTPInput:s.default}};y.render=function(t,n,a,o,r,i){const s=e.resolveComponent("JTPInput");return e.openBlock(),e.createBlock(s,{modelValue:a.page,"onUpdate:modelValue":n[0]||(n[0]=e=>i.onChange(e)),class:"p-paginator-page-input",disabled:a.disabled},null,8,["modelValue","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: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)}},methods:{changePage(e){const t=this.pageCount;if(e>=0&&e<t){this.d_first=this.d_rows*e;const n={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",n)}},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)}},computed:{templateItems(){let e=[];return this.template.split(" ").map((t=>{e.push(t.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 n=Math.max(0,Math.ceil(this.page-t/2)),a=Math.min(e-1,n+t-1);const o=this.pageLinkSize-(a-n+1);return n=Math.max(0,n-o),[n,a]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,n=t[0],a=t[1];for(var o=n;o<=a;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}},components:{CurrentPageReport:l,FirstPageLink:c,LastPageLink:u,NextPageLink:m,PageLinks:k,PrevPageLink:b,RowsPerPageDropdown:w,JumpToPageDropdown:C,JumpToPageInput:y}};const L={key:0,class:"p-paginator p-component"},x={key:0,class:"p-paginator-left-content"},N={key:1,class:"p-paginator-right-content"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-paginator {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-wrap: wrap;\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: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    line-height: 1;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\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(t,n,a,o,r,i){const s=e.resolveComponent("FirstPageLink"),l=e.resolveComponent("PrevPageLink"),p=e.resolveComponent("NextPageLink"),c=e.resolveComponent("LastPageLink"),g=e.resolveComponent("PageLinks"),u=e.resolveComponent("CurrentPageReport"),d=e.resolveComponent("RowsPerPageDropdown"),m=e.resolveComponent("JumpToPageDropdown"),h=e.resolveComponent("JumpToPageInput");return a.alwaysShow||i.pageLinks&&i.pageLinks.length>1?(e.openBlock(),e.createElementBlock("div",L,[t.$slots.start?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(t.$slots,"start",{state:i.currentState})])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.templateItems,(t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},["FirstPageLink"===t?(e.openBlock(),e.createBlock(s,{key:0,onClick:n[0]||(n[0]=e=>i.changePageToFirst(e)),disabled:i.isFirstPage||i.empty},null,8,["disabled"])):"PrevPageLink"===t?(e.openBlock(),e.createBlock(l,{key:1,onClick:n[1]||(n[1]=e=>i.changePageToPrev(e)),disabled:i.isFirstPage||i.empty},null,8,["disabled"])):"NextPageLink"===t?(e.openBlock(),e.createBlock(p,{key:2,onClick:n[2]||(n[2]=e=>i.changePageToNext(e)),disabled:i.isLastPage||i.empty},null,8,["disabled"])):"LastPageLink"===t?(e.openBlock(),e.createBlock(c,{key:3,onClick:n[3]||(n[3]=e=>i.changePageToLast(e)),disabled:i.isLastPage||i.empty},null,8,["disabled"])):"PageLinks"===t?(e.openBlock(),e.createBlock(g,{key:4,value:i.pageLinks,page:i.page,onClick:n[4]||(n[4]=e=>i.changePageLink(e))},null,8,["value","page"])):"CurrentPageReport"===t?(e.openBlock(),e.createBlock(u,{key:5,template:a.currentPageReportTemplate,currentPage:i.currentPage,page:i.page,pageCount:i.pageCount,first:r.d_first,rows:r.d_rows,totalRecords:a.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===t&&a.rowsPerPageOptions?(e.openBlock(),e.createBlock(d,{key:6,rows:r.d_rows,options:a.rowsPerPageOptions,onRowsChange:n[5]||(n[5]=e=>i.onRowChange(e)),disabled:i.empty},null,8,["rows","options","disabled"])):"JumpToPageDropdown"===t?(e.openBlock(),e.createBlock(m,{key:7,page:i.page,pageCount:i.pageCount,onPageChange:n[6]||(n[6]=e=>i.changePage(e)),disabled:i.empty},null,8,["page","pageCount","disabled"])):"JumpToPageInput"===t?(e.openBlock(),e.createBlock(h,{key:8,page:i.currentPage,onPageChange:n[7]||(n[7]=e=>i.changePage(e)),disabled:i.empty},null,8,["page","disabled"])):e.createCommentVNode("",!0)],64)))),128)),t.$slots.end?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(t.$slots,"end",{state:i.currentState})])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)},B}(Vue,primevue.ripple,primevue.dropdown,primevue.inputnumber);
+this.primevue=this.primevue||{},this.primevue.paginator=function(e,t,n,a,o){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(n),s=r(a),l=r(o),p={name:"CurrentPageReport",inheritAttrs:!1,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 c={class:"p-paginator-current"};p.render=function(e,n,a,o,r,i){return t.openBlock(),t.createElementBlock("span",c,t.toDisplayString(i.text),1)};var g={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)];g.render=function(e,n,a,o,r,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",inheritAttrs:!1,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,n,a,o,r,i){const s=t.resolveComponent("JTPDropdown");return t.openBlock(),t.createBlock(s,{modelValue:a.page,options:i.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[0]||(n[0]=e=>i.onChange(e)),class:"p-paginator-page-options",disabled:a.disabled},null,8,["modelValue","options","disabled"])};var m={name:"JumpToPageInput",inheritAttrs:!1,emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},methods:{onChange(e){this.$emit("page-change",e-1)}},components:{JTPInput:l.default}};m.render=function(e,n,a,o,r,i){const s=t.resolveComponent("JTPInput");return t.openBlock(),t.createBlock(s,{modelValue:a.page,"onUpdate:modelValue":n[0]||(n[0]=e=>i.onChange(e)),class:"p-paginator-page-input",disabled:a.disabled},null,8,["modelValue","disabled"])};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 k=[t.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-double-right"},null,-1)];h.render=function(e,n,a,o,r,i){const s=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},k,2)),[[s]])};var P={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)];P.render=function(e,n,a,o,r,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})}},directives:{ripple:i.default}};const v={class:"p-paginator-pages"},w=["onClick"];b.render=function(e,n,a,o,r,i){const s=t.resolveDirective("ripple");return t.openBlock(),t.createElementBlock("span",v,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.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===a.page}]),type:"button",onClick:t=>i.onPageLinkClick(t,e)},[t.createTextVNode(t.toDisplayString(e),1)],10,w)),[[s]]))),128))])};var y={name:"PrevPageLink",computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:i.default}};const C=[t.createElementVNode("span",{class:"p-paginator-icon pi pi-angle-left"},null,-1)];y.render=function(e,n,a,o,r,i){const s=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(i.containerClass),type:"button"},C,2)),[[s]])};var B={name:"RowsPerPageDropdown",inheritAttrs:!1,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}};B.render=function(e,n,a,o,r,i){const s=t.resolveComponent("RPPDropdown");return t.openBlock(),t.createBlock(s,{modelValue:a.rows,options:i.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[0]||(n[0]=e=>i.onChange(e)),class:"p-paginator-rpp-options",disabled:a.disabled},null,8,["modelValue","options","disabled"])};var L={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 n={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",n)}},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),n={};t.sort(((e,t)=>parseInt(e)-parseInt(t))).forEach((e=>{n[e]=this.template[e]}));for(const[t,[a]]of Object.entries(Object.entries(n))){const o=Object.entries(n)[t-1]?`and (min-width:${Object.keys(n)[t-1]})`:"";e+="default"===a?`\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-${a} {\n                                display: none !important;\n                            }\n                        @media screen ${o} and (max-width: ${a}) {\n                            .paginator[${this.attributeSelector}], .p-paginator-${a} {\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].forEach((e=>{e.setAttribute(this.attributeSelector,"")}))}},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 n=Math.max(0,Math.ceil(this.page-t/2)),a=Math.min(e-1,n+t-1);const o=this.pageLinkSize-(a-n+1);return n=Math.max(0,n-o),[n,a]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,n=t[0],a=t[1];for(var o=n;o<=a;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:p,FirstPageLink:g,LastPageLink:h,NextPageLink:P,PageLinks:b,PrevPageLink:y,RowsPerPageDropdown:B,JumpToPageDropdown:d,JumpToPageInput:m}};const x={key:0},N={key:0,class:"p-paginator-left-content"},D={key:1,class:"p-paginator-right-content"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-paginator-default {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-paginator {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-wrap: wrap;\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: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    line-height: 1;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\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"),L.render=function(e,n,a,o,r,i){const s=t.resolveComponent("FirstPageLink"),l=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 a.alwaysShow||i.pageLinks&&i.pageLinks.length>1?(t.openBlock(),t.createElementBlock("div",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",N,[t.renderSlot(e.$slots,"start",{state:i.currentState})])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o,(e=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:e},["FirstPageLink"===e?(t.openBlock(),t.createBlock(s,{key:0,onClick:n[0]||(n[0]=e=>i.changePageToFirst(e)),disabled:i.isFirstPage||i.empty},null,8,["disabled"])):"PrevPageLink"===e?(t.openBlock(),t.createBlock(l,{key:1,onClick:n[1]||(n[1]=e=>i.changePageToPrev(e)),disabled:i.isFirstPage||i.empty},null,8,["disabled"])):"NextPageLink"===e?(t.openBlock(),t.createBlock(p,{key:2,onClick:n[2]||(n[2]=e=>i.changePageToNext(e)),disabled:i.isLastPage||i.empty},null,8,["disabled"])):"LastPageLink"===e?(t.openBlock(),t.createBlock(c,{key:3,onClick:n[3]||(n[3]=e=>i.changePageToLast(e)),disabled:i.isLastPage||i.empty},null,8,["disabled"])):"PageLinks"===e?(t.openBlock(),t.createBlock(g,{key:4,value:i.pageLinks,page:i.page,onClick:n[4]||(n[4]=e=>i.changePageLink(e))},null,8,["value","page"])):"CurrentPageReport"===e?(t.openBlock(),t.createBlock(u,{key:5,template:a.currentPageReportTemplate,currentPage:i.currentPage,page:i.page,pageCount:i.pageCount,first:r.d_first,rows:r.d_rows,totalRecords:a.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===e&&a.rowsPerPageOptions?(t.openBlock(),t.createBlock(d,{key:6,rows:r.d_rows,options:a.rowsPerPageOptions,onRowsChange:n[5]||(n[5]=e=>i.onRowChange(e)),disabled:i.empty},null,8,["rows","options","disabled"])):"JumpToPageDropdown"===e?(t.openBlock(),t.createBlock(m,{key:7,page:i.page,pageCount:i.pageCount,onPageChange:n[6]||(n[6]=e=>i.changePage(e)),disabled:i.empty},null,8,["page","pageCount","disabled"])):"JumpToPageInput"===e?(t.openBlock(),t.createBlock(h,{key:8,page:i.currentPage,onPageChange:n[7]||(n[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)},L}(primevue.utils,Vue,primevue.ripple,primevue.dropdown,primevue.inputnumber);

package/panelmenu/PanelMenu.d.ts

@@ -1,11 +1,28 @@
 import { VNode } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { MenuItem } from '../menuitem';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface PanelMenuExpandedKeys {
     [key: string]: any;
 }
 
+export interface PanelMenuPanelOpenEvent {
+    /**
+     * Browser mouse event.
+     * @type {MouseEvent}
+     */
+    originalEvent: MouseEvent;
+    /**
+     * Current item.
+     */
+    item: any;
+}
+
+/**
+ * @extends {PanelMenuPanelOpenEvent}
+ */
+export interface PanelMenuPanelCloseEvent extends PanelMenuPanelOpenEvent {}
+
 export interface PanelMenuProps {
     /**
      * An array of menuitems.
@@ -20,6 +37,10 @@ export interface PanelMenuProps {
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
      */
     exact?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | string | undefined;
 }
 
 export interface PanelMenuSlots {
@@ -41,6 +62,16 @@ export declare type PanelMenuEmits = {
      * @param {*} value - New value.
      */
     'update:expandedKeys': (value: any) => void;
+    /**
+     * Callback to invoke when a panel gets expanded.
+     * @param {PanelMenuPanelOpenEvent} event - Custom panel open event.
+     */
+    'panel-open': (event: PanelMenuPanelOpenEvent) => void;
+    /**
+     * Callback to invoke when an active panel is collapsed by clicking on the header.
+     * @param {PanelMenuPanelCloseEvent} event - Custom panel close event.
+     */
+    'panel-close': (event: PanelMenuPanelCloseEvent) => void;
 };
 
 declare class PanelMenu extends ClassComponent<PanelMenuProps, PanelMenuSlots, PanelMenuEmits> {}

package/panelmenu/PanelMenu.vue

@@ -1,37 +1,40 @@
 <template>
-    <div class="p-panelmenu p-component">
-        <template v-for="(item, index) of model" :key="label(item) + '_' + index">
-            <div v-if="visible(item)" :class="getPanelClass(item)" :style="item.style">
-                <div :class="getHeaderClass(item)" :style="item.style">
-                    <template v-if="!$slots.item">
-                        <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                            <a :href="href" :class="getHeaderLinkClass(item, { isActive, isExactActive })" @click="onItemClick($event, item, navigate)" role="treeitem">
-                                <span v-if="item.icon" :class="getPanelIcon(item)"></span>
-                                <span class="p-menuitem-text">{{ label(item) }}</span>
+    <div :id="id" class="p-panelmenu p-component">
+        <template v-for="(item, index) of model" :key="getPanelKey(index)">
+            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)">
+                <div
+                    :id="getHeaderId(index)"
+                    :class="getHeaderClass(item)"
+                    :tabindex="isItemDisabled(item) ? -1 : tabindex"
+                    role="button"
+                    :aria-label="getItemLabel(item)"
+                    :aria-expanded="isItemActive(item)"
+                    :aria-controls="getContentId(index)"
+                    :aria-disabled="isItemDisabled(item)"
+                    @click="onHeaderClick($event, item)"
+                    @keydown="onHeaderKeyDown($event, item)"
+                >
+                    <div class="p-panelmenu-header-content">
+                        <template v-if="!$slots.item">
+                            <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
+                                <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
+                                    <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
+                                    <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
+                                </a>
+                            </router-link>
+                            <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1">
+                                <span v-if="getItemProp(item, 'items')" :class="getHeaderToggleIconClass(item)"></span>
+                                <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
+                                <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
                             </a>
-                        </router-link>
-                        <a
-                            v-else
-                            :id="ariaId + '_header_' + index"
-                            :href="item.url"
-                            :class="getHeaderLinkClass(item)"
-                            @click="onItemClick($event, item)"
-                            @keydown="onItemKeydown($event, item)"
-                            :tabindex="disabled(item) ? null : '0'"
-                            :aria-expanded="isActive(item)"
-                            :aria-controls="ariaId + '_content_' + index"
-                        >
-                            <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
-                            <span v-if="item.icon" :class="getPanelIcon(item)"></span>
-                            <span class="p-menuitem-text">{{ label(item) }}</span>
-                        </a>
-                    </template>
-                    <component v-else :is="$slots.item" :item="item"></component>
+                        </template>
+                        <component v-else :is="$slots.item" :item="item"></component>
+                    </div>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isActive(item)" :id="ariaId + '_content_' + index" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header_' + index">
-                        <div v-if="item.items" class="p-panelmenu-content">
-                            <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
+                    <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)">
+                        <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content">
+                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :template="$slots.item" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
                         </div>
                     </div>
                 </transition>
@@ -41,24 +44,28 @@
 </template>
 
 <script>
-import PanelMenuSub from './PanelMenuSub.vue';
-import { UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import PanelMenuList from './PanelMenuList.vue';
 
 export default {
     name: 'PanelMenu',
-    emits: ['update:expandedKeys'],
+    emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
     props: {
         model: {
             type: Array,
             default: null
         },
         expandedKeys: {
-            type: null,
+            type: Object,
             default: null
         },
         exact: {
             type: Boolean,
             default: true
+        },
+        tabindex: {
+            type: Number,
+            default: 0
         }
     },
     data() {
@@ -67,98 +74,195 @@ export default {
         };
     },
     methods: {
-        onItemClick(event, item, navigate) {
-            if (this.isActive(item) && this.activeItem === null) {
-                this.activeItem = item;
-            }
-
-            if (this.disabled(item)) {
+        getItemProp(item, name) {
+            return item ? ObjectUtils.getItemValue(item[name]) : undefined;
+        },
+        getItemLabel(item) {
+            return this.getItemProp(item, 'label');
+        },
+        isItemActive(item) {
+            return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : item === this.activeItem;
+        },
+        isItemVisible(item) {
+            return this.getItemProp(item, 'visible') !== false;
+        },
+        isItemDisabled(item) {
+            return this.getItemProp(item, 'disabled');
+        },
+        getPanelId(index) {
+            return `${this.id}_${index}`;
+        },
+        getPanelKey(index) {
+            return this.getPanelId(index);
+        },
+        getHeaderId(index) {
+            return `${this.getPanelId(index)}_header`;
+        },
+        getContentId(index) {
+            return `${this.getPanelId(index)}_content`;
+        },
+        onHeaderClick(event, item) {
+            if (this.isItemDisabled(item)) {
                 event.preventDefault();
 
                 return;
             }
 
             if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
+                item.command({ originalEvent: event, item });
             }
 
-            if (this.activeItem && this.activeItem === item) this.activeItem = null;
-            else this.activeItem = item;
+            this.changeActiveItem(event, item);
+            DomHandler.focus(event.currentTarget);
+        },
+        onHeaderKeyDown(event, item) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onHeaderArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onHeaderArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHeaderHomeKey(event);
+                    break;
 
-            this.updateExpandedKeys({ item: item, expanded: this.activeItem != null });
+                case 'End':
+                    this.onHeaderEndKey(event);
+                    break;
 
-            if (item.to && navigate) {
-                navigate(event);
+                case 'Enter':
+                case 'Space':
+                    this.onHeaderEnterKey(event, item);
+                    break;
+
+                default:
+                    break;
             }
         },
-        onItemKeydown(event, item) {
-            if (event.which === 13) {
-                this.onItemClick(event, item);
+        onHeaderArrowDownKey(event) {
+            const rootList = DomHandler.hasClass(event.currentTarget, 'p-highlight') ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '.p-panelmenu-root-list') : null;
+
+            rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
+            event.preventDefault();
+        },
+        onHeaderArrowUpKey(event) {
+            const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
+            const rootList = DomHandler.hasClass(prevHeader, 'p-highlight') ? DomHandler.findSingle(prevHeader.nextElementSibling, '.p-panelmenu-root-list') : null;
+
+            rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
+            event.preventDefault();
+        },
+        onHeaderHomeKey(event) {
+            this.changeFocusedHeader(event, this.findFirstHeader());
+            event.preventDefault();
+        },
+        onHeaderEndKey(event) {
+            this.changeFocusedHeader(event, this.findLastHeader());
+            event.preventDefault();
+        },
+        onHeaderEnterKey(event, item) {
+            const headerAction = DomHandler.findSingle(event.currentTarget, '.p-panelmenu-header-action');
+
+            headerAction ? headerAction.click() : this.onHeaderClick(event, item);
+            event.preventDefault();
+        },
+        onHeaderActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        findNextHeader(panelElement, selfCheck = false) {
+            const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
+            const headerElement = DomHandler.findSingle(nextPanelElement, '.p-panelmenu-header');
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
+        },
+        findPrevHeader(panelElement, selfCheck = false) {
+            const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
+            const headerElement = DomHandler.findSingle(prevPanelElement, '.p-panelmenu-header');
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
+        },
+        findFirstHeader() {
+            return this.findNextHeader(this.$el.firstElementChild, true);
+        },
+        findLastHeader() {
+            return this.findPrevHeader(this.$el.lastElementChild, true);
+        },
+        updateFocusedHeader(event) {
+            const { originalEvent, focusOnNext, selfCheck } = event;
+            const panelElement = originalEvent.currentTarget.closest('.p-panelmenu-panel');
+            const header = selfCheck ? DomHandler.findSingle(panelElement, '.p-panelmenu-header') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
+
+            header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent);
+        },
+        changeActiveItem(event, item, selfActive = false) {
+            if (!this.isItemDisabled(item)) {
+                this.activeItem = selfActive ? item : this.activeItem && this.activeItem === item ? null : item;
+
+                const active = this.isItemActive(item);
+                const eventName = active ? 'panel-open' : 'panel-close';
+
+                this.changeExpandedKeys({ item, expanded: !active });
+                this.$emit(eventName, { originalEvent: event, item });
             }
         },
-        updateExpandedKeys(event) {
+        changeExpandedKeys({ item, expanded = false }) {
             if (this.expandedKeys) {
-                let item = event.item;
                 let _keys = { ...this.expandedKeys };
 
-                if (event.expanded) _keys[item.key] = true;
+                if (expanded) _keys[item.key] = true;
                 else delete _keys[item.key];
 
                 this.$emit('update:expandedKeys', _keys);
             }
         },
-        getPanelClass(item) {
-            return ['p-panelmenu-panel', item.class];
+        changeFocusedHeader(event, element) {
+            element && DomHandler.focus(element);
         },
-        getPanelToggleIcon(item) {
-            const active = this.isActive(item);
-
-            return ['p-panelmenu-icon pi', { 'pi-chevron-right': !active, ' pi-chevron-down': active }];
+        getPanelClass(item) {
+            return ['p-panelmenu-panel', this.getItemProp(item, 'class')];
         },
-        getPanelIcon(item) {
-            return ['p-menuitem-icon', item.icon];
+        getHeaderClass(item) {
+            return [
+                'p-panelmenu-header',
+                this.getItemProp(item, 'headerClass'),
+                {
+                    'p-highlight': this.isItemActive(item),
+                    'p-disabled': this.isItemDisabled(item)
+                }
+            ];
         },
-        getHeaderLinkClass(item, routerProps) {
+        getHeaderActionClass(item, routerProps) {
             return [
-                'p-panelmenu-header-link',
+                'p-panelmenu-header-action',
                 {
                     'router-link-active': routerProps && routerProps.isActive,
                     'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
                 }
             ];
         },
-        isActive(item) {
-            return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
-        },
-        getHeaderClass(item) {
-            return ['p-component p-panelmenu-header', { 'p-highlight': this.isActive(item), 'p-disabled': this.disabled(item) }];
-        },
-        visible(item) {
-            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
-        },
-        disabled(item) {
-            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+        getHeaderIconClass(item) {
+            return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
         },
-        label(item) {
-            return typeof item.label === 'function' ? item.label() : item.label;
+        getHeaderToggleIconClass(item) {
+            return ['p-submenu-icon', this.isItemActive(item) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'];
         }
     },
     computed: {
-        ariaId() {
-            return UniqueComponentId();
+        id() {
+            return this.$attrs.id || UniqueComponentId();
         }
     },
     components: {
-        PanelMenuSub: PanelMenuSub
+        PanelMenuList: PanelMenuList
     }
 };
 </script>
 
 <style>
-.p-panelmenu .p-panelmenu-header-link {
+.p-panelmenu .p-panelmenu-header-action {
     display: flex;
     align-items: center;
     user-select: none;
@@ -167,7 +271,7 @@ export default {
     text-decoration: none;
 }
 
-.p-panelmenu .p-panelmenu-header-link:focus {
+.p-panelmenu .p-panelmenu-header-action:focus {
     z-index: 1;
 }
 
@@ -183,6 +287,8 @@ export default {
     user-select: none;
     cursor: pointer;
     text-decoration: none;
+    position: relative;
+    overflow: hidden;
 }
 
 .p-panelmenu .p-menuitem-text {