primevue 3.12.4 → 3.13.0

package/dialog/dialog.esm.js

@@ -1,6 +1,7 @@
 import { ZIndexUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, mergeProps, renderSlot, toDisplayString, createCommentVNode, withDirectives, createTextVNode } from 'vue';
+import Portal from 'primevue/portal';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, normalizeClass, createVNode, Transition, mergeProps, renderSlot, toDisplayString, createCommentVNode, createElementVNode, withDirectives, normalizeStyle, createTextVNode } from 'vue';
 
 var script = {
     name: 'Dialog',
@@ -375,126 +376,130 @@ var script = {
         },
         contentStyleClass() {
             return ['p-dialog-content', this.contentClass];
-        },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
         }
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'Portal': Portal
     }
 };
 
-const _hoisted_1 = { class: "p-dialog-header-icons" };
-const _hoisted_2 = /*#__PURE__*/createVNode("span", { class: "p-dialog-header-close-icon pi pi-times" }, null, -1);
-const _hoisted_3 = {
+const _hoisted_1 = ["aria-labelledby", "aria-modal"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = { class: "p-dialog-header-icons" };
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = /*#__PURE__*/createElementVNode("span", { class: "p-dialog-header-close-icon pi pi-times" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_5
+];
+const _hoisted_7 = {
   key: 1,
   class: "p-dialog-footer"
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Portal = resolveComponent("Portal");
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createBlock(Teleport, {
-    to: $options.appendTarget,
-    disabled: $options.appendDisabled
-  }, [
-    ($data.containerVisible)
-      ? (openBlock(), createBlock("div", {
-          key: 0,
-          ref: $options.maskRef,
-          class: $options.maskClass,
-          onClick: _cache[4] || (_cache[4] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-        }, [
-          createVNode(Transition, {
-            name: "p-dialog",
-            onBeforeEnter: $options.onBeforeEnter,
-            onEnter: $options.onEnter,
-            onBeforeLeave: $options.onBeforeLeave,
-            onLeave: $options.onLeave,
-            onAfterLeave: $options.onAfterLeave,
-            appear: ""
-          }, {
-            default: withCtx(() => [
-              ($props.visible)
-                ? (openBlock(), createBlock("div", mergeProps({
-                    key: 0,
-                    ref: $options.containerRef,
-                    class: $options.dialogClass
-                  }, _ctx.$attrs, {
-                    role: "dialog",
-                    "aria-labelledby": $options.ariaLabelledById,
-                    "aria-modal": $props.modal
-                  }), [
-                    ($props.showHeader)
-                      ? (openBlock(), createBlock("div", {
-                          key: 0,
-                          class: "p-dialog-header",
-                          onMousedown: _cache[3] || (_cache[3] = (...args) => ($options.initDrag && $options.initDrag(...args)))
-                        }, [
-                          renderSlot(_ctx.$slots, "header", {}, () => [
-                            ($props.header)
-                              ? (openBlock(), createBlock("span", {
-                                  key: 0,
-                                  id: $options.ariaLabelledById,
-                                  class: "p-dialog-title"
-                                }, toDisplayString($props.header), 9, ["id"]))
-                              : createCommentVNode("", true)
-                          ]),
-                          createVNode("div", _hoisted_1, [
-                            ($props.maximizable)
-                              ? withDirectives((openBlock(), createBlock("button", {
-                                  key: 0,
-                                  class: "p-dialog-header-icon p-dialog-header-maximize p-link",
-                                  onClick: _cache[1] || (_cache[1] = (...args) => ($options.maximize && $options.maximize(...args))),
-                                  type: "button",
-                                  tabindex: "-1"
-                                }, [
-                                  createVNode("span", { class: $options.maximizeIconClass }, null, 2)
-                                ], 512)), [
-                                  [_directive_ripple]
-                                ])
-                              : createCommentVNode("", true),
-                            ($props.closable)
-                              ? withDirectives((openBlock(), createBlock("button", {
-                                  key: 1,
-                                  class: "p-dialog-header-icon p-dialog-header-close p-link",
-                                  onClick: _cache[2] || (_cache[2] = (...args) => ($options.close && $options.close(...args))),
-                                  "aria-label": $props.ariaCloseLabel,
-                                  type: "button"
-                                }, [
-                                  _hoisted_2
-                                ], 8, ["aria-label"])), [
-                                  [_directive_ripple]
-                                ])
-                              : createCommentVNode("", true)
-                          ])
-                        ], 32))
-                      : createCommentVNode("", true),
-                    createVNode("div", {
-                      class: $options.contentStyleClass,
-                      style: $props.contentStyle
-                    }, [
-                      renderSlot(_ctx.$slots, "default")
-                    ], 6),
-                    ($props.footer || _ctx.$slots.footer)
-                      ? (openBlock(), createBlock("div", _hoisted_3, [
-                          renderSlot(_ctx.$slots, "footer", {}, () => [
-                            createTextVNode(toDisplayString($props.footer), 1)
-                          ])
-                        ]))
-                      : createCommentVNode("", true)
-                  ], 16, ["aria-labelledby", "aria-modal"]))
-                : createCommentVNode("", true)
-            ]),
-            _: 3
-          }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-        ], 2))
-      : createCommentVNode("", true)
-  ], 8, ["to", "disabled"]))
+  return (openBlock(), createBlock(_component_Portal, { appendTo: $props.appendTo }, {
+    default: withCtx(() => [
+      ($data.containerVisible)
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref: $options.maskRef,
+            class: normalizeClass($options.maskClass),
+            onClick: _cache[3] || (_cache[3] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+          }, [
+            createVNode(Transition, {
+              name: "p-dialog",
+              onBeforeEnter: $options.onBeforeEnter,
+              onEnter: $options.onEnter,
+              onBeforeLeave: $options.onBeforeLeave,
+              onLeave: $options.onLeave,
+              onAfterLeave: $options.onAfterLeave,
+              appear: ""
+            }, {
+              default: withCtx(() => [
+                ($props.visible)
+                  ? (openBlock(), createElementBlock("div", mergeProps({
+                      key: 0,
+                      ref: $options.containerRef,
+                      class: $options.dialogClass
+                    }, _ctx.$attrs, {
+                      role: "dialog",
+                      "aria-labelledby": $options.ariaLabelledById,
+                      "aria-modal": $props.modal
+                    }), [
+                      ($props.showHeader)
+                        ? (openBlock(), createElementBlock("div", {
+                            key: 0,
+                            class: "p-dialog-header",
+                            onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.initDrag && $options.initDrag(...args)))
+                          }, [
+                            renderSlot(_ctx.$slots, "header", {}, () => [
+                              ($props.header)
+                                ? (openBlock(), createElementBlock("span", {
+                                    key: 0,
+                                    id: $options.ariaLabelledById,
+                                    class: "p-dialog-title"
+                                  }, toDisplayString($props.header), 9, _hoisted_2))
+                                : createCommentVNode("", true)
+                            ]),
+                            createElementVNode("div", _hoisted_3, [
+                              ($props.maximizable)
+                                ? withDirectives((openBlock(), createElementBlock("button", {
+                                    key: 0,
+                                    class: "p-dialog-header-icon p-dialog-header-maximize p-link",
+                                    onClick: _cache[0] || (_cache[0] = (...args) => ($options.maximize && $options.maximize(...args))),
+                                    type: "button",
+                                    tabindex: "-1"
+                                  }, [
+                                    createElementVNode("span", {
+                                      class: normalizeClass($options.maximizeIconClass)
+                                    }, null, 2)
+                                  ])), [
+                                    [_directive_ripple]
+                                  ])
+                                : createCommentVNode("", true),
+                              ($props.closable)
+                                ? withDirectives((openBlock(), createElementBlock("button", {
+                                    key: 1,
+                                    class: "p-dialog-header-icon p-dialog-header-close p-link",
+                                    onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
+                                    "aria-label": $props.ariaCloseLabel,
+                                    type: "button"
+                                  }, _hoisted_6, 8, _hoisted_4)), [
+                                    [_directive_ripple]
+                                  ])
+                                : createCommentVNode("", true)
+                            ])
+                          ], 32))
+                        : createCommentVNode("", true),
+                      createElementVNode("div", {
+                        class: normalizeClass($options.contentStyleClass),
+                        style: normalizeStyle($props.contentStyle)
+                      }, [
+                        renderSlot(_ctx.$slots, "default")
+                      ], 6),
+                      ($props.footer || _ctx.$slots.footer)
+                        ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                            renderSlot(_ctx.$slots, "footer", {}, () => [
+                              createTextVNode(toDisplayString($props.footer), 1)
+                            ])
+                          ]))
+                        : createCommentVNode("", true)
+                    ], 16, _hoisted_1))
+                  : createCommentVNode("", true)
+              ]),
+              _: 3
+            }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
+          ], 2))
+        : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["appendTo"]))
 }
 
 function styleInject(css, ref) {
@@ -529,4 +534,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/dialog/dialog.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t,UniqueComponentId as n}from"primevue/utils";import i from"primevue/ripple";import{resolveDirective as a,openBlock as o,createBlock as l,Teleport as s,createVNode as d,Transition as r,withCtx as p,mergeProps as m,renderSlot as g,toDisplayString as c,createCommentVNode as h,withDirectives as b,createTextVNode as u}from"vue";var f={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","maximize","unmaximize","dragend"],props:{header:null,footer:null,visible:Boolean,modal:Boolean,contentStyle:null,contentClass:String,rtl:Boolean,maximizable:Boolean,dismissableMask:Boolean,closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask=null,this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(t){this.autoZIndex&&e.set("modal",t,this.baseZIndex+this.$primevue.config.zIndex.modal),t.setAttribute(this.attributeSelector,"")},onEnter(){this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners()},onBeforeLeave(){this.modal&&t.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.clear(t),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners()},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?t.addClass(document.body,"p-overflow-hidden"):t.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&t.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&t.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){if(9===e.which){e.preventDefault();let n=t.getFocusableElements(this.container);if(n&&n.length>0)if(document.activeElement){let t=n.indexOf(document.activeElement);e.shiftKey?-1==t||0===t?n[n.length-1].focus():n[t-1].focus():-1==t||t===n.length-1?n[0].focus():n[t+1].focus()}else n[0].focus()}else 27===e.which&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){t.hasClass(e.target,"p-dialog-header-icon")||t.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",t.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let n=t.getOuterWidth(this.container),i=t.getOuterHeight(this.container),a=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+a,d=l.top+o,r=t.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<r.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),d>=this.minY&&d+i<r.height&&(this.lastPageY=e.pageY,this.container.style.top=d+"px")):(this.lastPageX=e.pageX,this.container.style.left=s+"px",this.lastPageY=e.pageY,this.container.style.top=d+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,t.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconClass(){return["p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized}]},ariaId:()=>n(),ariaLabelledById(){return null!=this.header?this.ariaId+"_header":null},attributeSelector:()=>n(),contentStyleClass(){return["p-dialog-content",this.contentClass]},appendDisabled(){return"self"===this.appendTo},appendTarget(){return this.appendDisabled?null:this.appendTo}},directives:{ripple:i}};const x={class:"p-dialog-header-icons"},y=d("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1),v={key:1,class:"p-dialog-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n    width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    margin: .75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\n            transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    -webkit-transition: all .3s ease-out;\n    transition: all .3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\n            transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    -webkit-transform: translate3d(-100%, 0px, 0px);\n            transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: none;\n            transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    top: 0px !important;\n    left: 0px !important;\n    max-height: 100%;\n    height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),f.render=function(e,t,n,i,f,k){const w=a("ripple");return o(),l(s,{to:k.appendTarget,disabled:k.appendDisabled},[f.containerVisible?(o(),l("div",{key:0,ref:k.maskRef,class:k.maskClass,onClick:t[4]||(t[4]=(...e)=>k.onMaskClick&&k.onMaskClick(...e))},[d(r,{name:"p-dialog",onBeforeEnter:k.onBeforeEnter,onEnter:k.onEnter,onBeforeLeave:k.onBeforeLeave,onLeave:k.onLeave,onAfterLeave:k.onAfterLeave,appear:""},{default:p((()=>[n.visible?(o(),l("div",m({key:0,ref:k.containerRef,class:k.dialogClass},e.$attrs,{role:"dialog","aria-labelledby":k.ariaLabelledById,"aria-modal":n.modal}),[n.showHeader?(o(),l("div",{key:0,class:"p-dialog-header",onMousedown:t[3]||(t[3]=(...e)=>k.initDrag&&k.initDrag(...e))},[g(e.$slots,"header",{},(()=>[n.header?(o(),l("span",{key:0,id:k.ariaLabelledById,class:"p-dialog-title"},c(n.header),9,["id"])):h("",!0)])),d("div",x,[n.maximizable?b((o(),l("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[1]||(t[1]=(...e)=>k.maximize&&k.maximize(...e)),type:"button",tabindex:"-1"},[d("span",{class:k.maximizeIconClass},null,2)],512)),[[w]]):h("",!0),n.closable?b((o(),l("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[2]||(t[2]=(...e)=>k.close&&k.close(...e)),"aria-label":n.ariaCloseLabel,type:"button"},[y],8,["aria-label"])),[[w]]):h("",!0)])],32)):h("",!0),d("div",{class:k.contentStyleClass,style:n.contentStyle},[g(e.$slots,"default")],6),n.footer||e.$slots.footer?(o(),l("div",v,[g(e.$slots,"footer",{},(()=>[u(c(n.footer),1)]))])):h("",!0)],16,["aria-labelledby","aria-modal"])):h("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):h("",!0)],8,["to","disabled"])};export default f;
+import{ZIndexUtils as e,DomHandler as t,UniqueComponentId as n}from"primevue/utils";import i from"primevue/ripple";import a from"primevue/portal";import{resolveComponent as o,resolveDirective as l,openBlock as s,createBlock as d,withCtx as r,createElementBlock as p,normalizeClass as m,createVNode as g,Transition as c,mergeProps as h,renderSlot as f,toDisplayString as u,createCommentVNode as b,createElementVNode as x,withDirectives as y,normalizeStyle as v,createTextVNode as k}from"vue";var w={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","maximize","unmaximize","dragend"],props:{header:null,footer:null,visible:Boolean,modal:Boolean,contentStyle:null,contentClass:String,rtl:Boolean,maximizable:Boolean,dismissableMask:Boolean,closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask=null,this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(t){this.autoZIndex&&e.set("modal",t,this.baseZIndex+this.$primevue.config.zIndex.modal),t.setAttribute(this.attributeSelector,"")},onEnter(){this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners()},onBeforeLeave(){this.modal&&t.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.clear(t),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners()},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?t.addClass(document.body,"p-overflow-hidden"):t.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&t.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&t.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){if(9===e.which){e.preventDefault();let n=t.getFocusableElements(this.container);if(n&&n.length>0)if(document.activeElement){let t=n.indexOf(document.activeElement);e.shiftKey?-1==t||0===t?n[n.length-1].focus():n[t-1].focus():-1==t||t===n.length-1?n[0].focus():n[t+1].focus()}else n[0].focus()}else 27===e.which&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){t.hasClass(e.target,"p-dialog-header-icon")||t.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",t.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let n=t.getOuterWidth(this.container),i=t.getOuterHeight(this.container),a=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+a,d=l.top+o,r=t.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<r.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),d>=this.minY&&d+i<r.height&&(this.lastPageY=e.pageY,this.container.style.top=d+"px")):(this.lastPageX=e.pageX,this.container.style.left=s+"px",this.lastPageY=e.pageY,this.container.style.top=d+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,t.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconClass(){return["p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized}]},ariaId:()=>n(),ariaLabelledById(){return null!=this.header?this.ariaId+"_header":null},attributeSelector:()=>n(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:i},components:{Portal:a}};const L=["aria-labelledby","aria-modal"],D=["id"],E={class:"p-dialog-header-icons"},z=["aria-label"],C=[x("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1)],B={key:1,class:"p-dialog-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n    width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    margin: .75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\n            transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    -webkit-transition: all .3s ease-out;\n    transition: all .3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\n            transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    -webkit-transform: translate3d(-100%, 0px, 0px);\n            transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: none;\n            transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    top: 0px !important;\n    left: 0px !important;\n    max-height: 100%;\n    height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),w.render=function(e,t,n,i,a,w){const S=o("Portal"),I=l("ripple");return s(),d(S,{appendTo:n.appendTo},{default:r((()=>[a.containerVisible?(s(),p("div",{key:0,ref:w.maskRef,class:m(w.maskClass),onClick:t[3]||(t[3]=(...e)=>w.onMaskClick&&w.onMaskClick(...e))},[g(c,{name:"p-dialog",onBeforeEnter:w.onBeforeEnter,onEnter:w.onEnter,onBeforeLeave:w.onBeforeLeave,onLeave:w.onLeave,onAfterLeave:w.onAfterLeave,appear:""},{default:r((()=>[n.visible?(s(),p("div",h({key:0,ref:w.containerRef,class:w.dialogClass},e.$attrs,{role:"dialog","aria-labelledby":w.ariaLabelledById,"aria-modal":n.modal}),[n.showHeader?(s(),p("div",{key:0,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>w.initDrag&&w.initDrag(...e))},[f(e.$slots,"header",{},(()=>[n.header?(s(),p("span",{key:0,id:w.ariaLabelledById,class:"p-dialog-title"},u(n.header),9,D)):b("",!0)])),x("div",E,[n.maximizable?y((s(),p("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>w.maximize&&w.maximize(...e)),type:"button",tabindex:"-1"},[x("span",{class:m(w.maximizeIconClass)},null,2)])),[[I]]):b("",!0),n.closable?y((s(),p("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>w.close&&w.close(...e)),"aria-label":n.ariaCloseLabel,type:"button"},C,8,z)),[[I]]):b("",!0)])],32)):b("",!0),x("div",{class:m(w.contentStyleClass),style:v(n.contentStyle)},[f(e.$slots,"default")],6),n.footer||e.$slots.footer?(s(),p("div",B,[f(e.$slots,"footer",{},(()=>[k(u(n.footer),1)]))])):b("",!0)],16,L)):b("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):b("",!0)])),_:3},8,["appendTo"])};export{w as default};

package/dialog/dialog.js

@@ -1,10 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.dialog = (function (utils, Ripple, vue) {
+this.primevue.dialog = (function (utils, Ripple, Portal, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
     var script = {
         name: 'Dialog',
@@ -379,126 +380,130 @@ this.primevue.dialog = (function (utils, Ripple, vue) {
             },
             contentStyleClass() {
                 return ['p-dialog-content', this.contentClass];
-            },
-            appendDisabled() {
-                return this.appendTo === 'self';
-            },
-            appendTarget() {
-                return this.appendDisabled ? null : this.appendTo;
             }
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"]
+        },
+        components: {
+            'Portal': Portal__default["default"]
         }
     };
 
-    const _hoisted_1 = { class: "p-dialog-header-icons" };
-    const _hoisted_2 = /*#__PURE__*/vue.createVNode("span", { class: "p-dialog-header-close-icon pi pi-times" }, null, -1);
-    const _hoisted_3 = {
+    const _hoisted_1 = ["aria-labelledby", "aria-modal"];
+    const _hoisted_2 = ["id"];
+    const _hoisted_3 = { class: "p-dialog-header-icons" };
+    const _hoisted_4 = ["aria-label"];
+    const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-dialog-header-close-icon pi pi-times" }, null, -1);
+    const _hoisted_6 = [
+      _hoisted_5
+    ];
+    const _hoisted_7 = {
       key: 1,
       class: "p-dialog-footer"
     };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_Portal = vue.resolveComponent("Portal");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createBlock(vue.Teleport, {
-        to: $options.appendTarget,
-        disabled: $options.appendDisabled
-      }, [
-        ($data.containerVisible)
-          ? (vue.openBlock(), vue.createBlock("div", {
-              key: 0,
-              ref: $options.maskRef,
-              class: $options.maskClass,
-              onClick: _cache[4] || (_cache[4] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-            }, [
-              vue.createVNode(vue.Transition, {
-                name: "p-dialog",
-                onBeforeEnter: $options.onBeforeEnter,
-                onEnter: $options.onEnter,
-                onBeforeLeave: $options.onBeforeLeave,
-                onLeave: $options.onLeave,
-                onAfterLeave: $options.onAfterLeave,
-                appear: ""
-              }, {
-                default: vue.withCtx(() => [
-                  ($props.visible)
-                    ? (vue.openBlock(), vue.createBlock("div", vue.mergeProps({
-                        key: 0,
-                        ref: $options.containerRef,
-                        class: $options.dialogClass
-                      }, _ctx.$attrs, {
-                        role: "dialog",
-                        "aria-labelledby": $options.ariaLabelledById,
-                        "aria-modal": $props.modal
-                      }), [
-                        ($props.showHeader)
-                          ? (vue.openBlock(), vue.createBlock("div", {
-                              key: 0,
-                              class: "p-dialog-header",
-                              onMousedown: _cache[3] || (_cache[3] = (...args) => ($options.initDrag && $options.initDrag(...args)))
-                            }, [
-                              vue.renderSlot(_ctx.$slots, "header", {}, () => [
-                                ($props.header)
-                                  ? (vue.openBlock(), vue.createBlock("span", {
-                                      key: 0,
-                                      id: $options.ariaLabelledById,
-                                      class: "p-dialog-title"
-                                    }, vue.toDisplayString($props.header), 9, ["id"]))
-                                  : vue.createCommentVNode("", true)
-                              ]),
-                              vue.createVNode("div", _hoisted_1, [
-                                ($props.maximizable)
-                                  ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                                      key: 0,
-                                      class: "p-dialog-header-icon p-dialog-header-maximize p-link",
-                                      onClick: _cache[1] || (_cache[1] = (...args) => ($options.maximize && $options.maximize(...args))),
-                                      type: "button",
-                                      tabindex: "-1"
-                                    }, [
-                                      vue.createVNode("span", { class: $options.maximizeIconClass }, null, 2)
-                                    ], 512)), [
-                                      [_directive_ripple]
-                                    ])
-                                  : vue.createCommentVNode("", true),
-                                ($props.closable)
-                                  ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                                      key: 1,
-                                      class: "p-dialog-header-icon p-dialog-header-close p-link",
-                                      onClick: _cache[2] || (_cache[2] = (...args) => ($options.close && $options.close(...args))),
-                                      "aria-label": $props.ariaCloseLabel,
-                                      type: "button"
-                                    }, [
-                                      _hoisted_2
-                                    ], 8, ["aria-label"])), [
-                                      [_directive_ripple]
-                                    ])
-                                  : vue.createCommentVNode("", true)
-                              ])
-                            ], 32))
-                          : vue.createCommentVNode("", true),
-                        vue.createVNode("div", {
-                          class: $options.contentStyleClass,
-                          style: $props.contentStyle
-                        }, [
-                          vue.renderSlot(_ctx.$slots, "default")
-                        ], 6),
-                        ($props.footer || _ctx.$slots.footer)
-                          ? (vue.openBlock(), vue.createBlock("div", _hoisted_3, [
-                              vue.renderSlot(_ctx.$slots, "footer", {}, () => [
-                                vue.createTextVNode(vue.toDisplayString($props.footer), 1)
-                              ])
-                            ]))
-                          : vue.createCommentVNode("", true)
-                      ], 16, ["aria-labelledby", "aria-modal"]))
-                    : vue.createCommentVNode("", true)
-                ]),
-                _: 3
-              }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-            ], 2))
-          : vue.createCommentVNode("", true)
-      ], 8, ["to", "disabled"]))
+      return (vue.openBlock(), vue.createBlock(_component_Portal, { appendTo: $props.appendTo }, {
+        default: vue.withCtx(() => [
+          ($data.containerVisible)
+            ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                ref: $options.maskRef,
+                class: vue.normalizeClass($options.maskClass),
+                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+              }, [
+                vue.createVNode(vue.Transition, {
+                  name: "p-dialog",
+                  onBeforeEnter: $options.onBeforeEnter,
+                  onEnter: $options.onEnter,
+                  onBeforeLeave: $options.onBeforeLeave,
+                  onLeave: $options.onLeave,
+                  onAfterLeave: $options.onAfterLeave,
+                  appear: ""
+                }, {
+                  default: vue.withCtx(() => [
+                    ($props.visible)
+                      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                          key: 0,
+                          ref: $options.containerRef,
+                          class: $options.dialogClass
+                        }, _ctx.$attrs, {
+                          role: "dialog",
+                          "aria-labelledby": $options.ariaLabelledById,
+                          "aria-modal": $props.modal
+                        }), [
+                          ($props.showHeader)
+                            ? (vue.openBlock(), vue.createElementBlock("div", {
+                                key: 0,
+                                class: "p-dialog-header",
+                                onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.initDrag && $options.initDrag(...args)))
+                              }, [
+                                vue.renderSlot(_ctx.$slots, "header", {}, () => [
+                                  ($props.header)
+                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        key: 0,
+                                        id: $options.ariaLabelledById,
+                                        class: "p-dialog-title"
+                                      }, vue.toDisplayString($props.header), 9, _hoisted_2))
+                                    : vue.createCommentVNode("", true)
+                                ]),
+                                vue.createElementVNode("div", _hoisted_3, [
+                                  ($props.maximizable)
+                                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                        key: 0,
+                                        class: "p-dialog-header-icon p-dialog-header-maximize p-link",
+                                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.maximize && $options.maximize(...args))),
+                                        type: "button",
+                                        tabindex: "-1"
+                                      }, [
+                                        vue.createElementVNode("span", {
+                                          class: vue.normalizeClass($options.maximizeIconClass)
+                                        }, null, 2)
+                                      ])), [
+                                        [_directive_ripple]
+                                      ])
+                                    : vue.createCommentVNode("", true),
+                                  ($props.closable)
+                                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                        key: 1,
+                                        class: "p-dialog-header-icon p-dialog-header-close p-link",
+                                        onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
+                                        "aria-label": $props.ariaCloseLabel,
+                                        type: "button"
+                                      }, _hoisted_6, 8, _hoisted_4)), [
+                                        [_directive_ripple]
+                                      ])
+                                    : vue.createCommentVNode("", true)
+                                ])
+                              ], 32))
+                            : vue.createCommentVNode("", true),
+                          vue.createElementVNode("div", {
+                            class: vue.normalizeClass($options.contentStyleClass),
+                            style: vue.normalizeStyle($props.contentStyle)
+                          }, [
+                            vue.renderSlot(_ctx.$slots, "default")
+                          ], 6),
+                          ($props.footer || _ctx.$slots.footer)
+                            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                                vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+                                  vue.createTextVNode(vue.toDisplayString($props.footer), 1)
+                                ])
+                              ]))
+                            : vue.createCommentVNode("", true)
+                        ], 16, _hoisted_1))
+                      : vue.createCommentVNode("", true)
+                  ]),
+                  _: 3
+                }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
+              ], 2))
+            : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["appendTo"]))
     }
 
     function styleInject(css, ref) {
@@ -535,4 +540,4 @@ this.primevue.dialog = (function (utils, Ripple, vue) {
 
     return script;
 
-}(primevue.utils, primevue.ripple, Vue));
+})(primevue.utils, primevue.ripple, primevue.portal, Vue);