From ca144b52ba43829d0268909578f7d17e4fe1c3e0 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Sun, 3 Dec 2017 16:21:59 -0200
Subject: [PATCH 01/72] docs(MdLayout): add example of nested columns

---
 docs/app/pages/UiElements/Layout/Layout.vue   |  8 ++-
 .../examples/LayoutHorizontalNested.vue       | 59 +++++++++++++++++++
 .../Layout/examples/LayoutHorizontalReal.vue  | 33 -----------
 src/components/MdLayout/layout.scss           |  4 ++
 4 files changed, 70 insertions(+), 34 deletions(-)
 create mode 100644 docs/app/pages/UiElements/Layout/examples/LayoutHorizontalNested.vue
 delete mode 100644 docs/app/pages/UiElements/Layout/examples/LayoutHorizontalReal.vue

diff --git a/docs/app/pages/UiElements/Layout/Layout.vue b/docs/app/pages/UiElements/Layout/Layout.vue
index e3ed704e8..eaf7e26f9 100644
--- a/docs/app/pages/UiElements/Layout/Layout.vue
+++ b/docs/app/pages/UiElements/Layout/Layout.vue
@@ -4,7 +4,7 @@
 <example src="./examples/LayoutHorizontalAlignment.vue" />
 <example src="./examples/LayoutHorizontalResponsive.vue" />
 <example src="./examples/LayoutHorizontalHide.vue" />
-<example src="./examples/LayoutHorizontalReal.vue" />
+<example src="./examples/LayoutHorizontalNested.vue" />
 
 <template>
   <page-container centered :title="$t('pages.layout.title')">
@@ -35,6 +35,12 @@
       <code-example title="Gutter" :component="examples['layout-horizontal-gutter']" />
     </div>
 
+    <div class="page-container-section">
+      <p>By default layout items do not have space between each other. This can be kind of bad for regular layouts, like a list of card, for example. You can set Vue Material to calculate automatically the space between elements and those spaces are based on the screen width, using the same breakpoints:</p>
+      <api-table :headings="gutter.props.headings" :props="gutter.props.props" slot="props" />
+      <code-example title="Nested columns" :component="examples['layout-horizontal-nested']" />
+    </div>
+
     <div class="page-container-section">
       <p>You can use layouts for almost anything on your app, even for small parts. To help you with that you can have differents alignments per <code>md-layout</code>, combining horizontal and vertical alignments, using the <code>md-alignment-[horizontal]-[vertical]</code> class, e.g. <code>md-alignment-top-center</code>. The alignment works on the parent element and will affect the position of all children items:</p>
       <code-example title="Alignments" :component="examples['layout-horizontal-alignment']" />
diff --git a/docs/app/pages/UiElements/Layout/examples/LayoutHorizontalNested.vue b/docs/app/pages/UiElements/Layout/examples/LayoutHorizontalNested.vue
new file mode 100644
index 000000000..1f52efc3c
--- /dev/null
+++ b/docs/app/pages/UiElements/Layout/examples/LayoutHorizontalNested.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="md-layout md-gutter">
+      <div class="md-layout-item md-layout md-gutter">
+        <div class="md-layout-item"></div>
+        <div class="md-layout-item"></div>
+        <div class="md-layout-item"></div>
+      </div>
+
+      <div class="md-layout-item md-layout md-gutter">
+        <div class="md-layout-item"></div>
+        <div class="md-layout-item"></div>
+      </div>
+
+      <div class="md-layout-item md-layout md-gutter">
+        <div class="md-layout-item"></div>
+        <div class="md-layout-item"></div>
+        <div class="md-layout-item"></div>
+        <div class="md-layout-item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'LayoutHorizontalNested'
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~vue-material/theme/engine";
+
+  .md-layout-item {
+    height: 72px;
+
+    &:after {
+      width: 100%;
+      height: 100%;
+      display: block;
+      content: " ";
+    }
+
+    &.md-layout {
+      &:after {
+        transform: translateY(-100%);
+        background: md-get-palette-color(yellow, 200);
+      }
+
+      .md-layout-item:after {
+        height: 40px;
+        margin-top: 16px;
+        position: relative;
+        z-index: 1;
+        background: md-get-palette-color(pink, 200);
+      }
+    }
+  }
+</style>
diff --git a/docs/app/pages/UiElements/Layout/examples/LayoutHorizontalReal.vue b/docs/app/pages/UiElements/Layout/examples/LayoutHorizontalReal.vue
deleted file mode 100644
index 7ddefda0a..000000000
--- a/docs/app/pages/UiElements/Layout/examples/LayoutHorizontalReal.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="md-layout">
-    <div class="md-layout-item"></div>
-    <div class="md-layout-item"></div>
-    <div class="md-layout-item"></div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'LayoutHorizontalColumns'
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "~vue-material/theme/engine";
-
-  .md-layout-item {
-    height: 40px;
-
-    &:nth-child(1) {
-      background: md-get-palette-color(grey, 300);
-    }
-
-    &:nth-child(2) {
-      background: md-get-palette-color(grey, 400);
-    }
-
-    &:nth-child(3) {
-      background: md-get-palette-color(grey, 500);
-    }
-  }
-</style>
diff --git a/src/components/MdLayout/layout.scss b/src/components/MdLayout/layout.scss
index 9e8aabd0d..62670ec33 100644
--- a/src/components/MdLayout/layout.scss
+++ b/src/components/MdLayout/layout.scss
@@ -56,6 +56,10 @@
 .md-layout-item {
   flex: 1 1;
 
+  &.md-layout {
+    margin: 0;
+  }
+
   @include md-layout-item;
 
   @include md-layout-medium {

From 1c027521b966aff87947f24cdcf741e4f8706c42 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Sun, 3 Dec 2017 16:23:11 -0200
Subject: [PATCH 02/72] docs(MdLayout): add example of nested columns

---
 docs/app/pages/UiElements/Layout/Layout.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/app/pages/UiElements/Layout/Layout.vue b/docs/app/pages/UiElements/Layout/Layout.vue
index eaf7e26f9..4a43dca0b 100644
--- a/docs/app/pages/UiElements/Layout/Layout.vue
+++ b/docs/app/pages/UiElements/Layout/Layout.vue
@@ -36,8 +36,7 @@
     </div>
 
     <div class="page-container-section">
-      <p>By default layout items do not have space between each other. This can be kind of bad for regular layouts, like a list of card, for example. You can set Vue Material to calculate automatically the space between elements and those spaces are based on the screen width, using the same breakpoints:</p>
-      <api-table :headings="gutter.props.headings" :props="gutter.props.props" slot="props" />
+      <p>Layout columns also work with nested layouts:</p>
       <code-example title="Nested columns" :component="examples['layout-horizontal-nested']" />
     </div>
 

From c83f2a6ee12cd61fcac84a7653b9b6643ee5333c Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Mon, 4 Dec 2017 02:24:22 +0800
Subject: [PATCH 03/72] fix(MdTextarea): prevent emitting `inputEvent` object
 on `input` (#1249)

fix #1247
---
 src/components/MdField/MdTextarea/MdTextarea.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/MdField/MdTextarea/MdTextarea.vue b/src/components/MdField/MdTextarea/MdTextarea.vue
index ba7ccce5b..b04f08879 100644
--- a/src/components/MdField/MdTextarea/MdTextarea.vue
+++ b/src/components/MdField/MdTextarea/MdTextarea.vue
@@ -4,7 +4,7 @@
     :style="textareaStyles"
     v-model="model"
     v-bind="attributes"
-    v-on="$listeners"
+    v-on="listeners"
     @focus="onFocus"
     @blur="onBlur">
   </textarea>
@@ -47,6 +47,12 @@
       mdAutogrow: Boolean
     },
     computed: {
+      listeners () {
+        return {
+          ...this.$listeners,
+          input: event => this.$emit('input', event.target.value)
+        }
+      },
       textareaStyles () {
         return {
           height: this.textareaHeight

From 82eef9300e11d4407ed820f217f8005bce442343 Mon Sep 17 00:00:00 2001
From: Nick Radford <nick@nicholasradford.com>
Date: Sun, 3 Dec 2017 10:24:54 -0800
Subject: [PATCH 04/72] docs(MdApp): Fixes link from md-app to md-content
 (#1252)

Was previously linked to md-drawer.
---
 docs/app/pages/Components/App/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/pages/Components/App/App.vue b/docs/app/pages/Components/App/App.vue
index 2bc479eff..a17a73a93 100644
--- a/docs/app/pages/Components/App/App.vue
+++ b/docs/app/pages/Components/App/App.vue
@@ -108,7 +108,7 @@
       <api-item title="API - md-app-content">
         <i18n path="pages.app.apiContent.desc" tag="p">
           <code>md-content</code>
-          <router-link to="/components/drawer">{{ $t('pages.app.apiContent.page') }}</router-link>
+          <router-link to="/components/content">{{ $t('pages.app.apiContent.page') }}</router-link>
         </i18n>
       </api-item>
     </div>

From ee79a3464a5b6b6607b91275abd89986d4af5f99 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Sun, 3 Dec 2017 23:54:03 -0200
Subject: [PATCH 05/72] chore: fix peerDependecies

---
 package.json | 19 ++++++++++---------
 yarn.lock    | 12 ++----------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index f71069385..6fc268bf0 100644
--- a/package.json
+++ b/package.json
@@ -38,16 +38,10 @@
   "engines": {
     "node": ">= 7.0"
   },
-  "dependencies": {
-    "date-fns": "^1.29.0",
-    "deepmerge": "^2.0.1",
-    "fuzzysearch": "^1.0.3",
-    "is-promise": "^2.1.0",
-    "popper.js": "^1.12.6",
-    "raf": "^3.4.0",
-    "vue": "^2.5.3",
-    "vue-ga": "^1.0.0"
+  "peerDependencies": {
+    "vue": "^2.5.0"
   },
+  "dependencies": {},
   "devDependencies": {
     "autoprefixer": "^7.1.6",
     "avoriaz": "^6.0.1",
@@ -71,6 +65,8 @@
     "css-loader": "^0.28.7",
     "css-mqpacker": "^6.0.1",
     "cz-conventional-changelog": "^2.1.0",
+    "date-fns": "^1.29.0",
+    "deepmerge": "^2.0.1",
     "eslint": "^4.10.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-plugin-import": "^2.8.0",
@@ -85,10 +81,12 @@
     "fast-deep-equal": "^1.0.0",
     "file-loader": "^1.1.5",
     "friendly-errors-webpack-plugin": "^1.6.1",
+    "fuzzysearch": "^1.0.3",
     "github-release-cli": "^0.3.0",
     "highlight.js": "^9.12.0",
     "html-webpack-plugin": "^2.30.1",
     "is-firefox": "^1.0.3",
+    "is-promise": "^2.1.0",
     "jest": "^21.2.1",
     "jest-css-modules": "^1.1.0",
     "jest-vue": "^0.8.2",
@@ -97,14 +95,17 @@
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "optimize-js-plugin": "^0.0.4",
     "ora": "^1.3.0",
+    "popper.js": "^1.12.9",
     "postcss": "^6.0.14",
     "preload-webpack-plugin": "^2.0.0",
     "prerender-spa-plugin": "^2.1.0",
     "prettier": "^1.8.2",
     "pretty": "^2.0.0",
+    "raf": "^3.4.0",
     "sass-loader": "^6.0.6",
     "sinon": "^4.1.1",
     "url-loader": "^0.6.2",
+    "vue-ga": "^1.0.0",
     "vue-i18n": "^7.3.2",
     "vue-loader": "^13.4.0",
     "vue-router": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index 1da921565..1651f8f7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5451,7 +5451,7 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
-popper.js@^1.12.6:
+popper.js@^1.12.9:
   version "1.12.9"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3"
 
@@ -5761,11 +5761,7 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.7.0:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8"
-
-prettier@^1.8.2:
+prettier@^1.7.0, prettier@^1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8"
 
@@ -7235,10 +7231,6 @@ vue-template-es2015-compiler@^1.5.3, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.5.3:
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.9.tgz#b2380cd040915dca69881dafd121d760952e65f7"
-
 vuelidate@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.6.1.tgz#c52c9fd2b48f974613485e2cf51c182e84bcf747"

From 72bba162c28f43770ef790f18da4b5692fc0a92d Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 4 Dec 2017 00:58:34 -0200
Subject: [PATCH 06/72] chore: fix peerDependecies

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 6fc268bf0..0a14deb69 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "sass-loader": "^6.0.6",
     "sinon": "^4.1.1",
     "url-loader": "^0.6.2",
+    "vue": "^2.5.9",
     "vue-ga": "^1.0.0",
     "vue-i18n": "^7.3.2",
     "vue-loader": "^13.4.0",

From 90733136b2dd6a3d166848f20ad266b7114bef38 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 6 Dec 2017 00:33:11 +0800
Subject: [PATCH 07/72] feat(MdApp): custom class and style (#1256)

1254
---
 src/components/MdApp/MdApp.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/MdApp/MdApp.vue b/src/components/MdApp/MdApp.vue
index 0c12b4a1b..cc38763ef 100644
--- a/src/components/MdApp/MdApp.vue
+++ b/src/components/MdApp/MdApp.vue
@@ -46,7 +46,7 @@
   export default {
     name: 'MdApp',
     functional: true,
-    render (createElement, { children, props }) {
+    render (createElement, { children, props, data }) {
       let appComponent = MdAppSideDrawer
       const { context, functionalContext, componentOptions } = createElement(appComponent)
       const slots = buildSlots(children, context, functionalContext, componentOptions)
@@ -58,8 +58,18 @@
         }
       })
 
+      const staticClass = {}
+      if (data.staticClass) {
+        data.staticClass.split(/\s+/).forEach(name => {
+          if (name.length === 0) return
+          staticClass[name] = true
+        })
+      }
+
       return createElement(appComponent, {
-        attrs: props
+        attrs: props,
+        class: {...staticClass, ...data.class},
+        style: {...data.staticStyle, ...data.style},
       }, slots)
     }
   }

From ef720c4c024f21f5425c5fb566eaa39c948209db Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 6 Dec 2017 10:53:21 +0800
Subject: [PATCH 08/72] fix(MdMenu): Close menu while another is opened (#1266)

Remove `stopPropagation` from `MdMenu` to trigger close-menu click observer

fix #1255
---
 src/components/MdMenu/MdMenu.vue        | 5 +++--
 src/components/MdMenu/MdMenuContent.vue | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/MdMenu/MdMenu.vue b/src/components/MdMenu/MdMenu.vue
index 7dd55b53f..2fff86ea9 100644
--- a/src/components/MdMenu/MdMenu.vue
+++ b/src/components/MdMenu/MdMenu.vue
@@ -57,7 +57,8 @@
           dense: this.mdDense,
           closeOnSelect: this.mdCloseOnSelect,
           bodyClickObserver: null,
-          windowResizeObserver: null
+          windowResizeObserver: null,
+          $el: this.$el
         }
       }
     },
@@ -105,11 +106,11 @@
     },
     methods: {
       toggleContent ($event) {
-        $event.stopPropagation()
         this.MdMenu.active = !this.MdMenu.active
       }
     },
     async mounted () {
+      this.MdMenu.$el = this.$el
       await this.$nextTick()
 
       this.triggerEl = this.$el.querySelector('[md-menu-trigger]')
diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
index 4e9569527..13c00e488 100644
--- a/src/components/MdMenu/MdMenuContent.vue
+++ b/src/components/MdMenu/MdMenuContent.vue
@@ -187,8 +187,8 @@
         if (document) {
           this.MdMenu.bodyClickObserver = new MdObserveEvent(document.body, 'click', $event => {
             $event.stopPropagation()
-
-            if (!this.$el.contains($event.target)) {
+            let isMdMenu = this.MdMenu.$el ? this.MdMenu.$el.contains($event.target) : false
+            if (!this.$el.contains($event.target) && !isMdMenu) {
               this.MdMenu.active = false
               this.MdMenu.bodyClickObserver.destroy()
               this.MdMenu.windowResizeObserver.destroy()

From 9f61c0b1e0bf6940de1a1e87fedc52c6c0882c6b Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Wed, 6 Dec 2017 03:55:06 +0100
Subject: [PATCH 09/72] feat(MdDatepicker): add support for labels (#1265)

* feat(MdDatepicker): add label style

* docs(MdDatepicker): add example with label

* fix(MdDatepicker): remove px unit
---
 .../pages/Components/Datepicker/Datepicker.vue   |  3 +++
 .../Datepicker/examples/LabeledDatepicker.vue    | 16 ++++++++++++++++
 src/components/MdDatepicker/MdDatepicker.vue     |  3 +++
 3 files changed, 22 insertions(+)
 create mode 100644 docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue

diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
index f5a29d562..9e582eb2a 100644
--- a/docs/app/pages/Components/Datepicker/Datepicker.vue
+++ b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -1,4 +1,5 @@
 <example src="./examples/BasicDatepicker.vue" />
+<example src="./examples/LabeledDatepicker.vue" />
 <example src="./examples/CancelOpenDatepicker.vue" />
 <example src="./examples/DisabledDatesDatepicker.vue" />
 
@@ -13,6 +14,8 @@
       <h2>Datepicker</h2>
 
       <code-example title="Basic Example" :component="examples['basic-datepicker']" />
+
+      <code-example title="Labeled Example" :component="examples['labeled-datepicker']" />
     </div>
 
     <div class="page-container-section">
diff --git a/docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue
new file mode 100644
index 000000000..7af6e3694
--- /dev/null
+++ b/docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <md-datepicker v-model="selectedDate">
+      <label>Select date</label>
+    </md-datepicker>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'LabeledDatepicker',
+    data: () => ({
+      selectedDate: null
+    })
+  }
+</script>
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index 20e951117..acda13682 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -116,6 +116,9 @@
   }
 
   .md-datepicker {
+    label {
+      top: 0 !important;
+    }
     .md-date-icon {
       cursor: pointer;
     }

From 843056db44959c10211ca96b532256a85f42fede Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 19 Dec 2017 02:10:46 +0100
Subject: [PATCH 10/72] fix: z-index issues (#1264)

* feat(MdCard): remove z-index to prevent card overlap FAB

* fix(MdSelect): fix select content under dialog

* refactor(MdSelect): change order of scss

* docs: remove z-index from main-nav (#1134)

* Revert "feat(MdCard): remove z-index to prevent card overlap FAB"

This reverts commit 9e128066ed814aff520ec6c5723619b147712cad.

* feat(MdButton): add fab z-index to prevent overlap
---
 docs/app/template/MainNav.vue                |  1 -
 src/components/MdButton/MdButton.vue         |  1 +
 src/components/MdField/MdSelect/MdSelect.vue | 24 +++++++++++---------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/app/template/MainNav.vue b/docs/app/template/MainNav.vue
index cbda59d53..394070c45 100644
--- a/docs/app/template/MainNav.vue
+++ b/docs/app/template/MainNav.vue
@@ -72,7 +72,6 @@
     top: 64px;
     bottom: 0;
     left: 0;
-    z-index: 2;
     transition: .3s $md-transition-default-timing;
     transition-property: top;
 
diff --git a/src/components/MdButton/MdButton.vue b/src/components/MdButton/MdButton.vue
index 5b0205143..02d0d7c31 100644
--- a/src/components/MdButton/MdButton.vue
+++ b/src/components/MdButton/MdButton.vue
@@ -220,6 +220,7 @@
   .md-icon-button,
   .md-fab {
     border-radius: 50%;
+    z-index: 10;
 
     &:before {
       border-radius: 50%;
diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index ad297808a..5f26dc6da 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -311,20 +311,22 @@
       border: 0;
     }
   }
+  .md-menu-content {
+    z-index: 111;
+    &.md-select-menu {
+      width: 100%;
 
-  .md-menu-content.md-select-menu {
-    width: 100%;
-
-    &.md-menu-content-enter {
-      transform: translate3d(0, -8px, 0) scaleY(.3);
-    }
+      &.md-menu-content-enter {
+        transform: translate3d(0, -8px, 0) scaleY(.3);
+      }
 
-    .md-list {
-      transition: opacity .3s $md-transition-drop-timing;
-    }
+      .md-list {
+        transition: opacity .3s $md-transition-drop-timing;
+      }
 
-    .md-dense .md-ripple.md-list-item-content {
-      font-size: 14px;
+      .md-dense .md-ripple.md-list-item-content {
+        font-size: 14px;
+      }
     }
   }
 </style>

From 1cfaf3cc60abb5d6edc25611267ffdb3a2e43023 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 19 Dec 2017 02:11:37 +0100
Subject: [PATCH 11/72] feat(MdDatepicker): override browser native pickers
 (#1270)

* feat(MdDatepicker): override browser native pickers

* docs(MdDatepicker): add md-override-native prop

* docs(MdDatepicker): remove note about firefox

* refactor(MdDatepicker): remove nested statement
---
 .../pages/Components/Datepicker/Datepicker.vue    |  7 ++++++-
 src/components/MdDatepicker/MdDatepicker.vue      | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
index 9e582eb2a..ed2faa191 100644
--- a/docs/app/pages/Components/Datepicker/Datepicker.vue
+++ b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -7,7 +7,6 @@
   <page-container centered :title="$t('pages.datepicker.title')">
     <div class="page-container-section">
       <p>Datepickers use a dialog window and provide a simple way to select a single value from a pre-determined set. The component can have disabled dates and it's really easy to use.</p>
-      <note-block alert>The datepicker dialog is disabled in Firefox, because it have a built-in Datepicker on desktop.</note-block>
     </div>
 
     <div class="page-container-section">
@@ -65,6 +64,12 @@
             type: 'Boolean',
             description: 'Disable the on focus event. Will open only if the user clicks on the icon.',
             defaults: 'true'
+          },
+          {
+            name: 'md-override-native',
+            type: 'Boolean',
+            description: 'Override native browser pickers by changing type of input to text.',
+            defaults: 'true'
           }
         ]
       }
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index acda13682..7546eea62 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -1,7 +1,7 @@
 <template>
   <md-field class="md-datepicker">
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
-    <md-input type="date" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
+    <md-input :type="type" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
 
     <slot />
 
@@ -40,6 +40,10 @@
       mdOpenOnFocus: {
         type: Boolean,
         default: true
+      },
+      mdOverrideNative: {
+        type: Boolean,
+        default: true
       }
     },
     data: () => ({
@@ -47,6 +51,13 @@
       modelDate: null,
       selectedDate: null
     }),
+    computed: {
+      type () {
+        return this.mdOverrideNative
+          ? 'text'
+          : 'date'
+      }
+    },
     watch: {
       selectedDate (selectedDate) {
         if (selectedDate) {
@@ -71,7 +82,7 @@
     },
     methods: {
       toggleDialog () {
-        if (!isFirefox) {
+        if (!isFirefox || this.mdOverrideNative) {
           this.showDialog = !this.showDialog
         } else {
           this.$refs.input.$el.click()

From 40406aff38e717aeb6c2cfd0a563f14d256d4e35 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 19 Dec 2017 09:12:17 +0800
Subject: [PATCH 12/72] fix(MdMenu): fix close-on-select props (#1280)

check whether clicked target is contained in menu content element within `bodyClickObserver`

fix #1279
---
 src/components/MdMenu/MdMenuContent.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
index 13c00e488..5a5f63d7b 100644
--- a/src/components/MdMenu/MdMenuContent.vue
+++ b/src/components/MdMenu/MdMenuContent.vue
@@ -7,7 +7,8 @@
         @keydown.arrow-down.prevent="setHighlight('down')"
         @keydown.arrow-up.prevent="setHighlight('up')"
         @keydown.space.prevent="setSelection"
-        @keydown.enter.prevent="setSelection">
+        @keydown.enter.prevent="setSelection"
+        ref="menu">
         <div class="md-menu-content-container md-scrollbar" :class="$mdActiveTheme">
           <md-list :class="listClasses" v-bind="$attrs" @keydown.esc="onEsc">
             <slot />
@@ -188,7 +189,8 @@
           this.MdMenu.bodyClickObserver = new MdObserveEvent(document.body, 'click', $event => {
             $event.stopPropagation()
             let isMdMenu = this.MdMenu.$el ? this.MdMenu.$el.contains($event.target) : false
-            if (!this.$el.contains($event.target) && !isMdMenu) {
+            let isMenuContentEl = this.$refs.menu ? this.$refs.menu.contains($event.target) : false
+            if (!this.$el.contains($event.target) && !isMdMenu && !isMenuContentEl) {
               this.MdMenu.active = false
               this.MdMenu.bodyClickObserver.destroy()
               this.MdMenu.windowResizeObserver.destroy()

From 023723ad760e8918880156a3f5be9e8c569ff017 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 19 Dec 2017 09:12:53 +0800
Subject: [PATCH 13/72] fix(MdSelect): emit `md-selected` event after
 `localValue` changed (#1282)

fix #1275
---
 src/components/MdField/MdSelect/MdSelect.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index 5f26dc6da..2e243d616 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -113,8 +113,9 @@
     watch: {
       localValue: {
         immediate: true,
-        handler () {
+        handler (val) {
           this.setFieldContent()
+          this.emitSelected(val)
         }
       },
       multiple: {
@@ -207,11 +208,9 @@
         } else {
           this.localValue = this.arrayAccessorRemove(this.localValue, index)
         }
-        this.emitSelected(this.localValue)
       },
       setValue (newValue) {
         this.model = newValue
-        this.emitSelected(newValue)
         this.setFieldValue()
         this.showSelect = false
       },

From d15f63bb4f44a432d870c37e6c9a25940eb59495 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 19 Dec 2017 09:20:07 +0800
Subject: [PATCH 14/72] feat(MdChips): feedback for duplicated chip (#1281)

* feat(MdChips): feedback for duplicated chip

add `md-duplicated` class which has the same style as `md-accent`. add
`md-check-duplicated-on-change` props.

fix #1212

* fix(MdChips): change api `mdCheckDuplicatedOnChange` to `mdAlwaysCheckDuplicated`

* fix(MdChips): change for loop key from `key` to `chip` to prevent triggering animate while removing

* docs(MdChips): example and new props for duplicated chip checking

fix #1212

* fix(MdChips): always clear `duplicatedChip` on change

* style(MdChips): fix style to pass scss-lint

* fix(MdChips): rename prop

* fix(MdChips): rename prop

* fix(MdChips): rename prop

* fix(MdChips): rename prop

* style(MdChips): adjust code style
---
 docs/app/pages/Components/Chips/Chips.vue     | 14 +++++
 .../Chips/examples/DuplicatedFeedback.vue     | 59 +++++++++++++++++++
 src/components/MdChips/MdChip.vue             |  9 ++-
 src/components/MdChips/MdChips.vue            | 49 ++++++++++++---
 src/components/MdChips/theme.scss             |  3 +-
 5 files changed, 123 insertions(+), 11 deletions(-)
 create mode 100644 docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue

diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
index ee0ad12c2..a1ee051d7 100644
--- a/docs/app/pages/Components/Chips/Chips.vue
+++ b/docs/app/pages/Components/Chips/Chips.vue
@@ -2,6 +2,7 @@
 <example src="./examples/Static.vue" />
 <example src="./examples/Editable.vue" />
 <example src="./examples/ChipCustomTemplate.vue" />
+<example src="./examples/DuplicatedFeedback.vue" />
 <example src="./examples/Themed.vue" />
 
 <template>
@@ -45,6 +46,13 @@
       <code-example title="Scoped Slot" :component="examples['chip-custom-template']" />
     </div>
 
+    <div class="page-container-section">
+      <h2>Duplicated Chip</h2>
+
+      <p>Chips would reject insertion while a chip was duplicated. You could customize feedback style of the duplicated chip:</p>
+      <code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Hue Colors</h2>
 
@@ -142,6 +150,12 @@ export default {
             type: 'Number',
             description: 'Blocks the chips to create items above the limit.',
             defaults: 'false'
+          },
+          {
+            name: 'md-check-duplicated',
+            type: 'Boolean',
+            description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
+            defaults: 'false'
           }
         ]
       },
diff --git a/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue b/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue
new file mode 100644
index 000000000..6df3b08a9
--- /dev/null
+++ b/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <md-chips class="md-primary" v-model="chips" md-placeholder="Add genre...">
+      <div class="md-helper-text">Default</div>
+    </md-chips>
+    <md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre...">
+      <div class="md-helper-text">Shake duplicated chip on insertion</div>
+    </md-chips>
+    <md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated>
+      <div class="md-helper-text">Always pulse duplicated chip</div>
+    </md-chips>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DuplicatedFeedback',
+  data: () => ({
+    chips: [
+      'Pop',
+      'Rock',
+      'Jazz',
+      'Metal'
+    ]
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.shake-on-error /deep/ .md-duplicated {
+  animation-name: shake;
+  animation-duration: 0.5s;
+}
+
+@keyframes shake {
+  0% { transform: translate(15px); }
+  20% { transform: translate(-15px); }
+  40% { transform: translate(7px); }
+  60% { transform: translate(-7px); }
+  80% { transform: translate(3px); }
+  100% { transform: translate(0px); }
+}
+</style>
+
+<style lang="css" scoped>
+.pulse-on-error >>> .md-duplicated {
+  animation-name: pulse;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out
+}
+
+@keyframes pulse {
+  0% { transform: scale(1.1, 1.1); }
+  100% { transform: scale(0.9, 0.9); }
+}
+</style>
+
diff --git a/src/components/MdChips/MdChip.vue b/src/components/MdChips/MdChip.vue
index cc55abfe1..ef3ebf378 100644
--- a/src/components/MdChips/MdChip.vue
+++ b/src/components/MdChips/MdChip.vue
@@ -36,7 +36,11 @@
     props: {
       mdDisabled: Boolean,
       mdDeletable: Boolean,
-      mdClickable: Boolean
+      mdClickable: Boolean,
+      mdDuplicated: {
+        type: Boolean,
+        default: false
+      }
     },
     computed: {
       chipClasses () {
@@ -44,7 +48,8 @@
           'md-disabled': this.mdDisabled,
           'md-deletable': this.mdDeletable,
           'md-clickable': this.mdClickable,
-          'md-focused': this.mdHasFocus
+          'md-focused': this.mdHasFocus,
+          'md-duplicated': this.mdDuplicated
         }
       }
     }
diff --git a/src/components/MdChips/MdChips.vue b/src/components/MdChips/MdChips.vue
index f687c2d2c..497cfaea6 100644
--- a/src/components/MdChips/MdChips.vue
+++ b/src/components/MdChips/MdChips.vue
@@ -4,9 +4,10 @@
 
     <md-chip
       v-for="(chip, key) in value"
-      :key="key"
+      :key="chip"
       :md-deletable="!mdStatic"
       :md-clickable="!mdStatic"
+      :md-duplicated="duplicatedChip === chip"
       @keydown.enter="$emit('md-click', chip, key)"
       @click.native="$emit('md-click', chip, key)"
       @md-delete.stop="removeChip(chip)">
@@ -21,6 +22,7 @@
       :type="mdInputType"
       :id="id"
       :placeholder="mdPlaceholder"
+      @input="handleInput"
       @keydown.enter="insertChip"
       @keydown.8="handleBackRemove">
     </md-input>
@@ -52,10 +54,15 @@
       },
       mdPlaceholder: [String, Number],
       mdStatic: Boolean,
-      mdLimit: Number
+      mdLimit: Number,
+      mdCheckDuplicated: {
+        type: Boolean,
+        default: false
+      }
     },
     data: () => ({
-      inputValue: ''
+      inputValue: '',
+      duplicatedChip: null
     }),
     computed: {
       chipsClasses () {
@@ -70,13 +77,19 @@
     },
     methods: {
       insertChip ({ target }) {
-        if (
-          !this.inputValue ||
-          this.value.includes(this.inputValue) ||
-          !this.modelRespectLimit
-        ) {
+        if (!this.inputValue || !this.modelRespectLimit) {
+          return
+        }
+        
+        if (this.value.includes(this.inputValue)) {
+          this.duplicatedChip = null
+          // to trigger animate
+          this.$nextTick(() => {
+            this.duplicatedChip = this.inputValue
+          })
           return
         }
+        
         this.value.push(this.inputValue)
         this.$emit('input', this.value)
         this.$emit('md-insert', this.inputValue)
@@ -94,6 +107,26 @@
         if (!this.inputValue) {
           this.removeChip(this.value[this.value.length - 1])
         }
+      },
+      handleInput () {
+        if (this.mdCheckDuplicated) {
+          this.checkDuplicated()
+        } else {
+          this.duplicatedChip = null
+        }
+      },
+      checkDuplicated () {
+        if (!this.value.includes(this.inputValue)) {
+          this.duplicatedChip = null
+          return
+        }
+        if (!this.mdCheckDuplicated) return
+        this.duplicatedChip = this.inputValue
+      }
+    },
+    watch: {
+      value () {
+        this.checkDuplicated()
       }
     }
   })
diff --git a/src/components/MdChips/theme.scss b/src/components/MdChips/theme.scss
index e23bab756..6af051e9e 100644
--- a/src/components/MdChips/theme.scss
+++ b/src/components/MdChips/theme.scss
@@ -62,7 +62,8 @@
       }
     }
 
-    &.md-accent {
+    &.md-accent,
+    &.md-duplicated {
       @include md-theme-property(background-color, accent);
       @include md-theme-property(color, text-primary, accent);
 

From 8a055e80730973007fa3b9db1d14a9a4628fcc96 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 19 Dec 2017 02:21:24 +0100
Subject: [PATCH 15/72] fix(MdAutocomplete): fix input emit when cleared
 (#1295)

---
 src/components/MdAutocomplete/MdAutocomplete.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MdAutocomplete/MdAutocomplete.vue b/src/components/MdAutocomplete/MdAutocomplete.vue
index 488219d06..2ec526008 100644
--- a/src/components/MdAutocomplete/MdAutocomplete.vue
+++ b/src/components/MdAutocomplete/MdAutocomplete.vue
@@ -180,7 +180,9 @@
           this.showOptions()
         }
       },
-      onInput () {
+      onInput (value) {
+        this.$emit('input', value)
+
         if (!this.mdOpenOnFocus) {
           this.showOptions()
         }

From 49787d108ae3276565d4c44aef0390ee36e57848 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 19 Dec 2017 02:23:14 +0100
Subject: [PATCH 16/72] docs: refactor i18n handling (#1301)

---
 docs/app/config.js                |  10 +-
 docs/app/i18n/en-US.js            | 265 ------------------------------
 docs/app/i18n/en-US/components.js |   6 +
 docs/app/i18n/en-US/index.js      |  16 ++
 docs/app/i18n/en-US/pages.js      | 259 +++++++++++++++++++++++++++++
 docs/app/i18n/index.js            |   5 +
 6 files changed, 290 insertions(+), 271 deletions(-)
 delete mode 100644 docs/app/i18n/en-US.js
 create mode 100644 docs/app/i18n/en-US/components.js
 create mode 100644 docs/app/i18n/en-US/index.js
 create mode 100644 docs/app/i18n/en-US/pages.js
 create mode 100644 docs/app/i18n/index.js

diff --git a/docs/app/config.js b/docs/app/config.js
index afa8ae283..f52807ca1 100644
--- a/docs/app/config.js
+++ b/docs/app/config.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Axios from 'axios'
 import VueRouter from 'vue-router'
 import Vuei18n from 'vue-i18n'
-import enUS from './i18n/en-US'
+import i18nLocales from './i18n'
 import { routes } from './routes'
 import createRoute from './routes'
 
@@ -18,12 +18,10 @@ const mappedRoutes = routes.map(route => ({
   component: () => import(`./pages/${route.page}`)
 }))
 
-export const currentLang = enUS
+export const currentLang = i18nLocales.enUS
 export const i18n = new Vuei18n({
-  locale: 'en-US',
-  messages: {
-    'en-US': enUS
-  }
+  locale: 'enUS',
+  messages: i18nLocales
 })
 
 export const router = new VueRouter({
diff --git a/docs/app/i18n/en-US.js b/docs/app/i18n/en-US.js
deleted file mode 100644
index cc6962186..000000000
--- a/docs/app/i18n/en-US.js
+++ /dev/null
@@ -1,265 +0,0 @@
-export default {
-  aboutMaterial: 'About Vue Material',
-  madeWith: 'Made with',
-  by: 'by',
-  pages: {
-    home: {
-      title: 'Home',
-      slogan: 'Build beautiful apps with Material Design and Vue.js',
-      material: 'Material Design',
-      materialContent: 'Simple, lightweight and built exactly according to the Google Material Design specs.',
-      compatible: 'Compatible',
-      compatibleContent: 'Build well-designed apps that can fit on every screen with support to all modern Web Browsers.',
-      featured: 'Full-featured',
-      featuredContent: 'Complete with dynamic themes, on demand components and all with an easy-to-use API.',
-      ecosystem: 'Ecosystem',
-      viewProject: 'View project',
-      sponsors: 'Sponsors',
-      backers: 'Backers',
-      sponsorsDescription: 'Vue Material does not run under the umbrella of any company or something like that. Is an independent project created by {0} on his spare time, which became one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.',
-      beAPatron: 'If you think that this project helped you or your company in any way, you can consider become a backer/sponsor on Patreon'
-    },
-    about: {
-      title: 'About'
-    },
-    license: {
-      title: 'License'
-    },
-    gettingStarted: {
-      title: 'Getting Started',
-      introduction: 'Vue Material is the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs. All you have to do is choose an installation method that fits you better and follow it\'s instructions. Let\'s start!',
-      installation: 'Installation',
-      npmOrYarn: 'NPM or Yarn'
-    },
-    themes: {
-      title: 'Themes'
-    },
-    themeConcepts: {
-      title: 'Themes - Concepts',
-      nav: 'Concepts'
-    },
-    themePrebuilt: {
-      title: 'Themes - Prebuilt',
-      nav: 'Prebuilt'
-    },
-    themeConfiguration: {
-      title: 'Themes - Configuration',
-      nav: 'Configuration'
-    },
-    themeAdvanced: {
-      title: 'Themes - Advanced',
-      nav: 'Advanced'
-    },
-    components: {
-      title: 'Components'
-    },
-    uiElements: {
-      title: 'UI Elements'
-    },
-    elevation: {
-      title: 'Elevation'
-    },
-    button: {
-      title: 'Button',
-      description: 'Buttons communicate the action that will occur when the user touches them.'
-    },
-    app: {
-      title: 'App',
-      intro: {
-        desc1: 'The following patterns applies the elevations in which content should scroll, how to size flexible space, and when to anchor specific elements.',
-        desc2: 'When building applications there is some repeated behaviours regarding the structure of the app. Responsive drawers, flexible toolbars, scrolling... Either scenario could repeat across all complex applications. This documentation website, for example, needs some of them, and maybe you\'ll need them too. To solve those problems the {0} was created.',
-        desc3: 'It has all behaviour to build complex application shells, that will be simple, responsive and it will integrate seamlessly with the drawers, toolbars and content.',
-        desc4: 'The {0} component supports {1}, {2} and {3}, which are aliases for {4}, {5} and {6} respectively. Look at the examples:'
-      },
-      regular: {
-        title: 'Regular Toolbars',
-        default: 'Default',
-        desc1: 'When you need a toolbar, a responsive drawer and a content to be displayed following the Material Guidelines. This is the default behaviour.',
-        desc2: 'The order of {0} children is irrelevant. The component will take care of this based on the props that you pass.'
-      },
-      fixed: {
-        title: 'Fixed Toolbars',
-        desc: 'Sometimes you may need a fixed toolbar, to make all options always available. You can also combine this with the "waterfall" effect.',
-        fixedWaterfall: 'Fixed + Waterfall'
-      },
-      reveal: {
-        title: 'Reveal after scroll',
-        desc: 'When you have a large amount of content to be displayed, and you want to focus on the reading part, you can hide the toolbar temporarily and reveal it when scrolling.',
-        reveal: 'Reveal'
-      },
-      flexible: {
-        title: 'Flexible height and text size',
-        desc: 'Maybe the focus of your page is the title, following by the content itself. The page that shows details of a single contact is a great example of this scenario. So you can use flexible behaviour to give higher piority to your content after scrolling.',
-        flexible: 'Flexible'
-      },
-      lastRow: {
-        title: 'The last toolbar row fixed',
-        desc: 'When your page have some primary navigation buttons, such as tabs and others, you may want them to be always available. You can make the second row of your toolbar always visible, hiding the first one when it\'s not needed. As an example, the WhatsApp main page have this behaviour.',
-        fixed: 'Navigation fixed'
-      },
-      overlap: {
-        title: 'Flexible space with overlapping content',
-        desc: 'If you want to give focus on the content cards you may want to use the overlap. It\'s just an awesome effect!',
-        content: 'Overlapping content'
-      },
-      apiApp: {
-        desc: 'In both examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:',
-        toolbar: 'Creates the toolbar accepting any options from the md-toolbar',
-        drawer: 'Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawers. Or both.',
-        content: 'Here you will add any content for your page.',
-        alert: 'Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for those three tags and choose the right placement for them.',
-        propsDesc: 'The following properties can be applied'
-      },
-      apiToolbar: {
-        desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
-        page: 'Toolbar page'
-      },
-      apiDrawer: {
-        desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
-        page: 'Drawer page'
-      },
-      apiContent: {
-        desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
-        page: 'Content page'
-      },
-      props: {
-        mdMode: 'Sets the toolbar mode. See below the detailed description of each mode.',
-        mdModeFixed: 'Makes the toolbar fixed without any scrolling effect',
-        mdModeFixedLast: 'Keeps the second row of the toolbar fixed and always visible. This NEEDS two md-toolbar-row inside the Toolbar.',
-        mdModeReveal: 'Hides the toolbar temporarily and show it after the scroll. This is a good approach for mobile.',
-        mdModeFlexible: 'Makes the height and the title size flexible to give the content a higher priority',
-        mdModeOverlap: 'Enables the overlapping content',
-        mdWaterfall: 'Enables the waterfall effect, that can be combined with any md-mode',
-        mdScrollbar: 'Enables the md-scrollbar class to the scrollable content. Read more about the Scrollbar documentation.'
-      }
-    },
-    avatar: {
-      title: 'Avatar'
-    },
-    bottomBar: {
-      title: 'Bottom Bar'
-    },
-    card: {
-      title: 'Card'
-    },
-    chips: {
-      title: 'Chips'
-    },
-    checkbox: {
-      title: 'Checkbox'
-    },
-    content: {
-      title: 'Content'
-    },
-    emptyState: {
-      title: 'Empty State'
-    },
-    pickers: {
-      title: 'Pickers'
-    },
-    progress: {
-      title: 'Progress'
-    },
-    progressBar: {
-      title: 'Progress Bar',
-      nav: 'Bar'
-    },
-    progressSpinner: {
-      title: 'Progress Spinner',
-      nav: 'Spinner'
-    },
-    autocomplete: {
-      title: 'Autocomplete'
-    },
-    datepicker: {
-      title: 'Datepicker',
-      nav: 'Date'
-    },
-    dialog: {
-      title: 'Dialog'
-    },
-    divider: {
-      title: 'Divider'
-    },
-    drawer: {
-      title: 'Drawer'
-    },
-    form: {
-      title: 'Forms'
-    },
-    icon: {
-      title: 'Icon'
-    },
-    input: {
-      title: 'Input & Textarea'
-    },
-    list: {
-      title: 'List'
-    },
-    radio: {
-      title: 'Radio'
-    },
-    select: {
-      title: 'Select'
-    },
-    file: {
-      title: 'File'
-    },
-    table: {
-      title: 'Table'
-    },
-    menu: {
-      title: 'Menu'
-    },
-    steppers: {
-      title: 'Steppers'
-    },
-    switch: {
-      title: 'Switch'
-    },
-    speedDial: {
-      title: 'Speed Dial'
-    },
-    snackbar: {
-      title: 'Snackbar'
-    },
-    subheader: {
-      title: 'Subheader'
-    },
-    toolbar: {
-      title: 'Toolbar'
-    },
-    tooltip: {
-      title: 'Tooltip'
-    },
-    layout: {
-      title: 'Layout'
-    },
-    scrollbar: {
-      title: 'Scrollbar'
-    },
-    textSelection: {
-      title: 'Text Selection'
-    },
-    typography: {
-      title: 'Typography'
-    },
-    tabs: {
-      title: 'Tabs'
-    },
-    error: {
-      title: 'Not Found'
-    }
-  },
-  components: {
-    code: {
-      copyMessage: 'Code copied!',
-      copy: 'Copy'
-    }
-  },
-  code: 'Code',
-  example: 'Example',
-  default: 'Default',
-  darkTheme: 'Dark Theme',
-  lightTheme: 'Light Theme'
-}
diff --git a/docs/app/i18n/en-US/components.js b/docs/app/i18n/en-US/components.js
new file mode 100644
index 000000000..e04e44b3c
--- /dev/null
+++ b/docs/app/i18n/en-US/components.js
@@ -0,0 +1,6 @@
+export default {
+  code: {
+    copyMessage: 'Code copied!',
+    copy: 'Copy'
+  }
+}
diff --git a/docs/app/i18n/en-US/index.js b/docs/app/i18n/en-US/index.js
new file mode 100644
index 000000000..2364b8d1e
--- /dev/null
+++ b/docs/app/i18n/en-US/index.js
@@ -0,0 +1,16 @@
+import components from './components'
+import pages from './pages'
+
+export default {
+  aboutMaterial: 'About Vue Material',
+  madeWith: 'Made with',
+  by: 'by',
+  code: 'Code',
+  example: 'Example',
+  default: 'Default',
+  darkTheme: 'Dark Theme',
+  lightTheme: 'Light Theme',
+
+  pages,
+  components
+}
diff --git a/docs/app/i18n/en-US/pages.js b/docs/app/i18n/en-US/pages.js
new file mode 100644
index 000000000..e2d1bb59e
--- /dev/null
+++ b/docs/app/i18n/en-US/pages.js
@@ -0,0 +1,259 @@
+export default {
+  home: {
+    title: 'Home',
+    slogan: 'Build beautiful apps with Material Design and Vue.js',
+    material: 'Material Design',
+    materialContent: 'Simple, lightweight and built exactly according to the Google Material Design specs.',
+    compatible: 'Compatible',
+    compatibleContent: 'Build well-designed apps that can fit on every screen with support to all modern Web Browsers.',
+    featured: 'Full-featured',
+    featuredContent: 'Complete with dynamic themes, on demand components and all with an easy-to-use API.',
+    ecosystem: 'Ecosystem',
+    viewProject: 'View project',
+    sponsors: 'Sponsors',
+    backers: 'Backers',
+    sponsorsDescription: 'Vue Material does not run under the umbrella of any company or something like that. Is an independent project created by {0} on his spare time, which became one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.',
+    beAPatron: 'If you think that this project helped you or your company in any way, you can consider become a backer/sponsor on Patreon'
+  },
+  about: {
+    title: 'About'
+  },
+  license: {
+    title: 'License'
+  },
+  gettingStarted: {
+    title: 'Getting Started',
+    introduction: 'Vue Material is the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs. All you have to do is choose an installation method that fits you better and follow it\'s instructions. Let\'s start!',
+    installation: 'Installation',
+    npmOrYarn: 'NPM or Yarn'
+  },
+  themes: {
+    title: 'Themes'
+  },
+  themeConcepts: {
+    title: 'Themes - Concepts',
+    nav: 'Concepts'
+  },
+  themePrebuilt: {
+    title: 'Themes - Prebuilt',
+    nav: 'Prebuilt'
+  },
+  themeConfiguration: {
+    title: 'Themes - Configuration',
+    nav: 'Configuration'
+  },
+  themeAdvanced: {
+    title: 'Themes - Advanced',
+    nav: 'Advanced'
+  },
+  components: {
+    title: 'Components',
+  },
+  uiElements: {
+    title: 'UI Elements',
+  },
+  elevation: {
+    title: 'Elevation',
+    description: 'Measured from the front of one surface to the front of another, an element’s elevation indicates the distance between surfaces and the depth of its shadow.'
+  },
+  button: {
+    title: 'Button',
+    description: 'Buttons communicate the action that will occur when the user touches them.'
+  },
+  app: {
+    title: 'App',
+    intro: {
+      desc1: 'The following patterns applies the elevations in which content should scroll, how to size flexible space, and when to anchor specific elements.',
+      desc2: 'When building applications there is some repeated behaviours regarding the structure of the app. Responsive drawers, flexible toolbars, scrolling... Either scenario could repeat across all complex applications. This documentation website, for example, needs some of them, and maybe you\'ll need them too. To solve those problems the {0} was created.',
+      desc3: 'It has all behaviour to build complex application shells, that will be simple, responsive and it will integrate seamlessly with the drawers, toolbars and content.',
+      desc4: 'The {0} component supports {1}, {2} and {3}, which are aliases for {4}, {5} and {6} respectively. Look at the examples:'
+    },
+    regular: {
+      title: 'Regular Toolbars',
+      default: 'Default',
+      desc1: 'When you need a toolbar, a responsive drawer and a content to be displayed following the Material Guidelines. This is the default behaviour.',
+      desc2: 'The order of {0} children is irrelevant. The component will take care of this based on the props that you pass.'
+    },
+    fixed: {
+      title: 'Fixed Toolbars',
+      desc: 'Sometimes you may need a fixed toolbar, to make all options always available. You can also combine this with the "waterfall" effect.',
+      fixedWaterfall: 'Fixed + Waterfall'
+    },
+    reveal: {
+      title: 'Reveal after scroll',
+      desc: 'When you have a large amount of content to be displayed, and you want to focus on the reading part, you can hide the toolbar temporarily and reveal it when scrolling.',
+      reveal: 'Reveal'
+    },
+    flexible: {
+      title: 'Flexible height and text size',
+      desc: 'Maybe the focus of your page is the title, following by the content itself. The page that shows details of a single contact is a great example of this scenario. So you can use flexible behaviour to give higher piority to your content after scrolling.',
+      flexible: 'Flexible'
+    },
+    lastRow: {
+      title: 'The last toolbar row fixed',
+      desc: 'When your page have some primary navigation buttons, such as tabs and others, you may want them to be always available. You can make the second row of your toolbar always visible, hiding the first one when it\'s not needed. As an example, the WhatsApp main page have this behaviour.',
+      fixed: 'Navigation fixed'
+    },
+    overlap: {
+      title: 'Flexible space with overlapping content',
+      desc: 'If you want to give focus on the content cards you may want to use the overlap. It\'s just an awesome effect!',
+      content: 'Overlapping content'
+    },
+    apiApp: {
+      desc: 'In both examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:',
+      toolbar: 'Creates the toolbar accepting any options from the md-toolbar',
+      drawer: 'Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawers. Or both.',
+      content: 'Here you will add any content for your page.',
+      alert: 'Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for those three tags and choose the right placement for them.',
+      propsDesc: 'The following properties can be applied'
+    },
+    apiToolbar: {
+      desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
+      page: 'Toolbar page'
+    },
+    apiDrawer: {
+      desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
+      page: 'Drawer page'
+    },
+    apiContent: {
+      desc: 'It supports all options of {0}. Please refer to the {1} to check out the API.',
+      page: 'Content page'
+    },
+    props: {
+      mdMode: 'Sets the toolbar mode. See below the detailed description of each mode.',
+      mdModeFixed: 'Makes the toolbar fixed without any scrolling effect',
+      mdModeFixedLast: 'Keeps the second row of the toolbar fixed and always visible. This NEEDS two md-toolbar-row inside the Toolbar.',
+      mdModeReveal: 'Hides the toolbar temporarily and show it after the scroll. This is a good approach for mobile.',
+      mdModeFlexible: 'Makes the height and the title size flexible to give the content a higher priority',
+      mdModeOverlap: 'Enables the overlapping content',
+      mdWaterfall: 'Enables the waterfall effect, that can be combined with any md-mode',
+      mdScrollbar: 'Enables the md-scrollbar class to the scrollable content. Read more about the Scrollbar documentation.'
+    }
+  },
+  avatar: {
+    title: 'Avatar',
+    description: 'Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand.'
+  },
+  bottomBar: {
+    title: 'Bottom Bar',
+    description: 'Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.'
+  },
+  card: {
+    title: 'Card',
+    description: 'Cards may contain a photo, text, and a link about a single subject.'
+  },
+  chips: {
+    title: 'Chips',
+    description: 'Chips represent complex entities in small blocks, such as a contact.'
+  },
+  checkbox: {
+    title: 'Checkbox',
+    description: 'Checkboxes allow the user to select multiple options from a set.'
+  },
+  content: {
+    title: 'Content',
+    description: 'The Content surfaces that comprise applications are referred to in this spec as material, or sheets of material.'
+  },
+  emptyState: {
+    title: 'Empty State',
+    description: 'A list that doesn’t contain any items, or a search that doesn’t display any results, are examples of empty states.'
+  },
+  pickers: {
+    title: 'Pickers',
+  },
+  progress: {
+    title: 'Progress',
+    description: 'Progress indicators are visual indications of an app loading content.'
+  },
+  progressBar: {
+    title: 'Progress Bar',
+    nav: 'Bar'
+  },
+  progressSpinner: {
+    title: 'Progress Spinner',
+    nav: 'Spinner'
+  },
+  autocomplete: {
+    title: 'Autocomplete',
+    description: 'Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language.'
+  },
+  datepicker: {
+    title: 'Datepicker',
+    nav: 'Date'
+  },
+  dialog: {
+    title: 'Dialog'
+  },
+  divider: {
+    title: 'Divider'
+  },
+  drawer: {
+    title: 'Drawer'
+  },
+  form: {
+    title: 'Forms'
+  },
+  icon: {
+    title: 'Icon'
+  },
+  input: {
+    title: 'Input & Textarea'
+  },
+  list: {
+    title: 'List'
+  },
+  radio: {
+    title: 'Radio'
+  },
+  select: {
+    title: 'Select'
+  },
+  file: {
+    title: 'File'
+  },
+  table: {
+    title: 'Table'
+  },
+  menu: {
+    title: 'Menu'
+  },
+  steppers: {
+    title: 'Steppers'
+  },
+  switch: {
+    title: 'Switch'
+  },
+  speedDial: {
+    title: 'Speed Dial'
+  },
+  snackbar: {
+    title: 'Snackbar'
+  },
+  subheader: {
+    title: 'Subheader'
+  },
+  toolbar: {
+    title: 'Toolbar'
+  },
+  tooltip: {
+    title: 'Tooltip'
+  },
+  layout: {
+    title: 'Layout'
+  },
+  scrollbar: {
+    title: 'Scrollbar'
+  },
+  textSelection: {
+    title: 'Text Selection'
+  },
+  typography: {
+    title: 'Typography'
+  },
+  tabs: {
+    title: 'Tabs'
+  },
+  error: {
+    title: 'Not Found'
+  }
+}
diff --git a/docs/app/i18n/index.js b/docs/app/i18n/index.js
new file mode 100644
index 000000000..f7fe156e8
--- /dev/null
+++ b/docs/app/i18n/index.js
@@ -0,0 +1,5 @@
+import enUS from './en-US'
+
+export default {
+  enUS
+}

From 9134227af2d71d95f0ea2a2e6a7890f5fcf5737d Mon Sep 17 00:00:00 2001
From: Giuseppe Menti <mentifg@gmail.com>
Date: Mon, 18 Dec 2017 23:26:23 -0200
Subject: [PATCH 17/72] fix(MdTable): fix error to sort by attribute of child
 object (#1309)

* Fix error to sort by attribute of child object

* Fix attribute name

* Remove blank lines

* refactor(MdTable): cache attributes
---
 src/components/MdTable/MdTable.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue
index ebd587b6c..b8d4f35f4 100644
--- a/src/components/MdTable/MdTable.vue
+++ b/src/components/MdTable/MdTable.vue
@@ -60,6 +60,16 @@
   import MdTableRowGhost from './MdTableRowGhost'
   import MdTableCellSelection from './MdTableCellSelection'
 
+  const getObjectAttribute = (object, key) => {
+    let value = object
+
+    for (const attribute of key.split('.')) {
+      value = value[attribute]
+    }
+
+    return value
+  }
+          
   export default {
     name: 'MdTable',
     components: {
@@ -93,12 +103,14 @@
         default (value) {
           return value.sort((a, b) => {
             const sortBy = this.MdTable.sort
+            const aAttr = getObjectAttribute(a, sortBy)
+            const bAttr = getObjectAttribute(b, sortBy)
 
             if (this.MdTable.sortOrder === 'desc') {
-              return a[sortBy].localeCompare(b[sortBy])
+              return aAttr.localeCompare(bAttr)
             }
 
-            return b[sortBy].localeCompare(a[sortBy])
+            return bAttr.localeCompare(aAttr)
           })
         }
       }

From b1bc2e108eff38fcf7901991801bebb362fb8092 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 19 Dec 2017 09:30:28 +0800
Subject: [PATCH 18/72] fix: upgrade vue-template-compiler in yarn.lock (#1306)

upgrade vue-template-compiler in yarn.lock to resolve vue packages version mismatch
---
 yarn.lock | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1651f8f7e..6583fb946 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7221,8 +7221,8 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.3:
     loader-utils "^1.0.2"
 
 vue-template-compiler@^2.5.3:
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.9.tgz#7fabc73c8d3d12d32340cd86c5fc33e00e86d686"
+  version "2.5.10"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.10.tgz#8d2754677430bf520650a7e2aee9070635158fc5"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -7231,6 +7231,10 @@ vue-template-es2015-compiler@^1.5.3, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
+vue@^2.5.9:
+  version "2.5.10"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.10.tgz#dcd772e2594ba994145f2f09522149d9a1e7841a"
+
 vuelidate@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.6.1.tgz#c52c9fd2b48f974613485e2cf51c182e84bcf747"

From 769ee70b03c215a820c347cb1c2d4960ae69d0bc Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 22 Dec 2017 11:07:51 -0200
Subject: [PATCH 19/72] chore: update rollbar sponsorship

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 96f3af7c6..2f2965f51 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Build well-designed apps that can fit on every screen with support to all modern
 ## Sponsorship
 
 Vue Material is proudly sponsored by [Rollbar](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
-). They provide real-time error monitoring, alerting, and analytics for developers.
+). They provide real-time JavaScript error monitoring, alerting, and analytics for developers. :rocket:
 
 You can try Rollbar for free at [https://rollbar.com](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
 ) <img src="https://cs.berry.sh/l/c0597778-f465-4788-abe3-8711cc087774/pixel.png" />

From f983c53cf7a3f2d1cc1516e090081924a23d2393 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 22 Dec 2017 11:09:15 -0200
Subject: [PATCH 20/72] chore: update rollbar sponsorship

---
 docs/app/components/AdManager.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/AdManager.vue b/docs/app/components/AdManager.vue
index 5dc0b1dc2..161b573a1 100644
--- a/docs/app/components/AdManager.vue
+++ b/docs/app/components/AdManager.vue
@@ -5,7 +5,7 @@
 
       <a :href="linkHref" class="code-sponsor-content" target="_blank" rel="noopener">
         <strong class="code-sponsor-name">Rollbar</strong>
-        <span class="code-sponsor-description">Real-time error monitoring, alerting, and analytics for developers 🚀</span>
+        <span class="code-sponsor-description">Real-time JavaScript error monitoring, alerting, and analytics for developers 🚀</span>
       </a>
 
       <img class="code-sponsor-pixel" :src="pixelHref" />

From 6c5fe65164b1cc42c721a9902ce64a0438c8438f Mon Sep 17 00:00:00 2001
From: mrwhy-orig <bjoern@b-have.de>
Date: Fri, 22 Dec 2017 22:47:18 +0100
Subject: [PATCH 21/72] fix(MdLayout): add xlarge and large classes to the
 layout component (#1323)

* Update layout.scss with large and xlarge props

* Added md-gutter-xlarge variable

* Removed Trailing white spaces

* fix: change gutter for large size
---
 src/components/MdLayout/layout.scss    | 22 +++++++++++++++++++++-
 src/components/MdLayout/variables.scss |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/MdLayout/layout.scss b/src/components/MdLayout/layout.scss
index 62670ec33..40d9f969b 100644
--- a/src/components/MdLayout/layout.scss
+++ b/src/components/MdLayout/layout.scss
@@ -23,7 +23,11 @@
  */
 
 .md-layout {
-  @include md-layout-gutter($md-gutter-large);
+  @include md-layout-gutter($md-gutter-xlarge);
+
+  @include md-layout-large {
+    @include md-layout-gutter($md-gutter-large);
+  }
 
   @include md-layout-medium {
     @include md-layout-gutter($md-gutter-medium);
@@ -62,6 +66,14 @@
 
   @include md-layout-item;
 
+  @include md-layout-xlarge {
+    @include md-layout-item(xlarge);
+  }
+
+  @include md-layout-large {
+    @include md-layout-item(large);
+  }
+
   @include md-layout-medium {
     @include md-layout-item(medium);
   }
@@ -82,6 +94,14 @@
 
 @include md-hide;
 
+@include md-layout-xlarge {
+  @include md-hide(xlarge);
+}
+
+@include md-layout-large {
+  @include md-hide(large);
+}
+
 @include md-layout-medium {
   @include md-hide(medium);
 }
diff --git a/src/components/MdLayout/variables.scss b/src/components/MdLayout/variables.scss
index 06906f218..b948fd2a0 100644
--- a/src/components/MdLayout/variables.scss
+++ b/src/components/MdLayout/variables.scss
@@ -23,3 +23,4 @@ $md-gutter-xsmall: 8px;
 $md-gutter-small: 16px;
 $md-gutter-medium: 24px;
 $md-gutter-large: 40px;
+$md-gutter-xlarge: 40px;

From 03a94258603325d426e5290925ecf3f1279b4825 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 23 Dec 2017 05:47:39 +0800
Subject: [PATCH 22/72] fix(MdField): disable clear button while field is
 disabled (#1326)

fix #1321
---
 src/components/MdField/MdField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
index 244e46d21..0cc49e0fa 100644
--- a/src/components/MdField/MdField.vue
+++ b/src/components/MdField/MdField.vue
@@ -5,7 +5,7 @@
     <span class="md-count" v-if="hasCounter">{{ valueLength }} / {{ MdField.maxlength || MdField.counter }}</span>
 
     <transition name="md-input-action" appear>
-      <md-button tabindex="-1" class="md-icon-button md-dense md-input-action md-clear" @click="clearInput" v-if="hasValue && mdClearable">
+      <md-button tabindex="-1" class="md-icon-button md-dense md-input-action md-clear" @click="clearInput" v-if="hasValue && mdClearable" :disabled="MdField.disabled">
         <md-clear-icon />
       </md-button>
     </transition>

From b7094cbe11322bf1aef113fec095f5fa0f660e53 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 23 Dec 2017 05:48:27 +0800
Subject: [PATCH 23/72] fix(MdChips): add labels for static chips (#1329)

let developers choose what to show from outside

fix #1327
---
 src/components/MdChips/MdChips.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdChips/MdChips.vue b/src/components/MdChips/MdChips.vue
index 497cfaea6..621b004d1 100644
--- a/src/components/MdChips/MdChips.vue
+++ b/src/components/MdChips/MdChips.vue
@@ -1,6 +1,6 @@
 <template>
   <md-field class="md-chips" :class="[$mdActiveTheme, chipsClasses]">
-    <slot v-if="!mdStatic" />
+    <slot />
 
     <md-chip
       v-for="(chip, key) in value"

From c9a2b9f298e3c32ce469bad6dd8aef04ef880292 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 23 Dec 2017 05:49:14 +0800
Subject: [PATCH 24/72] feat(MdListItemLink): add all `<a>` attributes
 supported (#1328)

`<a>` attributes `download`, `hreflang`, `ping`, `rel`, `type` supported

fix #1320
---
 src/components/MdList/MdListItem/MdListItemLink.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/MdList/MdListItem/MdListItemLink.vue b/src/components/MdList/MdListItem/MdListItemLink.vue
index bcf579a83..5915675ed 100644
--- a/src/components/MdList/MdListItem/MdListItemLink.vue
+++ b/src/components/MdList/MdListItem/MdListItemLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <a class="md-list-item-link" v-bind="{ href, disabled, target }">
+  <a class="md-list-item-link" v-bind="$props">
     <md-list-item-content :md-disabled="isDisabled">
       <slot />
     </md-list-item-content>
@@ -13,8 +13,13 @@
     name: 'MdListItemLink',
     mixins: [MdListItemMixin],
     props: {
+      download: String,
       href: String,
-      target: String
+      hreflang: String,
+      ping: String,
+      rel: String,
+      target: String,
+      type: String
     }
   }
 </script>

From 89138ebddd49097e1cb07f7dec3ae6647294909f Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 23 Dec 2017 05:52:27 +0800
Subject: [PATCH 25/72] fix(MdSelect): make options in disabled groups
 un-selectable (#1293)

* fix(MdSelect): make options in disabled groups un-selectable

fix #1286

* fix(MdSelect): make multiple selection checkboxes effective

* style(MdOption): remove empty lines
---
 src/components/MdField/MdSelect/MdOption.vue | 30 ++++++++++++++------
 src/components/MdField/MdSelect/MdSelect.vue |  6 ++--
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/MdField/MdSelect/MdOption.vue b/src/components/MdField/MdSelect/MdOption.vue
index d668c2097..9908683cd 100644
--- a/src/components/MdField/MdSelect/MdOption.vue
+++ b/src/components/MdField/MdSelect/MdOption.vue
@@ -1,6 +1,6 @@
 <template>
   <md-menu-item :class="optionClasses" :disabled="isDisabled" @click="setSelection">
-    <md-checkbox class="md-primary" v-model="isChecked" v-if="MdSelect.multiple" />
+    <md-checkbox class="md-primary" v-model="isChecked" v-if="MdSelect.multiple" :disabled="isDisabled" />
 
     <span class="md-list-item-text" ref="text">
       <slot />
@@ -52,8 +52,17 @@
       }
     },
     watch: {
-      inputLabel () {
+      selectValue () {
         this.setIsSelected()
+      },
+      isChecked (val) {
+        if (val === this.isSelected) {
+          return
+        }
+        this.setSelection()
+      },
+      isSelected (val) {
+        this.isChecked = val
       }
     },
     methods: {
@@ -67,17 +76,24 @@
         return slot ? slot[0].text.trim() : ''
       },
       setIsSelected () {
-        this.isSelected = this.inputLabel === this.getTextContent()
+        if (!this.isMultiple) {
+          this.isSelected = this.selectValue === this.value
+          return
+        }
+        if (this.selectValue === undefined) {
+          this.isSelected = false
+          return
+        }
+        this.isSelected = this.selectValue.includes(this.value)
       },
       setSingleSelection () {
         this.MdSelect.setValue(this.value)
       },
       setMultipleSelection () {
-        this.isChecked = !this.isChecked
         this.MdSelect.setMultipleValue(this.value)
       },
       setSelection () {
-        if (!this.disabled) {
+        if (!this.isDisabled) {
           if (this.isMultiple) {
             this.setMultipleSelection()
           } else {
@@ -95,10 +111,6 @@
     created () {
       this.setItem()
       this.setIsSelected()
-
-      if (this.isMultiple && this.selectValue && this.selectValue.length) {
-        this.isChecked = this.selectValue.includes(this.value)
-      }
     }
   }
 </script>
diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index 2e243d616..1fdc50425 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -89,7 +89,7 @@
           items: {},
           label: null,
           multiple: false,
-          modelValue: this.model,
+          modelValue: this.localValue,
           setValue: this.setValue,
           setContent: this.setContent,
           setMultipleValue: this.setMultipleValue,
@@ -115,6 +115,7 @@
         immediate: true,
         handler (val) {
           this.setFieldContent()
+          this.MdSelect.modelValue = this.localValue
           this.emitSelected(val)
         }
       },
@@ -124,9 +125,6 @@
           this.MdSelect.multiple = isMultiple
           this.$nextTick(() => this.initialLocalValueByDefault())
         }
-      },
-      model () {
-        this.MdSelect.modelValue = this.model
       }
     },
     methods: {

From 00832e9a521191c88c69832e184f514e821c38db Mon Sep 17 00:00:00 2001
From: Kory Prince <korylprince@gmail.com>
Date: Fri, 22 Dec 2017 15:53:59 -0600
Subject: [PATCH 26/72] fix(MdField): prevent MdInput and MdTextarea from emit
 input events directly (#1285)

* (Fix #1261) Don't emit input directly in MdInput and MdTextarea

* use spread operator (+babel) instead of Object.assign for browser compatiblity
---
 src/components/MdField/MdInput/MdInput.vue       | 7 +++----
 src/components/MdField/MdTextarea/MdTextarea.vue | 7 +++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/MdField/MdInput/MdInput.vue b/src/components/MdField/MdInput/MdInput.vue
index f88e0bcbd..46e7a0ac5 100644
--- a/src/components/MdField/MdInput/MdInput.vue
+++ b/src/components/MdField/MdInput/MdInput.vue
@@ -35,10 +35,9 @@
         return this.type === 'password'
       },
       listeners () {
-        return {
-          ...this.$listeners,
-          input: event => this.$emit('input', event.target.value)
-        }
+        var l = {...this.$listeners}
+        delete l.input
+        return l
       }
     },
     watch: {
diff --git a/src/components/MdField/MdTextarea/MdTextarea.vue b/src/components/MdField/MdTextarea/MdTextarea.vue
index b04f08879..8fc470d11 100644
--- a/src/components/MdField/MdTextarea/MdTextarea.vue
+++ b/src/components/MdField/MdTextarea/MdTextarea.vue
@@ -48,10 +48,9 @@
     },
     computed: {
       listeners () {
-        return {
-          ...this.$listeners,
-          input: event => this.$emit('input', event.target.value)
-        }
+        var l =  {...this.$listeners}
+        delete l.input
+        return l
       },
       textareaStyles () {
         return {

From 8ae249cd70e610bb81c7d9f512329836ed98b4aa Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 22 Dec 2017 20:03:38 -0200
Subject: [PATCH 27/72] docs: update issue template

---
 .github/ISSUE_TEMPLATE.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index a1e33e6dc..165450c3b 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -4,12 +4,13 @@ Reporting a bug?
 ================
 
 - Always search for your issue first. It may have already been answered, planned or fixed in some branch.
+- Open one issue per subject. Cluttered issues will be closed.
 - Make sure to only create issues for the newest version.
 - Create a declarative title and describe clearly the steps necessary to reproduce the issue. If an issue labeled "need repro" receives no further input from the issue author for more than 3 days, it will be closed.
-- If you want to show your code please use [Codepen](http://codepen.io/pen/) or [JSFiddle](https://jsfiddle.net/). You could start with [this template](http://codepen.io/vue-material/pen/WGavBE).
-- In case you found a solution by yourself, it could be helpful to explain how you fixed it.
+- If you want to show your code, please use [Codepen](http://codepen.io/pen/) or [JSFiddle](https://jsfiddle.net/). You can start with [this template](https://codepen.io/vue-material/pen/RxGmyb).
+- In case you found a solution by yourself, it could be helpful to explain how you have fixed it.
 - For bugs that involves build setups, you can create a reproduction repository with steps in the README.
-- If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.
+- If your issue is resolved but still open, don’t hesitate to close it. 
 
 Have a feature request?
 =======================

From 84699cec3a0a39de4a4006693f7c1aaa826fc951 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 26 Dec 2017 10:43:41 +0800
Subject: [PATCH 28/72] docs: improve components name (#1344)

* fix(icons): fix components' name

* fix(docs): fix components' name
---
 .../Components/Autocomplete/examples/AutocompleteAsync.vue      | 2 +-
 .../pages/Components/Autocomplete/examples/AutocompleteBox.vue  | 2 +-
 .../Components/Autocomplete/examples/AutocompleteTemplate.vue   | 2 +-
 .../Components/Autocomplete/examples/AutocompleteTrigger.vue    | 2 +-
 docs/app/pages/Components/Drawer/examples/Temporary.vue         | 2 +-
 docs/app/pages/Components/Input/examples/InlineActions.vue      | 2 +-
 docs/app/pages/Components/List/examples/Controls.vue            | 2 +-
 docs/app/pages/Components/List/examples/ListTypes.vue           | 2 +-
 docs/app/pages/Components/Select/examples/BasicSelect.vue       | 2 +-
 docs/app/pages/Components/Select/examples/DenseSelect.vue       | 2 +-
 docs/app/pages/Components/Select/examples/DisabledSelect.vue    | 2 +-
 docs/app/pages/Components/Select/examples/MultipleSelect.vue    | 2 +-
 .../app/pages/Components/Table/examples/TablePaginationSoon.vue | 2 +-
 docs/app/pages/Components/Table/examples/TableSearch.vue        | 2 +-
 docs/app/pages/Components/Tabs/examples/TabIcons.vue            | 2 +-
 docs/app/pages/Components/Toolbar/Toolbar.vue                   | 2 +-
 docs/app/pages/Components/Toolbar/examples/ContentActions.vue   | 2 +-
 docs/app/pages/Home/icons/HomeIconDevices.vue                   | 2 +-
 docs/app/pages/UiElements/Layout/Layout.vue                     | 2 +-
 src/core/icons/MdCheckIcon.vue                                  | 2 +-
 src/core/icons/MdUpwardIcon.vue                                 | 2 +-
 21 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/docs/app/pages/Components/Autocomplete/examples/AutocompleteAsync.vue b/docs/app/pages/Components/Autocomplete/examples/AutocompleteAsync.vue
index cf5fa0daf..36d8166dd 100644
--- a/docs/app/pages/Components/Autocomplete/examples/AutocompleteAsync.vue
+++ b/docs/app/pages/Components/Autocomplete/examples/AutocompleteAsync.vue
@@ -10,7 +10,7 @@
 
 <script>
   export default {
-    name: 'Example',
+    name: 'AutocompleteAsync',
     data: () => ({
       value: null,
       countryList: [
diff --git a/docs/app/pages/Components/Autocomplete/examples/AutocompleteBox.vue b/docs/app/pages/Components/Autocomplete/examples/AutocompleteBox.vue
index 5c4d3dc35..9516e6f8d 100644
--- a/docs/app/pages/Components/Autocomplete/examples/AutocompleteBox.vue
+++ b/docs/app/pages/Components/Autocomplete/examples/AutocompleteBox.vue
@@ -40,7 +40,7 @@
 
 <script>
   export default {
-    name: 'AutocompleteStatic',
+    name: 'AutocompleteBox',
     data: () => ({
       selectedEmployee: null,
       employees: [
diff --git a/docs/app/pages/Components/Autocomplete/examples/AutocompleteTemplate.vue b/docs/app/pages/Components/Autocomplete/examples/AutocompleteTemplate.vue
index 7a06f36e4..598650089 100644
--- a/docs/app/pages/Components/Autocomplete/examples/AutocompleteTemplate.vue
+++ b/docs/app/pages/Components/Autocomplete/examples/AutocompleteTemplate.vue
@@ -22,7 +22,7 @@
 
 <script>
   export default {
-    name: 'AutocompleteStatic',
+    name: 'AutocompleteTemplate',
     data: () => ({
       value: null,
       colors: [
diff --git a/docs/app/pages/Components/Autocomplete/examples/AutocompleteTrigger.vue b/docs/app/pages/Components/Autocomplete/examples/AutocompleteTrigger.vue
index 53f74b7e9..0a9f01824 100644
--- a/docs/app/pages/Components/Autocomplete/examples/AutocompleteTrigger.vue
+++ b/docs/app/pages/Components/Autocomplete/examples/AutocompleteTrigger.vue
@@ -12,7 +12,7 @@
 
 <script>
   export default {
-    name: 'AutocompleteStatic',
+    name: 'AutocompleteTrigger',
     data: () => ({
       selectedCountry: null,
       selectedEmployee: null,
diff --git a/docs/app/pages/Components/Drawer/examples/Temporary.vue b/docs/app/pages/Components/Drawer/examples/Temporary.vue
index f53539c87..371361616 100644
--- a/docs/app/pages/Components/Drawer/examples/Temporary.vue
+++ b/docs/app/pages/Components/Drawer/examples/Temporary.vue
@@ -79,7 +79,7 @@
 
 <script>
   export default {
-    name: 'Sidenav',
+    name: 'Temporary',
     data: () => ({
       showNavigation: false,
       showSidepanel: false
diff --git a/docs/app/pages/Components/Input/examples/InlineActions.vue b/docs/app/pages/Components/Input/examples/InlineActions.vue
index 3ea651dac..a8c19f255 100644
--- a/docs/app/pages/Components/Input/examples/InlineActions.vue
+++ b/docs/app/pages/Components/Input/examples/InlineActions.vue
@@ -19,7 +19,7 @@
 
 <script>
   export default {
-    name: 'Icons',
+    name: 'InlineActions',
     data: () => ({
       initial: 'Initial Value',
       password: 'mysecurepassword'
diff --git a/docs/app/pages/Components/List/examples/Controls.vue b/docs/app/pages/Components/List/examples/Controls.vue
index 7f5affa7e..8a5523652 100644
--- a/docs/app/pages/Components/List/examples/Controls.vue
+++ b/docs/app/pages/Components/List/examples/Controls.vue
@@ -73,7 +73,7 @@
 
 <script>
   export default {
-    name: 'Expand',
+    name: 'Controls',
     data: () => ({
       ringtone: 'peace',
       settings: {
diff --git a/docs/app/pages/Components/List/examples/ListTypes.vue b/docs/app/pages/Components/List/examples/ListTypes.vue
index 0ea406ed4..f184f8687 100644
--- a/docs/app/pages/Components/List/examples/ListTypes.vue
+++ b/docs/app/pages/Components/List/examples/ListTypes.vue
@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  name: 'Types',
+  name: 'ListTypes',
   methods: {
     alert () {
       window.alert('...')
diff --git a/docs/app/pages/Components/Select/examples/BasicSelect.vue b/docs/app/pages/Components/Select/examples/BasicSelect.vue
index 62cb67409..dd78a6f40 100644
--- a/docs/app/pages/Components/Select/examples/BasicSelect.vue
+++ b/docs/app/pages/Components/Select/examples/BasicSelect.vue
@@ -57,7 +57,7 @@
 
 <script>
   export default {
-    name: 'Example',
+    name: 'BasicSelect',
     data: () => ({
       movie: 'godfather',
       country: null,
diff --git a/docs/app/pages/Components/Select/examples/DenseSelect.vue b/docs/app/pages/Components/Select/examples/DenseSelect.vue
index 95b710272..d782ea858 100644
--- a/docs/app/pages/Components/Select/examples/DenseSelect.vue
+++ b/docs/app/pages/Components/Select/examples/DenseSelect.vue
@@ -56,7 +56,7 @@
 
 <script>
   export default {
-    name: 'Example',
+    name: 'DenseSelect',
     data: () => ({
       movies: [],
       country: null,
diff --git a/docs/app/pages/Components/Select/examples/DisabledSelect.vue b/docs/app/pages/Components/Select/examples/DisabledSelect.vue
index 36e56d1f8..5e81c19ee 100644
--- a/docs/app/pages/Components/Select/examples/DisabledSelect.vue
+++ b/docs/app/pages/Components/Select/examples/DisabledSelect.vue
@@ -56,7 +56,7 @@
 
 <script>
   export default {
-    name: 'Example',
+    name: 'DisabledSelect',
     data: () => ({
       movie: null,
       country: null,
diff --git a/docs/app/pages/Components/Select/examples/MultipleSelect.vue b/docs/app/pages/Components/Select/examples/MultipleSelect.vue
index 2b12de5ce..15434674d 100644
--- a/docs/app/pages/Components/Select/examples/MultipleSelect.vue
+++ b/docs/app/pages/Components/Select/examples/MultipleSelect.vue
@@ -24,7 +24,7 @@
 
 <script>
   export default {
-    name: 'Example',
+    name: 'MultipleSelect',
     data: () => ({
       selectedMovies: []
     })
diff --git a/docs/app/pages/Components/Table/examples/TablePaginationSoon.vue b/docs/app/pages/Components/Table/examples/TablePaginationSoon.vue
index c461de280..23a7937df 100644
--- a/docs/app/pages/Components/Table/examples/TablePaginationSoon.vue
+++ b/docs/app/pages/Components/Table/examples/TablePaginationSoon.vue
@@ -6,6 +6,6 @@
 
 <script>
   export default {
-    name: 'TablePagination'
+    name: 'TablePaginationSoon'
   }
 </script>
diff --git a/docs/app/pages/Components/Table/examples/TableSearch.vue b/docs/app/pages/Components/Table/examples/TableSearch.vue
index 148f20317..91febb26c 100644
--- a/docs/app/pages/Components/Table/examples/TableSearch.vue
+++ b/docs/app/pages/Components/Table/examples/TableSearch.vue
@@ -42,7 +42,7 @@
   }
 
   export default {
-    name: 'TableFixed',
+    name: 'TableSearch',
     data: () => ({
       search: null,
       searched: [],
diff --git a/docs/app/pages/Components/Tabs/examples/TabIcons.vue b/docs/app/pages/Components/Tabs/examples/TabIcons.vue
index e13dbc26e..61233f38f 100644
--- a/docs/app/pages/Components/Tabs/examples/TabIcons.vue
+++ b/docs/app/pages/Components/Tabs/examples/TabIcons.vue
@@ -18,7 +18,7 @@
 
 <script>
   export default {
-    name: 'Icons'
+    name: 'TabIcons'
   }
 </script>
 
diff --git a/docs/app/pages/Components/Toolbar/Toolbar.vue b/docs/app/pages/Components/Toolbar/Toolbar.vue
index 17470075a..ae9ba4a28 100644
--- a/docs/app/pages/Components/Toolbar/Toolbar.vue
+++ b/docs/app/pages/Components/Toolbar/Toolbar.vue
@@ -50,7 +50,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Content',
+  name: 'Toolbar',
   mixins: [examples],
   data: () => ({
     api: {
diff --git a/docs/app/pages/Components/Toolbar/examples/ContentActions.vue b/docs/app/pages/Components/Toolbar/examples/ContentActions.vue
index 8732d2dc6..1b6ba81ec 100644
--- a/docs/app/pages/Components/Toolbar/examples/ContentActions.vue
+++ b/docs/app/pages/Components/Toolbar/examples/ContentActions.vue
@@ -47,6 +47,6 @@
 
 <script>
 export default {
-  name: 'ContentAction'
+  name: 'ContentActions'
 }
 </script>
diff --git a/docs/app/pages/Home/icons/HomeIconDevices.vue b/docs/app/pages/Home/icons/HomeIconDevices.vue
index ead01ddda..7640e8c96 100644
--- a/docs/app/pages/Home/icons/HomeIconDevices.vue
+++ b/docs/app/pages/Home/icons/HomeIconDevices.vue
@@ -10,7 +10,7 @@
   import HomeIcon from './HomeIcon'
 
   export default {
-    name: 'HomeIcondevices',
+    name: 'HomeIconDevices',
     components: {
       HomeIcon
     }
diff --git a/docs/app/pages/UiElements/Layout/Layout.vue b/docs/app/pages/UiElements/Layout/Layout.vue
index 4a43dca0b..2f2f3d078 100644
--- a/docs/app/pages/UiElements/Layout/Layout.vue
+++ b/docs/app/pages/UiElements/Layout/Layout.vue
@@ -85,7 +85,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Content',
+    name: 'Layout',
     mixins: [examples],
     data: () => ({
       breakpoints: {
diff --git a/src/core/icons/MdCheckIcon.vue b/src/core/icons/MdCheckIcon.vue
index 47f338c77..66a8cbde4 100644
--- a/src/core/icons/MdCheckIcon.vue
+++ b/src/core/icons/MdCheckIcon.vue
@@ -11,7 +11,7 @@
   import MdIcon from 'components/MdIcon/MdIcon'
 
   export default {
-    name: 'MdDoneIcon',
+    name: 'MdCheckIcon',
     components: {
       MdIcon
     }
diff --git a/src/core/icons/MdUpwardIcon.vue b/src/core/icons/MdUpwardIcon.vue
index dcfa01b00..a540ee5a5 100644
--- a/src/core/icons/MdUpwardIcon.vue
+++ b/src/core/icons/MdUpwardIcon.vue
@@ -11,7 +11,7 @@
   import MdIcon from 'components/MdIcon/MdIcon'
 
   export default {
-    name: 'MdArrowDownIcon',
+    name: 'MdUpwardIcon',
     components: {
       MdIcon
     }

From 7110eab36da40c45494292c77e4f64474d4b6b1d Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 27 Dec 2017 01:02:14 +0800
Subject: [PATCH 29/72] fix(MdSelect): fix dense layout not being rendered
 properly (#1346)

make dense props available

fix #1332
---
 src/components/MdField/MdSelect/MdSelect.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index 1fdc50425..a0e9c4824 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -6,6 +6,7 @@
     :md-active.sync="showSelect"
     :md-offset-x="offset.x"
     :md-offset-y="offset.y"
+    :md-dense="mdDense"
     @md-opened="onOpen"
     @md-closed="onClose">
     <md-input
@@ -31,7 +32,6 @@
         ref="menu"
         class="md-select-menu"
         :md-content-class="mdClass"
-        :md-list-class="mdDense && 'md-dense'"
         :style="menuStyles"
         :id="uniqueId">
         <slot />
@@ -320,10 +320,6 @@
       .md-list {
         transition: opacity .3s $md-transition-drop-timing;
       }
-
-      .md-dense .md-ripple.md-list-item-content {
-        font-size: 14px;
-      }
     }
   }
 </style>

From 567e9a7de0ead877624b4f1f4f525d3892ba9882 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 27 Dec 2017 01:05:58 +0800
Subject: [PATCH 30/72] fix(MdTextarea): fix input event handler not triggering
 (#1341)

add `onInput` as `input` to listeners

fix #1340
---
 src/components/MdField/MdTextarea/MdTextarea.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/MdField/MdTextarea/MdTextarea.vue b/src/components/MdField/MdTextarea/MdTextarea.vue
index 8fc470d11..0271b3346 100644
--- a/src/components/MdField/MdTextarea/MdTextarea.vue
+++ b/src/components/MdField/MdTextarea/MdTextarea.vue
@@ -48,9 +48,10 @@
     },
     computed: {
       listeners () {
-        var l =  {...this.$listeners}
-        delete l.input
-        return l
+        return {
+          ...this.$listeners,
+          input: this.onInput
+        }
       },
       textareaStyles () {
         return {

From 18bb96c9694d5e760eec35d4242f56efe0a6828f Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Thu, 28 Dec 2017 05:31:44 +0800
Subject: [PATCH 31/72] fix(MdTable): improve sort function on table for
 numbered columns (#1353)

fix #1349
---
 src/components/MdTable/MdTable.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue
index b8d4f35f4..03731c5e9 100644
--- a/src/components/MdTable/MdTable.vue
+++ b/src/components/MdTable/MdTable.vue
@@ -105,12 +105,18 @@
             const sortBy = this.MdTable.sort
             const aAttr = getObjectAttribute(a, sortBy)
             const bAttr = getObjectAttribute(b, sortBy)
+            const isAsc = this.MdTable.sortOrder === 'asc'
+            let isNumber = typeof aAttr === 'number'
 
-            if (this.MdTable.sortOrder === 'desc') {
-              return aAttr.localeCompare(bAttr)
+            if (isNumber) {
+              return isAsc ? (bAttr - aAttr) : (aAttr - bAttr)
             }
 
-            return bAttr.localeCompare(aAttr)
+            if (isAsc) {
+              return bAttr.localeCompare(aAttr)
+            }
+
+            return aAttr.localeCompare(bAttr)
           })
         }
       }

From 4d906b6b17f66dad914316f4179a4f85be5e7f96 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Thu, 28 Dec 2017 05:32:18 +0800
Subject: [PATCH 32/72] fix(MdHighlightText): avoid printing 'null' as a value
 (#1352)

fix #1351
---
 src/components/MdHighlightText/MdHighlightText.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdHighlightText/MdHighlightText.vue b/src/components/MdHighlightText/MdHighlightText.vue
index c7bf7c473..1268b5335 100644
--- a/src/components/MdHighlightText/MdHighlightText.vue
+++ b/src/components/MdHighlightText/MdHighlightText.vue
@@ -20,7 +20,7 @@
     const offset = text.toLowerCase().indexOf(term[0].toLowerCase())
 
     if (offset === -1) {
-      return null
+      return ''
     }
 
     let last = 0

From 842f5aa94c01d033846827a5f2d1322dceee1434 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Thu, 28 Dec 2017 05:33:06 +0800
Subject: [PATCH 33/72] docs(componentExampleLoader): replace vue es2015
 compiler with babel (#1345)

* docs(componentExampleLoader): replace `vue-template-es2015-compiler` with `babel`

using babel to compile javascript in examples

fix #1337

* refactor(componentExampleLoader): replace `path.join` with `resolvePath`
---
 build/loaders/component-example-loader.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/build/loaders/component-example-loader.js b/build/loaders/component-example-loader.js
index bcf0dd262..532ce53f1 100644
--- a/build/loaders/component-example-loader.js
+++ b/build/loaders/component-example-loader.js
@@ -3,8 +3,9 @@ const pretty = require('pretty')
 const prettier = require('prettier')
 const path = require('path')
 const compiler = require('vue-template-compiler')
-const transpile = require('vue-template-es2015-compiler')
 const { resolvePath } = require('../config')
+const { transform } = require('babel-core')
+const transpile = code => transform(code, {extends: resolvePath('.babelrc')}).code
 const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
 
 function camelCaseToDash (str) {

From ba876d7cc61e641da6ad1f93a17d6feb13ec02a4 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 28 Dec 2017 20:10:48 -0200
Subject: [PATCH 34/72] docs: update backers

---
 docs/app/pages/Home/HomeSponsors.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/app/pages/Home/HomeSponsors.vue b/docs/app/pages/Home/HomeSponsors.vue
index 462f0c625..93301ce85 100644
--- a/docs/app/pages/Home/HomeSponsors.vue
+++ b/docs/app/pages/Home/HomeSponsors.vue
@@ -33,9 +33,11 @@
         <h4 class="md-subheading">{{ $t('pages.home.backers') }}</h4>
 
         <ul>
+          <li>Anthony Villena</li>
+          <li>Bobby McDonald</li>
           <li>Ivo Benner</li>
           <li>Nathanael Björkgård</li>
-          <li>Anthony Villena</li>
+          <li>Viktor Kuroljov</li>
           <li>William Chong</li>
         </ul>
       </div>

From 906a91da065fe56cc253188164b76b21853ea74d Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 30 Dec 2017 01:51:06 +0800
Subject: [PATCH 35/72] feat(MdTable): reactive selection (#1358)

* fix(MdTable): multiple selection with table sorting

an easy way to handle multiple selection

fix #1348

* refactor(MdTable): single selection using instance comparing instead of id comparing

both `MdTable` and `MdTableRow` emit `md-selected` event to avoid breaking change

* feat(MdTable): new props `:md-selected-value.sync` for reactive selection

fix #1292

* fix(MdTable): `syncSelectedValue` without `mdSelectedValue` in multiple selecting mode

* fix(MdTableHeadSelection): fix `allSelected`, now disabled row could be tick from `md-selected-value

* fix(MdTableRow): remove `md-selected` event

too many duplicated events on a selection. It should be emit from `MdTable`

BREAKING CHANGE: no more `md-selected` event from `MdTableRow`

* fix(MdTable): select event should be triggered after select update event

* fix(MdTableHeadSelection): select all only take effect on selectable items
---
 .../Components/Table/examples/TableSingle.vue |  4 +-
 src/components/MdTable/MdTable.vue            | 58 ++++++++++++++-----
 .../MdTable/MdTableHeadSelection.vue          | 35 +++++------
 src/components/MdTable/MdTableRow.vue         | 55 ++++++++++++------
 src/components/MdTable/MdTableRowGhost.vue    |  4 +-
 5 files changed, 97 insertions(+), 59 deletions(-)

diff --git a/docs/app/pages/Components/Table/examples/TableSingle.vue b/docs/app/pages/Components/Table/examples/TableSingle.vue
index 6217ddcb4..5f62cd809 100644
--- a/docs/app/pages/Components/Table/examples/TableSingle.vue
+++ b/docs/app/pages/Components/Table/examples/TableSingle.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <md-table v-model="people" md-card>
+    <md-table v-model="people" md-card @md-selected="onSelect">
       <md-table-toolbar>
         <h1 class="md-title">Selection Colors</h1>
       </md-table-toolbar>
 
-      <md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)" md-selectable="single" @md-selected="onSelect">
+      <md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)" md-selectable="single">
         <md-table-cell md-label="ID" md-sort-by="id" md-numeric>{{ item.id }}</md-table-cell>
         <md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
         <md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue
index 03731c5e9..4d190cd84 100644
--- a/src/components/MdTable/MdTable.vue
+++ b/src/components/MdTable/MdTable.vue
@@ -27,7 +27,8 @@
             v-for="(item, index) in value"
             :key="getRowId(item[mdModelId])"
             :md-id="getRowId(item[mdModelId])"
-            :md-index="index">
+            :md-index="index"
+            :md-item="item">
             <slot name="md-table-row" :item="item" />
           </md-table-row-ghost>
         </tbody>
@@ -69,7 +70,7 @@
 
     return value
   }
-          
+
   export default {
     name: 'MdTable',
     components: {
@@ -119,6 +120,9 @@
             return aAttr.localeCompare(bAttr)
           })
         }
+      },
+      mdSelectedValue: {
+        type: [Array, Object]
       }
     },
     data () {
@@ -130,8 +134,8 @@
           sort: null,
           sortOrder: null,
           singleSelection: null,
-          selectedItems: {},
-          selectable: {},
+          selectedItems: [],
+          selectable: [],
           fixedHeader: null,
           contentPadding: null,
           contentEl: null,
@@ -142,7 +146,8 @@
           sortTable: this.sortTable,
           manageItemSelection: this.manageItemSelection,
           getModel: this.getModel,
-          getModelItem: this.getModelItem
+          getModelItem: this.getModelItem,
+          selectingMode: null
         }
       }
     },
@@ -158,7 +163,7 @@
         return Object.keys(this.MdTable.items).length
       },
       selectedCount () {
-        return Object.keys(this.MdTable.selectedItems).length
+        return this.MdTable.selectedItems.length
       },
       headerStyles () {
         if (this.mdFixedHeader) {
@@ -213,6 +218,15 @@
         handler () {
           this.MdTable.hasValue = this.hasValue
         }
+      },
+      'MdTable.selectedItems' (val) {
+        this.select(val)
+      },
+      'MdTable.singleSelection' (val) {
+        this.select(val)
+      },
+      mdSelectedValue () {
+        this.syncSelectedValue()
       }
     },
     methods: {
@@ -251,24 +265,38 @@
       getModelItem (index) {
         return this.value[index]
       },
-      manageItemSelection (index) {
-        if (this.MdTable.selectedItems[index]) {
-          this.$delete(this.MdTable.selectedItems, index)
+      manageItemSelection (item) {
+        if (this.MdTable.selectedItems.includes(item)) {
+          this.MdTable.selectedItems = this.MdTable.selectedItems.filter(target => target !== item)
         } else {
-          this.$set(this.MdTable.selectedItems, index, this.value[index])
+          this.MdTable.selectedItems.push(item)
         }
-
-        this.sendSelectionEvent()
-      },
-      sendSelectionEvent () {
-        this.$emit('md-selected', Object.values(this.MdTable.selectedItems))
       },
       sortTable () {
         if (Array.isArray(this.value)) {
           this.$emit('input', this.mdSortFn(this.value))
         }
+      },
+      select (val) {
+        this.$emit('update:mdSelectedValue', val)
+        this.$emit('md-selected', val)
+      },
+      syncSelectedValue () {
+        switch (this.MdTable.selectingMode) {
+          case 'single':
+            this.MdTable.singleSelection = this.mdSelectedValue
+            break
+          case 'multiple':
+            this.MdTable.selectedItems = this.mdSelectedValue || []
+            break
+        }
       }
     },
+    async created () {
+      // wait for `selectingMode` from `TableRow`
+      await this.$nextTick()
+      this.syncSelectedValue()
+    },
     mounted () {
       this.setContentEl()
 
diff --git a/src/components/MdTable/MdTableHeadSelection.vue b/src/components/MdTable/MdTableHeadSelection.vue
index b325b88e5..af1081c9e 100644
--- a/src/components/MdTable/MdTableHeadSelection.vue
+++ b/src/components/MdTable/MdTableHeadSelection.vue
@@ -1,7 +1,7 @@
 <template>
   <md-table-head class="md-table-cell-selection" v-if="selectableCount">
     <div class="md-table-cell-container">
-      <md-checkbox v-model="allSelected" :disabled="isDisabled" @change="onChange" />
+      <md-checkbox :model="allSelected" :disabled="isDisabled" @change="onChange" />
     </div>
   </md-table-head>
 </template>
@@ -15,9 +15,6 @@
       MdTableHead
     },
     inject: ['MdTable'],
-    data: () => ({
-      allSelected: false
-    }),
     computed: {
       selectableCount () {
         return Object.keys(this.selectable).length
@@ -30,28 +27,22 @@
       },
       selectedItems () {
         return this.MdTable.selectedItems
-      }
-    },
-    watch: {
-      selectedItems: {
-        immediate: true,
-        deep: true,
-        handler (items) {
-          window.setTimeout(() => {
-            const countSelected = Object.keys(items).length
-
-            if (this.selectableCount > 0 && countSelected > 0) {
-              this.allSelected = countSelected === this.selectableCount
-            }
-          }, 10)
+      },
+      allSelected () {
+        if (this.selectableCount === 0) {
+          return false
         }
+
+        return this.selectable.every(item => this.selectedItems.includes(item))
       }
     },
     methods: {
-      onChange () {
-        Object.values(this.MdTable.selectable).forEach(callback => {
-          callback(this.allSelected)
-        })
+      onChange (val) {
+        if (val) {
+          this.MdTable.selectedItems = this.selectedItems.concat(this.selectable.filter(item => !this.selectedItems.includes(item)))
+        } else {
+          this.MdTable.selectedItems = this.selectedItems.filter(item => !this.selectable.includes(item))
+        }
       }
     }
   }
diff --git a/src/components/MdTable/MdTableRow.vue b/src/components/MdTable/MdTableRow.vue
index f84415b33..1a59e8676 100644
--- a/src/components/MdTable/MdTableRow.vue
+++ b/src/components/MdTable/MdTableRow.vue
@@ -27,7 +27,8 @@
         ...MdPropValidator('md-selectable', ['multiple', 'single'])
       },
       mdDisabled: Boolean,
-      mdAutoSelect: Boolean
+      mdAutoSelect: Boolean,
+      mdItem: Object
     },
     inject: ['MdTable'],
     data: () => ({
@@ -39,7 +40,7 @@
         return Object.keys(this.MdTable.selectable).length
       },
       isSingleSelected () {
-        return this.MdTable.singleSelection === this.mdId
+        return this.MdTable.singleSelection === this.mdItem
       },
       hasMultipleSelection () {
         return this.MdTable.hasValue && this.mdSelectable === 'multiple'
@@ -55,6 +56,9 @@
             'md-selected-single': this.isSingleSelected
           }
         }
+      },
+      isInSelectedItems () {
+        return this.MdTable.selectedItems.includes(this.mdItem)
       }
     },
     watch: {
@@ -65,12 +69,20 @@
           this.addSelectableItem()
         }
       },
-      mdId (newId, oldId) {
-        this.removeSelectableItem(oldId)
-        this.addSelectableItem(newId)
+      isSelected (val) {
+        let noChange = (val && this.isInSelectedItems) || (!val && !this.isInSelectedItems)
+
+        if (noChange) {
+          return false
+        }
+
+        this.MdTable.manageItemSelection(this.mdItem)
+      },
+      isInSelectedItems (val) {
+        this.isSelected = val
       },
-      isSelected () {
-        this.MdTable.manageItemSelection(this.mdIndex)
+      mdSelectable () {
+        this.MdTable.selectingMode = this.mdSelectable
       }
     },
     methods: {
@@ -87,12 +99,10 @@
         this.isSelected = !this.isSelected
       },
       selectRowIfSingle () {
-        if (this.MdTable.singleSelection === this.mdId) {
+        if (this.MdTable.singleSelection === this.mdItem) {
           this.MdTable.singleSelection = null
-          this.$emit('md-selected', null)
         } else {
-          this.MdTable.singleSelection = this.mdId
-          this.$emit('md-selected', this.MdTable.getModelItem(this.mdIndex))
+          this.MdTable.singleSelection = this.mdItem
         }
       },
       selectRowIfMultiple () {
@@ -100,21 +110,28 @@
           this.toggleSelection()
         }
       },
-      addSelectableItem (id) {
-        if (this.hasMultipleSelection && !this.mdDisabled) {
-          this.$set(this.MdTable.selectable, id || this.mdId, isSelected => {
-            this.isSelected = isSelected
-          })
+      addSelectableItem () {
+        if (!this.hasMultipleSelection || this.mdDisabled) {
+          return
         }
+
+        if (this.MdTable.selectable.includes(this.mdItem)) {
+          return
+        }
+
+        this.MdTable.selectable.push(this.mdItem)
       },
-      removeSelectableItem (id) {
-        if (this.hasMultipleSelection) {
-          this.$delete(this.MdTable.selectable, id || this.mdId)
+      removeSelectableItem () {
+        if (!this.hasMultipleSelection) {
+          return
         }
+
+        this.MdTable.selectable = this.MdTable.selectable.filter(item => item !== this.mdItem)
       }
     },
     created () {
       this.addSelectableItem()
+      this.MdTable.selectingMode = this.mdSelectable
     },
     beforeDestroy () {
       this.removeSelectableItem()
diff --git a/src/components/MdTable/MdTableRowGhost.vue b/src/components/MdTable/MdTableRowGhost.vue
index 56cb52888..f33f07b83 100644
--- a/src/components/MdTable/MdTableRowGhost.vue
+++ b/src/components/MdTable/MdTableRowGhost.vue
@@ -4,11 +4,13 @@
     abstract: true,
     props: {
       mdIndex: [String, Number],
-      mdId: [String, Number]
+      mdId: [String, Number],
+      mdItem: Object
     },
     render () {
       this.$slots.default[0].componentOptions.propsData.mdIndex = this.mdIndex
       this.$slots.default[0].componentOptions.propsData.mdId = this.mdId
+      this.$slots.default[0].componentOptions.propsData.mdItem = this.mdItem
 
       return this.$slots.default[0]
     }

From 8115f3226540852747fa3672916cb235028f1c36 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 29 Dec 2017 18:51:33 +0100
Subject: [PATCH 36/72] fix(MdDialog): IE not rendering Dialogs (#1356)

---
 src/components/MdDialog/MdDialog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MdDialog/MdDialog.vue b/src/components/MdDialog/MdDialog.vue
index 6f62191f0..eb1290991 100644
--- a/src/components/MdDialog/MdDialog.vue
+++ b/src/components/MdDialog/MdDialog.vue
@@ -102,6 +102,7 @@
     margin: auto;
     display: flex;
     flex-flow: column;
+    flex-direction: row;
     overflow: hidden;
     position: fixed;
     top: 50%;

From b54eb1054bd1d024fe0fa3ae31743b53f7710e6f Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 30 Dec 2017 01:53:15 +0800
Subject: [PATCH 37/72] fix(MdTable): remove table head when column removed
 (#1354)

fix #1347
---
 src/components/MdTable/MdTableCell.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/MdTable/MdTableCell.vue b/src/components/MdTable/MdTableCell.vue
index 88971a9b3..cce8792e1 100644
--- a/src/components/MdTable/MdTableCell.vue
+++ b/src/components/MdTable/MdTableCell.vue
@@ -17,7 +17,8 @@
     },
     inject: ['MdTable'],
     data: () => ({
-      index: null
+      index: null,
+      parentNode: null
     }),
     computed: {
       cellClasses () {
@@ -50,7 +51,9 @@
         })
       },
       updateAllCellData () {
-        const cells = Array.from(this.$el.parentNode.childNodes).filter(({ tagName, classList }) => {
+        this.MdTable.items = {}
+
+        const cells = Array.from(this.parentNode.childNodes).filter(({ tagName, classList }) => {
           const isSelection = classList && classList.contains('md-table-cell-selection')
           const isTd = tagName && tagName.toLowerCase() === 'td'
 
@@ -67,6 +70,16 @@
       }
     },
     mounted () {
+      this.parentNode = this.$el.parentNode
+      this.updateAllCellData()
+    },
+    destroyed () {
+      const rowRemoved = this.$el.parentNode !== null
+
+      if (rowRemoved) {
+        return false
+      }
+
       this.updateAllCellData()
     }
   }

From 0c1c9576fad8584b44a8a5b4ac2eb22e7f034b52 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 3 Jan 2018 02:56:08 +0800
Subject: [PATCH 38/72] docs(Menu): fix warnings (#1359)

* docs(Menu): change component name to avoid warning

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Menu

* docs(Menu): md-direction API
---
 docs/app/pages/Components/Menu/Menu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/pages/Components/Menu/Menu.vue b/docs/app/pages/Components/Menu/Menu.vue
index a09d83cc8..d8c1a152a 100644
--- a/docs/app/pages/Components/Menu/Menu.vue
+++ b/docs/app/pages/Components/Menu/Menu.vue
@@ -58,7 +58,7 @@
   }
 
   export default {
-    name: 'Menu',
+    name: 'DocMenu',
     mixins: [examples],
     data: () => ({
       props: {
@@ -107,7 +107,7 @@
           },
           {
             offset: true,
-            name: 'md-direction="top-start"',
+            name: 'md-direction="top-end"',
             type: 'String',
             description: 'Aligns the menu on the top right of the trigger',
             defaults: '-'

From fe1ec4afff834959e196fae145fe9ecedaea4ec3 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 3 Jan 2018 22:28:55 +0800
Subject: [PATCH 39/72] docs: rename components to avoid warning (#1363)

---
 docs/app/pages/Components/App/App.vue                         | 2 +-
 docs/app/pages/Components/Autocomplete/Autocomplete.vue       | 2 +-
 docs/app/pages/Components/Avatar/Avatar.vue                   | 2 +-
 docs/app/pages/Components/BottomBar/BottomBar.vue             | 2 +-
 docs/app/pages/Components/Button/Button.vue                   | 2 +-
 docs/app/pages/Components/Card/Card.vue                       | 2 +-
 docs/app/pages/Components/Checkbox/Checkbox.vue               | 2 +-
 docs/app/pages/Components/Chips/Chips.vue                     | 2 +-
 docs/app/pages/Components/Content/Content.vue                 | 2 +-
 docs/app/pages/Components/Datepicker/Datepicker.vue           | 2 +-
 docs/app/pages/Components/Dialog/Dialog.vue                   | 2 +-
 docs/app/pages/Components/Divider/Divider.vue                 | 2 +-
 docs/app/pages/Components/Drawer/Drawer.vue                   | 2 +-
 docs/app/pages/Components/EmptyState/EmptyState.vue           | 2 +-
 docs/app/pages/Components/File/File.vue                       | 2 +-
 docs/app/pages/Components/Form/Form.vue                       | 2 +-
 docs/app/pages/Components/Icon/Icon.vue                       | 2 +-
 docs/app/pages/Components/Input/Input.vue                     | 2 +-
 docs/app/pages/Components/List/List.vue                       | 2 +-
 docs/app/pages/Components/ProgressBar/ProgressBar.vue         | 2 +-
 docs/app/pages/Components/ProgressSpinner/ProgressSpinner.vue | 2 +-
 docs/app/pages/Components/Radio/Radio.vue                     | 2 +-
 docs/app/pages/Components/Select/Select.vue                   | 2 +-
 docs/app/pages/Components/Snackbar/Snackbar.vue               | 2 +-
 docs/app/pages/Components/SpeedDial/SpeedDial.vue             | 2 +-
 docs/app/pages/Components/Steppers/Steppers.vue               | 2 +-
 docs/app/pages/Components/Subheader/Subheader.vue             | 2 +-
 docs/app/pages/Components/Switch/Switch.vue                   | 2 +-
 docs/app/pages/Components/Table/Table.vue                     | 2 +-
 docs/app/pages/Components/Tabs/Tabs.vue                       | 2 +-
 docs/app/pages/Components/Toolbar/Toolbar.vue                 | 2 +-
 docs/app/pages/Components/Tooltip/Tooltip.vue                 | 2 +-
 32 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/app/pages/Components/App/App.vue b/docs/app/pages/Components/App/App.vue
index a17a73a93..0f774a551 100644
--- a/docs/app/pages/Components/App/App.vue
+++ b/docs/app/pages/Components/App/App.vue
@@ -119,7 +119,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'App',
+  name: 'DocApp',
   mixins: [examples],
   data () {
     return {
diff --git a/docs/app/pages/Components/Autocomplete/Autocomplete.vue b/docs/app/pages/Components/Autocomplete/Autocomplete.vue
index 349784e44..eb67f3cc7 100644
--- a/docs/app/pages/Components/Autocomplete/Autocomplete.vue
+++ b/docs/app/pages/Components/Autocomplete/Autocomplete.vue
@@ -109,7 +109,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Autocomplete',
+    name: 'DocAutocomplete',
     mixins: [examples],
     data: () => ({
       autocomplete: {
diff --git a/docs/app/pages/Components/Avatar/Avatar.vue b/docs/app/pages/Components/Avatar/Avatar.vue
index 4843cfb67..0a3bbecf4 100644
--- a/docs/app/pages/Components/Avatar/Avatar.vue
+++ b/docs/app/pages/Components/Avatar/Avatar.vue
@@ -45,7 +45,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Avatar',
+    name: 'DocAvatar',
     mixins: [examples],
     data: () => ({
       regular: {
diff --git a/docs/app/pages/Components/BottomBar/BottomBar.vue b/docs/app/pages/Components/BottomBar/BottomBar.vue
index 01ff1cf7d..bba27f3ae 100644
--- a/docs/app/pages/Components/BottomBar/BottomBar.vue
+++ b/docs/app/pages/Components/BottomBar/BottomBar.vue
@@ -56,7 +56,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'BottomBar',
+    name: 'DocBottomBar',
     mixins: [examples],
     data: () => ({
       bar: {
diff --git a/docs/app/pages/Components/Button/Button.vue b/docs/app/pages/Components/Button/Button.vue
index bdf3b94ac..acce9ba02 100644
--- a/docs/app/pages/Components/Button/Button.vue
+++ b/docs/app/pages/Components/Button/Button.vue
@@ -72,7 +72,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Button',
+  name: 'DocButton',
   mixins: [examples],
   data: () => ({
     api: {
diff --git a/docs/app/pages/Components/Card/Card.vue b/docs/app/pages/Components/Card/Card.vue
index dbe3f8652..6c45f95b6 100644
--- a/docs/app/pages/Components/Card/Card.vue
+++ b/docs/app/pages/Components/Card/Card.vue
@@ -98,7 +98,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Card',
+  name: 'DocCard',
   mixins: [examples],
   data: () => ({
     api: {
diff --git a/docs/app/pages/Components/Checkbox/Checkbox.vue b/docs/app/pages/Components/Checkbox/Checkbox.vue
index 32d8f3367..7895c7368 100644
--- a/docs/app/pages/Components/Checkbox/Checkbox.vue
+++ b/docs/app/pages/Components/Checkbox/Checkbox.vue
@@ -29,7 +29,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Checkbox',
+    name: 'DocCheckbox',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
index a1ee051d7..981925bef 100644
--- a/docs/app/pages/Components/Chips/Chips.vue
+++ b/docs/app/pages/Components/Chips/Chips.vue
@@ -73,7 +73,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Chips',
+  name: 'DocChips',
   mixins: [examples],
   data: () => ({
     chip: {
diff --git a/docs/app/pages/Components/Content/Content.vue b/docs/app/pages/Components/Content/Content.vue
index 292095006..803ffe358 100644
--- a/docs/app/pages/Components/Content/Content.vue
+++ b/docs/app/pages/Components/Content/Content.vue
@@ -24,7 +24,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Content',
+  name: 'DocContent',
   mixins: [examples],
   data: () => ({
     props: {
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
index ed2faa191..89ef4fc11 100644
--- a/docs/app/pages/Components/Datepicker/Datepicker.vue
+++ b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -41,7 +41,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Datepicker',
+    name: 'DocDatepicker',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/Dialog/Dialog.vue b/docs/app/pages/Components/Dialog/Dialog.vue
index 32cc4f12e..b717a5c4c 100644
--- a/docs/app/pages/Components/Dialog/Dialog.vue
+++ b/docs/app/pages/Components/Dialog/Dialog.vue
@@ -68,7 +68,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Dialog',
+    name: 'DocDialog',
     mixins: [examples],
     data () {
       return {
diff --git a/docs/app/pages/Components/Divider/Divider.vue b/docs/app/pages/Components/Divider/Divider.vue
index 60da7adfc..02b6061a9 100644
--- a/docs/app/pages/Components/Divider/Divider.vue
+++ b/docs/app/pages/Components/Divider/Divider.vue
@@ -25,7 +25,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Divider',
+  name: 'DocDivider',
   mixins: [examples],
   data: () => ({
     classes: {
diff --git a/docs/app/pages/Components/Drawer/Drawer.vue b/docs/app/pages/Components/Drawer/Drawer.vue
index 9b363f7d0..b036de86e 100644
--- a/docs/app/pages/Components/Drawer/Drawer.vue
+++ b/docs/app/pages/Components/Drawer/Drawer.vue
@@ -64,7 +64,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Drawer',
+    name: 'DocDrawer',
     mixins: [examples],
     data: () => ({
       drawer: {
diff --git a/docs/app/pages/Components/EmptyState/EmptyState.vue b/docs/app/pages/Components/EmptyState/EmptyState.vue
index 415139e62..7dc0fc4c9 100644
--- a/docs/app/pages/Components/EmptyState/EmptyState.vue
+++ b/docs/app/pages/Components/EmptyState/EmptyState.vue
@@ -35,7 +35,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'EmptyState',
+    name: 'DocEmptyState',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/File/File.vue b/docs/app/pages/Components/File/File.vue
index 4f664aba5..4f8dcd455 100644
--- a/docs/app/pages/Components/File/File.vue
+++ b/docs/app/pages/Components/File/File.vue
@@ -27,7 +27,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'File',
+  name: 'DocFile',
   mixins: [examples],
   data: () => ({
     api: {
diff --git a/docs/app/pages/Components/Form/Form.vue b/docs/app/pages/Components/Form/Form.vue
index a5a1e96fb..b3692eb48 100644
--- a/docs/app/pages/Components/Form/Form.vue
+++ b/docs/app/pages/Components/Form/Form.vue
@@ -19,7 +19,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Form',
+    name: 'DocForm',
     mixins: [examples]
   }
 </script>
diff --git a/docs/app/pages/Components/Icon/Icon.vue b/docs/app/pages/Components/Icon/Icon.vue
index 97187f1fd..b183e2d23 100644
--- a/docs/app/pages/Components/Icon/Icon.vue
+++ b/docs/app/pages/Components/Icon/Icon.vue
@@ -48,7 +48,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Icon',
+  name: 'DocIcon',
   mixins: [examples],
   data: () => ({
     api: {
diff --git a/docs/app/pages/Components/Input/Input.vue b/docs/app/pages/Components/Input/Input.vue
index 3d5ae559e..3e3ad2fd4 100644
--- a/docs/app/pages/Components/Input/Input.vue
+++ b/docs/app/pages/Components/Input/Input.vue
@@ -74,7 +74,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Input',
+    name: 'DocInput',
     mixins: [examples],
     data: () => ({
       field: {
diff --git a/docs/app/pages/Components/List/List.vue b/docs/app/pages/Components/List/List.vue
index f528aefda..68b2cda3d 100644
--- a/docs/app/pages/Components/List/List.vue
+++ b/docs/app/pages/Components/List/List.vue
@@ -65,7 +65,7 @@
   import MdInteractionEvents from 'core/utils/MdInteractionEvents'
 
   export default {
-    name: 'List',
+    name: 'DocList',
     mixins: [examples],
     data: () => ({
       interactionEvents: MdInteractionEvents
diff --git a/docs/app/pages/Components/ProgressBar/ProgressBar.vue b/docs/app/pages/Components/ProgressBar/ProgressBar.vue
index 1ff663cfe..9a18d4e56 100644
--- a/docs/app/pages/Components/ProgressBar/ProgressBar.vue
+++ b/docs/app/pages/Components/ProgressBar/ProgressBar.vue
@@ -44,7 +44,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'ProgressBar',
+    name: 'DocProgressBar',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/ProgressSpinner/ProgressSpinner.vue b/docs/app/pages/Components/ProgressSpinner/ProgressSpinner.vue
index 57d4a0efc..3a85ecaa8 100644
--- a/docs/app/pages/Components/ProgressSpinner/ProgressSpinner.vue
+++ b/docs/app/pages/Components/ProgressSpinner/ProgressSpinner.vue
@@ -38,7 +38,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'ProgressSpinner',
+    name: 'DocProgressSpinner',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/Radio/Radio.vue b/docs/app/pages/Components/Radio/Radio.vue
index 797e013dd..b68340fec 100644
--- a/docs/app/pages/Components/Radio/Radio.vue
+++ b/docs/app/pages/Components/Radio/Radio.vue
@@ -29,7 +29,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Radio',
+    name: 'DocRadio',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/Select/Select.vue b/docs/app/pages/Components/Select/Select.vue
index a7ffc8e4c..bbc0d4aa3 100644
--- a/docs/app/pages/Components/Select/Select.vue
+++ b/docs/app/pages/Components/Select/Select.vue
@@ -55,7 +55,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Select',
+    name: 'DocSelect',
     mixins: [examples],
     data: () => ({
       select: {
diff --git a/docs/app/pages/Components/Snackbar/Snackbar.vue b/docs/app/pages/Components/Snackbar/Snackbar.vue
index 648725266..0c313052e 100644
--- a/docs/app/pages/Components/Snackbar/Snackbar.vue
+++ b/docs/app/pages/Components/Snackbar/Snackbar.vue
@@ -27,7 +27,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Snackbar',
+    name: 'DocSnackbar',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/SpeedDial/SpeedDial.vue b/docs/app/pages/Components/SpeedDial/SpeedDial.vue
index d9514d523..828a5e81f 100644
--- a/docs/app/pages/Components/SpeedDial/SpeedDial.vue
+++ b/docs/app/pages/Components/SpeedDial/SpeedDial.vue
@@ -63,7 +63,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'SpeedDial',
+  name: 'DocSpeedDial',
   mixins: [examples],
   data: () => ({
     props: {
diff --git a/docs/app/pages/Components/Steppers/Steppers.vue b/docs/app/pages/Components/Steppers/Steppers.vue
index ce997b209..27f8e8021 100644
--- a/docs/app/pages/Components/Steppers/Steppers.vue
+++ b/docs/app/pages/Components/Steppers/Steppers.vue
@@ -70,7 +70,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Steppers',
+    name: 'DocSteppers',
     mixins: [examples],
     data: () => ({
       steppers: {
diff --git a/docs/app/pages/Components/Subheader/Subheader.vue b/docs/app/pages/Components/Subheader/Subheader.vue
index 46008a167..b6a254460 100644
--- a/docs/app/pages/Components/Subheader/Subheader.vue
+++ b/docs/app/pages/Components/Subheader/Subheader.vue
@@ -23,7 +23,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Subheader',
+    name: 'DocSubheader',
     mixins: [examples]
   }
 </script>
diff --git a/docs/app/pages/Components/Switch/Switch.vue b/docs/app/pages/Components/Switch/Switch.vue
index 79a9ed357..6678d8695 100644
--- a/docs/app/pages/Components/Switch/Switch.vue
+++ b/docs/app/pages/Components/Switch/Switch.vue
@@ -29,7 +29,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Switch',
+    name: 'DocSwitch',
     mixins: [examples],
     data: () => ({
       props: {
diff --git a/docs/app/pages/Components/Table/Table.vue b/docs/app/pages/Components/Table/Table.vue
index 6463584c0..de2eea06d 100644
--- a/docs/app/pages/Components/Table/Table.vue
+++ b/docs/app/pages/Components/Table/Table.vue
@@ -110,7 +110,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Table',
+    name: 'DocTable',
     mixins: [examples]
   }
 </script>
diff --git a/docs/app/pages/Components/Tabs/Tabs.vue b/docs/app/pages/Components/Tabs/Tabs.vue
index bbf551053..4777586e3 100644
--- a/docs/app/pages/Components/Tabs/Tabs.vue
+++ b/docs/app/pages/Components/Tabs/Tabs.vue
@@ -67,7 +67,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Tabs',
+    name: 'DocTabs',
     mixins: [examples],
     data: () => ({
       tabs: {
diff --git a/docs/app/pages/Components/Toolbar/Toolbar.vue b/docs/app/pages/Components/Toolbar/Toolbar.vue
index ae9ba4a28..40786a2d3 100644
--- a/docs/app/pages/Components/Toolbar/Toolbar.vue
+++ b/docs/app/pages/Components/Toolbar/Toolbar.vue
@@ -50,7 +50,7 @@
 import examples from 'docs-mixins/docsExample'
 
 export default {
-  name: 'Toolbar',
+  name: 'DocToolbar',
   mixins: [examples],
   data: () => ({
     api: {
diff --git a/docs/app/pages/Components/Tooltip/Tooltip.vue b/docs/app/pages/Components/Tooltip/Tooltip.vue
index 4805a850a..7f2454e8e 100644
--- a/docs/app/pages/Components/Tooltip/Tooltip.vue
+++ b/docs/app/pages/Components/Tooltip/Tooltip.vue
@@ -41,7 +41,7 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Tooltip',
+    name: 'DocTooltip',
     mixins: [examples],
     data: () => ({
       props: {

From a4c03be027e56390f4cfcf4f6f335d7998c369cc Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 3 Jan 2018 22:29:57 +0800
Subject: [PATCH 40/72] fix: menu compatibility with IE (node type statement)
 (#1365)

* fix: compare node by type

dom constructors do not have name property in IE.
replace that with comparing by their node type.

fix #1263

* fix(MdMenuContent): height for IE

got height `0` with style `flex-direction: column`

fix #1263
---
 src/components/MdMenu/MdMenuContent.vue | 2 +-
 src/components/MdPopover/MdPopover.vue  | 2 +-
 src/components/MdPortal/MdPortal.js     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
index 5a5f63d7b..a0ef8eb69 100644
--- a/src/components/MdMenu/MdMenuContent.vue
+++ b/src/components/MdMenu/MdMenuContent.vue
@@ -248,7 +248,7 @@
     max-width: $md-menu-base-width * 5;
     max-height: 35vh;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     position: absolute;
     z-index: 60;
     border-radius: 2px;
diff --git a/src/components/MdPopover/MdPopover.vue b/src/components/MdPopover/MdPopover.vue
index 7b0ca6e24..99067f3d3 100644
--- a/src/components/MdPopover/MdPopover.vue
+++ b/src/components/MdPopover/MdPopover.vue
@@ -91,7 +91,7 @@
         if (this.mdSettings) {
           const options = deepmerge(this.getPopperOptions(), this.mdSettings)
 
-          if (this.$el.constructor.name.toLowerCase() !== 'comment') {
+          if (this.$el.nodeType !== Node.COMMENT_NODE) {
             this.popperInstance = new Popper(this.originalParentEl, this.$el, options)
           }
         }
diff --git a/src/components/MdPortal/MdPortal.js b/src/components/MdPortal/MdPortal.js
index f39524a2d..4b0d59102 100644
--- a/src/components/MdPortal/MdPortal.js
+++ b/src/components/MdPortal/MdPortal.js
@@ -98,7 +98,7 @@ export default {
     async initDestroy (manualCall) {
       let el = this.$el
 
-      if (manualCall && this.$el.constructor.name.toLowerCase() === 'comment') {
+      if (manualCall && this.$el.nodeType === Node.COMMENT_NODE) {
         el = this.$vnode.elm
       }
 

From 70712d75d18c70bd42140aad55c769d96cd97d3d Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 5 Jan 2018 23:26:35 +0100
Subject: [PATCH 41/72] fix(MdDatepicker): avoid warning for duplicated keys
 (#1379)

---
 src/components/MdDatepicker/MdDatepickerDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
index dee88dc6f..ece8029ca 100644
--- a/src/components/MdDatepicker/MdDatepickerDialog.vue
+++ b/src/components/MdDatepicker/MdDatepickerDialog.vue
@@ -35,8 +35,8 @@
                   </div>
 
                   <div class="md-datepicker-days">
-                    <span class="md-datepicker-empty" v-for="day in firstDayOfMonth" :key="day"></span>
-                    <div class="md-datepicker-day" v-for="day in daysInMonth" :key="day">
+                    <span class="md-datepicker-empty" v-for="day in firstDayOfMonth" :key="'day-empty-'+day"></span>
+                    <div class="md-datepicker-day" v-for="day in daysInMonth" :key="'day-'+day">
                       <span
                         class="md-datepicker-day-button"
                         :class="{

From 8bda813199813a1864ca39daa435fc6801f7788a Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 6 Jan 2018 06:27:23 +0800
Subject: [PATCH 42/72] refactor(MdSelect): remove uuid (#1368)

* fix(MdMenuContent): attrs binding

* refactor(MdMenuContent): remove this

* refactor(MdSelect): remove uuid

use `ref` instead of `uuid` to access menu container
---
 src/components/MdField/MdSelect/MdSelect.vue | 23 ++++++++------------
 src/components/MdMenu/MdMenuContent.vue      | 11 +++++++---
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index a0e9c4824..52071a836 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -7,7 +7,6 @@
     :md-offset-x="offset.x"
     :md-offset-y="offset.y"
     :md-dense="mdDense"
-    @md-opened="onOpen"
     @md-closed="onClose">
     <md-input
       class="md-input md-select-value"
@@ -33,7 +32,7 @@
         class="md-select-menu"
         :md-content-class="mdClass"
         :style="menuStyles"
-        :id="uniqueId">
+        @enter="onMenuEnter">
         <slot />
       </md-menu-content>
     </keep-alive>
@@ -45,7 +44,6 @@
 
 <script>
   import raf from 'raf'
-  import MdUuid from 'core/utils/MdUuid'
   import MdComponent from 'core/MdComponent'
   import MdDropDownIcon from 'core/icons/MdDropDownIcon'
   import MdMenu from 'components/MdMenu/MdMenu'
@@ -77,7 +75,6 @@
     inject: ['MdField'],
     data () {
       return {
-        uniqueId: 'md-select-menu-' + MdUuid(),
         menuStyles: {},
         offset: {
           x: defaultOffset.x,
@@ -139,10 +136,8 @@
         menu.scrollTop = top - ((menuHeight - elHeight) / 2)
       },
       async setOffsets (target) {
-        await this.$nextTick()
-
         if (!this.$isServer) {
-          const menu = document.getElementById(this.uniqueId)
+          const menu = this.$refs.menu.$refs.container
 
           if (menu) {
             const selected = target || menu.querySelector('.md-selected')
@@ -160,14 +155,14 @@
           }
         }
       },
-      onOpen () {
-        this.$emit('md-opened')
-        if (this.didMount) {
-          this.setOffsets()
-          window.setTimeout(() => {
-            this.MdField.focused = true
-          }, 10)
+      onMenuEnter () {
+        if (!this.didMount) {
+          return
         }
+
+        this.setOffsets()
+        this.MdField.focused = true
+        this.$emit('md-opened')
       },
       applyHighlight () {
         this.MdField.focused = false
diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
index a0ef8eb69..0ac47b478 100644
--- a/src/components/MdMenu/MdMenuContent.vue
+++ b/src/components/MdMenu/MdMenuContent.vue
@@ -1,6 +1,6 @@
 <template>
   <md-popover :md-settings="popperSettings" :md-active="shouldRender">
-    <transition name="md-menu-content" :css="didMount" v-if="shouldRender">
+    <transition name="md-menu-content" :css="didMount" v-if="shouldRender" v-on="$listeners">
       <div
         :class="[menuClasses, mdContentClass, $mdActiveTheme]"
         :style="menuStyles"
@@ -9,8 +9,8 @@
         @keydown.space.prevent="setSelection"
         @keydown.enter.prevent="setSelection"
         ref="menu">
-        <div class="md-menu-content-container md-scrollbar" :class="$mdActiveTheme">
-          <md-list :class="listClasses" v-bind="$attrs" @keydown.esc="onEsc">
+        <div class="md-menu-content-container md-scrollbar" :class="$mdActiveTheme" ref="container">
+          <md-list :class="listClasses" v-bind="filteredAttrs" @keydown.esc="onEsc">
             <slot />
           </md-list>
         </div>
@@ -48,6 +48,11 @@
       menuStyles: ''
     }),
     computed: {
+      filteredAttrs () {
+        const attrs = this.$attrs
+        delete attrs.id
+        return attrs
+      },
       highlightedItem () {
         return this.highlightItems[this.highlightIndex]
       },

From 637e914effe6abffd8d0f6d40a82ab24845735ca Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 5 Jan 2018 23:28:00 +0100
Subject: [PATCH 43/72] fix(MdSelect): prevent overflowing arrow icon (#1373)

* fix(MdField): remove width for input, textarea

* fix(MdSelect): prevent overflowing icon in layout with size
---
 src/components/MdField/MdField.vue           | 1 -
 src/components/MdField/MdSelect/MdSelect.vue | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
index 0cc49e0fa..f6daf3147 100644
--- a/src/components/MdField/MdField.vue
+++ b/src/components/MdField/MdField.vue
@@ -174,7 +174,6 @@
 
     .md-input,
     .md-textarea {
-      width: 100%;
       height: $md-input-height;
       padding: 0;
       display: block;
diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index 52071a836..da433898e 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -278,6 +278,7 @@
   .md-menu.md-select {
     display: flex;
     flex: 1;
+    overflow: auto;
 
     &:not(.md-disabled) {
       .md-input,
@@ -289,6 +290,7 @@
 
     .md-input {
       flex: 1;
+      min-width: 0;
     }
 
     select,

From 7502554379ebf4bf124443863e8639300e879be4 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 5 Jan 2018 23:29:06 +0100
Subject: [PATCH 44/72] docs: refactor to new layout (#1371)

* docs(MdSelect): update layout classes

* docs(MdAutocomplete): update layout classes

* docs(Form): update layout classes

* docs(MdSelect): update layout classes
---
 .../Components/Autocomplete/Autocomplete.vue     |  6 +++---
 .../Components/Form/examples/FormValidation.vue  | 16 ++++++++--------
 .../Components/Select/examples/BasicSelect.vue   |  8 ++++----
 .../Components/Select/examples/DenseSelect.vue   |  8 ++++----
 .../Select/examples/DisabledSelect.vue           | 14 ++++----------
 .../Select/examples/MultipleSelect.vue           |  4 ++--
 .../Select/examples/OptgroupSelect.vue           |  6 +++---
 7 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/docs/app/pages/Components/Autocomplete/Autocomplete.vue b/docs/app/pages/Components/Autocomplete/Autocomplete.vue
index eb67f3cc7..957d32a1d 100644
--- a/docs/app/pages/Components/Autocomplete/Autocomplete.vue
+++ b/docs/app/pages/Components/Autocomplete/Autocomplete.vue
@@ -47,8 +47,8 @@
       <h2>Search Algorithms</h2>
 
       <p>Vue Material autocomplete comes with 2 ways of search: <a href="https://en.wikipedia.org/wiki/Approximate_string_matching" target="_blank">Fuzzy search</a> and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:</p>
-      <div class="md-layout-row">
-        <div class="md-flex-40">
+      <div class="md-layout md-gutter">
+        <div class="md-layout-item md-size-40">
           <p>
             <strong>Fuzzy search</strong> - search term: <code>pam</code>
           </p>
@@ -66,7 +66,7 @@
           </div>
         </div>
 
-        <div class="md-flex-40">
+        <div class="md-layout-item md-size-40">
           <p>
             <strong>Normal Search</strong> - search term: <code>pam</code>
           </p>
diff --git a/docs/app/pages/Components/Form/examples/FormValidation.vue b/docs/app/pages/Components/Form/examples/FormValidation.vue
index 81fb2fe38..69ffb19b0 100644
--- a/docs/app/pages/Components/Form/examples/FormValidation.vue
+++ b/docs/app/pages/Components/Form/examples/FormValidation.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <form novalidate class="md-layout-row md-gutter" @submit.prevent="validateUser">
-      <md-card class="md-flex-50 md-flex-small-100">
+    <form novalidate class="md-layout" @submit.prevent="validateUser">
+      <md-card class="md-layout-item md-size-50 md-small-size-100">
         <md-card-header>
           <div class="md-title">Users</div>
         </md-card-header>
 
         <md-card-content>
-          <div class="md-layout-row md-layout-wrap md-gutter">
-            <div class="md-flex md-flex-small-100">
+          <div class="md-layout md-gutter">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('firstName')">
                 <label for="first-name">First Name</label>
                 <md-input name="first-name" id="first-name" autocomplete="given-name" v-model="form.firstName" :disabled="sending" />
@@ -17,7 +17,7 @@
               </md-field>
             </div>
 
-            <div class="md-flex md-flex-small-100">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('lastName')">
                 <label for="last-name">Last Name</label>
                 <md-input name="last-name" id="last-name" autocomplete="family-name" v-model="form.lastName" :disabled="sending" />
@@ -27,8 +27,8 @@
             </div>
           </div>
 
-          <div class="md-layout-row md-gutter md-layout-wrap">
-            <div class="md-flex md-flex-small-100">
+          <div class="md-layout md-gutter">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('gender')">
                 <label for="gender">Gender</label>
                 <md-select name="gender" id="gender" v-model="form.gender" md-dense :disabled="sending">
@@ -40,7 +40,7 @@
               </md-field>
             </div>
 
-            <div class="md-flex md-flex-small-100">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('age')">
                 <label for="age">Age</label>
                 <md-input type="number" id="age" name="age" autocomplete="age" v-model="form.age" :disabled="sending" />
diff --git a/docs/app/pages/Components/Select/examples/BasicSelect.vue b/docs/app/pages/Components/Select/examples/BasicSelect.vue
index dd78a6f40..f88bf2cf8 100644
--- a/docs/app/pages/Components/Select/examples/BasicSelect.vue
+++ b/docs/app/pages/Components/Select/examples/BasicSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="md-layout-row md-gutter">
-      <div class="md-flex">
+    <div class="md-layout md-gutter">
+      <div class="md-layout-item">
         <md-field>
           <label for="movie">Movie</label>
           <md-select v-model="movie" name="movie" id="movie">
@@ -16,7 +16,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <md-select v-model="country" name="country" id="country" placeholder="Country">
             <md-option value="australia">Australia</md-option>
@@ -27,7 +27,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <label for="font">Font</label>
           <md-select v-model="font" name="font" id="font">
diff --git a/docs/app/pages/Components/Select/examples/DenseSelect.vue b/docs/app/pages/Components/Select/examples/DenseSelect.vue
index d782ea858..7860f8b5a 100644
--- a/docs/app/pages/Components/Select/examples/DenseSelect.vue
+++ b/docs/app/pages/Components/Select/examples/DenseSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="md-layout-row md-gutter">
-      <div class="md-flex">
+    <div class="md-layout md-gutter">
+      <div class="md-layout-item">
         <md-field>
           <label for="movies">Movies</label>
           <md-select v-model="movies" name="movies" id="movies" md-dense multiple>
@@ -16,7 +16,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <label for="country">Country</label>
           <md-select v-model="country" name="country" id="country" md-dense>
@@ -28,7 +28,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <label for="font">Font</label>
           <md-select v-model="font" name="font" id="font" md-dense>
diff --git a/docs/app/pages/Components/Select/examples/DisabledSelect.vue b/docs/app/pages/Components/Select/examples/DisabledSelect.vue
index 5e81c19ee..25b255143 100644
--- a/docs/app/pages/Components/Select/examples/DisabledSelect.vue
+++ b/docs/app/pages/Components/Select/examples/DisabledSelect.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="md-layout-row md-gutter">
-    <div class="md-flex">
+  <div class="md-layout md-gutter">
+    <div class="md-layout-item">
       <md-field>
         <label for="movie">Disabled Select</label>
         <md-select v-model="movie" name="movie" id="movie" disabled>
@@ -15,7 +15,7 @@
       </md-field>
     </div>
 
-    <div class="md-flex">
+    <div class="md-layout-item">
       <md-field>
         <label for="country">Disabled Options</label>
         <md-select v-model="country" name="country" id="country">
@@ -27,7 +27,7 @@
       </md-field>
     </div>
 
-    <div class="md-flex">
+    <div class="md-layout-item">
       <md-field>
         <label for="food">Disabled groups</label>
         <md-select v-model="food" name="food" id="food">
@@ -64,9 +64,3 @@
     })
   }
 </script>
-
-<style lang="scss" scoped>
-  .md-field {
-    max-width: 300px;
-  }
-</style>
diff --git a/docs/app/pages/Components/Select/examples/MultipleSelect.vue b/docs/app/pages/Components/Select/examples/MultipleSelect.vue
index 15434674d..4cc383676 100644
--- a/docs/app/pages/Components/Select/examples/MultipleSelect.vue
+++ b/docs/app/pages/Components/Select/examples/MultipleSelect.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="md-layout-row md-gutter">
-    <div class="md-flex">
+  <div class="md-layout md-gutter">
+    <div class="md-layout-item">
       <md-field>
         <label for="movies">Movies</label>
         <md-select v-model="selectedMovies" name="movies" id="movies" multiple>
diff --git a/docs/app/pages/Components/Select/examples/OptgroupSelect.vue b/docs/app/pages/Components/Select/examples/OptgroupSelect.vue
index 2bea8e3a5..31f4acc1b 100644
--- a/docs/app/pages/Components/Select/examples/OptgroupSelect.vue
+++ b/docs/app/pages/Components/Select/examples/OptgroupSelect.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="md-layout-row md-gutter">
-    <div class="md-flex">
+  <div class="md-layout md-gutter">
+    <div class="md-layout-item">
       <md-field>
         <label for="food">Food</label>
         <md-select v-model="food1" name="food" id="food">
@@ -25,7 +25,7 @@
       </md-field>
     </div>
 
-    <div class="md-flex">
+    <div class="md-layout-item">
       <md-field>
         <label for="food">Food</label>
         <md-select v-model="food2" name="food" id="food" md-dense>

From e24f8dcf94082f40330ba75e6c95661b875a8f70 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 12 Jan 2018 19:28:02 +0100
Subject: [PATCH 45/72] fix(MdTable): fix height of fixed table for firefox
 (#1384)

---
 src/components/MdTable/MdTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue
index 4d190cd84..e4d68ee57 100644
--- a/src/components/MdTable/MdTable.vue
+++ b/src/components/MdTable/MdTable.vue
@@ -180,7 +180,7 @@
       },
       contentStyles () {
         if (this.mdFixedHeader) {
-          return `height: ${this.mdHeight}px`
+          return `height: ${this.mdHeight}px;max-height: ${this.mdHeight}px`
         }
       },
       contentClasses () {

From ff341a2306b23f8e98723b5660747135f010fb2b Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 12 Jan 2018 19:28:39 +0100
Subject: [PATCH 46/72] feat(MdApp): allow custom components with slot (#1387)

---
 src/components/MdApp/MdApp.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/MdApp/MdApp.vue b/src/components/MdApp/MdApp.vue
index cc38763ef..a83089d5c 100644
--- a/src/components/MdApp/MdApp.vue
+++ b/src/components/MdApp/MdApp.vue
@@ -13,10 +13,11 @@
 
     if (children) {
       children.forEach(child => {
-        const opts = child.componentOptions
+        const data = child.data
+        const componentOptions = child.componentOptions
 
-        if (opts && componentTypes.includes(opts.tag)) {
-          child.data.slot = opts.tag
+        if ((data && componentTypes.includes(data.slot)) || (componentOptions && componentTypes.includes(componentOptions.tag))) {
+          child.data.slot = data.slot || componentOptions.tag
           child.data.provide = options.Ctor.options.provide
           child.context = context
           child.functionalContext = functionalContext

From 0a83834ab3a9f731d0ad83ed73d728096d34ecd4 Mon Sep 17 00:00:00 2001
From: Andrey Krivko <jastkand@gmail.com>
Date: Sat, 13 Jan 2018 00:30:16 +0600
Subject: [PATCH 47/72] fix(MdField): preserve the name attribute on change
 (#1385)

---
 src/components/MdField/MdFieldMixin.js        |  1 +
 .../MdField/MdInput/MdInput.test.js           | 33 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/MdField/MdInput/MdInput.test.js

diff --git a/src/components/MdField/MdFieldMixin.js b/src/components/MdField/MdFieldMixin.js
index 9a78d79a4..08d3b0f5d 100644
--- a/src/components/MdField/MdFieldMixin.js
+++ b/src/components/MdField/MdFieldMixin.js
@@ -2,6 +2,7 @@ export default {
   props: {
     value: {},
     placeholder: String,
+    name: String,
     maxlength: [String, Number],
     readonly: Boolean,
     required: Boolean,
diff --git a/src/components/MdField/MdInput/MdInput.test.js b/src/components/MdField/MdInput/MdInput.test.js
new file mode 100644
index 000000000..3a5a2765a
--- /dev/null
+++ b/src/components/MdField/MdInput/MdInput.test.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import mountTemplate from 'test/utils/mountTemplate'
+import MdFieldModule from 'components/MdField'
+import MdField from '../MdField.vue'
+
+Vue.use(MdFieldModule)
+
+test('should render the input', async () => {
+  const template = `
+    <md-field>
+      <md-input></md-input>
+    </md-field>
+  `
+  const wrapper = await mountTemplate(MdField, template)
+
+  expect(wrapper.contains('.md-input')).toBe(true)
+})
+
+test('should preserve a value of the "name" attribute on change', async () => {
+  const template = `
+    <md-field>
+      <md-input name="details"></md-input>
+    </md-field>
+  `
+  const wrapper = await mountTemplate(MdField, template)
+  const input = wrapper.find('.md-input')[0]
+
+  input.trigger('change')
+
+  await wrapper.vm.$nextTick()
+
+  expect(input.getAttribute('name')).toBe('details')
+})

From edb484ea504afec13fe5903115e29ffc45138fd6 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 12 Jan 2018 19:30:57 +0100
Subject: [PATCH 48/72] feat(MdTableRow): enable native browser events without
 the .native modifier (#1393)

---
 src/components/MdTable/MdTableRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdTable/MdTableRow.vue b/src/components/MdTable/MdTableRow.vue
index 1a59e8676..df8bc95ab 100644
--- a/src/components/MdTable/MdTableRow.vue
+++ b/src/components/MdTable/MdTableRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <tr class="md-table-row" :class="rowClasses" @click="onClick">
+  <tr class="md-table-row" :class="rowClasses" @click="onClick" v-on="$listeners">
     <md-table-cell-selection
       v-model="isSelected"
       :md-disabled="mdDisabled"

From d3953f734f733298144f199f2309df16a077c21b Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 12 Jan 2018 19:32:09 +0100
Subject: [PATCH 49/72] fix(MdSteppers): recalculate styles on window resize
 (#1394)

* fix(MdSteppers): overflow on resize

* refactor(MdSteppers): add beforeDestroy hook to remove resize listener
---
 src/components/MdSteppers/MdSteppers.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/MdSteppers/MdSteppers.vue b/src/components/MdSteppers/MdSteppers.vue
index 3cc58c666..966016a10 100644
--- a/src/components/MdSteppers/MdSteppers.vue
+++ b/src/components/MdSteppers/MdSteppers.vue
@@ -186,6 +186,8 @@
         if ('ResizeObserver' in window) {
           this.resizeObserver = new window.ResizeObserver(this.calculateStepperPos)
           this.resizeObserver.observe(this.$el)
+        } else {
+           window.addEventListener('resize', this.calculateStepperPos)
         }
 
         if (steppersContent) {
@@ -244,7 +246,12 @@
         this.setupObservers()
         this.setupWatchers()
       }, 100)
-    }
+    },
+    beforeDestroy () {
+      if (!('ResizeObserver' in window)) {
+        window.removeEventListener('resize', this.calculateStepperPos)
+      }
+    },
   })
 </script>
 

From 247a840643e0316e10025a87c12446f4d3ffdaed Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 13 Jan 2018 02:33:18 +0800
Subject: [PATCH 50/72] feat(MdChips): add formatter for individual chips
 (#1339)

* feat(MdChips): formatter

Formatter before chip insertion. Effects to insertion and duplicated-checking.

fix #1288

* style(MdChips): always return a value

* docs(Chips): fix `md-format` API description

https://github.com/vuematerial/vue-material/pull/1339#discussion_r158723276

* docs(ChipsFormat): fix component name and example message

* docs(ChipsFormat): `formatName` return result directly

https://github.com/vuematerial/vue-material/pull/1339#discussion_r158723492

* style(MdChips): add a space before `if` statement

https://github.com/vuematerial/vue-material/pull/1339#discussion_r158723536

* docs(Chips): better message for formatter

https://github.com/vuematerial/vue-material/pull/1339#discussion_r158723959

* fix: code style
---
 docs/app/pages/Components/Chips/Chips.vue     | 17 +++++++
 .../Components/Chips/examples/Format.vue      | 47 +++++++++++++++++++
 src/components/MdChips/MdChips.vue            | 38 ++++++++++-----
 3 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 docs/app/pages/Components/Chips/examples/Format.vue

diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
index 981925bef..29046106c 100644
--- a/docs/app/pages/Components/Chips/Chips.vue
+++ b/docs/app/pages/Components/Chips/Chips.vue
@@ -3,6 +3,7 @@
 <example src="./examples/Editable.vue" />
 <example src="./examples/ChipCustomTemplate.vue" />
 <example src="./examples/DuplicatedFeedback.vue" />
+<example src="./examples/Format.vue" />
 <example src="./examples/Themed.vue" />
 
 <template>
@@ -53,6 +54,13 @@
       <code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
     </div>
 
+    <div class="page-container-section">
+      <h2>Formatter</h2>
+
+      <p>Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.</p>
+      <code-example title="Formatted chips" :component="examples['format']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Hue Colors</h2>
 
@@ -156,6 +164,15 @@ export default {
             type: 'Boolean',
             description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
             defaults: 'false'
+          },
+          {
+            name: 'md-format',
+            type: 'Function',
+            description: [
+              'Formatter before chip insertion. Effects to insertion and duplicated-checking.',
+              'The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result.'
+            ].join('<br/>'),
+            defaults: 'null'
           }
         ]
       },
diff --git a/docs/app/pages/Components/Chips/examples/Format.vue b/docs/app/pages/Components/Chips/examples/Format.vue
new file mode 100644
index 000000000..6fc4f8460
--- /dev/null
+++ b/docs/app/pages/Components/Chips/examples/Format.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <md-chips class="md-primary" v-model="clubs" md-placeholder="Add club..." :md-format="toUppercase">
+      <label>La Liga Clubs</label>
+      <div class="md-helper-text">Three uppercase letters</div>
+    </md-chips>
+    
+    <md-chips class="md-primary" v-model="artists" md-placeholder="Add artist..." :md-format="formatName">
+      <label>Artists</label>
+      <div class="md-helper-text">Try inserting `Eugène Ysaÿe`. The formatter will remove diacritics.</div>
+    </md-chips>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Format',
+  data: () => ({
+    clubs: [
+      'FCB',
+      'MAD'
+    ],
+    artists: [
+      'Claude Debussy',
+      'Jules Massenet',
+      'Gabriel Dupont',
+      'Emma Bardac',
+      'Mary Garden'
+    ]
+  }),
+  methods: {
+    toUppercase (str) {
+      str = str.replace(/\s/g, '').toUpperCase()
+      if (str.length !== 3) return false
+      return str
+    },
+    formatName (str) {
+      let words = str.split(' ').filter(str => str !== '')
+      // remove accents / diacritics
+      words = words.map(str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
+      // capitalize
+      words = words.map(str => str[0].toUpperCase() + str.slice(1))
+      return words.join(' ')
+    }
+  }
+}
+</script>
diff --git a/src/components/MdChips/MdChips.vue b/src/components/MdChips/MdChips.vue
index 621b004d1..b1127bc50 100644
--- a/src/components/MdChips/MdChips.vue
+++ b/src/components/MdChips/MdChips.vue
@@ -58,6 +58,9 @@
       mdCheckDuplicated: {
         type: Boolean,
         default: false
+      },
+      mdFormat: {
+        type: Function
       }
     },
     data: () => ({
@@ -73,26 +76,35 @@
 
       modelRespectLimit () {
         return !this.mdLimit || this.value.length < this.mdLimit
+      },
+
+      formattedInputValue () {
+        if (!this.mdFormat) {
+          return this.inputValue
+        }
+        return this.mdFormat(this.inputValue)
       }
     },
     methods: {
       insertChip ({ target }) {
-        if (!this.inputValue || !this.modelRespectLimit) {
+        let inputValue = this.formattedInputValue
+
+        if (!inputValue || !this.modelRespectLimit) {
           return
         }
-        
-        if (this.value.includes(this.inputValue)) {
+
+        if (this.value.includes(inputValue)) {
           this.duplicatedChip = null
           // to trigger animate
           this.$nextTick(() => {
-            this.duplicatedChip = this.inputValue
+            this.duplicatedChip = inputValue
           })
           return
         }
-        
-        this.value.push(this.inputValue)
+
+        this.value.push(inputValue)
         this.$emit('input', this.value)
-        this.$emit('md-insert', this.inputValue)
+        this.$emit('md-insert', inputValue)
         this.inputValue = ''
       },
       removeChip (chip) {
@@ -116,12 +128,16 @@
         }
       },
       checkDuplicated () {
-        if (!this.value.includes(this.inputValue)) {
+        if (!this.value.includes(this.formattedInputValue)) {
           this.duplicatedChip = null
-          return
+          return false
         }
-        if (!this.mdCheckDuplicated) return
-        this.duplicatedChip = this.inputValue
+        
+        if (!this.mdCheckDuplicated) {
+          return false
+        }
+        
+        this.duplicatedChip = this.formattedInputValue
       }
     },
     watch: {

From e1a32b5297738e1a7666c32a80c983e21acddaa7 Mon Sep 17 00:00:00 2001
From: djxy <samuel.m.lavoie@gmail.com>
Date: Mon, 15 Jan 2018 12:11:54 -0500
Subject: [PATCH 51/72] docs: fix wrong props (#1404)

I'm not sure, but I think these should be `md-persistent=` and not `md-permanent=`
---
 docs/app/pages/Components/Drawer/Drawer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/pages/Components/Drawer/Drawer.vue b/docs/app/pages/Components/Drawer/Drawer.vue
index b036de86e..e0285ae16 100644
--- a/docs/app/pages/Components/Drawer/Drawer.vue
+++ b/docs/app/pages/Components/Drawer/Drawer.vue
@@ -124,14 +124,14 @@
             },
             {
               offset: true,
-              name: 'md-permanent="full"',
+              name: 'md-persistent="full"',
               type: 'String',
               description: 'Make the drawer with full height. This will make the drawer hidden when closed and and pusing the content when opened.',
               defaults: '-'
             },
             {
               offset: true,
-              name: 'md-permanent="mini"',
+              name: 'md-persistent="mini"',
               type: 'String',
               description: 'Make the drawer with full height. This will make the drawer hidden when closed and and pusing the content when opened.',
               defaults: '-'

From 13ff8b3108aa6ee91c4e7ddb6678aab261f1ad18 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 15 Jan 2018 15:14:38 -0200
Subject: [PATCH 52/72] Update .codeclimate.yml

---
 .codeclimate.yml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 291210db1..41e59cfef 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -23,10 +23,7 @@ exclude_paths:
 plugins:
   eslint:
     enabled: false
-
-  scss-lint:
-    enabled: true
-
+    
   duplication:
     enabled: true
     config:

From d026496147446be6aa68767ad25485183c21daca Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 17 Jan 2018 05:03:16 +0800
Subject: [PATCH 53/72] fix(MdField): Consider number `0` as hasValue (#1407)

fix #1406
---
 src/components/MdField/MdField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
index f6daf3147..8a2f858c1 100644
--- a/src/components/MdField/MdField.vue
+++ b/src/components/MdField/MdField.vue
@@ -70,7 +70,7 @@
     },
     computed: {
       stringValue () {
-        return this.MdField.value && this.MdField.value.toString()
+        return (this.MdField.value || this.MdField.value === 0) && this.MdField.value.toString()
       },
       hasCounter () {
         return this.mdCounter && (this.MdField.maxlength || this.MdField.counter)

From 6a719b5c2421d2efadb3bc522693e438a5a01066 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Thu, 18 Jan 2018 04:41:17 +0800
Subject: [PATCH 54/72] fix(MdAutocomplete): prevent show options twice (#1410)

fix #1408
---
 src/components/MdAutocomplete/MdAutocomplete.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/MdAutocomplete/MdAutocomplete.vue b/src/components/MdAutocomplete/MdAutocomplete.vue
index 2ec526008..b89e41f77 100644
--- a/src/components/MdAutocomplete/MdAutocomplete.vue
+++ b/src/components/MdAutocomplete/MdAutocomplete.vue
@@ -192,6 +192,10 @@
         }
       },
       async showOptions () {
+        if (this.showMenu) {
+          return false
+        }
+
         this.showMenu = true
         await this.$nextTick()
         this.triggerPopover = true

From 9d74690a7df25778986e3c2b6ec64e64fe1ee1f0 Mon Sep 17 00:00:00 2001
From: Eric Berry <coderberry@gmail.com>
Date: Tue, 23 Jan 2018 09:40:17 -0700
Subject: [PATCH 55/72] Update sponsorship links (#1427)

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2f2965f51..9c050af61 100644
--- a/README.md
+++ b/README.md
@@ -30,11 +30,11 @@ Build well-designed apps that can fit on every screen with support to all modern
 
 ## Sponsorship
 
-Vue Material is proudly sponsored by [Rollbar](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
+Vue Material is proudly sponsored by [Rollbar](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
 ). They provide real-time JavaScript error monitoring, alerting, and analytics for developers. :rocket:
 
-You can try Rollbar for free at [https://rollbar.com](https://cs.berry.sh/c/c0597778-f465-4788-abe3-8711cc087774
-) <img src="https://cs.berry.sh/l/c0597778-f465-4788-abe3-8711cc087774/pixel.png" />
+You can try Rollbar for free at [https://rollbar.com](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
+) <img src="https://codesponsor.io/t/l/93172542ee6813a9372c08c459fd1e5a/pixel.png" />
 
 ## Demo and Documentation
 

From 4d0f18ad83896eda4718fc8d6b07d8ccf204b3fd Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 23 Jan 2018 17:47:27 +0100
Subject: [PATCH 56/72] docs(MdDialog): add note about scrollable content
 (#1416)

---
 docs/app/pages/Components/Dialog/Dialog.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/app/pages/Components/Dialog/Dialog.vue b/docs/app/pages/Components/Dialog/Dialog.vue
index b717a5c4c..715fdd57e 100644
--- a/docs/app/pages/Components/Dialog/Dialog.vue
+++ b/docs/app/pages/Components/Dialog/Dialog.vue
@@ -8,8 +8,10 @@
     <div class="page-container-section">
       <p>Dialogs informs users about a specific task and may contain critical information, require decisions, or involve multiple tasks. The dialog component works with any plain html content. You can have tabs inside, all form components and many more.</p>
       <p>The component can be used with a custom markup, using the auxiliary components or with presets made by Vue Material. Those presets emulates the default Dialogs from Javascript, like confirm, alert and prompt.</p>
-    </div>
 
+      <note-block tip>To allow scrolling in content of modal you need to wrap your content in <code>md-dialog-content</code> component.</note-block>
+
+    </div>
     <div class="page-container-section">
       <h2>Dialog</h2>
 

From a2cbc980f5283575913cdec21e88661c538fa50c Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 23 Jan 2018 17:48:03 +0100
Subject: [PATCH 57/72] feat(MdDatepicker): remove fixed label position (#1417)

* feat(MdDatepicker): remove fixed label position

* feat(MdDatepicker): add md-native class
---
 src/components/MdDatepicker/MdDatepicker.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index 7546eea62..31c068c3d 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-field class="md-datepicker">
+  <md-field :class="['md-datepicker', { 'md-native': !this.mdOverrideNative }]">
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
     <md-input :type="type" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
 
@@ -127,9 +127,12 @@
   }
 
   .md-datepicker {
-    label {
-      top: 0 !important;
+    &.md-native {
+      label {
+        top: 0 !important;
+      }
     }
+
     .md-date-icon {
       cursor: pointer;
     }

From af0dc0a7b74647197ee910944b833911f502e843 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Wed, 24 Jan 2018 00:59:37 +0800
Subject: [PATCH 58/72] feat(MdDatepicker): custom first day of a week (#1409)

* feat(MdDatepicker): custom first day of a week

new props `md-first-day-of-a-week` for custom first day of a week.

fix #1397

* Revert "feat(MdDatepicker): custom first day of a week"

This reverts commit f0788be339e31491370469ab9c18b61bde2b7dcc.

* feat(MdDatepicker): custom first day of a week

global config `locale.firstDayOfAWeek`

fix #1397
---
 .../Datepicker/examples/BasicDatepicker.vue   | 20 ++++++++++++++++-
 .../MdDatepicker/MdDatepickerDialog.vue       | 22 +++++++++++++++++--
 src/material.js                               |  3 ++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
index be51eb45d..d465b1b6a 100644
--- a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
+++ b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
@@ -1,6 +1,14 @@
 <template>
   <div>
     <md-datepicker v-model="selectedDate" />
+    <md-field>
+      <label for="movie">First day of a week</label>
+      <md-select v-model="firstDayOfAWeek">
+        <md-option value="0">Sunday</md-option>
+        <md-option value="1">Monday</md-option>
+      </md-select>
+      <span class="md-helper-text">This config is global.</span>
+    </md-field>
   </div>
 </template>
 
@@ -9,6 +17,16 @@
     name: 'BasicDatepicker',
     data: () => ({
       selectedDate: null
-    })
+    }),
+    computed: {
+      firstDayOfAWeek: {
+        get () {
+          return this.$material.locale.firstDayOfAWeek
+        },
+        set (val) {
+          this.$material.locale.firstDayOfAWeek = val
+        }
+      }
+    }
   }
 </script>
diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
index ece8029ca..230f04adb 100644
--- a/src/components/MdDatepicker/MdDatepickerDialog.vue
+++ b/src/components/MdDatepicker/MdDatepickerDialog.vue
@@ -31,11 +31,12 @@
                   <md-button class="md-dense md-datepicker-month-trigger" @click="currentView = 'month'">{{ currentMonthName }} {{ currentYear }}</md-button>
 
                   <div class="md-datepicker-week">
-                    <span v-for="(day, index) in locale.shorterDays" :key="index">{{ day }}</span>
+                    <span v-for="(day, index) in locale.shorterDays" :key="index" v-if="index >= firstDayOfAWeek">{{ day }}</span>
+                    <span v-for="(day, index) in locale.shorterDays" :key="index" v-if="index < firstDayOfAWeek">{{ day }}</span>
                   </div>
 
                   <div class="md-datepicker-days">
-                    <span class="md-datepicker-empty" v-for="day in firstDayOfMonth" :key="'day-empty-'+day"></span>
+                    <span class="md-datepicker-empty" v-for="day in prefixEmptyDays" :key="'day-empty-'+day"></span>
                     <div class="md-datepicker-day" v-for="day in daysInMonth" :key="'day-'+day">
                       <span
                         class="md-datepicker-day-button"
@@ -109,6 +110,8 @@
   import MdArrowLeftIcon from 'core/icons/MdArrowLeftIcon'
   import MdDialog from 'components/MdDialog/MdDialog'
 
+  const daysInAWeek = 7
+
   const getElements = (el, selector) => {
     if (el && el.querySelector) {
       return el.querySelectorAll(selector)
@@ -139,6 +142,16 @@
       availableYears: null
     }),
     computed: {
+      firstDayOfAWeek () {
+        // normalize
+        let firstDayOfAWeek = Number(this.$material.locale.firstDayOfAWeek)
+        if (Number.isNaN(firstDayOfAWeek) || !Number.isFinite(firstDayOfAWeek)) {
+          return 0
+        }
+        firstDayOfAWeek = Math.floor(firstDayOfAWeek) % daysInAWeek
+        firstDayOfAWeek += firstDayOfAWeek < 0 ? daysInAWeek : 0
+        return firstDayOfAWeek
+      },
       locale() {
         return this.$material.locale;
       },
@@ -165,6 +178,11 @@
       firstDayOfMonth () {
         return startOfMonth(this.currentDate).getDay()
       },
+      prefixEmptyDays () {
+        let prefixEmptyDays = this.firstDayOfMonth - this.firstDayOfAWeek
+        prefixEmptyDays += prefixEmptyDays < 0 ? daysInAWeek : 0
+        return prefixEmptyDays
+      },
       daysInMonth () {
         return getDaysInMonth(this.currentDate)
       },
diff --git a/src/material.js b/src/material.js
index 174092b62..0b6ddfc12 100644
--- a/src/material.js
+++ b/src/material.js
@@ -15,7 +15,8 @@ const init = () => {
       shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
-      shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D']
+      shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
+      firstDayOfAWeek: 0
     }
   })
 

From 70b3aa2bbf17f78f1bc00c4439d29db21a659ca8 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 23 Jan 2018 18:09:10 +0100
Subject: [PATCH 59/72] feat(MdRipple): multiple waves (#1419)

* feat(MdRipple): multiple waves

* feat(MdRipple): add transition-group to remove ripple after transition

* feat(MdRipple): changed handling of clearing waves

* feat(MdRipple): move debounce to utils
---
 src/components/MdRipple/MdRipple.vue | 45 +++++++++++++---------------
 src/core/utils/MdDebounce.js         |  8 +++++
 2 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 src/core/utils/MdDebounce.js

diff --git a/src/components/MdRipple/MdRipple.vue b/src/components/MdRipple/MdRipple.vue
index b6575cac0..d26a6d5c0 100644
--- a/src/components/MdRipple/MdRipple.vue
+++ b/src/components/MdRipple/MdRipple.vue
@@ -1,21 +1,23 @@
 <template>
   <div
-    class="md-ripple"
-    :class="rippleClasses"
+    :class="['md-ripple', rippleClasses]"
     @touchstart.passive.stop="touchStartCheck"
     @touchmove.passive.stop="touchMoveCheck"
-    @mousedown.passive.stop="startRipple">
+    @touchend.passive.stop="clearWave"
+    @mousedown.passive.stop="startRipple"
+    @mouseup.passive.stop="clearWave">
     <slot />
 
-    <transition name="md-ripple" @after-enter="clearWave" v-if="!isDisabled">
-      <span class="md-ripple-wave" :class="waveClasses" :style="waveStyles" v-if="animating" ref="rippleWave" />
-    </transition>
+    <transition-group name="md-ripple" v-if="!isDisabled">
+      <span v-for="(ripple, index) in ripples" :key="'ripple'+index" :class="['md-ripple-wave', waveClasses]" :style="ripple.waveStyles" />
+    </transition-group>
   </div>
 </template>
 
 <script>
   import raf from 'raf'
   import MdComponent from 'core/MdComponent'
+  import debounce from 'core/utils/MdDebounce'
 
   export default new MdComponent({
     name: 'MdRipple',
@@ -25,10 +27,9 @@
       mdCentered: Boolean
     },
     data: () => ({
-      eventType: null,
-      waveStyles: null,
-      animating: false,
-      touchTimeout: null
+      ripples: [],
+      touchTimeout: null,
+      eventType: null
     }),
     computed: {
       isDisabled () {
@@ -84,29 +85,26 @@
               position = this.getHitPosition($event, size)
             }
 
-            await this.clearWave()
-
             this.eventType = $event.type
-            this.animating = true
-            this.applyStyles(position, size)
+            this.ripples.push({
+              animating: true,
+              waveStyles: this.applyStyles(position, size)
+            })
           }
         })
       },
       applyStyles (position, size) {
         size += 'px'
 
-        this.waveStyles = {
+        return {
           ...position,
           width: size,
           height: size
         }
       },
-      clearWave () {
-        this.waveStyles = null
-        this.animating = false
-
-        return this.$nextTick()
-      },
+      clearWave: debounce(function () {
+        this.ripples = []
+      }, 2000),
       getSize () {
         const { offsetWidth, offsetHeight } = this.$el
 
@@ -161,11 +159,11 @@
     transform: scale(2) translateZ(0);
 
     &.md-centered {
+      animation-duration: 1.2s;
       top: 50%;
       left: 50%;
     }
-
-    ~ * {
+    ~ *:not(.md-ripple-wave) {
       position: relative;
       z-index: 2;
     }
@@ -175,7 +173,6 @@
     transition: .8s $md-transition-stand-timing;
     transition-property: opacity, transform;
     will-change: opacity, transform;
-
     &.md-centered {
       transition-duration: 1.2s;
     }
diff --git a/src/core/utils/MdDebounce.js b/src/core/utils/MdDebounce.js
new file mode 100644
index 000000000..594c4c73e
--- /dev/null
+++ b/src/core/utils/MdDebounce.js
@@ -0,0 +1,8 @@
+export default (fn, time) => {
+  let timeout
+  return function() {
+    const functionCall = () => fn.apply(this, arguments)
+    clearTimeout(timeout)
+    timeout = setTimeout(functionCall, time)
+  }
+}

From 74aee2349f75dc5fd9262a002b3f5bff18330b1d Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Wed, 24 Jan 2018 20:00:32 +0100
Subject: [PATCH 60/72] feat(MdDatepicker): add dateformat (#1436)

---
 src/components/MdDatepicker/MdDatepicker.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index 31c068c3d..13df91381 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -96,9 +96,10 @@
       dateToHTMLString (date) {
         if (date) {
           let formattedDate = null
+          const dateFormat = this.$material.locale.dateFormat || 'YYYY-MM-DD'
 
           try {
-            formattedDate = format(date, 'YYYY-MM-DD')
+            formattedDate = format(date, dateFormat)
           } catch (error) {
             Vue.util.warn(`The datepicker value is not a valid date. Given value: ${date}.`, this)
           }

From e4af731755bc9f198cf467187db6deffbccba5f5 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Wed, 24 Jan 2018 20:01:15 +0100
Subject: [PATCH 61/72] feat(MdDatepicker): emit date without confirming
 (#1426)

* feat(MdDatepicker): emite date without confirming

* feat(MdDatepicker): allow reset of value after clicking cancel

* Revert "feat(MdDatepicker): allow reset of value after clicking cancel"

This reverts commit 561c15aaff38c6dca64dd738243efe091e250283.

* feat(MdDatepicker): allow field to be clearable
---
 src/components/MdDatepicker/MdDatepicker.vue       | 2 +-
 src/components/MdDatepicker/MdDatepickerDialog.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index 13df91381..25978c6df 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-field :class="['md-datepicker', { 'md-native': !this.mdOverrideNative }]">
+  <md-field :class="['md-datepicker', { 'md-native': !this.mdOverrideNative }]" md-clearable>
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
     <md-input :type="type" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
 
diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
index 230f04adb..3a308048c 100644
--- a/src/components/MdDatepicker/MdDatepickerDialog.vue
+++ b/src/components/MdDatepicker/MdDatepickerDialog.vue
@@ -314,6 +314,7 @@
       selectDate (day) {
         this.currentDate = setDate(this.currentDate, day)
         this.selectedDate = this.currentDate
+        this.$emit('update:mdDate', this.selectedDate)
       },
       closeDialog () {
         this.$emit('md-closed')

From 0f7e28f4a9cff167d601aaa329342aaaf508abd3 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Thu, 25 Jan 2018 03:02:25 +0800
Subject: [PATCH 62/72] feat(MdListItemExpand): reactive expansion (#1435)

new props `md-expanded` with sync to make expansion reactive

fix #1425
---
 .../List/examples/ListExpansion.vue           | 11 +++-
 .../MdList/MdListItem/MdListItem.vue          |  3 +-
 .../MdList/MdListItem/MdListItemExpand.vue    | 58 ++++++++++++++++---
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/docs/app/pages/Components/List/examples/ListExpansion.vue b/docs/app/pages/Components/List/examples/ListExpansion.vue
index d4f32f836..1d2058738 100644
--- a/docs/app/pages/Components/List/examples/ListExpansion.vue
+++ b/docs/app/pages/Components/List/examples/ListExpansion.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="full-control">
     <md-list>
-      <md-list-item md-expand>
+      <md-list-item md-expand :md-expanded.sync="expandNews">
         <md-icon>whatshot</md-icon>
         <span class="md-list-item-text">News</span>
 
@@ -40,12 +40,19 @@
         <span class="md-list-item-text">Shop</span>
       </md-list-item>
     </md-list>
+    <md-checkbox v-model="expandNews">Expand News</md-checkbox>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'ListExpansion'
+    name: 'ListExpansion',
+
+    data () {
+      return {
+        expandNews: false
+      }
+    }
   }
 </script>
 
diff --git a/src/components/MdList/MdListItem/MdListItem.vue b/src/components/MdList/MdListItem/MdListItem.vue
index 917b7ed98..b7603ea13 100644
--- a/src/components/MdList/MdListItem/MdListItem.vue
+++ b/src/components/MdList/MdListItem/MdListItem.vue
@@ -65,7 +65,8 @@
         createElement(listComponent, {
           props,
           scopedSlots: resolveScopedSlot(props, children),
-          staticClass: 'md-list-item-container md-button-clean'
+          staticClass: 'md-list-item-container md-button-clean',
+          on: listeners,
         }, children.default)
       ])
     }
diff --git a/src/components/MdList/MdListItem/MdListItemExpand.vue b/src/components/MdList/MdListItem/MdListItemExpand.vue
index 7e7c873be..c70761e36 100644
--- a/src/components/MdList/MdListItem/MdListItemExpand.vue
+++ b/src/components/MdList/MdListItem/MdListItemExpand.vue
@@ -27,6 +27,9 @@
       expandStyles: {},
       showContent: false
     }),
+    props: {
+      mdExpanded: Boolean
+    },
     computed: {
       expandClasses () {
         return {
@@ -45,17 +48,56 @@
 
         return size
       },
-      toggleExpand () {
-        raf(() => {
-          let fullHeight = 0
+      fetchStyle () {
+        return new Promise(resolve => {
+          raf(() => {
+            let fullHeight = 0
 
-          if (!this.showContent) {
-            fullHeight = 'auto' // this.getChildrenSize() + 'px'
-          }
+            if (!this.showContent) {
+              fullHeight = 'auto' // this.getChildrenSize() + 'px'
+            }
 
-          this.expandStyles = { height: fullHeight }
-          this.showContent = !this.showContent
+            this.expandStyles = { height: fullHeight }
+            resolve()
+          })
         })
+      },
+      async toggleExpand () {
+        await this.fetchStyle()
+        this.showContent = !this.showContent
+      },
+      async open () {
+        if (this.showContent) {
+          return false
+        }
+
+        await this.fetchStyle()
+        this.showContent = true
+      },
+      async close () {
+        if (!this.showContent) {
+          return false
+        }
+
+        await this.fetchStyle()
+        this.showContent = false
+      }
+    },
+    watch: {
+      mdExpanded () {
+        if (this.mdExpanded) {
+          this.open()
+        } else {
+          this.close()
+        }
+      },
+      showContent () {
+        this.$emit('update:mdExpanded', this.showContent)
+      }
+    },
+    mounted () {
+      if (this.mdExpanded) {
+        this.open()
       }
     }
   }

From 9e6aa8a0ba3c84c4bac00648cc1c640947706e8b Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Wed, 24 Jan 2018 20:02:49 +0100
Subject: [PATCH 63/72] fix(MdRipple): clear ripples if called programatically
 (#1431)

---
 src/components/MdRipple/MdRipple.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MdRipple/MdRipple.vue b/src/components/MdRipple/MdRipple.vue
index d26a6d5c0..1c5bf0531 100644
--- a/src/components/MdRipple/MdRipple.vue
+++ b/src/components/MdRipple/MdRipple.vue
@@ -60,6 +60,7 @@
           this.startRipple(active)
           this.$emit('update:mdActive', false)
         }
+        this.clearWave()
       }
     },
     methods: {

From 1f387c5860e18207fab7a274b7a8829c9666a990 Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 26 Jan 2018 22:34:00 +0100
Subject: [PATCH 64/72] docs(MdTabs): add missing md-icon prop (#1439)

---
 docs/app/pages/Components/Tabs/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/pages/Components/Tabs/Tabs.vue b/docs/app/pages/Components/Tabs/Tabs.vue
index 4777586e3..b08a12b17 100644
--- a/docs/app/pages/Components/Tabs/Tabs.vue
+++ b/docs/app/pages/Components/Tabs/Tabs.vue
@@ -183,7 +183,7 @@
             defaults: 'null'
           },
           {
-            name: 'md-label',
+            name: 'md-icon',
             type: 'String',
             description: 'The tab icon. Accepts an string or a asset URL. The tab will know how to handle the icon based on this.',
             defaults: 'null'

From 4722dadc580ad00f499b846db404707274ddab9a Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 26 Jan 2018 22:34:42 +0100
Subject: [PATCH 65/72] fix(MdProgressSpinner): undefined navigator on SSR
 (#1441)

---
 .../MdProgress/MdProgressSpinner/MdProgressSpinner.vue       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MdProgress/MdProgressSpinner/MdProgressSpinner.vue b/src/components/MdProgress/MdProgressSpinner/MdProgressSpinner.vue
index 0b3311525..c04be10dc 100644
--- a/src/components/MdProgress/MdProgressSpinner/MdProgressSpinner.vue
+++ b/src/components/MdProgress/MdProgressSpinner/MdProgressSpinner.vue
@@ -55,7 +55,10 @@
         return this.mdMode === 'indeterminate'
       },
       isIE () {
-        return navigator.userAgent.toLowerCase().includes('trident')
+        if (!this.$isServer) {
+          return navigator.userAgent.toLowerCase().includes('trident')
+        }
+        return false
       },
       progressClasses () {
         let animationClass = 'md-progress-spinner-indeterminate'

From c5fc2f5e190ab4f72362a3efc482ba6565756cc8 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 27 Jan 2018 05:35:38 +0800
Subject: [PATCH 66/72] fix(MdTabs): correct indicator position while alignment
 changed (#1442)

`setIndicatorStyles` on `transitionend` for correct position while alignment changed

fix #1432
---
 src/components/MdTabs/MdTabs.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/MdTabs/MdTabs.vue b/src/components/MdTabs/MdTabs.vue
index ece6c5bf6..8cb3e99e7 100644
--- a/src/components/MdTabs/MdTabs.vue
+++ b/src/components/MdTabs/MdTabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="md-tabs" :class="[tabsClasses, $mdActiveTheme]">
-    <div class="md-tabs-navigation" :class="navigationClasses">
+    <div class="md-tabs-navigation" :class="navigationClasses" ref="navigation">
       <md-button
         v-for="({ label, props, icon, disabled, data, events }, index) in MdTabs.items"
         :key="index"
@@ -75,7 +75,8 @@
       hasContent: false,
       MdTabs: {
         items: {}
-      }
+      },
+      alignmentChanging: false
     }),
     provide () {
       return {
@@ -112,8 +113,24 @@
         this.$emit('md-changed', tab)
       },
       async mdAlignment () {
+        if (this.alignmentChanging) {
+          return false
+        }
+
+        this.alignmentChanging = true
         await this.$nextTick()
-        this.setIndicatorStyles()
+
+        let cb = event => {
+          if (event.propertyName !== 'min-width') {
+            return false
+          }
+
+          this.$refs.navigation.removeEventListener('transitionend', cb)
+          this.setIndicatorStyles()
+          this.alignmentChanging = false
+        }
+
+        this.$refs.navigation.addEventListener('transitionend', cb)
       }
     },
     methods: {

From 8ade40fb093984ed2be169be986315c3d6bdb63c Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Fri, 26 Jan 2018 22:35:58 +0100
Subject: [PATCH 67/72] fix(MdTooltip): overlaying in dialog (#1446)

---
 src/components/MdTooltip/MdTooltip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdTooltip/MdTooltip.vue b/src/components/MdTooltip/MdTooltip.vue
index cc0da0617..fb5a73dc2 100644
--- a/src/components/MdTooltip/MdTooltip.vue
+++ b/src/components/MdTooltip/MdTooltip.vue
@@ -97,7 +97,7 @@
     height: $md-tooltip-height;
     padding: 0 8px;
     position: fixed;
-    z-index: 60;
+    z-index: 111;
     pointer-events: none;
     border-radius: 2px;
     transition: .15s $md-transition-enter-timing;

From 01dfdfb2cf23adba1b48589ce61a164b601bd46c Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 27 Jan 2018 05:37:08 +0800
Subject: [PATCH 68/72] fix(MdSelect): Reactive options (#1447)

Make options reactive via a hidden node.

fix #1262
---
 src/components/MdField/MdSelect/MdSelect.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index da433898e..126fc75c7 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -33,10 +33,14 @@
         :md-content-class="mdClass"
         :style="menuStyles"
         @enter="onMenuEnter">
-        <slot />
+        <slot v-if="showSelect" />
       </md-menu-content>
     </keep-alive>
 
+    <div v-if="!showSelect" v-show="false">
+      <slot />
+    </div>
+
     <input class="md-input-fake" v-model="model" :disabled="disabled" readonly tabindex="-1" />
     <select readonly v-model="model" v-bind="attributes" tabindex="-1"></select>
   </md-menu>

From b33d0d6a8c59f4c8d310276284d34fa36746d10f Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Sat, 27 Jan 2018 05:39:03 +0800
Subject: [PATCH 69/72] fix(MdTabs): fix indicator (#1448)

right: `calc(100% - ${buttonWidth + buttonLeft}px)` work weird with safari, replace it with `width`
way to set indicator position

fix #1304
---
 src/components/MdTabs/MdTabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdTabs/MdTabs.vue b/src/components/MdTabs/MdTabs.vue
index 8cb3e99e7..859b7102c 100644
--- a/src/components/MdTabs/MdTabs.vue
+++ b/src/components/MdTabs/MdTabs.vue
@@ -208,7 +208,7 @@
 
             this.indicatorStyles = {
               left: `${buttonLeft}px`,
-              right: `calc(100% - ${buttonWidth + buttonLeft}px)`
+              width: `${buttonWidth}px`
             }
           }
         })

From 311374938e616881fb32f4be05e0230498bedd3c Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 30 Jan 2018 00:27:59 +0800
Subject: [PATCH 70/72] chore: new component script (#1455)

* fix: fix new component script

prefix name for new doc component

* fix: new doc directory case
---
 build/new-component.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/build/new-component.js b/build/new-component.js
index 12ef61104..0a18972a5 100644
--- a/build/new-component.js
+++ b/build/new-component.js
@@ -80,6 +80,7 @@ export default Vue => {
 
 function getDocsFile (name) {
   const singleName = name.replace('Md', '')
+  const docName = name.replace('Md', 'Doc')
 
   return `<example src="./examples/Example.vue" />
 
@@ -105,7 +106,7 @@ function getDocsFile (name) {
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: '${singleName}',
+    name: '${docName}',
     mixins: [examples]
   }
 </script>
@@ -155,7 +156,7 @@ const rootDir = join(__dirname, '..')
 const componentsPath = 'src/components/' + name
 const componentIndex = 'src/components/index.js'
 const themePath = 'src/theme/all.scss'
-const docsPath = 'docs/app/pages/components/' + singleName
+const docsPath = 'docs/app/pages/Components/' + singleName
 const docsRoutePath = 'docs/app/routes.js'
 const navPath = 'docs/app/template/MainNavContent.vue'
 

From b1018fb5575dd92ced0a658ec97473863d5cf965 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Tue, 30 Jan 2018 00:29:07 +0800
Subject: [PATCH 71/72] fix(MdTooltip): `mdActive` never updated to true using
 `.sync` modifier

`mdActive` was never updated to true via `.sync` before
---
 src/components/MdTooltip/MdTooltip.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MdTooltip/MdTooltip.vue b/src/components/MdTooltip/MdTooltip.vue
index fb5a73dc2..8dbc21cc6 100644
--- a/src/components/MdTooltip/MdTooltip.vue
+++ b/src/components/MdTooltip/MdTooltip.vue
@@ -55,6 +55,9 @@
     watch: {
       mdActive () {
         this.shouldRender = this.mdActive
+      },
+      shouldRender (shouldRender) {
+        this.$emit('update:mdActive', shouldRender)
       }
     },
     methods: {
@@ -62,7 +65,6 @@
         this.shouldRender = true
       },
       hide () {
-        this.$emit('update:mdActive', false)
         this.shouldRender = false
       }
     },

From daf58dadf828813a44ef9b596dc37b5bd90b0d5e Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Mon, 29 Jan 2018 17:30:50 +0100
Subject: [PATCH 72/72] docs: add ie polyfills (#1342)

* docs: add ie polyfills

* refactor: remove package lock
---
 build/docs/webpack.js  | 1 +
 build/local/webpack.js | 1 +
 package.json           | 1 +
 3 files changed, 3 insertions(+)

diff --git a/build/docs/webpack.js b/build/docs/webpack.js
index bd3a20741..33f530ace 100644
--- a/build/docs/webpack.js
+++ b/build/docs/webpack.js
@@ -29,6 +29,7 @@ const componentExampleLoader = require.resolve('../loaders/component-example-loa
 const webpackConfig = {
   entry: {
     app: [
+      'babel-polyfill',
       './docs/app/index.js',
       './build/docs/offline.js'
     ]
diff --git a/build/local/webpack.js b/build/local/webpack.js
index 9cdc171f3..87cfb4b9f 100644
--- a/build/local/webpack.js
+++ b/build/local/webpack.js
@@ -12,6 +12,7 @@ export default {
   devtool: 'cheap-module-eval-source-map',
   entry: {
     docs: [
+      'babel-polyfill',
       './docs/app/index.js',
       './build/local/client'
     ]
diff --git a/package.json b/package.json
index 0a14deb69..4795ab4fe 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",