add md-clearable to md-input-container (vuematerial#473)

* Add md-clearable to md-input-container

* Add docs for md-clearable

* Fix deprecated click event for clear button

Author: d3radicated

docs/src/pages/components/Input.vue

@@ -28,6 +28,12 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Show a button to toggle the password visibility. Default <code>false</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-clearable</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Show a button to clear the input. Default <code>false</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
 
@@ -176,6 +182,11 @@
                 <label>Disabled</label>
                 <md-input disabled></md-input>
               </md-input-container>
+
+              <md-input-container md-clearable>
+                <label>Clearable</label>
+                <md-input v-model="initialValue"></md-input>
+              </md-input-container>
             </form>
           </div>
 
@@ -211,6 +222,11 @@
                   &lt;label&gt;Disabled&lt;/label&gt;
                   &lt;md-input disabled&gt;&lt;/md-input&gt;
                 &lt;/md-input-container&gt;
+
+                &lt;md-input-container md-clearable&gt;
+                  &lt;label&gt;Clearable&lt;/label&gt;
+                  &lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
+                &lt;/md-input-container&gt;
               &lt;/form&gt;
             </code-block>
 

src/components/mdInputContainer/mdInputContainer.scss

@@ -215,6 +215,24 @@ $input-size: 32px;
     }
   }
 
+  &.md-clearable {
+    &.md-input-focused .md-clear-input {
+      color: rgba(#000, .54);
+    }
+
+    .md-clear-input {
+      margin: 0;
+      position: absolute;
+      right: 0;
+      bottom: -2px;
+      color: rgba(#000, .38);
+
+      .md-ink-ripple {
+        color: rgba(#000, .87);
+      }
+    }
+  }
+
   &.md-input-invalid {
     .md-error {
       opacity: 1;

src/components/mdInputContainer/mdInputContainer.vue

@@ -7,6 +7,10 @@
     <md-button class="md-icon-button md-toggle-password" @click.native="togglePasswordType" v-if="mdHasPassword">
       <md-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</md-icon>
     </md-button>
+
+    <md-button class="md-icon-button md-clear-input" @click.native="clearInput" v-if="mdClearable && hasValue">
+      <md-icon>clear</md-icon>
+    </md-button>
   </div>
 </template>
 
@@ -20,7 +24,8 @@
     name: 'md-input-container',
     props: {
       mdInline: Boolean,
-      mdHasPassword: Boolean
+      mdHasPassword: Boolean,
+      mdClearable: Boolean
     },
     mixins: [theme],
     data() {
@@ -51,6 +56,7 @@
         return {
           'md-input-inline': this.mdInline,
           'md-has-password': this.mdHasPassword,
+          'md-clearable': this.mdClearable,
           'md-has-select': this.hasSelect,
           'md-has-file': this.hasFile,
           'md-has-value': this.hasValue,
@@ -78,6 +84,13 @@
           this.input.focus();
         }
       },
+      clearInput() {
+        if (this.isInput()) {
+          this.input.value = '';
+          this.setValue(this.input.value);
+          this.$emit('input', this.input.value);
+        }
+      },
       setValue(value) {
         this.value = value;
       }