primevue 3.27.0 → 3.29.0

package/panel/panel.esm.js

@@ -73,7 +73,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createElementBlock("div", mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
     createElementVNode("div", mergeProps({ class: "p-panel-header" }, _ctx.ptm('header')), [
-      renderSlot(_ctx.$slots, "header", {}, () => [
+      renderSlot(_ctx.$slots, "header", {
+        id: $options.ariaId + '_header',
+        class: "p-panel-title"
+      }, () => [
         ($props.header)
           ? (openBlock(), createElementBlock("span", mergeProps({
               key: 0,

package/panel/panel.esm.min.js

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

package/panel/panel.js

@@ -77,7 +77,10 @@ this.primevue.panel = (function (BaseComponent, MinusIcon, PlusIcon, Ripple, uti
 
       return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
         vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-header" }, _ctx.ptm('header')), [
-          vue.renderSlot(_ctx.$slots, "header", {}, () => [
+          vue.renderSlot(_ctx.$slots, "header", {
+            id: $options.ariaId + '_header',
+            class: "p-panel-title"
+          }, () => [
             ($props.header)
               ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                   key: 0,

package/panel/panel.min.js

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

package/panelmenu/PanelMenu.d.ts

@@ -11,6 +11,130 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttributes | ((options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelMenuPassThroughMethodOptions {
+    props: PanelMenuProps;
+    state: PanelMenuState;
+    context: PanelMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelMenuProps.pt}
+ */
+export interface PanelMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenuIcon's DOM element.
+     */
+    submenuIcon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header icon's DOM element.
+     */
+    headerIcon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header label's DOM element.
+     */
+    headerLabel?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the menu content's DOM element.
+     */
+    menuContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: PanelMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PanelMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in PanelMenu component.
+ */
+export interface PanelMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Active item path.
+     * @type {MenuItem}
+     */
+    activeItem: MenuItem[];
+}
+
+/**
+ * Defines current options in PanelMenu component.
+ */
+export interface PanelMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Custom expanded keys metadata.
  * @see {@link PanelMenuProps.expandedKeys}
@@ -64,6 +188,11 @@ export interface PanelMenuProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelMenuPassThroughOptions}
+     */
+    pt?: PanelMenuPassThroughOptions;
 }
 
 /**

package/panelmenu/PanelMenu.vue

@@ -1,7 +1,7 @@
 <template>
-    <div :id="id" class="p-panelmenu p-component">
+    <div :id="id" class="p-panelmenu p-component" v-bind="ptm('root')">
         <template v-for="(item, index) of model" :key="getPanelKey(index)">
-            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)">
+            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)" v-bind="ptm('panel')">
                 <div
                     :id="getHeaderId(index)"
                     :class="getHeaderClass(item)"
@@ -13,32 +13,42 @@
                     :aria-disabled="isItemDisabled(item)"
                     @click="onHeaderClick($event, item)"
                     @keydown="onHeaderKeyDown($event, item)"
+                    v-bind="getPTOptions(item, 'header')"
                 >
-                    <div class="p-panelmenu-header-content">
+                    <div class="p-panelmenu-header-content" v-bind="getPTOptions(item, 'headerContent')">
                         <template v-if="!$slots.item">
                             <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
-                                <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
+                                <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions(item, 'headerAction')">
                                     <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
-                                    <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
-                                    <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
+                                    <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
+                                    <span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
                                 </a>
                             </router-link>
-                            <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1">
+                            <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1" v-bind="getPTOptions(item, 'headerAction')">
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
-                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(item, 'submenuIcon')" />
                                 </slot>
                                 <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
-                                <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
-                                <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
+                                <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item"></component>
                     </div>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)">
-                        <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content">
-                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :templates="$slots" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
+                    <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
+                        <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content" v-bind="ptm('menuContent')">
+                            <PanelMenuList
+                                :panelId="getPanelId(index)"
+                                :items="getItemProp(item, 'items')"
+                                :templates="$slots"
+                                :expandedKeys="expandedKeys"
+                                @item-toggle="changeExpandedKeys"
+                                @header-focus="updateFocusedHeader"
+                                :exact="exact"
+                                :pt="pt"
+                            />
                         </div>
                     </div>
                 </transition>
@@ -48,6 +58,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
@@ -55,6 +66,7 @@ import PanelMenuList from './PanelMenuList.vue';
 
 export default {
     name: 'PanelMenu',
+    extends: BaseComponent,
     emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
     props: {
         model: {
@@ -95,6 +107,14 @@ export default {
         getItemLabel(item) {
             return this.getItemProp(item, 'label');
         },
+        getPTOptions(item, key) {
+            return this.ptm(key, {
+                options: {
+                    active: this.isItemActive(item),
+                    focused: this.isItemFocused(item)
+                }
+            });
+        },
         isItemActive(item) {
             return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : ObjectUtils.equals(item, this.activeItem);
         },
@@ -104,6 +124,9 @@ export default {
         isItemDisabled(item) {
             return this.getItemProp(item, 'disabled');
         },
+        isItemFocused(item) {
+            return ObjectUtils.equals(item, this.activeItem);
+        },
         getPanelId(index) {
             return `${this.id}_${index}`;
         },

package/panelmenu/PanelMenuList.vue

@@ -15,15 +15,18 @@
         @blur="onBlur"
         @keydown="onKeyDown"
         @item-toggle="onItemToggle"
+        :pt="pt"
     />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import PanelMenuSub from './PanelMenuSub.vue';
 
 export default {
     name: 'PanelMenuList',
+    extends: BaseComponent,
     emits: ['item-toggle', 'header-focus'],
     props: {
         panelId: {

package/panelmenu/PanelMenuSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul class="p-submenu-list">
+    <ul class="p-submenu-list" v-bind="ptm('menu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -12,30 +12,40 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
-                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(processedItem)" class="p-toggleable-content">
+                    <div v-show="isItemActive(processedItem)" class="p-toggleable-content" v-bind="ptm('toggleableContent')">
                         <PanelMenuSub
                             v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                             :id="getItemId(processedItem) + '_list'"
@@ -48,16 +58,18 @@
                             :activeItemPath="activeItemPath"
                             :exact="exact"
                             @item-toggle="onItemToggle"
+                            :pt="pt"
                         />
                     </div>
                 </transition>
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator" v-bind="ptm('separator')"></li>
         </template>
     </ul>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
@@ -65,6 +77,7 @@ import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'PanelMenuSub',
+    extends: BaseComponent,
     emits: ['item-toggle'],
     props: {
         panelId: {
@@ -109,6 +122,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },