Totally refactors the input.

This commit has breaking changes, see full changelog.
Changes:
1. *Breaking* Refactored how classes works. Now they are applied on the root el$
2. *Breaking* Changed css-rules, old rules will not work.
3. Now `input` events are subscribed in template
4. Refactored how validation is handled
5. Now `:errorMessages` can be a `String`
6. Now `:disabled="true"` input has a dotted border
7. Fixed README.md and package.json

Closes #30, closes #31, closes #32, closes #33, closes #35, closes #38

README.md

@@ -40,4 +40,4 @@ const vm = new Vue({
 })
 ```
 
-For more examples, please check [`/dev`](https://github.com/wemake-services/vue-material-input/tree/master/dev) folder and the [project's website](http://wemake.services/vue-material-input).
+For more examples, please check [`/play`](https://github.com/wemake-services/vue-material-input/tree/master/play) folder and the [project's website](http://wemake.services/vue-material-input).

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-material-input",
   "version": "1.1.0",
-  "description": "Simple material input with no dependencies",
+  "description": "Simple implementation of Material Input with no dependencies",
   "author": "sobolevn <mail@sobolevn.me>",
   "private": false,
   "scripts": {

play/components/Constructor.vue

@@ -21,6 +21,11 @@
       <input type="text" v-model="childProperies.value" />
     </div>
 
+    <div class="example-field">
+      <label>Error value</label>
+      <input type="text" v-model="childProperies.errorMessages" />
+    </div>
+
     <div class="example-field">
       <label>Disabled</label>
       <input type="checkbox" v-model="childProperies.disabled" />
@@ -47,7 +52,8 @@
           placeholder: null,
           value: null,
           disabled: false,
-          readonly: false
+          readonly: false,
+          errorMessages: 'Error value'
         }
       }
     },
@@ -56,3 +62,62 @@
     }
   }
 </script>
+
+<style lang="sass">
+    // Theme:
+
+  $color-white: white;
+  $color-grey: #9E9E9E;
+  $color-grey-light: #E0F7FA;
+  $color-cyan: #00BCD4;
+  $color-cyan-dark: #006064;
+  $color-black: black;
+
+  .material-input--cyan {
+    background: $color-white;
+
+    .material-input {
+      background: none;
+      color: $color-black;
+      border-bottom: 1px solid $color-grey-light;
+    }
+
+    .material-label {
+      color: $color-grey;
+    }
+
+    .material-input-bar {
+      &:before,
+      &:after {
+        background: $color-cyan;
+      }
+    }
+
+    // Active state:
+
+    &.material--active {
+      .material-label {
+        color: $color-cyan;
+      }
+    }
+
+    // Errors:
+
+    &.material--has-errors {
+      &.material--active .material-label {
+        color: $color-cyan-dark;
+      }
+
+      .material-input-bar {
+        &:before,
+        &:after {
+          background: $color-cyan-dark;
+        }
+      }
+
+      .material-errors {
+        color: $color-cyan-dark;
+      }
+    }
+  }
+</style>

play/components/Validation.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="example">
-    <h1>
+    <h4>
       Validation
-    </h1>
+    </h4>
 
     <form @submit.prevent="submitHTMLForm">
-      <h2>
+      <h5>
         This example uses native html5 form validation
-      </h2>
+      </h5>
 
       <MaterialInput
         type="text"
@@ -25,10 +25,10 @@
     </form>
 
     <form @submit.prevent="submitVeeForm">
-      <h2>
+      <h5>
         This example uses
         <a href="http://vee-validate.logaretm.com/">vee-validate</a>
-      </h2>
+      </h5>
 
       <MaterialInput
         v-validate.initial="username"