fix(chips): refactor foundation as per MDCWeb 0.16.0

stasson · Jun 5, 2018 · d60fdb2 · d60fdb2
1 parent 0c8c3a8
commit d60fdb2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 27 deletions.
diff --git a/components/chips/mdc-chip-set.vue b/components/chips/mdc-chip-set.vue
@@ -1,14 +1,13 @@
 <template>
-  <div 
-    :class="classes" 
+  <div
+    :class="classes"
     v-on="$listeners">
     <slot/>
   </div>
 </template>
 
 <script>
 import MDCChipSetFoundation from '@material/chips/chip-set/foundation'
-import MDCChipFoundation from '@material/chips/chip/foundation'
 export default {
   name: 'mdc-chip-set',
   props: {
@@ -38,27 +37,9 @@ export default {
       deregisterInteractionHandler: (evtType, handler) => {
         this.$el.removeEventListener(evtType, handler)
       },
-      appendChip: (text, leadingIcon, trailingIcon) => {
-        const chipTextEl = document.createElement('div')
-        chipTextEl.classList.add(MDCChipFoundation.cssClasses.TEXT)
-        chipTextEl.appendChild(document.createTextNode(text))
-
-        const chipEl = document.createElement('div')
-        chipEl.classList.add(MDCChipFoundation.cssClasses.CHIP)
-        if (leadingIcon) {
-          chipEl.appendChild(leadingIcon)
-        }
-        chipEl.appendChild(chipTextEl)
-        if (trailingIcon) {
-          chipEl.appendChild(trailingIcon)
-        }
-        this.root_.appendChild(chipEl)
-        return chipEl
-      },
       removeChip: chip => {
-        const index = this.chips.indexOf(chip)
-        this.chips.splice(index, 1)
-        chip.remove()
+        // TODO: may need refactoring
+        this.$nextTick(() => chip.$destroy())
       }
     })
 

diff --git a/components/chips/mdc-chip.vue b/components/chips/mdc-chip.vue
@@ -121,7 +121,6 @@ export default {
         )
       },
       notifyTrailingIconInteraction: () => {
-        this.$emit('trailingIconClick')
         emitCustomEvent(
           this.$el,
           MDCChipFoundation.strings.TRAILING_ICON_INTERACTION_EVENT,
@@ -150,12 +149,14 @@ export default {
           )
         }
       },
-      notifyRemoval: () =>
-        this.emit(
+      notifyRemoval: () => {
+        emitCustomEvent(
+          this.$el,
           MDCChipFoundation.strings.REMOVAL_EVENT,
           { chip: this },
           true
-        ),
+        )
+      },
       getComputedStyleValue: propertyName =>
         window.getComputedStyle(this.$el).getPropertyValue(propertyName),
       setStyleProperty: (property, value) =>