primevue 2.5.1 → 2.9.0

package/megamenu/MegaMenu.vue

@@ -1,29 +1,40 @@
 <template>
     <div :class="containerClass">
+        <div class="p-megamenu-start" v-if="$slots.start">
+            <slot name="start"></slot>
+        </div>
         <ul class="p-megamenu-root-list" role="menubar">
             <template v-for="(category,index) of model">
-                <li v-if="visible(category)" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
+                <li v-if="visible(category)" :key="label(category) + '_' + index" :class="getCategoryClass(category)" :style="category.style"
                     @mouseenter="onCategoryMouseEnter($event, category)" role="none">
-                    <a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
-                        role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'" v-ripple>
+                    <router-link v-if="category.to && !disabled(category)" :to="category.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                        <a :href="href" :class="linkClass(category, {isActive, isExactActive})" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
+                            <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
+                            <span class="p-menuitem-text">{{label(category)}}</span>
+                        </a>
+                    </router-link>
+                    <a v-else :href="category.url" :class="linkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
+                        role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="disabled(category) ? null : '0'" v-ripple>
                         <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
-                        <span class="p-menuitem-text">{{category.label}}</span>
+                        <span class="p-menuitem-text">{{label(category)}}</span>
                         <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
                     </a>
                     <div class="p-megamenu-panel" v-if="category.items">
                         <div class="p-megamenu-grid">
-                            <div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)">
-                                <ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu">
-                                    <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
+                            <div v-for="(column,columnIndex) of category.items" :key="label(category) + '_column_' + columnIndex" :class="getColumnClassName(category)">
+                                <ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="label(submenu) + '_submenu_' + submenuIndex" role="menu">
+                                    <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{label(submenu)}}</li>
                                     <template v-for="(item, i) of submenu.items">
-                                        <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
-                                            <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem" v-ripple>
-                                                <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
-                                                <span class="p-menuitem-text">{{item.label}}</span>
+                                        <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="label(item) + i">
+                                            <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}" >
+                                                <a :href="href" :class="linkClass(item, {isActive, isExactActive})" @click.native="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
+                                                    <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                                                    <span class="p-menuitem-text">{{label(item)}}</span>
+                                                </a>
                                             </router-link>
-                                            <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+                                            <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onLeafClick($event, item, navigate)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                                                 <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
-                                                <span class="p-menuitem-text">{{item.label}}</span>
+                                                <span class="p-menuitem-text">{{label(item)}}</span>
                                                 <span :class="getSubmenuIcon()" v-if="item.items"></span>
                                             </a>
                                         </li>
@@ -36,8 +47,8 @@
                 </li>
             </template>
         </ul>
-        <div class="p-megamenu-custom" v-if="$slots.default">
-            <slot></slot>
+        <div class="p-megamenu-end" v-if="$slots.end">
+            <slot name="end"></slot>
         </div>
     </div>
 </template>
@@ -55,6 +66,10 @@ export default {
         orientation: {
             type: String,
             default: 'horizontal'
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     documentClickListener: null,
@@ -67,8 +82,8 @@ export default {
         this.unbindDocumentClickListener();
     },
     methods: {
-        onLeafClick(event, item) {
-            if (item.disabled) {
+        onLeafClick(event, item, navigate) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -84,10 +99,14 @@ export default {
                 });
             }
 
+            if (item.to && navigate) {
+                navigate(event);
+            }
+
             this.activeItem = null;
         },
         onCategoryMouseEnter(event, category) {
-            if (category.disabled) {
+            if (this.disabled(category)) {
                 event.preventDefault();
                 return;
             }
@@ -97,7 +116,7 @@ export default {
             }
         },
         onCategoryClick(event, category) {
-            if (category.disabled) {
+            if (this.disabled(category)) {
                 event.preventDefault();
                 return;
             }
@@ -251,13 +270,17 @@ export default {
             return columnClass;
         },
         getSubmenuHeaderClass(submenu) {
-            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': submenu.disabled}];
+            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': this.disabled(submenu)}];
         },
         getSubmenuItemClass(item) {
             return ['p-menuitem', item.class];
         },
-        getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+        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
+            }];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -279,6 +302,12 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     computed: {

package/megamenu/megamenu.common.js

@@ -3173,12 +3173,22 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/megamenu/MegaMenu.vue?vue&type=template&id=05b736ec&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"p-megamenu-root-list",attrs:{"role":"menubar"}},[_vm._l((_vm.model),function(category,index){return [(_vm.visible(category))?_c('li',{key:category.label + '_' + index,class:_vm.getCategoryClass(category),style:(category.style),attrs:{"role":"none"},on:{"mouseenter":function($event){return _vm.onCategoryMouseEnter($event, category)}}},[_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.getLinkClass(category),attrs:{"href":category.url,"target":category.target,"role":"menuitem","aria-haspopup":category.items != null,"aria-expanded":category === _vm.activeItem,"tabindex":category.disabled ? null : '0'},on:{"click":function($event){return _vm.onCategoryClick($event, category)},"keydown":function($event){return _vm.onCategoryKeydown($event, category)}}},[(category.icon)?_c('span',{class:_vm.getCategoryIcon(category)}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(category.label))]),(category.items)?_c('span',{class:_vm.getCategorySubMenuIcon()}):_vm._e()]),(category.items)?_c('div',{staticClass:"p-megamenu-panel"},[_c('div',{staticClass:"p-megamenu-grid"},_vm._l((category.items),function(column,columnIndex){return _c('div',{key:category.label + '_column_' + columnIndex,class:_vm.getColumnClassName(category)},_vm._l((column),function(submenu,submenuIndex){return _c('ul',{key:submenu.label + '_submenu_' + submenuIndex,staticClass:"p-megamenu-submenu",attrs:{"role":"menu"}},[_c('li',{class:_vm.getSubmenuHeaderClass(submenu),style:(submenu.style),attrs:{"role":"presentation"}},[_vm._v(_vm._s(submenu.label))]),_vm._l((submenu.items),function(item,i){return [(_vm.visible(item) && !item.separator)?_c('li',{key:item.label + i,class:_vm.getSubmenuItemClass(item),style:(item.style),attrs:{"role":"none"}},[(item.to && !item.disabled)?_c('router-link',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.getLinkClass(item),attrs:{"to":item.to,"role":"menuitem"},nativeOn:{"click":function($event){return _vm.onLeafClick($event, item)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(item.label))])]):_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.getLinkClass(item),attrs:{"href":item.url,"target":item.target,"role":"menuitem","tabindex":item.disabled ? null : '0'},on:{"click":function($event){return _vm.onLeafClick($event, item)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(item.label))]),(item.items)?_c('span',{class:_vm.getSubmenuIcon()}):_vm._e()])],1):_vm._e(),(_vm.visible(item) && item.separator)?_c('li',{key:'separator' + i,class:['p-menu-separator', item.class],style:(item.style),attrs:{"role":"separator"}}):_vm._e()]})],2)}),0)}),0)]):_vm._e()]):_vm._e()]})],2),(_vm.$slots.default)?_c('div',{staticClass:"p-megamenu-custom"},[_vm._t("default")],2):_vm._e()])}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b9fe9a72-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/megamenu/MegaMenu.vue?vue&type=template&id=7ba247e8&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[(_vm.$slots.start)?_c('div',{staticClass:"p-megamenu-start"},[_vm._t("start")],2):_vm._e(),_c('ul',{staticClass:"p-megamenu-root-list",attrs:{"role":"menubar"}},[_vm._l((_vm.model),function(category,index){return [(_vm.visible(category))?_c('li',{key:_vm.label(category) + '_' + index,class:_vm.getCategoryClass(category),style:(category.style),attrs:{"role":"none"},on:{"mouseenter":function($event){return _vm.onCategoryMouseEnter($event, category)}}},[(category.to && !_vm.disabled(category))?_c('router-link',{attrs:{"to":category.to,"custom":""},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var navigate = ref.navigate;
+var href = ref.href;
+var isActive = ref.isActive;
+var isExactActive = ref.isExactActive;
+return [_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(category, {isActive: isActive, isExactActive: isExactActive}),attrs:{"href":href,"role":"menuitem"},on:{"click":function($event){return _vm.onCategoryClick($event, category, navigate)},"keydown":function($event){return _vm.onCategoryKeydown($event, category)}}},[(category.icon)?_c('span',{class:_vm.getCategoryIcon(category)}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(category)))])])]}}],null,true)}):_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(category),attrs:{"href":category.url,"target":category.target,"role":"menuitem","aria-haspopup":category.items != null,"aria-expanded":category === _vm.activeItem,"tabindex":_vm.disabled(category) ? null : '0'},on:{"click":function($event){return _vm.onCategoryClick($event, category)},"keydown":function($event){return _vm.onCategoryKeydown($event, category)}}},[(category.icon)?_c('span',{class:_vm.getCategoryIcon(category)}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(category)))]),(category.items)?_c('span',{class:_vm.getCategorySubMenuIcon()}):_vm._e()]),(category.items)?_c('div',{staticClass:"p-megamenu-panel"},[_c('div',{staticClass:"p-megamenu-grid"},_vm._l((category.items),function(column,columnIndex){return _c('div',{key:_vm.label(category) + '_column_' + columnIndex,class:_vm.getColumnClassName(category)},_vm._l((column),function(submenu,submenuIndex){return _c('ul',{key:_vm.label(submenu) + '_submenu_' + submenuIndex,staticClass:"p-megamenu-submenu",attrs:{"role":"menu"}},[_c('li',{class:_vm.getSubmenuHeaderClass(submenu),style:(submenu.style),attrs:{"role":"presentation"}},[_vm._v(_vm._s(_vm.label(submenu)))]),_vm._l((submenu.items),function(item,i){return [(_vm.visible(item) && !item.separator)?_c('li',{key:_vm.label(item) + i,class:_vm.getSubmenuItemClass(item),style:(item.style),attrs:{"role":"none"}},[(item.to && !_vm.disabled(item))?_c('router-link',{attrs:{"to":item.to,"custom":""},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var navigate = ref.navigate;
+var href = ref.href;
+var isActive = ref.isActive;
+var isExactActive = ref.isExactActive;
+return [_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(item, {isActive: isActive, isExactActive: isExactActive}),attrs:{"href":href,"role":"menuitem"},nativeOn:{"click":function($event){return _vm.onLeafClick($event, item, navigate)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(item)))])])]}}],null,true)}):_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(item),attrs:{"href":item.url,"target":item.target,"role":"menuitem","tabindex":_vm.disabled(item) ? null : '0'},on:{"click":function($event){return _vm.onLeafClick($event, item, _vm.navigate)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(item)))]),(item.items)?_c('span',{class:_vm.getSubmenuIcon()}):_vm._e()])],1):_vm._e(),(_vm.visible(item) && item.separator)?_c('li',{key:'separator' + i,class:['p-menu-separator', item.class],style:(item.style),attrs:{"role":"separator"}}):_vm._e()]})],2)}),0)}),0)]):_vm._e()],1):_vm._e()]})],2),(_vm.$slots.end)?_c('div',{staticClass:"p-megamenu-end"},[_vm._t("end")],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/megamenu/MegaMenu.vue?vue&type=template&id=05b736ec&
+// CONCATENATED MODULE: ./src/components/megamenu/MegaMenu.vue?vue&type=template&id=7ba247e8&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.symbol.async-iterator.js
 var es7_symbol_async_iterator = __webpack_require__("ac4d");
@@ -3237,6 +3247,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // CONCATENATED MODULE: ./src/components/utils/DomHandler.js
@@ -3769,6 +3784,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -3776,6 +3797,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = style;
+      } else {
+        for (var prop in style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -3786,6 +3818,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -3915,6 +3952,17 @@ var Ripple = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 /* harmony default export */ var MegaMenuvue_type_script_lang_js_ = ({
@@ -3926,6 +3974,10 @@ var Ripple = {
     orientation: {
       type: String,
       default: 'horizontal'
+    },
+    exact: {
+      type: Boolean,
+      default: true
     }
   },
   documentClickListener: null,
@@ -3938,8 +3990,8 @@ var Ripple = {
     this.unbindDocumentClickListener();
   },
   methods: {
-    onLeafClick: function onLeafClick(event, item) {
-      if (item.disabled) {
+    onLeafClick: function onLeafClick(event, item, navigate) {
+      if (this.disabled(item)) {
         event.preventDefault();
         return;
       }
@@ -3955,10 +4007,14 @@ var Ripple = {
         });
       }
 
+      if (item.to && navigate) {
+        navigate(event);
+      }
+
       this.activeItem = null;
     },
     onCategoryMouseEnter: function onCategoryMouseEnter(event, category) {
-      if (category.disabled) {
+      if (this.disabled(category)) {
         event.preventDefault();
         return;
       }
@@ -3968,7 +4024,7 @@ var Ripple = {
       }
     },
     onCategoryClick: function onCategoryClick(event, category) {
-      if (category.disabled) {
+      if (this.disabled(category)) {
         event.preventDefault();
         return;
       }
@@ -4100,15 +4156,17 @@ var Ripple = {
     },
     getSubmenuHeaderClass: function getSubmenuHeaderClass(submenu) {
       return ['p-megamenu-submenu-header', submenu.class, {
-        'p-disabled': submenu.disabled
+        'p-disabled': this.disabled(submenu)
       }];
     },
     getSubmenuItemClass: function getSubmenuItemClass(item) {
       return ['p-menuitem', item.class];
     },
-    getLinkClass: function getLinkClass(item) {
+    linkClass: function linkClass(item, routerProps) {
       return ['p-menuitem-link', {
-        'p-disabled': item.disabled
+        'p-disabled': this.disabled(item),
+        'router-link-active': routerProps && routerProps.isActive,
+        'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
       }];
     },
     bindDocumentClickListener: function bindDocumentClickListener() {
@@ -4134,6 +4192,12 @@ var Ripple = {
     },
     visible: function visible(item) {
       return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+    },
+    disabled: function disabled(item) {
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+    },
+    label: function label(item) {
+      return typeof item.label === 'function' ? item.label() : item.label;
     }
   },
   computed: {

package/megamenu/megamenu.umd.js

@@ -3182,12 +3182,22 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/megamenu/MegaMenu.vue?vue&type=template&id=05b736ec&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"p-megamenu-root-list",attrs:{"role":"menubar"}},[_vm._l((_vm.model),function(category,index){return [(_vm.visible(category))?_c('li',{key:category.label + '_' + index,class:_vm.getCategoryClass(category),style:(category.style),attrs:{"role":"none"},on:{"mouseenter":function($event){return _vm.onCategoryMouseEnter($event, category)}}},[_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.getLinkClass(category),attrs:{"href":category.url,"target":category.target,"role":"menuitem","aria-haspopup":category.items != null,"aria-expanded":category === _vm.activeItem,"tabindex":category.disabled ? null : '0'},on:{"click":function($event){return _vm.onCategoryClick($event, category)},"keydown":function($event){return _vm.onCategoryKeydown($event, category)}}},[(category.icon)?_c('span',{class:_vm.getCategoryIcon(category)}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(category.label))]),(category.items)?_c('span',{class:_vm.getCategorySubMenuIcon()}):_vm._e()]),(category.items)?_c('div',{staticClass:"p-megamenu-panel"},[_c('div',{staticClass:"p-megamenu-grid"},_vm._l((category.items),function(column,columnIndex){return _c('div',{key:category.label + '_column_' + columnIndex,class:_vm.getColumnClassName(category)},_vm._l((column),function(submenu,submenuIndex){return _c('ul',{key:submenu.label + '_submenu_' + submenuIndex,staticClass:"p-megamenu-submenu",attrs:{"role":"menu"}},[_c('li',{class:_vm.getSubmenuHeaderClass(submenu),style:(submenu.style),attrs:{"role":"presentation"}},[_vm._v(_vm._s(submenu.label))]),_vm._l((submenu.items),function(item,i){return [(_vm.visible(item) && !item.separator)?_c('li',{key:item.label + i,class:_vm.getSubmenuItemClass(item),style:(item.style),attrs:{"role":"none"}},[(item.to && !item.disabled)?_c('router-link',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.getLinkClass(item),attrs:{"to":item.to,"role":"menuitem"},nativeOn:{"click":function($event){return _vm.onLeafClick($event, item)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(item.label))])]):_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.getLinkClass(item),attrs:{"href":item.url,"target":item.target,"role":"menuitem","tabindex":item.disabled ? null : '0'},on:{"click":function($event){return _vm.onLeafClick($event, item)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(item.label))]),(item.items)?_c('span',{class:_vm.getSubmenuIcon()}):_vm._e()])],1):_vm._e(),(_vm.visible(item) && item.separator)?_c('li',{key:'separator' + i,class:['p-menu-separator', item.class],style:(item.style),attrs:{"role":"separator"}}):_vm._e()]})],2)}),0)}),0)]):_vm._e()]):_vm._e()]})],2),(_vm.$slots.default)?_c('div',{staticClass:"p-megamenu-custom"},[_vm._t("default")],2):_vm._e()])}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b9fe9a72-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/megamenu/MegaMenu.vue?vue&type=template&id=7ba247e8&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[(_vm.$slots.start)?_c('div',{staticClass:"p-megamenu-start"},[_vm._t("start")],2):_vm._e(),_c('ul',{staticClass:"p-megamenu-root-list",attrs:{"role":"menubar"}},[_vm._l((_vm.model),function(category,index){return [(_vm.visible(category))?_c('li',{key:_vm.label(category) + '_' + index,class:_vm.getCategoryClass(category),style:(category.style),attrs:{"role":"none"},on:{"mouseenter":function($event){return _vm.onCategoryMouseEnter($event, category)}}},[(category.to && !_vm.disabled(category))?_c('router-link',{attrs:{"to":category.to,"custom":""},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var navigate = ref.navigate;
+var href = ref.href;
+var isActive = ref.isActive;
+var isExactActive = ref.isExactActive;
+return [_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(category, {isActive: isActive, isExactActive: isExactActive}),attrs:{"href":href,"role":"menuitem"},on:{"click":function($event){return _vm.onCategoryClick($event, category, navigate)},"keydown":function($event){return _vm.onCategoryKeydown($event, category)}}},[(category.icon)?_c('span',{class:_vm.getCategoryIcon(category)}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(category)))])])]}}],null,true)}):_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(category),attrs:{"href":category.url,"target":category.target,"role":"menuitem","aria-haspopup":category.items != null,"aria-expanded":category === _vm.activeItem,"tabindex":_vm.disabled(category) ? null : '0'},on:{"click":function($event){return _vm.onCategoryClick($event, category)},"keydown":function($event){return _vm.onCategoryKeydown($event, category)}}},[(category.icon)?_c('span',{class:_vm.getCategoryIcon(category)}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(category)))]),(category.items)?_c('span',{class:_vm.getCategorySubMenuIcon()}):_vm._e()]),(category.items)?_c('div',{staticClass:"p-megamenu-panel"},[_c('div',{staticClass:"p-megamenu-grid"},_vm._l((category.items),function(column,columnIndex){return _c('div',{key:_vm.label(category) + '_column_' + columnIndex,class:_vm.getColumnClassName(category)},_vm._l((column),function(submenu,submenuIndex){return _c('ul',{key:_vm.label(submenu) + '_submenu_' + submenuIndex,staticClass:"p-megamenu-submenu",attrs:{"role":"menu"}},[_c('li',{class:_vm.getSubmenuHeaderClass(submenu),style:(submenu.style),attrs:{"role":"presentation"}},[_vm._v(_vm._s(_vm.label(submenu)))]),_vm._l((submenu.items),function(item,i){return [(_vm.visible(item) && !item.separator)?_c('li',{key:_vm.label(item) + i,class:_vm.getSubmenuItemClass(item),style:(item.style),attrs:{"role":"none"}},[(item.to && !_vm.disabled(item))?_c('router-link',{attrs:{"to":item.to,"custom":""},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var navigate = ref.navigate;
+var href = ref.href;
+var isActive = ref.isActive;
+var isExactActive = ref.isExactActive;
+return [_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(item, {isActive: isActive, isExactActive: isExactActive}),attrs:{"href":href,"role":"menuitem"},nativeOn:{"click":function($event){return _vm.onLeafClick($event, item, navigate)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(item)))])])]}}],null,true)}):_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],class:_vm.linkClass(item),attrs:{"href":item.url,"target":item.target,"role":"menuitem","tabindex":_vm.disabled(item) ? null : '0'},on:{"click":function($event){return _vm.onLeafClick($event, item, _vm.navigate)}}},[(item.icon)?_c('span',{class:['p-menuitem-icon', item.icon]}):_vm._e(),_c('span',{staticClass:"p-menuitem-text"},[_vm._v(_vm._s(_vm.label(item)))]),(item.items)?_c('span',{class:_vm.getSubmenuIcon()}):_vm._e()])],1):_vm._e(),(_vm.visible(item) && item.separator)?_c('li',{key:'separator' + i,class:['p-menu-separator', item.class],style:(item.style),attrs:{"role":"separator"}}):_vm._e()]})],2)}),0)}),0)]):_vm._e()],1):_vm._e()]})],2),(_vm.$slots.end)?_c('div',{staticClass:"p-megamenu-end"},[_vm._t("end")],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/megamenu/MegaMenu.vue?vue&type=template&id=05b736ec&
+// CONCATENATED MODULE: ./src/components/megamenu/MegaMenu.vue?vue&type=template&id=7ba247e8&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.symbol.async-iterator.js
 var es7_symbol_async_iterator = __webpack_require__("ac4d");
@@ -3246,6 +3256,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // CONCATENATED MODULE: ./src/components/utils/DomHandler.js
@@ -3778,6 +3793,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -3785,6 +3806,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = style;
+      } else {
+        for (var prop in style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -3795,6 +3827,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -3924,6 +3961,17 @@ var Ripple = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 /* harmony default export */ var MegaMenuvue_type_script_lang_js_ = ({
@@ -3935,6 +3983,10 @@ var Ripple = {
     orientation: {
       type: String,
       default: 'horizontal'
+    },
+    exact: {
+      type: Boolean,
+      default: true
     }
   },
   documentClickListener: null,
@@ -3947,8 +3999,8 @@ var Ripple = {
     this.unbindDocumentClickListener();
   },
   methods: {
-    onLeafClick: function onLeafClick(event, item) {
-      if (item.disabled) {
+    onLeafClick: function onLeafClick(event, item, navigate) {
+      if (this.disabled(item)) {
         event.preventDefault();
         return;
       }
@@ -3964,10 +4016,14 @@ var Ripple = {
         });
       }
 
+      if (item.to && navigate) {
+        navigate(event);
+      }
+
       this.activeItem = null;
     },
     onCategoryMouseEnter: function onCategoryMouseEnter(event, category) {
-      if (category.disabled) {
+      if (this.disabled(category)) {
         event.preventDefault();
         return;
       }
@@ -3977,7 +4033,7 @@ var Ripple = {
       }
     },
     onCategoryClick: function onCategoryClick(event, category) {
-      if (category.disabled) {
+      if (this.disabled(category)) {
         event.preventDefault();
         return;
       }
@@ -4109,15 +4165,17 @@ var Ripple = {
     },
     getSubmenuHeaderClass: function getSubmenuHeaderClass(submenu) {
       return ['p-megamenu-submenu-header', submenu.class, {
-        'p-disabled': submenu.disabled
+        'p-disabled': this.disabled(submenu)
       }];
     },
     getSubmenuItemClass: function getSubmenuItemClass(item) {
       return ['p-menuitem', item.class];
     },
-    getLinkClass: function getLinkClass(item) {
+    linkClass: function linkClass(item, routerProps) {
       return ['p-menuitem-link', {
-        'p-disabled': item.disabled
+        'p-disabled': this.disabled(item),
+        'router-link-active': routerProps && routerProps.isActive,
+        'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
       }];
     },
     bindDocumentClickListener: function bindDocumentClickListener() {
@@ -4143,6 +4201,12 @@ var Ripple = {
     },
     visible: function visible(item) {
       return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+    },
+    disabled: function disabled(item) {
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+    },
+    label: function label(item) {
+      return typeof item.label === 'function' ? item.label() : item.label;
     }
   },
   computed: {