primevue/overlaypanel/overlaypanel.cjs.min.js

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

"use strict";var e=require("primevue/basecomponent"),t=require("primevue/focustrap"),n=require("primevue/icons/times"),i=require("primevue/overlayeventbus"),l=require("primevue/portal"),o=require("primevue/ripple"),r=require("primevue/utils"),s=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(e),d=a(t),p=a(n),u=a(i),h=a(l),v=a(o),m={name:"OverlayPanel",extends:c.default,inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&r.ZIndexUtils.clear(this.container),this.overlayEventListener&&(u.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,r.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&r.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),u.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),u.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&r.ZIndexUtils.clear(e)},alignOverlay(){r.DomHandler.absolutePosition(this.container,this.target);const e=r.DomHandler.getOffset(this.container),t=r.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&r.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){u.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>r.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:d.default,ripple:v.default},components:{Portal:h.default,TimesIcon:p.default}};const f=["aria-modal"],y=["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],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),m.render=function(e,t,n,i,l,o){const r=s.resolveComponent("Portal"),a=s.resolveDirective("ripple"),c=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(r,{appendTo:n.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-overlaypanel",onEnter:o.onEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:s.withCtx((()=>[l.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.containerRef,role:"dialog",class:o.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))},{...e.$attrs,...e.ptm("root")}),[s.createElementVNode("div",s.mergeProps({class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>o.onContentKeydown&&o.onContentKeydown(...e))},e.ptm("content")),[s.renderSlot(e.$slots,"default")],16),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",s.mergeProps({key:0,class:"p-overlaypanel-close p-link","aria-label":o.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>o.hide&&o.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>o.onButtonKeydown&&o.onButtonKeydown(...e))},e.ptm("closeButton")),[s.renderSlot(e.$slots,"closeicon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),s.mergeProps({class:["p-overlaypanel-close-icon ",n.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]))],16,y)),[[a]]):s.createCommentVNode("",!0)],16,f)),[[c]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},module.exports=m;