primevue/sidebar/sidebar.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.sidebar=function(e,n,t,i,r,o,s,a){"use strict";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),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: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){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"];return 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"))),[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)),[[c]]):a.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):a.createCommentVNode("",!0)]})),_:3})},b}(primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);