From 652725016d6b350070ab5f60a076f52631ca72e1 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 10:46:53 +0300
Subject: [PATCH 1/3] Fixed #1483 - Add appendTo property to Dialog

---
 src/components/dialog/Dialog.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 6f0ec1a48..aca3976f3 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <Teleport to="body">
+    <Teleport :to="appendTarget" :disabled="appendDisabled">
         <div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
                 <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
@@ -93,6 +93,10 @@ export default {
         minY: {
             type: Number,
             default: 0
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
         }
     },
     data() {
@@ -155,7 +159,7 @@ export default {
             DomHandler.addClass(this.mask, 'p-dialog-mask-leave');
         },
         onLeave() {
-            
+
             this.$emit('hide');
         },
         onAfterLeave(el) {
@@ -399,6 +403,12 @@ export default {
         },
         contentStyleClass() {
             return ['p-dialog-content', this.contentClass];
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     directives: {

From cb6f17a4aa01875bab1f036d9a9e764989cf669f Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 10:47:15 +0300
Subject: [PATCH 2/3] Update d.ts and api-gen of Dialog

---
 api-generator/components/dialog.js | 6 ++++++
 src/components/dialog/Dialog.d.ts  | 9 +++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js
index 7180fd02c..78e3cc506 100644
--- a/api-generator/components/dialog.js
+++ b/api-generator/components/dialog.js
@@ -125,6 +125,12 @@ const DialogProps = [
         default: "true",
         description: "Keeps dialog in the viewport when dragging."
     },
+    {
+        name: "appendTo",
+        type: "string",
+        default: "body",
+        description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    }
 ];
 
 const DialogEvents = [
diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
index 2ce8bb7a0..677c2ad58 100755
--- a/src/components/dialog/Dialog.d.ts
+++ b/src/components/dialog/Dialog.d.ts
@@ -18,10 +18,11 @@ interface DialogProps {
     position?: string;
     maximizable?: boolean;
     breakpoints?: {[key: string]: string};
-    draggable: boolean;
-    keepInViewPort: boolean;
-    minX: number;
-    minY: number;
+    draggable?: boolean;
+    keepInViewPort?: boolean;
+    minX?: number;
+    minY?: number;
+    appendTo?: string;
 }
 
 declare class Dialog {

From b684f1680bcd3c755f082585f75b866576105a49 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Aug 2021 10:47:26 +0300
Subject: [PATCH 3/3] Update DialogDoc

---
 src/views/dialog/DialogDoc.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 045d44e51..df83f363f 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -221,6 +221,12 @@ export default {
                         <td>boolean</td>
                         <td>true</td>
                         <td>Keeps dialog in the viewport when dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -718,8 +724,8 @@ export default {
             displayPosition.value = false;
         };
 
-        return { displayBasic, displayBasic2, displayModal, displayResponsive, displayConfirmation, displayMaximizable, 
-            displayPosition, position, openBasic, openBasic2, closeBasic, closeBasic2, openResponsive, closeResponsive, 
+        return { displayBasic, displayBasic2, displayModal, displayResponsive, displayConfirmation, displayMaximizable,
+            displayPosition, position, openBasic, openBasic2, closeBasic, closeBasic2, openResponsive, closeResponsive,
             openModal, closeModal, openConfirmation, closeConfirmation, openMaximizable, closeMaximizable, openPosition, closePosition}
     }
 }