@progress/kendo-vue-layout 7.0.0-develop.4 → 7.0.0-develop.6

package/tabstrip/TabStrip.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as g, createVNode as n, h as T } from "vue";
-import { TabStripNavigation as o } from "./TabStripNavigation.mjs";
+import { defineComponent as f, createVNode as n, h as T } from "vue";
+import { TabStripNavigation as l } from "./TabStripNavigation.mjs";
 import { TabStripContent as k } from "./TabStripContent.mjs";
-import { classNames as v, kendoThemeMaps as y, WatermarkOverlay as S, Keys as i, validatePackage as w, shouldShowValidationUI as x, templateRendering as l, getListeners as h, getDefaultSlots as N } from "@progress/kendo-vue-common";
-import { packageMetadata as d } from "../package-metadata.mjs";
-const R = /* @__PURE__ */ g({
+import { classNames as v, kendoThemeMaps as y, WatermarkOverlay as S, Keys as s, validatePackage as w, shouldShowValidationUI as x, getLicenseMessage as N, templateRendering as h, getListeners as d, getDefaultSlots as $ } from "@progress/kendo-vue-common";
+import { packageMetadata as r } from "../package-metadata.mjs";
+const C = /* @__PURE__ */ f({
   name: "KendoTabStrip",
   emits: {
     select: null
@@ -44,13 +44,14 @@ const R = /* @__PURE__ */ g({
     return {
       currentShowAll: !0,
       currentTabs: [],
-      showLicenseWatermark: !1
+      showLicenseWatermark: !1,
+      licenseMessage: void 0
     };
   },
   computed: {
     compTabs() {
       return this.tabs !== void 0 ? this.tabs.map(function(t) {
-        const e = l.call(this, t.content, h.call(this)), a = l.call(this, t.titleRender, h.call(this));
+        const e = h.call(this, t.content, d.call(this)), a = h.call(this, t.titleRender, d.call(this));
         return {
           ...t,
           content: e,
@@ -68,13 +69,13 @@ const R = /* @__PURE__ */ g({
   },
   created() {
     this.keyBinding = {
-      [i.left]: () => this.prevNavigatableTab(),
-      [i.right]: () => this.nextNavigatableTab(),
-      [i.down]: () => this.nextNavigatableTab(),
-      [i.up]: () => this.prevNavigatableTab(),
-      [i.home]: () => 0,
-      [i.end]: () => this.compTabs.length - 1
-    }, w(d), this.showLicenseWatermark = x(d);
+      [s.left]: () => this.prevNavigatableTab(),
+      [s.right]: () => this.nextNavigatableTab(),
+      [s.down]: () => this.nextNavigatableTab(),
+      [s.up]: () => this.prevNavigatableTab(),
+      [s.home]: () => 0,
+      [s.end]: () => this.compTabs.length - 1
+    }, w(r), this.showLicenseWatermark = x(r), this.licenseMessage = N(r);
   },
   watch: {
     selected(t, e) {
@@ -85,7 +86,7 @@ const R = /* @__PURE__ */ g({
   },
   methods: {
     addRenderTitle(t, e) {
-      const a = this.compTabs.findIndex((s) => s.tabId === t);
+      const a = this.compTabs.findIndex((i) => i.tabId === t);
       this.compTabs[a].titleRender = e;
     },
     addTab(t) {
@@ -103,23 +104,23 @@ const R = /* @__PURE__ */ g({
     onKeyDown(t) {
       let e;
       switch (t.keyCode) {
-        case i.left:
-          e = this.keyBinding[this.invertKeys(i.left, i.right)];
+        case s.left:
+          e = this.keyBinding[this.invertKeys(s.left, s.right)];
           break;
-        case i.right:
-          e = this.keyBinding[this.invertKeys(i.right, i.left)];
+        case s.right:
+          e = this.keyBinding[this.invertKeys(s.right, s.left)];
           break;
-        case i.up:
-          e = this.keyBinding[i.up];
+        case s.up:
+          e = this.keyBinding[s.up];
           break;
-        case i.down:
-          e = this.keyBinding[i.down];
+        case s.down:
+          e = this.keyBinding[s.down];
           break;
-        case i.home:
-          e = this.keyBinding[i.home];
+        case s.home:
+          e = this.keyBinding[s.home];
           break;
-        case i.end:
-          e = this.keyBinding[i.end];
+        case s.end:
+          e = this.keyBinding[s.end];
           break;
       }
       e && (t.preventDefault(), this.onSelect(e()));
@@ -150,10 +151,10 @@ const R = /* @__PURE__ */ g({
       if (a < 0)
         return this.lastNavigatableTab();
       if (t)
-        for (let s = a; s > -1; s--) {
-          if (!this.compTabs[s].disabled)
-            return s;
-          if (s === 0)
+        for (let i = a; i > -1; i--) {
+          if (!this.compTabs[i].disabled)
+            return i;
+          if (i === 0)
             return this.lastNavigatableTab();
         }
     },
@@ -164,10 +165,10 @@ const R = /* @__PURE__ */ g({
       if (a >= t)
         return this.firstNavigatableTab();
       if (t)
-        for (let s = a; s < t; s++) {
-          if (!this.compTabs[s].disabled)
-            return s;
-          if (s + 1 === t)
+        for (let i = a; i < t; i++) {
+          if (!this.compTabs[i].disabled)
+            return i;
+          if (i + 1 === t)
             return this.firstNavigatableTab();
         }
     }
@@ -177,38 +178,40 @@ const R = /* @__PURE__ */ g({
       tabPosition: t,
       size: e,
       tabIndex: a = 0
-    } = this.$props, s = t === "bottom", c = v("k-widget", "k-pos-relative", "k-tabstrip", {
+    } = this.$props, i = t === "bottom", c = v("k-widget", "k-pos-relative", "k-tabstrip", {
       [`k-tabstrip-${y.sizeMap[e] || e}`]: e,
       "k-tabstrip-left": t === "left",
       "k-tabstrip-right": t === "right",
       "k-tabstrip-bottom": t === "bottom",
       "k-tabstrip-top": t === "top"
-    }), b = this.showLicenseWatermark ? n(S, null, null) : null, p = function(m) {
+    }), b = this.showLicenseWatermark ? n(S, {
+      message: this.licenseMessage
+    }, null) : null, p = function(m) {
       const {
-        selected: r
-      } = m, u = N(this), f = {
-        index: r,
+        selected: o
+      } = m, g = $(this), u = {
+        index: o,
         animation: this.$props.animation,
         tabs: this.compTabs,
         hasTabs: this.tabs !== void 0,
-        selected: r,
+        selected: o,
         showAll: this.currentShowAll
       };
       return T(k, {
-        ...f
-      }, u);
+        ...u
+      }, g);
     };
     return n("div", {
       dir: this.$props.dir,
       class: c
-    }, [!s && n(o, {
+    }, [!i && n(l, {
       tabs: this.compTabs,
       selected: this.$props.selected,
       tabAlignment: this.$props.tabAlignment,
       onSelect: this.onSelect,
       onKeydown: this.onKeyDown,
       tabIndex: a
-    }, null), p.call(this, this.$props), s && n(o, {
+    }, null), p.call(this, this.$props), i && n(l, {
       tabs: this.compTabs,
       tabAlignment: this.$props.tabAlignment,
       selected: this.$props.selected,
@@ -219,5 +222,5 @@ const R = /* @__PURE__ */ g({
   }
 });
 export {
-  R as TabStrip
+  C as TabStrip
 };

package/tilelayout/TileLayout.js

@@ -5,4 +5,4 @@
  * 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=$;
+"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=$;

package/tilelayout/TileLayout.mjs

@@ -6,10 +6,10 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as P, createVNode as p, h as g } from "vue";
-import { WatermarkOverlay as T, guid as x, templateRendering as f, getListeners as y, getTemplate as w, getter as v, validatePackage as L, shouldShowValidationUI as W } from "@progress/kendo-vue-common";
+import { WatermarkOverlay as T, guid as x, templateRendering as f, getListeners as y, getTemplate as w, getter as L, validatePackage as v, shouldShowValidationUI as W, getLicenseMessage as C } from "@progress/kendo-vue-common";
 import { packageMetadata as b } from "../package-metadata.mjs";
-import { Tile as C } from "./Tile.mjs";
-const I = {
+import { Tile as I } from "./Tile.mjs";
+const j = {
   column: "k-grid-flow-col",
   row: "k-grid-flow-row",
   "column dense": "k-grid-flow-col-dense",
@@ -30,120 +30,123 @@ const I = {
     autoFlow: {
       type: String,
       default: "column",
-      validator: function(e) {
-        return ["column", "row", "column dense", "row dense", "unset"].includes(e);
+      validator: function(t) {
+        return ["column", "row", "column dense", "row dense", "unset"].includes(t);
       }
     },
     ignoreDrag: Function
   },
   created() {
-    L(b), this.showLicenseWatermark = W(b);
+    v(b), this.showLicenseWatermark = W(b), this.licenseMessage = C(b);
   },
   data() {
     return {
       currentPositions: [],
-      showLicenseWatermark: !1
+      showLicenseWatermark: !1,
+      licenseMessage: void 0
     };
   },
   computed: {
     compPositions() {
-      return this.positions ? this.positions.map((e, o) => Object.assign({
-        order: o,
+      return this.positions ? this.positions.map((t, s) => Object.assign({
+        order: s,
         rowSpan: 1,
         colSpan: 1
-      }, e)) : this.items && this.currentPositions.length ? this.currentPositions.map((e, o) => Object.assign({
-        order: o,
+      }, t)) : this.items && this.currentPositions.length ? this.currentPositions.map((t, s) => Object.assign({
+        order: s,
         rowSpan: 1,
         colSpan: 1
-      }, e)) : (this.$props.items || []).map((e, o) => Object.assign({
-        order: o,
+      }, t)) : (this.$props.items || []).map((t, s) => Object.assign({
+        order: s,
         rowSpan: 1,
         colSpan: 1
-      }, e.defaultPosition));
+      }, t.defaultPosition));
     },
     wrapperClass() {
       const {
-        autoFlow: e
+        autoFlow: t
       } = this.$props;
       return {
         "k-tilelayout": !0,
         "k-pos-relative": !0,
-        [I[e]]: !0
+        [j[t]]: !0
       };
     }
   },
   render() {
     const {
-      columns: e = 3,
-      columnWidth: o = "1fr",
-      gap: s,
+      columns: t = 3,
+      columnWidth: s = "1fr",
+      gap: o,
       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}))`,
+    } = this.$props, m = o ? `${typeof o.rows == "number" ? o.rows + "px" : o.rows} ${typeof o.columns == "number" ? o.columns + "px" : o.columns}` : 16, n = {
+      gridTemplateColumns: `repeat(${t}, minmax(0px, ${typeof s == "number" ? s + "px" : s}))`,
       gridAutoRows: `minmax(0px, ${typeof i == "number" ? i + "px" : i})`,
       gap: m,
       padding: m
-    }, a = this.showLicenseWatermark ? p(T, null, null) : null;
+    }, a = this.showLicenseWatermark ? p(T, {
+      message: this.licenseMessage
+    }, 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 || x(), d = f.call(this, t.item, y.call(this)), h = w.call(this, {
+    }, [c.map(function(e, r) {
+      const l = e && e.id || x(), d = f.call(this, e.item, y.call(this)), h = w.call(this, {
         h: g,
         template: d,
         defaultRendering: null,
         additionalProps: {
-          tile: t,
+          tile: e,
           index: r
         }
-      }), u = f.call(this, t.header, y.call(this)), S = w.call(this, {
+      }), u = f.call(this, e.header, y.call(this)), S = w.call(this, {
         h: g,
         template: u,
         defaultRendering: null,
         additionalProps: {
-          tile: t,
+          tile: e,
           index: r,
           id: l,
-          headerText: t.headerText
+          headerText: e.headerText
         }
-      }), k = f.call(this, t.body, y.call(this)), $ = w.call(this, {
+      }), k = f.call(this, e.body, y.call(this)), $ = w.call(this, {
         h: g,
         template: k,
         defaultRendering: null,
         additionalProps: {
-          tile: t,
+          tile: e,
           index: r,
-          bodyText: t.bodyText
+          bodyText: e.bodyText
         }
       });
-      return p(C, {
-        key: this.$props.dataItemKey ? v(this.$props.dataItemKey)(t) : r,
+      return p(I, {
+        key: this.$props.dataItemKey ? L(this.$props.dataItemKey)(e) : 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,
+        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": l,
-        "tab-index": t.tabIndex
+        "tab-index": e.tabIndex
       }, {
-        default: () => [t.item ? h : [p("div", {
+        default: () => [e.item ? h : [p("div", {
           class: "k-tilelayout-item-header k-card-header"
-        }, [t.header ? S : p("h5", {
+        }, [e.header ? S : p("h5", {
           class: "k-card-title",
           id: l
-        }, [t.headerText])]), p("div", {
+        }, [e.headerText])]), p("div", {
           class: "k-tilelayout-item-body k-card-body"
-        }, [t.body ? $ : t.bodyText])]]
+        }, [e.body ? $ : e.bodyText])]]
       });
     }, this), a]);
   },
@@ -151,27 +154,27 @@ const I = {
     focus() {
       this.$el && this.$el.focus();
     },
-    updateHandle(e, o, s, i = 0, c = 0, m) {
-      if (o === 0 && s === 0 && !c && !i)
+    updateHandle(t, s, o, i = 0, c = 0, m) {
+      if (s === 0 && o === 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", {
+      const a = this.compPositions.map((u) => Object.assign({}, u)), e = a[t], r = a.find((u) => u.order === e.order + s);
+      r && r !== e && (e.order += s, r.order += -s, n = !0);
+      const l = e.col + o;
+      o !== 0 && l >= 1 && l + e.colSpan <= (this.$props.columns || 3) + 1 && (e.col = l, n = !0);
+      const d = e.colSpan + c;
+      c && d >= 1 && d + e.col <= (this.$props.columns || 3) + 1 && (e.colSpan = d, n = !0);
+      const h = e.rowSpan + i;
+      i && h >= 1 && (e.rowSpan = h, n = !0), n && (this.currentPositions = a, m && this.$emit("tileresize", {
         value: a,
-        index: e,
+        index: t,
         rowSpan: i,
         colSpan: c
       }), this.$emit("reposition", {
         value: a,
-        index: e,
-        row: o,
-        col: s
+        index: t,
+        row: s,
+        col: o
       }));
     }
   }