primevue 3.20.0 → 3.22.0

package/sidebar/sidebar.esm.js

@@ -2,11 +2,10 @@ import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, renderSlot, createCommentVNode, normalizeClass } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createVNode, Transition, withDirectives, createElementBlock, mergeProps, renderSlot, createCommentVNode } from 'vue';
 
 var script = {
     name: 'Sidebar',
-    inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide'],
     props: {
         visible: {
@@ -40,50 +39,70 @@ var script = {
         modal: {
             type: Boolean,
             default: true
+        },
+        blockScroll: {
+            type: Boolean,
+            default: true
         }
     },
-    mask: null,
-    maskClickListener: null,
     container: null,
     content: null,
     headerContainer: null,
     closeButton: null,
+    outsideClickListener: null,
+    data() {
+        return {
+            maskVisible: false
+        };
+    },
+    watch: {
+        visible(newValue) {
+            this.maskVisible = newValue ? newValue : this.maskVisible;
+        }
+    },
     beforeUnmount() {
-        this.destroyModal();
-
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
 
+        this.unbindOutsideClickListener();
         this.container = null;
     },
     methods: {
         hide() {
             this.$emit('update:visible', false);
+
+            this.unbindOutsideClickListener();
+            this.blockScroll && DomHandler.removeClass(document.body, 'p-overflow-hidden');
         },
-        onEnter(el) {
+        onEnter() {
             this.$emit('show');
 
             if (this.autoZIndex) {
-                ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
+                ZIndexUtils.set('modal', this.$refs.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
             }
 
+            this.maskVisible = true;
             this.focus();
-
-            if (this.modal && !this.fullScreen) {
-                this.enableModality();
-            }
         },
         onLeave() {
-            this.$emit('hide');
+            DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
 
-            if (this.modal && !this.fullScreen) {
-                this.disableModality();
-            }
+            this.$emit('hide');
+            this.unbindOutsideClickListener();
         },
-        onAfterLeave(el) {
+        onAfterLeave() {
             if (this.autoZIndex) {
-                ZIndexUtils.clear(el);
+                ZIndexUtils.clear(this.mask);
+            }
+
+            this.maskVisible = false;
+        },
+        onAfterEnter() {
+            this.bindOutsideClickListener();
+
+            if (this.blockScroll) {
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         focus() {
@@ -103,54 +122,14 @@ var script = {
 
             focusTarget && focusTarget.focus();
         },
-        enableModality() {
-            if (!this.mask) {
-                this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter');
-                this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
-
-                if (this.dismissable) {
-                    this.bindMaskClickListener();
-                }
-
-                document.body.appendChild(this.mask);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-            }
-        },
-        disableModality() {
-            if (this.mask) {
-                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
-                this.mask.addEventListener('animationend', () => {
-                    this.destroyModal();
-                });
-            }
-        },
-        bindMaskClickListener() {
-            if (!this.maskClickListener) {
-                this.maskClickListener = () => {
-                    this.hide();
-                };
-
-                this.mask.addEventListener('click', this.maskClickListener);
-            }
-        },
         onKeydown(event) {
             if (event.code === 'Escape') {
                 this.hide();
             }
         },
-        unbindMaskClickListener() {
-            if (this.maskClickListener) {
-                this.mask.removeEventListener('click', this.maskClickListener);
-                this.maskClickListener = null;
-            }
-        },
-        destroyModal() {
-            if (this.mask) {
-                this.unbindMaskClickListener();
-                document.body.removeChild(this.mask);
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                this.mask = null;
+        onMaskClick(event) {
+            if (this.dismissable && this.modal && this.$refs.mask === event.target) {
+                this.hide();
             }
         },
         containerRef(el) {
@@ -164,16 +143,42 @@ var script = {
         },
         closeButtonRef(el) {
             this.closeButton = el;
+        },
+        getPositionClass() {
+            const positions = ['left', 'right', 'top', 'bottom'];
+            const pos = positions.find((item) => item === this.position);
+
+            return pos ? `p-sidebar-${pos}` : '';
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (!this.modal && this.isOutsideClicked(event) && this.dismissable) {
+                        this.hide();
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return this.container && !this.container.contains(event.target);
         }
     },
     computed: {
         containerClass() {
             return [
-                'p-sidebar p-component p-sidebar-' + this.position,
+                'p-sidebar p-component',
                 {
-                    'p-sidebar-active': this.visible,
                     'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                    'p-ripple-disabled': this.$primevue.config.ripple === false,
+                    'p-sidebar-full': this.fullScreen
                 }
             ];
         },
@@ -182,6 +187,18 @@ var script = {
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        },
+        maskClasses() {
+            return [
+                'p-sidebar-mask',
+                this.getPositionClass(),
+                {
+                    'p-component-overlay p-component-overlay-enter': this.modal,
+                    'p-sidebar-mask-scrollblocker': this.blockScroll,
+                    'p-sidebar-visible': this.maskVisible,
+                    'p-sidebar-full': this.fullScreen
+                }
+            ];
         }
     },
     directives: {
@@ -207,63 +224,71 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createBlock(_component_Portal, null, {
     default: withCtx(() => [
-      createVNode(Transition, {
-        name: "p-sidebar",
-        onEnter: $options.onEnter,
-        onLeave: $options.onLeave,
-        onAfterLeave: $options.onAfterLeave,
-        appear: ""
-      }, {
-        default: withCtx(() => [
-          ($props.visible)
-            ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
-                key: 0,
-                ref: $options.containerRef,
-                class: $options.containerClass,
-                role: "complementary",
-                "aria-modal": $props.modal,
-                onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-              }, _ctx.$attrs), [
-                createElementVNode("div", {
-                  ref: $options.headerContainerRef,
-                  class: "p-sidebar-header"
-                }, [
-                  (_ctx.$slots.header)
-                    ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                        renderSlot(_ctx.$slots, "header")
-                      ]))
-                    : createCommentVNode("", true),
-                  ($props.showCloseIcon)
-                    ? withDirectives((openBlock(), createElementBlock("button", {
-                        key: 1,
-                        ref: $options.closeButtonRef,
-                        autofocus: "",
-                        type: "button",
-                        class: "p-sidebar-close p-sidebar-icon p-link",
-                        "aria-label": $options.closeAriaLabel,
-                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
-                      }, [
-                        createElementVNode("span", {
-                          class: normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
-                        }, null, 2)
-                      ], 8, _hoisted_3)), [
-                        [_directive_ripple]
-                      ])
-                    : createCommentVNode("", true)
-                ], 512),
-                createElementVNode("div", {
-                  ref: $options.contentRef,
-                  class: "p-sidebar-content"
-                }, [
-                  renderSlot(_ctx.$slots, "default")
-                ], 512)
-              ], 16, _hoisted_1)), [
-                [_directive_focustrap]
-              ])
-            : createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+      createElementVNode("div", {
+        ref: "mask",
+        style: {},
+        class: normalizeClass($options.maskClasses),
+        onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+      }, [
+        createVNode(Transition, {
+          name: "p-sidebar",
+          onAfterEnter: $options.onAfterEnter,
+          onEnter: $options.onEnter,
+          onLeave: $options.onLeave,
+          onAfterLeave: $options.onAfterLeave,
+          appear: ""
+        }, {
+          default: withCtx(() => [
+            ($props.visible)
+              ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
+                  key: 0,
+                  ref: $options.containerRef,
+                  class: $options.containerClass,
+                  role: "complementary",
+                  "aria-modal": $props.modal,
+                  onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
+                }, _ctx.$attrs), [
+                  createElementVNode("div", {
+                    ref: $options.headerContainerRef,
+                    class: "p-sidebar-header"
+                  }, [
+                    (_ctx.$slots.header)
+                      ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                          renderSlot(_ctx.$slots, "header")
+                        ]))
+                      : createCommentVNode("", true),
+                    ($props.showCloseIcon)
+                      ? withDirectives((openBlock(), createElementBlock("button", {
+                          key: 1,
+                          ref: $options.closeButtonRef,
+                          autofocus: "",
+                          type: "button",
+                          class: "p-sidebar-close p-sidebar-icon p-link",
+                          "aria-label": $options.closeAriaLabel,
+                          onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
+                        }, [
+                          createElementVNode("span", {
+                            class: normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
+                          }, null, 2)
+                        ], 8, _hoisted_3)), [
+                          [_directive_ripple]
+                        ])
+                      : createCommentVNode("", true)
+                  ], 512),
+                  createElementVNode("div", {
+                    ref: $options.contentRef,
+                    class: "p-sidebar-content"
+                  }, [
+                    renderSlot(_ctx.$slots, "default")
+                  ], 512)
+                ], 16, _hoisted_1)), [
+                  [_directive_focustrap]
+                ])
+              : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["onAfterEnter", "onEnter", "onLeave", "onAfterLeave"])
+      ], 34)
     ]),
     _: 3
   }))
@@ -296,7 +321,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-sidebar {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-sidebar-left.p-sidebar-sm,\n.p-sidebar-right.p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left.p-sidebar-md,\n.p-sidebar-right.p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left.p-sidebar-lg,\n.p-sidebar-right.p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top.p-sidebar-sm,\n.p-sidebar-bottom.p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top.p-sidebar-md,\n.p-sidebar-bottom.p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top.p-sidebar-lg,\n.p-sidebar-bottom.p-sidebar-lg {\n    height: 30rem;\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 css_248z = "\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\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.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\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/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-view,\n.p-sidebar-right .p-sidebar-view,\n.p-sidebar-top .p-sidebar-view,\n.p-sidebar-bottom .p-sidebar-view {\n    width: 100%;\n    height: 100%;\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@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";
 styleInject(css_248z);
 
 script.render = render;

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import e from"primevue/focustrap";import t from"primevue/portal";import n from"primevue/ripple";import{ZIndexUtils as i,DomHandler as s}from"primevue/utils";import{resolveComponent as a,resolveDirective as r,openBlock as o,createBlock as l,withCtx as d,createVNode as p,Transition as m,withDirectives as b,createElementBlock as c,mergeProps as h,createElementVNode as f,renderSlot as u,createCommentVNode as k,normalizeClass as v}from"vue";var y={name:"Sidebar",inheritAttrs:!1,emits:["update:visible","show","hide"],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:"pi pi-times"},modal:{type:Boolean,default:!0}},mask:null,maskClickListener:null,container:null,content:null,headerContainer:null,closeButton:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&i.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(e){this.$emit("show"),this.autoZIndex&&i.set("modal",e,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(e){this.autoZIndex&&i.clear(e)},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=e(this.container))),t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),s.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(s.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},onKeydown(e){"Escape"===e.code&&this.hide()},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),s.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:n},components:{Portal:t}};const w=["aria-modal"],x={key:0,class:"p-sidebar-header-content"},g=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-sidebar-left.p-sidebar-sm,\n.p-sidebar-right.p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left.p-sidebar-md,\n.p-sidebar-right.p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left.p-sidebar-lg,\n.p-sidebar-right.p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top.p-sidebar-sm,\n.p-sidebar-bottom.p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top.p-sidebar-md,\n.p-sidebar-bottom.p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top.p-sidebar-lg,\n.p-sidebar-bottom.p-sidebar-lg {\n    height: 30rem;\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"),y.render=function(e,t,n,i,s,y){const C=a("Portal"),L=r("ripple"),I=r("focustrap");return o(),l(C,null,{default:d((()=>[p(m,{name:"p-sidebar",onEnter:y.onEnter,onLeave:y.onLeave,onAfterLeave:y.onAfterLeave,appear:""},{default:d((()=>[n.visible?b((o(),c("div",h({key:0,ref:y.containerRef,class:y.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>y.onKeydown&&y.onKeydown(...e))},e.$attrs),[f("div",{ref:y.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(o(),c("div",x,[u(e.$slots,"header")])):k("",!0),n.showCloseIcon?b((o(),c("button",{key:1,ref:y.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":y.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>y.hide&&y.hide(...e))},[f("span",{class:v(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,g)),[[L]]):k("",!0)],512),f("div",{ref:y.contentRef,class:"p-sidebar-content"},[u(e.$slots,"default")],512)],16,w)),[[I]]):k("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})};export{y as default};
+import e from"primevue/focustrap";import t from"primevue/portal";import n from"primevue/ripple";import{ZIndexUtils as i,DomHandler as s}from"primevue/utils";import{resolveComponent as r,resolveDirective as a,openBlock as o,createBlock as d,withCtx as l,createElementVNode as p,normalizeClass as b,createVNode as c,Transition as h,withDirectives as m,createElementBlock as f,mergeProps as u,renderSlot as v,createCommentVNode as k}from"vue";var g={name:"Sidebar",emits:["update:visible","show","hide"],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:"pi pi-times"},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!0}},container:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,data:()=>({maskVisible:!1}),watch:{visible(e){this.maskVisible=e||this.maskVisible}},beforeUnmount(){this.container&&this.autoZIndex&&i.clear(this.container),this.unbindOutsideClickListener(),this.container=null},methods:{hide(){this.$emit("update:visible",!1),this.unbindOutsideClickListener(),this.blockScroll&&s.removeClass(document.body,"p-overflow-hidden")},onEnter(){this.$emit("show"),this.autoZIndex&&i.set("modal",this.$refs.mask,this.baseZIndex||this.$primevue.config.zIndex.modal),this.maskVisible=!0,this.focus()},onLeave(){s.addClass(this.$refs.mask,"p-component-overlay-leave"),this.$emit("hide"),this.unbindOutsideClickListener()},onAfterLeave(){this.autoZIndex&&i.clear(this.mask),this.maskVisible=!1},onAfterEnter(){this.bindOutsideClickListener(),this.blockScroll&&s.addClass(document.body,"p-overflow-hidden")},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=e(this.container))),t&&t.focus()},onKeydown(e){"Escape"===e.code&&this.hide()},onMaskClick(e){this.dismissable&&this.modal&&this.$refs.mask===e.target&&this.hide()},containerRef(e){this.container=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e},getPositionClass(){const e=["left","right","top","bottom"].find((e=>e===this.position));return e?`p-sidebar-${e}`:""},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.modal&&this.isOutsideClicked(e)&&this.dismissable&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked(e){return this.container&&!this.container.contains(e.target)}},computed:{containerClass(){return["p-sidebar p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple,"p-sidebar-full":this.fullScreen}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},maskClasses(){return["p-sidebar-mask",this.getPositionClass(),{"p-component-overlay p-component-overlay-enter":this.modal,"p-sidebar-mask-scrollblocker":this.blockScroll,"p-sidebar-visible":this.maskVisible,"p-sidebar-full":this.fullScreen}]}},directives:{focustrap:e,ripple:n},components:{Portal:t}};const y=["aria-modal"],C={key:0,class:"p-sidebar-header-content"},w=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\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.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\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/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-view,\n.p-sidebar-right .p-sidebar-view,\n.p-sidebar-top .p-sidebar-view,\n.p-sidebar-bottom .p-sidebar-view {\n    width: 100%;\n    height: 100%;\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@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"),g.render=function(e,t,n,i,s,g){const x=r("Portal"),L=a("ripple"),$=a("focustrap");return o(),d(x,null,{default:l((()=>[p("div",{ref:"mask",style:{},class:b(g.maskClasses),onMousedown:t[2]||(t[2]=(...e)=>g.onMaskClick&&g.onMaskClick(...e))},[c(h,{name:"p-sidebar",onAfterEnter:g.onAfterEnter,onEnter:g.onEnter,onLeave:g.onLeave,onAfterLeave:g.onAfterLeave,appear:""},{default:l((()=>[n.visible?m((o(),f("div",u({key:0,ref:g.containerRef,class:g.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>g.onKeydown&&g.onKeydown(...e))},e.$attrs),[p("div",{ref:g.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(o(),f("div",C,[v(e.$slots,"header")])):k("",!0),n.showCloseIcon?m((o(),f("button",{key:1,ref:g.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":g.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.hide&&g.hide(...e))},[p("span",{class:b(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,w)),[[L]]):k("",!0)],512),p("div",{ref:g.contentRef,class:"p-sidebar-content"},[v(e.$slots,"default")],512)],16,y)),[[$]]):k("",!0)])),_:3},8,["onAfterEnter","onEnter","onLeave","onAfterLeave"])],34)])),_:3})};export{g as default};