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

package/dist/es/tilelayout/ResizeHandlers.d.ts

@@ -1,53 +0,0 @@
-declare type DefaultData<V> = object | ((this: V) => {});
-declare type DefaultMethods<V> = {
-    [key: string]: (this: V, ...args: any[]) => any;
-};
-import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
-/**
- * @hidden
- */
-export interface ResizeHandlersProps {
-    direction: string;
-    onResize?: (e: any, args: {
-        end: boolean;
-        direction: any;
-    }) => void;
-    onPress?: (e: any) => void;
-    rtl: boolean;
-}
-/**
- * @hidden
- */
-interface ResizeHandlersState {
-}
-/**
- * @hidden
- */
-interface ResizeHandlersData {
-}
-/**
- * @hidden
- */
-export interface ResizeHandlersMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ResizeHandlersComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ResizeHandlersAll extends ResizeHandlersMethods, ResizeHandlersState, ResizeHandlersData, ResizeHandlersComputed, Vue2type {
-}
-/**
- * @hidden
- */
-declare const ResizeHandlersVue2: ComponentOptions<Vue2type, DefaultData<ResizeHandlersData>, DefaultMethods<ResizeHandlersAll>, ResizeHandlersComputed, RecordPropsDefinition<ResizeHandlersProps>>;
-/**
- * @hidden
- */
-declare const ResizeHandlers: DefineComponent<ResizeHandlersProps, any, ResizeHandlersData, ResizeHandlersComputed, ResizeHandlersMethods, {}, {}, {}, string, ResizeHandlersProps, ResizeHandlersProps, {}>;
-export { ResizeHandlers, ResizeHandlersVue2 };

package/dist/es/tilelayout/ResizeHandlers.js

@@ -1,135 +0,0 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { Draggable } from '@progress/kendo-vue-common';
-/**
- * @hidden
- */
-var ResizeHandlersVue2 = {
-  name: 'KendoResizeHandlers',
-  props: {
-    direction: String,
-    rtl: Boolean
-  },
-  computed: {
-    handleClass: function handleClass() {
-      return 'k-resize-handle k-cursor-' + this.direction + '-resize';
-    },
-    dirStyles: function dirStyles() {
-      var direction = this.$props.direction;
-      switch (direction) {
-        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: function handleStyle() {
-      return __assign({
-        bottom: 0,
-        right: 0
-      }, this.dirStyles);
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  render: function render(createElement) {
-    var _this2 = this;
-    var _this = this;
-    var h = gh || createElement;
-    var direction = this.$props.direction;
-    return (
-      // @ts-ignore function children
-      h(Draggable, {
-        onPress: this.handlePress,
-        on: this.v3 ? undefined : {
-          "press": this.handlePress,
-          "drag": function drag(event) {
-            _this.handleResize(event, false, direction);
-          },
-          "release": function release(event) {
-            _this.handleResize(event, true, direction);
-          }
-        },
-        onDrag: function drag(event) {
-          _this.handleResize(event, false, direction);
-        },
-        onRelease: function release(event) {
-          _this.handleResize(event, true, direction);
-        }
-      }, this.v3 ? function () {
-        return [h("div", {
-          "class": _this2.handleClass,
-          style: _this2.handleStyle
-        })];
-      } : [h("div", {
-        "class": _this2.handleClass,
-        style: _this2.handleStyle
-      })])
-    );
-  },
-  methods: {
-    handleResize: function handleResize(event, isEnd, direction) {
-      event.originalEvent.preventDefault();
-      this.$emit('resize', event, {
-        end: isEnd,
-        direction: direction
-      });
-    },
-    handlePress: function handlePress(event) {
-      this.$emit('press', event);
-    }
-  }
-};
-/**
- * @hidden
- */
-var ResizeHandlers = ResizeHandlersVue2;
-export { ResizeHandlers, ResizeHandlersVue2 };

package/dist/es/tilelayout/Tile.d.ts

@@ -1,53 +0,0 @@
-declare type DefaultData<V> = object | ((this: V) => {});
-declare type DefaultMethods<V> = {
-    [key: string]: (this: V, ...args: any[]) => any;
-};
-import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
-import { TileStrictPosition, TileLayoutItem } from './interfaces/main';
-/**
- * @hidden
- */
-export interface TileProps extends TileLayoutItem {
-    update?: (index: number, dRow: number, dCol: number, row: number, col: number) => void;
-    index: number;
-    defaultPosition: TileStrictPosition;
-    ignoreDrag?: (event: any) => boolean;
-    tabIndex: number;
-    ariaDescribedBy: string;
-}
-/**
- * @hidden
- */
-interface TileState {
-}
-/**
- * @hidden
- */
-interface TileData {
-}
-/**
- * @hidden
- */
-export interface TileMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TileComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TileAll extends TileMethods, TileState, TileData, TileComputed, Vue2type {
-}
-/**
- * @hidden
- */
-declare const TileVue2: ComponentOptions<Vue2type, DefaultData<TileData>, DefaultMethods<TileAll>, TileComputed, RecordPropsDefinition<TileProps>>;
-/**
- * @hidden
- */
-declare const Tile: DefineComponent<TileProps, any, TileData, TileComputed, TileMethods, {}, {}, {}, string, TileProps, TileProps, {}>;
-export { Tile, TileVue2 };

package/dist/es/tilelayout/Tile.js

@@ -1,467 +0,0 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-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'];
-/**
- * @hidden
- */
-var ANIMATION_DURATION = 200;
-/**
- * @hidden
- */
-var TileVue2 = {
-  name: 'KendoTile',
-  inheritAttrs: false,
-  props: {
-    defaultPosition: {
-      required: true
-    },
-    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: true,
-      validator: function validator(value) {
-        return ['horizontal', 'vertical', true, false].includes(value);
-      }
-    },
-    reorderable: {
-      type: Boolean,
-      default: true
-    },
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    ariaDescribedBy: String,
-    ignoreDrag: Function
-  },
-  created: function created() {
-    this.oldSize = {};
-    this.dragging = false;
-    this.resizing = false;
-    this.currentIgnoreDrag = 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,
-      grabbed: false,
-      showHint: false
-    };
-  },
-  mounted: function mounted() {
-    if (!this.$el) {
-      return;
-    }
-    this.element = this.$el.nodeType === 3 || this.$el.nodeType === 8 ? this.$el.nextElementSibling : this.$el;
-    this.draggable = this.$refs.draggable;
-    if (getComputedStyle(this.element).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() {
-    var dragElement = this.dragElement();
-    this.hintElement = getRef(this, 'hintElement');
-    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.element;
-      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 () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  render: function render(createElement) {
-    var _this = this;
-    var h = gh || createElement;
-    var defaultSlots = getDefaultSlots(this);
-    if (clearTimeout && typeof clearTimeout === 'function') {
-      clearTimeout(this.preventDataOps);
-      if (canUseDOM) {
-        this.preventDataOps = window.setTimeout(function () {
-          _this.preventDataOps = undefined;
-        }, 200);
-      }
-    }
-    var position = this.$props.defaultPosition;
-    var resizable = this.$props.resizable;
-    var hintItemStyles = __assign({
-      gridColumnStart: position.col,
-      gridColumnEnd: "span ".concat(position.colSpan),
-      gridRowStart: position.row,
-      gridRowEnd: "span ".concat(position.rowSpan),
-      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: __assign({
-        height: '100%'
-      }, itemStyles),
-      role: 'listitem',
-      attrs: this.v3 ? undefined : {
-        role: 'listitem',
-        tabIndex: this.$props.tabIndex,
-        "aria-keyshortcuts": 'Enter',
-        "aria-dropeffect": 'execute',
-        "aria-grabbed": this.grabbed ? true : false,
-        "aria-ariaDescribedBy": this.$props.ariaDescribedBy
-      },
-      tabIndex: this.$props.tabIndex,
-      "aria-keyshortcuts": 'Enter',
-      "aria-dropeffect": 'execute',
-      "aria-grabbed": this.grabbed ? true : false,
-      "aria-ariaDescribedBy": this.$props.ariaDescribedBy,
-      onTouchstart: this.touchStart,
-      on: this.v3 ? undefined : {
-        "touchstart": this.touchStart
-      }
-    }, [defaultSlots, resizable && 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 && resizable !== 'horizontal' && h(ResizeHandlers, {
-      onPress: this.handlePress,
-      on: this.v3 ? undefined : {
-        "press": this.handlePress,
-        "resize": this.handleResize
-      },
-      onResize: this.handleResize,
-      direction: "ns",
-      attrs: this.v3 ? undefined : {
-        direction: "ns",
-        rtl: this.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
-    })]);
-    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',
-      onDrag: this.handleDrag,
-      on: this.v3 ? undefined : {
-        "drag": this.handleDrag,
-        "release": this.handleRelease,
-        "press": this.handlePress
-      },
-      onRelease: this.handleRelease,
-      onPress: this.handlePress
-    }, this.v3 ? function () {
-      return [card];
-    } : [card])];
-    return this.v3 ? draggableHint : h("div", {
-      style: itemStyles
-    }, [draggableHint]);
-  },
-  methods: {
-    touchStart: function touchStart(e) {
-      var dragClasses = this.tile.dragClasses ? __spreadArray(__spreadArray([], tileDragClasses, true), this.tile.dragClasses, true) : tileDragClasses;
-      if (dragClasses.some(function (dragClass) {
-        return e.target.classList.contains(dragClass);
-      })) {
-        e.preventDefault();
-      }
-    },
-    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.reorderable || !this.element) {
-        return;
-      }
-      var x = e.clientX;
-      var y = e.clientY;
-      this.resizing = true;
-      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 (dragElement) {
-        if (this.rtl) {
-          dragElement.style.marginLeft = -dX + 'px';
-        } else {
-          dragElement.style.marginRight = -dX + 'px';
-        }
-        dragElement.style.height = "calc(100% + ".concat(dY, "px)");
-      }
-      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.element.getBoundingClientRect();
-      if (dX > wrapBox.width / this.$props.defaultPosition.colSpan / 3) {
-        col = 1;
-      }
-      if (dX < -wrapBox.width / this.$props.defaultPosition.colSpan / 1.25) {
-        col = -1;
-      }
-      // vertical
-      if (dY > wrapBox.height / this.$props.defaultPosition.rowSpan / 3) {
-        row = 1;
-      }
-      if (dY < -wrapBox.height / this.$props.defaultPosition.rowSpan / 1.25) {
-        row = -1;
-      }
-      if (col !== 0 || row !== 0) {
-        this.$emit('update', this.$props.index, 0, 0, row, col, true);
-      }
-    },
-    handlePress: function handlePress(e) {
-      var dragElement = this.dragElement();
-      if (!this.reorderable || !dragElement) {
-        return;
-      }
-      this.pressXY = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      this.currentIgnoreDrag = false;
-      if (this.$props.ignoreDrag && this.$props.ignoreDrag(e.originalEvent)) {
-        this.currentIgnoreDrag = true;
-        return;
-      }
-      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');
-      this.grabbed = true;
-      var rec = dragElement.getBoundingClientRect();
-      this.pressOffset = {
-        x: e.clientX - rec.x,
-        y: e.clientY - rec.y
-      };
-    },
-    handleDrag: function handleDrag(e) {
-      if (!this.reorderable || this.currentIgnoreDrag) {
-        return;
-      }
-      var dragElement = this.dragElement();
-      if (e.originalEvent.defaultPrevented || !dragElement) {
-        return;
-      }
-      this.dragging = true;
-      e.originalEvent.preventDefault();
-      var rec = dragElement.getBoundingClientRect();
-      this.currentTranslate = {
-        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';
-      if (this.preventDataOps) {
-        return;
-      }
-      var col = 0;
-      var row = 0;
-      if (this.currentTranslate.y > 0.7 * rec.height / this.$props.defaultPosition.rowSpan) {
-        row = 1;
-      }
-      if (this.currentTranslate.y < 0.7 * -rec.height / this.$props.defaultPosition.rowSpan) {
-        row = -1;
-      }
-      if (this.currentTranslate.x > 0.7 * rec.width / this.$props.defaultPosition.colSpan) {
-        col = 1;
-      }
-      if (this.currentTranslate.x < 0.7 * -rec.width / this.$props.defaultPosition.colSpan) {
-        col = -1;
-      }
-      this.$emit('update', this.$props.index, row, this.rtl ? -col : col, 0, 0);
-    },
-    handleRelease: function handleRelease() {
-      if (!this.reorderable) {
-        return;
-      }
-      this.dragging = this.resizing = false;
-      this.currentTranslate = {
-        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.hintElement) {
-          this.hintElement.classList.remove('k-layout-item-hint-resize');
-        }
-        this.showHint = false;
-      }
-      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");
-        dragElement.style.marginRight = '0px';
-        dragElement.style.marginLeft = '0px';
-        dragElement.style.height = '100%';
-        dragElement.classList.remove('k-cursor-grabbing');
-        dragElement.classList.add('k-cursor-grab');
-        this.grabbed = false;
-      }
-    }
-  }
-};
-/**
- * @hidden
- */
-var Tile = TileVue2;
-export { Tile, TileVue2 };