primevue 3.15.0 → 3.16.2

package/menubar/menubar.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e,ZIndexUtils as t}from"primevue/utils";import n from"primevue/ripple";import{resolveComponent as i,resolveDirective as l,openBlock as s,createElementBlock as o,normalizeClass as a,Fragment as r,renderList as m,normalizeStyle as c,createBlock as u,withCtx as p,withDirectives as d,createElementVNode as b,toDisplayString as h,createCommentVNode as v,resolveDynamicComponent as f,renderSlot as k,createVNode as y}from"vue";var x={name:"MenubarSub",emits:["keydown-item","leaf-click"],props:{model:{type:Array,default:null},root:{type:Boolean,default:!1},popup:{type:Boolean,default:!1},parentActive:{type:Boolean,default:!1},mobileActive:{type:Boolean,default:!1},template:{type:Function,default:null},exact:{type:Boolean,default:!0}},documentClickListener:null,watch:{parentActive(e){e||(this.activeItem=null)}},data:()=>({activeItem:null}),updated(){this.root&&this.activeItem&&this.bindDocumentClickListener()},beforeUnmount(){this.unbindDocumentClickListener()},methods:{onItemMouseEnter(e,t){this.disabled(t)||this.mobileActive?e.preventDefault():this.root?(this.activeItem||this.popup)&&(this.activeItem=t):this.activeItem=t},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.items&&(this.activeItem&&t===this.activeItem?this.activeItem=null:this.activeItem=t),t.items||this.onLeafClick(),t.to&&n&&n(e))},onLeafClick(){this.activeItem=null,this.$emit("leaf-click")},onItemKeyDown(e,t){let n=e.currentTarget.parentElement;switch(e.which){case 40:this.root?t.items&&this.expandSubmenu(t,n):this.navigateToNextItem(n),e.preventDefault();break;case 38:this.root||this.navigateToPrevItem(n),e.preventDefault();break;case 39:if(this.root){var i=this.findNextItem(n);i&&i.children[0].focus()}else t.items&&this.expandSubmenu(t,n);e.preventDefault();break;case 37:this.root&&this.navigateToPrevItem(n),e.preventDefault()}this.$emit("keydown-item",{originalEvent:e,element:n})},onChildItemKeyDown(e){this.root?38===e.originalEvent.which&&null==e.element.previousElementSibling&&this.collapseMenu(e.element):37===e.originalEvent.which&&this.collapseMenu(e.element)},findNextItem(t){let n=t.nextElementSibling;return n?e.hasClass(n,"p-disabled")||!e.hasClass(n,"p-menuitem")?this.findNextItem(n):n:null},findPrevItem(t){let n=t.previousElementSibling;return n?e.hasClass(n,"p-disabled")||!e.hasClass(n,"p-menuitem")?this.findPrevItem(n):n:null},expandSubmenu(e,t){this.activeItem=e,setTimeout((()=>{t.children[1].children[0].children[0].focus()}),50)},collapseMenu(e){this.activeItem=null,e.parentElement.previousElementSibling.focus()},navigateToNextItem(e){var t=this.findNextItem(e);t&&t.children[0].focus()},navigateToPrevItem(e){var t=this.findPrevItem(e);t&&t.children[0].focus()},getItemClass(e){return["p-menuitem",e.class,{"p-menuitem-active":this.activeItem===e}]},linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.$el&&!this.$el.contains(e.target)&&(this.activeItem=null,this.unbindDocumentClickListener())},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},getSubmenuIcon(){return["p-submenu-icon pi",{"pi-angle-right":!this.root,"pi-angle-down":this.root}]},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},computed:{containerClass(){return{"p-submenu-list":!this.root,"p-menubar-root-list":this.root}}},directives:{ripple:n}};const C=["role"],g=["onMouseenter"],I=["href","onClick","onKeydown"],L={class:"p-menuitem-text"},A=["href","target","aria-haspopup","aria-expanded","onClick","onKeydown","tabindex"],w={class:"p-menuitem-text"};x.render=function(e,t,n,k,y,x){const $=i("router-link"),E=i("MenubarSub",!0),D=l("ripple");return s(),o("ul",{class:a(x.containerClass),role:n.root?"menubar":"menu"},[(s(!0),o(r,null,m(n.model,((e,t)=>(s(),o(r,{key:x.label(e)+t.toString()},[x.visible(e)&&!e.separator?(s(),o("li",{key:0,role:"none",class:a(x.getItemClass(e)),style:c(e.style),onMouseenter:t=>x.onItemMouseEnter(t,e)},[n.template?(s(),u(f(n.template),{key:1,item:e},null,8,["item"])):(s(),o(r,{key:0},[e.to&&!x.disabled(e)?(s(),u($,{key:0,to:e.to,custom:""},{default:p((({navigate:t,href:n,isActive:i,isExactActive:l})=>[d((s(),o("a",{href:n,onClick:n=>x.onItemClick(n,e,t),class:a(x.linkClass(e,{isActive:i,isExactActive:l})),onKeydown:t=>x.onItemKeyDown(t,e),role:"menuitem"},[b("span",{class:a(["p-menuitem-icon",e.icon])},null,2),b("span",L,h(x.label(e)),1)],42,I)),[[D]])])),_:2},1032,["to"])):d((s(),o("a",{key:1,href:e.url,class:a(x.linkClass(e)),target:e.target,"aria-haspopup":null!=e.items,"aria-expanded":e===y.activeItem,onClick:t=>x.onItemClick(t,e),onKeydown:t=>x.onItemKeyDown(t,e),role:"menuitem",tabindex:x.disabled(e)?null:"0"},[b("span",{class:a(["p-menuitem-icon",e.icon])},null,2),b("span",w,h(x.label(e)),1),e.items?(s(),o("span",{key:0,class:a(x.getSubmenuIcon())},null,2)):v("",!0)],42,A)),[[D]])],64)),x.visible(e)&&e.items?(s(),u(E,{model:e.items,key:x.label(e)+"_sub_",mobileActive:n.mobileActive,onLeafClick:x.onLeafClick,onKeydownItem:x.onChildItemKeyDown,parentActive:e===y.activeItem,template:n.template,exact:n.exact},null,8,["model","mobileActive","onLeafClick","onKeydownItem","parentActive","template","exact"])):v("",!0)],46,g)):v("",!0),x.visible(e)&&e.separator?(s(),o("li",{class:a(["p-menu-separator",e.class]),style:c(e.style),key:"separator"+t.toString(),role:"separator"},null,6)):v("",!0)],64)))),128))],10,C)};var $={name:"Menubar",props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0}},outsideClickListener:null,data:()=>({mobileActive:!1}),beforeUnmount(){this.mobileActive=!1,this.unbindOutsideClickListener(),this.$refs.rootmenu&&this.$refs.rootmenu.$el&&t.clear(this.$refs.rootmenu.$el)},methods:{toggle(e){this.mobileActive?(this.mobileActive=!1,t.clear(this.$refs.rootmenu.$el)):(this.mobileActive=!0,t.set("menu",this.$refs.rootmenu.$el,this.$primevue.config.zIndex.menu)),this.bindOutsideClickListener(),e.preventDefault()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.mobileActive||this.$refs.rootmenu.$el===e.target||this.$refs.rootmenu.$el.contains(e.target)||this.$refs.menubutton===e.target||this.$refs.menubutton.contains(e.target)||(this.mobileActive=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},onLeafClick(){this.mobileActive=!1}},computed:{containerClass(){return["p-menubar p-component",{"p-menubar-mobile-active":this.mobileActive}]}},components:{MenubarSub:x}};const E={key:0,class:"p-menubar-start"},D=[b("i",{class:"pi pi-bars"},null,-1)],S={key:1,class:"p-menubar-end"};!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-menubar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menubar .p-menuitem-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menubar .p-menuitem-text {\n    line-height: 1;\n}\n.p-menubar .p-menuitem {\n    position: relative;\n}\n.p-menubar-root-list {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar-root-list > li ul {\n    display: none;\n    z-index: 1;\n}\n.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {\n    display: block;\n}\n.p-menubar .p-submenu-list {\n    display: none;\n    position: absolute;\n    z-index: 1;\n}\n.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {\n    display: block;\n    left: 100%;\n    top: 0;\n}\n.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {\n    margin-left: auto;\n}\n.p-menubar .p-menubar-custom,\n.p-menubar .p-menubar-end {\n    margin-left: auto;\n    -ms-flex-item-align: center;\n        align-self: center;\n}\n.p-menubar-button {\n    display: none;\n    cursor: pointer;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    text-decoration: none;\n}\n"),$.render=function(e,t,n,l,r,m){const c=i("MenubarSub");return s(),o("div",{class:a(m.containerClass)},[e.$slots.start?(s(),o("div",E,[k(e.$slots,"start")])):v("",!0),b("a",{ref:"menubutton",tabindex:"0",class:"p-menubar-button",onClick:t[0]||(t[0]=e=>m.toggle(e))},D,512),y(c,{ref:"rootmenu",model:n.model,root:!0,mobileActive:r.mobileActive,onLeafClick:m.onLeafClick,template:e.$slots.item,exact:n.exact},null,8,["model","mobileActive","onLeafClick","template","exact"]),e.$slots.end?(s(),o("div",S,[k(e.$slots,"end")])):v("",!0)],2)};export{$ as default};
+import{DomHandler as e,ZIndexUtils as t}from"primevue/utils";import n from"primevue/ripple";import{resolveComponent as i,resolveDirective as l,openBlock as s,createElementBlock as o,normalizeClass as a,Fragment as r,renderList as m,normalizeStyle as c,createBlock as u,withCtx as p,withDirectives as d,createCommentVNode as b,createElementVNode as h,toDisplayString as v,resolveDynamicComponent as f,renderSlot as k,createVNode as y}from"vue";var x={name:"MenubarSub",emits:["keydown-item","leaf-click"],props:{model:{type:Array,default:null},root:{type:Boolean,default:!1},popup:{type:Boolean,default:!1},parentActive:{type:Boolean,default:!1},mobileActive:{type:Boolean,default:!1},template:{type:Function,default:null},exact:{type:Boolean,default:!0}},documentClickListener:null,watch:{parentActive(e){e||(this.activeItem=null)}},data:()=>({activeItem:null}),updated(){this.root&&this.activeItem&&this.bindDocumentClickListener()},beforeUnmount(){this.unbindDocumentClickListener()},methods:{onItemMouseEnter(e,t){this.disabled(t)||this.mobileActive?e.preventDefault():this.root?(this.activeItem||this.popup)&&(this.activeItem=t):this.activeItem=t},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.items&&(this.activeItem&&t===this.activeItem?this.activeItem=null:this.activeItem=t),t.items||this.onLeafClick(),t.to&&n&&n(e))},onLeafClick(){this.activeItem=null,this.$emit("leaf-click")},onItemKeyDown(e,t){let n=e.currentTarget.parentElement;switch(e.which){case 40:this.root?t.items&&this.expandSubmenu(t,n):this.navigateToNextItem(n),e.preventDefault();break;case 38:this.root||this.navigateToPrevItem(n),e.preventDefault();break;case 39:if(this.root){var i=this.findNextItem(n);i&&i.children[0].focus()}else t.items&&this.expandSubmenu(t,n);e.preventDefault();break;case 37:this.root&&this.navigateToPrevItem(n),e.preventDefault()}this.$emit("keydown-item",{originalEvent:e,element:n})},onChildItemKeyDown(e){this.root?38===e.originalEvent.which&&null==e.element.previousElementSibling&&this.collapseMenu(e.element):37===e.originalEvent.which&&this.collapseMenu(e.element)},findNextItem(t){let n=t.nextElementSibling;return n?e.hasClass(n,"p-disabled")||!e.hasClass(n,"p-menuitem")?this.findNextItem(n):n:null},findPrevItem(t){let n=t.previousElementSibling;return n?e.hasClass(n,"p-disabled")||!e.hasClass(n,"p-menuitem")?this.findPrevItem(n):n:null},expandSubmenu(e,t){this.activeItem=e,setTimeout((()=>{t.children[1].children[0].children[0].focus()}),50)},collapseMenu(e){this.activeItem=null,e.parentElement.previousElementSibling.focus()},navigateToNextItem(e){var t=this.findNextItem(e);t&&t.children[0].focus()},navigateToPrevItem(e){var t=this.findPrevItem(e);t&&t.children[0].focus()},getItemClass(e){return["p-menuitem",e.class,{"p-menuitem-active":this.activeItem===e}]},linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.$el&&!this.$el.contains(e.target)&&(this.activeItem=null,this.unbindDocumentClickListener())},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},getSubmenuIcon(){return["p-submenu-icon pi",{"pi-angle-right":!this.root,"pi-angle-down":this.root}]},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},computed:{containerClass(){return{"p-submenu-list":!this.root,"p-menubar-root-list":this.root}}},directives:{ripple:n}};const C=["role"],g=["onMouseenter"],I=["href","onClick","onKeydown"],L={class:"p-menuitem-text"},A=["href","target","aria-haspopup","aria-expanded","onClick","onKeydown","tabindex"],w={class:"p-menuitem-text"};x.render=function(e,t,n,k,y,x){const $=i("router-link"),E=i("MenubarSub",!0),D=l("ripple");return s(),o("ul",{class:a(x.containerClass),role:n.root?"menubar":"menu"},[(s(!0),o(r,null,m(n.model,((e,t)=>(s(),o(r,{key:x.label(e)+t.toString()},[x.visible(e)&&!e.separator?(s(),o("li",{key:0,role:"none",class:a(x.getItemClass(e)),style:c(e.style),onMouseenter:t=>x.onItemMouseEnter(t,e)},[n.template?(s(),u(f(n.template),{key:1,item:e},null,8,["item"])):(s(),o(r,{key:0},[e.to&&!x.disabled(e)?(s(),u($,{key:0,to:e.to,custom:""},{default:p((({navigate:t,href:n,isActive:i,isExactActive:l})=>[d((s(),o("a",{href:n,onClick:n=>x.onItemClick(n,e,t),class:a(x.linkClass(e,{isActive:i,isExactActive:l})),onKeydown:t=>x.onItemKeyDown(t,e),role:"menuitem"},[e.icon?(s(),o("span",{key:0,class:a(["p-menuitem-icon",e.icon])},null,2)):b("",!0),h("span",L,v(x.label(e)),1)],42,I)),[[D]])])),_:2},1032,["to"])):d((s(),o("a",{key:1,href:e.url,class:a(x.linkClass(e)),target:e.target,"aria-haspopup":null!=e.items,"aria-expanded":e===y.activeItem,onClick:t=>x.onItemClick(t,e),onKeydown:t=>x.onItemKeyDown(t,e),role:"menuitem",tabindex:x.disabled(e)?null:"0"},[e.icon?(s(),o("span",{key:0,class:a(["p-menuitem-icon",e.icon])},null,2)):b("",!0),h("span",w,v(x.label(e)),1),e.items?(s(),o("span",{key:1,class:a(x.getSubmenuIcon())},null,2)):b("",!0)],42,A)),[[D]])],64)),x.visible(e)&&e.items?(s(),u(E,{model:e.items,key:x.label(e)+"_sub_",mobileActive:n.mobileActive,onLeafClick:x.onLeafClick,onKeydownItem:x.onChildItemKeyDown,parentActive:e===y.activeItem,template:n.template,exact:n.exact},null,8,["model","mobileActive","onLeafClick","onKeydownItem","parentActive","template","exact"])):b("",!0)],46,g)):b("",!0),x.visible(e)&&e.separator?(s(),o("li",{class:a(["p-menu-separator",e.class]),style:c(e.style),key:"separator"+t.toString(),role:"separator"},null,6)):b("",!0)],64)))),128))],10,C)};var $={name:"Menubar",props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0}},outsideClickListener:null,data:()=>({mobileActive:!1}),beforeUnmount(){this.mobileActive=!1,this.unbindOutsideClickListener(),this.$refs.rootmenu&&this.$refs.rootmenu.$el&&t.clear(this.$refs.rootmenu.$el)},methods:{toggle(e){this.mobileActive?(this.mobileActive=!1,t.clear(this.$refs.rootmenu.$el)):(this.mobileActive=!0,t.set("menu",this.$refs.rootmenu.$el,this.$primevue.config.zIndex.menu)),this.bindOutsideClickListener(),e.preventDefault()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.mobileActive||this.$refs.rootmenu.$el===e.target||this.$refs.rootmenu.$el.contains(e.target)||this.$refs.menubutton===e.target||this.$refs.menubutton.contains(e.target)||(this.mobileActive=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},onLeafClick(){this.mobileActive=!1}},computed:{containerClass(){return["p-menubar p-component",{"p-menubar-mobile-active":this.mobileActive}]}},components:{MenubarSub:x}};const E={key:0,class:"p-menubar-start"},D=[h("i",{class:"pi pi-bars"},null,-1)],S={key:1,class:"p-menubar-end"};!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-menubar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menubar .p-menuitem-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menubar .p-menuitem-text {\n    line-height: 1;\n}\n.p-menubar .p-menuitem {\n    position: relative;\n}\n.p-menubar-root-list {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar-root-list > li ul {\n    display: none;\n    z-index: 1;\n}\n.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {\n    display: block;\n}\n.p-menubar .p-submenu-list {\n    display: none;\n    position: absolute;\n    z-index: 1;\n}\n.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {\n    display: block;\n    left: 100%;\n    top: 0;\n}\n.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {\n    margin-left: auto;\n}\n.p-menubar .p-menubar-custom,\n.p-menubar .p-menubar-end {\n    margin-left: auto;\n    -ms-flex-item-align: center;\n        align-self: center;\n}\n.p-menubar-button {\n    display: none;\n    cursor: pointer;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    text-decoration: none;\n}\n"),$.render=function(e,t,n,l,r,m){const c=i("MenubarSub");return s(),o("div",{class:a(m.containerClass)},[e.$slots.start?(s(),o("div",E,[k(e.$slots,"start")])):b("",!0),h("a",{ref:"menubutton",tabindex:"0",class:"p-menubar-button",onClick:t[0]||(t[0]=e=>m.toggle(e))},D,512),y(c,{ref:"rootmenu",model:n.model,root:!0,mobileActive:r.mobileActive,onLeafClick:m.onLeafClick,template:e.$slots.item,exact:n.exact},null,8,["model","mobileActive","onLeafClick","template","exact"]),e.$slots.end?(s(),o("div",S,[k(e.$slots,"end")])):b("",!0)],2)};export{$ as default};

package/menubar/menubar.js

@@ -93,7 +93,7 @@ this.primevue.menubar = (function (utils, Ripple, vue) {
                     if (this.activeItem && item === this.activeItem)
                         this.activeItem = null;
                     else
-                       this.activeItem = item;
+                        this.activeItem = item;
                 }
 
                 if (!item.items) {
@@ -321,9 +321,12 @@ this.primevue.menubar = (function (utils, Ripple, vue) {
                                   onKeydown: $event => ($options.onItemKeyDown($event, item)),
                                   role: "menuitem"
                                 }, [
-                                  vue.createElementVNode("span", {
-                                    class: vue.normalizeClass(['p-menuitem-icon', item.icon])
-                                  }, null, 2),
+                                  (item.icon)
+                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        key: 0,
+                                        class: vue.normalizeClass(['p-menuitem-icon', item.icon])
+                                      }, null, 2))
+                                    : vue.createCommentVNode("", true),
                                   vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString($options.label(item)), 1)
                                 ], 42, _hoisted_3$1)), [
                                   [_directive_ripple]
@@ -343,13 +346,16 @@ this.primevue.menubar = (function (utils, Ripple, vue) {
                               role: "menuitem",
                               tabindex: $options.disabled(item) ? null : '0'
                             }, [
-                              vue.createElementVNode("span", {
-                                class: vue.normalizeClass(['p-menuitem-icon', item.icon])
-                              }, null, 2),
+                              (item.icon)
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 0,
+                                    class: vue.normalizeClass(['p-menuitem-icon', item.icon])
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
                               vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.label(item)), 1),
                               (item.items)
                                 ? (vue.openBlock(), vue.createElementBlock("span", {
-                                    key: 0,
+                                    key: 1,
                                     class: vue.normalizeClass($options.getSubmenuIcon())
                                   }, null, 2))
                                 : vue.createCommentVNode("", true)

package/menubar/menubar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.menubar=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"MenubarSub",emits:["keydown-item","leaf-click"],props:{model:{type:Array,default:null},root:{type:Boolean,default:!1},popup:{type:Boolean,default:!1},parentActive:{type:Boolean,default:!1},mobileActive:{type:Boolean,default:!1},template:{type:Function,default:null},exact:{type:Boolean,default:!0}},documentClickListener:null,watch:{parentActive(e){e||(this.activeItem=null)}},data:()=>({activeItem:null}),updated(){this.root&&this.activeItem&&this.bindDocumentClickListener()},beforeUnmount(){this.unbindDocumentClickListener()},methods:{onItemMouseEnter(e,t){this.disabled(t)||this.mobileActive?e.preventDefault():this.root?(this.activeItem||this.popup)&&(this.activeItem=t):this.activeItem=t},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.items&&(this.activeItem&&t===this.activeItem?this.activeItem=null:this.activeItem=t),t.items||this.onLeafClick(),t.to&&n&&n(e))},onLeafClick(){this.activeItem=null,this.$emit("leaf-click")},onItemKeyDown(e,t){let n=e.currentTarget.parentElement;switch(e.which){case 40:this.root?t.items&&this.expandSubmenu(t,n):this.navigateToNextItem(n),e.preventDefault();break;case 38:this.root||this.navigateToPrevItem(n),e.preventDefault();break;case 39:if(this.root){var i=this.findNextItem(n);i&&i.children[0].focus()}else t.items&&this.expandSubmenu(t,n);e.preventDefault();break;case 37:this.root&&this.navigateToPrevItem(n),e.preventDefault()}this.$emit("keydown-item",{originalEvent:e,element:n})},onChildItemKeyDown(e){this.root?38===e.originalEvent.which&&null==e.element.previousElementSibling&&this.collapseMenu(e.element):37===e.originalEvent.which&&this.collapseMenu(e.element)},findNextItem(t){let n=t.nextElementSibling;return n?e.DomHandler.hasClass(n,"p-disabled")||!e.DomHandler.hasClass(n,"p-menuitem")?this.findNextItem(n):n:null},findPrevItem(t){let n=t.previousElementSibling;return n?e.DomHandler.hasClass(n,"p-disabled")||!e.DomHandler.hasClass(n,"p-menuitem")?this.findPrevItem(n):n:null},expandSubmenu(e,t){this.activeItem=e,setTimeout((()=>{t.children[1].children[0].children[0].focus()}),50)},collapseMenu(e){this.activeItem=null,e.parentElement.previousElementSibling.focus()},navigateToNextItem(e){var t=this.findNextItem(e);t&&t.children[0].focus()},navigateToPrevItem(e){var t=this.findPrevItem(e);t&&t.children[0].focus()},getItemClass(e){return["p-menuitem",e.class,{"p-menuitem-active":this.activeItem===e}]},linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.$el&&!this.$el.contains(e.target)&&(this.activeItem=null,this.unbindDocumentClickListener())},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},getSubmenuIcon(){return["p-submenu-icon pi",{"pi-angle-right":!this.root,"pi-angle-down":this.root}]},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},computed:{containerClass(){return{"p-submenu-list":!this.root,"p-menubar-root-list":this.root}}},directives:{ripple:i(t).default}};const o=["role"],s=["onMouseenter"],a=["href","onClick","onKeydown"],r={class:"p-menuitem-text"},c=["href","target","aria-haspopup","aria-expanded","onClick","onKeydown","tabindex"],m={class:"p-menuitem-text"};l.render=function(e,t,i,l,u,d){const p=n.resolveComponent("router-link"),b=n.resolveComponent("MenubarSub",!0),h=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("ul",{class:n.normalizeClass(d.containerClass),role:i.root?"menubar":"menu"},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(i.model,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:d.label(e)+t.toString()},[d.visible(e)&&!e.separator?(n.openBlock(),n.createElementBlock("li",{key:0,role:"none",class:n.normalizeClass(d.getItemClass(e)),style:n.normalizeStyle(e.style),onMouseenter:t=>d.onItemMouseEnter(t,e)},[i.template?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.template),{key:1,item:e},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[e.to&&!d.disabled(e)?(n.openBlock(),n.createBlock(p,{key:0,to:e.to,custom:""},{default:n.withCtx((({navigate:t,href:i,isActive:l,isExactActive:o})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:i,onClick:n=>d.onItemClick(n,e,t),class:n.normalizeClass(d.linkClass(e,{isActive:l,isExactActive:o})),onKeydown:t=>d.onItemKeyDown(t,e),role:"menuitem"},[n.createElementVNode("span",{class:n.normalizeClass(["p-menuitem-icon",e.icon])},null,2),n.createElementVNode("span",r,n.toDisplayString(d.label(e)),1)],42,a)),[[h]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:e.url,class:n.normalizeClass(d.linkClass(e)),target:e.target,"aria-haspopup":null!=e.items,"aria-expanded":e===u.activeItem,onClick:t=>d.onItemClick(t,e),onKeydown:t=>d.onItemKeyDown(t,e),role:"menuitem",tabindex:d.disabled(e)?null:"0"},[n.createElementVNode("span",{class:n.normalizeClass(["p-menuitem-icon",e.icon])},null,2),n.createElementVNode("span",m,n.toDisplayString(d.label(e)),1),e.items?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(d.getSubmenuIcon())},null,2)):n.createCommentVNode("",!0)],42,c)),[[h]])],64)),d.visible(e)&&e.items?(n.openBlock(),n.createBlock(b,{model:e.items,key:d.label(e)+"_sub_",mobileActive:i.mobileActive,onLeafClick:d.onLeafClick,onKeydownItem:d.onChildItemKeyDown,parentActive:e===u.activeItem,template:i.template,exact:i.exact},null,8,["model","mobileActive","onLeafClick","onKeydownItem","parentActive","template","exact"])):n.createCommentVNode("",!0)],46,s)):n.createCommentVNode("",!0),d.visible(e)&&e.separator?(n.openBlock(),n.createElementBlock("li",{class:n.normalizeClass(["p-menu-separator",e.class]),style:n.normalizeStyle(e.style),key:"separator"+t.toString(),role:"separator"},null,6)):n.createCommentVNode("",!0)],64)))),128))],10,o)};var u={name:"Menubar",props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0}},outsideClickListener:null,data:()=>({mobileActive:!1}),beforeUnmount(){this.mobileActive=!1,this.unbindOutsideClickListener(),this.$refs.rootmenu&&this.$refs.rootmenu.$el&&e.ZIndexUtils.clear(this.$refs.rootmenu.$el)},methods:{toggle(t){this.mobileActive?(this.mobileActive=!1,e.ZIndexUtils.clear(this.$refs.rootmenu.$el)):(this.mobileActive=!0,e.ZIndexUtils.set("menu",this.$refs.rootmenu.$el,this.$primevue.config.zIndex.menu)),this.bindOutsideClickListener(),t.preventDefault()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.mobileActive||this.$refs.rootmenu.$el===e.target||this.$refs.rootmenu.$el.contains(e.target)||this.$refs.menubutton===e.target||this.$refs.menubutton.contains(e.target)||(this.mobileActive=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},onLeafClick(){this.mobileActive=!1}},computed:{containerClass(){return["p-menubar p-component",{"p-menubar-mobile-active":this.mobileActive}]}},components:{MenubarSub:l}};const d={key:0,class:"p-menubar-start"},p=[n.createElementVNode("i",{class:"pi pi-bars"},null,-1)],b={key:1,class:"p-menubar-end"};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-menubar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menubar .p-menuitem-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menubar .p-menuitem-text {\n    line-height: 1;\n}\n.p-menubar .p-menuitem {\n    position: relative;\n}\n.p-menubar-root-list {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar-root-list > li ul {\n    display: none;\n    z-index: 1;\n}\n.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {\n    display: block;\n}\n.p-menubar .p-submenu-list {\n    display: none;\n    position: absolute;\n    z-index: 1;\n}\n.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {\n    display: block;\n    left: 100%;\n    top: 0;\n}\n.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {\n    margin-left: auto;\n}\n.p-menubar .p-menubar-custom,\n.p-menubar .p-menubar-end {\n    margin-left: auto;\n    -ms-flex-item-align: center;\n        align-self: center;\n}\n.p-menubar-button {\n    display: none;\n    cursor: pointer;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    text-decoration: none;\n}\n"),u.render=function(e,t,i,l,o,s){const a=n.resolveComponent("MenubarSub");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(s.containerClass)},[e.$slots.start?(n.openBlock(),n.createElementBlock("div",d,[n.renderSlot(e.$slots,"start")])):n.createCommentVNode("",!0),n.createElementVNode("a",{ref:"menubutton",tabindex:"0",class:"p-menubar-button",onClick:t[0]||(t[0]=e=>s.toggle(e))},p,512),n.createVNode(a,{ref:"rootmenu",model:i.model,root:!0,mobileActive:o.mobileActive,onLeafClick:s.onLeafClick,template:e.$slots.item,exact:i.exact},null,8,["model","mobileActive","onLeafClick","template","exact"]),e.$slots.end?(n.openBlock(),n.createElementBlock("div",b,[n.renderSlot(e.$slots,"end")])):n.createCommentVNode("",!0)],2)},u}(primevue.utils,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.menubar=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"MenubarSub",emits:["keydown-item","leaf-click"],props:{model:{type:Array,default:null},root:{type:Boolean,default:!1},popup:{type:Boolean,default:!1},parentActive:{type:Boolean,default:!1},mobileActive:{type:Boolean,default:!1},template:{type:Function,default:null},exact:{type:Boolean,default:!0}},documentClickListener:null,watch:{parentActive(e){e||(this.activeItem=null)}},data:()=>({activeItem:null}),updated(){this.root&&this.activeItem&&this.bindDocumentClickListener()},beforeUnmount(){this.unbindDocumentClickListener()},methods:{onItemMouseEnter(e,t){this.disabled(t)||this.mobileActive?e.preventDefault():this.root?(this.activeItem||this.popup)&&(this.activeItem=t):this.activeItem=t},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.items&&(this.activeItem&&t===this.activeItem?this.activeItem=null:this.activeItem=t),t.items||this.onLeafClick(),t.to&&n&&n(e))},onLeafClick(){this.activeItem=null,this.$emit("leaf-click")},onItemKeyDown(e,t){let n=e.currentTarget.parentElement;switch(e.which){case 40:this.root?t.items&&this.expandSubmenu(t,n):this.navigateToNextItem(n),e.preventDefault();break;case 38:this.root||this.navigateToPrevItem(n),e.preventDefault();break;case 39:if(this.root){var i=this.findNextItem(n);i&&i.children[0].focus()}else t.items&&this.expandSubmenu(t,n);e.preventDefault();break;case 37:this.root&&this.navigateToPrevItem(n),e.preventDefault()}this.$emit("keydown-item",{originalEvent:e,element:n})},onChildItemKeyDown(e){this.root?38===e.originalEvent.which&&null==e.element.previousElementSibling&&this.collapseMenu(e.element):37===e.originalEvent.which&&this.collapseMenu(e.element)},findNextItem(t){let n=t.nextElementSibling;return n?e.DomHandler.hasClass(n,"p-disabled")||!e.DomHandler.hasClass(n,"p-menuitem")?this.findNextItem(n):n:null},findPrevItem(t){let n=t.previousElementSibling;return n?e.DomHandler.hasClass(n,"p-disabled")||!e.DomHandler.hasClass(n,"p-menuitem")?this.findPrevItem(n):n:null},expandSubmenu(e,t){this.activeItem=e,setTimeout((()=>{t.children[1].children[0].children[0].focus()}),50)},collapseMenu(e){this.activeItem=null,e.parentElement.previousElementSibling.focus()},navigateToNextItem(e){var t=this.findNextItem(e);t&&t.children[0].focus()},navigateToPrevItem(e){var t=this.findPrevItem(e);t&&t.children[0].focus()},getItemClass(e){return["p-menuitem",e.class,{"p-menuitem-active":this.activeItem===e}]},linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.$el&&!this.$el.contains(e.target)&&(this.activeItem=null,this.unbindDocumentClickListener())},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},getSubmenuIcon(){return["p-submenu-icon pi",{"pi-angle-right":!this.root,"pi-angle-down":this.root}]},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},computed:{containerClass(){return{"p-submenu-list":!this.root,"p-menubar-root-list":this.root}}},directives:{ripple:i(t).default}};const o=["role"],s=["onMouseenter"],a=["href","onClick","onKeydown"],r={class:"p-menuitem-text"},c=["href","target","aria-haspopup","aria-expanded","onClick","onKeydown","tabindex"],m={class:"p-menuitem-text"};l.render=function(e,t,i,l,u,d){const p=n.resolveComponent("router-link"),b=n.resolveComponent("MenubarSub",!0),h=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("ul",{class:n.normalizeClass(d.containerClass),role:i.root?"menubar":"menu"},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(i.model,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:d.label(e)+t.toString()},[d.visible(e)&&!e.separator?(n.openBlock(),n.createElementBlock("li",{key:0,role:"none",class:n.normalizeClass(d.getItemClass(e)),style:n.normalizeStyle(e.style),onMouseenter:t=>d.onItemMouseEnter(t,e)},[i.template?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.template),{key:1,item:e},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[e.to&&!d.disabled(e)?(n.openBlock(),n.createBlock(p,{key:0,to:e.to,custom:""},{default:n.withCtx((({navigate:t,href:i,isActive:l,isExactActive:o})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:i,onClick:n=>d.onItemClick(n,e,t),class:n.normalizeClass(d.linkClass(e,{isActive:l,isExactActive:o})),onKeydown:t=>d.onItemKeyDown(t,e),role:"menuitem"},[e.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-menuitem-icon",e.icon])},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",r,n.toDisplayString(d.label(e)),1)],42,a)),[[h]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:e.url,class:n.normalizeClass(d.linkClass(e)),target:e.target,"aria-haspopup":null!=e.items,"aria-expanded":e===u.activeItem,onClick:t=>d.onItemClick(t,e),onKeydown:t=>d.onItemKeyDown(t,e),role:"menuitem",tabindex:d.disabled(e)?null:"0"},[e.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-menuitem-icon",e.icon])},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",m,n.toDisplayString(d.label(e)),1),e.items?(n.openBlock(),n.createElementBlock("span",{key:1,class:n.normalizeClass(d.getSubmenuIcon())},null,2)):n.createCommentVNode("",!0)],42,c)),[[h]])],64)),d.visible(e)&&e.items?(n.openBlock(),n.createBlock(b,{model:e.items,key:d.label(e)+"_sub_",mobileActive:i.mobileActive,onLeafClick:d.onLeafClick,onKeydownItem:d.onChildItemKeyDown,parentActive:e===u.activeItem,template:i.template,exact:i.exact},null,8,["model","mobileActive","onLeafClick","onKeydownItem","parentActive","template","exact"])):n.createCommentVNode("",!0)],46,s)):n.createCommentVNode("",!0),d.visible(e)&&e.separator?(n.openBlock(),n.createElementBlock("li",{class:n.normalizeClass(["p-menu-separator",e.class]),style:n.normalizeStyle(e.style),key:"separator"+t.toString(),role:"separator"},null,6)):n.createCommentVNode("",!0)],64)))),128))],10,o)};var u={name:"Menubar",props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0}},outsideClickListener:null,data:()=>({mobileActive:!1}),beforeUnmount(){this.mobileActive=!1,this.unbindOutsideClickListener(),this.$refs.rootmenu&&this.$refs.rootmenu.$el&&e.ZIndexUtils.clear(this.$refs.rootmenu.$el)},methods:{toggle(t){this.mobileActive?(this.mobileActive=!1,e.ZIndexUtils.clear(this.$refs.rootmenu.$el)):(this.mobileActive=!0,e.ZIndexUtils.set("menu",this.$refs.rootmenu.$el,this.$primevue.config.zIndex.menu)),this.bindOutsideClickListener(),t.preventDefault()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.mobileActive||this.$refs.rootmenu.$el===e.target||this.$refs.rootmenu.$el.contains(e.target)||this.$refs.menubutton===e.target||this.$refs.menubutton.contains(e.target)||(this.mobileActive=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},onLeafClick(){this.mobileActive=!1}},computed:{containerClass(){return["p-menubar p-component",{"p-menubar-mobile-active":this.mobileActive}]}},components:{MenubarSub:l}};const d={key:0,class:"p-menubar-start"},p=[n.createElementVNode("i",{class:"pi pi-bars"},null,-1)],b={key:1,class:"p-menubar-end"};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-menubar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menubar .p-menuitem-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menubar .p-menuitem-text {\n    line-height: 1;\n}\n.p-menubar .p-menuitem {\n    position: relative;\n}\n.p-menubar-root-list {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-menubar-root-list > li ul {\n    display: none;\n    z-index: 1;\n}\n.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {\n    display: block;\n}\n.p-menubar .p-submenu-list {\n    display: none;\n    position: absolute;\n    z-index: 1;\n}\n.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {\n    display: block;\n    left: 100%;\n    top: 0;\n}\n.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {\n    margin-left: auto;\n}\n.p-menubar .p-menubar-custom,\n.p-menubar .p-menubar-end {\n    margin-left: auto;\n    -ms-flex-item-align: center;\n        align-self: center;\n}\n.p-menubar-button {\n    display: none;\n    cursor: pointer;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    text-decoration: none;\n}\n"),u.render=function(e,t,i,l,o,s){const a=n.resolveComponent("MenubarSub");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(s.containerClass)},[e.$slots.start?(n.openBlock(),n.createElementBlock("div",d,[n.renderSlot(e.$slots,"start")])):n.createCommentVNode("",!0),n.createElementVNode("a",{ref:"menubutton",tabindex:"0",class:"p-menubar-button",onClick:t[0]||(t[0]=e=>s.toggle(e))},p,512),n.createVNode(a,{ref:"rootmenu",model:i.model,root:!0,mobileActive:o.mobileActive,onLeafClick:s.onLeafClick,template:e.$slots.item,exact:i.exact},null,8,["model","mobileActive","onLeafClick","template","exact"]),e.$slots.end?(n.openBlock(),n.createElementBlock("div",b,[n.renderSlot(e.$slots,"end")])):n.createCommentVNode("",!0)],2)},u}(primevue.utils,primevue.ripple,Vue);

package/menuitem/MenuItem.d.ts

@@ -38,7 +38,7 @@ export interface MenuItem {
      * Callback to execute when item is clicked.
      * @param {@link MenuItemCommandEvent} event - Custom command event.
      */
-    command?(event: MenuItemCommandEvent): void;
+    command?: (event: MenuItemCommandEvent) => void;
     /**
      * External link to navigate when item is clicked.
      */

package/multiselect/MultiSelect.d.ts

@@ -2,17 +2,17 @@ import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
 
-type MultiSelectOptionLabelType = string | ((data: any) => string) | undefined;
+type MultiSelectOptionLabelType = string | ((data: any) => string) | undefined;
 
-type MultiSelectOptionValueType = string | ((data: any) => any) | undefined;
+type MultiSelectOptionValueType = string | ((data: any) => any) | undefined;
 
-type MultiSelectOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type MultiSelectOptionDisabledType = string | ((data: any) => boolean) | undefined;
 
-type MultiSelectOptionChildrenType = string | ((data: any) => any[]) | undefined;
+type MultiSelectOptionChildrenType = string | ((data: any) => any[]) | undefined;
 
 type MultiSelectFilterMatchModeType = 'contains' | 'startsWith' | 'endsWith' | undefined;
 
-type MultiSelectAppendToType = 'body' | 'self' | string | undefined;
+type MultiSelectAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
 
 type MultiSelectDisplayType = 'comma' | 'chip' | undefined;
 
@@ -91,14 +91,34 @@ export interface MultiSelectProps {
      * When present, it specifies that the component should be disabled.
      */
     disabled?: boolean | undefined;
-    /**
-     * Index of the element in tabbing order.
-     */
-    tabindex?: string | number | undefined;
     /**
      * Identifier of the underlying input element.
      */
     inputId?: string | undefined;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     */
+    inputProps?: HTMLInputElement | undefined;
+    /**
+     * Inline style of the overlay panel.
+     */
+    panelStyle?: any;
+    /**
+     * Style class of the overlay panel.
+     */
+    panelClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the overlay panel.
+     */
+    panelProps?: HTMLDivElement | undefined;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.
+     */
+    filterInputProps?: HTMLInputElement | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the clear button inside the overlay panel.
+     */
+    closeButtonProps?: HTMLButtonElement | undefined;
     /**
      * A property to uniquely identify an option.
      */
@@ -125,36 +145,18 @@ export interface MultiSelectProps {
      * Fields used when filtering the options, defaults to optionLabel.
      */
     filterFields?: string[] | undefined;
-    /**
-     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
-     */
-    ariaLabelledBy?: string | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
      * @see MultiSelectAppendToType
      * Default value is 'body'.
      */
     appendTo?: MultiSelectAppendToType;
-    /**
-     * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No results found'.
-     */
-    emptyFilterMessage?: string | undefined;
-    /**
-     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
-     * Default value is 'No results found'.
-     */
-    emptyMessage?: string | undefined;
     /**
      * Defines how the selected items are displayed.
      * @see MultiSelectDisplayType
      * Default value is 'comma'.
      */
     display?: MultiSelectDisplayType;
-    /**
-     * Style class of the overlay panel.
-     */
-    panelClass?: any;
     /**
      * Label to display after exceeding max selected labels.
      * Default value is '{0} items selected'.
@@ -195,6 +197,48 @@ export interface MultiSelectProps {
      * @see VirtualScroller.VirtualScrollerProps
      */
     virtualScrollerOptions?: VirtualScrollerProps;
+    /**
+     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * Default value is true.
+     */
+    autoOptionFocus?: boolean | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is '{0} results are available'.
+     */
+    filterMessage?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
+     * Default value is '{0} items selected'.
+     */
+    selectionMessage?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No selected item'.
+     */
+    emptySelectionMessage?: string | undefined;
+    /**
+     * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptyFilterMessage?: string | undefined;
+    /**
+     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | string | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    "aria-labelledby"?: string | undefined;
 }
 
 export interface MultiSelectSlots {
@@ -212,6 +256,20 @@ export interface MultiSelectSlots {
          */
         placeholder: string;
     }) => VNode[];
+    /**
+     * Custom chip template.
+     * @param {Object} scope - chip slot's params.
+     */
+    chip: (scope: {
+        /**
+         * A value in the selection
+         */
+        value: any;
+    }) => VNode[];
+    /**
+     * Custom indicator template.
+     */
+    indicator: () => VNode[];
     /**
      * Custom header template.
      * @param {Object} scope - header slot's params.
@@ -226,7 +284,7 @@ export interface MultiSelectSlots {
          */
         options: any[];
     }) => VNode[];
-     /**
+    /**
      * Custom footer template.
      * @param {Object} scope - footer slot's params.
      */
@@ -240,14 +298,6 @@ export interface MultiSelectSlots {
          */
         options: any[];
     }) => VNode[];
-    /**
-     * Custom emptyfilter template.
-     */
-    emptyfilter: () => VNode[];
-     /**
-     * Custom empty template.
-     */
-    empty: () => VNode[];
     /**
      * Custom option template.
      * @param {Object} scope - option slot's params.
@@ -276,16 +326,14 @@ export interface MultiSelectSlots {
          */
         index: number;
     }) => VNode[];
-     /**
-     * Custom chip template.
-     * @param {Object} scope - chip slot's params.
+    /**
+     * Custom emptyfilter template.
      */
-    chip: (scope: {
-        /**
-         * A value in the selection
-         */
-        value: any;
-    }) => VNode[];
+    emptyfilter: () => VNode[];
+    /**
+     * Custom empty template.
+     */
+    empty: () => VNode[];
     /**
      * Custom content template.
      * @param {Object} scope - content slot's params.
@@ -321,10 +369,6 @@ export interface MultiSelectSlots {
          */
         options: any[];
     }) => VNode[];
-    /**
-     * Custom indicator template.
-     */
-    indicator: () => VNode[];
 }
 
 export declare type MultiSelectEmits = {
@@ -338,6 +382,16 @@ export declare type MultiSelectEmits = {
      * @param {MultiSelectChangeEvent} event - Custom change event.
      */
     'change': (event: MultiSelectChangeEvent) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    'blur': (event: Event) => void;
     /**
      * Callback to invoke before the overlay is shown.
      */
@@ -369,12 +423,18 @@ export declare type MultiSelectEmits = {
 declare class MultiSelect extends ClassComponent<MultiSelectProps, MultiSelectSlots, MultiSelectEmits> {
     /**
      * Shows the overlay.
+     * @param {boolean} [isFocus] - Decides whether to focus on the component. Default value is false.
+     *
+     * @memberof MultiSelect
      */
-    show: () => void;
+    show: (isFocus?: boolean) => void;
     /**
      * Hides the overlay.
+     * @param {boolean} [isFocus] - Decides whether to focus on the component. Default value is false.
+     *
+     * @memberof MultiSelect
      */
-    hide: () => void;
+    hide: (isFocus?: boolean) => void;
 }
 
 declare module '@vue/runtime-core' {