primevue 3.34.0 → 3.35.0

package/dialog/BaseDialog.vue

@@ -3,136 +3,138 @@ 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;
+@layer primevue {
+    .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;
+    }
 }
 `;
 
@@ -247,6 +249,10 @@ export default {
             type: Boolean,
             default: true
         },
+        blockScroll: {
+            type: Boolean,
+            default: false
+        },
         baseZIndex: {
             type: Number,
             default: 0

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) {
@@ -202,19 +205,23 @@ export default {
             if (!this.modal) {
                 if (this.maximized) {
                     DomHandler.addClass(document.body, 'p-overflow-hidden');
+                    document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
                 } else {
                     DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    document.body.style.removeProperty('--scrollbar-width');
                 }
             }
         },
         enableDocumentSettings() {
-            if (this.modal || (this.maximizable && this.maximized)) {
+            if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         unbindDocumentState() {
-            if (this.modal || (this.maximizable && this.maximized)) {
+            if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         onKeyDown(event) {
@@ -391,9 +398,6 @@ export default {
         },
         attributeSelector() {
             return UniqueComponentId();
-        },
-        contentStyleClass() {
-            return ['p-dialog-content', this.contentClass];
         }
     },
     directives: {

package/dialog/dialog.cjs.js

@@ -21,7 +21,7 @@ var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-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";
+var styles = "\n@layer primevue {\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}\n";
 
 /* Position */
 var inlineStyles = {
@@ -138,6 +138,10 @@ var script$1 = {
       type: Boolean,
       "default": true
     },
+    blockScroll: {
+      type: Boolean,
+      "default": false
+    },
     baseZIndex: {
       type: Number,
       "default": 0
@@ -320,7 +324,9 @@ var script = {
         }
       }
       if (focusTarget) {
-        utils.DomHandler.focus(focusTarget);
+        utils.DomHandler.focus(focusTarget, {
+          focusVisible: true
+        });
       }
     },
     maximize: function maximize(event) {
@@ -334,19 +340,23 @@ var script = {
       if (!this.modal) {
         if (this.maximized) {
           utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+          document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
         } else {
           utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+          document.body.style.removeProperty('--scrollbar-width');
         }
       }
     },
     enableDocumentSettings: function enableDocumentSettings() {
-      if (this.modal || this.maximizable && this.maximized) {
+      if (this.modal || !this.modal && this.blockScroll || this.maximizable && this.maximized) {
         utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+        document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
       }
     },
     unbindDocumentState: function unbindDocumentState() {
-      if (this.modal || this.maximizable && this.maximized) {
+      if (this.modal || !this.modal && this.blockScroll || this.maximizable && this.maximized) {
         utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        document.body.style.removeProperty('--scrollbar-width');
       }
     },
     onKeyDown: function onKeyDown(event) {
@@ -507,9 +517,6 @@ var script = {
     },
     attributeSelector: function attributeSelector() {
       return utils.UniqueComponentId();
-    },
-    contentStyleClass: function contentStyleClass() {
-      return ['p-dialog-content', this.contentClass];
     }
   },
   directives: {
@@ -571,7 +578,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 +650,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)];
         }),