@progress/kendo-vue-layout/tilelayout/Tile.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 l=require("vue"),d=require("@progress/kendo-vue-common"),u=require("./ResizeHandlers.js");function f(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!l.isVNode(t)}const g=["k-card-title","k-card-body","k-tilelayout-item-body","k-tilelayout-item","k-tilelayout-item-header","k-resize-handle"],p=200,m=l.defineComponent({name:"KendoTile",inheritAttrs:!1,props:{defaultPosition:{type:Object,required:!0},index:Number,tile:Object,hintStyle:Object,hintClass:String,header:[String,Function,Object],body:[String,Function,Object],item:[String,Function,Object],resizable:{type:[String,Boolean],default:!0,validator:function(t){return["horizontal","vertical",!0,!1].includes(t)}},reorderable:{type:Boolean,default:!0},tabIndex:{type:Number,default:0},ariaDescribedBy:String,ignoreDrag:Function,onUpdate:Function},created(){this.oldSize={},this.dragging=!1,this.resizing=!1,this.currentIgnoreDrag=!1,this.pressOffset={x:0,y:0},this.pressXY={x:0,y:0},this.currentTranslate={x:0,y:0},this.prevDefaultPosition=this.$props.defaultPosition,this.preventDataOps=void 0},computed:{wrapperClass(){return{"k-tilelayout-item":!0,"k-card":!0,"k-cursor-grab":this.reorderable}}},data(){return{rtl:!1,grabbed:!1,showHint:!1}},mounted(){this.$el&&(this.element=this.$el.nodeType===3||this.$el.nodeType===8?this.$el.nextElementSibling:this.$el,this.draggable=this.$refs.draggable,getComputedStyle(this.element).direction==="rtl"&&(this.rtl=!0))},watch:{defaultPosition:function(t,e){this.prevDefaultPosition=e}},beforeUpdate(){this.oldSize={};const t=this.dragElement();return t&&(this.oldSize=t.getBoundingClientRect()),null},updated(){const t=this.dragElement();if(this.hintElement=d.getRef(this,"hintElement"),!t)return;const e=t.getBoundingClientRect(),s=this.oldSize;if(this.resizing){const i=e.width-s.width;if(this.rtl){const a=parseFloat(t.style.marginLeft||"0");t.style.marginLeft=a-i+"px"}else{const a=parseFloat(t.style.marginRight||"0");t.style.marginRight=a+i+"px"}this.pressXY.x+=this.rtl?-i:i;const o=e.height-s.height,h=parseFloat(t.style.height.substring(12));t.style.height=`calc(100% + ${h+o}px)`,this.pressXY.y+=o}const r=s.left-e.left,n=s.top-e.top;if(!(r===0&&n===0)){if(this.dragging){(this.prevDefaultPosition.order!==this.$props.defaultPosition.order||this.prevDefaultPosition.col!==this.$props.defaultPosition.col)&&(this.currentTranslate.x=0,this.currentTranslate.y=0,t.style.transform="");return}Math.abs(n)<15&&Math.abs(r)<15||requestAnimationFrame(()=>{const i=this.element;i&&(i.style.transform=`translate(${r}px, ${n}px)`,i.style.transition="transform 0s",requestAnimationFrame(()=>{i.style.transform="",i.style.transition=`transform ${p}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))})}},render(){const t=d.getDefaultSlots(this);clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(this.preventDataOps),d.canUseDOM&&(this.preventDataOps=window.setTimeout(()=>{this.preventDataOps=void 0},200)));const e=this.$props.defaultPosition,s=this.$props.resizable,r={gridColumnStart:e.col,gridColumnEnd:`span ${e.colSpan}`,gridRowStart:e.row,gridRowEnd:`span ${e.rowSpan}`,outline:"none",order:e.order,...this.$props.hintStyle},n={gridColumnStart:e.col,gridColumnEnd:`span ${e.colSpan}`,gridRowStart:e.row,gridRowEnd:`span ${e.rowSpan}`,order:e.order},i=l.createVNode("div",{class:this.wrapperClass,style:{height:"100%",...n},role:"listitem",tabindex:this.$props.tabIndex,"aria-keyshortcuts":"Enter","aria-ariaDescribedBy":this.$props.ariaDescribedBy,onTouchstart:this.touchStart},[t,s&&s!=="vertical"&&l.createVNode(u.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,direction:"ew",rtl:this.rtl},null),s&&s!=="horizontal"&&l.createVNode(u.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,direction:"ns",rtl:this.rtl},null),s===!0&&l.createVNode(u.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,direction:this.rtl?"nesw":"nwse",rtl:this.rtl},null)]);return[this.showHint&&l.createVNode("div",{ref:d.setRef(this,"hintElement"),style:{position:"absolute",...r},class:d.classNames("k-layout-item-hint k-layout-item-hint-reorder",this.$props.hintClass)},null),l.createVNode(d.Draggable,{ref:"draggable",onDrag:this.handleDrag,onRelease:this.handleRelease,onPress:this.handlePress},f(i)?i:{default:()=>[i]})]},methods:{touchStart(t){(this.tile.dragClasses?[...g,...this.tile.dragClasses]:g).some(s=>t.target.classList.contains(s))&&t.preventDefault()},dragElement(){return this.draggable&&this.draggable.element},handleResize(t,e){const s=this.dragElement();if(e.end){this.handleRelease();return}if(!this.reorderable||!this.element)return;const r=t.clientX,n=t.clientY;this.resizing=!0;const i=(e.direction!=="ns"?r-this.pressXY.x:0)*(this.rtl?-1:1),o=e.direction!=="ew"?n-this.pressXY.y:0;if(s&&(this.rtl?s.style.marginLeft=-i+"px":s.style.marginRight=-i+"px",s.style.height=`calc(100% + ${o}px)`),this.showHint=!0,this.hintElement&&this.hintElement.classList.add("k-layout-item-hint-resize"),this.element.classList.add("k-layout-item-hint","k-layout-item-hint-resize"),this.preventDataOps)return;let h=0,a=0;const c=this.element.getBoundingClientRect();i>c.width/this.$props.defaultPosition.colSpan/3&&(h=1),i<-c.width/this.$props.defaultPosition.colSpan/1.25&&(h=-1),o>c.height/this.$props.defaultPosition.rowSpan/3&&(a=1),o<-c.height/this.$props.defaultPosition.rowSpan/1.25&&(a=-1),(h!==0||a!==0)&&this.$emit("update",this.$props.index,0,0,a,h,!0)},handlePress(t){const e=this.dragElement();if(!this.reorderable||!e)return;if(this.pressXY={x:t.clientX,y:t.clientY},this.currentIgnoreDrag=!1,this.$props.ignoreDrag&&this.$props.ignoreDrag(t.originalEvent)){this.currentIgnoreDrag=!0;return}this.element&&(this.element.style.zIndex="10",this.element.classList.add("k-layout-item-hint"),this.showHint=!0),e.classList.remove("k-cursor-grab"),e.classList.add("k-cursor-grabbing"),this.grabbed=!0;const s=e.getBoundingClientRect();this.pressOffset={x:t.clientX-s.x,y:t.clientY-s.y}},handleDrag(t){if(!this.reorderable||this.currentIgnoreDrag)return;const e=this.dragElement();if(t.originalEvent.defaultPrevented||!e)return;this.dragging=!0,t.originalEvent.preventDefault();const s=e.getBoundingClientRect();if(this.currentTranslate={x:t.clientX-s.x-this.pressOffset.x+this.currentTranslate.x,y:t.clientY-s.y-this.pressOffset.y+this.currentTranslate.y},e.style.transform=`translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`,e.style.transition="transform 0s",this.preventDataOps)return;let r=0,n=0;this.currentTranslate.y>.7*s.height/this.$props.defaultPosition.rowSpan&&(n=1),this.currentTranslate.y<.7*-s.height/this.$props.defaultPosition.rowSpan&&(n=-1),this.currentTranslate.x>.7*s.width/this.$props.defaultPosition.colSpan&&(r=1),this.currentTranslate.x<.7*-s.width/this.$props.defaultPosition.colSpan&&(r=-1),this.$emit("update",this.$props.index,n,this.rtl?-r:r,0,0)},handleRelease(){if(!this.reorderable)return;this.dragging=this.resizing=!1,this.currentTranslate={x:0,y:0},this.element&&(this.element.style.zIndex="1",this.element.classList.remove("k-layout-item-hint","k-layout-item-hint-resize"),this.hintElement&&this.hintElement.classList.remove("k-layout-item-hint-resize"),this.showHint=!1);const t=this.dragElement();t&&(t.style.transform="translate(0px, 0px)",t.style.transition=`transform ${p}ms cubic-bezier(0.2, 0, 0, 1) 0s`,t.style.marginRight="0px",t.style.marginLeft="0px",t.style.height="100%",t.classList.remove("k-cursor-grabbing"),t.classList.add("k-cursor-grab"),this.grabbed=!1)}}});exports.Tile=m;