Init upgrade of select

src/components/mdInputContainer/mdInputContainer.vue

@@ -24,12 +24,14 @@
         return {
           'md-input-inline': this.mdInline,
           'md-has-password': this.mdHasPassword,
-          'md-has-select': this.mdHasSelect
+          'md-has-select': this.mdHasSelect,
+          'md-has-value': Boolean(this.value)
         };
       }
     },
     data() {
       return {
+        value: null,
         input: false,
         inputType: false,
         showPassword: false,
@@ -54,6 +56,9 @@
 
           this.input.focus();
         }
+      },
+      setValue(value) {
+        this.value = value;
       }
     },
     mounted() {
@@ -66,10 +71,6 @@
       }
 
       this.inputType = this.input.type;
-
-      if (this.$el.querySelector('select')) {
-        this.mdHasSelect = true;
-      }
     }
   };
 </script>

src/components/mdSelect/mdOption.vue

@@ -9,15 +9,7 @@
 <script>
   export default {
     props: {
-      value: {
-        type: [String, Boolean],
-        required: true
-      }
-    },
-    data() {
-      return {
-        parent: null
-      };
+      value: [String, Boolean, Number]
     },
     methods: {
       selectOption() {
@@ -31,8 +23,6 @@
     mounted() {
       let parentClasses = this.$parent.$el.classList;
 
-      this.parent = this.$parent;
-
       if (!parentClasses.contains('md-select') && !parentClasses.contains('md-option-group')) {
         this.$destroy();
 

src/components/mdSelect/mdSelect.vue

@@ -3,9 +3,7 @@
     class="md-select"
     :class="classes"
     :tabindex="disabled ? null : '0'"
-    v-on-clickaway="hideMenu"
-    @invalid="onInvalid"
-    @valid="onValid">
+    v-on-clickaway="hideMenu">
     <span class="md-select-value" @click="showMenu">{{ value }}</span>
 
     <div class="md-select-menu" tabindex="-1">
@@ -23,17 +21,6 @@
 <style lang="scss" src="./mdSelect.scss"></style>
 
 <script>
-  let hasValueClass = 'md-has-value';
-  let invalidClass = 'md-input-invalid';
-
-  let handleModelValue = (target, value) => {
-    if (value) {
-      target.add(hasValueClass);
-    } else {
-      target.remove(hasValueClass);
-    }
-  };
-
   export default {
     props: {
       name: String,
@@ -56,20 +43,17 @@
       }
     },
     methods: {
-      onInvalid() {
-        this.$parent.$el.classList.add(invalidClass);
-      },
-      onValid() {
-        this.$parent.$el.classList.remove(invalidClass);
-      },
       showMenu() {
         this.active = true;
       },
       hideMenu() {
         this.active = false;
       },
-      selectOption() {
+      selectOption(value) {
         this.hideMenu();
+        this.$parent.setValue(value);
+        this.$emit('change', value);
+        this.$emit('input', value);
       }
     },
     mounted() {
@@ -78,6 +62,13 @@
 
         throw new Error('You should wrap the md-select in a md-input-container');
       }
+
+      this.$parent.setValue(this.value);
+      this.$parent.hasSelect = true;
+    },
+    beforeDestroy() {
+      this.$parent.setValue(null);
+      this.$parent.hasSelect = false;
     }
   };
 </script>

src/docs/pages/Select.vue

@@ -5,7 +5,7 @@
     <div class="field-group">
       <md-input-container>
         <label for="movie">Movie</label>
-        <md-select v-model="movie" name="movie" id="movie">
+        <md-select name="movie" id="movie" v-model="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 v-model="country" name="country" id="country">
+        <md-select name="country" id="country" v-model="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 v-model="font" name="font" id="font">
+        <md-select name="font" id="font" v-model="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 v-model="food" name="food" id="food">
+        <md-select name="food" id="food" v-model="food">
           <md-optgroup label="Fruits">
             <md-option value="Apples">Apples</md-option>
             <md-option value="Bananas">Bananas</md-option>