Fixed #1561 - Add appendTo property to Dialog v2

primefaces · Sep 20, 2021 · b0065bf · b0065bf
1 parent 4ec0c7b
commit b0065bf
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js
@@ -94,6 +94,12 @@ const DialogProps = [
         type: "boolean",
         default: "false",
         description: "Whether the dialog can be displayed full screen."
+    },
+    {
+        name: "appendTo",
+        type: "string",
+        default: "null",
+        description: "Id of the element or 'body' for document where the overlay should be appended to."
     }
 ];
 

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -68,6 +68,10 @@ export default {
         position: {
             type: String,
             default: 'center'
+        },
+        appendTo: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -94,6 +98,7 @@ export default {
         this.removeStylesFromMask();
     },
     beforeDestroy() {
+        this.restoreAppend();
         this.disableDocumentSettings();
     },
     methods: {
@@ -107,7 +112,8 @@ export default {
         },
         onEnter() {
             this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
-
+            this.appendContainer();
+            this.alignOverlay();
             this.$emit('show');
             this.focus();
             this.enableDocumentSettings();
@@ -226,6 +232,31 @@ export default {
                     this.$refs.mask.classList = 'p-dialog-mask' + (this.modal && ' p-component-overlay ') + this.getPositionClass();
                 }
             }
+        },
+        alignOverlay() {
+            if (this.appendTo) {
+                DomHandler.absolutePosition(this.$refs.dialog, this.$refs.mask);
+                this.$refs.dialog.style.minWidth = DomHandler.getOuterWidth(this.$refs.mask) + 'px';
+            }
+            else {
+                DomHandler.relativePosition(this.$refs.dialog, this.$refs.mask);
+            }
+        },
+        appendContainer() {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.$refs.dialog);
+                else
+                    document.getElementById(this.appendTo).appendChild(this.$refs.dialog);
+            }
+        },
+        restoreAppend() {
+            if (this.$refs.overlay && this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.removeChild(this.$refs.dialog);
+                else
+                    document.getElementById(this.appendTo).removeChild(this.$refs.dialog);
+            }
         }
     },
     computed: {

diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
@@ -177,6 +177,12 @@ export default {
                                 <td>boolean</td>
                                 <td>false</td>
                                 <td>Whether the dialog can be displayed full screen.</td>
+                            </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Id of the element or "body" for document where the overlay should be appended to.</td>
                             </tr>
 						</tbody>
 					</table>