@progress/kendo-vue-layout 3.7.2 → 3.7.3-dev.202211021441

package/dist/esm/tilelayout/Tile.js

@@ -0,0 +1,353 @@
+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 { classNames, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
+import { ResizeHandlers } from './ResizeHandlers.js';
+/**
+ * @hidden
+ */
+var ANIMATION_DURATION = 200;
+/**
+ * @hidden
+ */
+var TileVue2 = {
+  name: 'KendoTile',
+  props: {
+    defaultPosition: {
+      type: Object,
+      required: true
+    },
+    index: Number,
+    hintStyle: Object,
+    hintClassName: 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
+    }
+  },
+  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;
+  },
+  mounted: function mounted() {
+    // if (!this.element) {
+    //     return;
+    // }
+    // if (getComputedStyle(this.element).direction === 'rtl') {
+    //     this.setState({
+    //         rtl: true
+    //     });
+    // }
+  },
+  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`;
+    //     });
+    // });
+  },
+  // @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);
+      this.preventDataOps = window.setTimeout(function () {
+        _this.preventDataOps = undefined;
+      }, 200);
+    }
+    var position = this.$props.defaultPosition;
+    var resizable = this.$props.resizable;
+    var itemStyles = __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 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({
+        height: '100%'
+      }, this.$props.style)
+    }, [defaultSlots,
+    // @ts-ignore
+    h(ResizeHandlers, {
+      onPress: this.handlePress,
+      on: this.v3 ? undefined : {
+        "press": this.handlePress,
+        "resize": this.handleResize
+      },
+      onResize: this.handleResize,
+      resizable: resizable,
+      attrs: this.v3 ? undefined : {
+        resizable: resizable,
+        rtl: this.state.rtl
+      },
+      rtl: this.state.rtl
+    })]);
+    return h("div", {
+      style: itemStyles,
+      "class": this.$props.hintClassName
+    }, [
+    // @ts-ignore function children
+    h(Draggable, {
+      ref: function ref(e) {
+        _this.draggable = e;
+      },
+      onDrag: this.$props.reorderable ? this.handleDrag : undefined,
+      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
+      },
+      onRelease: this.$props.reorderable ? this.handleRelease : undefined,
+      onPress: this.$props.reorderable ? this.handlePress : undefined
+    }, this.v3 ? function () {
+      return [card];
+    } : [card])]);
+  },
+  methods: {
+    handleResize: function handleResize(e, q) {
+      if (q.end) {
+        this.handleRelease();
+        return;
+      }
+      if (!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.state.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';
+        } else {
+          this.dragElement.style.marginRight = -dX + 'px';
+        }
+        this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
+      }
+      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.$props.update(this.$props.index, 0, 0, row, col);
+      }
+    },
+    handlePress: function handlePress(e) {
+      if (!this.dragElement) {
+        return;
+      }
+      this.ignoreDrag = false;
+      if (this.$props.ignoreDrag && this.$props.ignoreDrag(e.event.originalEvent)) {
+        this.ignoreDrag = true;
+        return;
+      }
+      if (this.element) {
+        this.element.style.zIndex = '10';
+        this.element.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();
+      this.pressXY = {
+        x: e.event.clientX,
+        y: e.event.clientY
+      };
+      this.pressOffset = {
+        x: e.event.clientX - rec.x,
+        y: e.event.clientY - rec.y
+      };
+    },
+    handleDrag: function handleDrag(e) {
+      if (this.ignoreDrag) {
+        return;
+      }
+      var dragElement = this.dragElement;
+      if (e.event.originalEvent.defaultPrevented || !dragElement) {
+        return;
+      }
+      this.dragging = true;
+      e.event.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
+      };
+      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.$props.update(this.$props.index, row, this.state.rtl ? -col : col, 0, 0);
+    },
+    handleRelease: function handleRelease() {
+      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');
+      }
+      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');
+      }
+    }
+  }
+  // /**
+  //  * @hidden
+  //  */
+  // getSnapshotBeforeUpdate(_: any) {
+  //     this.oldSize = {};
+  //     if (this.dragElement) {
+  //         this.oldSize = this.dragElement.getBoundingClientRect();
+  //     }
+  //     return null;
+  // }   
+};
+/**
+ * @hidden
+ */
+var Tile = TileVue2;
+export { Tile, TileVue2 };

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

@@ -0,0 +1,108 @@
+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_tilelayout %}#toc-controlling-the-position)).
+     */
+    positions?: TilePosition[];
+    /**
+     * Fires when the user repositions the tile by either dragging or resizing
+     * ([see example]({% slug tiles_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={(e) => { return !(e.target.classList.contains("k-card-title")); }}` will make only the headers draggable.
+     * Setting `ignoreDrag={(e) => { return e.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 };

package/dist/esm/tilelayout/TileLayout.js

@@ -0,0 +1,222 @@
+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 { getter, classNames, validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { Tile } from './Tile.js';
+/**
+ * @hidden
+ */
+var AUTO_FLOW_CLASSES = {
+  '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'
+};
+/**
+ * @hidden
+ */
+var TileLayoutVue2 = {
+  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 validator(value) {
+        return ['column', 'row', 'column dense', 'row dense', 'unset'].includes(value);
+      }
+    }
+    // onReposition: PropTypes.func,
+    // ignoreDrag: PropTypes.func
+  },
+
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  computed: {
+    positions: function positions() {
+      return (this.$props.items || []).map(function (p, i) {
+        return Object.assign({
+          order: i,
+          rowSpan: 1,
+          colSpan: 1
+        }, p.defaultPosition);
+      });
+    }
+  },
+  // /**
+  //  * @hidden
+  //  */
+  // static getDerivedStateFromProps(props: TileLayoutProps, state: TileLayoutState) {
+  //     if (props.positions) {
+  //         // The component is in controlled mode.
+  //         return {
+  //             positions: props.positions.map((p, i) => (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p)))
+  //         };
+  //     }
+  //     if (props.items && (!state.positions || (props.items.length !== state.positions.length))) {
+  //         // The component is in uncontrolled mode.
+  //         return {
+  //             positions: props.items.map((p, i) => (Object.assign(
+  // { order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)))
+  //         };
+  //     }
+  //     return null;
+  // }
+  // /**
+  //  * @hidden
+  //  */
+  // update = (index: number, dOrder: number, dCol: number, dRowSpan = 0, dColSpan = 0) => {
+  //     if (dOrder === 0 && dCol === 0 && !dColSpan && !dRowSpan) {
+  //         return;
+  //     }
+  //     let shouldUpdate = false;
+  //     const positions: Array<TileStrictPosition> = this.state.positions.map(p => Object.assign({}, p));
+  //     // reordering:
+  //     const current = positions[index];
+  //     const other = positions.find(item => (item.order === current.order + dOrder));
+  //     if (other && other !== current) {
+  //         current.order += dOrder;
+  //         other.order += -dOrder;
+  //         shouldUpdate = true;
+  //     }
+  //     const proposedCol = current.col + dCol;
+  //     if (dCol !== 0 && proposedCol >= 1 && proposedCol + current.colSpan <= (this.$props.columns || 3) + 1) {
+  //         current.col = proposedCol;
+  //         shouldUpdate = true;
+  //     }
+  //     // resizing:
+  //     const proposedColSpan = current.colSpan + dColSpan;
+  //     if (dColSpan && proposedColSpan >= 1 && proposedColSpan + current.col <= (this.$props.columns || 3) + 1) {
+  //         current.colSpan = proposedColSpan;
+  //         shouldUpdate = true;
+  //     }
+  //     const proposedRowSpan = current.rowSpan + dRowSpan;
+  //     if (dRowSpan && proposedRowSpan >= 1) {
+  //         current.rowSpan = proposedRowSpan;
+  //         shouldUpdate = true;
+  //     }
+  //     if (shouldUpdate) {
+  //         this.setState({ positions: positions });
+  //         dispatchEvent(this.$props.onReposition, {} as any, this, { value: positions });
+  //     }
+  // };
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      className = _a.className,
+      _b = _a.columns,
+      columns = _b === void 0 ? 3 : _b,
+      _c = _a.columnWidth,
+      columnWidth = _c === void 0 ? '1fr' : _c,
+      gap = _a.gap,
+      _d = _a.rowHeight,
+      rowHeight = _d === void 0 ? '1fr' : _d,
+      style = _a.style,
+      _e = _a.autoFlow,
+      autoFlow = _e === void 0 ? 'column' : _e,
+      _f = _a.items,
+      items = _f === void 0 ? [] : _f;
+    var gapValue = gap ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns) : 16;
+    var tileLayoutStyles = __assign({
+      gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"),
+      gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"),
+      gap: gapValue,
+      padding: gapValue
+    }, style);
+    return h("div", {
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir,
+        id: this.$props.id
+      },
+      "class": classNames('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className),
+      style: tileLayoutStyles,
+      id: this.$props.id
+    }, [items.map(function (tile, index) {
+      return (
+        // @ts-ignore function children
+        h(Tile, {
+          key: this.$props.dataItemKey ? getter(this.$props.dataItemKey)(tile) : index,
+          update: this.update,
+          attrs: this.v3 ? undefined : {
+            update: this.update,
+            defaultPosition: this.state.positions[index],
+            index: index,
+            resizable: tile.resizable,
+            reorderable: tile.reorderable,
+            hintClassName: tile.hintClassName,
+            hintStyle: tile.hintStyle,
+            ignoreDrag: this.$props.ignoreDrag
+          },
+          defaultPosition: this.state.positions[index],
+          index: index,
+          resizable: tile.resizable,
+          reorderable: tile.reorderable,
+          style: tile.style,
+          "class": tile.className,
+          hintClassName: tile.hintClassName,
+          hintStyle: tile.hintStyle,
+          ignoreDrag: this.$props.ignoreDrag
+        }, this.v3 ? function () {
+          return [tile.item ? tile.item : [h("div", {
+            "class": "k-tilelayout-item-header k-card-header"
+          }, [tile.header ? tile.header : h("h5", {
+            "class": 'k-card-title'
+          }, [tile.header])]), h("div", {
+            "class": 'k-tilelayout-item-body k-card-body'
+          }, [tile.body])]];
+        } : [tile.item ? tile.item : [h("div", {
+          "class": "k-tilelayout-item-header k-card-header"
+        }, [tile.header ? tile.header : h("h5", {
+          "class": 'k-card-title'
+        }, [tile.header])]), h("div", {
+          "class": 'k-tilelayout-item-body k-card-body'
+        }, [tile.body])]])
+      );
+    }, this)]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var TileLayout = TileLayoutVue2;
+export { TileLayout, TileLayoutVue2 };