primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 8.76 kB
JavaScript
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 l,withCtx as d,createElementBlock as p,normalizeClass as c,createVNode as b,Transition as h,withDirectives as m,mergeProps as f,createElementVNode as u,renderSlot as v,createCommentVNode as g}from"vue";var k={name:"Sidebar",inheritAttrs:!1,emits:["update:visible","show","hide","after-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:!1}},data(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&i.clear(this.mask),this.container=null,this.mask=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(){this.$emit("show"),this.focus(),this.autoZIndex&&i.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&s.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&i.clear(this.mask),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},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()},enableDocumentSettings(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&s.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&s.removeClass(document.body,"p-overflow-hidden")},onKeydown(e){"Escape"===e.code&&this.hide()},containerRef(e){this.container=e},maskRef(e){this.mask=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.isOutsideClicked(e)&&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},maskClass(){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.containerVisible,"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"},x=["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-mask.p-component-overlay {\n pointer-events: auto;\n}\n.p-sidebar-visible {\n display: flex;\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-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"),k.render=function(e,t,n,i,s,k){const w=r("Portal"),L=a("ripple"),S=a("focustrap");return o(),l(w,null,{default:d((()=>[s.containerVisible?(o(),p("div",{key:0,ref:k.maskRef,class:c(k.maskClass),onMousedown:t[2]||(t[2]=(...e)=>k.onMaskClick&&k.onMaskClick(...e))},[b(h,{name:"p-sidebar",onEnter:k.onEnter,onAfterEnter:k.onAfterEnter,onBeforeLeave:k.onBeforeLeave,onLeave:k.onLeave,onAfterLeave:k.onAfterLeave,appear:""},{default:d((()=>[n.visible?m((o(),p("div",f({key:0,ref:k.containerRef,class:k.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>k.onKeydown&&k.onKeydown(...e))},e.$attrs),[u("div",{ref:k.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(o(),p("div",C,[v(e.$slots,"header")])):g("",!0),n.showCloseIcon?m((o(),p("button",{key:1,ref:k.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":k.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>k.hide&&k.hide(...e))},[u("span",{class:c(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,x)),[[L]]):g("",!0)],512),u("div",{ref:k.contentRef,class:"p-sidebar-content"},[v(e.$slots,"default")],512)],16,y)),[[S]]):g("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):g("",!0)])),_:3})};export{k as default};