primevue/overlaypanel/overlaypanel.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)

import{DomHandler as e,ConnectedOverlayScrollHandler as t}from"primevue/utils";import n from"primevue/ripple";import{resolveDirective as i,openBlock as s,createBlock as r,Transition as l,withCtx as o,createVNode as a,renderSlot as p,withDirectives as d,createCommentVNode as c}from"vue";var h={props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},data:()=>({visible:!1}),selfClick:!1,target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,beforeUnmount(){this.restoreAppend(),this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.target=null,this.container=null},methods:{toggle(e){this.visible?this.hide():this.show(e)},show(e){this.visible=!0,this.target=e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(){this.appendContainer(),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&(this.container.style.zIndex=String(this.baseZIndex+e.generateZIndex()))},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},alignOverlay(){e.absolutePosition(this.container,this.target);const t=e.getOffset(this.container),n=e.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(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 t(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(){return this.target&&(this.target===event.target||this.target.contains(event.target))},appendContainer(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.container):document.getElementById(this.appendTo).appendChild(this.container))},restoreAppend(){this.container&&this.appendTo&&("body"===this.appendTo?document.body.removeChild(this.container):document.getElementById(this.appendTo).removeChild(this.container))},containerRef(e){this.container=e}},directives:{ripple:n}};const b=a("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1);!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-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .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'),h.render=function(e,t,n,h,u,f){const v=i("ripple");return s(),r(l,{name:"p-overlaypanel",onEnter:f.onEnter,onLeave:f.onLeave},{default:o((()=>[u.visible?(s(),r("div",{key:0,class:"p-overlaypanel p-component",ref:f.containerRef},[a("div",{class:"p-overlaypanel-content",onClick:t[1]||(t[1]=(...e)=>f.onContentClick&&f.onContentClick(...e))},[p(e.$slots,"default")]),n.showCloseIcon?d((s(),r("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>f.hide&&f.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},[b],8,["aria-label"])),[[v]]):c("",!0)],512)):c("",!0)])),_:1},8,["onEnter","onLeave"])};export default h;