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

package/dist/npm/tilelayout/Tile.js

@@ -1,474 +0,0 @@
-"use strict";
-
-var __assign = undefined && undefined.__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 = undefined && undefined.__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));
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TileVue2 = exports.Tile = void 0;
-// @ts-ignore
-var Vue = require("vue");
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
-var ResizeHandlers_1 = require("./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 = (0, kendo_vue_common_1.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 = (0, kendo_vue_common_1.getDefaultSlots)(this);
-    if (clearTimeout && typeof clearTimeout === 'function') {
-      clearTimeout(this.preventDataOps);
-      if (kendo_vue_common_1.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_1.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_1.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_1.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: (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',
-      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;
-      }
-    }
-  }
-};
-exports.TileVue2 = TileVue2;
-/**
- * @hidden
- */
-var Tile = TileVue2;
-exports.Tile = Tile;

package/dist/npm/tilelayout/TileLayout.d.ts

@@ -1,108 +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 { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, TileStrictPosition, TileLayoutAutoFlow } from './interfaces/main';
-/**
- * Represents the properties of [TileLayout](% slug overview_tilelayout %) component.
- */
-export interface TileLayoutProps {
-    /**
-     * Sets the `id` property of the root element.
-     */
-    id?: string;
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
-     */
-    dir?: string;
-    /**
-     * Specifies the gaps between the tiles ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     *
-     * * The possible keys are:
-     * * `rows`
-     * * `columns`
-     */
-    gap?: TileLayoutGap;
-    /**
-     * Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    columns?: number;
-    /**
-     * Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    columnWidth?: number | string;
-    /**
-     * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    rowHeight?: number | string;
-    /**
-     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
-     */
-    dataItemKey?: string;
-    /**
-     * The collection of items that will be rendered in the TileLayout
-     * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    items?: TileLayoutItem[];
-    /**
-     * The list of tiles' positions which are used when the TileLayout is in controlled mode
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
-     */
-    positions?: TilePosition[];
-    /**
-     * Fires when the user repositions the tile by either dragging or resizing
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
-     */
-    onReposition?: (event: TileLayoutRepositionEvent) => void;
-    /**
-     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
-     * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
-     * Defaults to `column`
-     * ([see example]({% slug autoflows_tilelayout %})).
-     */
-    autoFlow?: TileLayoutAutoFlow | String;
-    /**
-     * Use this callback to prevent or allow dragging of the tiles based on specific dom event.
-     * Setting `:ignoreDrag="$event => !$event.target.closest('.k-card-title')"` will make only the headers draggable.
-     * Setting `:ignoreDrag="$event => $event.target.nodeName == 'INPUT'"` will ignore dragging input elements.
-     */
-    ignoreDrag?: (event: any) => boolean;
-}
-/**
- * @hidden
- */
-export interface TileLayoutState {
-    positions: TileStrictPosition[];
-}
-/**
- * @hidden
- */
-interface TileLayoutData {
-}
-/**
- * @hidden
- */
-export interface TileLayoutMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TileLayoutComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TileLayoutAll extends TileLayoutMethods, TileLayoutState, TileLayoutData, TileLayoutComputed, Vue2type {
-}
-/**
- * @hidden
- */
-declare const TileLayoutVue2: ComponentOptions<Vue2type, DefaultData<TileLayoutData>, DefaultMethods<TileLayoutAll>, TileLayoutComputed, RecordPropsDefinition<TileLayoutProps>>;
-/**
- * @hidden
- */
-declare const TileLayout: DefineComponent<TileLayoutProps, any, TileLayoutData, TileLayoutComputed, TileLayoutMethods, {}, {}, {}, string, TileLayoutProps, TileLayoutProps, {}>;
-export { TileLayout, TileLayoutVue2 };