@progress/kendo-vue-dialogs/Window.js

TODO

/**
 * @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 o=require("vue"),$=require("./WindowTitlebar.js"),i=require("@progress/kendo-vue-common"),I=require("./WindowResizeHandlers.js"),e=require("./StageEnum.js"),S=require("./package-metadata.js"),C=require("./constants.js"),L=300,E=300,g=120,f=100,r=5,D=o.defineComponent({name:"KendoWindow",emits:{resize:null,move:null,close:null,stagechange:null,overlayclick:null},provide(){return{kCurrentZIndex:C.DEFAULT_DIALOGS_ZINDEX}},props:{id:String,appendTo:String,width:{type:[Number],default:void 0},height:{type:[Number],default:void 0},left:{type:[Number],default:void 0},windowStyle:Object,windowClass:String,top:{type:[Number],default:void 0},initialWidth:[Number],initialHeight:[Number],initialLeft:[Number],initialTop:[Number],minWidth:{type:[Number],default:g},minHeight:{type:[Number],default:f},resizable:{type:Boolean,default:!0},draggable:{type:Boolean,default:!0},modal:{type:Boolean,default:!1},doubleClickStageChange:{type:Boolean,default:!0},title:String,titleRender:[String,Function],closeButton:[String,Function],minimizeButton:[String,Function],maximizeButton:[String,Function],restoreButton:[String,Function],shouldUpdateOnDrag:Boolean,stage:{type:String,validator:function(t){return["DEFAULT","MINIMIZED","FULLSCREEN"].indexOf(t)!==-1}},themeColor:{type:String,validator:function(t){return[void 0,"primary","dark","light"].includes(t)}},dir:String},created(){i.validatePackage(S.packageMetadata),this.showLicenseWatermark=i.shouldShowValidationUI(S.packageMetadata),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()},this.titleId=this.generateTitleId()},beforeUnmount(){this.$props.appendTo&&this.windowWrapper.remove()},data(){return{currentStage:this.$props.stage||e.windowStage.DEFAULT,isDragging:!1,currentTop:this.getInitialTop(),currentLeft:this.getInitialLeft(),currentWidth:this.getInitialWidth(),currentHeight:this.getInitialHeight(),titleId:void 0,showLicenseWatermark:!1}},mounted(){if(window&&(window.addEventListener("resize",this.handleBrowserWindowResize),this.$props.appendTo)){const t=document.querySelector(this.$props.appendTo);this.windowWrapper=this.$refs.wrapper,t.append(this.windowWrapper)}this.$el&&(this.windowElement=this.$refs.windowElement)},unmounted(){window&&window.removeEventListener("resize",this.handleBrowserWindowResize)},computed:{wrapperClass(){return{"k-dialog-wrapper":this.$props.modal}},windowElementClass(){const{windowClass:t,themeColor:n}=this.$props;return{"k-window":!0,[t]:t,[`k-window-${n}`]:n,"k-window-minimized":this.currentStage==="MINIMIZED"}},computedTop(){return this.windowStage!==e.windowStage.FULLSCREEN?Math.max(this.$props.top||this.currentTop,0):0},computedLeft(){return this.windowStage!==e.windowStage.FULLSCREEN?Math.max(this.$props.left||this.currentLeft,0):0},computedWidth(){let t=this.$props.width||this.currentWidth;return this.windowStage===e.windowStage.FULLSCREEN&&(t=window.innerWidth),t},computedHeight(){let t=this.$props.height||this.currentHeight;return this.windowStage===e.windowStage.FULLSCREEN?t=window.innerHeight:this.windowStage===e.windowStage.MINIMIZED&&(t=0),t},windowStage(){return this.$props.stage||this.currentStage}},methods:{onPress(t){const n=t;this.windowCoordinatesState.differenceLeft=n.pageX-this.computedLeft,this.windowCoordinatesState.differenceTop=n.pageY-this.computedTop},onDrag(t){const n=t;n.originalEvent.preventDefault(),this.windowStage!==e.windowStage.FULLSCREEN&&this.$props.draggable&&(this.currentTop=Math.max(n.pageY-this.windowCoordinatesState.differenceTop,0),this.currentLeft=n.pageX-this.windowCoordinatesState.differenceLeft,this.isDragging=!0,this.dispatchMoveEvent("move",n,!0,!1))},onRelease(t){const n=t;this.windowStage!==e.windowStage.FULLSCREEN&&this.$props.draggable&&this.dispatchMoveEvent("move",n,!0,!0),this.isDragging=!1},handleKeyDown(t){if(t.target!==t.currentTarget)return;const n=this.$props.minWidth||g,s=this.$props.minHeight||f;if(t.ctrlKey&&this.$props.resizable){switch(t.keyCode){case i.Keys.up:t.preventDefault(),s<=this.computedHeight-r&&(this.currentHeight=this.currentHeight-r);break;case i.Keys.down:t.preventDefault(),this.currentHeight=this.currentHeight+r;break;case i.Keys.left:n<=this.computedWidth-r&&(this.currentWidth=this.currentWidth-r);break;case i.Keys.right:this.currentWidth=this.currentWidth+r;break;default:return}this.dispatchMoveEvent("resize",t,!1,void 0);return}if(t.altKey){switch(t.keyCode){case i.Keys.up:this.windowStage===e.windowStage.MINIMIZED?(this.handleRestore(t),this.$emit("stagechange",t,this,{state:e.windowStage.DEFAULT})):this.windowStage===e.windowStage.DEFAULT&&(this.handleFullscreen(t),this.$emit("stagechange",t,this,{state:e.windowStage.FULLSCREEN}));break;case i.Keys.down:this.windowStage===e.windowStage.FULLSCREEN?(this.handleRestore(t),this.$emit("stagechange",t,this,{state:e.windowStage.DEFAULT})):this.windowStage===e.windowStage.DEFAULT&&(this.handleMinimize(t),this.$emit("stagechange",t,this,{state:e.windowStage.MINIMIZED}));break}return}if(!t.ctrlKey)switch(t.keyCode){case i.Keys.esc:this.handleCloseWindow(t);return;case i.Keys.up:t.preventDefault(),this.currentTop=this.currentTop-r;break;case i.Keys.down:t.preventDefault(),this.currentTop=this.currentTop+r;break;case i.Keys.left:t.preventDefault(),this.currentLeft=this.currentLeft-r;break;case i.Keys.right:t.preventDefault(),this.currentLeft=this.currentLeft+r;break;default:return}this.dispatchMoveEvent("move",t,!1,void 0)},getInitialTop(){if(this.$props.top!==void 0)return this.$props.top;if(this.$props.initialTop!==void 0)return this.$props.initialTop;let t=E;return this.$props.height!==void 0?t=this.$props.height:this.$props.initialHeight!==void 0&&(t=this.$props.initialHeight),window.innerHeight/2-t/2},getInitialLeft(){if(this.$props.left!==void 0)return this.$props.left;if(this.$props.initialLeft!==void 0)return this.$props.initialLeft;let t=L;return this.$props.width!==void 0?t=this.$props.width:this.$props.initialWidth!==void 0&&(t=this.$props.initialWidth),window.innerWidth/2-t/2},getInitialWidth(){let t=L;return this.$props.width!==void 0?t=this.$props.width:this.$props.initialWidth!==void 0&&(t=this.$props.initialWidth),t},getInitialHeight(){let t=E;return this.$props.height!==void 0?t=this.$props.height:this.$props.initialHeight!==void 0&&(t=this.$props.initialHeight),t},handleMinimize(t){t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.computedLeft,this.windowCoordinatesState.topBeforeAction=this.computedTop,this.windowCoordinatesState.widthBeforeAction=this.computedWidth,this.windowCoordinatesState.heightBeforeAction=this.computedHeight,this.currentStage=e.windowStage.MINIMIZED,this.currentHeight=0,this.$emit("stagechange",t,this,{state:e.windowStage.MINIMIZED})},handleFullscreen(t){t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.computedLeft,this.windowCoordinatesState.topBeforeAction=this.computedTop,this.windowCoordinatesState.widthBeforeAction=this.computedWidth,this.windowCoordinatesState.heightBeforeAction=this.computedHeight,this.currentLeft=0,this.currentTop=0,this.currentWidth=window.innerWidth,this.currentHeight=window.innerHeight,this.currentStage=e.windowStage.FULLSCREEN,this.$emit("stagechange",t,this,{state:e.windowStage.FULLSCREEN})},handleRestore(t){t.preventDefault(),this.windowStage===e.windowStage.FULLSCREEN?(this.currentStage=e.windowStage.DEFAULT,this.currentLeft=this.windowCoordinatesState.leftBeforeAction,this.currentTop=this.windowCoordinatesState.topBeforeAction,this.currentWidth=this.windowCoordinatesState.widthBeforeAction,this.currentHeight=this.windowCoordinatesState.heightBeforeAction):this.windowStage===e.windowStage.MINIMIZED&&(this.currentStage=e.windowStage.DEFAULT,this.currentHeight=this.windowCoordinatesState.heightBeforeAction),this.$emit("stagechange",t,this,{state:e.windowStage.DEFAULT})},handleCloseWindow(t){t.preventDefault(),this.$emit("close",t,this,{state:void 0})},handleDoubleClick(t){this.$props.doubleClickStageChange&&(this.windowStage===e.windowStage.FULLSCREEN||this.windowStage===e.windowStage.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t))},handleResize(t,n){const s=this.computedWidth,a=this.computedHeight,p=this.$props.minWidth||g,l=this.$props.minHeight||f,h=this.computedTop-t.pageY,d=this.computedLeft-t.pageX,c=t.pageX-this.computedLeft,u=t.pageY-this.computedTop;this.isDragging=!n.end,n.direction.indexOf("n")>=0&&l-(a+h)<0&&(this.currentTop=t.pageY,this.currentHeight=a+h),n.direction.indexOf("s")>=0&&l-u<0&&(this.currentHeight=u),n.direction.indexOf("w")>=0&&p-(s+d)<0&&(this.currentLeft=t.pageX,this.currentWidth=s+d),n.direction.indexOf("e")>=0&&p-c<0&&(this.currentWidth=c),this.dispatchMoveEvent("resize",t,!0,n.end)},dispatchMoveEvent(t,n,s,a){this.$emit(t,{event:n.event,drag:s,end:a,target:this,left:this.currentLeft,top:this.currentTop,width:this.currentWidth,height:this.currentHeight})},handleBrowserWindowResize(){this.windowStage===e.windowStage.FULLSCREEN&&(this.currentWidth=window.innerWidth,this.currentHeight=window.innerHeight)},handleClick(t){this.$emit("overlayclick",t)},getActionBarIndex(t){return t.findIndex(s=>s&&s.tag&&s.tag.toLowerCase().indexOf("dialogactionsbar")!==-1||s.componentOptions&&s.componentOptions.tag&&s.componentOptions.tag.toLowerCase().indexOf("actions-bar")!==-1||s.type&&s.type.name&&s.type.name.toLowerCase().indexOf("dialogactionsbar")!==-1)},generateTitleId(){return"window-title-"+i.guid()}},render(){const t=i.templateRendering.call(this,this.$props.titleRender,i.getListeners.call(this)),n=i.templateRendering.call(this,this.$props.closeButton,i.getListeners.call(this)),s=i.templateRendering.call(this,this.$props.minimizeButton,i.getListeners.call(this)),a=i.templateRendering.call(this,this.$props.maximizeButton,i.getListeners.call(this)),p=i.templateRendering.call(this,this.$props.restoreButton,i.getListeners.call(this)),l=i.getDefaultSlots(this),h=l||[],d=this.getActionBarIndex(h);let c;d!==-1&&(c=h[d],h.splice(d,1));const u=this.showLicenseWatermark?o.createVNode(i.WatermarkOverlay,null,null):null,m=o.createVNode("div",{class:this.wrapperClass,ref:"wrapper",dir:this.$props.dir},[this.$props.modal&&o.createVNode("div",{class:"k-overlay",onClick:this.handleClick},null),o.createVNode("div",{tabindex:0,onFocus:w=>w.target.classList.add("k-focus"),onBlur:w=>w.target.classList.remove("k-focus"),onKeydown:this.handleKeyDown,ref:"windowElement",class:this.windowElementClass,role:"dialog","aria-modal":this.$props.modal?!0:void 0,"aria-labelledby":this.titleId,style:{top:this.computedTop+"px",left:this.computedLeft+"px",width:this.computedWidth+"px",height:this.computedHeight+"px"||"",...this.$props.windowStyle}},[o.createVNode(i.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[o.createVNode($.WindowTitleBar,{stage:this.windowStage,title:this.$props.title,titleId:this.titleId,titleRender:t,onDoubleclick:this.handleDoubleClick,onMinimizeclick:this.handleMinimize,onFullscreenclick:this.handleFullscreen,onRestoreclick:this.handleRestore,onCloseclick:this.handleCloseWindow,closeButton:n,minimizeButton:s,maximizeButton:a,restoreButton:p},null)]}),this.windowStage!==e.windowStage.MINIMIZED?[o.createVNode("div",{class:"k-window-content"},[l]),c]:null,this.windowStage===e.windowStage.DEFAULT&&this.$props.resizable?o.createVNode(I.ResizeHandlers,{onResize:this.handleResize},null):null,u])]);return this.$props.appendTo?o.createVNode("div",null,[m]):m}});exports.Window=D;