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

@@ -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

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

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>

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)
 }

docs/components/README.md

@@ -44,6 +44,10 @@ The demonstration in this page is a work in progress..
 
 <ChipsInputDemo/>
 
+## Elevation
+
+<ElevationDemo/>
+
 ## Fab
 
 <FabDemo/>