Merge branch 'refactor/chips'

components/chips/Chip.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     class="mdc-chip"
-    tabindex="0">
+    tabindex="0"
+    @MDCChip:interaction="onInteraction()">
     <slot
       name="leadingIcon"
       v-if="$slots['leadingIcon']"/>
@@ -32,21 +33,47 @@ import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
   mixins: [themeClassMixin],
+  model: {
+    props: 'selected',
+    event: 'change'
+  },
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
-      mdcChip: null,
-      slotOberserver: null
+      mdcChip: undefined,
+      slotObserver: undefined
+    }
+  },
+  computed: {
+    model: {
+      get () {
+        return this.selected
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
     }
   },
   mounted () {
     this.updateSlots()
-    this.slotOberserver = new MutationObserver( () => this.updateSlots())
-    this.slotOberserver.observe(this.$el, {
+    this.slotObserver = new MutationObserver( () => this.updateSlots())
+    this.slotObserver.observe(this.$el, {
       childList: true,
       subtree: true
     })
   },
+  beforeDestroy () {
+    this.slotObserver.disconnect()
+  },
   methods:  {
+    onInteraction () {
+      this.model = this.mdcChip.isSelected()
+    },
     updateSlots () {
       if (this.$slots.leadingIcon) {
         this.$slots.leadingIcon.map((n) => {

components/chips/ChipSet.vue

@@ -25,7 +25,7 @@ export default {
   },
   data () {
     return {
-      mdcChipSet: null
+      mdcChipSet: undefined
     }
   },
   computed: {
@@ -38,11 +38,6 @@ export default {
   },
   mounted () {
     this.mdcChipSet = MDCChipSet.attachTo(this.$el)
-  },
-  methods: {
-    getSelectedChips () {
-      return this.mdcChipSet.foundation_.selectedChips_
-    }
   }
 }
 </script>

components/chips/README.md

@@ -21,10 +21,6 @@
 | choice | Boolean | false | single selection chips in set |
 | filter | Boolean | false | multiple selection chips in set |
 
-| Method | Description |
-|--------|-------------|
-| getSelectedChips | returns all selected chips of the set as array |
-
 ## Chip
 
 ### Slots

demo/views/ChipsView.vue

@@ -26,7 +26,7 @@
     <m-layout-grid-cell :span="12">
       <m-typo-title>Choice</m-typo-title>
       <m-chip-set choice>
-        <m-chip>Chip #1</m-chip>
+        <m-chip v-model="choiceSelected">Chip #1</m-chip>
         <m-chip>Chip #2</m-chip>
         <m-chip>Chip #3</m-chip>
       </m-chip-set>
@@ -64,6 +64,11 @@ import Chips from '../../dist/chips'
 Vue.use(Chips)
 
 export default {
+  data () {
+    return {
+      choiceSelected: false
+    }
+  }
 }
 </script>