Add v-model to select

src/components/mdSelect/mdSelect.vue

@@ -6,7 +6,7 @@
     v-on-clickaway="hideMenu"
     @invalid="onInvalid"
     @valid="onValid">
-    <span class="md-select-value" @click="showMenu">{{ model }}</span>
+    <span class="md-select-value" @click="showMenu">{{ value }}</span>
 
     <div class="md-select-menu" tabindex="-1">
       <div class="md-select-menu-container">
@@ -14,8 +14,8 @@
       </div>
     </div>
 
-    <select v-model="model" :name="name" :id="id" :required="required" tabindex="-1">
-      <option :value="model">{{ model }}</option>
+    <select :name="name" :id="id" :required="required" tabindex="-1">
+      <option :value="value">{{ value }}</option>
     </select>
   </div>
 </template>
@@ -36,14 +36,9 @@
 
   export default {
     props: {
-      model: {
-        type: [String, Array, Boolean],
-        required: true,
-        twoWay: true
-      },
       name: String,
       required: Boolean,
-      value: String,
+      value: [String, Number, Boolean],
       id: String,
       disabled: Boolean
     },
@@ -60,11 +55,6 @@
         };
       }
     },
-    watch: {
-      model(value) {
-        handleModelValue(this.$parent.$el.classList, value);
-      }
-    },
     methods: {
       onInvalid() {
         this.$parent.$el.classList.add(invalidClass);
@@ -78,8 +68,7 @@
       hideMenu() {
         this.active = false;
       },
-      selectOption(option) {
-        this.model = option;
+      selectOption() {
         this.hideMenu();
       }
     },
@@ -89,8 +78,6 @@
 
         throw new Error('You should wrap the md-select in a md-input-container');
       }
-
-      handleModelValue(this.$parent.$el.classList, this.model);
     }
   };
 </script>

src/components/mdToolbar/mdToolbar.scss

@@ -5,6 +5,7 @@
   padding: 0 8px;
   display: flex;
   align-items: center;
+  align-content: center;
   flex-flow: row wrap;
 
   &.md-dense {
@@ -21,6 +22,7 @@
 
   &.md-extended {
     min-height: 128px;
+    align-content: inherit;
 
     .md-toolbar-container:nth-child(2) {
       .md-title:first-child {
@@ -86,6 +88,7 @@
   }
 
   .md-title {
+    margin: 0;
     font-size: 20px;
     font-weight: 400;
     line-height: 24px;

src/docs/App.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
       <md-toolbar v-md-theme="'white'">
-        <span class="md-title">Vue Material</span>
+        <a href="/" class="md-title">Vue Material</a>
       </md-toolbar>
 
       <md-list>

src/docs/pages/Select.vue

@@ -5,7 +5,7 @@
     <div class="field-group">
       <md-input-container>
         <label for="movie">Movie</label>
-        <md-select :model.sync="movie" :name="movie" id="movie">
+        <md-select v-model="movie" name="movie" id="movie">
           <md-option value="Fight Club">Fight Club</md-option>
           <md-option value="Godfather II">Godfather II</md-option>
           <md-option value="Godfather III">Godfather III</md-option>
@@ -18,7 +18,7 @@
 
       <md-input-container>
         <label for="country">Country</label>
-        <md-select :model.sync="country" name="country" id="country">
+        <md-select v-model="country" name="country" id="country">
           <md-option value="Australia">Australia</md-option>
           <md-option value="Brazil">Brazil</md-option>
           <md-option value="Japan">Japan</md-option>
@@ -28,7 +28,7 @@
 
       <md-input-container>
         <label for="font">Font</label>
-        <md-select :model.sync="font" name="font" id="font">
+        <md-select v-model="font" name="font" id="font">
           <md-option value="Arial">Arial</md-option>
           <md-option value="Calibri">Calibri</md-option>
           <md-option value="Cambria">Cambria</md-option>
@@ -49,7 +49,7 @@
 
       <md-input-container>
         <label for="food">Food</label>
-        <md-select :model.sync="food" name="food" id="food">
+        <md-select v-model="food" name="food" id="food">
           <md-optgroup label="Fruits">
             <md-option value="Apples">Apples</md-option>
             <md-option value="Bananas">Bananas</md-option>