@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/tilelayout/ResizeHandlers.mjs

@@ -0,0 +1,102 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as r, createVNode as s } from "vue";
+import { Draggable as n } from "@progress/kendo-vue-common";
+const o = /* @__PURE__ */ r({
+  name: "KendoResizeHandlers",
+  props: {
+    direction: String,
+    rtl: Boolean,
+    onResize: Function,
+    onPress: Function
+  },
+  computed: {
+    handleClass() {
+      return "k-resize-handle k-cursor-" + this.direction + "-resize";
+    },
+    dirStyles() {
+      const {
+        direction: e
+      } = this.$props;
+      switch (e) {
+        case "ew":
+          return this.rtl ? {
+            top: 0,
+            width: "9px",
+            left: 0,
+            right: ""
+          } : {
+            top: 0,
+            width: "9px",
+            right: 0,
+            left: ""
+          };
+        case "ns":
+          return {
+            left: 0,
+            height: "9px"
+          };
+        case "nesw":
+        case "nwse":
+          return this.rtl ? {
+            width: "9px",
+            height: "9px",
+            right: "",
+            left: 0
+          } : {
+            width: "9px",
+            height: "9px",
+            right: 0,
+            left: ""
+          };
+        default:
+          return {};
+      }
+    },
+    handleStyle() {
+      return {
+        bottom: 0,
+        right: 0,
+        ...this.dirStyles
+      };
+    }
+  },
+  render() {
+    const {
+      direction: e
+    } = this.$props;
+    return s(n, {
+      onPress: this.handlePress,
+      onDrag: (t) => {
+        this.handleResize(t, !1, e);
+      },
+      onRelease: (t) => {
+        this.handleResize(t, !0, e);
+      }
+    }, {
+      default: () => [s("div", {
+        class: this.handleClass,
+        style: this.handleStyle
+      }, null)]
+    });
+  },
+  methods: {
+    handleResize(e, t, i) {
+      e.originalEvent.preventDefault(), this.$emit("resize", e, {
+        end: t,
+        direction: i
+      });
+    },
+    handlePress(e) {
+      this.$emit("press", e);
+    }
+  }
+});
+export {
+  o as ResizeHandlers
+};

package/tilelayout/Tile.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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;

package/tilelayout/Tile.mjs

@@ -0,0 +1,255 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as g, createVNode as h, isVNode as f } from "vue";
+import { getRef as m, getDefaultSlots as y, canUseDOM as b, setRef as x, classNames as $, Draggable as S } from "@progress/kendo-vue-common";
+import { ResizeHandlers as c } from "./ResizeHandlers.mjs";
+function w(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !f(t);
+}
+const u = ["k-card-title", "k-card-body", "k-tilelayout-item-body", "k-tilelayout-item", "k-tilelayout-item-header", "k-resize-handle"], p = 200, R = /* @__PURE__ */ g({
+  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 = m(this, "hintElement"), !t)
+      return;
+    const e = t.getBoundingClientRect(), i = this.oldSize;
+    if (this.resizing) {
+      const s = e.width - i.width;
+      if (this.rtl) {
+        const a = parseFloat(t.style.marginLeft || "0");
+        t.style.marginLeft = a - s + "px";
+      } else {
+        const a = parseFloat(t.style.marginRight || "0");
+        t.style.marginRight = a + s + "px";
+      }
+      this.pressXY.x += this.rtl ? -s : s;
+      const l = e.height - i.height, o = parseFloat(t.style.height.substring(12));
+      t.style.height = `calc(100% + ${o + l}px)`, this.pressXY.y += l;
+    }
+    const r = i.left - e.left, n = i.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 s = this.element;
+        s && (s.style.transform = `translate(${r}px, ${n}px)`, s.style.transition = "transform 0s", requestAnimationFrame(() => {
+          s.style.transform = "", s.style.transition = `transform ${p}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
+        }));
+      });
+    }
+  },
+  render() {
+    const t = y(this);
+    clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), b && (this.preventDataOps = window.setTimeout(() => {
+      this.preventDataOps = void 0;
+    }, 200)));
+    const e = this.$props.defaultPosition, i = 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
+    }, s = h("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, i && i !== "vertical" && h(c, {
+      onPress: this.handlePress,
+      onResize: this.handleResize,
+      direction: "ew",
+      rtl: this.rtl
+    }, null), i && i !== "horizontal" && h(c, {
+      onPress: this.handlePress,
+      onResize: this.handleResize,
+      direction: "ns",
+      rtl: this.rtl
+    }, null), i === !0 && h(c, {
+      onPress: this.handlePress,
+      onResize: this.handleResize,
+      direction: this.rtl ? "nesw" : "nwse",
+      rtl: this.rtl
+    }, null)]);
+    return [this.showHint && h("div", {
+      ref: x(this, "hintElement"),
+      style: {
+        position: "absolute",
+        ...r
+      },
+      class: $("k-layout-item-hint k-layout-item-hint-reorder", this.$props.hintClass)
+    }, null), h(S, {
+      ref: "draggable",
+      onDrag: this.handleDrag,
+      onRelease: this.handleRelease,
+      onPress: this.handlePress
+    }, w(s) ? s : {
+      default: () => [s]
+    })];
+  },
+  methods: {
+    touchStart(t) {
+      (this.tile.dragClasses ? [...u, ...this.tile.dragClasses] : u).some((i) => t.target.classList.contains(i)) && t.preventDefault();
+    },
+    dragElement() {
+      return this.draggable && this.draggable.element;
+    },
+    handleResize(t, e) {
+      const i = 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 s = (e.direction !== "ns" ? r - this.pressXY.x : 0) * (this.rtl ? -1 : 1), l = e.direction !== "ew" ? n - this.pressXY.y : 0;
+      if (i && (this.rtl ? i.style.marginLeft = -s + "px" : i.style.marginRight = -s + "px", i.style.height = `calc(100% + ${l}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 o = 0, a = 0;
+      const d = this.element.getBoundingClientRect();
+      s > d.width / this.$props.defaultPosition.colSpan / 3 && (o = 1), s < -d.width / this.$props.defaultPosition.colSpan / 1.25 && (o = -1), l > d.height / this.$props.defaultPosition.rowSpan / 3 && (a = 1), l < -d.height / this.$props.defaultPosition.rowSpan / 1.25 && (a = -1), (o !== 0 || a !== 0) && this.$emit("update", this.$props.index, 0, 0, a, o, !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 i = e.getBoundingClientRect();
+      this.pressOffset = {
+        x: t.clientX - i.x,
+        y: t.clientY - i.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 i = e.getBoundingClientRect();
+      if (this.currentTranslate = {
+        x: t.clientX - i.x - this.pressOffset.x + this.currentTranslate.x,
+        y: t.clientY - i.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 > 0.7 * i.height / this.$props.defaultPosition.rowSpan && (n = 1), this.currentTranslate.y < 0.7 * -i.height / this.$props.defaultPosition.rowSpan && (n = -1), this.currentTranslate.x > 0.7 * i.width / this.$props.defaultPosition.colSpan && (r = 1), this.currentTranslate.x < 0.7 * -i.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);
+    }
+  }
+});
+export {
+  R as Tile
+};

package/tilelayout/TileLayout.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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"),s=require("@progress/kendo-vue-common"),f=require("../package-metadata.js"),S=require("./Tile.js"),k={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(){s.validatePackage(f.packageMetadata),this.showLicenseWatermark=s.shouldShowValidationUI(f.packageMetadata)},data(){return{currentPositions:[],showLicenseWatermark:!1}},computed:{compPositions(){return this.positions?this.positions.map((t,o)=>Object.assign({order:o,rowSpan:1,colSpan:1},t)):this.items&&this.currentPositions.length?this.currentPositions.map((t,o)=>Object.assign({order:o,rowSpan:1,colSpan:1},t)):(this.$props.items||[]).map((t,o)=>Object.assign({order:o,rowSpan:1,colSpan:1},t.defaultPosition))},wrapperClass(){const{autoFlow:t}=this.$props;return{"k-tilelayout":!0,"k-pos-relative":!0,[k[t]]:!0}}},render(){const{columns:t=3,columnWidth:o="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 o=="number"?o+"px":o}))`,gridAutoRows:`minmax(0px, ${typeof i=="number"?i+"px":i})`,gap:h,padding:h},c=this.showLicenseWatermark?n.createVNode(s.WatermarkOverlay,null,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||s.guid(),u=s.templateRendering.call(this,e.item,s.getListeners.call(this)),g=s.getTemplate.call(this,{h:n.h,template:u,defaultRendering:null,additionalProps:{tile:e,index:a}}),m=s.templateRendering.call(this,e.header,s.getListeners.call(this)),y=s.getTemplate.call(this,{h:n.h,template:m,defaultRendering:null,additionalProps:{tile:e,index:a,id:d,headerText:e.headerText}}),b=s.templateRendering.call(this,e.body,s.getListeners.call(this)),w=s.getTemplate.call(this,{h:n.h,template:b,defaultRendering:null,additionalProps:{tile:e,index:a,bodyText:e.bodyText}});return n.createVNode(S.Tile,{key:this.$props.dataItemKey?s.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,o,r,i=0,p=0,h){if(o===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+o);a&&a!==e&&(e.order+=o,a.order+=-o,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:o,col:r}))}}});exports.TileLayout=$;

package/tilelayout/TileLayout.mjs

@@ -0,0 +1,181 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as P, createVNode as p, h as g } from "vue";
+import { validatePackage as T, shouldShowValidationUI as x, WatermarkOverlay as v, guid as L, templateRendering as f, getListeners as y, getTemplate as w, getter as W } from "@progress/kendo-vue-common";
+import { packageMetadata as b } from "../package-metadata.mjs";
+import { Tile as C } from "./Tile.mjs";
+const I = {
+  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"
+}, K = /* @__PURE__ */ P({
+  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(e) {
+        return ["column", "row", "column dense", "row dense", "unset"].includes(e);
+      }
+    },
+    ignoreDrag: Function
+  },
+  created() {
+    T(b), this.showLicenseWatermark = x(b);
+  },
+  data() {
+    return {
+      currentPositions: [],
+      showLicenseWatermark: !1
+    };
+  },
+  computed: {
+    compPositions() {
+      return this.positions ? this.positions.map((e, o) => Object.assign({
+        order: o,
+        rowSpan: 1,
+        colSpan: 1
+      }, e)) : this.items && this.currentPositions.length ? this.currentPositions.map((e, o) => Object.assign({
+        order: o,
+        rowSpan: 1,
+        colSpan: 1
+      }, e)) : (this.$props.items || []).map((e, o) => Object.assign({
+        order: o,
+        rowSpan: 1,
+        colSpan: 1
+      }, e.defaultPosition));
+    },
+    wrapperClass() {
+      const {
+        autoFlow: e
+      } = this.$props;
+      return {
+        "k-tilelayout": !0,
+        "k-pos-relative": !0,
+        [I[e]]: !0
+      };
+    }
+  },
+  render() {
+    const {
+      columns: e = 3,
+      columnWidth: o = "1fr",
+      gap: s,
+      rowHeight: i = "1fr",
+      items: c = []
+    } = this.$props, m = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, n = {
+      gridTemplateColumns: `repeat(${e}, minmax(0px, ${typeof o == "number" ? o + "px" : o}))`,
+      gridAutoRows: `minmax(0px, ${typeof i == "number" ? i + "px" : i})`,
+      gap: m,
+      padding: m
+    }, a = this.showLicenseWatermark ? p(v, null, null) : null;
+    return p("div", {
+      dir: this.$props.dir,
+      class: this.wrapperClass,
+      style: n,
+      id: this.$props.id,
+      role: "list"
+    }, [c.map(function(t, r) {
+      const l = t && t.id || L(), d = f.call(this, t.item, y.call(this)), h = w.call(this, {
+        h: g,
+        template: d,
+        defaultRendering: null,
+        additionalProps: {
+          tile: t,
+          index: r
+        }
+      }), u = f.call(this, t.header, y.call(this)), S = w.call(this, {
+        h: g,
+        template: u,
+        defaultRendering: null,
+        additionalProps: {
+          tile: t,
+          index: r,
+          id: l,
+          headerText: t.headerText
+        }
+      }), k = f.call(this, t.body, y.call(this)), $ = w.call(this, {
+        h: g,
+        template: k,
+        defaultRendering: null,
+        additionalProps: {
+          tile: t,
+          index: r,
+          bodyText: t.bodyText
+        }
+      });
+      return p(C, {
+        key: this.$props.dataItemKey ? W(this.$props.dataItemKey)(t) : r,
+        onUpdate: this.updateHandle,
+        defaultPosition: this.compPositions[r],
+        index: r,
+        resizable: t.resizable,
+        reorderable: t.reorderable,
+        style: t.style,
+        class: t.class,
+        tile: t,
+        hintClass: t.hintClass,
+        hintStyle: t.hintStyle,
+        ignoreDrag: this.$props.ignoreDrag,
+        "aria-describedby": l,
+        "tab-index": t.tabIndex
+      }, {
+        default: () => [t.item ? h : [p("div", {
+          class: "k-tilelayout-item-header k-card-header"
+        }, [t.header ? S : p("h5", {
+          class: "k-card-title",
+          id: l
+        }, [t.headerText])]), p("div", {
+          class: "k-tilelayout-item-body k-card-body"
+        }, [t.body ? $ : t.bodyText])]]
+      });
+    }, this), a]);
+  },
+  methods: {
+    focus() {
+      this.$el && this.$el.focus();
+    },
+    updateHandle(e, o, s, i = 0, c = 0, m) {
+      if (o === 0 && s === 0 && !c && !i)
+        return;
+      let n = !1;
+      const a = this.compPositions.map((u) => Object.assign({}, u)), t = a[e], r = a.find((u) => u.order === t.order + o);
+      r && r !== t && (t.order += o, r.order += -o, n = !0);
+      const l = t.col + s;
+      s !== 0 && l >= 1 && l + t.colSpan <= (this.$props.columns || 3) + 1 && (t.col = l, n = !0);
+      const d = t.colSpan + c;
+      c && d >= 1 && d + t.col <= (this.$props.columns || 3) + 1 && (t.colSpan = d, n = !0);
+      const h = t.rowSpan + i;
+      i && h >= 1 && (t.rowSpan = h, n = !0), n && (this.currentPositions = a, m && this.$emit("tileresize", {
+        value: a,
+        index: e,
+        rowSpan: i,
+        colSpan: c
+      }), this.$emit("reposition", {
+        value: a,
+        index: e,
+        row: o,
+        col: s
+      }));
+    }
+  }
+});
+export {
+  K as TileLayout
+};