Implemented TieredMenu

src/assets/styles/primevue.css

@@ -2,7 +2,6 @@
 @import '../../components/button/Button.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/inputtext/InputText.css';
-@import '../../components/menu/Menu.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';
 @import '../../components/splitbutton/SplitButton.css';

src/components/menu/Menu.vue

@@ -160,3 +160,48 @@ export default {
     }
 }
 </script>
+
+<style>
+.p-menu {
+    width: 12.5em;
+    padding: .25em;
+}
+
+.p-menu.p-menu-dynamic {
+    position: absolute;
+}
+
+.p-menu .p-menu-separator {
+    border-width: 1px 0 0 0;
+}
+
+.p-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-menu .p-submenu-header {
+    padding: .25em .5em;
+    margin: .125em 0;
+}
+
+.p-menu .p-menuitem {
+    margin: .125em 0;
+}
+
+.p-menu .p-menuitem-link {
+    padding: .25em;
+    display: block;
+    text-decoration: none;
+}
+
+.p-menu .p-menuitem-icon {
+    margin-right: .25em;
+    vertical-align: middle;
+}
+
+.p-menu .p-menuitem-text {
+    vertical-align: middle;
+}
+</style>

src/components/tieredmenu/TieredMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="p-input-overlay" @enter="onEnter" @leave="onLeave">
         <div ref="container" :class="containerClass" v-if="popup ? visible : true">
-            <TieredMenuSub :model="model" :root="true" />
+            <TieredMenuSub :model="model" :root="true" :popup="popup" />
         </div>
     </transition>
 </template>
@@ -159,7 +159,6 @@ export default {
 
 .p-tieredmenu.p-tieredmenu-dynamic {
     position: absolute;
-    display: none;
 }
 
 .p-tieredmenu .p-menu-separator {

src/components/tieredmenu/TieredMenuSub.vue

@@ -1,17 +1,21 @@
 <template>
     <ul ref="element" :class="containerClass" role="menu">
         <template v-for="(item, i) of model">
-            <li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
+            <li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
-                <router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
+                @mouseenter="onItemMouseEnter($event, item)">
+                <router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
+                    @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </router-link>
-                <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
+                <a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target"
+                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                     <span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
                 </a>
-                <sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'"></sub-menu>
+                <sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'"
+                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
             </li>
             <li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
         </template>
@@ -19,6 +23,8 @@
 </template>
 
 <script>
+import DomHandler from '../utils/DomHandler';
+
 export default {
     name: 'sub-menu',
     props: {
@@ -39,19 +45,178 @@ export default {
             default: false
         }
     },
+    documentClickListener: null,
+    watch: {
+        parentActive(newValue) {
+            if (!newValue) {
+                this.activeItem = null;
+            }
+        }
+    },
+    data() {
+        return {
+            activeItem: null
+        }
+    },
+    updated() {
+        if (this.root && this.activeItem) {
+            this.bindDocumentClickListener();
+        }
+    },
+    beforeDestroy() {
+        this.unbindDocumentClickListener();
+    },
     methods: {
+        onItemMouseEnter(event, item) {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
+
+            if (this.root) {
+                if (this.activeItem || this.popup) {
+                    this.activeItem = item;
+                }
+            }
+            else {
+                this.activeItem = item;
+            }
+        },
+        onItemClick(event, item) {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (this.root && item.items) {
+                if (this.activeItem && item === this.activeItem)
+                    this.activeItem = null;
+                else
+                   this.activeItem = item;
+            }
+
+            if (!item.items) {
+                this.onLeafClick();
+            }
+        },
+        onLeafClick() {
+            this.activeItem = null;
+
+            if (!this.root) {
+                this.$emit('leaf-click');
+            }
+        },
+        onItemKeyDown(event, item) {
+            let listItem = event.currentTarget.parentElement;
+
+            switch (event.which) {
+                //down
+                case 40:
+                    var nextItem = this.findNextItem(listItem);
+                    if (nextItem) {
+                        nextItem.children[0].focus();
+                    }
+
+                    event.preventDefault();
+                break;
+
+                //up
+                case 38:
+                    var prevItem = this.findPrevItem(listItem);
+                    if (prevItem) {
+                        prevItem.children[0].focus();
+                    }
+
+                    event.preventDefault();
+                break;
+
+                //right
+                case 39:
+                    if (item.items) {
+                        this.activeItem = item;
+
+                        setTimeout(() => {
+                            listItem.children[1].children[0].children[0].focus();
+                        }, 50);
+                    }
+
+                    event.preventDefault();
+                break;
+
+                default:
+                break;
+            }
+
+            this.$emit('keydown-item', {
+                originalEvent: event,
+                element: listItem
+            });
+        },
+        onChildItemKeyDown(event) {
+            //left
+            if (event.originalEvent.which === 37) {
+                this.activeItem = null;
+                event.element.parentElement.previousElementSibling.focus();
+            }
+        },
+        findNextItem(item) {
+            let nextItem = item.nextElementSibling;
+
+            if (nextItem)
+                return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+            else
+                return null;
+        },
+        findPrevItem(item) {
+            let prevItem = item.previousElementSibling;
+
+            if (prevItem)
+                return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+            else
+                return null;
+        },
         getItemClass(item) {
             return [
-                'p-menuitem', {
+                'p-menuitem', item.class, {
-                    'p-disabled': item.disabled
+                    'p-menuitem-active': this.activeItem === item,
+                    'p-disabled': item.disabled,
                 }
             ]
+        },
+        bindDocumentClickListener() {
+            if (!this.documentClickListener) {
+                this.documentClickListener = (event) => {
+                    if (this.$el && !this.$el.contains(event.target)) {
+                        this.activeItem = null;
+                        this.unbindDocumentClickListener();
+                    }
+                };
+
+                document.addEventListener('click', this.documentClickListener);
+            }
+        },
+        unbindDocumentClickListener() {
+            if (this.documentClickListener) {
+                document.removeEventListener('click', this.documentClickListener);
+                this.documentClickListener = null;
+            }
         }
     },
     computed: {
         containerClass() {
             return {'p-submenu-list': !this.root};
         }
-    } 
+    }
 }
 </script>

src/views/tieredmenu/TieredMenuDemo.vue

@@ -43,7 +43,7 @@ export default {
                                label:'Video',
                                icon:'pi pi-fw pi-video'
                             },
-             
+
                          ]
                       },
                       {
@@ -79,7 +79,7 @@ export default {
                          label:'Justify',
                          icon:'pi pi-fw pi-align-justify'
                       },
-             
+
                    ]
                 },
                 {
@@ -89,12 +89,12 @@ export default {
                       {
                          label:'New',
                          icon:'pi pi-fw pi-user-plus',
-             
+
                       },
                       {
                          label:'Delete',
                          icon:'pi pi-fw pi-user-minus',
-             
+
                       },
                       {
                          label:'Search',
@@ -134,7 +134,7 @@ export default {
                                label:'Delete',
                                icon:'pi pi-fw pi-calendar-minus'
                             },
-             
+
                          ]
                       },
                       {