From a929aafda9469d225e56644f4696fc63f2938461 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 22:04:00 -0200
Subject: [PATCH] Add keyboard shortcuts to menu

---
 src/components/mdMenu/mdMenu.scss       |  4 +++-
 src/components/mdMenu/mdMenuContent.vue | 23 +++++++++++++++++++++++
 src/components/mdMenu/mdMenuItem.vue    | 20 +++++++++++++++++++-
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/mdMenu/mdMenu.scss b/src/components/mdMenu/mdMenu.scss
index bad5934..d413f74 100644
--- a/src/components/mdMenu/mdMenu.scss
+++ b/src/components/mdMenu/mdMenu.scss
@@ -83,7 +83,9 @@ $menu-base-width: 56px;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &.md-highlighted {
     background-color: rgba(#000, .12);
     transition: $swift-ease-out;
   }
diff --git a/src/components/mdMenu/mdMenuContent.vue b/src/components/mdMenu/mdMenuContent.vue
index fb3d375..20fd37a 100644
--- a/src/components/mdMenu/mdMenuContent.vue
+++ b/src/components/mdMenu/mdMenuContent.vue
@@ -3,6 +3,10 @@
     class="md-menu-content"
     @keydown.esc.prevent="close"
     @keydown.tab.prevent="close"
+    @keydown.up.prevent="highlightItem(highlighted - 1)"
+    @keydown.down.prevent="highlightItem(highlighted + 1)"
+    @keydown.enter.prevent="fireClick"
+    @keydown.space.prevent="fireClick"
     tabindex="-1">
     <slot></slot>
   </div>
@@ -10,9 +14,28 @@
 
 <script>
   export default {
+    data() {
+      return {
+        highlighted: false,
+        itemsAmount: 0
+      };
+    },
     methods: {
       close() {
+        this.highlighted = false;
         this.$parent.close();
+      },
+      highlightItem(factor) {
+        if (factor >= 1 && factor <= this.itemsAmount) {
+          this.highlighted = factor;
+        } else {
+          this.highlighted = 1;
+        }
+      },
+      fireClick() {
+        if (this.highlighted > 0) {
+          this.$children[this.highlighted - 1].$el.click();
+        }
       }
     },
     mounted() {
diff --git a/src/components/mdMenu/mdMenuItem.vue b/src/components/mdMenu/mdMenuItem.vue
index 754f3fe..da4d251 100644
--- a/src/components/mdMenu/mdMenuItem.vue
+++ b/src/components/mdMenu/mdMenuItem.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="md-menu-item" @click="close">
+  <div
+    class="md-menu-item"
+    :class="classes"
+    @click="close">
     <div class="md-menu-item-content">
       <slot></slot>
     </div>
@@ -8,6 +11,18 @@
 
 <script>
   export default {
+    data() {
+      return {
+        index: 0
+      };
+    },
+    computed: {
+      classes() {
+        return {
+          'md-highlighted': this.index === this.$parent.highlighted
+        };
+      }
+    },
     methods: {
       close() {
         this.$emit('click');
@@ -20,6 +35,9 @@
 
         throw new Error('You must wrap the md-menu-item in a md-menu-content');
       }
+
+      this.$parent.itemsAmount++;
+      this.index = this.$parent.itemsAmount;
     }
   };
 </script>