Merge remote-tracking branch 'origin/develop' into components/mdDatepicker

* origin/develop:
  fix keycode recognition with german keyboards on mdChips (vuematerial#495)
  add support to router-link with md-button as tag vuematerial#470
  remove search field on toolbar example
  remove search field on toolbar example
  add scrollbar in phone viewport
  clear input container state if model is falsy
  fix icon src of bottombar item
  prevent ripple from being created multiple times in parent
  add md-clearable to md-input-container (vuematerial#473)
  scroll selected option into view
  fix spacing
  add name to all components
  scroll selected option into view
  fix ripple effect on touchscreen desktops (vuematerial#479)

Author: marcosmoura

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>
 

docs/src/pages/components/List.vue

@@ -1033,6 +1033,7 @@
 <style lang="sass" scoped>
   .phone-viewport {
     height: 480px;
+    overflow: auto;
   }
 
   .custom-list {

docs/src/pages/components/Toolbar.vue

@@ -90,11 +90,7 @@
                 <md-icon>menu</md-icon>
               </md-button>
 
-              <h2 class="md-title">Default</h2>
-
-              <md-input-container style="flex: 1">
-                <md-input placeholder="Search..." />
-              </md-input-container>
+              <h2 class="md-title" style="flex: 1">Default</h2>
 
               <md-button class="md-icon-button">
                 <md-icon>favorite</md-icon>

src/components/mdAvatar/mdAvatar.vue

@@ -10,6 +10,7 @@
   import theme from '../../core/components/mdTheme/mixin';
 
   export default {
+    name: 'md-avatar',
     mixins: [theme]
   };
 </script>

src/components/mdBackdrop/mdBackdrop.vue

@@ -6,6 +6,7 @@
 
 <script>
   export default {
+    name: 'md-backdrop',
     methods: {
       close() {
         this.$emit('close');

src/components/mdBottomBar/mdBottomBar.vue

@@ -10,6 +10,7 @@
   import theme from '../../core/components/mdTheme/mixin';
 
   export default {
+    name: 'md-bottom-bar',
     props: {
       mdShift: Boolean
     },

src/components/mdBottomBar/mdBottomBarItem.vue

@@ -1,7 +1,6 @@
 <template>
   <a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
-    
-    <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-icon-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
+    <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
 
     <md-ink-ripple :md-disabled="disabled" />
 
@@ -11,7 +10,6 @@
   </a>
 
   <button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
-    
     <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
 
     <md-ink-ripple :md-disabled="disabled" />
@@ -24,6 +22,7 @@
 
 <script>
   export default {
+    name: 'md-bottom-bar-item',
     props: {
       mdIcon: String,
       mdIconSrc: String,

src/components/mdButton/mdButton.vue

@@ -1,13 +1,13 @@
 <template>
-  <button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" v-if="!href">
+  <a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" @click="$emit('click', $event)" v-if="href">
     <md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
     <slot></slot>
-  </button>
+  </a>
 
-  <a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" v-else>
+  <button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" @click="$emit('click', $event)" v-else>
     <md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
     <slot></slot>
-  </a>
+  </button>
 </template>
 
 <style lang="scss" src="./mdButton.scss"></style>
@@ -16,6 +16,7 @@
   import theme from '../../core/components/mdTheme/mixin';
 
   export default {
+    name: 'md-button',
     props: {
       href: String,
       target: String,

src/components/mdButtonToggle/mdButtonToggle.vue

@@ -12,6 +12,7 @@
   let onClickButton;
 
   export default {
+    name: 'md-button-toggle',
     props: {
       mdSingle: Boolean
     },

src/components/mdCard/mdCard.vue

@@ -10,6 +10,7 @@
   import theme from '../../core/components/mdTheme/mixin';
 
   export default {
+    name: 'md-card',
     props: {
       mdWithHover: Boolean
     },

src/components/mdCard/mdCardActions.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-card-actions'
+  };
+</script>

src/components/mdCard/mdCardArea.vue

@@ -6,6 +6,7 @@
 
 <script>
   export default {
+    name: 'md-card-area',
     props: {
       mdInset: Boolean
     },

src/components/mdCard/mdCardContent.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-card-content'
+  };
+</script>

src/components/mdCard/mdCardExpand.vue

@@ -6,6 +6,7 @@
 
 <script>
   export default {
+    name: 'md-card-expand',
     methods: {
       setContentMargin() {
         this.content.style.marginTop = -this.content.offsetHeight + 'px';

src/components/mdCard/mdCardHeader.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-card-header'
+  };
+</script>

src/components/mdCard/mdCardHeaderText.vue

@@ -6,6 +6,7 @@
 
 <script>
   export default {
+    name: 'md-card-header-text',
     mounted() {
       this.parentClasses = this.$parent.$el.classList;
 

src/components/mdCard/mdCardMedia.vue

@@ -6,6 +6,7 @@
 
 <script>
   export default {
+    name: 'md-card-media',
     props: {
       mdRatio: String,
       mdMedium: Boolean,

src/components/mdCard/mdCardMediaActions.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-card-media-actions'
+  };
+</script>

src/components/mdCard/mdCardMediaCover.vue

@@ -9,6 +9,7 @@
   import getImageLightness from '../../core/utils/getImageLightness';
 
   export default {
+    name: 'md-card-media-cover',
     props: {
       mdTextScrim: Boolean,
       mdSolid: Boolean

src/components/mdCheckbox/mdCheckbox.vue

@@ -17,6 +17,7 @@
   import theme from '../../core/components/mdTheme/mixin';
 
   export default {
+    name: 'md-checkbox',
     props: {
       name: String,
       value: [String, Boolean],

src/components/mdChips/mdChip.vue

@@ -17,6 +17,7 @@
   import theme from '../../core/components/mdTheme/mixin';
 
   export default {
+    name: 'md-chip',
     props: {
       disabled: Boolean,
       mdDeletable: Boolean

src/components/mdChips/mdChips.vue

@@ -19,7 +19,6 @@
         :disabled="disabled"
         @keydown.native.delete="deleteLastChip"
         @keydown.native.prevent.enter="addChip"
-        @keydown.native.prevent.186="addChip"
         tabindex="0"
         ref="input">
       </md-input>
@@ -34,6 +33,7 @@
   import uniqueId from '../../core/utils/uniqueId';
 
   export default {
+    name: 'md-chips',
     props: {
       value: Array,
       disabled: Boolean,

src/components/mdDialog/mdDialog.vue

@@ -15,6 +15,7 @@
   import transitionEndEventName from '../../core/utils/transitionEndEventName';
 
   export default {
+    name: 'md-dialog',
     props: {
       mdClickOutsideToClose: {
         type: Boolean,

src/components/mdDialog/mdDialogActions.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-dialog-actions'
+  };
+</script>

src/components/mdDialog/mdDialogContent.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-dialog-content'
+  };
+</script>

src/components/mdDialog/mdDialogTitle.vue

@@ -3,3 +3,9 @@
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    name: 'md-dialog-title'
+  };
+</script>

src/components/mdDialog/presets/mdDialogAlert.vue

@@ -13,6 +13,7 @@
 
 <script>
   export default {
+    name: 'md-dialog-alert',
     props: {
       mdTitle: String,
       mdContent: String,

src/components/mdDialog/presets/mdDialogConfirm.vue

@@ -14,6 +14,7 @@
 
 <script>
   export default {
+    name: 'md-dialog-confirm',
     props: {
       mdTitle: String,
       mdContent: String,

src/components/mdDialog/presets/mdDialogPrompt.vue

@@ -27,6 +27,7 @@
 
 <script>
   export default {
+    name: 'md-dialog-prompt',
     props: {
       value: {
         type: [String, Number],

src/components/mdDivider/mdDivider.vue

@@ -3,3 +3,9 @@
 </template>
 
 <style lang="scss" src="./mdDivider.scss"></style>
+
+<script>
+  export default {
+    name: 'md-divider'
+  };
+</script>

src/components/mdFile/mdFile.vue

@@ -29,6 +29,7 @@
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
   export default {
+    name: 'md-file',
     props: {
       value: String,
       id: String,

src/components/mdIcon/mdIcon.vue

@@ -16,6 +16,7 @@
   let registeredIcons = {};
 
   export default {
+    name: 'md-icon',
     props: {
       mdSrc: String,
       mdIconset: {

src/components/mdImage/mdImage.vue

@@ -8,6 +8,7 @@
   import getImageLightness from '../../core/utils/getImageLightness';
 
   export default {
+    name: 'md-image',
     props: {
       mdSrc: String
     },

src/components/mdInputContainer/common.js

@@ -7,9 +7,8 @@ export default {
     placeholder: String
   },
   watch: {
-    value(value) {
-      this.setParentValue(value);
-      this.updateValues(value);
+    value() {
+      this.updateValues();
     },
     disabled() {
       this.setParentDisabled();
@@ -41,11 +40,13 @@ export default {
     setParentPlaceholder() {
       this.parentContainer.hasPlaceholder = !!this.placeholder;
     },
-    updateValues(value) {
-      const newValue = value || this.$el.value || this.value;
+    updateValues() {
+      this.$nextTick(() => {
+        const newValue = this.$el.value || this.value;
 
-      this.setParentValue(newValue);
-      this.parentContainer.inputLength = newValue ? newValue.length : 0;
+        this.setParentValue(newValue);
+        this.parentContainer.inputLength = newValue ? newValue.length : 0;
+      });
     },
     onFocus() {
       if (this.parentContainer) {