UNPKG

primevue

Version:

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

2 lines (1 loc) 11.6 kB
this.primevue=this.primevue||{},this.primevue.megamenu=function(e,t,n){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"MegaMenu",props:{model:{type:Array,default:null},orientation:{type:String,default:"horizontal"},exact:{type:Boolean,default:!0}},documentClickListener:null,data:()=>({activeItem:null}),beforeUnmount(){this.unbindDocumentClickListener()},methods:{onLeafClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem=null,t.to&&n&&n(e))},onCategoryMouseEnter(e,t){this.disabled(t)?e.preventDefault():this.activeItem&&(this.activeItem=t)},onCategoryClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.items&&(this.activeItem&&this.activeItem===t?(this.activeItem=null,this.unbindDocumentClickListener()):(this.activeItem=t,this.bindDocumentClickListener())),t.to&&n&&n(e))},onCategoryKeydown(e,t){let n=e.currentTarget.parentElement;switch(e.which){case 40:this.horizontal?this.expandMenu(t):this.navigateToNextItem(n),e.preventDefault();break;case 38:this.vertical?this.navigateToPrevItem(n):t.items&&t===this.activeItem&&this.collapseMenu(),e.preventDefault();break;case 39:this.horizontal?this.navigateToNextItem(n):this.expandMenu(t),e.preventDefault();break;case 37:this.horizontal?this.navigateToPrevItem(n):t.items&&t===this.activeItem&&this.collapseMenu(),e.preventDefault()}},expandMenu(e){e.items&&(this.activeItem=e)},collapseMenu(){this.activeItem=null},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},navigateToNextItem(e){var t=this.findNextItem(e);t&&t.children[0].focus()},navigateToPrevItem(e){var t=this.findPrevItem(e);t&&t.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 t;switch(e.items?e.items.length:0){case 2:t="p-megamenu-col-6";break;case 3:t="p-megamenu-col-4";break;case 4:t="p-megamenu-col-3";break;case 6:t="p-megamenu-col-2";break;default:t="p-megamenu-col-12"}return t},getSubmenuHeaderClass(e){return["p-megamenu-submenu-header",e.class,{"p-disabled":this.disabled(e)}]},getSubmenuItemClass:e=>["p-menuitem",e.class],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)},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.disabled?e.label():e.label},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:l(t).default}};const a={key:0,class:"p-megamenu-start"},o={class:"p-megamenu-root-list",role:"menubar"},s=["onMouseenter"],m=["href","onClick","onKeydown"],r={class:"p-menuitem-text"},c=["href","target","onClick","onKeydown","aria-haspopup","aria-expanded","tabindex"],u={class:"p-menuitem-text"},p={key:2,class:"p-megamenu-panel"},d={class:"p-megamenu-grid"},k=["href","onClick"],g={class:"p-menuitem-text"},h=["href","target","onClick","tabindex"],v={class:"p-menuitem-text"},C={key:1,class:"p-megamenu-end"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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"),i.render=function(e,t,l,i,b,y){const f=n.resolveComponent("router-link"),B=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(y.containerClass)},[e.$slots.start?(n.openBlock(),n.createElementBlock("div",a,[n.renderSlot(e.$slots,"start")])):n.createCommentVNode("",!0),n.createElementVNode("ul",o,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(l.model,((t,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:y.label(t)+"_"+l},[y.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:0,class:n.normalizeClass(y.getCategoryClass(t)),style:n.normalizeStyle(t.style),onMouseenter:e=>y.onCategoryMouseEnter(e,t),role:"none"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[t.to&&!y.disabled(t)?(n.openBlock(),n.createBlock(f,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:e,href:l,isActive:i,isExactActive:a})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:l,class:n.normalizeClass(y.linkClass(t,{isActive:i,isExactActive:a})),onClick:n=>y.onCategoryClick(n,t,e),onKeydown:e=>y.onCategoryKeydown(e,t),role:"menuitem"},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(y.getCategoryIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",r,n.toDisplayString(y.label(t)),1)],42,m)),[[B]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:t.url,class:n.normalizeClass(y.linkClass(t)),target:t.target,onClick:e=>y.onCategoryClick(e,t),onKeydown:e=>y.onCategoryKeydown(e,t),role:"menuitem","aria-haspopup":null!=t.items,"aria-expanded":t===b.activeItem,tabindex:y.disabled(t)?null:"0"},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(y.getCategoryIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",u,n.toDisplayString(y.label(t)),1),t.items?(n.openBlock(),n.createElementBlock("span",{key:1,class:n.normalizeClass(y.getCategorySubMenuIcon())},null,2)):n.createCommentVNode("",!0)],42,c)),[[B]])],64)),t.items?(n.openBlock(),n.createElementBlock("div",p,[n.createElementVNode("div",d,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.items,((l,i)=>(n.openBlock(),n.createElementBlock("div",{key:y.label(t)+"_column_"+i,class:n.normalizeClass(y.getColumnClassName(t))},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(l,((t,l)=>(n.openBlock(),n.createElementBlock("ul",{class:"p-megamenu-submenu",key:t.label+"_submenu_"+l,role:"menu"},[n.createElementVNode("li",{class:n.normalizeClass(y.getSubmenuHeaderClass(t)),style:n.normalizeStyle(t.style),role:"presentation"},n.toDisplayString(t.label),7),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.items,((t,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:y.label(t)+l.toString()},[y.visible(t)&&!t.separator?(n.openBlock(),n.createElementBlock("li",{key:0,role:"none",class:n.normalizeClass(y.getSubmenuItemClass(t)),style:n.normalizeStyle(t.style)},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[t.to&&!y.disabled(t)?(n.openBlock(),n.createBlock(f,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:e,href:l,isActive:i,isExactActive:a})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:l,class:n.normalizeClass(y.linkClass(t,{isActive:i,isExactActive:a})),onClick:n=>y.onLeafClick(n,t,e),role:"menuitem"},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-menuitem-icon",t.icon])},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",g,n.toDisplayString(y.label(t)),1)],10,k)),[[B]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:t.url,class:n.normalizeClass(y.linkClass(t)),target:t.target,onClick:e=>y.onLeafClick(e,t),role:"menuitem",tabindex:y.disabled(t)?null:"0"},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-menuitem-icon",t.icon])},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",v,n.toDisplayString(y.label(t)),1),t.items?(n.openBlock(),n.createElementBlock("span",{key:1,class:n.normalizeClass(e.getSubmenuIcon())},null,2)):n.createCommentVNode("",!0)],10,h)),[[B]])],64))],6)):n.createCommentVNode("",!0),y.visible(t)&&t.separator?(n.openBlock(),n.createElementBlock("li",{class:n.normalizeClass(["p-menu-separator",t.class]),style:n.normalizeStyle(t.style),key:"separator"+l.toString(),role:"separator"},null,6)):n.createCommentVNode("",!0)],64)))),128))])))),128))],2)))),128))])])):n.createCommentVNode("",!0)],46,s)):n.createCommentVNode("",!0)],64)))),128))]),e.$slots.end?(n.openBlock(),n.createElementBlock("div",C,[n.renderSlot(e.$slots,"end")])):n.createCommentVNode("",!0)],2)},i}(primevue.utils,primevue.ripple,Vue);