@progress/kendo-vue-layout 3.7.4-dev.202211041243 → 3.7.4-dev.202211280833

package/dist/esm/tilelayout/Tile.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
+import { canUseDOM, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './ResizeHandlers.js';
 /**
  * @hidden
@@ -28,12 +28,11 @@ var TileVue2 = {
   name: 'KendoTile',
   props: {
     defaultPosition: {
-      type: Object,
       required: true
     },
     index: Number,
     hintStyle: Object,
-    hintClassName: String,
+    hintClass: String,
     header: [String, Function, Object],
     body: [String, Function, Object],
     item: [String, Function, Object],
@@ -50,85 +49,115 @@ var TileVue2 = {
     }
   },
   created: function created() {
-    // state = {
-    //     rtl: false
-    // };
-    // oldSize = {};
-    // draggable: { element: HTMLElement | null } | null = null;
-    // dragging = false;
-    // resizing = false;
-    // element: HTMLElement | null = null;
-    // get dragElement() {
-    //     return this.draggable ? this.draggable.element : undefined;
-    // }
-    // ignoreDrag: boolean = false;
-    // pressOffset = { x: 0, y: 0 };
-    // pressXY = { x: 0, y: 0 };
-    // currentTranslate = { x: 0, y: 0 };
-    // preventDataOps: any = undefined;
+    this.oldSize = {};
+    this.dragging = false;
+    this.resizing = false;
+    this.ignoreDrag = false;
+    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 = undefined;
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      return {
+        'k-tilelayout-item': true,
+        'k-card': true,
+        'k-cursor-grab': this.reorderable
+      };
+    }
+  },
+  data: function data() {
+    return {
+      rtl: false
+    };
   },
   mounted: function mounted() {
-    // if (!this.element) {
-    //     return;
-    // }
-    // if (getComputedStyle(this.element).direction === 'rtl') {
-    //     this.setState({
-    //         rtl: true
-    //     });
-    // }
+    if (!this.$el) {
+      return;
+    }
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+    if (getComputedStyle(this.$el).direction === 'rtl') {
+      this.rtl = true;
+    }
+  },
+  watch: {
+    defaultPosition: function defaultPosition(_, oldValue) {
+      this.prevDefaultPosition = oldValue;
+    }
+  },
+  beforeUpdate: function beforeUpdate() {
+    this.oldSize = {};
+    var dragElement = this.dragElement();
+    if (dragElement) {
+      this.oldSize = dragElement.getBoundingClientRect();
+    }
+    return null;
   },
   updated: function updated() {
-    // const dragElement = this.dragElement;
-    // if (!dragElement) {
-    //     return;
-    // }
-    // const newBox = dragElement.getBoundingClientRect();
-    // const oldBox = this.oldSize as any;
-    // if (this.resizing) {
-    //     const diffCol = newBox.width - oldBox.width;
-    //     if (this.state.rtl) {
-    //         const currentM: number = parseFloat(dragElement.style.marginLeft || '0');
-    //         dragElement.style.marginLeft = (currentM - diffCol) + 'px';
-    //     } else {
-    //         const currentM: number = parseFloat(dragElement.style.marginRight || '0');
-    //         dragElement.style.marginRight = (currentM + diffCol) + 'px';
-    //     }
-    //     this.pressXY.x += this.state.rtl ? -diffCol : diffCol;
-    //     const diffRow = newBox.height - oldBox.height;
-    //     const currentBot: number = parseFloat(dragElement.style!.height!.substring(12) as any);
-    //     dragElement.style.height = `calc(100% + ${(currentBot + diffRow)}px)`;
-    //     this.pressXY.y += diffRow;
-    // }
-    // const deltaX = oldBox.left - newBox.left;
-    // const deltaY = oldBox.top - newBox.top;
-    // if (deltaX === 0 && deltaY === 0) {
-    //     return;
-    // }
-    // if (this.dragging) {
-    //     if ((prevProps.defaultPosition.order !== this.$props.defaultPosition.order ||
-    //         prevProps.defaultPosition.col !== this.$props.defaultPosition.col)) {
-    //         this.currentTranslate.x = 0;
-    //         this.currentTranslate.y = 0;
-    //         dragElement.style.transform = '';
-    //     }
-    //     return;
-    // }
-    // if (Math.abs(deltaY) < 15 && Math.abs(deltaX) < 15) {
-    //     // improves performance and removes random flickering
-    //     return;
-    // }
-    // requestAnimationFrame(() => {
-    //     const domNode = this.element;
-    //     if (!domNode) {
-    //         return;
-    //     }
-    //     domNode.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
-    //     domNode.style.transition = 'transform 0s';
-    //     requestAnimationFrame(() => {
-    //         domNode.style.transform = '';
-    //         domNode.style.transition = `transform ${ANIMATION_DURATION}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
-    //     });
-    // });
+    var dragElement = this.dragElement();
+    if (!dragElement) {
+      return;
+    }
+    var newBox = dragElement.getBoundingClientRect();
+    var oldBox = this.oldSize;
+    var that = this;
+    if (this.resizing) {
+      var diffCol = newBox.width - oldBox.width;
+      if (this.rtl) {
+        var currentM = parseFloat(dragElement.style.marginLeft || '0');
+        dragElement.style.marginLeft = currentM - diffCol + 'px';
+      } else {
+        var currentM = parseFloat(dragElement.style.marginRight || '0');
+        dragElement.style.marginRight = currentM + diffCol + 'px';
+      }
+      this.pressXY.x += this.rtl ? -diffCol : diffCol;
+      var diffRow = newBox.height - oldBox.height;
+      var currentBot = parseFloat(dragElement.style.height.substring(12));
+      dragElement.style.height = "calc(100% + ".concat(currentBot + diffRow, "px)");
+      this.pressXY.y += diffRow;
+    }
+    var deltaX = oldBox.left - newBox.left;
+    var deltaY = oldBox.top - newBox.top;
+    if (deltaX === 0 && deltaY === 0) {
+      return;
+    }
+    if (this.dragging) {
+      if (this.prevDefaultPosition.order !== this.$props.defaultPosition.order || this.prevDefaultPosition.col !== this.$props.defaultPosition.col) {
+        this.currentTranslate.x = 0;
+        this.currentTranslate.y = 0;
+        dragElement.style.transform = '';
+      }
+      return;
+    }
+    if (Math.abs(deltaY) < 15 && Math.abs(deltaX) < 15) {
+      // improves performance and removes random flickering
+      return;
+    }
+    requestAnimationFrame(function () {
+      var domNode = that.$el;
+      if (!domNode) {
+        return;
+      }
+      domNode.style.transform = "translate(".concat(deltaX, "px, ").concat(deltaY, "px)");
+      domNode.style.transition = 'transform 0s';
+      requestAnimationFrame(function () {
+        domNode.style.transform = '';
+        domNode.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
+      });
+    });
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -143,9 +172,11 @@ var TileVue2 = {
     var defaultSlots = getDefaultSlots(this);
     if (clearTimeout && typeof clearTimeout === 'function') {
       clearTimeout(this.preventDataOps);
-      this.preventDataOps = window.setTimeout(function () {
-        _this.preventDataOps = undefined;
-      }, 200);
+      if (canUseDOM) {
+        this.preventDataOps = window.setTimeout(function () {
+          _this.preventDataOps = undefined;
+        }, 200);
+      }
     }
     var position = this.$props.defaultPosition;
     var resizable = this.$props.resizable;
@@ -158,83 +189,102 @@ var TileVue2 = {
       order: position.order
     }, this.$props.hintStyle);
     var card = h("div", {
-      ref: function ref(e) {
-        _this.draggable = e ? {
-          element: e
-        } : null;
-      },
-      "class": classNames('k-tilelayout-item k-card', {
-        'k-cursor-grab': this.reorderable
-      }, this.$props.className),
-      style: __assign({
+      "class": this.wrapperClass,
+      style: {
         height: '100%'
-      }, this.$props.style)
-    }, [defaultSlots,
-    // @ts-ignore
-    h(ResizeHandlers, {
+      }
+    }, [defaultSlots, resizable !== 'vertical' && h(ResizeHandlers, {
+      onPress: this.handlePress,
+      on: this.v3 ? undefined : {
+        "press": this.handlePress,
+        "resize": this.handleResize
+      },
+      onResize: this.handleResize,
+      direction: "ew",
+      attrs: this.v3 ? undefined : {
+        direction: "ew",
+        rtl: this.rtl
+      },
+      rtl: this.rtl
+    }), resizable !== 'horizontal' && h(ResizeHandlers, {
       onPress: this.handlePress,
       on: this.v3 ? undefined : {
         "press": this.handlePress,
         "resize": this.handleResize
       },
       onResize: this.handleResize,
-      resizable: resizable,
+      direction: "ns",
       attrs: this.v3 ? undefined : {
-        resizable: resizable,
-        rtl: this.state.rtl
+        direction: "ns",
+        rtl: this.rtl
       },
-      rtl: this.state.rtl
+      rtl: this.rtl
+    }), resizable === true && h(ResizeHandlers, {
+      onPress: this.handlePress,
+      on: this.v3 ? undefined : {
+        "press": this.handlePress,
+        "resize": this.handleResize
+      },
+      onResize: this.handleResize,
+      direction: this.rtl ? 'nesw' : 'nwse',
+      attrs: this.v3 ? undefined : {
+        direction: this.rtl ? 'nesw' : 'nwse',
+        rtl: this.rtl
+      },
+      rtl: this.rtl
     })]);
     return h("div", {
       style: itemStyles,
-      "class": this.$props.hintClassName
+      "class": this.$props.hintClass
     }, [
     // @ts-ignore function children
     h(Draggable, {
-      ref: function ref(e) {
-        _this.draggable = e;
-      },
-      onDrag: this.$props.reorderable ? this.handleDrag : undefined,
+      ref: 'draggable',
+      onDrag: this.handleDrag,
       on: this.v3 ? undefined : {
-        "drag": this.$props.reorderable ? this.handleDrag : undefined,
-        "release": this.$props.reorderable ? this.handleRelease : undefined,
-        "press": this.$props.reorderable ? this.handlePress : undefined
+        "drag": this.handleDrag,
+        "release": this.handleRelease,
+        "press": this.handlePress
       },
-      onRelease: this.$props.reorderable ? this.handleRelease : undefined,
-      onPress: this.$props.reorderable ? this.handlePress : undefined
+      onRelease: this.handleRelease,
+      onPress: this.handlePress
     }, this.v3 ? function () {
       return [card];
     } : [card])]);
   },
   methods: {
+    dragElement: function dragElement() {
+      return this.draggable && this.draggable.element;
+    },
     handleResize: function handleResize(e, q) {
+      var dragElement = this.dragElement();
       if (q.end) {
         this.handleRelease();
         return;
       }
-      if (!this.element) {
+      if (!this.reorderable || !this.$el) {
         return;
       }
       var x = e.clientX;
       var y = e.clientY;
       this.resizing = true;
-      var dX = (q.direction !== 'ns' ? x - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1);
+      var dX = (q.direction !== 'ns' ? x - this.pressXY.x : 0) * (this.rtl ? -1 : 1);
       var dY = q.direction !== 'ew' ? y - this.pressXY.y : 0;
-      if (this.dragElement) {
-        if (this.state.rtl) {
-          this.dragElement.style.marginLeft = -dX + 'px';
+      if (dragElement) {
+        if (this.rtl) {
+          dragElement.style.marginLeft = -dX + 'px';
         } else {
-          this.dragElement.style.marginRight = -dX + 'px';
+          dragElement.style.marginRight = -dX + 'px';
         }
-        this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
+        dragElement.style.height = "calc(100% + ".concat(dY, "px)");
       }
-      this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
+      this.$el.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
       if (this.preventDataOps) {
         return;
       }
       var col = 0;
       var row = 0;
-      var wrapBox = this.element.getBoundingClientRect();
+      var wrapBox = this.$el.getBoundingClientRect();
       if (dX > wrapBox.width / this.$props.defaultPosition.colSpan / 3) {
         col = 1;
       }
@@ -249,48 +299,49 @@ var TileVue2 = {
         row = -1;
       }
       if (col !== 0 || row !== 0) {
-        this.$props.update(this.$props.index, 0, 0, row, col);
+        this.$emit('update', this.$props.index, 0, 0, row, col);
       }
     },
     handlePress: function handlePress(e) {
-      if (!this.dragElement) {
+      var dragElement = this.dragElement();
+      if (!this.reorderable || !dragElement) {
         return;
       }
       this.ignoreDrag = false;
-      if (this.$props.ignoreDrag && this.$props.ignoreDrag(e.event.originalEvent)) {
+      if (this.$props.ignoreDrag && this.$props.ignoreDrag(e.originalEvent)) {
         this.ignoreDrag = true;
         return;
       }
-      if (this.element) {
-        this.element.style.zIndex = '10';
-        this.element.classList.add('k-layout-item-hint');
+      if (this.$el) {
+        this.$el.style.zIndex = '10';
+        this.$el.classList.add('k-layout-item-hint');
       }
-      this.dragElement.classList.remove('k-cursor-grab');
-      this.dragElement.classList.add('k-cursor-grabbing');
-      var rec = this.dragElement.getBoundingClientRect();
+      dragElement.classList.remove('k-cursor-grab');
+      dragElement.classList.add('k-cursor-grabbing');
+      var rec = dragElement.getBoundingClientRect();
       this.pressXY = {
-        x: e.event.clientX,
-        y: e.event.clientY
+        x: e.clientX,
+        y: e.clientY
       };
       this.pressOffset = {
-        x: e.event.clientX - rec.x,
-        y: e.event.clientY - rec.y
+        x: e.clientX - rec.x,
+        y: e.clientY - rec.y
       };
     },
     handleDrag: function handleDrag(e) {
-      if (this.ignoreDrag) {
+      if (!this.reorderable || this.ignoreDrag) {
         return;
       }
-      var dragElement = this.dragElement;
-      if (e.event.originalEvent.defaultPrevented || !dragElement) {
+      var dragElement = this.dragElement();
+      if (e.originalEvent.defaultPrevented || !dragElement) {
         return;
       }
       this.dragging = true;
-      e.event.originalEvent.preventDefault();
+      e.originalEvent.preventDefault();
       var rec = dragElement.getBoundingClientRect();
       this.currentTranslate = {
-        x: e.event.clientX - rec.x - this.pressOffset.x + this.currentTranslate.x,
-        y: e.event.clientY - rec.y - this.pressOffset.y + this.currentTranslate.y
+        x: e.clientX - rec.x - this.pressOffset.x + this.currentTranslate.x,
+        y: e.clientY - rec.y - this.pressOffset.y + this.currentTranslate.y
       };
       dragElement.style.transform = "translate(".concat(this.currentTranslate.x, "px, ").concat(this.currentTranslate.y, "px)");
       dragElement.style.transition = 'transform 0s';
@@ -311,7 +362,7 @@ var TileVue2 = {
       if (this.currentTranslate.x < 0.7 * -rec.width / this.$props.defaultPosition.colSpan) {
         col = -1;
       }
-      this.$props.update(this.$props.index, row, this.state.rtl ? -col : col, 0, 0);
+      this.$emit('update', this.$props.index, row, this.rtl ? -col : col, 0, 0);
     },
     handleRelease: function handleRelease() {
       this.dragging = this.resizing = false;
@@ -319,11 +370,11 @@ var TileVue2 = {
         x: 0,
         y: 0
       };
-      if (this.element) {
-        this.element.style.zIndex = '1';
-        this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+      if (this.$el) {
+        this.$el.style.zIndex = '1';
+        this.$el.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
       }
-      var dragElement = this.dragElement;
+      var dragElement = this.dragElement();
       if (dragElement) {
         dragElement.style.transform = 'translate(0px, 0px)';
         dragElement.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
@@ -335,16 +386,6 @@ var TileVue2 = {
       }
     }
   }
-  // /**
-  //  * @hidden
-  //  */
-  // getSnapshotBeforeUpdate(_: any) {
-  //     this.oldSize = {};
-  //     if (this.dragElement) {
-  //         this.oldSize = this.dragElement.getBoundingClientRect();
-  //     }
-  //     return null;
-  // }   
 };
 /**
  * @hidden