Merge branch 'master' of https://github.com/primefaces/primevue

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 = [

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 {

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: {

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}
     }
 }