From 2f3c8b54a2904db981946852fd5c675bfd18c461 Mon Sep 17 00:00:00 2001
From: Joachim Schwarm <joachim@schwarm.co>
Date: Mon, 16 Sep 2024 18:07:20 +0200
Subject: [PATCH 1/2] Introduce parentContainer props for other mountpoints
 than document.body

---
 examples/App.vue     | 11 +++++++++++
 src/js/Component.vue | 16 +++++++++++-----
 src/js/api.js        |  4 +++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/examples/App.vue b/examples/App.vue
index 6f0c435..b5bf635 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -72,6 +72,16 @@
                 </div>
               </div>
 
+              <div class="form-group">
+                <label>Parent Container</label>
+                <div class="custom-control custom-checkbox">
+                  <input v-model="form.parentContainer" type="checkbox" class="custom-control-input"
+                          id="checkbox-parentContainer" true-value="#app" :false-value="null">
+                  <label class="custom-control-label" for="checkbox-parentContainer">Mount to #app instead of body</label>
+                </div>
+                <pre>{{ form }}</pre>
+              </div>
+
               <hr>
 
               <button type="submit" class="btn btn-primary mr-3">Show notification</button>
@@ -116,6 +126,7 @@ export default {
         dismissible: true,
         queue: false,
         position: 'bottom-right',
+        parentContainer: null,
         onClick: this.onClick,
         onDismiss: this.onDismiss,
       },
diff --git a/src/js/Component.vue b/src/js/Component.vue
index a9d4ba0..aaeafaf 100644
--- a/src/js/Component.vue
+++ b/src/js/Component.vue
@@ -65,6 +65,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    parentContainer: {
+      type: String,
+      default: null
+    }
   },
   data() {
     return {
@@ -83,8 +87,8 @@ export default defineComponent({
   },
   methods: {
     setupContainer() {
-      this.parentTop = document.querySelector('.v-toast.v-toast--top');
-      this.parentBottom = document.querySelector('.v-toast.v-toast--bottom');
+      this.parentTop = this.parentContainerElement.querySelector('.v-toast.v-toast--top');
+      this.parentBottom = this.parentContainerElement.querySelector('.v-toast.v-toast--bottom');
       // No need to create them, they already exists
       if (this.parentTop && this.parentBottom) return;
 
@@ -98,9 +102,8 @@ export default defineComponent({
         this.parentBottom.className = 'v-toast v-toast--bottom'
       }
 
-      const container = document.body;
-      container.appendChild(this.parentTop);
-      container.appendChild(this.parentBottom);
+      this.parentContainerElement.appendChild(this.parentTop);
+      this.parentContainerElement.appendChild(this.parentBottom);
     },
 
     shouldQueue() {
@@ -189,6 +192,9 @@ export default defineComponent({
           }
       }
     },
+    parentContainerElement() {
+      return this.parentContainer ? document.querySelector(this.parentContainer) : document.body
+    }
   },
   beforeUnmount() {
     eventBus.off('toast-clear', this.dismiss)
diff --git a/src/js/api.js b/src/js/api.js
index 2f5c8ef..b6dfdbd 100644
--- a/src/js/api.js
+++ b/src/js/api.js
@@ -14,7 +14,9 @@ export const useToast = (globalProps = {}) => {
 
       const propsData = Object.assign({}, defaultProps, globalProps, options);
 
-      const instance = createComponent(ToastComponent, propsData, document.body);
+      const parentContainer = propsData.parentContainer ? document.querySelector(propsData.parentContainer) : document.body
+
+      const instance = createComponent(ToastComponent, propsData, parentContainer);
 
       return {
         dismiss: instance.ctx.dismiss

From 89fc063847df2f9457ca221723efdf306b527078 Mon Sep 17 00:00:00 2001
From: Joachim Schwarm <joachim@schwarm.co>
Date: Mon, 16 Sep 2024 18:09:14 +0200
Subject: [PATCH 2/2] Remove Debug <pre>

---
 examples/App.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/App.vue b/examples/App.vue
index b5bf635..4c8bc3b 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -79,7 +79,6 @@
                           id="checkbox-parentContainer" true-value="#app" :false-value="null">
                   <label class="custom-control-label" for="checkbox-parentContainer">Mount to #app instead of body</label>
                 </div>
-                <pre>{{ form }}</pre>
               </div>
 
               <hr>