primevue/megamenu/megamenu.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import{DomHandler as e}from"primevue/utils";import n from"primevue/ripple";import{resolveComponent as t,resolveDirective as i,openBlock as l,createBlock as a,createVNode as s,Fragment as o,renderList as m,withCtx as r,withDirectives as u,createCommentVNode as c,toDisplayString as p,resolveDynamicComponent as d,renderSlot as g}from"vue";var h={name:"MegaMenu",props:{model:{type:Array,default:null},orientation:{type:String,default:"horizontal"}},documentClickListener:null,data:()=>({activeItem:null}),beforeUnmount(){this.unbindDocumentClickListener()},methods:{onLeafClick(e,n,t){n.disabled?e.preventDefault():(n.command&&n.command({originalEvent:e,item:n}),this.activeItem=null,n.to&&t&&t(e))},onCategoryMouseEnter(e,n){n.disabled?e.preventDefault():this.activeItem&&(this.activeItem=n)},onCategoryClick(e,n,t){n.disabled?e.preventDefault():(n.command&&n.command({originalEvent:e,item:n}),n.items&&(this.activeItem&&this.activeItem===n?(this.activeItem=null,this.unbindDocumentClickListener()):(this.activeItem=n,this.bindDocumentClickListener())),n.to&&t&&t(e))},onCategoryKeydown(e,n){let t=e.currentTarget.parentElement;switch(e.which){case 40:this.horizontal?this.expandMenu(n):this.navigateToNextItem(t),e.preventDefault();break;case 38:this.vertical?this.navigateToPrevItem(t):n.items&&n===this.activeItem&&this.collapseMenu(),e.preventDefault();break;case 39:this.horizontal?this.navigateToNextItem(t):this.expandMenu(n),e.preventDefault();break;case 37:this.horizontal?this.navigateToPrevItem(t):n.items&&n===this.activeItem&&this.collapseMenu(),e.preventDefault()}},expandMenu(e){e.items&&(this.activeItem=e)},collapseMenu(){this.activeItem=null},findNextItem(n){let t=n.nextElementSibling;return t?e.hasClass(t,"p-disabled")||!e.hasClass(t,"p-menuitem")?this.findNextItem(t):t:null},findPrevItem(n){let t=n.previousElementSibling;return t?e.hasClass(t,"p-disabled")||!e.hasClass(t,"p-menuitem")?this.findPrevItem(t):t:null},navigateToNextItem(e){var n=this.findNextItem(e);n&&n.children[0].focus()},navigateToPrevItem(e){var n=this.findPrevItem(e);n&&n.children[0].focus()},getCategoryClass(e){return["p-menuitem",{"p-menuitem-active":e===this.activeItem},e.class]},getCategorySubMenuIcon(){return["p-submenu-icon pi",{"pi-angle-down":this.horizontal,"pi-angle-right":this.vertical}]},getCategoryIcon:e=>["p-menuitem-icon",e.icon],getColumnClassName(e){let n;switch(e.items?e.items.length:0){case 2:n="p-megamenu-col-6";break;case 3:n="p-megamenu-col-4";break;case 4:n="p-megamenu-col-3";break;case 6:n="p-megamenu-col-2";break;default:n="p-megamenu-col-12"}return n},getSubmenuHeaderClass:e=>["p-megamenu-submenu-header",e.class,{"p-disabled":e.disabled}],getSubmenuItemClass:e=>["p-menuitem",e.class],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)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible},computed:{containerClass(){return["p-megamenu p-component",{"p-megamenu-horizontal":this.horizontal,"p-megamenu-vertical":this.vertical}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation}},directives:{ripple:n}};const b={class:"p-megamenu-root-list",role:"menubar"},v={class:"p-menuitem-text"},k={class:"p-menuitem-text"},y={key:2,class:"p-megamenu-panel"},f={class:"p-megamenu-grid"},C={class:"p-menuitem-text"},x={class:"p-menuitem-text"},I={key:0,class:"p-megamenu-custom"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-megamenu-root-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-megamenu-root-list > .p-menuitem {\n    position: relative;\n}\n.p-megamenu .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-megamenu .p-menuitem-text {\n    line-height: 1;\n}\n.p-megamenu-panel {\n    display: none;\n    position: absolute;\n    width: auto;\n    z-index: 1;\n}\n.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n    display: block;\n}\n.p-megamenu-submenu {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n/* Horizontal */\n.p-megamenu-horizontal .p-megamenu-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    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n\n/* Vertical */\n.p-megamenu-vertical .p-megamenu-root-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n    left: 100%;\n    top: 0;\n}\n.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {\n    margin-left: auto;\n}\n.p-megamenu-grid {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-megamenu-col-2,\n.p-megamenu-col-3,\n.p-megamenu-col-4,\n.p-megamenu-col-6,\n.p-megamenu-col-12 {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n    padding: 0.5rem;\n}\n.p-megamenu-col-2 {\n    width: 16.6667%;\n}\n.p-megamenu-col-3 {\n    width: 25%;\n}\n.p-megamenu-col-4 {\n    width: 33.3333%;\n}\n.p-megamenu-col-6 {\n    width: 50%;\n}\n.p-megamenu-col-12 {\n    width: 100%;\n}\n"),h.render=function(e,n,h,w,L,M){const S=t("router-link"),D=i("ripple");return l(),a("div",{class:M.containerClass},[s("ul",b,[(l(!0),a(o,null,m(h.model,((n,t)=>(l(),a(o,{key:n.label+"_"+t},[M.visible(n)?(l(),a("li",{key:0,class:M.getCategoryClass(n),style:n.style,onMouseenter:e=>M.onCategoryMouseEnter(e,n),role:"none"},[e.$slots.item?(l(),a(d(e.$slots.item),{key:1,item:e.item},null,8,["item"])):(l(),a(o,{key:0},[n.to&&!n.disabled?(l(),a(S,{key:0,to:n.to,custom:""},{default:r((({navigate:e,href:t})=>[u(s("a",{href:t,class:M.getLinkClass(n),onClick:t=>M.onCategoryClick(t,n,e),onKeydown:e=>M.onCategoryKeydown(e,n),role:"menuitem"},[n.icon?(l(),a("span",{key:0,class:M.getCategoryIcon(n)},null,2)):c("",!0),s("span",v,p(n.label),1)],42,["href","onClick","onKeydown"]),[[D]])])),_:2},1032,["to"])):u((l(),a("a",{key:1,href:n.url,class:M.getLinkClass(n),target:n.target,onClick:e=>M.onCategoryClick(e,n),onKeydown:e=>M.onCategoryKeydown(e,n),role:"menuitem","aria-haspopup":null!=n.items,"aria-expanded":n===L.activeItem,tabindex:n.disabled?null:"0"},[n.icon?(l(),a("span",{key:0,class:M.getCategoryIcon(n)},null,2)):c("",!0),s("span",k,p(n.label),1),n.items?(l(),a("span",{key:1,class:M.getCategorySubMenuIcon()},null,2)):c("",!0)],42,["href","target","onClick","onKeydown","aria-haspopup","aria-expanded","tabindex"])),[[D]])],64)),n.items?(l(),a("div",y,[s("div",f,[(l(!0),a(o,null,m(n.items,((t,i)=>(l(),a("div",{key:n.label+"_column_"+i,class:M.getColumnClassName(n)},[(l(!0),a(o,null,m(t,((n,t)=>(l(),a("ul",{class:"p-megamenu-submenu",key:n.label+"_submenu_"+t,role:"menu"},[s("li",{class:M.getSubmenuHeaderClass(n),style:n.style,role:"presentation"},p(n.label),7),(l(!0),a(o,null,m(n.items,((n,t)=>(l(),a(o,{key:n.label+t.toString()},[M.visible(n)&&!n.separator?(l(),a("li",{key:0,role:"none",class:M.getSubmenuItemClass(n),style:n.style},[e.$slots.item?(l(),a(d(e.$slots.item),{key:1,item:n},null,8,["item"])):(l(),a(o,{key:0},[n.to&&!n.disabled?(l(),a(S,{key:0,to:n.to,custom:""},{default:r((({navigate:e,href:t})=>[u(s("a",{href:t,class:M.getLinkClass(n),onClick:t=>M.onLeafClick(t,n,e),role:"menuitem"},[n.icon?(l(),a("span",{key:0,class:["p-menuitem-icon",n.icon]},null,2)):c("",!0),s("span",C,p(n.label),1)],10,["href","onClick"]),[[D]])])),_:2},1032,["to"])):u((l(),a("a",{key:1,href:n.url,class:M.getLinkClass(n),target:n.target,onClick:e=>M.onLeafClick(e,n),role:"menuitem",tabindex:n.disabled?null:"0"},[n.icon?(l(),a("span",{key:0,class:["p-menuitem-icon",n.icon]},null,2)):c("",!0),s("span",x,p(n.label),1),n.items?(l(),a("span",{key:1,class:e.getSubmenuIcon()},null,2)):c("",!0)],10,["href","target","onClick","tabindex"])),[[D]])],64))],6)):c("",!0),M.visible(n)&&n.separator?(l(),a("li",{class:["p-menu-separator",n.class],style:n.style,key:"separator"+t.toString(),role:"separator"},null,6)):c("",!0)],64)))),128))])))),128))],2)))),128))])])):c("",!0)],46,["onMouseenter"])):c("",!0)],64)))),128))]),e.$slots.default?(l(),a("div",I,[g(e.$slots,"default")])):c("",!0)],2)};export default h;