fix(ripple): wrong implementation (#368)

components/ripple/README.md

@@ -49,21 +49,13 @@ Material Components Vue provides a customized directive `v-ripple` to provide an
 
 ### Activate or deactivate using binding value
 
-```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>
+```html
+<button ref="ripple">Button</button> <!--ref name can be any string-->
+```
+```js
+this.$refs.ripple.mdcRipple.activated() // activated
+this.$refs.ripple.mdcRipple.deactivated()  // deactivated
 ```
 
 Content below is deprecated, which means they may be removed in the future versions.

components/ripple/index.js

@@ -4,23 +4,21 @@ import './styles.scss'
 
 import { initPlugin } from '../'
 
-function setup (el, binding) {
+function setupClasses (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)
+  mod.accent ? el.classList.add('mdc-ripple-surface--accent') : el.classList.remove('mdc-ripple-surface--accent')
 }
 
 const plugin = {
   install (vm) {
     vm.component('m-ripple', Ripple)
     vm.directive('ripple', {
       bind: function (el, binding) {
-        const mdcRipple = setup(el, binding)
+        setupClasses(el, binding)
         if (!binding.modifiers['css-only']) {
+          const mdcRipple = MDCRipple.attachTo(el)
           Object.defineProperty(el, 'mdcRipple', {
             configurable: true,
             enumerable: false,
@@ -29,13 +27,6 @@ const plugin = {
           })
         }
       },
-      componentUpdated: function (el, binding) {
-        if (typeof binding.oldValue === 'boolean' && typeof binding.value === 'boolean' && binding.oldValue !== binding.value && binding.value) {
-          if (el.mdcRipple) el.mdcRipple.activate()
-        } else {
-          if (el.mdcRipple) el.mdcRipple.deactivate()
-        }
-      },
       unbind: function (el) {
         if (el.mdcRipple) {
           el.mdcRipple.destroy()

docs/.vuepress/components/RippleDemo.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <ComponentSection flex-direction="column">
-            <my-button v-if="checkboxProps[0].value" v-ripple.primary="radioProps[0].value"/>
-            <button style="width: 100px; height: 40px; background: deepskyblue; outline: none; border: none; color: white; border-radius: 4px;" v-if="checkboxProps[1].value" v-ripple.accent="radioProps[0].value">BUTTON</button>
+            <my-button v-if="checkboxProps[0].value" v-ripple.primary/>
+            <button style="width: 100px; height: 40px; background: deepskyblue; outline: none; border: none; color: white; border-radius: 4px;" v-if="checkboxProps[1].value" v-ripple.accent>BUTTON</button>
             <my-button v-ripple.primary.css-only v-if="checkboxProps[2].value"/>
         </ComponentSection>
         <ComponentProps
@@ -18,10 +18,7 @@
     components: { MyButton },
     data () {
       return {
-        radioProps: [
-          { prop: 'activate', value: false },
-          { prop: 'deactivate', value: true }
-        ],
+        radioProps: [],
         checkboxProps: [
           { prop: 'primary', value: false },
           { prop: 'accent', value: true },