feat(chips): Synchronise with mdc-web (#96)

Author: matsp

components/chips/Chip.vue

@@ -1,8 +1,10 @@
 <template>
   <div
     class="mdc-chip"
+    :class="classes"
     tabindex="0"
-    @MDCChip:interaction="onInteraction()">
+    @MDCChip:interaction="$emit('change', !selected)"
+    @MDCChip:removal="$emit('remove') && $emit('change', false)">
     <slot
       name="leadingIcon"
       v-if="$slots['leadingIcon']"/>
@@ -34,7 +36,7 @@ import themeClassMixin from '../base/themeClassMixin.js'
 export default {
   mixins: [themeClassMixin],
   model: {
-    props: 'selected',
+    prop: 'selected',
     event: 'change'
   },
   props: {
@@ -45,23 +47,20 @@ export default {
   },
   data () {
     return {
-      mdcChip: undefined,
       slotObserver: undefined
     }
   },
   computed: {
-    model: {
-      get () {
-        return this.selected
-      },
-      set (value) {
-        this.$emit('change', value)
+    classes () {
+      return {
+        'mdc-chip--selected': this.selected,
+        'mdc-chip__icon--leading-hidden': this.selected
       }
     }
   },
   mounted () {
     this.updateSlots()
-    this.slotObserver = new MutationObserver( () => this.updateSlots())
+    this.slotObserver = new MutationObserver(() => this.updateSlots())
     this.slotObserver.observe(this.$el, {
       childList: true,
       subtree: true
@@ -70,18 +69,14 @@ export default {
   beforeDestroy () {
     this.slotObserver.disconnect()
   },
-  methods:  {
-    onInteraction () {
-      this.model = this.mdcChip.isSelected()
-    },
+  methods: {
     updateSlots () {
       if (this.$slots.leadingIcon) {
         this.$slots.leadingIcon.map((n) => {
           n.elm.classList.add('mdc-chip__icon')
           n.elm.classList.add('mdc-chip__icon--leading')
         })
       }
-
       if (this.$slots.trailingIcon) {
         this.$slots.trailingIcon.map((n) => {
           n.elm.classList.add('mdc-chip__icon')

components/chips/ChipSet.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="mdc-chip-set"
-    :class="classes">
+    :class="classes"
+    class="mdc-chip-set">
     <slot/>
   </div>
 </template>
@@ -21,6 +21,10 @@ export default {
     filter: {
       type: Boolean,
       default: false
+    },
+    input: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -32,12 +36,16 @@ export default {
     classes () {
       return {
         'mdc-chip-set--choice': this.choice,
-        'mdc-chip-set--filter': this.filter
+        'mdc-chip-set--filter': this.filter,
+        'mdc-chip-set--input': this.input
       }
     }
   },
   mounted () {
     this.mdcChipSet = MDCChipSet.attachTo(this.$el)
+  },
+  beforeDestroy () {
+    this.mdcChipSet.destroy()
   }
 }
 </script>

components/chips/README.md

@@ -5,7 +5,7 @@
 ```html
 <m-chip-set>
   <m-chip>Chip content</m-chip>
-  <m-chip>
+  <m-chip v-model="selected">
     <m-icon
       icon="event"
       slot="leadingIcon"/>
@@ -14,12 +14,23 @@
 </m-chip-set>
 ```
 
-### Props & methods
+### Script
+
+```javascript
+data() {
+  return {
+    selected: false
+  }
+}
+```
+
+### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | choice | Boolean | false | single selection chips in set |
 | filter | Boolean | false | multiple selection chips in set |
+| input | Boolean | false | indicates that the chips in the set are input chips |
 
 ## Chip
 

demo/views/ChipsView.vue

@@ -1,8 +1,8 @@
 <template>
   <m-layout-grid-inner>
     <m-layout-grid-cell :span="12">
-      <m-typo-title>Entry</m-typo-title>
-      <m-chip-set>
+      <m-typo-title>Input</m-typo-title>
+      <m-chip-set input>
         <m-chip>
           <m-icon
             icon="person"
@@ -27,26 +27,26 @@
       <m-typo-title>Choice</m-typo-title>
       <m-chip-set choice>
         <m-chip v-model="choiceSelected">Chip #1</m-chip>
-        <m-chip>Chip #2</m-chip>
-        <m-chip>Chip #3</m-chip>
+        <m-chip v-model="choiceSelected">Chip #2</m-chip>
+        <m-chip v-model="choiceSelected">Chip #3</m-chip>
       </m-chip-set>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="12">
       <m-typo-title>Filter</m-typo-title>
       <m-chip-set filter>
-        <m-chip>
+        <m-chip v-model="filterSelected">
           Chip #1
           <m-icon
             icon="cancel"
             slot="trailingIcon"/>
         </m-chip>
-        <m-chip>
+        <m-chip v-model="filterSelected">
           Chip #2
           <m-icon
             icon="cancel"
             slot="trailingIcon"/>
         </m-chip>
-        <m-chip>
+        <m-chip v-model="filterSelected">
           Chip #3
           <m-icon
             icon="cancel"
@@ -66,7 +66,8 @@ Vue.use(Chips)
 export default {
   data () {
     return {
-      choiceSelected: false
+      choiceSelected: false,
+      filterSelected: false
     }
   }
 }