feat: update v-ripple directive (#364)

bind `mdcRipple` to the el which makes it available for user to activate or deactivate using binding value on native html element

components/ripple/README.md

@@ -49,8 +49,6 @@ Material Components Vue provides a customized directive `v-ripple` to provide an
 
 ### 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>

components/ripple/index.js

@@ -18,17 +18,28 @@ const plugin = {
   install (vm) {
     vm.component('m-ripple', Ripple)
     vm.directive('ripple', {
-      bind: function (el, binding, vnode) {
+      bind: function (el, binding) {
         const mdcRipple = setup(el, binding)
-        if (vnode.componentInstance && !binding.modifiers['css-only']) vnode.componentInstance.mdcRipple = mdcRipple
+        if (!binding.modifiers['css-only']) {
+          Object.defineProperty(el, 'mdcRipple', {
+            configurable: true,
+            enumerable: false,
+            value: mdcRipple,
+            writable: false
+          })
+        }
       },
-      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()
+      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, binding, vnode) {
-        if (vnode.componentInstance && vnode.componentInstance.mdcRipple) vnode.componentInstance.mdcRipple.destroy()
+      unbind: function (el) {
+        if (el.mdcRipple) {
+          el.mdcRipple.destroy()
+        }
       }
     })
   }

docs/.vuepress/components/RippleDemo.vue

@@ -2,7 +2,8 @@
     <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"/>
+            <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-ripple.primary.css-only v-if="checkboxProps[2].value"/>
         </ComponentSection>
         <ComponentProps
                 :checkboxProps="checkboxProps"
@@ -23,7 +24,8 @@
         ],
         checkboxProps: [
           { prop: 'primary', value: false },
-          { prop: 'accent', value: true }
+          { prop: 'accent', value: true },
+          { prop: 'css-only', value: false}
         ]
       }
     }