primevue 3.27.0 → 3.28.0

package/overlaypanel/overlaypanel.esm.js

@@ -1,13 +1,15 @@
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, renderSlot, resolveDynamicComponent, normalizeClass, createCommentVNode } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, renderSlot, resolveDynamicComponent, createCommentVNode } from 'vue';
 
 var script = {
     name: 'OverlayPanel',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {
@@ -332,17 +334,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: $options.containerClass,
                 "aria-modal": $data.visible,
                 onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-              }, _ctx.$attrs), [
-                createElementVNode("div", {
+              }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
+                createElementVNode("div", mergeProps({
                   class: "p-overlaypanel-content",
                   onClick: _cache[0] || (_cache[0] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                   onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                   onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onContentKeydown && $options.onContentKeydown(...args)))
-                }, [
+                }, _ctx.ptm('content')), [
                   renderSlot(_ctx.$slots, "default")
-                ], 32),
+                ], 16),
                 ($props.showCloseIcon)
-                  ? withDirectives((openBlock(), createElementBlock("button", {
+                  ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
                       key: 0,
                       class: "p-overlaypanel-close p-link",
                       "aria-label": $options.closeAriaLabel,
@@ -350,13 +352,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       autofocus: "",
                       onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
                       onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onButtonKeydown && $options.onButtonKeydown(...args)))
-                    }, [
+                    }, _ctx.ptm('closeButton')), [
                       renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                        (openBlock(), createBlock(resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                          class: normalizeClass(['p-overlaypanel-close-icon ', $props.closeIcon])
-                        }, null, 8, ["class"]))
+                        (openBlock(), createBlock(resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), mergeProps({
+                          class: ['p-overlaypanel-close-icon ', $props.closeIcon]
+                        }, _ctx.ptm('closeIcon')), null, 16, ["class"]))
                       ])
-                    ], 40, _hoisted_2)), [
+                    ], 16, _hoisted_2)), [
                       [_directive_ripple]
                     ])
                   : createCommentVNode("", true)

package/overlaypanel/overlaypanel.esm.min.js

@@ -1 +1 @@
-import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/overlayeventbus";import i from"primevue/portal";import s from"primevue/ripple";import{ZIndexUtils as l,DomHandler as o,ConnectedOverlayScrollHandler as r,UniqueComponentId as a}from"primevue/utils";import{resolveComponent as c,resolveDirective as d,openBlock as p,createBlock as h,withCtx as u,createVNode as v,Transition as y,withDirectives as f,createElementBlock as m,mergeProps as b,createElementVNode as L,renderSlot as C,resolveDynamicComponent as g,normalizeClass as k,createCommentVNode as w}from"vue";var E={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&l.clear(this.container),this.overlayEventListener&&(n.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,o.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&l.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),n.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),n.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&l.clear(e)},alignOverlay(){o.absolutePosition(this.container,this.target);const e=o.getOffset(this.container),t=o.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&o.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&o.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!o.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>a(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:s},components:{Portal:i,TimesIcon:t}};const x=["aria-modal"],T=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),E.render=function(e,t,n,i,s,l){const o=c("Portal"),r=d("ripple"),a=d("focustrap");return p(),h(o,{appendTo:n.appendTo},{default:u((()=>[v(y,{name:"p-overlaypanel",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:u((()=>[s.visible?f((p(),m("div",b({key:0,ref:l.containerRef,role:"dialog",class:l.containerClass,"aria-modal":s.visible,onClick:t[5]||(t[5]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))},e.$attrs),[L("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>l.onContentKeydown&&l.onContentKeydown(...e))},[C(e.$slots,"default")],32),n.showCloseIcon?f((p(),m("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":l.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>l.hide&&l.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>l.onButtonKeydown&&l.onButtonKeydown(...e))},[C(e.$slots,"closeicon",{},(()=>[(p(),h(g(n.closeIcon?"span":"TimesIcon"),{class:k(["p-overlaypanel-close-icon ",n.closeIcon])},null,8,["class"]))]))],40,T)),[[r]]):w("",!0)],16,x)),[[a]]):w("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])};export{E as default};
+import e from"primevue/basecomponent";import t from"primevue/focustrap";import n from"primevue/icons/times";import i from"primevue/overlayeventbus";import s from"primevue/portal";import l from"primevue/ripple";import{ZIndexUtils as o,DomHandler as r,ConnectedOverlayScrollHandler as a,UniqueComponentId as c}from"primevue/utils";import{resolveComponent as p,resolveDirective as d,openBlock as h,createBlock as u,withCtx as v,createVNode as m,Transition as y,withDirectives as f,createElementBlock as b,mergeProps as L,createElementVNode as C,renderSlot as g,resolveDynamicComponent as k,createCommentVNode as w}from"vue";var E={name:"OverlayPanel",extends:e,inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&o.clear(this.container),this.overlayEventListener&&(i.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,r.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&o.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),i.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),i.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&o.clear(e)},alignOverlay(){r.absolutePosition(this.container,this.target);const e=r.getOffset(this.container),t=r.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&r.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new a(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){i.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>c(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:t,ripple:l},components:{Portal:s,TimesIcon:n}};const x=["aria-modal"],T=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),E.render=function(e,t,n,i,s,l){const o=p("Portal"),r=d("ripple"),a=d("focustrap");return h(),u(o,{appendTo:n.appendTo},{default:v((()=>[m(y,{name:"p-overlaypanel",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:v((()=>[s.visible?f((h(),b("div",L({key:0,ref:l.containerRef,role:"dialog",class:l.containerClass,"aria-modal":s.visible,onClick:t[5]||(t[5]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))},{...e.$attrs,...e.ptm("root")}),[C("div",L({class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>l.onContentKeydown&&l.onContentKeydown(...e))},e.ptm("content")),[g(e.$slots,"default")],16),n.showCloseIcon?f((h(),b("button",L({key:0,class:"p-overlaypanel-close p-link","aria-label":l.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>l.hide&&l.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>l.onButtonKeydown&&l.onButtonKeydown(...e))},e.ptm("closeButton")),[g(e.$slots,"closeicon",{},(()=>[(h(),u(k(n.closeIcon?"span":"TimesIcon"),L({class:["p-overlaypanel-close-icon ",n.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]))],16,T)),[[r]]):w("",!0)],16,x)),[[a]]):w("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])};export{E as default};

package/overlaypanel/overlaypanel.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.overlaypanel = (function (FocusTrap, TimesIcon, OverlayEventBus, Portal, Ripple, utils, vue) {
+this.primevue.overlaypanel = (function (BaseComponent, FocusTrap, TimesIcon, OverlayEventBus, Portal, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
@@ -12,6 +13,7 @@ this.primevue.overlaypanel = (function (FocusTrap, TimesIcon, OverlayEventBus, P
 
     var script = {
         name: 'OverlayPanel',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['show', 'hide'],
         props: {
@@ -336,17 +338,17 @@ this.primevue.overlaypanel = (function (FocusTrap, TimesIcon, OverlayEventBus, P
                     class: $options.containerClass,
                     "aria-modal": $data.visible,
                     onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                  }, _ctx.$attrs), [
-                    vue.createElementVNode("div", {
+                  }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
+                    vue.createElementVNode("div", vue.mergeProps({
                       class: "p-overlaypanel-content",
                       onClick: _cache[0] || (_cache[0] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                       onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                       onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onContentKeydown && $options.onContentKeydown(...args)))
-                    }, [
+                    }, _ctx.ptm('content')), [
                       vue.renderSlot(_ctx.$slots, "default")
-                    ], 32),
+                    ], 16),
                     ($props.showCloseIcon)
-                      ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                      ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                           key: 0,
                           class: "p-overlaypanel-close p-link",
                           "aria-label": $options.closeAriaLabel,
@@ -354,13 +356,13 @@ this.primevue.overlaypanel = (function (FocusTrap, TimesIcon, OverlayEventBus, P
                           autofocus: "",
                           onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
                           onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onButtonKeydown && $options.onButtonKeydown(...args)))
-                        }, [
+                        }, _ctx.ptm('closeButton')), [
                           vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                              class: vue.normalizeClass(['p-overlaypanel-close-icon ', $props.closeIcon])
-                            }, null, 8, ["class"]))
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+                              class: ['p-overlaypanel-close-icon ', $props.closeIcon]
+                            }, _ctx.ptm('closeIcon')), null, 16, ["class"]))
                           ])
-                        ], 40, _hoisted_2)), [
+                        ], 16, _hoisted_2)), [
                           [_directive_ripple]
                         ])
                       : vue.createCommentVNode("", true)
@@ -410,4 +412,4 @@ this.primevue.overlaypanel = (function (FocusTrap, TimesIcon, OverlayEventBus, P
 
     return script;
 
-})(primevue.focustrap, primevue.icons.times, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.focustrap, primevue.icons.times, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, Vue);

package/overlaypanel/overlaypanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l,o,s){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),c=r(t),d=r(n),p=r(i),h=r(l),u={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&o.ZIndexUtils.clear(this.container),this.overlayEventListener&&(d.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,o.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&o.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),d.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),d.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&o.ZIndexUtils.clear(e)},alignOverlay(){o.DomHandler.absolutePosition(this.container,this.target);const e=o.DomHandler.getOffset(this.container),t=o.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&o.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&o.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new o.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!o.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){d.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>o.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:h.default},components:{Portal:p.default,TimesIcon:c.default}};const v=["aria-modal"],y=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),u.render=function(e,t,n,i,l,o){const r=s.resolveComponent("Portal"),a=s.resolveDirective("ripple"),c=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(r,{appendTo:n.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-overlaypanel",onEnter:o.onEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:s.withCtx((()=>[l.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.containerRef,role:"dialog",class:o.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))},e.$attrs),[s.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>o.onContentKeydown&&o.onContentKeydown(...e))},[s.renderSlot(e.$slots,"default")],32),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":o.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>o.hide&&o.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>o.onButtonKeydown&&o.onButtonKeydown(...e))},[s.renderSlot(e.$slots,"closeicon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:s.normalizeClass(["p-overlaypanel-close-icon ",n.closeIcon])},null,8,["class"]))]))],40,y)),[[a]]):s.createCommentVNode("",!0)],16,v)),[[c]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},u}(primevue.focustrap,primevue.icons.times,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l,o,s,r){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(e),d=a(t),p=a(n),h=a(i),u=a(l),v=a(o),m={name:"OverlayPanel",extends:c.default,inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&s.ZIndexUtils.clear(this.container),this.overlayEventListener&&(h.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,s.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&s.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),h.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),h.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&s.ZIndexUtils.clear(e)},alignOverlay(){s.DomHandler.absolutePosition(this.container,this.target);const e=s.DomHandler.getOffset(this.container),t=s.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&s.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&s.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new s.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!s.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){h.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>s.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:d.default,ripple:v.default},components:{Portal:u.default,TimesIcon:p.default}};const f=["aria-modal"],y=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),m.render=function(e,t,n,i,l,o){const s=r.resolveComponent("Portal"),a=r.resolveDirective("ripple"),c=r.resolveDirective("focustrap");return r.openBlock(),r.createBlock(s,{appendTo:n.appendTo},{default:r.withCtx((()=>[r.createVNode(r.Transition,{name:"p-overlaypanel",onEnter:o.onEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:r.withCtx((()=>[l.visible?r.withDirectives((r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:o.containerRef,role:"dialog",class:o.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))},{...e.$attrs,...e.ptm("root")}),[r.createElementVNode("div",r.mergeProps({class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>o.onContentKeydown&&o.onContentKeydown(...e))},e.ptm("content")),[r.renderSlot(e.$slots,"default")],16),n.showCloseIcon?r.withDirectives((r.openBlock(),r.createElementBlock("button",r.mergeProps({key:0,class:"p-overlaypanel-close p-link","aria-label":o.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>o.hide&&o.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>o.onButtonKeydown&&o.onButtonKeydown(...e))},e.ptm("closeButton")),[r.renderSlot(e.$slots,"closeicon",{},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),r.mergeProps({class:["p-overlaypanel-close-icon ",n.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]))],16,y)),[[a]]):r.createCommentVNode("",!0)],16,f)),[[c]]):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},m}(primevue.basecomponent,primevue.focustrap,primevue.icons.times,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.utils,Vue);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.27.0",
+    "version": "3.28.0",
     "homepage": "https://primevue.org/",
     "repository": {
       "type": "git",

package/panel/Panel.d.ts

@@ -137,7 +137,16 @@ export interface PanelSlots {
     /**
      * Custom header template.
      */
-    header(): VNode[];
+    header(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: boolean;
+        /**
+         * Style class of the icon
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom icons template.
      */

package/panel/Panel.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" v-bind="ptm('root')">
         <div class="p-panel-header" v-bind="ptm('header')">
-            <slot name="header">
+            <slot :id="ariaId + '_header'" name="header" class="p-panel-title">
                 <span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
             </slot>
             <div class="p-panel-icons" v-bind="ptm('icons')">

package/panel/panel.cjs.js

@@ -82,7 +82,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   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.cjs.min.js

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

package/panel/panel.esm.js

@@ -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,134 @@ 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 header icon's DOM element.
+     */
+    headerIcon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenuIcon's DOM element.
+     */
+    submenuIcon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header label's DOM element.
+     */
+    headerLabel?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuicon?: 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 +192,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;
 }
 
 /**