primevue 3.34.1 → 3.36.0

package/deferredcontent/deferredcontent.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.deferredcontent=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"DeferredContent",extends:n(e).default,emits:["load"],data:function(){return{loaded:!1}},mounted:function(){this.loaded||(this.shouldLoad()?this.load():this.bindScrollListener())},beforeUnmount:function(){this.unbindScrollListener()},methods:{bindScrollListener:function(){var e=this;this.documentScrollListener=function(){e.shouldLoad()&&(e.load(),e.unbindScrollListener())},window.addEventListener("scroll",this.documentScrollListener)},unbindScrollListener:function(){this.documentScrollListener&&(window.removeEventListener("scroll",this.documentScrollListener),this.documentScrollListener=null)},shouldLoad:function(){if(this.loaded)return!1;var e=this.$refs.container.getBoundingClientRect();return document.documentElement.clientHeight>=e.top},load:function(e){this.loaded=!0,this.$emit("load",e)}}};return o.render=function(e,n,o,i,r,d){return t.openBlock(),t.createElementBlock("div",t.mergeProps({ref:"container"},e.ptm("root")),[r.loaded?t.renderSlot(e.$slots,"default",{key:0}):t.createCommentVNode("",!0)],16)},o}(primevue.basecomponent,Vue);
+this.primevue=this.primevue||{},this.primevue.deferredcontent=function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"DeferredContent",extends:o(e).default,emits:["load"],style:o(t).default,data:function(){return{loaded:!1}},mounted:function(){this.loaded||(this.shouldLoad()?this.load():this.bindScrollListener())},beforeUnmount:function(){this.unbindScrollListener()},methods:{bindScrollListener:function(){var e=this;this.documentScrollListener=function(){e.shouldLoad()&&(e.load(),e.unbindScrollListener())},window.addEventListener("scroll",this.documentScrollListener)},unbindScrollListener:function(){this.documentScrollListener&&(window.removeEventListener("scroll",this.documentScrollListener),this.documentScrollListener=null)},shouldLoad:function(){if(this.loaded)return!1;var e=this.$refs.container.getBoundingClientRect();return document.documentElement.clientHeight>=e.top},load:function(e){this.loaded=!0,this.$emit("load",e)}}};return r.render=function(e,t,o,r,i,d){return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container"},e.ptm("root")),[i.loaded?n.renderSlot(e.$slots,"default",{key:0}):n.createCommentVNode("",!0)],16)},r}(primevue.basecomponent,primevue.deferredcontent.style,Vue);

package/deferredcontent/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./deferredcontent.cjs.js",
-  "module": "./deferredcontent.esm.js",
-  "unpkg": "./deferredcontent.min.js",
-  "types": "./DeferredContent.d.ts",
-  "browser": {
-    "./sfc": "./DeferredContent.vue"
-  }
-}
+    "main": "./deferredcontent.cjs.js",
+    "module": "./deferredcontent.esm.js",
+    "unpkg": "./deferredcontent.min.js",
+    "types": "./DeferredContent.d.ts",
+    "browser": {
+        "./sfc": "./DeferredContent.vue"
+    }
+}

package/deferredcontent/style/DeferredContentStyle.d.ts

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface DeferredContentStyle extends BaseStyle {}

package/deferredcontent/style/deferredcontentstyle.cjs.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var DeferredContentStyle = {};
+
+module.exports = DeferredContentStyle;

package/deferredcontent/style/deferredcontentstyle.cjs.min.js

@@ -0,0 +1 @@
+"use strict";module.exports={};

package/deferredcontent/style/deferredcontentstyle.esm.js

@@ -0,0 +1,3 @@
+var DeferredContentStyle = {};
+
+export { DeferredContentStyle as default };

package/deferredcontent/style/deferredcontentstyle.esm.min.js

@@ -0,0 +1 @@
+var a={};export{a as default};

package/deferredcontent/style/deferredcontentstyle.js

@@ -0,0 +1,10 @@
+this.primevue = this.primevue || {};
+this.primevue.deferredcontent = this.primevue.deferredcontent || {};
+this.primevue.deferredcontent.style = (function () {
+	'use strict';
+
+	var DeferredContentStyle = {};
+
+	return DeferredContentStyle;
+
+})();

package/deferredcontent/style/deferredcontentstyle.min.js

@@ -0,0 +1 @@
+this.primevue=this.primevue||{},this.primevue.deferredcontent=this.primevue.deferredcontent||{},this.primevue.deferredcontent.style=function(){"use strict";return{}}();

package/deferredcontent/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./deferredcontentstyle.cjs.js",
+    "module": "./deferredcontentstyle.esm.js",
+    "unpkg": "./deferredcontentstyle.min.js",
+    "types": "./DeferredContentStyle.d.ts"
+}

package/dialog/BaseDialog.vue

@@ -1,195 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.p-dialog-mask.p-component-overlay {
-    pointer-events: auto;
-}
-
-.p-dialog {
-    max-height: 90%;
-    transform: scale(1);
-}
-
-.p-dialog-content {
-    overflow-y: auto;
-}
-
-.p-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-}
-
-.p-dialog-footer {
-    flex-shrink: 0;
-}
-
-.p-dialog .p-dialog-header-icons {
-    display: flex;
-    align-items: center;
-}
-
-.p-dialog .p-dialog-header-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Fluid */
-.p-fluid .p-dialog-footer .p-button {
-    width: auto;
-}
-
-/* Animation */
-/* Center */
-.p-dialog-enter-active {
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-.p-dialog-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.p-dialog-enter-from,
-.p-dialog-leave-to {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-/* Top, Bottom, Left, Right, Top* and Bottom* */
-.p-dialog-top .p-dialog,
-.p-dialog-bottom .p-dialog,
-.p-dialog-left .p-dialog,
-.p-dialog-right .p-dialog,
-.p-dialog-topleft .p-dialog,
-.p-dialog-topright .p-dialog,
-.p-dialog-bottomleft .p-dialog,
-.p-dialog-bottomright .p-dialog {
-    margin: 0.75rem;
-    transform: translate3d(0px, 0px, 0px);
-}
-.p-dialog-top .p-dialog-enter-active,
-.p-dialog-top .p-dialog-leave-active,
-.p-dialog-bottom .p-dialog-enter-active,
-.p-dialog-bottom .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-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,
-.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 {
-    transition: all 0.3s ease-out;
-}
-.p-dialog-top .p-dialog-enter-from,
-.p-dialog-top .p-dialog-leave-to {
-    transform: translate3d(0px, -100%, 0px);
-}
-.p-dialog-bottom .p-dialog-enter-from,
-.p-dialog-bottom .p-dialog-leave-to {
-    transform: translate3d(0px, 100%, 0px);
-}
-.p-dialog-left .p-dialog-enter-from,
-.p-dialog-left .p-dialog-leave-to,
-.p-dialog-topleft .p-dialog-enter-from,
-.p-dialog-topleft .p-dialog-leave-to,
-.p-dialog-bottomleft .p-dialog-enter-from,
-.p-dialog-bottomleft .p-dialog-leave-to {
-    transform: translate3d(-100%, 0px, 0px);
-}
-.p-dialog-right .p-dialog-enter-from,
-.p-dialog-right .p-dialog-leave-to,
-.p-dialog-topright .p-dialog-enter-from,
-.p-dialog-topright .p-dialog-leave-to,
-.p-dialog-bottomright .p-dialog-enter-from,
-.p-dialog-bottomright .p-dialog-leave-to {
-    transform: translate3d(100%, 0px, 0px);
-}
-
-/* Maximize */
-.p-dialog-maximized {
-    -webkit-transition: none;
-    transition: none;
-    transform: none;
-    width: 100vw !important;
-    height: 100vh !important;
-    top: 0px !important;
-    left: 0px !important;
-    max-height: 100%;
-    height: 100%;
-}
-.p-dialog-maximized .p-dialog-content {
-    flex-grow: 1;
-}
-
-.p-confirm-dialog .p-dialog-content {
-    display: flex;
-    align-items: center;
-}
-`;
-
-/* Position */
-const inlineStyles = {
-    mask: ({ position, modal }) => ({
-        position: 'fixed',
-        height: '100%',
-        width: '100%',
-        left: 0,
-        top: 0,
-        display: 'flex',
-        justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
-        alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
-        pointerEvents: modal ? 'auto' : 'none'
-    }),
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        pointerEvents: 'auto'
-    }
-};
-
-const classes = {
-    mask: ({ props }) => {
-        const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-        const pos = positions.find((item) => item === props.position);
-
-        return [
-            'p-dialog-mask',
-            {
-                'p-component-overlay p-component-overlay-enter': props.modal
-            },
-            pos ? `p-dialog-${pos}` : ''
-        ];
-    },
-    root: ({ props, instance }) => [
-        'p-dialog p-component',
-        {
-            'p-dialog-rtl': props.rtl,
-            'p-dialog-maximized': props.maximizable && instance.maximized,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    header: 'p-dialog-header',
-    headerTitle: 'p-dialog-title',
-    headerIcons: 'p-dialog-header-icons',
-    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
-    maximizableIcon: 'p-dialog-header-maximize-icon',
-    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
-    closeButtonIcon: 'p-dialog-header-close-icon',
-    content: 'p-dialog-content',
-    footer: 'p-dialog-footer'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
+import DialogStyle from 'primevue/dialog/style';
 
 export default {
     name: 'BaseDialog',
@@ -247,6 +58,10 @@ export default {
             type: Boolean,
             default: true
         },
+        blockScroll: {
+            type: Boolean,
+            default: false
+        },
         baseZIndex: {
             type: Number,
             default: 0
@@ -301,11 +116,7 @@ export default {
         },
         _instance: null
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: DialogStyle,
     provide() {
         return {
             $parentInstance: this

package/dialog/Dialog.d.ts

@@ -202,6 +202,11 @@ export interface DialogProps {
      * @defaultValue true
      */
     showHeader?: boolean | undefined;
+    /**
+     * Whether background scroll should be blocked when dialog is visible.
+     * @defaultValue false
+     */
+    blockScroll?: boolean | undefined;
     /**
      * Base zIndex value to use in layering.
      * @defaultValue 0
@@ -327,6 +332,21 @@ export interface DialogSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close dialog function.
+         */
+        onClose: () => void;
+        /**
+         * Maximize/minimize dialog function.
+         * @param {Event} event - Browser event
+         */
+        onMaximize: (event: Event) => void;
+    }): VNode[];
 }
 
 /**

package/dialog/Dialog.vue

@@ -3,51 +3,54 @@
         <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
-                    <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
-                        <slot name="header" :class="cx('headerTitle')">
-                            <span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
-                        </slot>
-                        <div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
-                            <button
-                                v-if="maximizable"
-                                :ref="maximizableRef"
-                                v-ripple
-                                :autofocus="focusableMax"
-                                :class="cx('maximizableButton')"
-                                @click="maximize"
-                                type="button"
-                                :tabindex="maximizable ? '0' : '-1'"
-                                v-bind="ptm('maximizableButton')"
-                                data-pc-group-section="headericon"
-                            >
-                                <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
-                                    <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
-                                </slot>
-                            </button>
-                            <button
-                                v-if="closable"
-                                :ref="closeButtonRef"
-                                v-ripple
-                                :autofocus="focusableClose"
-                                :class="cx('closeButton')"
-                                @click="close"
-                                :aria-label="closeAriaLabel"
-                                type="button"
-                                v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
-                                data-pc-group-section="headericon"
-                            >
-                                <slot name="closeicon" :class="cx('closeButtonIcon')">
-                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
-                                </slot>
-                            </button>
+                    <slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)"></slot>
+                    <template v-else>
+                        <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
+                            <slot name="header" :class="cx('headerTitle')">
+                                <span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
+                            </slot>
+                            <div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
+                                <button
+                                    v-if="maximizable"
+                                    :ref="maximizableRef"
+                                    v-ripple
+                                    :autofocus="focusableMax"
+                                    :class="cx('maximizableButton')"
+                                    @click="maximize"
+                                    type="button"
+                                    :tabindex="maximizable ? '0' : '-1'"
+                                    v-bind="ptm('maximizableButton')"
+                                    data-pc-group-section="headericon"
+                                >
+                                    <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
+                                        <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
+                                    </slot>
+                                </button>
+                                <button
+                                    v-if="closable"
+                                    :ref="closeButtonRef"
+                                    v-ripple
+                                    :autofocus="focusableClose"
+                                    :class="cx('closeButton')"
+                                    @click="close"
+                                    :aria-label="closeAriaLabel"
+                                    type="button"
+                                    v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
+                                    data-pc-group-section="headericon"
+                                >
+                                    <slot name="closeicon" :class="cx('closeButtonIcon')">
+                                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
+                                    </slot>
+                                </button>
+                            </div>
                         </div>
-                    </div>
-                    <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
-                        <slot></slot>
-                    </div>
-                    <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
-                        <slot name="footer">{{ footer }}</slot>
-                    </div>
+                        <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
+                            <slot></slot>
+                        </div>
+                        <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
+                            <slot name="footer">{{ footer }}</slot>
+                        </div>
+                    </template>
                 </div>
             </transition>
         </div>
@@ -187,7 +190,7 @@ export default {
             }
 
             if (focusTarget) {
-                DomHandler.focus(focusTarget);
+                DomHandler.focus(focusTarget, { focusVisible: true });
             }
         },
         maximize(event) {
@@ -200,21 +203,17 @@ export default {
             }
 
             if (!this.modal) {
-                if (this.maximized) {
-                    DomHandler.addClass(document.body, 'p-overflow-hidden');
-                } else {
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                }
+                this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
             }
         },
         enableDocumentSettings() {
-            if (this.modal || (this.maximizable && this.maximized)) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
+            if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
+                DomHandler.blockBodyScroll();
             }
         },
         unbindDocumentState() {
-            if (this.modal || (this.maximizable && this.maximized)) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
+                DomHandler.unblockBodyScroll();
             }
         },
         onKeyDown(event) {
@@ -391,9 +390,6 @@ export default {
         },
         attributeSelector() {
             return UniqueComponentId();
-        },
-        contentStyleClass() {
-            return ['p-dialog-content', this.contentClass];
         }
     },
     directives: {

package/dialog/dialog.cjs.js

@@ -9,7 +9,7 @@ var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
 var vue = require('vue');
 var BaseComponent = require('primevue/basecomponent');
-var usestyle = require('primevue/usestyle');
+var DialogStyle = require('primevue/dialog/style');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,68 +20,8 @@ var WindowMinimizeIcon__default = /*#__PURE__*/_interopDefaultLegacy(WindowMinim
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var DialogStyle__default = /*#__PURE__*/_interopDefaultLegacy(DialogStyle);
 
-var styles = "\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n\n.p-dialog {\n    max-height: 90%;\n    transform: scale(1);\n}\n\n.p-dialog-content {\n    overflow-y: auto;\n}\n\n.p-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-shrink: 0;\n}\n\n.p-dialog-footer {\n    flex-shrink: 0;\n}\n\n.p-dialog .p-dialog-header-icons {\n    display: flex;\n    align-items: center;\n}\n\n.p-dialog .p-dialog-header-icon {\n    display: flex;\n    align-items: 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    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\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: 0.75rem;\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    transition: all 0.3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\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    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    transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: 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    flex-grow: 1;\n}\n\n.p-confirm-dialog .p-dialog-content {\n    display: flex;\n    align-items: center;\n}\n";
-
-/* Position */
-var inlineStyles = {
-  mask: function mask(_ref) {
-    var position = _ref.position,
-      modal = _ref.modal;
-    return {
-      position: 'fixed',
-      height: '100%',
-      width: '100%',
-      left: 0,
-      top: 0,
-      display: 'flex',
-      justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
-      alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
-      pointerEvents: modal ? 'auto' : 'none'
-    };
-  },
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    pointerEvents: 'auto'
-  }
-};
-var classes = {
-  mask: function mask(_ref2) {
-    var props = _ref2.props;
-    var positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-    var pos = positions.find(function (item) {
-      return item === props.position;
-    });
-    return ['p-dialog-mask', {
-      'p-component-overlay p-component-overlay-enter': props.modal
-    }, pos ? "p-dialog-".concat(pos) : ''];
-  },
-  root: function root(_ref3) {
-    var props = _ref3.props,
-      instance = _ref3.instance;
-    return ['p-dialog p-component', {
-      'p-dialog-rtl': props.rtl,
-      'p-dialog-maximized': props.maximizable && instance.maximized,
-      'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-      'p-ripple-disabled': instance.$primevue.config.ripple === false
-    }];
-  },
-  header: 'p-dialog-header',
-  headerTitle: 'p-dialog-title',
-  headerIcons: 'p-dialog-header-icons',
-  maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
-  maximizableIcon: 'p-dialog-header-maximize-icon',
-  closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
-  closeButtonIcon: 'p-dialog-header-close-icon',
-  content: 'p-dialog-content',
-  footer: 'p-dialog-footer'
-};
-var _useStyle = usestyle.useStyle(styles, {
-    name: 'dialog',
-    manual: true
-  }),
-  loadStyle = _useStyle.load;
 var script$1 = {
   name: 'BaseDialog',
   "extends": BaseComponent__default["default"],
@@ -138,6 +78,10 @@ var script$1 = {
       type: Boolean,
       "default": true
     },
+    blockScroll: {
+      type: Boolean,
+      "default": false
+    },
     baseZIndex: {
       type: Number,
       "default": 0
@@ -192,11 +136,7 @@ var script$1 = {
     },
     _instance: null
   },
-  css: {
-    classes: classes,
-    inlineStyles: inlineStyles,
-    loadStyle: loadStyle
-  },
+  style: DialogStyle__default["default"],
   provide: function provide() {
     return {
       $parentInstance: this
@@ -320,7 +260,9 @@ var script = {
         }
       }
       if (focusTarget) {
-        utils.DomHandler.focus(focusTarget);
+        utils.DomHandler.focus(focusTarget, {
+          focusVisible: true
+        });
       }
     },
     maximize: function maximize(event) {
@@ -332,21 +274,17 @@ var script = {
         this.$emit('maximize', event);
       }
       if (!this.modal) {
-        if (this.maximized) {
-          utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
-        } else {
-          utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
-        }
+        this.maximized ? utils.DomHandler.blockBodyScroll() : utils.DomHandler.unblockBodyScroll();
       }
     },
     enableDocumentSettings: function enableDocumentSettings() {
-      if (this.modal || this.maximizable && this.maximized) {
-        utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+      if (this.modal || !this.modal && this.blockScroll || this.maximizable && this.maximized) {
+        utils.DomHandler.blockBodyScroll();
       }
     },
     unbindDocumentState: function unbindDocumentState() {
-      if (this.modal || this.maximizable && this.maximized) {
-        utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+      if (this.modal || !this.modal && this.blockScroll || this.maximizable && this.maximized) {
+        utils.DomHandler.unblockBodyScroll();
       }
     },
     onKeyDown: function onKeyDown(event) {
@@ -507,9 +445,6 @@ var script = {
     },
     attributeSelector: function attributeSelector() {
       return utils.UniqueComponentId();
-    },
-    contentStyleClass: function contentStyleClass() {
-      return ['p-dialog-content', this.contentClass];
     }
   },
   directives: {
@@ -571,7 +506,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             role: "dialog",
             "aria-labelledby": $options.ariaLabelledById,
             "aria-modal": _ctx.modal
-          }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [_ctx.showHeader ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [_ctx.$slots.container ? vue.renderSlot(_ctx.$slots, "container", {
+            key: 0,
+            onClose: $options.close,
+            onMaximize: function onMaximize(event) {
+              return $options.maximize(event);
+            }
+          }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 1
+          }, [_ctx.showHeader ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
             ref: $options.headerContainerRef,
             "class": _ctx.cx('header'),
@@ -635,7 +578,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": _ctx.cx('footer')
           }, _ctx.ptm('footer')), [vue.renderSlot(_ctx.$slots, "footer", {}, function () {
             return [vue.createTextVNode(vue.toDisplayString(_ctx.footer), 1)];
-          })], 16)) : vue.createCommentVNode("", true)], 16, _hoisted_1)), [[_directive_focustrap, {
+          })], 16)) : vue.createCommentVNode("", true)], 64))], 16, _hoisted_1)), [[_directive_focustrap, {
             disabled: !_ctx.modal
           }]]) : vue.createCommentVNode("", true)];
         }),