primevue 2.5.0 → 2.8.0

package/dataviewlayoutoptions/dataviewlayoutoptions.common.js

@@ -154,7 +154,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue?vue&type=template&id=8acdb3fc&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue?vue&type=template&id=8acdb3fc&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"p-dataview-layout-options p-selectbutton p-buttonset"},[_c('button',{class:_vm.buttonListClass,attrs:{"type":"button"},on:{"click":function($event){return _vm.changeLayout('list')}}},[_c('i',{staticClass:"pi pi-bars"})]),_c('button',{class:_vm.buttonGridClass,attrs:{"type":"button"},on:{"click":function($event){return _vm.changeLayout('grid')}}},[_c('i',{staticClass:"pi pi-th-large"})])])}
 var staticRenderFns = []
 

package/dataviewlayoutoptions/dataviewlayoutoptions.umd.js

@@ -163,7 +163,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue?vue&type=template&id=8acdb3fc&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue?vue&type=template&id=8acdb3fc&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"p-dataview-layout-options p-selectbutton p-buttonset"},[_c('button',{class:_vm.buttonListClass,attrs:{"type":"button"},on:{"click":function($event){return _vm.changeLayout('list')}}},[_c('i',{staticClass:"pi pi-bars"})]),_c('button',{class:_vm.buttonGridClass,attrs:{"type":"button"},on:{"click":function($event){return _vm.changeLayout('grid')}}},[_c('i',{staticClass:"pi pi-th-large"})])])}
 var staticRenderFns = []
 

package/deferredcontent/deferredcontent.common.js

@@ -154,7 +154,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deferredcontent/DeferredContent.vue?vue&type=template&id=bf4b73cc&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deferredcontent/DeferredContent.vue?vue&type=template&id=bf4b73cc&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container"},[(_vm.loaded)?_vm._t("default"):_vm._e()],2)}
 var staticRenderFns = []
 

package/deferredcontent/deferredcontent.umd.js

@@ -163,7 +163,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deferredcontent/DeferredContent.vue?vue&type=template&id=bf4b73cc&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deferredcontent/DeferredContent.vue?vue&type=template&id=bf4b73cc&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container"},[(_vm.loaded)?_vm._t("default"):_vm._e()],2)}
 var staticRenderFns = []
 

package/dialog/Dialog.vue

@@ -68,6 +68,10 @@ export default {
         position: {
             type: String,
             default: 'center'
+        },
+        appendTo: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -80,20 +84,12 @@ export default {
     },
     documentKeydownListener: null,
     updated() {
-        this.removeStylesFromMask();
-
         if (this.visible && !this.maskVisible) {
             this.maskVisible = true;
         }
-
-        if (this.modal && this.$refs.mask && !DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
-            DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
-        }
-    },
-    mounted() {
-        this.removeStylesFromMask();
     },
     beforeDestroy() {
+        this.restoreAppend();
         this.disableDocumentSettings();
     },
     methods: {
@@ -107,13 +103,15 @@ export default {
         },
         onEnter() {
             this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
-
+            this.removeStylesFromMask();
+            this.appendContainer();
+            this.alignOverlay();
             this.$emit('show');
             this.focus();
             this.enableDocumentSettings();
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
+            DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
         },
         onLeave() {
             this.$emit('hide');
@@ -222,9 +220,31 @@ export default {
                 }
 
                 this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
-                if (this.dialogClasses) {
-                    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);
             }
         }
     },
@@ -235,7 +255,7 @@ export default {
             };
         },
         maskClass() {
-            return ['p-dialog-mask', this.getPositionClass()];
+            return ['p-dialog-mask', {'p-component-overlay p-component-overlay-enter': this.modal}, this.getPositionClass()];
         },
         dialogClass() {
             return ['p-dialog p-component', {
@@ -275,8 +295,6 @@ export default {
     justify-content: center;
     align-items: center;
     pointer-events: none;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-dialog-mask.p-component-overlay {
@@ -338,10 +356,6 @@ export default {
     transform: scale(0.7);
 }
 
-.p-dialog-mask.p-dialog-mask-leave {
-    background-color: transparent;
-}
-
 /* Top, Bottom, Left, Right, Top* and Bottom* */
 .p-dialog-top .p-dialog,
 .p-dialog-bottom .p-dialog,

package/dialog/dialog.common.js

@@ -3366,7 +3366,7 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;background-color:transparent;-webkit-transition-property:background-color;transition-property:background-color}.p-dialog,.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:90%;-webkit-transform:scale(1);transform:scale(1)}.p-dialog-content{overflow-y:auto}.p-dialog-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.p-dialog-footer,.p-dialog-header{-ms-flex-negative:0;flex-shrink:0}.p-dialog .p-dialog-header-icon,.p-dialog .p-dialog-header-icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.p-dialog .p-dialog-header-icon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-enter-active{-webkit-transition:all .15s cubic-bezier(0,0,.2,1);transition:all .15s cubic-bezier(0,0,.2,1)}.p-dialog-leave-active{-webkit-transition:all .15s cubic-bezier(.4,0,.2,1);transition:all .15s cubic-bezier(.4,0,.2,1)}.p-dialog-enter,.p-dialog-leave-to{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}.p-dialog-mask.p-dialog-mask-leave{background-color:transparent}.p-dialog-bottom .p-dialog,.p-dialog-bottomleft .p-dialog,.p-dialog-bottomright .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top .p-dialog,.p-dialog-topleft .p-dialog,.p-dialog-topright .p-dialog{margin:.75rem;-webkit-transform:translateZ(0);transform:translateZ(0)}.p-dialog-bottom .p-dialog-enter-active,.p-dialog-bottom .p-dialog-leave-active,.p-dialog-bottomleft .p-dialog-enter-active,.p-dialog-bottomleft .p-dialog-leave-active,.p-dialog-bottomright .p-dialog-enter-active,.p-dialog-bottomright .p-dialog-leave-active,.p-dialog-left .p-dialog-enter-active,.p-dialog-left .p-dialog-leave-active,.p-dialog-right .p-dialog-enter-active,.p-dialog-right .p-dialog-leave-active,.p-dialog-top .p-dialog-enter-active,.p-dialog-top .p-dialog-leave-active,.p-dialog-topleft .p-dialog-enter-active,.p-dialog-topleft .p-dialog-leave-active,.p-dialog-topright .p-dialog-enter-active,.p-dialog-topright .p-dialog-leave-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.p-dialog-top .p-dialog-enter,.p-dialog-top .p-dialog-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.p-dialog-bottom .p-dialog-enter,.p-dialog-bottom .p-dialog-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.p-dialog-bottomleft .p-dialog-enter,.p-dialog-bottomleft .p-dialog-leave-to,.p-dialog-left .p-dialog-enter,.p-dialog-left .p-dialog-leave-to,.p-dialog-topleft .p-dialog-enter,.p-dialog-topleft .p-dialog-leave-to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.p-dialog-bottomright .p-dialog-enter,.p-dialog-bottomright .p-dialog-leave-to,.p-dialog-right .p-dialog-enter,.p-dialog-right .p-dialog-leave-to,.p-dialog-topright .p-dialog-enter,.p-dialog-topright .p-dialog-leave-to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.p-dialog-maximized{-webkit-transition:none;transition:none;-webkit-transform:none;transform:none;width:100vw!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.p-dialog-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.p-dialog-top,.p-dialog-topleft{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-topleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-topright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-bottom,.p-dialog-bottomleft{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-dialog-bottomleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-bottomright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-confirm-dialog .p-dialog-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}", ""]);
+exports.push([module.i, ".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}.p-dialog,.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:90%;-webkit-transform:scale(1);transform:scale(1)}.p-dialog-content{overflow-y:auto}.p-dialog-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.p-dialog-footer,.p-dialog-header{-ms-flex-negative:0;flex-shrink:0}.p-dialog .p-dialog-header-icon,.p-dialog .p-dialog-header-icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.p-dialog .p-dialog-header-icon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-enter-active{-webkit-transition:all .15s cubic-bezier(0,0,.2,1);transition:all .15s cubic-bezier(0,0,.2,1)}.p-dialog-leave-active{-webkit-transition:all .15s cubic-bezier(.4,0,.2,1);transition:all .15s cubic-bezier(.4,0,.2,1)}.p-dialog-enter,.p-dialog-leave-to{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}.p-dialog-bottom .p-dialog,.p-dialog-bottomleft .p-dialog,.p-dialog-bottomright .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top .p-dialog,.p-dialog-topleft .p-dialog,.p-dialog-topright .p-dialog{margin:.75rem;-webkit-transform:translateZ(0);transform:translateZ(0)}.p-dialog-bottom .p-dialog-enter-active,.p-dialog-bottom .p-dialog-leave-active,.p-dialog-bottomleft .p-dialog-enter-active,.p-dialog-bottomleft .p-dialog-leave-active,.p-dialog-bottomright .p-dialog-enter-active,.p-dialog-bottomright .p-dialog-leave-active,.p-dialog-left .p-dialog-enter-active,.p-dialog-left .p-dialog-leave-active,.p-dialog-right .p-dialog-enter-active,.p-dialog-right .p-dialog-leave-active,.p-dialog-top .p-dialog-enter-active,.p-dialog-top .p-dialog-leave-active,.p-dialog-topleft .p-dialog-enter-active,.p-dialog-topleft .p-dialog-leave-active,.p-dialog-topright .p-dialog-enter-active,.p-dialog-topright .p-dialog-leave-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.p-dialog-top .p-dialog-enter,.p-dialog-top .p-dialog-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.p-dialog-bottom .p-dialog-enter,.p-dialog-bottom .p-dialog-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.p-dialog-bottomleft .p-dialog-enter,.p-dialog-bottomleft .p-dialog-leave-to,.p-dialog-left .p-dialog-enter,.p-dialog-left .p-dialog-leave-to,.p-dialog-topleft .p-dialog-enter,.p-dialog-topleft .p-dialog-leave-to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.p-dialog-bottomright .p-dialog-enter,.p-dialog-bottomright .p-dialog-leave-to,.p-dialog-right .p-dialog-enter,.p-dialog-right .p-dialog-leave-to,.p-dialog-topright .p-dialog-enter,.p-dialog-topright .p-dialog-leave-to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.p-dialog-maximized{-webkit-transition:none;transition:none;-webkit-transform:none;transform:none;width:100vw!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.p-dialog-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.p-dialog-top,.p-dialog-topleft{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-topleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-topright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-bottom,.p-dialog-bottomleft{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-dialog-bottomleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-bottomright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-confirm-dialog .p-dialog-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}", ""]);
 
 // exports
 
@@ -3483,12 +3483,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dialog/Dialog.vue?vue&type=template&id=08bb02fc&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dialog/Dialog.vue?vue&type=template&id=c033c13a&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.maskVisible)?_c('div',{ref:"mask",class:_vm.maskClass,on:{"click":_vm.onMaskClick}},[_c('transition',{attrs:{"name":"p-dialog"},on:{"before-enter":_vm.onBeforeEnter,"enter":_vm.onEnter,"before-leave":_vm.onBeforeLeave,"leave":_vm.onLeave,"after-leave":_vm.onAfterLeave,"appear":_vm.onAppear}},[(_vm.visible)?_c('div',_vm._g(_vm._b({ref:"dialog",class:_vm.dialogClass,style:(_vm.dialogStyle),attrs:{"role":"dialog","aria-labelledby":_vm.ariaLabelledById,"aria-modal":_vm.modal}},'div',_vm.$attrs,false),_vm.listeners),[(_vm.showHeader)?_c('div',{staticClass:"p-dialog-header"},[_vm._t("header",function(){return [(_vm.header)?_c('span',{staticClass:"p-dialog-title",attrs:{"id":_vm.ariaLabelledById}},[_vm._v(_vm._s(_vm.header))]):_vm._e()]}),_c('div',{staticClass:"p-dialog-header-icons"},[(_vm.maximizable)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-dialog-header-icon p-dialog-header-maximize p-link",attrs:{"type":"button","tabindex":"-1"},on:{"click":_vm.maximize}},[_c('span',{class:_vm.maximizeIconClass})]):_vm._e(),(_vm.closable)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-dialog-header-icon p-dialog-header-close p-link",attrs:{"aria-label":_vm.ariaCloseLabel,"type":"button","tabindex":"-1"},on:{"click":_vm.close}},[_c('span',{staticClass:"p-dialog-header-close-icon pi pi-times"})]):_vm._e()])],2):_vm._e(),_c('div',{staticClass:"p-dialog-content",style:(_vm.contentStyle)},[_vm._t("default")],2),(_vm.footer || _vm.$slots.footer)?_c('div',{staticClass:"p-dialog-footer"},[_vm._t("footer",function(){return [_vm._v(_vm._s(_vm.footer))]})],2):_vm._e()]):_vm._e()])],1):_vm._e()}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/dialog/Dialog.vue?vue&type=template&id=08bb02fc&
+// CONCATENATED MODULE: ./src/components/dialog/Dialog.vue?vue&type=template&id=c033c13a&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.get-own-property-descriptors.js
 var es7_object_get_own_property_descriptors = __webpack_require__("8e6e");
@@ -3513,9 +3513,6 @@ function _defineProperty(obj, key, value) {
 
   return obj;
 }
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.iterator.js
-var es6_array_iterator = __webpack_require__("cadf");
-
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
 var es6_object_keys = __webpack_require__("456d");
 
@@ -3585,6 +3582,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // CONCATENATED MODULE: ./src/components/utils/DomHandler.js
@@ -4117,6 +4119,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -4124,6 +4132,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = this.style;
+      } else {
+        for (var prop in this.style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -4134,6 +4153,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -4226,10 +4250,9 @@ var Ripple = {
 
 
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 //
 //
@@ -4299,6 +4322,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
     position: {
       type: String,
       default: 'center'
+    },
+    appendTo: {
+      type: String,
+      default: null
     }
   },
   data: function data() {
@@ -4311,20 +4338,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
   },
   documentKeydownListener: null,
   updated: function updated() {
-    this.removeStylesFromMask();
-
     if (this.visible && !this.maskVisible) {
       this.maskVisible = true;
     }
-
-    if (this.modal && this.$refs.mask && !DomHandler_DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
-      DomHandler_DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
-    }
-  },
-  mounted: function mounted() {
-    this.removeStylesFromMask();
   },
   beforeDestroy: function beforeDestroy() {
+    this.restoreAppend();
     this.disableDocumentSettings();
   },
   methods: {
@@ -4338,12 +4357,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
     },
     onEnter: function onEnter() {
       this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
+      this.removeStylesFromMask();
+      this.appendContainer();
+      this.alignOverlay();
       this.$emit('show');
       this.focus();
       this.enableDocumentSettings();
     },
     onBeforeLeave: function onBeforeLeave() {
-      DomHandler_DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
+      DomHandler_DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
     },
     onLeave: function onLeave() {
       this.$emit('hide');
@@ -4448,10 +4470,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
         }
 
         this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
-
-        if (this.dialogClasses) {
-          this.$refs.mask.classList = 'p-dialog-mask' + (this.modal && ' p-component-overlay ') + this.getPositionClass();
-        }
+      }
+    },
+    alignOverlay: function alignOverlay() {
+      if (this.appendTo) {
+        DomHandler_DomHandler.absolutePosition(this.$refs.dialog, this.$refs.mask);
+        this.$refs.dialog.style.minWidth = DomHandler_DomHandler.getOuterWidth(this.$refs.mask) + 'px';
+      } else {
+        DomHandler_DomHandler.relativePosition(this.$refs.dialog, this.$refs.mask);
+      }
+    },
+    appendContainer: function appendContainer() {
+      if (this.appendTo) {
+        if (this.appendTo === 'body') document.body.appendChild(this.$refs.dialog);else document.getElementById(this.appendTo).appendChild(this.$refs.dialog);
+      }
+    },
+    restoreAppend: function 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);
       }
     }
   },
@@ -4460,7 +4496,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       return _objectSpread({}, this.$listeners);
     },
     maskClass: function maskClass() {
-      return ['p-dialog-mask', this.getPositionClass()];
+      return ['p-dialog-mask', {
+        'p-component-overlay p-component-overlay-enter': this.modal
+      }, this.getPositionClass()];
     },
     dialogClass: function dialogClass() {
       return ['p-dialog p-component', {

package/dialog/dialog.umd.js

@@ -3375,7 +3375,7 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;background-color:transparent;-webkit-transition-property:background-color;transition-property:background-color}.p-dialog,.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:90%;-webkit-transform:scale(1);transform:scale(1)}.p-dialog-content{overflow-y:auto}.p-dialog-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.p-dialog-footer,.p-dialog-header{-ms-flex-negative:0;flex-shrink:0}.p-dialog .p-dialog-header-icon,.p-dialog .p-dialog-header-icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.p-dialog .p-dialog-header-icon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-enter-active{-webkit-transition:all .15s cubic-bezier(0,0,.2,1);transition:all .15s cubic-bezier(0,0,.2,1)}.p-dialog-leave-active{-webkit-transition:all .15s cubic-bezier(.4,0,.2,1);transition:all .15s cubic-bezier(.4,0,.2,1)}.p-dialog-enter,.p-dialog-leave-to{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}.p-dialog-mask.p-dialog-mask-leave{background-color:transparent}.p-dialog-bottom .p-dialog,.p-dialog-bottomleft .p-dialog,.p-dialog-bottomright .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top .p-dialog,.p-dialog-topleft .p-dialog,.p-dialog-topright .p-dialog{margin:.75rem;-webkit-transform:translateZ(0);transform:translateZ(0)}.p-dialog-bottom .p-dialog-enter-active,.p-dialog-bottom .p-dialog-leave-active,.p-dialog-bottomleft .p-dialog-enter-active,.p-dialog-bottomleft .p-dialog-leave-active,.p-dialog-bottomright .p-dialog-enter-active,.p-dialog-bottomright .p-dialog-leave-active,.p-dialog-left .p-dialog-enter-active,.p-dialog-left .p-dialog-leave-active,.p-dialog-right .p-dialog-enter-active,.p-dialog-right .p-dialog-leave-active,.p-dialog-top .p-dialog-enter-active,.p-dialog-top .p-dialog-leave-active,.p-dialog-topleft .p-dialog-enter-active,.p-dialog-topleft .p-dialog-leave-active,.p-dialog-topright .p-dialog-enter-active,.p-dialog-topright .p-dialog-leave-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.p-dialog-top .p-dialog-enter,.p-dialog-top .p-dialog-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.p-dialog-bottom .p-dialog-enter,.p-dialog-bottom .p-dialog-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.p-dialog-bottomleft .p-dialog-enter,.p-dialog-bottomleft .p-dialog-leave-to,.p-dialog-left .p-dialog-enter,.p-dialog-left .p-dialog-leave-to,.p-dialog-topleft .p-dialog-enter,.p-dialog-topleft .p-dialog-leave-to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.p-dialog-bottomright .p-dialog-enter,.p-dialog-bottomright .p-dialog-leave-to,.p-dialog-right .p-dialog-enter,.p-dialog-right .p-dialog-leave-to,.p-dialog-topright .p-dialog-enter,.p-dialog-topright .p-dialog-leave-to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.p-dialog-maximized{-webkit-transition:none;transition:none;-webkit-transform:none;transform:none;width:100vw!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.p-dialog-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.p-dialog-top,.p-dialog-topleft{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-topleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-topright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-bottom,.p-dialog-bottomleft{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-dialog-bottomleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-bottomright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-confirm-dialog .p-dialog-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}", ""]);
+exports.push([module.i, ".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}.p-dialog,.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:90%;-webkit-transform:scale(1);transform:scale(1)}.p-dialog-content{overflow-y:auto}.p-dialog-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.p-dialog-footer,.p-dialog-header{-ms-flex-negative:0;flex-shrink:0}.p-dialog .p-dialog-header-icon,.p-dialog .p-dialog-header-icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.p-dialog .p-dialog-header-icon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-enter-active{-webkit-transition:all .15s cubic-bezier(0,0,.2,1);transition:all .15s cubic-bezier(0,0,.2,1)}.p-dialog-leave-active{-webkit-transition:all .15s cubic-bezier(.4,0,.2,1);transition:all .15s cubic-bezier(.4,0,.2,1)}.p-dialog-enter,.p-dialog-leave-to{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}.p-dialog-bottom .p-dialog,.p-dialog-bottomleft .p-dialog,.p-dialog-bottomright .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top .p-dialog,.p-dialog-topleft .p-dialog,.p-dialog-topright .p-dialog{margin:.75rem;-webkit-transform:translateZ(0);transform:translateZ(0)}.p-dialog-bottom .p-dialog-enter-active,.p-dialog-bottom .p-dialog-leave-active,.p-dialog-bottomleft .p-dialog-enter-active,.p-dialog-bottomleft .p-dialog-leave-active,.p-dialog-bottomright .p-dialog-enter-active,.p-dialog-bottomright .p-dialog-leave-active,.p-dialog-left .p-dialog-enter-active,.p-dialog-left .p-dialog-leave-active,.p-dialog-right .p-dialog-enter-active,.p-dialog-right .p-dialog-leave-active,.p-dialog-top .p-dialog-enter-active,.p-dialog-top .p-dialog-leave-active,.p-dialog-topleft .p-dialog-enter-active,.p-dialog-topleft .p-dialog-leave-active,.p-dialog-topright .p-dialog-enter-active,.p-dialog-topright .p-dialog-leave-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.p-dialog-top .p-dialog-enter,.p-dialog-top .p-dialog-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.p-dialog-bottom .p-dialog-enter,.p-dialog-bottom .p-dialog-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.p-dialog-bottomleft .p-dialog-enter,.p-dialog-bottomleft .p-dialog-leave-to,.p-dialog-left .p-dialog-enter,.p-dialog-left .p-dialog-leave-to,.p-dialog-topleft .p-dialog-enter,.p-dialog-topleft .p-dialog-leave-to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.p-dialog-bottomright .p-dialog-enter,.p-dialog-bottomright .p-dialog-leave-to,.p-dialog-right .p-dialog-enter,.p-dialog-right .p-dialog-leave-to,.p-dialog-topright .p-dialog-enter,.p-dialog-topright .p-dialog-leave-to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.p-dialog-maximized{-webkit-transition:none;transition:none;-webkit-transform:none;transform:none;width:100vw!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.p-dialog-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.p-dialog-top,.p-dialog-topleft{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-topleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-topright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.p-dialog-bottom,.p-dialog-bottomleft{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-dialog-bottomleft{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.p-dialog-bottomright{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.p-confirm-dialog .p-dialog-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}", ""]);
 
 // exports
 
@@ -3492,12 +3492,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0538004c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dialog/Dialog.vue?vue&type=template&id=08bb02fc&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dialog/Dialog.vue?vue&type=template&id=c033c13a&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.maskVisible)?_c('div',{ref:"mask",class:_vm.maskClass,on:{"click":_vm.onMaskClick}},[_c('transition',{attrs:{"name":"p-dialog"},on:{"before-enter":_vm.onBeforeEnter,"enter":_vm.onEnter,"before-leave":_vm.onBeforeLeave,"leave":_vm.onLeave,"after-leave":_vm.onAfterLeave,"appear":_vm.onAppear}},[(_vm.visible)?_c('div',_vm._g(_vm._b({ref:"dialog",class:_vm.dialogClass,style:(_vm.dialogStyle),attrs:{"role":"dialog","aria-labelledby":_vm.ariaLabelledById,"aria-modal":_vm.modal}},'div',_vm.$attrs,false),_vm.listeners),[(_vm.showHeader)?_c('div',{staticClass:"p-dialog-header"},[_vm._t("header",function(){return [(_vm.header)?_c('span',{staticClass:"p-dialog-title",attrs:{"id":_vm.ariaLabelledById}},[_vm._v(_vm._s(_vm.header))]):_vm._e()]}),_c('div',{staticClass:"p-dialog-header-icons"},[(_vm.maximizable)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-dialog-header-icon p-dialog-header-maximize p-link",attrs:{"type":"button","tabindex":"-1"},on:{"click":_vm.maximize}},[_c('span',{class:_vm.maximizeIconClass})]):_vm._e(),(_vm.closable)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-dialog-header-icon p-dialog-header-close p-link",attrs:{"aria-label":_vm.ariaCloseLabel,"type":"button","tabindex":"-1"},on:{"click":_vm.close}},[_c('span',{staticClass:"p-dialog-header-close-icon pi pi-times"})]):_vm._e()])],2):_vm._e(),_c('div',{staticClass:"p-dialog-content",style:(_vm.contentStyle)},[_vm._t("default")],2),(_vm.footer || _vm.$slots.footer)?_c('div',{staticClass:"p-dialog-footer"},[_vm._t("footer",function(){return [_vm._v(_vm._s(_vm.footer))]})],2):_vm._e()]):_vm._e()])],1):_vm._e()}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/dialog/Dialog.vue?vue&type=template&id=08bb02fc&
+// CONCATENATED MODULE: ./src/components/dialog/Dialog.vue?vue&type=template&id=c033c13a&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.get-own-property-descriptors.js
 var es7_object_get_own_property_descriptors = __webpack_require__("8e6e");
@@ -3522,9 +3522,6 @@ function _defineProperty(obj, key, value) {
 
   return obj;
 }
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.iterator.js
-var es6_array_iterator = __webpack_require__("cadf");
-
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
 var es6_object_keys = __webpack_require__("456d");
 
@@ -3594,6 +3591,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // CONCATENATED MODULE: ./src/components/utils/DomHandler.js
@@ -4126,6 +4128,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -4133,6 +4141,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = this.style;
+      } else {
+        for (var prop in this.style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -4143,6 +4162,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -4235,10 +4259,9 @@ var Ripple = {
 
 
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 //
 //
@@ -4308,6 +4331,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
     position: {
       type: String,
       default: 'center'
+    },
+    appendTo: {
+      type: String,
+      default: null
     }
   },
   data: function data() {
@@ -4320,20 +4347,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
   },
   documentKeydownListener: null,
   updated: function updated() {
-    this.removeStylesFromMask();
-
     if (this.visible && !this.maskVisible) {
       this.maskVisible = true;
     }
-
-    if (this.modal && this.$refs.mask && !DomHandler_DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
-      DomHandler_DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
-    }
-  },
-  mounted: function mounted() {
-    this.removeStylesFromMask();
   },
   beforeDestroy: function beforeDestroy() {
+    this.restoreAppend();
     this.disableDocumentSettings();
   },
   methods: {
@@ -4347,12 +4366,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
     },
     onEnter: function onEnter() {
       this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
+      this.removeStylesFromMask();
+      this.appendContainer();
+      this.alignOverlay();
       this.$emit('show');
       this.focus();
       this.enableDocumentSettings();
     },
     onBeforeLeave: function onBeforeLeave() {
-      DomHandler_DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
+      DomHandler_DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
     },
     onLeave: function onLeave() {
       this.$emit('hide');
@@ -4457,10 +4479,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
         }
 
         this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
-
-        if (this.dialogClasses) {
-          this.$refs.mask.classList = 'p-dialog-mask' + (this.modal && ' p-component-overlay ') + this.getPositionClass();
-        }
+      }
+    },
+    alignOverlay: function alignOverlay() {
+      if (this.appendTo) {
+        DomHandler_DomHandler.absolutePosition(this.$refs.dialog, this.$refs.mask);
+        this.$refs.dialog.style.minWidth = DomHandler_DomHandler.getOuterWidth(this.$refs.mask) + 'px';
+      } else {
+        DomHandler_DomHandler.relativePosition(this.$refs.dialog, this.$refs.mask);
+      }
+    },
+    appendContainer: function appendContainer() {
+      if (this.appendTo) {
+        if (this.appendTo === 'body') document.body.appendChild(this.$refs.dialog);else document.getElementById(this.appendTo).appendChild(this.$refs.dialog);
+      }
+    },
+    restoreAppend: function 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);
       }
     }
   },
@@ -4469,7 +4505,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       return _objectSpread({}, this.$listeners);
     },
     maskClass: function maskClass() {
-      return ['p-dialog-mask', this.getPositionClass()];
+      return ['p-dialog-mask', {
+        'p-component-overlay p-component-overlay-enter': this.modal
+      }, this.getPositionClass()];
     },
     dialogClass: function dialogClass() {
       return ['p-dialog p-component', {