primevue 3.27.0 → 3.28.0

package/menu/menu.js

@@ -1,15 +1,17 @@
 this.primevue = this.primevue || {};
-this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
+this.primevue.menu = (function (BaseComponent, OverlayEventBus, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script$1 = {
         name: 'Menuitem',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['item-click'],
         props: {
@@ -23,6 +25,16 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
             getItemProp(processedItem, name) {
                 return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
             },
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        focused: this.isItemFocused()
+                    }
+                });
+            },
+            isItemFocused() {
+                return this.focusedOptionId === this.id;
+            },
             onItemActionClick(event, navigate) {
                 navigate && navigate(event);
             },
@@ -66,28 +78,26 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
 
     const _hoisted_1$1 = ["id", "aria-label", "aria-disabled"];
     const _hoisted_2$1 = ["href", "onClick"];
-    const _hoisted_3$1 = { class: "p-menuitem-text" };
-    const _hoisted_4$1 = ["href", "target"];
-    const _hoisted_5$1 = { class: "p-menuitem-text" };
+    const _hoisted_3$1 = ["href", "target"];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return ($options.visible())
-        ? (vue.openBlock(), vue.createElementBlock("li", {
+        ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
             key: 0,
             id: $props.id,
-            class: vue.normalizeClass($options.containerClass()),
+            class: $options.containerClass(),
             role: "menuitem",
-            style: vue.normalizeStyle($props.item.style),
+            style: $props.item.style,
             "aria-label": $options.label(),
             "aria-disabled": $options.disabled()
-          }, [
-            vue.createElementVNode("div", {
+          }, $options.getPTOptions('menuitem')), [
+            vue.createElementVNode("div", vue.mergeProps({
               class: "p-menuitem-content",
               onClick: _cache[0] || (_cache[0] = $event => ($options.onItemClick($event)))
-            }, [
+            }, $options.getPTOptions('content')), [
               (!$props.templates.item)
                 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     ($props.item.to && !$options.disabled())
@@ -97,13 +107,13 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                           custom: ""
                         }, {
                           default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                               href: href,
-                              class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                              class: $options.linkClass({ isActive, isExactActive }),
                               tabindex: "-1",
                               "aria-hidden": "true",
                               onClick: $event => ($options.onItemActionClick($event, navigate))
-                            }, [
+                            }, $options.getPTOptions('action')), [
                               ($props.templates.itemicon)
                                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                     key: 0,
@@ -111,26 +121,26 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                     class: vue.normalizeClass($options.iconClass)
                                   }, null, 8, ["item", "class"]))
                                 : ($props.item.icon)
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                       key: 1,
-                                      class: vue.normalizeClass($options.iconClass)
-                                    }, null, 2))
+                                      class: $options.iconClass
+                                    }, $options.getPTOptions('icon')), null, 16))
                                   : vue.createCommentVNode("", true),
-                              vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString($options.label()), 1)
-                            ], 10, _hoisted_2$1)), [
+                              vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label')), vue.toDisplayString($options.label()), 17)
+                            ], 16, _hoisted_2$1)), [
                               [_directive_ripple]
                             ])
                           ]),
                           _: 1
                         }, 8, ["to"]))
-                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                           key: 1,
                           href: $props.item.url,
-                          class: vue.normalizeClass($options.linkClass()),
+                          class: $options.linkClass(),
                           target: $props.item.target,
                           tabindex: "-1",
                           "aria-hidden": "true"
-                        }, [
+                        }, $options.getPTOptions('action')), [
                           ($props.templates.itemicon)
                             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                 key: 0,
@@ -138,13 +148,13 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                 class: vue.normalizeClass($options.iconClass)
                               }, null, 8, ["item", "class"]))
                             : ($props.item.icon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                   key: 1,
-                                  class: vue.normalizeClass($options.iconClass)
-                                }, null, 2))
+                                  class: $options.iconClass
+                                }, $options.getPTOptions('icon')), null, 16))
                               : vue.createCommentVNode("", true),
-                          vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString($options.label()), 1)
-                        ], 10, _hoisted_4$1)), [
+                          vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label')), vue.toDisplayString($options.label()), 17)
+                        ], 16, _hoisted_3$1)), [
                           [_directive_ripple]
                         ])
                   ], 64))
@@ -152,8 +162,8 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                     key: 1,
                     item: $props.item
                   }, null, 8, ["item"]))
-            ])
-          ], 14, _hoisted_1$1))
+            ], 16)
+          ], 16, _hoisted_1$1))
         : vue.createCommentVNode("", true)
     }
 
@@ -161,6 +171,7 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
 
     var script = {
         name: 'Menu',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['show', 'hide', 'focus', 'blur'],
         props: {
@@ -524,16 +535,8 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     };
 
     const _hoisted_1 = ["id"];
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-menu-start"
-    };
-    const _hoisted_3 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
-    const _hoisted_4 = ["id"];
-    const _hoisted_5 = {
-      key: 1,
-      class: "p-menu-end"
-    };
+    const _hoisted_2 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
+    const _hoisted_3 = ["id"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_PVMenuitem = vue.resolveComponent("PVMenuitem");
@@ -556,16 +559,18 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                     key: 0,
                     ref: $options.containerRef,
                     id: $data.id,
-                    class: $options.containerClass
-                  }, _ctx.$attrs, {
+                    class: $options.containerClass,
                     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                  }), [
+                  }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
                     (_ctx.$slots.start)
-                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                          key: 0,
+                          class: "p-menu-start"
+                        }, _ctx.ptm('start')), [
                           vue.renderSlot(_ctx.$slots, "start")
-                        ]))
+                        ], 16))
                       : vue.createCommentVNode("", true),
-                    vue.createElementVNode("ul", {
+                    vue.createElementVNode("ul", vue.mergeProps({
                       ref: $options.listRef,
                       id: $data.id + '_list',
                       class: "p-menu-list p-reset",
@@ -577,7 +582,7 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                       onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onListFocus && $options.onListFocus(...args))),
                       onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onListBlur && $options.onListBlur(...args))),
                       onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onListKeyDown && $options.onListKeyDown(...args)))
-                    }, [
+                    }, _ctx.ptm('menu')), [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
                         return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                           key: $options.label(item) + i.toString()
@@ -585,16 +590,16 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                           (item.items && $options.visible(item) && !item.separator)
                             ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                 (item.items)
-                                  ? (vue.openBlock(), vue.createElementBlock("li", {
+                                  ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                       key: 0,
                                       id: $data.id + '_' + i,
                                       class: "p-submenu-header",
                                       role: "none"
-                                    }, [
+                                    }, _ctx.ptm('submenuHeader')), [
                                       vue.renderSlot(_ctx.$slots, "item", { item: item }, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.label(item)), 1)
                                       ])
-                                    ], 8, _hoisted_4))
+                                    ], 16, _hoisted_3))
                                   : vue.createCommentVNode("", true),
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.items, (child, j) => {
                                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -608,26 +613,27 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                           templates: _ctx.$slots,
                                           exact: $props.exact,
                                           focusedOptionId: $options.focusedOptionId,
-                                          onItemClick: $options.itemClick
-                                        }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick"]))
+                                          onItemClick: $options.itemClick,
+                                          pt: _ctx.pt
+                                        }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick", "pt"]))
                                       : ($options.visible(child) && child.separator)
-                                        ? (vue.openBlock(), vue.createElementBlock("li", {
+                                        ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                             key: 'separator' + i + j,
-                                            class: vue.normalizeClass($options.separatorClass(item)),
-                                            style: vue.normalizeStyle(child.style),
+                                            class: $options.separatorClass(item),
+                                            style: child.style,
                                             role: "separator"
-                                          }, null, 6))
+                                          }, _ctx.ptm('separator')), null, 16))
                                         : vue.createCommentVNode("", true)
                                   ], 64))
                                 }), 128))
                               ], 64))
                             : ($options.visible(item) && item.separator)
-                              ? (vue.openBlock(), vue.createElementBlock("li", {
+                              ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                   key: 'separator' + i.toString(),
-                                  class: vue.normalizeClass($options.separatorClass(item)),
-                                  style: vue.normalizeStyle(item.style),
+                                  class: $options.separatorClass(item),
+                                  style: item.style,
                                   role: "separator"
-                                }, null, 6))
+                                }, _ctx.ptm('separator')), null, 16))
                               : (vue.openBlock(), vue.createBlock(_component_PVMenuitem, {
                                   key: $options.label(item) + i.toString(),
                                   id: $data.id + '_' + i,
@@ -635,15 +641,19 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                   templates: _ctx.$slots,
                                   exact: $props.exact,
                                   focusedOptionId: $options.focusedOptionId,
-                                  onItemClick: $options.itemClick
-                                }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick"]))
+                                  onItemClick: $options.itemClick,
+                                  pt: _ctx.pt
+                                }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick", "pt"]))
                         ], 64))
                       }), 128))
-                    ], 40, _hoisted_3),
+                    ], 16, _hoisted_2),
                     (_ctx.$slots.end)
-                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                          key: 1,
+                          class: "p-menu-end"
+                        }, _ctx.ptm('end')), [
                           vue.renderSlot(_ctx.$slots, "end")
-                        ]))
+                        ], 16))
                       : vue.createCommentVNode("", true)
                   ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
@@ -689,4 +699,4 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
 
     return script;
 
-})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);

package/menu/menu.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.menu=function(e,t,i,n,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),a=l(t),r={name:"Menuitem",inheritAttrs:!1,emits:["item-click"],props:{item:null,templates:null,exact:null,id:null,focusedOptionId:null},methods:{getItemProp:(e,t)=>e&&e.item?i.ObjectUtils.getItemValue(e.item[t]):void 0,onItemActionClick(e,t){t&&t(e)},onItemClick(e){const t=this.getItemProp(this.item,"command");t&&t({originalEvent:e,item:this.item.item}),this.$emit("item-click",{originalEvent:e,item:this.item,id:this.id})},containerClass(){return["p-menuitem",this.item.class,{"p-focus":this.id===this.focusedOptionId,"p-disabled":this.disabled()}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label}},computed:{iconClass(){return["p-menuitem-icon",this.item.icon]}},directives:{ripple:l(n).default}};const c=["id","aria-label","aria-disabled"],d=["href","onClick"],m={class:"p-menuitem-text"},p=["href","target"],u={class:"p-menuitem-text"};r.render=function(e,t,i,n,l,o){const a=s.resolveComponent("router-link"),r=s.resolveDirective("ripple");return o.visible()?(s.openBlock(),s.createElementBlock("li",{key:0,id:i.id,class:s.normalizeClass(o.containerClass()),role:"menuitem",style:s.normalizeStyle(i.item.style),"aria-label":o.label(),"aria-disabled":o.disabled()},[s.createElementVNode("div",{class:"p-menuitem-content",onClick:t[0]||(t[0]=e=>o.onItemClick(e))},[i.templates.item?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(i.templates.item),{key:1,item:i.item},null,8,["item"])):(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[i.item.to&&!o.disabled()?(s.openBlock(),s.createBlock(a,{key:0,to:i.item.to,custom:""},{default:s.withCtx((({navigate:e,href:t,isActive:n,isExactActive:l})=>[s.withDirectives((s.openBlock(),s.createElementBlock("a",{href:t,class:s.normalizeClass(o.linkClass({isActive:n,isExactActive:l})),tabindex:"-1","aria-hidden":"true",onClick:t=>o.onItemActionClick(t,e)},[i.templates.itemicon?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(i.templates.itemicon),{key:0,item:i.item,class:s.normalizeClass(o.iconClass)},null,8,["item","class"])):i.item.icon?(s.openBlock(),s.createElementBlock("span",{key:1,class:s.normalizeClass(o.iconClass)},null,2)):s.createCommentVNode("",!0),s.createElementVNode("span",m,s.toDisplayString(o.label()),1)],10,d)),[[r]])])),_:1},8,["to"])):s.withDirectives((s.openBlock(),s.createElementBlock("a",{key:1,href:i.item.url,class:s.normalizeClass(o.linkClass()),target:i.item.target,tabindex:"-1","aria-hidden":"true"},[i.templates.itemicon?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(i.templates.itemicon),{key:0,item:i.item,class:s.normalizeClass(o.iconClass)},null,8,["item","class"])):i.item.icon?(s.openBlock(),s.createElementBlock("span",{key:1,class:s.normalizeClass(o.iconClass)},null,2)):s.createCommentVNode("",!0),s.createElementVNode("span",u,s.toDisplayString(o.label()),1)],10,p)),[[r]])],64))])],14,c)):s.createCommentVNode("",!0)};var h={name:"Menu",inheritAttrs:!1,emits:["show","hide","focus","blur"],props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},data(){return{id:this.$attrs.id,overlayVisible:!1,focused:!1,focusedOptionIndex:-1,selectedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||i.UniqueComponentId()}},target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,list:null,mounted(){this.id=this.id||i.UniqueComponentId(),this.popup||(this.bindResizeListener(),this.bindOutsideClickListener())},beforeUnmount(){this.unbindResizeListener(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.target=null,this.container&&this.autoZIndex&&i.ZIndexUtils.clear(this.container),this.container=null},methods:{itemClick(e){const t=e.item;this.disabled(t)||(t.command&&t.command(e),t.to&&e.navigate&&e.navigate(e.originalEvent),this.overlayVisible&&this.hide(),this.popup||this.focusedOptionIndex===e.id||(this.focusedOptionIndex=e.id))},onListFocus(e){this.focused=!0,this.popup||(-1!==this.selectedOptionIndex?(this.changeFocusedOptionIndex(this.selectedOptionIndex),this.selectedOptionIndex=-1):this.changeFocusedOptionIndex(0)),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Enter":this.onEnterKey(e);break;case"Space":this.onSpaceKey(e);break;case"Escape":this.popup&&(i.DomHandler.focus(this.target),this.hide());case"Tab":this.overlayVisible&&this.hide()}},onArrowDownKey(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},onArrowUpKey(e){if(e.altKey&&this.popup)i.DomHandler.focus(this.target),this.hide(),e.preventDefault();else{const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()}},onHomeKey(e){this.changeFocusedOptionIndex(0),e.preventDefault()},onEndKey(e){this.changeFocusedOptionIndex(i.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)").length-1),e.preventDefault()},onEnterKey(e){const t=i.DomHandler.findSingle(this.list,`li[id="${this.focusedOptionIndex}"]`),n=t&&i.DomHandler.findSingle(t,".p-menuitem-link");this.popup&&i.DomHandler.focus(this.target),n?n.click():t&&t.click(),e.preventDefault()},onSpaceKey(e){this.onEnterKey(e)},findNextOptionIndex(e){const t=[...i.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t+1:0},findPrevOptionIndex(e){const t=[...i.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t-1:0},changeFocusedOptionIndex(e){const t=i.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)");let n=e>=t.length?t.length-1:e<0?0:e;n>-1&&(this.focusedOptionIndex=t[n].getAttribute("id"))},toggle(e){this.overlayVisible?this.hide():this.show(e)},show(e){this.overlayVisible=!0,this.target=e.currentTarget},hide(){this.overlayVisible=!1,this.target=null},onEnter(e){this.alignOverlay(),this.bindOutsideClickListener(),this.bindResizeListener(),this.bindScrollListener(),this.autoZIndex&&i.ZIndexUtils.set("menu",e,this.baseZIndex+this.$primevue.config.zIndex.menu),this.popup&&(i.DomHandler.focus(this.list),this.changeFocusedOptionIndex(0)),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.unbindScrollListener(),this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&i.ZIndexUtils.clear(e)},alignOverlay(){i.DomHandler.absolutePosition(this.container,this.target),this.container.style.minWidth=i.DomHandler.getOuterWidth(this.target)+"px"},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{const t=this.container&&!this.container.contains(e.target),i=!(this.target&&(this.target===e.target||this.target.contains(e.target)));this.overlayVisible&&t&&i?this.hide():!this.popup&&t&&i&&(this.focusedOptionIndex=-1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i.ConnectedOverlayScrollHandler(this.target,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!i.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,separatorClass:e=>["p-menuitem-separator",e.class],onOverlayClick(e){o.default.emit("overlay-click",{originalEvent:e,target:this.target})},containerRef(e){this.container=e},listRef(e){this.list=e}},computed:{containerClass(){return["p-menu p-component",{"p-menu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{PVMenuitem:r,Portal:a.default}};const k=["id"],b={key:0,class:"p-menu-start"},f=["id","tabindex","aria-activedescendant","aria-label","aria-labelledby"],v=["id"],y={key:1,class:"p-menu-end"};return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-menu-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-menu ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menu .p-menuitem-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menu .p-menuitem-text {\n    line-height: 1;\n}\n"),h.render=function(e,t,i,n,l,o){const a=s.resolveComponent("PVMenuitem"),r=s.resolveComponent("Portal");return s.openBlock(),s.createBlock(r,{appendTo:i.appendTo,disabled:!i.popup},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:s.withCtx((()=>[!i.popup||l.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.containerRef,id:l.id,class:o.containerClass},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))}),[e.$slots.start?(s.openBlock(),s.createElementBlock("div",b,[s.renderSlot(e.$slots,"start")])):s.createCommentVNode("",!0),s.createElementVNode("ul",{ref:o.listRef,id:l.id+"_list",class:"p-menu-list p-reset",role:"menu",tabindex:i.tabindex,"aria-activedescendant":l.focused?o.focusedOptionId:void 0,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:t[0]||(t[0]=(...e)=>o.onListFocus&&o.onListFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>o.onListBlur&&o.onListBlur(...e)),onKeydown:t[2]||(t[2]=(...e)=>o.onListKeyDown&&o.onListKeyDown(...e))},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.model,((t,n)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:o.label(t)+n.toString()},[t.items&&o.visible(t)&&!t.separator?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[t.items?(s.openBlock(),s.createElementBlock("li",{key:0,id:l.id+"_"+n,class:"p-submenu-header",role:"none"},[s.renderSlot(e.$slots,"item",{item:t},(()=>[s.createTextVNode(s.toDisplayString(o.label(t)),1)]))],8,v)):s.createCommentVNode("",!0),(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(t.items,((r,c)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:r.label+n+"_"+c},[o.visible(r)&&!r.separator?(s.openBlock(),s.createBlock(a,{key:0,id:l.id+"_"+n+"_"+c,item:r,templates:e.$slots,exact:i.exact,focusedOptionId:o.focusedOptionId,onItemClick:o.itemClick},null,8,["id","item","templates","exact","focusedOptionId","onItemClick"])):o.visible(r)&&r.separator?(s.openBlock(),s.createElementBlock("li",{key:"separator"+n+c,class:s.normalizeClass(o.separatorClass(t)),style:s.normalizeStyle(r.style),role:"separator"},null,6)):s.createCommentVNode("",!0)],64)))),128))],64)):o.visible(t)&&t.separator?(s.openBlock(),s.createElementBlock("li",{key:"separator"+n.toString(),class:s.normalizeClass(o.separatorClass(t)),style:s.normalizeStyle(t.style),role:"separator"},null,6)):(s.openBlock(),s.createBlock(a,{key:o.label(t)+n.toString(),id:l.id+"_"+n,item:t,templates:e.$slots,exact:i.exact,focusedOptionId:o.focusedOptionId,onItemClick:o.itemClick},null,8,["id","item","templates","exact","focusedOptionId","onItemClick"]))],64)))),128))],40,f),e.$slots.end?(s.openBlock(),s.createElementBlock("div",y,[s.renderSlot(e.$slots,"end")])):s.createCommentVNode("",!0)],16,k)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo","disabled"])},h}(primevue.overlayeventbus,primevue.portal,primevue.utils,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.menu=function(e,t,i,n,s,o){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e),a=l(t),d=l(i),c=l(s),p={name:"Menuitem",extends:r.default,inheritAttrs:!1,emits:["item-click"],props:{item:null,templates:null,exact:null,id:null,focusedOptionId:null},methods:{getItemProp:(e,t)=>e&&e.item?n.ObjectUtils.getItemValue(e.item[t]):void 0,getPTOptions(e){return this.ptm(e,{context:{focused:this.isItemFocused()}})},isItemFocused(){return this.focusedOptionId===this.id},onItemActionClick(e,t){t&&t(e)},onItemClick(e){const t=this.getItemProp(this.item,"command");t&&t({originalEvent:e,item:this.item.item}),this.$emit("item-click",{originalEvent:e,item:this.item,id:this.id})},containerClass(){return["p-menuitem",this.item.class,{"p-focus":this.id===this.focusedOptionId,"p-disabled":this.disabled()}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label}},computed:{iconClass(){return["p-menuitem-icon",this.item.icon]}},directives:{ripple:c.default}};const m=["id","aria-label","aria-disabled"],u=["href","onClick"],h=["href","target"];p.render=function(e,t,i,n,s,l){const r=o.resolveComponent("router-link"),a=o.resolveDirective("ripple");return l.visible()?(o.openBlock(),o.createElementBlock("li",o.mergeProps({key:0,id:i.id,class:l.containerClass(),role:"menuitem",style:i.item.style,"aria-label":l.label(),"aria-disabled":l.disabled()},l.getPTOptions("menuitem")),[o.createElementVNode("div",o.mergeProps({class:"p-menuitem-content",onClick:t[0]||(t[0]=e=>l.onItemClick(e))},l.getPTOptions("content")),[i.templates.item?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.templates.item),{key:1,item:i.item},null,8,["item"])):(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[i.item.to&&!l.disabled()?(o.openBlock(),o.createBlock(r,{key:0,to:i.item.to,custom:""},{default:o.withCtx((({navigate:e,href:t,isActive:n,isExactActive:s})=>[o.withDirectives((o.openBlock(),o.createElementBlock("a",o.mergeProps({href:t,class:l.linkClass({isActive:n,isExactActive:s}),tabindex:"-1","aria-hidden":"true",onClick:t=>l.onItemActionClick(t,e)},l.getPTOptions("action")),[i.templates.itemicon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.templates.itemicon),{key:0,item:i.item,class:o.normalizeClass(l.iconClass)},null,8,["item","class"])):i.item.icon?(o.openBlock(),o.createElementBlock("span",o.mergeProps({key:1,class:l.iconClass},l.getPTOptions("icon")),null,16)):o.createCommentVNode("",!0),o.createElementVNode("span",o.mergeProps({class:"p-menuitem-text"},l.getPTOptions("label")),o.toDisplayString(l.label()),17)],16,u)),[[a]])])),_:1},8,["to"])):o.withDirectives((o.openBlock(),o.createElementBlock("a",o.mergeProps({key:1,href:i.item.url,class:l.linkClass(),target:i.item.target,tabindex:"-1","aria-hidden":"true"},l.getPTOptions("action")),[i.templates.itemicon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.templates.itemicon),{key:0,item:i.item,class:o.normalizeClass(l.iconClass)},null,8,["item","class"])):i.item.icon?(o.openBlock(),o.createElementBlock("span",o.mergeProps({key:1,class:l.iconClass},l.getPTOptions("icon")),null,16)):o.createCommentVNode("",!0),o.createElementVNode("span",o.mergeProps({class:"p-menuitem-text"},l.getPTOptions("label")),o.toDisplayString(l.label()),17)],16,h)),[[a]])],64))],16)],16,m)):o.createCommentVNode("",!0)};var b={name:"Menu",extends:r.default,inheritAttrs:!1,emits:["show","hide","focus","blur"],props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},data(){return{id:this.$attrs.id,overlayVisible:!1,focused:!1,focusedOptionIndex:-1,selectedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||n.UniqueComponentId()}},target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,list:null,mounted(){this.id=this.id||n.UniqueComponentId(),this.popup||(this.bindResizeListener(),this.bindOutsideClickListener())},beforeUnmount(){this.unbindResizeListener(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.target=null,this.container&&this.autoZIndex&&n.ZIndexUtils.clear(this.container),this.container=null},methods:{itemClick(e){const t=e.item;this.disabled(t)||(t.command&&t.command(e),t.to&&e.navigate&&e.navigate(e.originalEvent),this.overlayVisible&&this.hide(),this.popup||this.focusedOptionIndex===e.id||(this.focusedOptionIndex=e.id))},onListFocus(e){this.focused=!0,this.popup||(-1!==this.selectedOptionIndex?(this.changeFocusedOptionIndex(this.selectedOptionIndex),this.selectedOptionIndex=-1):this.changeFocusedOptionIndex(0)),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Enter":this.onEnterKey(e);break;case"Space":this.onSpaceKey(e);break;case"Escape":this.popup&&(n.DomHandler.focus(this.target),this.hide());case"Tab":this.overlayVisible&&this.hide()}},onArrowDownKey(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},onArrowUpKey(e){if(e.altKey&&this.popup)n.DomHandler.focus(this.target),this.hide(),e.preventDefault();else{const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()}},onHomeKey(e){this.changeFocusedOptionIndex(0),e.preventDefault()},onEndKey(e){this.changeFocusedOptionIndex(n.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)").length-1),e.preventDefault()},onEnterKey(e){const t=n.DomHandler.findSingle(this.list,`li[id="${this.focusedOptionIndex}"]`),i=t&&n.DomHandler.findSingle(t,".p-menuitem-link");this.popup&&n.DomHandler.focus(this.target),i?i.click():t&&t.click(),e.preventDefault()},onSpaceKey(e){this.onEnterKey(e)},findNextOptionIndex(e){const t=[...n.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t+1:0},findPrevOptionIndex(e){const t=[...n.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t-1:0},changeFocusedOptionIndex(e){const t=n.DomHandler.find(this.container,"li.p-menuitem:not(.p-disabled)");let i=e>=t.length?t.length-1:e<0?0:e;i>-1&&(this.focusedOptionIndex=t[i].getAttribute("id"))},toggle(e){this.overlayVisible?this.hide():this.show(e)},show(e){this.overlayVisible=!0,this.target=e.currentTarget},hide(){this.overlayVisible=!1,this.target=null},onEnter(e){this.alignOverlay(),this.bindOutsideClickListener(),this.bindResizeListener(),this.bindScrollListener(),this.autoZIndex&&n.ZIndexUtils.set("menu",e,this.baseZIndex+this.$primevue.config.zIndex.menu),this.popup&&(n.DomHandler.focus(this.list),this.changeFocusedOptionIndex(0)),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.unbindScrollListener(),this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&n.ZIndexUtils.clear(e)},alignOverlay(){n.DomHandler.absolutePosition(this.container,this.target),this.container.style.minWidth=n.DomHandler.getOuterWidth(this.target)+"px"},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{const t=this.container&&!this.container.contains(e.target),i=!(this.target&&(this.target===e.target||this.target.contains(e.target)));this.overlayVisible&&t&&i?this.hide():!this.popup&&t&&i&&(this.focusedOptionIndex=-1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new n.ConnectedOverlayScrollHandler(this.target,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!n.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,separatorClass:e=>["p-menuitem-separator",e.class],onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.target})},containerRef(e){this.container=e},listRef(e){this.list=e}},computed:{containerClass(){return["p-menu p-component",{"p-menu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{PVMenuitem:p,Portal:d.default}};const f=["id"],k=["id","tabindex","aria-activedescendant","aria-label","aria-labelledby"],v=["id"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-menu-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-menu ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menu .p-menuitem-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menu .p-menuitem-text {\n    line-height: 1;\n}\n"),b.render=function(e,t,i,n,s,l){const r=o.resolveComponent("PVMenuitem"),a=o.resolveComponent("Portal");return o.openBlock(),o.createBlock(a,{appendTo:i.appendTo,disabled:!i.popup},{default:o.withCtx((()=>[o.createVNode(o.Transition,{name:"p-connected-overlay",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:o.withCtx((()=>[!i.popup||s.overlayVisible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:l.containerRef,id:s.id,class:l.containerClass,onClick:t[3]||(t[3]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))},{...e.$attrs,...e.ptm("root")}),[e.$slots.start?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,class:"p-menu-start"},e.ptm("start")),[o.renderSlot(e.$slots,"start")],16)):o.createCommentVNode("",!0),o.createElementVNode("ul",o.mergeProps({ref:l.listRef,id:s.id+"_list",class:"p-menu-list p-reset",role:"menu",tabindex:i.tabindex,"aria-activedescendant":s.focused?l.focusedOptionId:void 0,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:t[0]||(t[0]=(...e)=>l.onListFocus&&l.onListFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>l.onListBlur&&l.onListBlur(...e)),onKeydown:t[2]||(t[2]=(...e)=>l.onListKeyDown&&l.onListKeyDown(...e))},e.ptm("menu")),[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.model,((t,n)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:l.label(t)+n.toString()},[t.items&&l.visible(t)&&!t.separator?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[t.items?(o.openBlock(),o.createElementBlock("li",o.mergeProps({key:0,id:s.id+"_"+n,class:"p-submenu-header",role:"none"},e.ptm("submenuHeader")),[o.renderSlot(e.$slots,"item",{item:t},(()=>[o.createTextVNode(o.toDisplayString(l.label(t)),1)]))],16,v)):o.createCommentVNode("",!0),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(t.items,((a,d)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:a.label+n+"_"+d},[l.visible(a)&&!a.separator?(o.openBlock(),o.createBlock(r,{key:0,id:s.id+"_"+n+"_"+d,item:a,templates:e.$slots,exact:i.exact,focusedOptionId:l.focusedOptionId,onItemClick:l.itemClick,pt:e.pt},null,8,["id","item","templates","exact","focusedOptionId","onItemClick","pt"])):l.visible(a)&&a.separator?(o.openBlock(),o.createElementBlock("li",o.mergeProps({key:"separator"+n+d,class:l.separatorClass(t),style:a.style,role:"separator"},e.ptm("separator")),null,16)):o.createCommentVNode("",!0)],64)))),128))],64)):l.visible(t)&&t.separator?(o.openBlock(),o.createElementBlock("li",o.mergeProps({key:"separator"+n.toString(),class:l.separatorClass(t),style:t.style,role:"separator"},e.ptm("separator")),null,16)):(o.openBlock(),o.createBlock(r,{key:l.label(t)+n.toString(),id:s.id+"_"+n,item:t,templates:e.$slots,exact:i.exact,focusedOptionId:l.focusedOptionId,onItemClick:l.itemClick,pt:e.pt},null,8,["id","item","templates","exact","focusedOptionId","onItemClick","pt"]))],64)))),128))],16,k),e.$slots.end?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:1,class:"p-menu-end"},e.ptm("end")),[o.renderSlot(e.$slots,"end")],16)):o.createCommentVNode("",!0)],16,f)):o.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo","disabled"])},b}(primevue.basecomponent,primevue.overlayeventbus,primevue.portal,primevue.utils,primevue.ripple,Vue);

package/menubar/Menubar.d.ts

@@ -11,6 +11,147 @@ import { ButtonHTMLAttributes, VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type MenubarPassThroughOptionType = MenubarPassThroughAttributes | ((options: MenubarPassThroughMethodOptions) => MenubarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenubarPassThroughMethodOptions {
+    props: MenubarProps;
+    state: MenubarState;
+    context: MenubarContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenubarProps.pt}
+ */
+export interface MenubarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuicon?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mobile popup menu button's DOM element.
+     */
+    button?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mobile popup menu button icon's DOM element.
+     */
+    popupIcon?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MenubarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenubarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface MenubarFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in Menubar component.
+ */
+export interface MenubarState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current mobile menu active state as a boolean.
+     * @defaultValue false
+     */
+    mobileActive: boolean;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {MenubarFocusedItemInfo}
+     */
+    focusedItemInfo: MenubarFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {MenubarFocusedItemInfo}
+     */
+    activeItemPath: MenubarFocusedItemInfo[];
+}
+
+/**
+ * Defines current options in Menubar component.
+ */
+export interface MenubarContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in Menubar component.
  */
@@ -36,6 +177,11 @@ export interface MenubarProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenubarPassThroughOptions}
+     */
+    pt?: MenubarPassThroughOptions;
 }
 
 /**

package/menubar/Menubar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :ref="containerRef" :class="containerClass">
-        <div v-if="$slots.start" class="p-menubar-start">
+    <div :ref="containerRef" :class="containerClass" v-bind="ptm('root')">
+        <div v-if="$slots.start" class="p-menubar-start" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
         <a
@@ -15,10 +15,10 @@
             :aria-label="$primevue.config.locale.aria.navigation"
             @click="menuButtonClick($event)"
             @keydown="menuButtonKeydown($event)"
-            v-bind="buttonProps"
+            v-bind="{ ...buttonProps, ...ptm('button') }"
         >
             <slot name="popupicon">
-                <BarsIcon />
+                <BarsIcon v-bind="ptm('popupIcon')" />
             </slot>
         </a>
         <MenubarSub
@@ -39,25 +39,28 @@
             :level="0"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
+            :pt="pt"
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
             @item-click="onItemClick"
             @item-mouseenter="onItemMouseEnter"
         />
-        <div v-if="$slots.end" class="p-menubar-end">
+        <div v-if="$slots.end" class="p-menubar-end" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import BarsIcon from 'primevue/icons/bars';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import MenubarSub from './MenubarSub.vue';
 
 export default {
     name: 'Menubar',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         model: {