From 181762807f9a479434c9525cd47ecbf19cb47402 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 6 Sep 2016 00:24:38 -0300
Subject: [PATCH] Improve documentation

---
 src/components/mdInputContainer/base.js  |  0
 src/components/mdInputContainer/index.js |  6 +++---
 src/docs/pages/Input.vue                 | 19 +++++++++++--------
 3 files changed, 14 insertions(+), 11 deletions(-)
 delete mode 100644 src/components/mdInputContainer/base.js

diff --git a/src/components/mdInputContainer/base.js b/src/components/mdInputContainer/base.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/mdInputContainer/index.js b/src/components/mdInputContainer/index.js
index 8d2549a..86acad7 100644
--- a/src/components/mdInputContainer/index.js
+++ b/src/components/mdInputContainer/index.js
@@ -4,9 +4,9 @@ import mdTextarea from './mdTextarea.vue';
 import mdInputContainerTheme from './mdInputContainer.theme';
 
 export default function install(Vue) {
-  Vue.component('md-input-container', Vue.extend(mdInputContainer));
-  Vue.component('md-input', Vue.extend(mdInput));
-  Vue.component('md-textarea', Vue.extend(mdTextarea));
+  Vue.component('md-input-container', mdInputContainer);
+  Vue.component('md-input', mdInput);
+  Vue.component('md-textarea', mdTextarea);
 
   window.VueMaterial.styles.push(mdInputContainerTheme);
 }
diff --git a/src/docs/pages/Input.vue b/src/docs/pages/Input.vue
index 9af03fc..b239ee7 100644
--- a/src/docs/pages/Input.vue
+++ b/src/docs/pages/Input.vue
@@ -3,7 +3,7 @@
     <form novalidate @submit.stop.prevent="submit">
       <md-input-container>
         <label>Initial value</label>
-        <md-input value="My initial value"></md-input>
+        <md-input v-model="initialValue"></md-input>
       </md-input-container>
 
       <md-input-container>
@@ -19,6 +19,11 @@
       <md-input-container>
         <label>Required</label>
         <md-input required></md-input>
+      </md-input-container>
+
+      <md-input-container class="md-input-invalid">
+        <label>Error</label>
+        <md-input required></md-input>
 
         <span class="md-error">Validation message</span>
       </md-input-container>
@@ -41,18 +46,14 @@
       <md-input-container>
         <label>Character counter - Textarea</label>
         <md-textarea maxlength="70"></md-textarea>
-
-        <span class="md-error">Max length reached</span>
       </md-input-container>
 
       <md-input-container>
         <label>Character counter - Input</label>
         <md-input maxlength="20"></md-input>
-
-        <span class="md-error">Max length reached</span>
       </md-input-container>
 
-      <md-input-container v-md-theme="'blue'">
+      <md-input-container v-md-theme="'green'">
         <label>Themable - Input</label>
         <md-input></md-input>
       </md-input-container>
@@ -73,8 +74,10 @@
 
 <script>
   export default {
-    methods: {
-
+    data() {
+      return {
+        initialValue: 'My initial value'
+      };
     }
   };
 </script>