From 821187c8e9c5e7de5d5e077bd4091fe84a6b8729 Mon Sep 17 00:00:00 2001
From: jjchen1 <tychenjiajun@live.cn>
Date: Tue, 27 Aug 2019 17:37:57 +0800
Subject: [PATCH 1/3] feat(elevation): add custom directive `v-elevation`

todo: docs
---
 components/elevation/index.js               | 38 +++++++++++++++
 docs/.vuepress/components/ElevationDemo.vue | 53 +++++++++++++++++++++
 docs/.vuepress/enhanceApp.js                |  2 +
 docs/components/README.md                   |  4 ++
 4 files changed, 97 insertions(+)
 create mode 100644 docs/.vuepress/components/ElevationDemo.vue

diff --git a/components/elevation/index.js b/components/elevation/index.js
index f5868b5df..a39fce901 100644
--- a/components/elevation/index.js
+++ b/components/elevation/index.js
@@ -6,6 +6,44 @@ import { initPlugin } from '../'
 const plugin = {
   install (vm) {
     vm.component('m-elevation', Elevation)
+    vm.directive('elevation', {
+      bind: function (el, binding) {
+        if (binding.value != null) {
+          const n = Number(binding.value)
+          el.classList.add(`mdc-elevation--z${n}`)
+        }
+        if (binding.modifiers.transition) {
+          el.classList.add('mdc-elevation-transition')
+        }
+      },
+      componentUpdated: function (el, binding) {
+        if (Number(binding.oldValue) !== Number(binding.value)) {
+          if (binding.oldValue != null) {
+            const n = Number(binding.oldValue)
+            el.classList.remove(`mdc-elevation--z${n}`)
+          }
+          if (binding.value != null) {
+            const n = Number(binding.value)
+            el.classList.add(`mdc-elevation--z${n}`)
+          }
+        }
+        if (!binding.modifiers.transition && el.classList.contains('mdc-elevation-transition')) {
+          el.classList.remove('mdc-elevation-transition')
+        }
+        if (binding.modifiers.transition && !el.classList.contains('mdc-elevation-transition')) {
+          el.classList.add('mdc-elevation-transition')
+        }
+      },
+      unbind: function (el, binding) {
+        if (binding.value != null) {
+          const n = Number(binding.value)
+          el.classList.remove(`mdc-elevation--z${n}`)
+        }
+        if (binding.modifiers.transition) {
+          el.classList.remove('mdc-elevation-transition')
+        }
+      }
+    })
   }
 }
 export default plugin
diff --git a/docs/.vuepress/components/ElevationDemo.vue b/docs/.vuepress/components/ElevationDemo.vue
new file mode 100644
index 000000000..c63136d30
--- /dev/null
+++ b/docs/.vuepress/components/ElevationDemo.vue
@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <ComponentSection>
+            <div class="elevation-demo-surface" v-elevation.transition="elevation" v-if="checkboxProps[0].value"></div>
+            <div class="elevation-demo-surface" v-elevation="elevation" v-else></div>
+        </ComponentSection>
+        <ComponentProps
+                :radioProps="radioProps"
+                :checkboxProps="checkboxProps"/>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElevationDemo',
+    data () {
+      return {
+        radioProps: [],
+        checkboxProps: [
+          { prop: 'transition', value: true },
+          { prop: 1, value: false },
+          { prop: 2, value: false },
+          { prop: 4, value: false },
+          { prop: 8, value: false },
+          { prop: 16, value: false },
+        ]
+      }
+    },
+    computed: {
+      elevation () {
+        let res = 0
+        for (let i = 1; i < this.checkboxProps.length; i++) {
+          res += this.checkboxProps[i].prop * this.checkboxProps[i].value
+        }
+        return res > 24 ? 24 : res
+      }
+    }
+  }
+</script>
+
+<style scoped>
+    .elevation-demo-surface {
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        justify-content: space-around;
+        min-height: 100px;
+        min-width: 200px;
+        margin: 15px;
+        -ms-flex-align: center;
+        align-items: center;
+        background-color: white;
+    }
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index 2133a7b1f..ed0bd6503 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -28,6 +28,7 @@ import LinearProgress from '../../components/linear-progress'
 import Snackbar from '../../components/snackbar'
 import Tabs from '../../components/tabs'
 import Ripple from '../../components/ripple'
+import Elevation from '../../components/elevation'
 
 export default ({
   Vue, // the version of Vue being used in the VuePress app
@@ -63,4 +64,5 @@ export default ({
   Vue.use(Snackbar)
   Vue.use(Tabs)
   Vue.use(Ripple)
+  Vue.use(Elevation)
 }
diff --git a/docs/components/README.md b/docs/components/README.md
index a529030b4..cc05c0ae9 100644
--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -44,6 +44,10 @@ The demonstration in this page is a work in progress..
 
 <ChipsInputDemo/>
 
+## Elevation
+
+<ElevationDemo/>
+
 ## Fab
 
 <FabDemo/>

From bafee08bfdc0d38871db29e1402339b65cacdc2d Mon Sep 17 00:00:00 2001
From: jjchen1 <tychenjiajun@live.cn>
Date: Thu, 29 Aug 2019 17:21:29 +0800
Subject: [PATCH 2/3] docs(elevation): add docs about `v-elevation`

---
 components/elevation/README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/elevation/README.md b/components/elevation/README.md
index 63477d41b..bec07d895 100644
--- a/components/elevation/README.md
+++ b/components/elevation/README.md
@@ -1,5 +1,29 @@
 ## Elevation
 
+Material Components Vue provides a customized directive `v-elevation` to provide any components with elevation or shadow.
+
+### Minimal Usage
+
+```html
+<my-button :v-elevation="1">Button</my-button>
+```
+
+### Add transition between different elevations
+
+```html
+<my-button v-elevation.transition="elevation">Button</my-button>
+```
+
+```js
+data () {
+  return {
+    elevation: 1 // change this value to see the transition
+  }
+}
+```
+
+Content below is deprecated, which means they may be removed in the future versions.
+
 ### Markup
 
 ```html

From e6f97d41cdd845b6c5319cd6f674fadce619d12e Mon Sep 17 00:00:00 2001
From: Jiajun Chen <tychenjiajun@live.cn>
Date: Fri, 30 Aug 2019 16:02:01 +0800
Subject: [PATCH 3/3] docs(elevation): update docs

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

diff --git a/components/elevation/README.md b/components/elevation/README.md
index bec07d895..56e732cf1 100644
--- a/components/elevation/README.md
+++ b/components/elevation/README.md
@@ -5,13 +5,13 @@ Material Components Vue provides a customized directive `v-elevation` to provide
 ### Minimal Usage
 
 ```html
-<my-button :v-elevation="1">Button</my-button>
+<m-button raised :v-elevation="1">Button</my-button>
 ```
 
 ### Add transition between different elevations
 
 ```html
-<my-button v-elevation.transition="elevation">Button</my-button>
+<m-button raised v-elevation.transition="elevation">Button</my-button>
 ```
 
 ```js
@@ -22,7 +22,7 @@ data () {
 }
 ```
 
-Content below is deprecated, which means they may be removed in the future versions.
+Or you can use a component.
 
 ### Markup