primevue 3.9.1 → 3.12.0

package/paginator/Paginator.d.ts

@@ -1,38 +1,140 @@
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
 export interface PageState {
-    first: number,
-    rows: number,
-    page: number,
-    pageCount: number
+    /**
+     * Index of first record
+     */
+    first: number;
+    /**
+     * Number of rows to display in new page
+     */
+    rows: number;
+    /**
+     * New page number
+     */
+    page: number;
+    /**
+     * Total number of pages
+     */
+    pageCount?: number;
 }
 
-interface PaginatorProps {
-    totalRecords?: number;
-    rows?: number;
-    first?: number;
-    pageLinkSize?: number;
-    rowsPerPageOptions?: any[];
-    template?: string;
-    currentPageReportTemplate?: any;
-    alwaysShow?: boolean;
+export interface PaginatorProps {
+    /**
+     * Number of total records.
+     * Default value is 0.
+     */
+    totalRecords?: number | undefined;
+    /**
+     * Data count to display per page.
+     * Default value is 0.
+     */
+    rows?: number | undefined;
+    /**
+     * Zero-relative number of the first row to be displayed.
+     * Default value is 0.
+     */
+    first?: number | undefined;
+    /**
+     * Number of page links to display.
+     * Default value is 5.
+     */
+    pageLinkSize?: number | undefined;
+    /**
+     * Array of integer values to display inside rows per page dropdown.
+     */
+    rowsPerPageOptions?: number[] | undefined;
+    /**
+     * Template of the paginator. It can be customized using the template property using the predefined keys, default value is 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'. Here are the available elements that can be placed inside a paginator in any order.
+     *
+     * - FirstPageLink
+     * - PrevPageLink
+     * - PageLinks
+     * - NextPageLink
+     * - LastPageLink
+     * - RowsPerPageDropdown
+     * - JumpToPageDropdown
+     * - JumpToPageInput
+     * - CurrentPageReport
+     */
+    template?: string | undefined;
+    /**
+     * Template of the current page report element. It displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;
+     *
+     * - {currentPage}
+     * - {totalPages}
+     * - {rows}
+     * - {first}
+     * - {last}
+     * - {totalRecords}
+     */
+    currentPageReportTemplate?: string | undefined;
+    /**
+     * Whether to show the paginator even there is only one page.
+     * Default value is true.
+     */
+    alwaysShow?: boolean | undefined;
 }
 
-interface PaginatorSlotInterface {
-    currentState: {
-        page: number;
-        first: number;
-        rows: number;
-    }
+export interface PaginatorSlots {
+    /**
+     * Custom start template.
+     * @param {Object} scope - start slot's params.
+     */
+    start: (scope: {
+        /**
+         * Current state
+         * @see PageState
+         */
+        currentState: PageState;
+    }) => VNode[];
+    /**
+     * Custom end template.
+     * @param {Object} scope - end slot's params.
+     */
+    end: (scope: {
+        /**
+         * Current state
+         * @see PageState
+         */
+        currentState: PageState;
+    }) => VNode[];
 }
 
-declare class Paginator {
-    $props: PaginatorProps;
-    $emit(eventName: 'update:first', value: number): this;
-    $emit(eventName: 'update:rows', value: number): this;
-    $emit(eventName: 'page', event: PageState): this;
-    $slots: {
-        left: PaginatorSlotInterface;
-        right: PaginatorSlotInterface;
+export declare type PaginatorEmits = {
+    /**
+     * Emitted when the first changes.
+     * @param {number} value - New value.
+     */
+    'update:first': (value: number) => void;
+    /**
+     * Emitted when the rows changes.
+     * @param {number} value - New value.
+     */
+    'update:rows': (value: number) => void;
+    /**
+     * Callback to invoke when page changes, the event object contains information about the new state.
+     * @param {PageState} event - New page state.
+     */
+    'page': (event: PageState) => void;
+}
+
+declare class Paginator extends ClassComponent<PaginatorProps, PaginatorSlots, PaginatorEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Paginator: GlobalComponentConstructor<Paginator>
     }
 }
 
+/**
+ *
+ * Paginator is a generic component to display content in paged format.
+ *
+ * Demos:
+ *
+ * - [Paginator](https://www.primefaces.org/primevue/showcase/#/paginator)
+ *
+ */
 export default Paginator;

package/paginator/paginator.cjs.js

@@ -77,7 +77,7 @@ var script$8 = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 
@@ -108,7 +108,7 @@ var script$7 = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 
@@ -139,7 +139,7 @@ var script$6 = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 
@@ -177,7 +177,7 @@ var script$5 = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 
@@ -214,7 +214,7 @@ var script$4 = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 
@@ -261,7 +261,7 @@ var script$3 = {
         }
     },
     components: {
-        'RPPDropdown': Dropdown__default['default']
+        'RPPDropdown': Dropdown__default["default"]
     }
 };
 
@@ -305,7 +305,7 @@ var script$2 = {
         }
     },
     components: {
-        'JTPDropdown': Dropdown__default['default']
+        'JTPDropdown': Dropdown__default["default"]
     }
 };
 
@@ -340,7 +340,7 @@ var script$1 = {
         }
     },
     components: {
-        'JTPInput': InputNumber__default['default']
+        'JTPInput': InputNumber__default["default"]
     }
 };
 

package/paginator/paginator.esm.js

@@ -669,4 +669,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/paginator/paginator.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createBlock as t,toDisplayString as a,resolveDirective as n,withDirectives as i,createVNode as r,Fragment as s,renderList as o,createTextVNode as p,resolveComponent as l,renderSlot as g,createCommentVNode as u}from"vue";import d from"primevue/ripple";import c from"primevue/dropdown";import h from"primevue/inputnumber";var m={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"};m.render=function(n,i,r,s,o,p){return e(),t("span",P,a(p.text),1)};var f={name:"FirstPageLink",computed:{containerClass(){return["p-paginator-first p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const b=r("span",{class:"p-paginator-icon pi pi-angle-double-left"},null,-1);f.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[b],2)),[[g]])};var k={name:"LastPageLink",computed:{containerClass(){return["p-paginator-last p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const w=r("span",{class:"p-paginator-icon pi pi-angle-double-right"},null,-1);k.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[w],2)),[[g]])};var y={name:"NextPageLink",computed:{containerClass(){return["p-paginator-next p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const C=r("span",{class:"p-paginator-icon pi pi-angle-right"},null,-1);y.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[C],2)),[[g]])};var v={name:"PageLinks",inheritAttrs:!1,emits:["click"],props:{value:Array,page:Number},methods:{onPageLinkClick(e,t){this.$emit("click",{originalEvent:e,value:t})}},directives:{ripple:d}};const L={class:"p-paginator-pages"};v.render=function(r,l,g,u,d,c){const h=n("ripple");return e(),t("span",L,[(e(!0),t(s,null,o(g.value,(n=>i((e(),t("button",{key:n,class:["p-paginator-page p-paginator-element p-link",{"p-highlight":n-1===g.page}],type:"button",onClick:e=>c.onPageLinkClick(e,n)},[p(a(n),1)],10,["onClick"])),[[h]]))),128))])};var x={name:"PrevPageLink",computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const R=r("span",{class:"p-paginator-icon pi pi-angle-left"},null,-1);x.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[R],2)),[[g]])};var N={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:c}};N.render=function(a,n,i,r,s,o){const p=l("RPPDropdown");return e(),t(p,{modelValue:i.rows,options:o.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[1]||(n[1]=e=>o.onChange(e)),class:"p-paginator-rpp-options",disabled:i.disabled},null,8,["modelValue","options","disabled"])};var T={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:c}};T.render=function(a,n,i,r,s,o){const p=l("JTPDropdown");return e(),t(p,{modelValue:i.page,options:o.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[1]||(n[1]=e=>o.onChange(e)),class:"p-paginator-page-options",disabled:i.disabled},null,8,["modelValue","options","disabled"])};var _={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:h}};_.render=function(a,n,i,r,s,o){const p=l("JTPInput");return e(),t(p,{modelValue:i.page,"onUpdate:modelValue":n[1]||(n[1]=e=>o.onChange(e)),class:"p-paginator-page-input",disabled:i.disabled},null,8,["modelValue","disabled"])};var D={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 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)}},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 a=Math.max(0,Math.ceil(this.page-t/2)),n=Math.min(e-1,a+t-1);const i=this.pageLinkSize-(n-a+1);return a=Math.max(0,a-i),[a,n]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,a=t[0],n=t[1];for(var i=a;i<=n;i++)e.push(i+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:m,FirstPageLink:f,LastPageLink:k,NextPageLink:y,PageLinks:v,PrevPageLink:x,RowsPerPageDropdown:N,JumpToPageDropdown:T,JumpToPageInput:_}};const $={key:0,class:"p-paginator p-component"},S={key:0,class:"p-paginator-left-content"},J={key:1,class:"p-paginator-right-content"};!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===a&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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\tmargin-right: auto;\n}\n.p-paginator-right-content {\n\tmargin-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"),D.render=function(a,n,i,r,p,d){const c=l("FirstPageLink"),h=l("PrevPageLink"),m=l("NextPageLink"),P=l("LastPageLink"),f=l("PageLinks"),b=l("CurrentPageReport"),k=l("RowsPerPageDropdown"),w=l("JumpToPageDropdown"),y=l("JumpToPageInput");return i.alwaysShow||d.pageLinks&&d.pageLinks.length>1?(e(),t("div",$,[a.$slots.start?(e(),t("div",S,[g(a.$slots,"start",{state:d.currentState})])):u("",!0),(e(!0),t(s,null,o(d.templateItems,(a=>(e(),t(s,{key:a},["FirstPageLink"===a?(e(),t(c,{key:0,onClick:n[1]||(n[1]=e=>d.changePageToFirst(e)),disabled:d.isFirstPage||d.empty},null,8,["disabled"])):"PrevPageLink"===a?(e(),t(h,{key:1,onClick:n[2]||(n[2]=e=>d.changePageToPrev(e)),disabled:d.isFirstPage||d.empty},null,8,["disabled"])):"NextPageLink"===a?(e(),t(m,{key:2,onClick:n[3]||(n[3]=e=>d.changePageToNext(e)),disabled:d.isLastPage||d.empty},null,8,["disabled"])):"LastPageLink"===a?(e(),t(P,{key:3,onClick:n[4]||(n[4]=e=>d.changePageToLast(e)),disabled:d.isLastPage||d.empty},null,8,["disabled"])):"PageLinks"===a?(e(),t(f,{key:4,value:d.pageLinks,page:d.page,onClick:n[5]||(n[5]=e=>d.changePageLink(e))},null,8,["value","page"])):"CurrentPageReport"===a?(e(),t(b,{key:5,template:i.currentPageReportTemplate,currentPage:d.currentPage,page:d.page,pageCount:d.pageCount,first:p.d_first,rows:p.d_rows,totalRecords:i.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===a&&i.rowsPerPageOptions?(e(),t(k,{key:6,rows:p.d_rows,options:i.rowsPerPageOptions,onRowsChange:n[6]||(n[6]=e=>d.onRowChange(e)),disabled:d.empty},null,8,["rows","options","disabled"])):"JumpToPageDropdown"===a?(e(),t(w,{key:7,page:d.page,pageCount:d.pageCount,onPageChange:n[7]||(n[7]=e=>d.changePage(e)),disabled:d.empty},null,8,["page","pageCount","disabled"])):"JumpToPageInput"===a?(e(),t(y,{key:8,page:d.currentPage,onPageChange:n[8]||(n[8]=e=>d.changePage(e)),disabled:d.empty},null,8,["page","disabled"])):u("",!0)],64)))),128)),a.$slots.end?(e(),t("div",J,[g(a.$slots,"end",{state:d.currentState})])):u("",!0)])):u("",!0)};export default D;
+import{openBlock as e,createBlock as t,toDisplayString as a,resolveDirective as n,withDirectives as i,createVNode as r,Fragment as s,renderList as o,createTextVNode as p,resolveComponent as l,renderSlot as g,createCommentVNode as u}from"vue";import d from"primevue/ripple";import c from"primevue/dropdown";import h from"primevue/inputnumber";var m={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"};m.render=function(n,i,r,s,o,p){return e(),t("span",P,a(p.text),1)};var f={name:"FirstPageLink",computed:{containerClass(){return["p-paginator-first p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const b=r("span",{class:"p-paginator-icon pi pi-angle-double-left"},null,-1);f.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[b],2)),[[g]])};var k={name:"LastPageLink",computed:{containerClass(){return["p-paginator-last p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const w=r("span",{class:"p-paginator-icon pi pi-angle-double-right"},null,-1);k.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[w],2)),[[g]])};var y={name:"NextPageLink",computed:{containerClass(){return["p-paginator-next p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const C=r("span",{class:"p-paginator-icon pi pi-angle-right"},null,-1);y.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[C],2)),[[g]])};var v={name:"PageLinks",inheritAttrs:!1,emits:["click"],props:{value:Array,page:Number},methods:{onPageLinkClick(e,t){this.$emit("click",{originalEvent:e,value:t})}},directives:{ripple:d}};const L={class:"p-paginator-pages"};v.render=function(r,l,g,u,d,c){const h=n("ripple");return e(),t("span",L,[(e(!0),t(s,null,o(g.value,(n=>i((e(),t("button",{key:n,class:["p-paginator-page p-paginator-element p-link",{"p-highlight":n-1===g.page}],type:"button",onClick:e=>c.onPageLinkClick(e,n)},[p(a(n),1)],10,["onClick"])),[[h]]))),128))])};var x={name:"PrevPageLink",computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:d}};const R=r("span",{class:"p-paginator-icon pi pi-angle-left"},null,-1);x.render=function(a,r,s,o,p,l){const g=n("ripple");return i((e(),t("button",{class:l.containerClass,type:"button"},[R],2)),[[g]])};var N={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:c}};N.render=function(a,n,i,r,s,o){const p=l("RPPDropdown");return e(),t(p,{modelValue:i.rows,options:o.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[1]||(n[1]=e=>o.onChange(e)),class:"p-paginator-rpp-options",disabled:i.disabled},null,8,["modelValue","options","disabled"])};var T={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:c}};T.render=function(a,n,i,r,s,o){const p=l("JTPDropdown");return e(),t(p,{modelValue:i.page,options:o.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":n[1]||(n[1]=e=>o.onChange(e)),class:"p-paginator-page-options",disabled:i.disabled},null,8,["modelValue","options","disabled"])};var _={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:h}};_.render=function(a,n,i,r,s,o){const p=l("JTPInput");return e(),t(p,{modelValue:i.page,"onUpdate:modelValue":n[1]||(n[1]=e=>o.onChange(e)),class:"p-paginator-page-input",disabled:i.disabled},null,8,["modelValue","disabled"])};var D={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 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)}},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 a=Math.max(0,Math.ceil(this.page-t/2)),n=Math.min(e-1,a+t-1);const i=this.pageLinkSize-(n-a+1);return a=Math.max(0,a-i),[a,n]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,a=t[0],n=t[1];for(var i=a;i<=n;i++)e.push(i+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:m,FirstPageLink:f,LastPageLink:k,NextPageLink:y,PageLinks:v,PrevPageLink:x,RowsPerPageDropdown:N,JumpToPageDropdown:T,JumpToPageInput:_}};const $={key:0,class:"p-paginator p-component"},S={key:0,class:"p-paginator-left-content"},J={key:1,class:"p-paginator-right-content"};!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===a&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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\tmargin-right: auto;\n}\n.p-paginator-right-content {\n\tmargin-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"),D.render=function(a,n,i,r,p,d){const c=l("FirstPageLink"),h=l("PrevPageLink"),m=l("NextPageLink"),P=l("LastPageLink"),f=l("PageLinks"),b=l("CurrentPageReport"),k=l("RowsPerPageDropdown"),w=l("JumpToPageDropdown"),y=l("JumpToPageInput");return i.alwaysShow||d.pageLinks&&d.pageLinks.length>1?(e(),t("div",$,[a.$slots.start?(e(),t("div",S,[g(a.$slots,"start",{state:d.currentState})])):u("",!0),(e(!0),t(s,null,o(d.templateItems,(a=>(e(),t(s,{key:a},["FirstPageLink"===a?(e(),t(c,{key:0,onClick:n[1]||(n[1]=e=>d.changePageToFirst(e)),disabled:d.isFirstPage||d.empty},null,8,["disabled"])):"PrevPageLink"===a?(e(),t(h,{key:1,onClick:n[2]||(n[2]=e=>d.changePageToPrev(e)),disabled:d.isFirstPage||d.empty},null,8,["disabled"])):"NextPageLink"===a?(e(),t(m,{key:2,onClick:n[3]||(n[3]=e=>d.changePageToNext(e)),disabled:d.isLastPage||d.empty},null,8,["disabled"])):"LastPageLink"===a?(e(),t(P,{key:3,onClick:n[4]||(n[4]=e=>d.changePageToLast(e)),disabled:d.isLastPage||d.empty},null,8,["disabled"])):"PageLinks"===a?(e(),t(f,{key:4,value:d.pageLinks,page:d.page,onClick:n[5]||(n[5]=e=>d.changePageLink(e))},null,8,["value","page"])):"CurrentPageReport"===a?(e(),t(b,{key:5,template:i.currentPageReportTemplate,currentPage:d.currentPage,page:d.page,pageCount:d.pageCount,first:p.d_first,rows:p.d_rows,totalRecords:i.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===a&&i.rowsPerPageOptions?(e(),t(k,{key:6,rows:p.d_rows,options:i.rowsPerPageOptions,onRowsChange:n[6]||(n[6]=e=>d.onRowChange(e)),disabled:d.empty},null,8,["rows","options","disabled"])):"JumpToPageDropdown"===a?(e(),t(w,{key:7,page:d.page,pageCount:d.pageCount,onPageChange:n[7]||(n[7]=e=>d.changePage(e)),disabled:d.empty},null,8,["page","pageCount","disabled"])):"JumpToPageInput"===a?(e(),t(y,{key:8,page:d.currentPage,onPageChange:n[8]||(n[8]=e=>d.changePage(e)),disabled:d.empty},null,8,["page","disabled"])):u("",!0)],64)))),128)),a.$slots.end?(e(),t("div",J,[g(a.$slots,"end",{state:d.currentState})])):u("",!0)])):u("",!0)};export{D as default};

package/paginator/paginator.js

@@ -74,7 +74,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             directives: {
-                'ripple': Ripple__default['default']
+                'ripple': Ripple__default["default"]
             }
         };
 
@@ -105,7 +105,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             directives: {
-                'ripple': Ripple__default['default']
+                'ripple': Ripple__default["default"]
             }
         };
 
@@ -136,7 +136,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             directives: {
-                'ripple': Ripple__default['default']
+                'ripple': Ripple__default["default"]
             }
         };
 
@@ -174,7 +174,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             directives: {
-                'ripple': Ripple__default['default']
+                'ripple': Ripple__default["default"]
             }
         };
 
@@ -211,7 +211,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             directives: {
-                'ripple': Ripple__default['default']
+                'ripple': Ripple__default["default"]
             }
         };
 
@@ -258,7 +258,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             components: {
-                'RPPDropdown': Dropdown__default['default']
+                'RPPDropdown': Dropdown__default["default"]
             }
         };
 
@@ -302,7 +302,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             components: {
-                'JTPDropdown': Dropdown__default['default']
+                'JTPDropdown': Dropdown__default["default"]
             }
         };
 
@@ -337,7 +337,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             },
             components: {
-                'JTPInput': InputNumber__default['default']
+                'JTPInput': InputNumber__default["default"]
             }
         };
 
@@ -676,4 +676,4 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
 
         return script;
 
-}(Vue, primevue.ripple, primevue.dropdown, primevue.inputnumber));
+})(Vue, primevue.ripple, primevue.dropdown, primevue.inputnumber);

package/panel/Panel.d.ts

@@ -1,20 +1,75 @@
 import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-interface PanelProps {
+export interface PanelToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Collapsed state as a boolean
+     */
+    value: boolean;
+}
+
+export interface PanelProps {
+    /**
+     * Header text of the panel.
+     */
     header?: string;
+    /**
+     * Defines if content of panel can be expanded and collapsed.
+     */
     toggleable?: boolean;
+    /**
+     * Defines the initial state of panel content.
+     */
     collapsed?: boolean;
 }
 
-declare class Panel {
-    $props: PanelProps;
-    $emit(eventName: 'update:collapsed', value: boolean): this;
-    $emit(eventName: 'toggle', e: { originalEvent: Event, value: boolean; }): this;
-    $slots: {
-        '': VNode[];
-        header: VNode[];
-        icons: VNode[];
+export interface PanelSlots {
+    /**
+     * Custom content template.
+     */
+    default: () => VNode[];
+    /**
+     * Custom header template.
+     */
+    header: () => VNode[];
+    /**
+     * Custom icons template.
+     */
+    icons: () => VNode[];
+}
+
+export declare type PanelEmits = {
+    /**
+     * Emitted when the collapsed changes.
+     * @param {boolean} value - New value.
+     */
+    'update:collapsed': (value: boolean) => void;
+    /**
+     * Callback to invoke when a tab toggle.
+     * @param {PanelToggleEvent} event - Custom toggle event.
+     */
+    'toggle': (event: PanelToggleEvent) => void;
+}
+
+declare class Panel extends ClassComponent<PanelProps, PanelSlots, PanelEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Panel: GlobalComponentConstructor<Panel>
     }
 }
 
+/**
+ *
+ * Panel is a container with the optional content toggle feature.
+ *
+ * Demos:
+ *
+ * - [Panel](https://www.primefaces.org/primevue/showcase/#/panel)
+ *
+ */
 export default Panel;

package/panel/panel.cjs.js

@@ -45,7 +45,7 @@ var script = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 

package/panel/panel.esm.js

@@ -134,4 +134,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/panel/panel.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e}from"primevue/utils";import n from"primevue/ripple";import{resolveDirective as l,openBlock as t,createBlock as a,createVNode as i,renderSlot as o,toDisplayString as s,createCommentVNode as d,withDirectives as p,Transition as r,withCtx as c,vShow as g}from"vue";var h={name:"Panel",emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean},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})}},computed:{ariaId:()=>e(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]}},directives:{ripple:n}};const m={class:"p-panel-header"},u={class:"p-panel-icons"},b={class:"p-panel-content"};!function(e,n){void 0===n&&(n={});var l=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),h.render=function(e,n,h,f,x,y){const v=l("ripple");return t(),a("div",{class:y.containerClass},[i("div",m,[o(e.$slots,"header",{},(()=>[h.header?(t(),a("span",{key:0,class:"p-panel-title",id:y.ariaId+"_header"},s(h.header),9,["id"])):d("",!0)])),i("div",u,[o(e.$slots,"icons"),h.toggleable?p((t(),a("button",{key:0,class:"p-panel-header-icon p-panel-toggler p-link",onClick:n[1]||(n[1]=(...e)=>y.toggle&&y.toggle(...e)),type:"button",id:y.ariaId+"_header","aria-controls":y.ariaId+"_content","aria-expanded":!x.d_collapsed},[i("span",{class:{"pi pi-minus":!x.d_collapsed,"pi pi-plus":x.d_collapsed}},null,2)],8,["id","aria-controls","aria-expanded"])),[[v]]):d("",!0)])]),i(r,{name:"p-toggleable-content"},{default:c((()=>[p(i("div",{class:"p-toggleable-content",role:"region",id:y.ariaId+"_content","aria-labelledby":y.ariaId+"_header"},[i("div",b,[o(e.$slots,"default")])],8,["id","aria-labelledby"]),[[g,!x.d_collapsed]])])),_:3})],2)};export default h;
+import{UniqueComponentId as e}from"primevue/utils";import n from"primevue/ripple";import{resolveDirective as l,openBlock as t,createBlock as a,createVNode as i,renderSlot as o,toDisplayString as s,createCommentVNode as d,withDirectives as p,Transition as r,withCtx as c,vShow as g}from"vue";var h={name:"Panel",emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean},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})}},computed:{ariaId:()=>e(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]}},directives:{ripple:n}};const m={class:"p-panel-header"},u={class:"p-panel-icons"},b={class:"p-panel-content"};!function(e,n){void 0===n&&(n={});var l=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),h.render=function(e,n,h,f,x,y){const v=l("ripple");return t(),a("div",{class:y.containerClass},[i("div",m,[o(e.$slots,"header",{},(()=>[h.header?(t(),a("span",{key:0,class:"p-panel-title",id:y.ariaId+"_header"},s(h.header),9,["id"])):d("",!0)])),i("div",u,[o(e.$slots,"icons"),h.toggleable?p((t(),a("button",{key:0,class:"p-panel-header-icon p-panel-toggler p-link",onClick:n[1]||(n[1]=(...e)=>y.toggle&&y.toggle(...e)),type:"button",id:y.ariaId+"_header","aria-controls":y.ariaId+"_content","aria-expanded":!x.d_collapsed},[i("span",{class:{"pi pi-minus":!x.d_collapsed,"pi pi-plus":x.d_collapsed}},null,2)],8,["id","aria-controls","aria-expanded"])),[[v]]):d("",!0)])]),i(r,{name:"p-toggleable-content"},{default:c((()=>[p(i("div",{class:"p-toggleable-content",role:"region",id:y.ariaId+"_content","aria-labelledby":y.ariaId+"_header"},[i("div",b,[o(e.$slots,"default")])],8,["id","aria-labelledby"]),[[g,!x.d_collapsed]])])),_:3})],2)};export{h as default};

package/panel/panel.js

@@ -43,7 +43,7 @@ this.primevue.panel = (function (utils, Ripple, vue) {
             }
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"]
         }
     };
 
@@ -140,4 +140,4 @@ this.primevue.panel = (function (utils, Ripple, vue) {
 
     return script;
 
-}(primevue.utils, primevue.ripple, Vue));
+})(primevue.utils, primevue.ripple, Vue);

package/panelmenu/PanelMenu.d.ts

@@ -1,19 +1,67 @@
-interface PanelMenuProps {
-    model?: any[];
-    expandedKeys?: any;
-    exact?: boolean;
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { MenuItem } from '../menuitem';
+
+export interface PanelMenuExpandedKeys {
+    [key: string]: any;
+}
+
+export interface PanelMenuProps {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * A map of keys to represent the expansion state in controlled mode.
+     * @see PanelMenuExpandedKeys
+     */
+    expandedKeys?: PanelMenuExpandedKeys;
+    /**
+     * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+     */
+    exact?: boolean | undefined;
 }
 
-interface PanelMenuItemSlotInterface {
-    item: any;
+export interface PanelMenuSlots {
+    /**
+     * Custom content for each item.
+     * @param {Object} scope - item slot's params.
+     */
+    item: (scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+    }) => VNode[];
 }
 
-declare class PanelMenu {
-    $props: PanelMenuProps;
-    $emit(eventName: 'update:expandedKeys', value: any): this;
-    $slots: {
-        item: PanelMenuItemSlotInterface;
+export declare type PanelMenuEmits = {
+    /**
+     * Emitted when the expandedKeys changes.
+     * @param {*} value - New value.
+     */
+    'update:expandedKeys': (value: any) => void;
+}
+
+declare class PanelMenu extends ClassComponent<PanelMenuProps, PanelMenuSlots, PanelMenuEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        PanelMenu: GlobalComponentConstructor<PanelMenu>
     }
 }
 
+/**
+ *
+ * PanelMenu is a hybrid of Accordion and Tree components.
+ *
+ * Helper API:
+ *
+ * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ *
+ * Demos:
+ *
+ * - [PanelMenu](https://www.primefaces.org/primevue/showcase/#/panelmenu)
+ *
+ */
 export default PanelMenu;

package/panelmenu/PanelMenu.vue

@@ -11,7 +11,7 @@
                             </a>
                         </router-link>
                         <a v-else :href="item.url" :class="getHeaderLinkClass(item)" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
-                            :aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
+                            :aria-expanded="isActive(item)" :id="ariaId +'_header_' + index" :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>
@@ -21,7 +21,7 @@
                 </div>
                 <transition name="p-toggleable-content">
                     <div class="p-toggleable-content" v-show="isActive(item)"
-                        role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'">
+                        role="region" :id="ariaId +'_content_' + index" :aria-labelledby="ariaId +'_header_' + index">
                         <div class="p-panelmenu-content" v-if="item.items">
                             <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" 
                                 :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />

package/panelmenu/panelmenu.cjs.js

@@ -362,8 +362,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             onClick: $event => ($options.onItemClick($event, item)),
                             tabindex: $options.disabled(item) ? null : '0',
                             "aria-expanded": $options.isActive(item),
-                            id: $options.ariaId +'_header',
-                            "aria-controls": $options.ariaId +'_content'
+                            id: $options.ariaId +'_header_' + index,
+                            "aria-controls": $options.ariaId +'_content_' + index
                           }, [
                             (item.items)
                               ? (vue.openBlock(), vue.createBlock("span", {
@@ -390,8 +390,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   vue.withDirectives(vue.createVNode("div", {
                     class: "p-toggleable-content",
                     role: "region",
-                    id: $options.ariaId +'_content' ,
-                    "aria-labelledby": $options.ariaId +'_header'
+                    id: $options.ariaId +'_content_' + index,
+                    "aria-labelledby": $options.ariaId +'_header_' + index
                   }, [
                     (item.items)
                       ? (vue.openBlock(), vue.createBlock("div", _hoisted_4, [