primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 9.08 kB
JavaScript
import e from"primevue/basecomponent";import t from"primevue/focustrap";import n from"primevue/icons/times";import i from"primevue/portal";import s from"primevue/ripple";import{ZIndexUtils as r,DomHandler as o}from"primevue/utils";import{resolveComponent as a,resolveDirective as l,openBlock as d,createBlock as p,withCtx as c,createElementBlock as m,mergeProps as b,createVNode as h,Transition as f,withDirectives as u,createElementVNode as v,renderSlot as g,createCommentVNode as k,resolveDynamicComponent as y}from"vue";var C={name:"Sidebar",extends:e,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:void 0},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&&r.clear(this.mask),this.container=null,this.mask=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(){this.$emit("show"),this.focus(),this.autoZIndex&&r.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&o.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&r.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&&o.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&o.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:t,ripple:s},components:{Portal:i,TimesIcon:n}};const x=["aria-modal"],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-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"),C.render=function(e,t,n,i,s,r){const o=a("Portal"),C=l("ripple"),L=l("focustrap");return d(),p(o,null,{default:c((()=>[s.containerVisible?(d(),m("div",b({key:0,ref:r.maskRef,class:r.maskClass,onMousedown:t[2]||(t[2]=(...e)=>r.onMaskClick&&r.onMaskClick(...e))},e.ptm("mask")),[h(f,{name:"p-sidebar",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onBeforeLeave:r.onBeforeLeave,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:c((()=>[n.visible?u((d(),m("div",b({key:0,ref:r.containerRef,class:r.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>r.onKeydown&&r.onKeydown(...e))},{...e.$attrs,...e.ptm("root")}),[v("div",b({ref:r.headerContainerRef,class:"p-sidebar-header"},e.ptm("header")),[e.$slots.header?(d(),m("div",b({key:0,class:"p-sidebar-header-content"},e.ptm("headerContent")),[g(e.$slots,"header")],16)):k("",!0),n.showCloseIcon?u((d(),m("button",b({key:1,ref:r.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":r.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e))},e.ptm("closeButton")),[g(e.$slots,"closeicon",{},(()=>[(d(),p(y(n.closeIcon?"span":"TimesIcon"),b({class:["p-sidebar-close-icon ",n.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]))],16,w)),[[C]]):k("",!0)],16),v("div",b({ref:r.contentRef,class:"p-sidebar-content"},e.ptm("content")),[g(e.$slots,"default")],16)],16,x)),[[L]]):k("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):k("",!0)])),_:3})};export{C as default};