@progress/kendo-vue-layout/tilelayout/TileLayout.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 n=require("vue"),o=require("@progress/kendo-vue-common"),f=require("../package-metadata.js"),k=require("./Tile.js"),S={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:"k-grid-flow-unset"},$=n.defineComponent({name:"KendoTileLayout",props:{id:String,dir:String,gap:Object,columns:Number,columnWidth:[Number,String],rowHeight:[Number,String],dataItemKey:String,items:Array,positions:Array,autoFlow:{type:String,default:"column",validator:function(t){return["column","row","column dense","row dense","unset"].includes(t)}},ignoreDrag:Function},created(){o.validatePackage(f.packageMetadata),this.showLicenseWatermark=o.shouldShowValidationUI(f.packageMetadata),this.licenseMessage=o.getLicenseMessage(f.packageMetadata)},data(){return{currentPositions:[],showLicenseWatermark:!1,licenseMessage:void 0}},computed:{compPositions(){return this.positions?this.positions.map((t,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},t)):this.items&&this.currentPositions.length?this.currentPositions.map((t,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},t)):(this.$props.items||[]).map((t,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},t.defaultPosition))},wrapperClass(){const{autoFlow:t}=this.$props;return{"k-tilelayout":!0,"k-pos-relative":!0,[S[t]]:!0}}},render(){const{columns:t=3,columnWidth:s="1fr",gap:r,rowHeight:i="1fr",items:p=[]}=this.$props,h=r?`${typeof r.rows=="number"?r.rows+"px":r.rows} ${typeof r.columns=="number"?r.columns+"px":r.columns}`:16,l={gridTemplateColumns:`repeat(${t}, minmax(0px, ${typeof s=="number"?s+"px":s}))`,gridAutoRows:`minmax(0px, ${typeof i=="number"?i+"px":i})`,gap:h,padding:h},c=this.showLicenseWatermark?n.createVNode(o.WatermarkOverlay,{message:this.licenseMessage},null):null;return n.createVNode("div",{dir:this.$props.dir,class:this.wrapperClass,style:l,id:this.$props.id,role:"list"},[p.map(function(e,a){const d=e&&e.id||o.guid(),u=o.templateRendering.call(this,e.item,o.getListeners.call(this)),g=o.getTemplate.call(this,{h:n.h,template:u,defaultRendering:null,additionalProps:{tile:e,index:a}}),m=o.templateRendering.call(this,e.header,o.getListeners.call(this)),y=o.getTemplate.call(this,{h:n.h,template:m,defaultRendering:null,additionalProps:{tile:e,index:a,id:d,headerText:e.headerText}}),b=o.templateRendering.call(this,e.body,o.getListeners.call(this)),w=o.getTemplate.call(this,{h:n.h,template:b,defaultRendering:null,additionalProps:{tile:e,index:a,bodyText:e.bodyText}});return n.createVNode(k.Tile,{key:this.$props.dataItemKey?o.getter(this.$props.dataItemKey)(e):a,onUpdate:this.updateHandle,defaultPosition:this.compPositions[a],index:a,resizable:e.resizable,reorderable:e.reorderable,style:e.style,class:e.class,tile:e,hintClass:e.hintClass,hintStyle:e.hintStyle,ignoreDrag:this.$props.ignoreDrag,"aria-describedby":d,"tab-index":e.tabIndex},{default:()=>[e.item?g:[n.createVNode("div",{class:"k-tilelayout-item-header k-card-header"},[e.header?y:n.createVNode("h5",{class:"k-card-title",id:d},[e.headerText])]),n.createVNode("div",{class:"k-tilelayout-item-body k-card-body"},[e.body?w:e.bodyText])]]})},this),c])},methods:{focus(){this.$el&&this.$el.focus()},updateHandle(t,s,r,i=0,p=0,h){if(s===0&&r===0&&!p&&!i)return;let l=!1;const c=this.compPositions.map(m=>Object.assign({},m)),e=c[t],a=c.find(m=>m.order===e.order+s);a&&a!==e&&(e.order+=s,a.order+=-s,l=!0);const d=e.col+r;r!==0&&d>=1&&d+e.colSpan<=(this.$props.columns||3)+1&&(e.col=d,l=!0);const u=e.colSpan+p;p&&u>=1&&u+e.col<=(this.$props.columns||3)+1&&(e.colSpan=u,l=!0);const g=e.rowSpan+i;i&&g>=1&&(e.rowSpan=g,l=!0),l&&(this.currentPositions=c,h&&this.$emit("tileresize",{value:c,index:t,rowSpan:i,colSpan:p}),this.$emit("reposition",{value:c,index:t,row:s,col:r}))}}});exports.TileLayout=$;