primevue/menubar/menubar.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)

import{DomHandler as e}from"primevue/utils";import t from"primevue/ripple";import{resolveComponent as n,resolveDirective as i,openBlock as l,createBlock as s,Fragment as o,renderList as a,withCtx as r,withDirectives as m,createVNode as u,toDisplayString as c,createCommentVNode as d,renderSlot as p}from"vue";var b={name:"sub-menu",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}},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){t.disabled||this.mobileActive?e.preventDefault():this.root?(this.activeItem||this.popup)&&(this.activeItem=t):this.activeItem=t},onItemClick(e,t,n){t.disabled?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}]},getLinkClass:e=>["p-menuitem-link",{"p-disabled":e.disabled}],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},computed:{containerClass(){return{"p-submenu-list":!this.root,"p-menubar-root-list":this.root}}},directives:{ripple:t}};const h={class:"p-menuitem-text"},v={class:"p-menuitem-text"};b.render=function(e,t,p,b,f,k){const g=n("router-link"),C=n("sub-menu"),y=i("ripple");return l(),s("ul",{class:k.containerClass,role:p.root?"menubar":"menu"},[(l(!0),s(o,null,a(p.model,((e,t)=>(l(),s(o,{key:e.label+t.toString()},[k.visible(e)&&!e.separator?(l(),s("li",{key:0,role:"none",class:k.getItemClass(e),style:e.style,onMouseenter:t=>k.onItemMouseEnter(t,e)},[e.to&&!e.disabled?(l(),s(g,{key:0,to:e.to,custom:""},{default:r((({navigate:t,href:n})=>[m(u("a",{href:n,onClick:n=>k.onItemClick(n,e,t),class:k.getLinkClass(e),onKeydown:t=>k.onItemKeyDown(t,e),role:"menuitem"},[u("span",{class:["p-menuitem-icon",e.icon]},null,2),u("span",h,c(e.label),1)],42,["href","onClick","onKeydown"]),[[y]])])),_:2},1032,["to"])):m((l(),s("a",{key:1,href:e.url,class:k.getLinkClass(e),target:e.target,"aria-haspopup":null!=e.items,"aria-expanded":e===f.activeItem,onClick:t=>k.onItemClick(t,e),onKeydown:t=>k.onItemKeyDown(t,e),role:"menuitem",tabindex:e.disabled?null:"0"},[u("span",{class:["p-menuitem-icon",e.icon]},null,2),u("span",v,c(e.label),1),e.items?(l(),s("span",{key:0,class:k.getSubmenuIcon()},null,2)):d("",!0)],42,["href","target","aria-haspopup","aria-expanded","onClick","onKeydown","tabindex"])),[[y]]),k.visible(e)&&e.items?(l(),s(C,{model:e.items,key:e.label+"_sub_",mobileActive:p.mobileActive,onLeafClick:k.onLeafClick,onKeydownItem:k.onChildItemKeyDown,parentActive:e===f.activeItem},null,8,["model","mobileActive","onLeafClick","onKeydownItem","parentActive"])):d("",!0)],46,["onMouseenter"])):d("",!0),k.visible(e)&&e.separator?(l(),s("li",{class:["p-menu-separator",e.class],style:e.style,key:"separator"+t.toString(),role:"separator"},null,6)):d("",!0)],64)))),128))],10,["role"])};var f={props:{model:{type:Array,default:null}},outsideClickListener:null,data:()=>({mobileActive:!1}),beforeUnmount(){this.mobileActive=!1,this.unbindOutsideClickListener()},methods:{toggle(t){this.mobileActive=!this.mobileActive,this.$refs.rootmenu.$el.style.zIndex=String(e.generateZIndex()),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:b}};const k={key:0,class:"p-menubar-start"},g=u("i",{class:"pi pi-bars"},null,-1),C={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}\n"),f.render=function(e,t,i,o,a,r){const m=n("MenubarSub");return l(),s("div",{class:r.containerClass},[e.$slots.start?(l(),s("div",k,[p(e.$slots,"start")])):d("",!0),u("a",{ref:"menubutton",tabindex:"0",class:"p-menubar-button",onClick:t[1]||(t[1]=e=>r.toggle(e))},[g],512),u(m,{ref:"rootmenu",model:i.model,root:!0,mobileActive:a.mobileActive,onLeafClick:r.onLeafClick},null,8,["model","mobileActive","onLeafClick"]),e.$slots.end?(l(),s("div",C,[p(e.$slots,"end")])):d("",!0)],2)};export default f;