Start keyboard enhancements on mdSelect

package.json

@@ -16,19 +16,18 @@
   },
   "dependencies": {
     "autosize": "^3.0.17",
-    "highlight.js": "^9.6.0",
     "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim"
   },
   "devDependencies": {
     "babel-core": "^6.14.0",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.5",
-    "babel-plugin-transform-runtime": "^6.12.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-runtime": "^6.11.6",
     "connect-history-api-fallback": "^1.3.0",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.25.0",
     "eslint": "^3.4.0",
     "eslint-friendly-formatter": "^2.0.6",
     "eslint-loader": "^1.5.0",
@@ -41,13 +40,13 @@
     "html-webpack-plugin": "^2.22.0",
     "http-proxy-middleware": "^0.17.1",
     "json-loader": "^0.5.4",
-    "node-sass": "^3.8.0",
+    "node-sass": "^3.9.3",
     "ora": "^0.3.0",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^4.0.0",
+    "sass-loader": "^4.0.2",
     "shelljs": "^0.7.4",
     "url-loader": "^0.5.7",
-    "vue": "^2.0.0-rc.4",
+    "vue": "^2.0.0-rc.5",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^9.3.2",

src/components/mdSelect/mdOption.vue

@@ -11,6 +11,11 @@
     props: {
       value: [String, Boolean, Number]
     },
+    data() {
+      return {
+        index: 0
+      };
+    },
     methods: {
       selectOption() {
         if (this.$parent.$el.classList.contains('md-select')) {
@@ -28,6 +33,9 @@
 
         throw new Error('You should wrap the md-option in a md-select');
       }
+
+      this.$parent.optionsAmount++;
+      this.index = this.$parent.optionsAmount;
     }
   };
 </script>

src/components/mdSelect/mdSelect.vue

@@ -3,10 +3,16 @@
     class="md-select"
     :class="classes"
     :tabindex="disabled ? null : '0'"
-    v-on-clickaway="hideMenu">
-    <span class="md-select-value" @click="showMenu">{{ value }}</span>
+    v-on-clickaway="close">
+    <span class="md-select-value" @click="show">{{ value }}</span>
 
-    <div class="md-select-menu" tabindex="-1">
+    <div
+      class="md-select-menu"
+      tabindex="-1"
+      ref="menu"
+      @keydown.esc.prevent="close"
+      @keydown.up.prevent="highlightOption(-1)"
+      @keydown.down.prevent="highlightOption(1)">
       <div class="md-select-menu-container">
         <slot></slot>
       </div>
@@ -31,7 +37,9 @@
     },
     data() {
       return {
-        active: false
+        active: false,
+        highlighted: false,
+        optionsAmount: 0
       };
     },
     computed: {
@@ -43,14 +51,23 @@
       }
     },
     methods: {
-      showMenu() {
+      show() {
+        this.$refs.menu.focus();
         this.active = true;
       },
-      hideMenu() {
+      close() {
+        this.$refs.menu.blur();
         this.active = false;
       },
+      highlightOption(factor) {
+        let factorAbs = Math.abs(factor);
+
+        if (factorAbs >= 0 && factorAbs <= this.optionsAmount) {
+          this.highlighted += factor;
+        }
+      },
       selectOption(value) {
-        this.hideMenu();
+        this.close();
         this.$parent.setValue(value);
         this.$emit('change', value);
         this.$emit('input', value);