From d6278b528dceef60da795e6387f392c0ede3fbec Mon Sep 17 00:00:00 2001
From: Mats Pfeiffer <mats.pfeiffer@googlemail.com>
Date: Mon, 23 Apr 2018 21:13:06 +0200
Subject: [PATCH] feat(dialog): Use MutationObserver for reactive slot updates
 (#92)

---
 components/dialog/Dialog.vue | 49 ++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/components/dialog/Dialog.vue b/components/dialog/Dialog.vue
index 827cd6bdf..6e6646571 100644
--- a/components/dialog/Dialog.vue
+++ b/components/dialog/Dialog.vue
@@ -51,7 +51,8 @@ export default {
   },
   data () {
     return {
-      mdcDialog: null
+      mdcDialog: null,
+      slotOberserver: null
     }
   },
   computed: {
@@ -75,32 +76,38 @@ export default {
     }
   },
   mounted () {
-    let vm = this
+    this.updateSlots()
+    this.slotOberserver = new MutationObserver( () => this.updateSlots())
+    this.slotOberserver.observe(this.$el, {
+      childList: true,
+      subtree: true
+    })
 
-    if (vm.$slots.acceptButton) {
-      vm.$slots.acceptButton.map(n => {
-        n.elm.classList.add('mdc-dialog__footer__button')
-        n.elm.classList.add('mdc-dialog__footer__button--accept')
-      })
-    }
-    if (vm.$slots.cancelButton) {
-      vm.$slots.cancelButton.map(n => {
-        n.elm.classList.add('mdc-dialog__footer__button')
-        n.elm.classList.add('mdc-dialog__footer__button--cancel')
-      })
-    }
-    if (vm.$slots.dialogButton) {
-      vm.$slots.dialogButton.map(n => {
-        n.elm.classList.add('mdc-dialog__footer__button')
-      })
-    }
-
-    vm.mdcDialog = MDCDialog.attachTo(this.$el)
+    this.mdcDialog = MDCDialog.attachTo(this.$el)
   },
   beforeDestroy () {
     this.mdcDialog.destroy()
   },
   methods: {
+    updateSlots () {
+      if (this.$slots.acceptButton) {
+        this.$slots.acceptButton.map(n => {
+          n.elm.classList.add('mdc-dialog__footer__button')
+          n.elm.classList.add('mdc-dialog__footer__button--accept')
+        })
+      }
+      if (this.$slots.cancelButton) {
+        this.$slots.cancelButton.map(n => {
+          n.elm.classList.add('mdc-dialog__footer__button')
+          n.elm.classList.add('mdc-dialog__footer__button--cancel')
+        })
+      }
+      if (this.$slots.dialogButton) {
+        this.$slots.dialogButton.map(n => {
+          n.elm.classList.add('mdc-dialog__footer__button')
+        })
+      }
+    },
     onAccept () {
       this.model = false
       this.$emit('accept')