@progress/kendo-vue-popup/Popup.js

Kendo UI for Vue Popup package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),_=require("@progress/kendo-vue-animation"),s=require("./util.js"),v=require("./services/alignService.js"),A=require("./services/domService.js"),S=require("./services/positionService.js"),d=require("@progress/kendo-vue-common"),C=require("./package-metadata.js");function $(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!c.isVNode(t)}const y=100,E=1,P={left:-1e3,top:0},m="k-animation-container-shown",g="k-popup",b=c.defineComponent({name:"Popup",props:{appendTo:{type:String,default:""},anchor:{type:[String,Object],default:""},className:String,id:String,popupClass:String,collision:{type:Object,default:function(){return{horizontal:s.CollisionType.fit,vertical:s.CollisionType.flip}}},anchorAlign:{type:Object,default:function(){return{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom}}},popupAlign:{type:Object,default:function(){return{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top}}},offset:{type:Object,default:function(){return P}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},onOpen:Function,onClose:Function},inject:{kCurrentZIndex:{default:null}},data(){return{hasMounted:!1}},created(){d.validatePackage(C.packageMetadata),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._exitingAnimation=!1,this._prevShow=!1,this._prevShow=this.$props.show,this._domService=new A.DOMService,this._alignService=new v.AlignService(this._domService),this._positionService=new S.PositionService(this._domService),this.reposition=s.throttle(this.reposition.bind(this),s.FRAME_DURATION)},mounted(){d.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el)},updated(){this._prevShow=this.$props.show},unmounted(){this.detachRepositionHandlers()},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{onOpened(){const t=this.$el;this.$props.show&&t.classList.add(m),this.attachRepositionHandlers(t),this.$emit("open",{target:this})},onClosing(){this.$props.show||this.$el.classList.remove(m),this.detachRepositionHandlers()},onClosed(){this._exitingAnimation&&(this._exitingAnimation=!1,this.$forceUpdate()),this.$emit("close",{target:this})},transitionDuration(){const t=this.$props.animate;let i=0,e=0;return t&&(t===!0?i=e=void 0:(i=t.openDuration,e=t.closeDuration)),{transitionEnterDuration:i,transitionExitDuration:e}},getParentRef(t,i){let e=this.$parent;for(;!e.$refs[t];){if(e&&e.kendoAnchorRef&&i)return e.kendoAnchorRef;if(e=e.$parent,!e&&d.canUseDOM)return document.getElementById(t)||document.body}return e.$refs[t].$el||e.$refs[t]},position(t,i,e){const{anchorAlign:n,popupAlign:r,collision:l,offset:p}=t,o=e?this.mountedAnchor:document.body,a=this._alignService.alignElement({anchor:e?o:void 0,element:i,elementAlign:r,anchorAlign:n,offset:p});return this._positionService.positionElement({anchor:o,anchorAlign:n,collisions:l,element:i,currentLocation:a,elementAlign:r})},calculatePosition(t,i){if(!i||!s.isWindowAvailable()||!d.canUseDOM)return{flipped:!1,offset:t.offset};const e=d.getDefaultSlots(this),n=document.createElement("div"),r=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,l=r&&r.getBoundingClientRect?r:this._clonedElement;if(l)n.appendChild(l);else{const o=e&&e[0].props?e[0].props.class:"",a=this.$props.popupClass;n.innerHTML=`<div class="k-animation-container k-animation-container-relative">
                        <div class="k-popup k-animation-container k-animation-container-relative">
                            <div class="${o} ${a}" >
                            </div>
                        </div>
                </div>`}if(i.appendChild(n),n&&n.firstChild){const o=n.firstChild;o.style.position="absolute",o.style.visibility="hidden",o.style.display="block",o.style.left="-1000",o.style.top="0";const a=e&&e[0].props?e[0].props.style:{};if(a)for(const[h,f]of Object.entries(a))o.style[h]=f}const p=this.position(t,n.firstChild,this.$props.anchor);return n.parentNode.removeChild(n),p},attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:t),this._scrollableParents.map(i=>i.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(t=>t.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+E:y}},render(){const{className:t,popupClass:i,show:e,id:n}=this.$props,r=d.getDefaultSlots(this),l=r,p=s.isWindowAvailable()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const u=this.calculatePosition(this.$props,p);this._offsetLeft=u.offset.left,this._offsetTop=u.offset.top,this._flipped=!!u.flipped}const o=this.$props.direction==="down"?this._flipped?"up":"down":this._flipped?"down":"up",{transitionEnterDuration:a,transitionExitDuration:h}=this.transitionDuration(),f=this.getCurrentZIndex();return this._exitingAnimation=this._exitingAnimation||this._prevShow&&!e,this.hasMounted?e||this._exitingAnimation&&p?c.createVNode(_.Slide,{id:n,role:this.appendTo?"":"region",componentChildClassName:[i,g],className:t,onEntered:this.onOpened,onExiting:this.onClosing,onExited:this.onClosed,direction:o,style:{zIndex:f,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px"},transitionEnterDuration:a,transitionExitDuration:h,appear:e},$(l)?l:{default:()=>[l]}):null:c.createVNode("div",{style:{display:"none"},class:t},[c.createVNode("div",{class:[i,g]},[r])])}});exports.Popup=b;