@progress/kendo-vue-layout 3.12.0 → 3.12.1-dev.202308170413

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689689288,
+    publishDate: 1692244889,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/tilelayout/Tile.js

@@ -24,7 +24,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { canUseDOM, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
+import { canUseDOM, classNames, Draggable, getDefaultSlots, getRef, setRef } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './ResizeHandlers';
 var tileDragClasses = ['k-card-title', 'k-card-body', 'k-tilelayout-item-body', 'k-tilelayout-item', 'k-tilelayout-item-header', 'k-resize-handle'];
 /**
@@ -36,6 +36,7 @@ var ANIMATION_DURATION = 200;
  */
 var TileVue2 = {
   name: 'KendoTile',
+  inheritAttrs: false,
   props: {
     defaultPosition: {
       required: true
@@ -97,17 +98,17 @@ var TileVue2 = {
   data: function data() {
     return {
       rtl: false,
-      grabbed: false
+      grabbed: false,
+      showHint: false
     };
   },
   mounted: function mounted() {
     if (!this.$el) {
       return;
     }
-    if (this.$el) {
-      this.draggable = this.$refs.draggable;
-    }
-    if (getComputedStyle(this.$el).direction === 'rtl') {
+    this.element = this.$el.nodeType === 3 ? this.$el.nextElementSibling : this.$el;
+    this.draggable = this.$refs.draggable;
+    if (getComputedStyle(this.element).direction === 'rtl') {
       this.rtl = true;
     }
   },
@@ -126,6 +127,7 @@ var TileVue2 = {
   },
   updated: function updated() {
     var dragElement = this.dragElement();
+    this.hintElement = getRef(this, 'hintElement');
     if (!dragElement) {
       return;
     }
@@ -165,7 +167,7 @@ var TileVue2 = {
       return;
     }
     requestAnimationFrame(function () {
-      var domNode = that.$el;
+      var domNode = that.element;
       if (!domNode) {
         return;
       }
@@ -198,7 +200,7 @@ var TileVue2 = {
     }
     var position = this.$props.defaultPosition;
     var resizable = this.$props.resizable;
-    var itemStyles = __assign({
+    var hintItemStyles = __assign({
       gridColumnStart: position.col,
       gridColumnEnd: "span ".concat(position.colSpan),
       gridRowStart: position.row,
@@ -206,11 +208,18 @@ var TileVue2 = {
       outline: 'none',
       order: position.order
     }, this.$props.hintStyle);
+    var itemStyles = {
+      gridColumnStart: position.col,
+      gridColumnEnd: "span ".concat(position.colSpan),
+      gridRowStart: position.row,
+      gridRowEnd: "span ".concat(position.rowSpan),
+      order: position.order
+    };
     var card = h("div", {
       "class": this.wrapperClass,
-      style: {
+      style: __assign({
         height: '100%'
-      },
+      }, itemStyles),
       role: 'listitem',
       attrs: this.v3 ? undefined : {
         role: 'listitem',
@@ -269,10 +278,13 @@ var TileVue2 = {
       },
       rtl: this.rtl
     })]);
-    return h("div", {
-      style: itemStyles,
-      "class": this.$props.hintClass
-    }, [
+    var draggableHint = [this.showHint && h("div", {
+      ref: setRef(this, 'hintElement'),
+      style: __assign({
+        position: 'absolute'
+      }, hintItemStyles),
+      "class": classNames('k-layout-item-hint k-layout-item-hint-reorder', this.$props.hintClass)
+    }),
     // @ts-ignore function children
     h(Draggable, {
       ref: 'draggable',
@@ -286,7 +298,10 @@ var TileVue2 = {
       onPress: this.handlePress
     }, this.v3 ? function () {
       return [card];
-    } : [card])]);
+    } : [card])];
+    return this.v3 ? draggableHint : h("div", {
+      style: itemStyles
+    }, [draggableHint]);
   },
   methods: {
     touchStart: function touchStart(e) {
@@ -306,7 +321,7 @@ var TileVue2 = {
         this.handleRelease();
         return;
       }
-      if (!this.reorderable || !this.$el) {
+      if (!this.reorderable || !this.element) {
         return;
       }
       var x = e.clientX;
@@ -322,13 +337,17 @@ var TileVue2 = {
         }
         dragElement.style.height = "calc(100% + ".concat(dY, "px)");
       }
-      this.$el.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
+      this.showHint = true;
+      if (this.hintElement) {
+        this.hintElement.classList.add('k-layout-item-hint-resize');
+      }
+      this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
       if (this.preventDataOps) {
         return;
       }
       var col = 0;
       var row = 0;
-      var wrapBox = this.$el.getBoundingClientRect();
+      var wrapBox = this.element.getBoundingClientRect();
       if (dX > wrapBox.width / this.$props.defaultPosition.colSpan / 3) {
         col = 1;
       }
@@ -360,9 +379,10 @@ var TileVue2 = {
         this.currentIgnoreDrag = true;
         return;
       }
-      if (this.$el) {
-        this.$el.style.zIndex = '10';
-        this.$el.classList.add('k-layout-item-hint');
+      if (this.element) {
+        this.element.style.zIndex = '10';
+        this.element.classList.add('k-layout-item-hint');
+        this.showHint = true;
       }
       dragElement.classList.remove('k-cursor-grab');
       dragElement.classList.add('k-cursor-grabbing');
@@ -418,9 +438,13 @@ var TileVue2 = {
         x: 0,
         y: 0
       };
-      if (this.$el) {
-        this.$el.style.zIndex = '1';
-        this.$el.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+      if (this.element) {
+        this.element.style.zIndex = '1';
+        this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+        if (this.hintElement) {
+          this.hintElement.classList.remove('k-layout-item-hint-resize');
+        }
+        this.showHint = false;
       }
       var dragElement = this.dragElement();
       if (dragElement) {

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689689288,
+    publishDate: 1692244889,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/tilelayout/Tile.js

@@ -24,7 +24,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { canUseDOM, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
+import { canUseDOM, classNames, Draggable, getDefaultSlots, getRef, setRef } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './ResizeHandlers.js';
 var tileDragClasses = ['k-card-title', 'k-card-body', 'k-tilelayout-item-body', 'k-tilelayout-item', 'k-tilelayout-item-header', 'k-resize-handle'];
 /**
@@ -36,6 +36,7 @@ var ANIMATION_DURATION = 200;
  */
 var TileVue2 = {
   name: 'KendoTile',
+  inheritAttrs: false,
   props: {
     defaultPosition: {
       required: true
@@ -97,17 +98,17 @@ var TileVue2 = {
   data: function data() {
     return {
       rtl: false,
-      grabbed: false
+      grabbed: false,
+      showHint: false
     };
   },
   mounted: function mounted() {
     if (!this.$el) {
       return;
     }
-    if (this.$el) {
-      this.draggable = this.$refs.draggable;
-    }
-    if (getComputedStyle(this.$el).direction === 'rtl') {
+    this.element = this.$el.nodeType === 3 ? this.$el.nextElementSibling : this.$el;
+    this.draggable = this.$refs.draggable;
+    if (getComputedStyle(this.element).direction === 'rtl') {
       this.rtl = true;
     }
   },
@@ -126,6 +127,7 @@ var TileVue2 = {
   },
   updated: function updated() {
     var dragElement = this.dragElement();
+    this.hintElement = getRef(this, 'hintElement');
     if (!dragElement) {
       return;
     }
@@ -165,7 +167,7 @@ var TileVue2 = {
       return;
     }
     requestAnimationFrame(function () {
-      var domNode = that.$el;
+      var domNode = that.element;
       if (!domNode) {
         return;
       }
@@ -198,7 +200,7 @@ var TileVue2 = {
     }
     var position = this.$props.defaultPosition;
     var resizable = this.$props.resizable;
-    var itemStyles = __assign({
+    var hintItemStyles = __assign({
       gridColumnStart: position.col,
       gridColumnEnd: "span ".concat(position.colSpan),
       gridRowStart: position.row,
@@ -206,11 +208,18 @@ var TileVue2 = {
       outline: 'none',
       order: position.order
     }, this.$props.hintStyle);
+    var itemStyles = {
+      gridColumnStart: position.col,
+      gridColumnEnd: "span ".concat(position.colSpan),
+      gridRowStart: position.row,
+      gridRowEnd: "span ".concat(position.rowSpan),
+      order: position.order
+    };
     var card = h("div", {
       "class": this.wrapperClass,
-      style: {
+      style: __assign({
         height: '100%'
-      },
+      }, itemStyles),
       role: 'listitem',
       attrs: this.v3 ? undefined : {
         role: 'listitem',
@@ -269,10 +278,13 @@ var TileVue2 = {
       },
       rtl: this.rtl
     })]);
-    return h("div", {
-      style: itemStyles,
-      "class": this.$props.hintClass
-    }, [
+    var draggableHint = [this.showHint && h("div", {
+      ref: setRef(this, 'hintElement'),
+      style: __assign({
+        position: 'absolute'
+      }, hintItemStyles),
+      "class": classNames('k-layout-item-hint k-layout-item-hint-reorder', this.$props.hintClass)
+    }),
     // @ts-ignore function children
     h(Draggable, {
       ref: 'draggable',
@@ -286,7 +298,10 @@ var TileVue2 = {
       onPress: this.handlePress
     }, this.v3 ? function () {
       return [card];
-    } : [card])]);
+    } : [card])];
+    return this.v3 ? draggableHint : h("div", {
+      style: itemStyles
+    }, [draggableHint]);
   },
   methods: {
     touchStart: function touchStart(e) {
@@ -306,7 +321,7 @@ var TileVue2 = {
         this.handleRelease();
         return;
       }
-      if (!this.reorderable || !this.$el) {
+      if (!this.reorderable || !this.element) {
         return;
       }
       var x = e.clientX;
@@ -322,13 +337,17 @@ var TileVue2 = {
         }
         dragElement.style.height = "calc(100% + ".concat(dY, "px)");
       }
-      this.$el.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
+      this.showHint = true;
+      if (this.hintElement) {
+        this.hintElement.classList.add('k-layout-item-hint-resize');
+      }
+      this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
       if (this.preventDataOps) {
         return;
       }
       var col = 0;
       var row = 0;
-      var wrapBox = this.$el.getBoundingClientRect();
+      var wrapBox = this.element.getBoundingClientRect();
       if (dX > wrapBox.width / this.$props.defaultPosition.colSpan / 3) {
         col = 1;
       }
@@ -360,9 +379,10 @@ var TileVue2 = {
         this.currentIgnoreDrag = true;
         return;
       }
-      if (this.$el) {
-        this.$el.style.zIndex = '10';
-        this.$el.classList.add('k-layout-item-hint');
+      if (this.element) {
+        this.element.style.zIndex = '10';
+        this.element.classList.add('k-layout-item-hint');
+        this.showHint = true;
       }
       dragElement.classList.remove('k-cursor-grab');
       dragElement.classList.add('k-cursor-grabbing');
@@ -418,9 +438,13 @@ var TileVue2 = {
         x: 0,
         y: 0
       };
-      if (this.$el) {
-        this.$el.style.zIndex = '1';
-        this.$el.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+      if (this.element) {
+        this.element.style.zIndex = '1';
+        this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+        if (this.hintElement) {
+          this.hintElement.classList.remove('k-layout-item-hint-resize');
+        }
+        this.showHint = false;
       }
       var dragElement = this.dragElement();
       if (dragElement) {

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689689288,
+    publishDate: 1692244889,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/tilelayout/Tile.js

@@ -42,6 +42,7 @@ var ANIMATION_DURATION = 200;
  */
 var TileVue2 = {
   name: 'KendoTile',
+  inheritAttrs: false,
   props: {
     defaultPosition: {
       required: true
@@ -103,17 +104,17 @@ var TileVue2 = {
   data: function data() {
     return {
       rtl: false,
-      grabbed: false
+      grabbed: false,
+      showHint: false
     };
   },
   mounted: function mounted() {
     if (!this.$el) {
       return;
     }
-    if (this.$el) {
-      this.draggable = this.$refs.draggable;
-    }
-    if (getComputedStyle(this.$el).direction === 'rtl') {
+    this.element = this.$el.nodeType === 3 ? this.$el.nextElementSibling : this.$el;
+    this.draggable = this.$refs.draggable;
+    if (getComputedStyle(this.element).direction === 'rtl') {
       this.rtl = true;
     }
   },
@@ -132,6 +133,7 @@ var TileVue2 = {
   },
   updated: function updated() {
     var dragElement = this.dragElement();
+    this.hintElement = (0, kendo_vue_common_1.getRef)(this, 'hintElement');
     if (!dragElement) {
       return;
     }
@@ -171,7 +173,7 @@ var TileVue2 = {
       return;
     }
     requestAnimationFrame(function () {
-      var domNode = that.$el;
+      var domNode = that.element;
       if (!domNode) {
         return;
       }
@@ -204,7 +206,7 @@ var TileVue2 = {
     }
     var position = this.$props.defaultPosition;
     var resizable = this.$props.resizable;
-    var itemStyles = __assign({
+    var hintItemStyles = __assign({
       gridColumnStart: position.col,
       gridColumnEnd: "span ".concat(position.colSpan),
       gridRowStart: position.row,
@@ -212,11 +214,18 @@ var TileVue2 = {
       outline: 'none',
       order: position.order
     }, this.$props.hintStyle);
+    var itemStyles = {
+      gridColumnStart: position.col,
+      gridColumnEnd: "span ".concat(position.colSpan),
+      gridRowStart: position.row,
+      gridRowEnd: "span ".concat(position.rowSpan),
+      order: position.order
+    };
     var card = h("div", {
       "class": this.wrapperClass,
-      style: {
+      style: __assign({
         height: '100%'
-      },
+      }, itemStyles),
       role: 'listitem',
       attrs: this.v3 ? undefined : {
         role: 'listitem',
@@ -275,10 +284,13 @@ var TileVue2 = {
       },
       rtl: this.rtl
     })]);
-    return h("div", {
-      style: itemStyles,
-      "class": this.$props.hintClass
-    }, [
+    var draggableHint = [this.showHint && h("div", {
+      ref: (0, kendo_vue_common_1.setRef)(this, 'hintElement'),
+      style: __assign({
+        position: 'absolute'
+      }, hintItemStyles),
+      "class": (0, kendo_vue_common_1.classNames)('k-layout-item-hint k-layout-item-hint-reorder', this.$props.hintClass)
+    }),
     // @ts-ignore function children
     h(kendo_vue_common_1.Draggable, {
       ref: 'draggable',
@@ -292,7 +304,10 @@ var TileVue2 = {
       onPress: this.handlePress
     }, this.v3 ? function () {
       return [card];
-    } : [card])]);
+    } : [card])];
+    return this.v3 ? draggableHint : h("div", {
+      style: itemStyles
+    }, [draggableHint]);
   },
   methods: {
     touchStart: function touchStart(e) {
@@ -312,7 +327,7 @@ var TileVue2 = {
         this.handleRelease();
         return;
       }
-      if (!this.reorderable || !this.$el) {
+      if (!this.reorderable || !this.element) {
         return;
       }
       var x = e.clientX;
@@ -328,13 +343,17 @@ var TileVue2 = {
         }
         dragElement.style.height = "calc(100% + ".concat(dY, "px)");
       }
-      this.$el.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
+      this.showHint = true;
+      if (this.hintElement) {
+        this.hintElement.classList.add('k-layout-item-hint-resize');
+      }
+      this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
       if (this.preventDataOps) {
         return;
       }
       var col = 0;
       var row = 0;
-      var wrapBox = this.$el.getBoundingClientRect();
+      var wrapBox = this.element.getBoundingClientRect();
       if (dX > wrapBox.width / this.$props.defaultPosition.colSpan / 3) {
         col = 1;
       }
@@ -366,9 +385,10 @@ var TileVue2 = {
         this.currentIgnoreDrag = true;
         return;
       }
-      if (this.$el) {
-        this.$el.style.zIndex = '10';
-        this.$el.classList.add('k-layout-item-hint');
+      if (this.element) {
+        this.element.style.zIndex = '10';
+        this.element.classList.add('k-layout-item-hint');
+        this.showHint = true;
       }
       dragElement.classList.remove('k-cursor-grab');
       dragElement.classList.add('k-cursor-grabbing');
@@ -424,9 +444,13 @@ var TileVue2 = {
         x: 0,
         y: 0
       };
-      if (this.$el) {
-        this.$el.style.zIndex = '1';
-        this.$el.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+      if (this.element) {
+        this.element.style.zIndex = '1';
+        this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+        if (this.hintElement) {
+          this.hintElement.classList.remove('k-layout-item-hint-resize');
+        }
+        this.showHint = false;
       }
       var dragElement = this.dragElement();
       if (dragElement) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-layout",
   "description": "Kendo UI for Vue Layouts package",
-  "version": "3.12.0",
+  "version": "3.12.1-dev.202308170413",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -45,9 +45,9 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-animation": "3.12.0",
-    "@progress/kendo-vue-common": "3.12.0",
-    "@progress/kendo-vue-popup": "3.12.0"
+    "@progress/kendo-vue-animation": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-common": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-popup": "3.12.1-dev.202308170413"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.0",
@@ -55,15 +55,15 @@
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.3.0",
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-buttons": "3.12.0",
-    "@progress/kendo-vue-charts": "3.12.0",
-    "@progress/kendo-vue-dateinputs": "3.12.0",
-    "@progress/kendo-vue-dropdowns": "3.12.0",
-    "@progress/kendo-vue-grid": "3.12.0",
-    "@progress/kendo-vue-indicators": "3.12.0",
-    "@progress/kendo-vue-inputs": "3.12.0",
-    "@progress/kendo-vue-intl": "3.12.0",
-    "@progress/kendo-vue-progressbars": "3.12.0"
+    "@progress/kendo-vue-buttons": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-charts": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-dateinputs": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-dropdowns": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-grid": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-indicators": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-inputs": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-intl": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-progressbars": "3.12.1-dev.202308170413"
   },
   "@progress": {
     "friendlyName": "Layouts",