primevue 3.16.2 → 3.17.0

package/megamenu/megamenu.js

@@ -9,7 +9,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
     var script = {
         name: 'MegaMenu',
         props: {
-    		model: {
+            model: {
                 type: Array,
                 default: null
             },
@@ -26,7 +26,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
         data() {
             return {
                 activeItem: null
-            }
+            };
         },
         beforeUnmount() {
             this.unbindDocumentClickListener();
@@ -35,6 +35,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
             onLeafClick(event, item, navigate) {
                 if (this.disabled(item)) {
                     event.preventDefault();
+
                     return;
                 }
 
@@ -54,6 +55,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
             onCategoryMouseEnter(event, category) {
                 if (this.disabled(category)) {
                     event.preventDefault();
+
                     return;
                 }
 
@@ -64,6 +66,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
             onCategoryClick(event, category, navigate) {
                 if (this.disabled(category)) {
                     event.preventDefault();
+
                     return;
                 }
 
@@ -78,8 +81,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
                     if (this.activeItem && this.activeItem === category) {
                         this.activeItem = null;
                         this.unbindDocumentClickListener();
-                    }
-                    else {
+                    } else {
                         this.activeItem = category;
                         this.bindDocumentClickListener();
                     }
@@ -92,46 +94,38 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
             onCategoryKeydown(event, category) {
                 let listItem = event.currentTarget.parentElement;
 
-                switch(event.which) {
+                switch (event.which) {
                     //down
                     case 40:
-                        if (this.horizontal)
-                            this.expandMenu(category);
-                        else
-                            this.navigateToNextItem(listItem);
+                        if (this.horizontal) this.expandMenu(category);
+                        else this.navigateToNextItem(listItem);
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //up
                     case 38:
-                        if (this.vertical)
-                            this.navigateToPrevItem(listItem);
-                        else if (category.items && category === this.activeItem)
-                            this.collapseMenu();
+                        if (this.vertical) this.navigateToPrevItem(listItem);
+                        else if (category.items && category === this.activeItem) this.collapseMenu();
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //right
                     case 39:
-                        if (this.horizontal)
-                            this.navigateToNextItem(listItem);
-                        else
-                            this.expandMenu(category);
+                        if (this.horizontal) this.navigateToNextItem(listItem);
+                        else this.expandMenu(category);
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //left
                     case 37:
-                        if (this.horizontal)
-                            this.navigateToPrevItem(listItem);
-                        else if (category.items && category === this.activeItem)
-                            this.collapseMenu();
+                        if (this.horizontal) this.navigateToPrevItem(listItem);
+                        else if (category.items && category === this.activeItem) this.collapseMenu();
 
                         event.preventDefault();
-                    break;
+                        break;
                 }
             },
             expandMenu(item) {
@@ -145,85 +139,93 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
             findNextItem(item) {
                 let nextItem = item.nextElementSibling;
 
-                if (nextItem)
-                    return utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-                else
-                    return null;
+                if (nextItem) return utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+                else return null;
             },
             findPrevItem(item) {
                 let prevItem = item.previousElementSibling;
 
-                if (prevItem)
-                    return utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-                else
-                    return null;
+                if (prevItem) return utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+                else return null;
             },
             navigateToNextItem(listItem) {
                 var nextItem = this.findNextItem(listItem);
+
                 if (nextItem) {
                     nextItem.children[0].focus();
                 }
             },
             navigateToPrevItem(listItem) {
                 var prevItem = this.findPrevItem(listItem);
+
                 if (prevItem) {
                     prevItem.children[0].focus();
                 }
             },
             getCategoryClass(category) {
-                return ['p-menuitem', {
-                    'p-menuitem-active': category === this.activeItem
-                }, category.class];
+                return [
+                    'p-menuitem',
+                    {
+                        'p-menuitem-active': category === this.activeItem
+                    },
+                    category.class
+                ];
             },
             getCategorySubMenuIcon() {
-                return ['p-submenu-icon pi', {
-                    'pi-angle-down': this.horizontal,
-                    'pi-angle-right': this.vertical
-                }];
+                return [
+                    'p-submenu-icon pi',
+                    {
+                        'pi-angle-down': this.horizontal,
+                        'pi-angle-right': this.vertical
+                    }
+                ];
             },
             getCategoryIcon(category) {
                 return ['p-menuitem-icon', category.icon];
             },
             getColumnClassName(category) {
-                let length = category.items ? category.items.length: 0;
+                let length = category.items ? category.items.length : 0;
                 let columnClass;
 
-                switch(length) {
+                switch (length) {
                     case 2:
-                        columnClass= 'p-megamenu-col-6';
-                    break;
+                        columnClass = 'p-megamenu-col-6';
+                        break;
 
                     case 3:
-                        columnClass= 'p-megamenu-col-4';
-                    break;
+                        columnClass = 'p-megamenu-col-4';
+                        break;
 
                     case 4:
-                        columnClass= 'p-megamenu-col-3';
-                    break;
+                        columnClass = 'p-megamenu-col-3';
+                        break;
 
                     case 6:
-                        columnClass= 'p-megamenu-col-2';
-                    break;
+                        columnClass = 'p-megamenu-col-2';
+                        break;
 
                     default:
-                        columnClass= 'p-megamenu-col-12';
-                    break;
+                        columnClass = 'p-megamenu-col-12';
+                        break;
                 }
 
                 return columnClass;
             },
             getSubmenuHeaderClass(submenu) {
-                return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': this.disabled(submenu)}];
+                return ['p-megamenu-submenu-header', submenu.class, { 'p-disabled': this.disabled(submenu) }];
             },
             getSubmenuItemClass(item) {
                 return ['p-menuitem', item.class];
             },
             linkClass(item, routerProps) {
-                return ['p-menuitem-link', {
-                    'p-disabled': this.disabled(item),
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }];
+                return [
+                    'p-menuitem-link',
+                    {
+                        'p-disabled': this.disabled(item),
+                        'router-link-active': routerProps && routerProps.isActive,
+                        'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                    }
+                ];
             },
             bindDocumentClickListener() {
                 if (!this.documentClickListener) {
@@ -244,21 +246,24 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
                 }
             },
             visible(item) {
-                return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+                return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
             },
             disabled(item) {
-                return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+                return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
             },
             label(item) {
-                return (typeof item.disabled === 'function' ? item.label() : item.label);
+                return typeof item.disabled === 'function' ? item.label() : item.label;
             }
         },
         computed: {
             containerClass() {
-                return ['p-megamenu p-component', {
-                    'p-megamenu-horizontal': this.horizontal,
-                    'p-megamenu-vertical': this.vertical
-                }];
+                return [
+                    'p-megamenu p-component',
+                    {
+                        'p-megamenu-horizontal': this.horizontal,
+                        'p-megamenu-vertical': this.vertical
+                    }
+                ];
             },
             horizontal() {
                 return this.orientation === 'horizontal';
@@ -268,7 +273,7 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
@@ -332,10 +337,10 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
                                 to: category.to,
                                 custom: ""
                               }, {
-                                default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
+                                default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                                   vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                                     href: href,
-                                    class: vue.normalizeClass($options.linkClass(category, {isActive, isExactActive})),
+                                    class: vue.normalizeClass($options.linkClass(category, { isActive, isExactActive })),
                                     onClick: $event => ($options.onCategoryClick($event, category, navigate)),
                                     onKeydown: $event => ($options.onCategoryKeydown($event, category)),
                                     role: "menuitem"
@@ -396,8 +401,8 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
                               }, [
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(column, (submenu, submenuIndex) => {
                                   return (vue.openBlock(), vue.createElementBlock("ul", {
-                                    class: "p-megamenu-submenu",
                                     key: submenu.label + '_submenu_' + submenuIndex,
+                                    class: "p-megamenu-submenu",
                                     role: "menu"
                                   }, [
                                     vue.createElementVNode("li", {
@@ -424,10 +429,10 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
                                                           to: item.to,
                                                           custom: ""
                                                         }, {
-                                                          default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
+                                                          default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                                                             vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                                                               href: href,
-                                                              class: vue.normalizeClass($options.linkClass(item, {isActive, isExactActive})),
+                                                              class: vue.normalizeClass($options.linkClass(item, { isActive, isExactActive })),
                                                               onClick: $event => ($options.onLeafClick($event, item, navigate)),
                                                               role: "menuitem"
                                                             }, [
@@ -478,9 +483,9 @@ this.primevue.megamenu = (function (utils, Ripple, vue) {
                                           : vue.createCommentVNode("", true),
                                         ($options.visible(item) && item.separator)
                                           ? (vue.openBlock(), vue.createElementBlock("li", {
+                                              key: 'separator' + i.toString(),
                                               class: vue.normalizeClass(['p-menu-separator', item.class]),
                                               style: vue.normalizeStyle(item.style),
-                                              key: 'separator' + i.toString(),
                                               role: "separator"
                                             }, null, 6))
                                           : vue.createCommentVNode("", true)

package/megamenu/megamenu.min.js

@@ -1 +1 @@
-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);
+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",{key:t.label+"_submenu_"+l,class:"p-megamenu-submenu",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",{key:"separator"+l.toString(),class:n.normalizeClass(["p-menu-separator",t.class]),style:n.normalizeStyle(t.style),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);

package/menu/Menu.d.ts

@@ -41,13 +41,10 @@ export interface MenuSlots {
      * Custom item template.
      * @param {Object} scope - item slot's params.
      */
-    item: (scope: {
-        item: MenuItem;
-    }) => VNode[];
+    item: (scope: { item: MenuItem }) => VNode[];
 }
 
-export declare type MenuEmits = {
-}
+export declare type MenuEmits = {};
 
 declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
     /**
@@ -74,7 +71,7 @@ declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Menu: GlobalComponentConstructor<Menu>
+        Menu: GlobalComponentConstructor<Menu>;
     }
 }
 
@@ -84,11 +81,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [Menu](https://www.primefaces.org/primevue/showcase/#/menu)
+ * - [Menu](https://www.primefaces.org/primevue/menu)
  *
  */
 export default Menu;

package/menu/Menu.vue

@@ -1,19 +1,19 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
                 <ul class="p-menu-list p-reset" role="menu">
                     <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
-                            <li class="p-submenu-header" v-if="item.items">
-                                <slot name="item" :item="item">{{label(item)}}</slot>
+                            <li v-if="item.items" class="p-submenu-header">
+                                <slot name="item" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + j">
                                 <Menuitem v-if="visible(child) && !child.separator" :item="child" @click="itemClick" :template="$slots.item" :exact="exact" />
-                                <li v-else-if="visible(child) && child.separator" :class="['p-menu-separator', child.class]" :style="child.style" :key="'separator' + i + j" role="separator"></li>
+                                <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="['p-menu-separator', child.class]" :style="child.style" role="separator"></li>
                             </template>
                         </template>
-                        <li v-else-if="visible(item) && item.separator" :class="['p-menu-separator', item.class]" :style="item.style" :key="'separator' + i.toString()" role="separator"></li>
+                        <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
                         <Menuitem v-else :key="label(item) + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
                     </template>
                 </ul>
@@ -23,21 +23,21 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Menuitem from './Menuitem.vue';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'Menu',
-    emits: ['show', 'hide'],
     inheritAttrs: false,
+    emits: ['show', 'hide'],
     props: {
         popup: {
             type: Boolean,
             default: false
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -76,16 +76,19 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.target = null;
 
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     methods: {
         itemClick(event) {
             const item = event.item;
+
             if (this.disabled(item)) {
                 return;
             }
@@ -101,10 +104,8 @@ export default {
             this.hide();
         },
         toggle(event) {
-            if (this.overlayVisible)
-                this.hide();
-            else
-                this.show(event);
+            if (this.overlayVisible) this.hide();
+            else this.show(event);
         },
         show(event) {
             this.overlayVisible = true;
@@ -148,6 +149,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -180,6 +182,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -193,13 +196,13 @@ export default {
             return this.target && (this.target === event.target || this.target.contains(event.target));
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         },
         containerRef(el) {
             this.container = el;
@@ -213,18 +216,21 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-menu p-component', {
-                'p-menu-overlay': this.popup,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }]
+            return [
+                'p-menu p-component',
+                {
+                    'p-menu-overlay': this.popup,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'Menuitem': Menuitem,
-        'Portal': Portal
+        Menuitem: Menuitem,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>

package/menu/Menuitem.vue

@@ -1,15 +1,15 @@
 <template>
-    <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
+    <li v-if="visible()" :class="containerClass" role="none" :style="item.style">
         <template v-if="!template">
-            <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                <a :href="href" @click="onClick($event, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
-                    <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                    <span class="p-menuitem-text">{{label()}}</span>
+            <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                <a v-ripple :href="href" @click="onClick($event, navigate)" :class="linkClass(item, { isActive, isExactActive })" role="menuitem">
+                    <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                    <span class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url" :class="linkClass(item)" @click="onClick" :target="item.target" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                <span class="p-menuitem-text">{{label()}}</span>
+            <a v-else v-ripple :href="item.url" :class="linkClass(item)" @click="onClick" :target="item.target" role="menuitem" :tabindex="disabled(item) ? null : '0'">
+                <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                <span class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="template" :item="item"></component>
@@ -37,20 +37,23 @@ export default {
             });
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         visible() {
-            return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+            return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label() {
-            return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
+            return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
         }
     },
     computed: {
@@ -59,7 +62,7 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>