From 60ee206a98ade0dfeebaa7bde16bc1f8fb7e769f Mon Sep 17 00:00:00 2001
From: Jiajun Chen <tychenjiajun@live.cn>
Date: Fri, 30 Aug 2019 16:07:30 +0800
Subject: [PATCH] feat(elevation): add custom directive `v-elevation` (#416)

* feat(elevation): add custom directive `v-elevation`

todo: docs

* docs(elevation): add docs about `v-elevation`

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

diff --git a/components/elevation/README.md b/components/elevation/README.md
index 63477d41b..56e732cf1 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
+<m-button raised :v-elevation="1">Button</my-button>
+```
+
+### Add transition between different elevations
+
+```html
+<m-button raised v-elevation.transition="elevation">Button</my-button>
+```
+
+```js
+data () {
+  return {
+    elevation: 1 // change this value to see the transition
+  }
+}
+```
+
+Or you can use a component.
+
 ### Markup
 
 ```html
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/>