feat(line-ripple): Synchronise with mdc-web v0.30.0 (add line-ripple …

…component)

components/LineRipple/LineRipple.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="mdc-line-ripple"
+    :class="classes"/>
+</template>
+
+<script>
+import { MDCLineRipple } from '@material/line-ripple'
+
+export default {
+  data () {
+    return {
+      mdcLineRipple: null
+    }
+  },
+  mounted () {
+    this.mdcLineRipple = MDCLineRipple.attachTo(this.$el)
+  },
+  methods: {
+    activate () {
+      this.mdcLineRipple.activate()
+    },
+    deactivate () {
+      this.mdcLineRipple.deactivate()
+    },
+    setRippleCenter (xCoordinate) {
+      this.mdcLineRipple.setRippleCenter(xCoordinate)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@material/line-ripple/mdc-line-ripple";
+</style>

components/LineRipple/README.md

@@ -0,0 +1,26 @@
+## LineRipple
+
+### Markup
+
+```html
+<m-line-ripple ref="rp"/>
+```
+
+### Script
+
+```javascript
+this.$refs.rp.activate()
+```
+
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| activate() | activate the line ripple |
+| deactivate() | deactivate the line ripple |
+| setRippleCenter(xCoordinate) | set ripple center by x-coordinate |
+
+
+### Reference
+
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-line-ripple

components/LineRipple/index.js

@@ -0,0 +1,7 @@
+import LineRipple from './LineRipple.vue'
+
+export default {
+  install (vm) {
+    vm.component('m-line-ripple', LineRipple)
+  }
+}

components/index.js

@@ -10,6 +10,7 @@ import Icon from './Icon'
 import IconToggle from './IconToggle'
 import LayoutGrid from './LayoutGrid'
 import LinearProgress from './LinearProgress'
+import LineRipple from './LineRipple'
 import List from './List'
 import Menu from './Menu'
 import Radio from './Radio'
@@ -39,6 +40,7 @@ const plugin = {
     vue.use(IconToggle)
     vue.use(LayoutGrid)
     vue.use(LinearProgress)
+    vue.use(LineRipple)
     vue.use(List)
     vue.use(Menu)
     vue.use(Radio)