From 0c08d9a6c2ce50e4bc3b8b5498626efff513bee1 Mon Sep 17 00:00:00 2001
From: jjchen1 <tychenjiajun@live.cn>
Date: Tue, 16 Jul 2019 14:12:11 +0800
Subject: [PATCH] feat: add directive `v-ripple`

fixes #267
---
 components/ripple/README.md                   | 70 +++++++++++++++++++
 components/ripple/index.js                    | 25 +++++++
 docs/.vuepress/components/RippleDemo.vue      | 36 ++++++++++
 docs/.vuepress/components/ripple/MyButton.vue | 13 ++++
 docs/.vuepress/enhanceApp.js                  |  2 +
 docs/components/README.md                     |  4 ++
 6 files changed, 150 insertions(+)
 create mode 100644 docs/.vuepress/components/RippleDemo.vue
 create mode 100644 docs/.vuepress/components/ripple/MyButton.vue

diff --git a/components/ripple/README.md b/components/ripple/README.md
index 72480261b..67097aa04 100644
--- a/components/ripple/README.md
+++ b/components/ripple/README.md
@@ -1,5 +1,75 @@
 ## Ripple
 
+Material Components Vue provides a customized directive `v-ripple` to provide any components with ripple effect.
+
+### Minimal Usage
+
+```html
+<my-button v-ripple>Button</my-button>
+``` 
+
+### Use primary color as ripple color
+
+```html
+<my-button v-ripple.primary>Button</my-button>
+```
+
+### Use secondary color as ripple color
+
+```html
+<my-button v-ripple.accent>Button</my-button>
+```
+
+### Customized your ripple using SASS
+
+```html
+<template>
+    <my-button class="my-surface" v-ripple.customized>Button</my-button>
+</template>
+
+<style lang="scss">
+    @import "~@material/ripple/mixins";
+
+    .my-surface {
+      @include mdc-ripple-surface;
+      @include mdc-ripple-radius-bounded;
+      @include mdc-states-base-color(black);
+      @include mdc-states-hover-opacity(.1);
+      @include mdc-states-focus-opacity(.3);
+      @include mdc-states-press-opacity(.4);
+    }
+</style>
+```
+
+### CSS-Only ripple
+
+```html
+<my-button v-ripple.primary.css-only>Button</my-button>
+```
+
+### Activate or deactivate using binding value
+
+Notice that this usage can only be applied to Vue components instead of native elements like `<div>`, `<button>`.
+
+```html
+<template>
+    <my-button v-ripple.primary="activate">Button</my-button>
+</template>
+
+<script>
+    export default {
+      mixins: [baseComponentMixin, themeClassMixin],
+      data () {
+        return {
+          activate: false // activate when changed from false to true, otherwise deactivate
+        }
+      }
+    }
+</script>
+```
+
+Content below is deprecated, which means they may be removed in the future versions.
+
 ### Markup
 
 ```html
diff --git a/components/ripple/index.js b/components/ripple/index.js
index 4feef6e40..c66f4a712 100644
--- a/components/ripple/index.js
+++ b/components/ripple/index.js
@@ -1,11 +1,36 @@
 import Ripple from './Ripple.vue'
+import { MDCRipple } from '@material/ripple'
 import './styles.scss'
 
 import { initPlugin } from '../'
 
+function setup (el, binding) {
+  const mod = binding.modifiers
+  mod.customized ? el.classList.remove('mdc-ripple-surface') : el.classList.add('mdc-ripple-surface')
+  mod.primary ? el.classList.add('mdc-ripple-surface--primary') : el.classList.remove('mdc-ripple-surface--primary')
+  if (mod.accent) {
+    el.classList.add('mdc-ripple-surface--accent')
+  }
+  return MDCRipple.attachTo(el)
+}
+
 const plugin = {
   install (vm) {
     vm.component('m-ripple', Ripple)
+    vm.directive('ripple', {
+      bind: function (el, binding, vnode) {
+        const mdcRipple = setup(el, binding)
+        if (vnode.componentInstance && !binding.modifiers['css-only']) vnode.componentInstance.mdcRipple = mdcRipple
+      },
+      componentUpdated: function (el, binding, vnode) {
+        vnode.componentInstance && typeof binding.oldValue === 'boolean' && typeof binding.value === 'boolean' && binding.oldValue !== binding.value && binding.value
+          ? vnode.componentInstance.mdcRipple.activate()
+          : vnode.componentInstance.mdcRipple.deactivate()
+      },
+      unbind: function (el, binding, vnode) {
+        if (vnode.componentInstance && vnode.componentInstance.mdcRipple) vnode.componentInstance.mdcRipple.destroy()
+      }
+    })
   }
 }
 export default plugin
diff --git a/docs/.vuepress/components/RippleDemo.vue b/docs/.vuepress/components/RippleDemo.vue
new file mode 100644
index 000000000..be32f264b
--- /dev/null
+++ b/docs/.vuepress/components/RippleDemo.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <ComponentSection flex-direction="column">
+            <my-button v-if="checkboxProps[0].value" v-ripple.primary="radioProps[0].value"/>
+            <my-button v-if="checkboxProps[1].value" v-ripple.accent="radioProps[0].value"/>
+        </ComponentSection>
+        <ComponentProps
+                :checkboxProps="checkboxProps"
+                :radioProps="radioProps"/>
+    </div>
+</template>
+
+<script>
+  import MyButton from './ripple/MyButton'
+  export default {
+    name: 'RippleDemo',
+    components: { MyButton },
+    data () {
+      return {
+        radioProps: [
+          { prop: 'activate', value: false },
+          { prop: 'deactivate', value: true }
+        ],
+        checkboxProps: [
+          { prop: 'primary', value: false },
+          { prop: 'accent', value: true }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+    @import "~@material/ripple/mixins";
+
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/components/ripple/MyButton.vue b/docs/.vuepress/components/ripple/MyButton.vue
new file mode 100644
index 000000000..1fd045afe
--- /dev/null
+++ b/docs/.vuepress/components/ripple/MyButton.vue
@@ -0,0 +1,13 @@
+<template>
+    <button style="width: 100px; height: 40px; background: deepskyblue; outline: none; border: none; color: white; border-radius: 4px;">BUTTON</button>
+</template>
+
+<script>
+  export default {
+    name: 'MyButton'
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index bd1ac6b2a..2133a7b1f 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -27,6 +27,7 @@ import Switch from '../../components/switch'
 import LinearProgress from '../../components/linear-progress'
 import Snackbar from '../../components/snackbar'
 import Tabs from '../../components/tabs'
+import Ripple from '../../components/ripple'
 
 export default ({
   Vue, // the version of Vue being used in the VuePress app
@@ -61,4 +62,5 @@ export default ({
   Vue.use(LinearProgress)
   Vue.use(Snackbar)
   Vue.use(Tabs)
+  Vue.use(Ripple)
 }
diff --git a/docs/components/README.md b/docs/components/README.md
index 7a390eb97..3716ba6e8 100644
--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -144,6 +144,10 @@ The demonstration in this page is a work in progress..
 
 <MenuSurfaceDemo/>
 
+## Ripple
+
+<RippleDemo/>
+
 ## Snackbar
 
 <SnackbarDemo/>