primevue 3.34.1 → 3.35.0

package/scrolltop/scrolltop.js

@@ -7,7 +7,7 @@ this.primevue.scrolltop = (function (ChevronUpIcon, utils, BaseComponent, usesty
     var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
     var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    var styles = "\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-scrolltop-sticky {\n    position: sticky;\n}\n\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n";
+    var styles = "\n@layer primevue {\n    .p-scrolltop {\n        position: fixed;\n        bottom: 20px;\n        right: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-scrolltop-sticky {\n        position: sticky;\n    }\n    \n    .p-scrolltop-sticky.p-link {\n        margin-left: auto;\n    }\n    \n    .p-scrolltop-enter-from {\n        opacity: 0;\n    }\n    \n    .p-scrolltop-enter-active {\n        transition: opacity 0.15s;\n    }\n    \n    .p-scrolltop.p-scrolltop-leave-to {\n        opacity: 0;\n    }\n    \n    .p-scrolltop-leave-active {\n        transition: opacity 0.15s;\n    }\n}\n";
     var classes = {
       root: function root(_ref) {
         var props = _ref.props;

package/scrolltop/scrolltop.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.scrolltop=function(e,n,t,o,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),s=r(t),c=o.useStyle("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-scrolltop-sticky {\n    position: sticky;\n}\n\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n",{name:"scrolltop",manual:!0}),a={name:"ScrollTop",extends:{name:"BaseScrollTop",extends:s.default,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:void 0},behavior:{type:String,default:"smooth"}},css:{classes:{root:function(e){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==e.props.target}]},icon:"p-scrolltop-icon"},loadStyle:c.load},provide:function(){return{$parentInstance:this}}},scrollListener:null,container:null,data:function(){return{visible:!1}},mounted:function(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount:function(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(n.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick:function(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility:function(e){this.visible=e>this.threshold},bindParentScrollListener:function(){var e=this;this.scrollListener=function(){e.checkVisibility(e.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener:function(){var e=this;this.scrollListener=function(){e.checkVisibility(n.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener:function(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener:function(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter:function(e){n.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave:function(e){n.ZIndexUtils.clear(e)},containerRef:function(e){this.container=e}},computed:{scrollTopAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}},components:{ChevronUpIcon:l.default}},p=["aria-label"];return a.render=function(e,n,t,o,r,l){return i.openBlock(),i.createBlock(i.Transition,i.mergeProps({name:"p-scrolltop",appear:"",onEnter:l.onEnter,onAfterLeave:l.onAfterLeave},e.ptm("transition")),{default:i.withCtx((function(){return[r.visible?(i.openBlock(),i.createElementBlock("button",i.mergeProps({key:0,ref:l.containerRef,class:e.cx("root"),onClick:n[0]||(n[0]=function(){return l.onClick&&l.onClick.apply(l,arguments)}),type:"button","aria-label":l.scrollTopAriaLabel},e.ptm("root"),{"data-pc-name":"scrolltop"}),[i.renderSlot(e.$slots,"icon",{class:i.normalizeClass(e.cx("icon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.icon?"span":"ChevronUpIcon"),i.mergeProps({class:[e.cx("icon"),e.icon]},e.ptm("icon")),null,16,["class"]))]}))],16,p)):i.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterLeave"])},a}(primevue.icons.chevronup,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.scrolltop=function(e,n,t,o,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),s=r(t),c=o.useStyle("\n@layer primevue {\n    .p-scrolltop {\n        position: fixed;\n        bottom: 20px;\n        right: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-scrolltop-sticky {\n        position: sticky;\n    }\n    \n    .p-scrolltop-sticky.p-link {\n        margin-left: auto;\n    }\n    \n    .p-scrolltop-enter-from {\n        opacity: 0;\n    }\n    \n    .p-scrolltop-enter-active {\n        transition: opacity 0.15s;\n    }\n    \n    .p-scrolltop.p-scrolltop-leave-to {\n        opacity: 0;\n    }\n    \n    .p-scrolltop-leave-active {\n        transition: opacity 0.15s;\n    }\n}\n",{name:"scrolltop",manual:!0}),a={name:"ScrollTop",extends:{name:"BaseScrollTop",extends:s.default,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:void 0},behavior:{type:String,default:"smooth"}},css:{classes:{root:function(e){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==e.props.target}]},icon:"p-scrolltop-icon"},loadStyle:c.load},provide:function(){return{$parentInstance:this}}},scrollListener:null,container:null,data:function(){return{visible:!1}},mounted:function(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount:function(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(n.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick:function(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility:function(e){this.visible=e>this.threshold},bindParentScrollListener:function(){var e=this;this.scrollListener=function(){e.checkVisibility(e.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener:function(){var e=this;this.scrollListener=function(){e.checkVisibility(n.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener:function(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener:function(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter:function(e){n.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave:function(e){n.ZIndexUtils.clear(e)},containerRef:function(e){this.container=e}},computed:{scrollTopAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}},components:{ChevronUpIcon:l.default}},p=["aria-label"];return a.render=function(e,n,t,o,r,l){return i.openBlock(),i.createBlock(i.Transition,i.mergeProps({name:"p-scrolltop",appear:"",onEnter:l.onEnter,onAfterLeave:l.onAfterLeave},e.ptm("transition")),{default:i.withCtx((function(){return[r.visible?(i.openBlock(),i.createElementBlock("button",i.mergeProps({key:0,ref:l.containerRef,class:e.cx("root"),onClick:n[0]||(n[0]=function(){return l.onClick&&l.onClick.apply(l,arguments)}),type:"button","aria-label":l.scrollTopAriaLabel},e.ptm("root"),{"data-pc-name":"scrolltop"}),[i.renderSlot(e.$slots,"icon",{class:i.normalizeClass(e.cx("icon"))},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.icon?"span":"ChevronUpIcon"),i.mergeProps({class:[e.cx("icon"),e.icon]},e.ptm("icon")),null,16,["class"]))]}))],16,p)):i.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterLeave"])},a}(primevue.icons.chevronup,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/sidebar/BaseSidebar.vue

@@ -3,152 +3,154 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-.p-sidebar-mask {
-    display: none;
-    pointer-events: none;
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-sidebar-mask.p-component-overlay {
-    pointer-events: auto;
-}
-
-.p-sidebar-visible {
-    display: flex;
-}
-
-.p-sidebar {
-    display: flex;
-    flex-direction: column;
-    pointer-events: auto;
-    transform: translate3d(0px, 0px, 0px);
-    position: relative;
-    transition: transform 0.3s;
-}
-
-.p-sidebar-content {
-    overflow-y: auto;
-    flex-grow: 1;
-}
-
-.p-sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-shrink: 0;
-}
-
-.p-sidebar-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-sidebar-full .p-sidebar {
-    transition: none;
-    transform: none;
-    width: 100vw !important;
-    height: 100vh !important;
-    max-height: 100%;
-    top: 0px !important;
-    left: 0px !important;
-}
-
-/* Animation */
-/* Center */
-.p-sidebar-left .p-sidebar-enter-from,
-.p-sidebar-left .p-sidebar-leave-to {
-    transform: translateX(-100%);
-}
-.p-sidebar-right .p-sidebar-enter-from,
-.p-sidebar-right .p-sidebar-leave-to {
-    transform: translateX(100%);
-}
-.p-sidebar-top .p-sidebar-enter-from,
-.p-sidebar-top .p-sidebar-leave-to {
-    transform: translateY(-100%);
-}
-.p-sidebar-bottom .p-sidebar-enter-from,
-.p-sidebar-bottom .p-sidebar-leave-to {
-    transform: translateY(100%);
-}
-.p-sidebar-full .p-sidebar-enter-from,
-.p-sidebar-full .p-sidebar-leave-to {
-    opacity: 0;
-}
-.p-sidebar-full .p-sidebar-enter-active,
-.p-sidebar-full .p-sidebar-leave-active {
-    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-/* Size */
-.p-sidebar-left .p-sidebar {
-    width: 20rem;
-    height: 100%;
-}
-
-.p-sidebar-right .p-sidebar {
-    width: 20rem;
-    height: 100%;
-}
-
-.p-sidebar-top .p-sidebar {
-    height: 10rem;
-    width: 100%;
-}
-
-.p-sidebar-bottom .p-sidebar {
-    height: 10rem;
-    width: 100%;
-}
-
-.p-sidebar-left .p-sidebar-sm,
-.p-sidebar-right .p-sidebar-sm {
-    width: 20rem;
-}
-
-.p-sidebar-left .p-sidebar-md,
-.p-sidebar-right .p-sidebar-md {
-    width: 40rem;
-}
-
-.p-sidebar-left .p-sidebar-lg,
-.p-sidebar-right .p-sidebar-lg {
-    width: 60rem;
-}
-
-.p-sidebar-top .p-sidebar-sm,
-.p-sidebar-bottom .p-sidebar-sm {
-    height: 10rem;
-}
-
-.p-sidebar-top .p-sidebar-md,
-.p-sidebar-bottom .p-sidebar-md {
-    height: 20rem;
-}
-
-.p-sidebar-top .p-sidebar-lg,
-.p-sidebar-bottom .p-sidebar-lg {
-    height: 30rem;
-}
-
-.p-sidebar-left .p-sidebar-content,
-.p-sidebar-right .p-sidebar-content,
-.p-sidebar-top .p-sidebar-content,
-.p-sidebar-bottom .p-sidebar-content {
-    width: 100%;
-    height: 100%;
-}
-
-@media screen and (max-width: 64em) {
-    .p-sidebar-left .p-sidebar-lg,
+@layer primevue {
+    .p-sidebar-mask {
+        display: none;
+        pointer-events: none;
+        background-color: transparent;
+        transition-property: background-color;
+    }
+    
+    .p-sidebar-mask.p-component-overlay {
+        pointer-events: auto;
+    }
+    
+    .p-sidebar-visible {
+        display: flex;
+    }
+    
+    .p-sidebar {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        transform: translate3d(0px, 0px, 0px);
+        position: relative;
+        transition: transform 0.3s;
+    }
+    
+    .p-sidebar-content {
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+    
+    .p-sidebar-header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+    }
+    
+    .p-sidebar-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-sidebar-full .p-sidebar {
+        transition: none;
+        transform: none;
+        width: 100vw !important;
+        height: 100vh !important;
+        max-height: 100%;
+        top: 0px !important;
+        left: 0px !important;
+    }
+    
+    /* Animation */
+    /* Center */
+    .p-sidebar-left .p-sidebar-enter-from,
+    .p-sidebar-left .p-sidebar-leave-to {
+        transform: translateX(-100%);
+    }
+    .p-sidebar-right .p-sidebar-enter-from,
+    .p-sidebar-right .p-sidebar-leave-to {
+        transform: translateX(100%);
+    }
+    .p-sidebar-top .p-sidebar-enter-from,
+    .p-sidebar-top .p-sidebar-leave-to {
+        transform: translateY(-100%);
+    }
+    .p-sidebar-bottom .p-sidebar-enter-from,
+    .p-sidebar-bottom .p-sidebar-leave-to {
+        transform: translateY(100%);
+    }
+    .p-sidebar-full .p-sidebar-enter-from,
+    .p-sidebar-full .p-sidebar-leave-to {
+        opacity: 0;
+    }
+    .p-sidebar-full .p-sidebar-enter-active,
+    .p-sidebar-full .p-sidebar-leave-active {
+        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+    
+    /* Size */
+    .p-sidebar-left .p-sidebar {
+        width: 20rem;
+        height: 100%;
+    }
+    
+    .p-sidebar-right .p-sidebar {
+        width: 20rem;
+        height: 100%;
+    }
+    
+    .p-sidebar-top .p-sidebar {
+        height: 10rem;
+        width: 100%;
+    }
+    
+    .p-sidebar-bottom .p-sidebar {
+        height: 10rem;
+        width: 100%;
+    }
+    
+    .p-sidebar-left .p-sidebar-sm,
+    .p-sidebar-right .p-sidebar-sm {
+        width: 20rem;
+    }
+    
     .p-sidebar-left .p-sidebar-md,
-    .p-sidebar-right .p-sidebar-lg,
     .p-sidebar-right .p-sidebar-md {
-        width: 20rem;
+        width: 40rem;
+    }
+    
+    .p-sidebar-left .p-sidebar-lg,
+    .p-sidebar-right .p-sidebar-lg {
+        width: 60rem;
+    }
+    
+    .p-sidebar-top .p-sidebar-sm,
+    .p-sidebar-bottom .p-sidebar-sm {
+        height: 10rem;
+    }
+    
+    .p-sidebar-top .p-sidebar-md,
+    .p-sidebar-bottom .p-sidebar-md {
+        height: 20rem;
+    }
+    
+    .p-sidebar-top .p-sidebar-lg,
+    .p-sidebar-bottom .p-sidebar-lg {
+        height: 30rem;
+    }
+    
+    .p-sidebar-left .p-sidebar-content,
+    .p-sidebar-right .p-sidebar-content,
+    .p-sidebar-top .p-sidebar-content,
+    .p-sidebar-bottom .p-sidebar-content {
+        width: 100%;
+        height: 100%;
+    }
+    
+    @media screen and (max-width: 64em) {
+        .p-sidebar-left .p-sidebar-lg,
+        .p-sidebar-left .p-sidebar-md,
+        .p-sidebar-right .p-sidebar-lg,
+        .p-sidebar-right .p-sidebar-md {
+            width: 20rem;
+        }
     }
 }
 `;

package/sidebar/Sidebar.d.ts

@@ -188,6 +188,16 @@ export interface SidebarSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close sidebar function.
+         */
+        onClose: () => void;
+    }): VNode[];
 }
 
 /**

package/sidebar/Sidebar.vue

@@ -3,19 +3,22 @@
         <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
             <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
-                    <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
-                        <div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">
-                            <slot name="header"></slot>
+                    <slot v-if="$slots.container" name="container" :onClose="hide"></slot>
+                    <template v-else>
+                        <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
+                            <div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">
+                                <slot name="header"></slot>
+                            </div>
+                            <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')" data-pc-group-section="iconcontainer">
+                                <slot name="closeicon" :class="cx('closeIcon')">
+                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
+                                </slot>
+                            </button>
                         </div>
-                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')" data-pc-group-section="iconcontainer">
-                            <slot name="closeicon" :class="cx('closeIcon')">
-                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
-                            </slot>
-                        </button>
-                    </div>
-                    <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
-                        <slot></slot>
-                    </div>
+                        <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
+                            <slot></slot>
+                        </div>
+                    </template>
                 </div>
             </transition>
         </div>
@@ -122,6 +125,7 @@ export default {
 
             if (this.blockScroll) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         disableDocumentSettings() {
@@ -129,6 +133,7 @@ export default {
 
             if (this.blockScroll) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         onKeydown(event) {

package/sidebar/sidebar.cjs.js

@@ -17,7 +17,7 @@ var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-var styles = "\n.p-sidebar-mask {\n    display: none;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n\n.p-sidebar-visible {\n    display: flex;\n}\n\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n\n@media screen and (max-width: 64em) {\n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n    }\n}\n";
+var styles = "\n@layer primevue {\n    .p-sidebar-mask {\n        display: none;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n        transition: transform 0.3s;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-sidebar-left .p-sidebar-enter-from,\n    .p-sidebar-left .p-sidebar-leave-to {\n        transform: translateX(-100%);\n    }\n    .p-sidebar-right .p-sidebar-enter-from,\n    .p-sidebar-right .p-sidebar-leave-to {\n        transform: translateX(100%);\n    }\n    .p-sidebar-top .p-sidebar-enter-from,\n    .p-sidebar-top .p-sidebar-leave-to {\n        transform: translateY(-100%);\n    }\n    .p-sidebar-bottom .p-sidebar-enter-from,\n    .p-sidebar-bottom .p-sidebar-leave-to {\n        transform: translateY(100%);\n    }\n    .p-sidebar-full .p-sidebar-enter-from,\n    .p-sidebar-full .p-sidebar-leave-to {\n        opacity: 0;\n    }\n    .p-sidebar-full .p-sidebar-enter-active,\n    .p-sidebar-full .p-sidebar-leave-active {\n        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }\n}\n";
 
 /* Position */
 var inlineStyles = {
@@ -205,12 +205,14 @@ var script = {
       }
       if (this.blockScroll) {
         utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+        document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
       }
     },
     disableDocumentSettings: function disableDocumentSettings() {
       this.unbindOutsideClickListener();
       if (this.blockScroll) {
         utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        document.body.style.removeProperty('--scrollbar-width');
       }
     },
     onKeydown: function onKeydown(event) {
@@ -315,7 +317,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onKeydown: _cache[1] || (_cache[1] = function () {
               return $options.onKeydown && $options.onKeydown.apply($options, arguments);
             })
-          }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [vue.createElementVNode("div", vue.mergeProps({
+          }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [_ctx.$slots.container ? vue.renderSlot(_ctx.$slots, "container", {
+            key: 0,
+            onClose: $options.hide
+          }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 1
+          }, [vue.createElementVNode("div", vue.mergeProps({
             ref: $options.headerContainerRef,
             "class": _ctx.cx('header')
           }, _ctx.ptm('header')), [_ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
@@ -342,7 +349,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           })], 16, _hoisted_2)), [[_directive_ripple]]) : vue.createCommentVNode("", true)], 16), vue.createElementVNode("div", vue.mergeProps({
             ref: $options.contentRef,
             "class": _ctx.cx('content')
-          }, _ctx.ptm('content')), [vue.renderSlot(_ctx.$slots, "default")], 16)], 16, _hoisted_1)), [[_directive_focustrap]]) : vue.createCommentVNode("", true)];
+          }, _ctx.ptm('content')), [vue.renderSlot(_ctx.$slots, "default")], 16)], 64))], 16, _hoisted_1)), [[_directive_focustrap]]) : vue.createCommentVNode("", true)];
         }),
         _: 3
       }, 16, ["onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])], 16)) : vue.createCommentVNode("", true)];

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/focustrap"),n=require("primevue/icons/times"),t=require("primevue/portal"),i=require("primevue/ripple"),r=require("primevue/utils"),o=require("primevue/basecomponent"),s=require("primevue/usestyle"),a=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e),c=l(n),p=l(t),u=l(i),f=l(o),m=s.useStyle("\n.p-sidebar-mask {\n    display: none;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n\n.p-sidebar-visible {\n    display: flex;\n}\n\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n\n@media screen and (max-width: 64em) {\n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n    }\n}\n",{name:"sidebar",manual:!0}),b={name:"Sidebar",extends:{name:"BaseSidebar",extends:f.default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},css:{classes:{mask:function(e){var n=e.instance,t=e.props,i=["left","right","top","bottom"].find((function(e){return e===t.position}));return["p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":t.modal,"p-sidebar-mask-scrollblocker":t.blockScroll,"p-sidebar-visible":n.containerVisible,"p-sidebar-full":n.fullScreen},i?"p-sidebar-".concat(i):""]},root:function(e){var n=e.instance;return["p-sidebar p-component",{"p-input-filled":"filled"===n.$primevue.config.inputStyle,"p-ripple-disabled":!1===n.$primevue.config.ripple,"p-sidebar-full":n.fullScreen}]},header:"p-sidebar-header",headerContent:"p-sidebar-header-content",closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",content:"p-sidebar-content"},inlineStyles:{mask:function(e){var n=e.position;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n?"flex-start":"right"===n?"flex-end":"center",alignItems:"top"===n?"flex-start":"bottom"===n?"flex-end":"center"}}},loadStyle:m.load},provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.autoZIndex&&r.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&r.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},n=this.$slots.default&&e(this.content);n||(n=this.$slots.header&&e(this.headerContainer))||(n=e(this.container)),n&&n.focus()},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&r.DomHandler.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&r.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(n){e.isOutsideClicked(n)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:d.default,ripple:u.default},components:{Portal:p.default,TimesIcon:c.default}};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function v(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?v(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function g(e,n,t){return(n=k(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function k(e){var n=x(e,"string");return"symbol"===h(n)?n:String(n)}function x(e,n){if("object"!==h(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n||"default");if("object"!==h(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var C=["aria-modal"],w=["aria-label"];b.render=function(e,n,t,i,r,o){var s=a.resolveComponent("Portal"),l=a.resolveDirective("ripple"),d=a.resolveDirective("focustrap");return a.openBlock(),a.createBlock(s,null,{default:a.withCtx((function(){return[r.containerVisible?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.maskRef,onMousedown:n[2]||(n[2]=function(){return o.onMaskClick&&o.onMaskClick.apply(o,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[a.createVNode(a.Transition,a.mergeProps({name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},e.ptm("transition")),{default:a.withCtx((function(){return[e.visible?a.withDirectives((a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal,onKeydown:n[1]||(n[1]=function(){return o.onKeydown&&o.onKeydown.apply(o,arguments)})},y(y({},e.$attrs),e.ptm("root"))),[a.createElementVNode("div",a.mergeProps({ref:o.headerContainerRef,class:e.cx("header")},e.ptm("header")),[e.$slots.header?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:e.cx("headerContent")},e.ptm("headerContent")),[a.renderSlot(e.$slots,"header")],16)):a.createCommentVNode("",!0),e.showCloseIcon?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:1,ref:o.closeButtonRef,autofocus:"",type:"button",class:e.cx("closeButton"),"aria-label":o.closeAriaLabel,onClick:n[0]||(n[0]=function(){return o.hide&&o.hide.apply(o,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[a.renderSlot(e.$slots,"closeicon",{class:a.normalizeClass(e.cx("closeIcon"))},(function(){return[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),a.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,w)),[[l]]):a.createCommentVNode("",!0)],16),a.createElementVNode("div",a.mergeProps({ref:o.contentRef,class:e.cx("content")},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16)],16,C)),[[d]]):a.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):a.createCommentVNode("",!0)]})),_:3})},module.exports=b;
+"use strict";var e=require("primevue/focustrap"),n=require("primevue/icons/times"),t=require("primevue/portal"),i=require("primevue/ripple"),r=require("primevue/utils"),o=require("primevue/basecomponent"),s=require("primevue/usestyle"),a=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e),d=l(n),p=l(t),u=l(i),m=l(o),f=s.useStyle("\n@layer primevue {\n    .p-sidebar-mask {\n        display: none;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n        transition: transform 0.3s;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-sidebar-left .p-sidebar-enter-from,\n    .p-sidebar-left .p-sidebar-leave-to {\n        transform: translateX(-100%);\n    }\n    .p-sidebar-right .p-sidebar-enter-from,\n    .p-sidebar-right .p-sidebar-leave-to {\n        transform: translateX(100%);\n    }\n    .p-sidebar-top .p-sidebar-enter-from,\n    .p-sidebar-top .p-sidebar-leave-to {\n        transform: translateY(-100%);\n    }\n    .p-sidebar-bottom .p-sidebar-enter-from,\n    .p-sidebar-bottom .p-sidebar-leave-to {\n        transform: translateY(100%);\n    }\n    .p-sidebar-full .p-sidebar-enter-from,\n    .p-sidebar-full .p-sidebar-leave-to {\n        opacity: 0;\n    }\n    .p-sidebar-full .p-sidebar-enter-active,\n    .p-sidebar-full .p-sidebar-leave-active {\n        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }\n}\n",{name:"sidebar",manual:!0}),b={name:"Sidebar",extends:{name:"BaseSidebar",extends:m.default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},css:{classes:{mask:function(e){var n=e.instance,t=e.props,i=["left","right","top","bottom"].find((function(e){return e===t.position}));return["p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":t.modal,"p-sidebar-mask-scrollblocker":t.blockScroll,"p-sidebar-visible":n.containerVisible,"p-sidebar-full":n.fullScreen},i?"p-sidebar-".concat(i):""]},root:function(e){var n=e.instance;return["p-sidebar p-component",{"p-input-filled":"filled"===n.$primevue.config.inputStyle,"p-ripple-disabled":!1===n.$primevue.config.ripple,"p-sidebar-full":n.fullScreen}]},header:"p-sidebar-header",headerContent:"p-sidebar-header-content",closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",content:"p-sidebar-content"},inlineStyles:{mask:function(e){var n=e.position;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n?"flex-start":"right"===n?"flex-end":"center",alignItems:"top"===n?"flex-start":"bottom"===n?"flex-end":"center"}}},loadStyle:f.load},provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.autoZIndex&&r.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&r.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},n=this.$slots.default&&e(this.content);n||(n=this.$slots.header&&e(this.headerContainer))||(n=e(this.container)),n&&n.focus()},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&(r.DomHandler.addClass(document.body,"p-overflow-hidden"),document.body.style.setProperty("--scrollbar-width",r.DomHandler.calculateScrollbarWidth()+"px"))},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&(r.DomHandler.removeClass(document.body,"p-overflow-hidden"),document.body.style.removeProperty("--scrollbar-width"))},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(n){e.isOutsideClicked(n)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:c.default,ripple:u.default},components:{Portal:p.default,TimesIcon:d.default}};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function v(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?v(Object(t),!0).forEach((function(n){k(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function k(e,n,t){return(n=g(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function g(e){var n=x(e,"string");return"symbol"===h(n)?n:String(n)}function x(e,n){if("object"!==h(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n||"default");if("object"!==h(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var w=["aria-modal"],C=["aria-label"];b.render=function(e,n,t,i,r,o){var s=a.resolveComponent("Portal"),l=a.resolveDirective("ripple"),c=a.resolveDirective("focustrap");return a.openBlock(),a.createBlock(s,null,{default:a.withCtx((function(){return[r.containerVisible?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.maskRef,onMousedown:n[2]||(n[2]=function(){return o.onMaskClick&&o.onMaskClick.apply(o,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[a.createVNode(a.Transition,a.mergeProps({name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},e.ptm("transition")),{default:a.withCtx((function(){return[e.visible?a.withDirectives((a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal,onKeydown:n[1]||(n[1]=function(){return o.onKeydown&&o.onKeydown.apply(o,arguments)})},y(y({},e.$attrs),e.ptm("root"))),[e.$slots.container?a.renderSlot(e.$slots,"container",{key:0,onClose:o.hide}):(a.openBlock(),a.createElementBlock(a.Fragment,{key:1},[a.createElementVNode("div",a.mergeProps({ref:o.headerContainerRef,class:e.cx("header")},e.ptm("header")),[e.$slots.header?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:e.cx("headerContent")},e.ptm("headerContent")),[a.renderSlot(e.$slots,"header")],16)):a.createCommentVNode("",!0),e.showCloseIcon?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:1,ref:o.closeButtonRef,autofocus:"",type:"button",class:e.cx("closeButton"),"aria-label":o.closeAriaLabel,onClick:n[0]||(n[0]=function(){return o.hide&&o.hide.apply(o,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[a.renderSlot(e.$slots,"closeicon",{class:a.normalizeClass(e.cx("closeIcon"))},(function(){return[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),a.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,C)),[[l]]):a.createCommentVNode("",!0)],16),a.createElementVNode("div",a.mergeProps({ref:o.contentRef,class:e.cx("content")},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16)],64))],16,w)),[[c]]):a.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):a.createCommentVNode("",!0)]})),_:3})},module.exports=b;

package/sidebar/sidebar.esm.js

@@ -5,9 +5,9 @@ import Ripple from 'primevue/ripple';
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
 import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, mergeProps, createVNode, Transition, withDirectives, createElementVNode, renderSlot, createCommentVNode, normalizeClass, resolveDynamicComponent } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, mergeProps, createVNode, Transition, withDirectives, renderSlot, Fragment, createElementVNode, createCommentVNode, normalizeClass, resolveDynamicComponent } from 'vue';
 
-var styles = "\n.p-sidebar-mask {\n    display: none;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n\n.p-sidebar-visible {\n    display: flex;\n}\n\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n\n@media screen and (max-width: 64em) {\n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n    }\n}\n";
+var styles = "\n@layer primevue {\n    .p-sidebar-mask {\n        display: none;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n        transition: transform 0.3s;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-sidebar-left .p-sidebar-enter-from,\n    .p-sidebar-left .p-sidebar-leave-to {\n        transform: translateX(-100%);\n    }\n    .p-sidebar-right .p-sidebar-enter-from,\n    .p-sidebar-right .p-sidebar-leave-to {\n        transform: translateX(100%);\n    }\n    .p-sidebar-top .p-sidebar-enter-from,\n    .p-sidebar-top .p-sidebar-leave-to {\n        transform: translateY(-100%);\n    }\n    .p-sidebar-bottom .p-sidebar-enter-from,\n    .p-sidebar-bottom .p-sidebar-leave-to {\n        transform: translateY(100%);\n    }\n    .p-sidebar-full .p-sidebar-enter-from,\n    .p-sidebar-full .p-sidebar-leave-to {\n        opacity: 0;\n    }\n    .p-sidebar-full .p-sidebar-enter-active,\n    .p-sidebar-full .p-sidebar-leave-active {\n        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }\n}\n";
 
 /* Position */
 var inlineStyles = {
@@ -195,12 +195,14 @@ var script = {
       }
       if (this.blockScroll) {
         DomHandler.addClass(document.body, 'p-overflow-hidden');
+        document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
       }
     },
     disableDocumentSettings: function disableDocumentSettings() {
       this.unbindOutsideClickListener();
       if (this.blockScroll) {
         DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        document.body.style.removeProperty('--scrollbar-width');
       }
     },
     onKeydown: function onKeydown(event) {
@@ -305,7 +307,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onKeydown: _cache[1] || (_cache[1] = function () {
               return $options.onKeydown && $options.onKeydown.apply($options, arguments);
             })
-          }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [createElementVNode("div", mergeProps({
+          }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [_ctx.$slots.container ? renderSlot(_ctx.$slots, "container", {
+            key: 0,
+            onClose: $options.hide
+          }) : (openBlock(), createElementBlock(Fragment, {
+            key: 1
+          }, [createElementVNode("div", mergeProps({
             ref: $options.headerContainerRef,
             "class": _ctx.cx('header')
           }, _ctx.ptm('header')), [_ctx.$slots.header ? (openBlock(), createElementBlock("div", mergeProps({
@@ -332,7 +339,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           })], 16, _hoisted_2)), [[_directive_ripple]]) : createCommentVNode("", true)], 16), createElementVNode("div", mergeProps({
             ref: $options.contentRef,
             "class": _ctx.cx('content')
-          }, _ctx.ptm('content')), [renderSlot(_ctx.$slots, "default")], 16)], 16, _hoisted_1)), [[_directive_focustrap]]) : createCommentVNode("", true)];
+          }, _ctx.ptm('content')), [renderSlot(_ctx.$slots, "default")], 16)], 64))], 16, _hoisted_1)), [[_directive_focustrap]]) : createCommentVNode("", true)];
         }),
         _: 3
       }, 16, ["onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])], 16)) : createCommentVNode("", true)];