primevue 3.8.2 → 3.11.0

package/panel/Panel.d.ts

@@ -1,19 +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[];
+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.vue

@@ -5,7 +5,7 @@
                 <span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span>
             </slot>
             <div class="p-panel-icons">
-                 <slot name="icons"></slot>
+                <slot name="icons"></slot>
                 <button v-if="toggleable" class="p-panel-header-icon p-panel-toggler p-link" @click="toggle" type="button"
                     :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" v-ripple>
                     <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>

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

@@ -1,27 +1,27 @@
 <template>
     <div class="p-panelmenu p-component">
-        <template v-for="(item, index) of model" :key="item.label + '_' + index">
+        <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)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                             <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">{{item.label}}</span>
+                                <span class="p-menuitem-text">{{label(item)}}</span>
                             </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">{{item.label}}</span>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
                 </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" />
@@ -128,6 +128,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     components: {

package/panelmenu/PanelMenuSub.vue

@@ -1,25 +1,25 @@
 <template>
     <ul class="p-submenu-list" role="tree">
-        <template v-for="(item, i) of model" :key="item.label + i.toString()">
+        <template v-for="(item, i) of model" :key="label(item) + i.toString()">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
                 <template v-if="!template">
                     <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive:isRouterActive, isExactActive}">
                         <a :href="href" :class="linkClass(item, {isRouterActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
-                            <span class="p-menuitem-text">{{item.label}}</span>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)"
                         role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
                         <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
-                        <span class="p-menuitem-text">{{item.label}}</span>
+                        <span class="p-menuitem-text">{{label(item)}}</span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
                 <transition name="p-toggleable-content">
                     <div class="p-toggleable-content" v-show="isActive(item)">
-                        <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
+                        <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
                             :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact"/>
                     </div>
                 </transition>
@@ -39,7 +39,7 @@ export default {
             default: null
         },
         template: {
-            type: Object,
+            type: Function,
             default: null
         },
         expandedKeys: {
@@ -107,6 +107,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     }
 }

package/panelmenu/panelmenu.cjs.js

@@ -12,7 +12,7 @@ var script$1 = {
             default: null
         },
         template: {
-            type: Object,
+            type: Function,
             default: null
         },
         expandedKeys: {
@@ -80,6 +80,9 @@ var script$1 = {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     }
 };
@@ -99,7 +102,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createBlock("ul", _hoisted_1$1, [
     (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
       return (vue.openBlock(), vue.createBlock(vue.Fragment, {
-        key: item.label + i.toString()
+        key: $options.label(item) + i.toString()
       }, [
         ($options.visible(item) && !item.separator)
           ? (vue.openBlock(), vue.createBlock("li", {
@@ -127,7 +130,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               vue.createVNode("span", {
                                 class: ['p-menuitem-icon', item.icon]
                               }, null, 2),
-                              vue.createVNode("span", _hoisted_2$1, vue.toDisplayString(item.label), 1)
+                              vue.createVNode("span", _hoisted_2$1, vue.toDisplayString($options.label(item)), 1)
                             ], 10, ["href", "onClick", "aria-expanded"])
                           ]),
                           _: 2
@@ -151,7 +154,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           vue.createVNode("span", {
                             class: ['p-menuitem-icon', item.icon]
                           }, null, 2),
-                          vue.createVNode("span", _hoisted_3$1, vue.toDisplayString(item.label), 1)
+                          vue.createVNode("span", _hoisted_3$1, vue.toDisplayString($options.label(item)), 1)
                         ], 10, ["href", "target", "onClick", "aria-expanded", "tabindex"]))
                   ], 64))
                 : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
@@ -164,7 +167,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     ($options.visible(item) && item.items)
                       ? (vue.openBlock(), vue.createBlock(_component_PanelMenuSub, {
                           model: item.items,
-                          key: item.label + '_sub_',
+                          key: $options.label(item) + '_sub_',
                           template: $props.template,
                           expandedKeys: $props.expandedKeys,
                           onItemToggle: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-toggle', $event))),
@@ -284,6 +287,9 @@ var script = {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     components: {
@@ -311,7 +317,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
     (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
       return (vue.openBlock(), vue.createBlock(vue.Fragment, {
-        key: item.label + '_' + index
+        key: $options.label(item) + '_' + index
       }, [
         ($options.visible(item))
           ? (vue.openBlock(), vue.createBlock("div", {
@@ -344,7 +350,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                       class: $options.getPanelIcon(item)
                                     }, null, 2))
                                   : vue.createCommentVNode("", true),
-                                vue.createVNode("span", _hoisted_2, vue.toDisplayString(item.label), 1)
+                                vue.createVNode("span", _hoisted_2, vue.toDisplayString($options.label(item)), 1)
                               ], 10, ["href", "onClick"])
                             ]),
                             _: 2
@@ -356,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", {
@@ -371,7 +377,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   class: $options.getPanelIcon(item)
                                 }, null, 2))
                               : vue.createCommentVNode("", true),
-                            vue.createVNode("span", _hoisted_3, vue.toDisplayString(item.label), 1)
+                            vue.createVNode("span", _hoisted_3, vue.toDisplayString($options.label(item)), 1)
                           ], 10, ["href", "onClick", "tabindex", "aria-expanded", "id", "aria-controls"]))
                     ], 64))
                   : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -384,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, [

package/panelmenu/panelmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),t=require("primevue/utils"),n={name:"PanelMenuSub",emits:["item-toggle"],props:{model:{type:null,default:null},template:{type:Object,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.$emit("item-toggle",{item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},getItemClass:e=>["p-menuitem",e.className],linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getSubmenuIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi pi-fw",{"pi-angle-right":!t,"pi-angle-down":t}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled}};const l={class:"p-submenu-list",role:"tree"},a={class:"p-menuitem-text"},i={class:"p-menuitem-text"},o={class:"p-toggleable-content"};n.render=function(t,n,s,c,r,d){const m=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub",!0);return e.openBlock(),e.createBlock("ul",l,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(s.model,((l,c)=>(e.openBlock(),e.createBlock(e.Fragment,{key:l.label+c.toString()},[d.visible(l)&&!l.separator?(e.openBlock(),e.createBlock("li",{key:0,role:"none",class:d.getItemClass(l),style:l.style},[s.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.template),{key:1,item:l},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[l.to&&!d.disabled(l)?(e.openBlock(),e.createBlock(m,{key:0,to:l.to,custom:""},{default:e.withCtx((({navigate:t,href:n,isActive:i,isExactActive:o})=>[e.createVNode("a",{href:n,class:d.linkClass(l,{isRouterActive:i,isExactActive:o}),onClick:e=>d.onItemClick(e,l,t),role:"treeitem","aria-expanded":d.isActive(l)},[e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",a,e.toDisplayString(l.label),1)],10,["href","onClick","aria-expanded"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:l.url,class:d.linkClass(l),target:l.target,onClick:e=>d.onItemClick(e,l),role:"treeitem","aria-expanded":d.isActive(l),tabindex:d.disabled(l)?null:"0"},[l.items?(e.openBlock(),e.createBlock("span",{key:0,class:d.getSubmenuIcon(l)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",i,e.toDisplayString(l.label),1)],10,["href","target","onClick","aria-expanded","tabindex"]))],64)),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",o,[d.visible(l)&&l.items?(e.openBlock(),e.createBlock(p,{model:l.items,key:l.label+"_sub_",template:s.template,expandedKeys:s.expandedKeys,onItemToggle:n[1]||(n[1]=e=>t.$emit("item-toggle",e)),exact:s.exact},null,8,["model","template","expandedKeys","exact"])):e.createCommentVNode("",!0)],512),[[e.vShow,d.isActive(l)]])])),_:2},1024)],6)):e.createCommentVNode("",!0),d.visible(l)&&l.separator?(e.openBlock(),e.createBlock("li",{class:["p-menu-separator",l.class],style:l.style,key:"separator"+c.toString()},null,6)):e.createCommentVNode("",!0)],64)))),128))])};var s={name:"PanelMenu",emits:["update:expandedKeys"],props:{model:{type:Array,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.updateExpandedKeys({item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},updateExpandedKeys(e){if(this.expandedKeys){let t=e.item,n={...this.expandedKeys};e.expanded?n[t.key]=!0:delete n[t.key],this.$emit("update:expandedKeys",n)}},getPanelClass:e=>["p-panelmenu-panel",e.class],getPanelToggleIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi",{"pi-chevron-right":!t," pi-chevron-down":t}]},getPanelIcon:e=>["p-menuitem-icon",e.icon],getHeaderLinkClass(e,t){return["p-panelmenu-header-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getHeaderClass(e){return["p-component p-panelmenu-header",{"p-highlight":this.isActive(e),"p-disabled":this.disabled(e)}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},components:{PanelMenuSub:n},computed:{ariaId:()=>t.UniqueComponentId()}};const c={class:"p-panelmenu p-component"},r={class:"p-menuitem-text"},d={class:"p-menuitem-text"},m={key:0,class:"p-panelmenu-content"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panelmenu .p-panelmenu-header-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n"),s.render=function(t,n,l,a,i,o){const s=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub");return e.openBlock(),e.createBlock("div",c,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(l.model,((n,a)=>(e.openBlock(),e.createBlock(e.Fragment,{key:n.label+"_"+a},[o.visible(n)?(e.openBlock(),e.createBlock("div",{key:0,class:o.getPanelClass(n),style:n.style},[e.createVNode("div",{class:o.getHeaderClass(n),style:n.style},[t.$slots.item?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.$slots.item),{key:1,item:n},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[n.to&&!o.disabled(n)?(e.openBlock(),e.createBlock(s,{key:0,to:n.to,custom:""},{default:e.withCtx((({navigate:t,href:l,isActive:a,isExactActive:i})=>[e.createVNode("a",{href:l,class:o.getHeaderLinkClass(n,{isActive:a,isExactActive:i}),onClick:e=>o.onItemClick(e,n,t),role:"treeitem"},[n.icon?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",r,e.toDisplayString(n.label),1)],10,["href","onClick"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:n.url,class:o.getHeaderLinkClass(n),onClick:e=>o.onItemClick(e,n),tabindex:o.disabled(n)?null:"0","aria-expanded":o.isActive(n),id:o.ariaId+"_header","aria-controls":o.ariaId+"_content"},[n.items?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelToggleIcon(n)},null,2)):e.createCommentVNode("",!0),n.icon?(e.openBlock(),e.createBlock("span",{key:1,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",d,e.toDisplayString(n.label),1)],10,["href","onClick","tabindex","aria-expanded","id","aria-controls"]))],64))],6),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",{class:"p-toggleable-content",role:"region",id:o.ariaId+"_content","aria-labelledby":o.ariaId+"_header"},[n.items?(e.openBlock(),e.createBlock("div",m,[e.createVNode(p,{model:n.items,class:"p-panelmenu-root-submenu",template:t.$slots.item,expandedKeys:l.expandedKeys,onItemToggle:o.updateExpandedKeys,exact:l.exact},null,8,["model","template","expandedKeys","onItemToggle","exact"])])):e.createCommentVNode("",!0)],8,["id","aria-labelledby"]),[[e.vShow,o.isActive(n)]])])),_:2},1024)],6)):e.createCommentVNode("",!0)],64)))),128))])},module.exports=s;
+"use strict";var e=require("vue"),t=require("primevue/utils"),n={name:"PanelMenuSub",emits:["item-toggle"],props:{model:{type:null,default:null},template:{type:Function,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.$emit("item-toggle",{item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},getItemClass:e=>["p-menuitem",e.className],linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getSubmenuIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi pi-fw",{"pi-angle-right":!t,"pi-angle-down":t}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label}};const l={class:"p-submenu-list",role:"tree"},a={class:"p-menuitem-text"},i={class:"p-menuitem-text"},o={class:"p-toggleable-content"};n.render=function(t,n,s,c,r,d){const m=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub",!0);return e.openBlock(),e.createBlock("ul",l,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(s.model,((l,c)=>(e.openBlock(),e.createBlock(e.Fragment,{key:d.label(l)+c.toString()},[d.visible(l)&&!l.separator?(e.openBlock(),e.createBlock("li",{key:0,role:"none",class:d.getItemClass(l),style:l.style},[s.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.template),{key:1,item:l},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[l.to&&!d.disabled(l)?(e.openBlock(),e.createBlock(m,{key:0,to:l.to,custom:""},{default:e.withCtx((({navigate:t,href:n,isActive:i,isExactActive:o})=>[e.createVNode("a",{href:n,class:d.linkClass(l,{isRouterActive:i,isExactActive:o}),onClick:e=>d.onItemClick(e,l,t),role:"treeitem","aria-expanded":d.isActive(l)},[e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",a,e.toDisplayString(d.label(l)),1)],10,["href","onClick","aria-expanded"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:l.url,class:d.linkClass(l),target:l.target,onClick:e=>d.onItemClick(e,l),role:"treeitem","aria-expanded":d.isActive(l),tabindex:d.disabled(l)?null:"0"},[l.items?(e.openBlock(),e.createBlock("span",{key:0,class:d.getSubmenuIcon(l)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",i,e.toDisplayString(d.label(l)),1)],10,["href","target","onClick","aria-expanded","tabindex"]))],64)),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",o,[d.visible(l)&&l.items?(e.openBlock(),e.createBlock(p,{model:l.items,key:d.label(l)+"_sub_",template:s.template,expandedKeys:s.expandedKeys,onItemToggle:n[1]||(n[1]=e=>t.$emit("item-toggle",e)),exact:s.exact},null,8,["model","template","expandedKeys","exact"])):e.createCommentVNode("",!0)],512),[[e.vShow,d.isActive(l)]])])),_:2},1024)],6)):e.createCommentVNode("",!0),d.visible(l)&&l.separator?(e.openBlock(),e.createBlock("li",{class:["p-menu-separator",l.class],style:l.style,key:"separator"+c.toString()},null,6)):e.createCommentVNode("",!0)],64)))),128))])};var s={name:"PanelMenu",emits:["update:expandedKeys"],props:{model:{type:Array,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.updateExpandedKeys({item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},updateExpandedKeys(e){if(this.expandedKeys){let t=e.item,n={...this.expandedKeys};e.expanded?n[t.key]=!0:delete n[t.key],this.$emit("update:expandedKeys",n)}},getPanelClass:e=>["p-panelmenu-panel",e.class],getPanelToggleIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi",{"pi-chevron-right":!t," pi-chevron-down":t}]},getPanelIcon:e=>["p-menuitem-icon",e.icon],getHeaderLinkClass(e,t){return["p-panelmenu-header-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getHeaderClass(e){return["p-component p-panelmenu-header",{"p-highlight":this.isActive(e),"p-disabled":this.disabled(e)}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},components:{PanelMenuSub:n},computed:{ariaId:()=>t.UniqueComponentId()}};const c={class:"p-panelmenu p-component"},r={class:"p-menuitem-text"},d={class:"p-menuitem-text"},m={key:0,class:"p-panelmenu-content"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panelmenu .p-panelmenu-header-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n"),s.render=function(t,n,l,a,i,o){const s=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub");return e.openBlock(),e.createBlock("div",c,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(l.model,((n,a)=>(e.openBlock(),e.createBlock(e.Fragment,{key:o.label(n)+"_"+a},[o.visible(n)?(e.openBlock(),e.createBlock("div",{key:0,class:o.getPanelClass(n),style:n.style},[e.createVNode("div",{class:o.getHeaderClass(n),style:n.style},[t.$slots.item?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.$slots.item),{key:1,item:n},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[n.to&&!o.disabled(n)?(e.openBlock(),e.createBlock(s,{key:0,to:n.to,custom:""},{default:e.withCtx((({navigate:t,href:l,isActive:a,isExactActive:i})=>[e.createVNode("a",{href:l,class:o.getHeaderLinkClass(n,{isActive:a,isExactActive:i}),onClick:e=>o.onItemClick(e,n,t),role:"treeitem"},[n.icon?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",r,e.toDisplayString(o.label(n)),1)],10,["href","onClick"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:n.url,class:o.getHeaderLinkClass(n),onClick:e=>o.onItemClick(e,n),tabindex:o.disabled(n)?null:"0","aria-expanded":o.isActive(n),id:o.ariaId+"_header_"+a,"aria-controls":o.ariaId+"_content_"+a},[n.items?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelToggleIcon(n)},null,2)):e.createCommentVNode("",!0),n.icon?(e.openBlock(),e.createBlock("span",{key:1,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",d,e.toDisplayString(o.label(n)),1)],10,["href","onClick","tabindex","aria-expanded","id","aria-controls"]))],64))],6),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",{class:"p-toggleable-content",role:"region",id:o.ariaId+"_content_"+a,"aria-labelledby":o.ariaId+"_header_"+a},[n.items?(e.openBlock(),e.createBlock("div",m,[e.createVNode(p,{model:n.items,class:"p-panelmenu-root-submenu",template:t.$slots.item,expandedKeys:l.expandedKeys,onItemToggle:o.updateExpandedKeys,exact:l.exact},null,8,["model","template","expandedKeys","onItemToggle","exact"])])):e.createCommentVNode("",!0)],8,["id","aria-labelledby"]),[[e.vShow,o.isActive(n)]])])),_:2},1024)],6)):e.createCommentVNode("",!0)],64)))),128))])},module.exports=s;

package/panelmenu/panelmenu.esm.js

@@ -10,7 +10,7 @@ var script$1 = {
             default: null
         },
         template: {
-            type: Object,
+            type: Function,
             default: null
         },
         expandedKeys: {
@@ -78,6 +78,9 @@ var script$1 = {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     }
 };
@@ -97,7 +100,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock("ul", _hoisted_1$1, [
     (openBlock(true), createBlock(Fragment, null, renderList($props.model, (item, i) => {
       return (openBlock(), createBlock(Fragment, {
-        key: item.label + i.toString()
+        key: $options.label(item) + i.toString()
       }, [
         ($options.visible(item) && !item.separator)
           ? (openBlock(), createBlock("li", {
@@ -125,7 +128,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               createVNode("span", {
                                 class: ['p-menuitem-icon', item.icon]
                               }, null, 2),
-                              createVNode("span", _hoisted_2$1, toDisplayString(item.label), 1)
+                              createVNode("span", _hoisted_2$1, toDisplayString($options.label(item)), 1)
                             ], 10, ["href", "onClick", "aria-expanded"])
                           ]),
                           _: 2
@@ -149,7 +152,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           createVNode("span", {
                             class: ['p-menuitem-icon', item.icon]
                           }, null, 2),
-                          createVNode("span", _hoisted_3$1, toDisplayString(item.label), 1)
+                          createVNode("span", _hoisted_3$1, toDisplayString($options.label(item)), 1)
                         ], 10, ["href", "target", "onClick", "aria-expanded", "tabindex"]))
                   ], 64))
                 : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
@@ -162,7 +165,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     ($options.visible(item) && item.items)
                       ? (openBlock(), createBlock(_component_PanelMenuSub, {
                           model: item.items,
-                          key: item.label + '_sub_',
+                          key: $options.label(item) + '_sub_',
                           template: $props.template,
                           expandedKeys: $props.expandedKeys,
                           onItemToggle: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-toggle', $event))),
@@ -282,6 +285,9 @@ var script = {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     components: {
@@ -309,7 +315,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock("div", _hoisted_1, [
     (openBlock(true), createBlock(Fragment, null, renderList($props.model, (item, index) => {
       return (openBlock(), createBlock(Fragment, {
-        key: item.label + '_' + index
+        key: $options.label(item) + '_' + index
       }, [
         ($options.visible(item))
           ? (openBlock(), createBlock("div", {
@@ -342,7 +348,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                       class: $options.getPanelIcon(item)
                                     }, null, 2))
                                   : createCommentVNode("", true),
-                                createVNode("span", _hoisted_2, toDisplayString(item.label), 1)
+                                createVNode("span", _hoisted_2, toDisplayString($options.label(item)), 1)
                               ], 10, ["href", "onClick"])
                             ]),
                             _: 2
@@ -354,8 +360,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)
                               ? (openBlock(), createBlock("span", {
@@ -369,7 +375,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   class: $options.getPanelIcon(item)
                                 }, null, 2))
                               : createCommentVNode("", true),
-                            createVNode("span", _hoisted_3, toDisplayString(item.label), 1)
+                            createVNode("span", _hoisted_3, toDisplayString($options.label(item)), 1)
                           ], 10, ["href", "onClick", "tabindex", "aria-expanded", "id", "aria-controls"]))
                     ], 64))
                   : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
@@ -382,8 +388,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   withDirectives(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)
                       ? (openBlock(), createBlock("div", _hoisted_4, [
@@ -442,4 +448,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };