feat(chips): Synchronise with mdc-web v0.30.0 (add chip component)

Author: matsp

components/Chips/Chip.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="mdc-chip">
+    <div class="mdc-chip__text">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { MDCChip } from '@material/chips'
+
+export default {
+  data () {
+    return {
+      mdcChip: null
+    }
+  },
+  mounted () {
+    this.mdcChip = MDCChip.attachTo(this.$el)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@material/chips/mdc-chips";
+</style>

components/Chips/ChipSet.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="mdc-chip-set" />
+</template>
+
+<script>
+import { MDCChipSet } from '@material/chips'
+
+export default {
+  data () {
+    return {
+      mdcChipSet: null
+    }
+  },
+  mounted () {
+    this.mdcChipSet = MDCChipSet.attachTo(this.$el)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@material/chips/mdc-chips";
+</style>

components/Chips/README.md

@@ -0,0 +1,21 @@
+## ChipSet
+
+### Markup
+
+```html
+<m-chip-set>
+  <m-chip>Chip content</m-chip>
+</m-chip-set>
+```
+
+## Chip
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | chip content |
+
+### Reference
+
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips

components/Chips/index.js

@@ -0,0 +1,9 @@
+import Chip from './Chip.vue'
+import ChipSet from './ChipSet.vue'
+
+export default {
+  install (vm) {
+    vm.component('m-chip', Chip)
+    vm.component('m-chip-set', ChipSet)
+  }
+}

components/index.js

@@ -1,6 +1,7 @@
 import Button from './Button'
 import Card from './Card'
 import Checkbox from './Checkbox'
+import Chips from './Chips'
 import Dialog from './Dialog'
 import Elevation from './Elevation'
 import Fab from './Fab'
@@ -31,6 +32,7 @@ const plugin = {
     vue.use(Button)
     vue.use(Card)
     vue.use(Checkbox)
+    vue.use(Chips)
     vue.use(Dialog)
     vue.use(Elevation)
     vue.use(Fab)

components/material-components-vue.scss

@@ -1,6 +1,8 @@
+@import "@material/line-ripple/mdc-line-ripple";
 @import "@material/button/mdc-button";
 @import "@material/card/mdc-card";
 @import "@material/checkbox/mdc-checkbox";
+@import "@material/chips/mdc-chips";
 @import "@material/dialog/mdc-dialog";
 @import "@material/drawer/mdc-drawer";
 @import "@material/elevation/mdc-elevation";