@progress/kendo-vue-layout 3.7.4-dev.202211100847 → 3.7.4-dev.202211301436

package/dist/esm/tilelayout/TileLayout.js

@@ -1,21 +1,9 @@
-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 { getListeners, getTemplate, getter, templateRendering, validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 import { Tile } from './Tile.js';
 /**
@@ -49,16 +37,37 @@ var TileLayoutVue2 = {
       validator: function validator(value) {
         return ['column', 'row', 'column dense', 'row dense', 'unset'].includes(value);
       }
-    }
-    // onReposition: PropTypes.func,
-    // ignoreDrag: PropTypes.func
+    },
+    ignoreDrag: Function
   },
-
   created: function created() {
     validatePackage(packageMetadata);
   },
+  data: function data() {
+    return {
+      currentPositions: []
+    };
+  },
   computed: {
-    positions: function positions() {
+    compPositions: function compPositions() {
+      if (this.positions) {
+        return this.positions.map(function (p, i) {
+          return Object.assign({
+            order: i,
+            rowSpan: 1,
+            colSpan: 1
+          }, p);
+        });
+      }
+      if (this.items && this.currentPositions.length) {
+        return this.currentPositions.map(function (p, i) {
+          return Object.assign({
+            order: i,
+            rowSpan: 1,
+            colSpan: 1
+          }, p);
+        });
+      }
       return (this.$props.items || []).map(function (p, i) {
         return Object.assign({
           order: i,
@@ -66,65 +75,15 @@ var TileLayoutVue2 = {
           colSpan: 1
         }, p.defaultPosition);
       });
+    },
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var autoFlow = this.$props.autoFlow;
+      return _a = {
+        'k-tilelayout': true
+      }, _a[AUTO_FLOW_CLASSES[autoFlow]] = true, _a;
     }
   },
-  // /**
-  //  * @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;
@@ -135,7 +94,6 @@ var TileLayoutVue2 = {
   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,
@@ -143,67 +101,88 @@ var TileLayoutVue2 = {
       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;
+      _e = _a.items,
+      items = _e === void 0 ? [] : _e;
     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({
+    var tileLayoutStyles = {
       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),
+      "class": this.wrapperClass,
       style: tileLayoutStyles,
       id: this.$props.id
     }, [items.map(function (tile, index) {
+      var item = templateRendering.call(this, tile.item, getListeners.call(this));
+      var itemContent = getTemplate.call(this, {
+        h: h,
+        template: item,
+        defaultRendering: null
+      });
+      var header = templateRendering.call(this, tile.header, getListeners.call(this));
+      var headerContent = getTemplate.call(this, {
+        h: h,
+        template: header,
+        defaultRendering: null
+      });
+      var body = templateRendering.call(this, tile.body, getListeners.call(this));
+      var bodyContent = getTemplate.call(this, {
+        h: h,
+        template: body,
+        defaultRendering: null
+      });
       return (
         // @ts-ignore function children
         h(Tile, {
           key: this.$props.dataItemKey ? getter(this.$props.dataItemKey)(tile) : index,
-          update: this.update,
+          onUpdate: this.updateHandle,
+          on: this.v3 ? undefined : {
+            "update": this.updateHandle
+          },
+          defaultPosition: this.compPositions[index],
           attrs: this.v3 ? undefined : {
-            update: this.update,
-            defaultPosition: this.state.positions[index],
+            defaultPosition: this.compPositions[index],
             index: index,
             resizable: tile.resizable,
             reorderable: tile.reorderable,
-            hintClassName: tile.hintClassName,
+            hintClass: tile.hintClass,
             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,
+          "class": tile.class,
+          hintClass: tile.hintClass,
           hintStyle: tile.hintStyle,
           ignoreDrag: this.$props.ignoreDrag
         }, this.v3 ? function () {
-          return [tile.item ? tile.item : [h("div", {
+          return [tile.item ? {
+            itemContent: itemContent
+          } : [h("div", {
             "class": "k-tilelayout-item-header k-card-header"
-          }, [tile.header ? tile.header : h("h5", {
+          }, [tile.header ? headerContent : h("h5", {
             "class": 'k-card-title'
-          }, [tile.header])]), h("div", {
+          }, [tile.headerText])]), h("div", {
             "class": 'k-tilelayout-item-body k-card-body'
-          }, [tile.body])]];
-        } : [tile.item ? tile.item : [h("div", {
+          }, [tile.body ? bodyContent : tile.bodyText])]];
+        } : [tile.item ? {
+          itemContent: itemContent
+        } : [h("div", {
           "class": "k-tilelayout-item-header k-card-header"
-        }, [tile.header ? tile.header : h("h5", {
+        }, [tile.header ? headerContent : h("h5", {
           "class": 'k-card-title'
-        }, [tile.header])]), h("div", {
+        }, [tile.headerText])]), h("div", {
           "class": 'k-tilelayout-item-body k-card-body'
-        }, [tile.body])]])
+        }, [tile.body ? bodyContent : tile.bodyText])]])
       );
     }, this)]);
   },
@@ -212,6 +191,53 @@ var TileLayoutVue2 = {
       if (this.$el) {
         this.$el.focus();
       }
+    },
+    updateHandle: function updateHandle(index, dOrder, dCol, dRowSpan, dColSpan) {
+      if (dRowSpan === void 0) {
+        dRowSpan = 0;
+      }
+      if (dColSpan === void 0) {
+        dColSpan = 0;
+      }
+      if (dOrder === 0 && dCol === 0 && !dColSpan && !dRowSpan) {
+        return;
+      }
+      var shouldUpdate = false;
+      var positions = this.compPositions.map(function (p) {
+        return Object.assign({}, p);
+      });
+      // reordering:
+      var current = positions[index];
+      var other = positions.find(function (item) {
+        return item.order === current.order + dOrder;
+      });
+      if (other && other !== current) {
+        current.order += dOrder;
+        other.order += -dOrder;
+        shouldUpdate = true;
+      }
+      var proposedCol = current.col + dCol;
+      if (dCol !== 0 && proposedCol >= 1 && proposedCol + current.colSpan <= (this.$props.columns || 3) + 1) {
+        current.col = proposedCol;
+        shouldUpdate = true;
+      }
+      // resizing:
+      var proposedColSpan = current.colSpan + dColSpan;
+      if (dColSpan && proposedColSpan >= 1 && proposedColSpan + current.col <= (this.$props.columns || 3) + 1) {
+        current.colSpan = proposedColSpan;
+        shouldUpdate = true;
+      }
+      var proposedRowSpan = current.rowSpan + dRowSpan;
+      if (dRowSpan && proposedRowSpan >= 1) {
+        current.rowSpan = proposedRowSpan;
+        shouldUpdate = true;
+      }
+      if (shouldUpdate) {
+        this.currentPositions = positions;
+        this.$emit('reposition', {
+          value: positions
+        });
+      }
     }
   }
 };

package/dist/esm/tilelayout/interfaces/main.d.ts

@@ -7,10 +7,14 @@ export interface TileLayoutItem {
      * ([see example]({% slug tiles_tilelayout %}#toc-position-and-dimensions)).
      */
     defaultPosition?: TilePosition;
+    /**
+     * Sets additional styles to the TileLayoutItem.
+     */
+    style?: object;
     /**
      * Sets additional classes to the TileLayoutItem.
      */
-    className?: string;
+    class?: string;
     /**
      * Sets additional CSS styles to the TileLayoutItem hint element.
      */
@@ -18,17 +22,27 @@ export interface TileLayoutItem {
     /**
      * Sets additional classes to the TileLayoutItem hint element.
      */
-    hintClassName?: string;
+    hintClass?: string;
     /**
-     * Sets the title in the TileLayoutItem's header
+     * Sets the title in the TileLayoutItem's header content
      * ([see example]({% slug tiles_tilelayout %})).
      */
     header?: any;
     /**
-     * Sets the content in TileLayoutItem's body
+     * Sets the title in the TileLayoutItem's header text
+     * ([see example]({% slug tiles_tilelayout %})).
+     */
+    headerText?: string;
+    /**
+     * Sets the content in TileLayoutItem's body content
      * ([see example]({% slug tiles_tilelayout %})).
      */
     body?: any;
+    /**
+     * Sets the content in TileLayoutItem's body text
+     * ([see example]({% slug tiles_tilelayout %})).
+     */
+    bodyText?: string;
     /**
      * Overrides the default rendering of the TileLayoutItem
      * ([see example]({% slug tiles_tilelayout %}#toc-custom-rendering)).

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: 1668069369,
+    publishDate: 1669818334,
     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/ResizeHandlers.d.ts

@@ -7,7 +7,7 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
  * @hidden
  */
 export interface ResizeHandlersProps {
-    resizable: string | boolean;
+    direction: string;
     onResize?: (e: any, args: {
         end: boolean;
         direction: any;

package/dist/npm/tilelayout/ResizeHandlers.js

@@ -1,5 +1,17 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,15 +21,64 @@ 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");
 /**
  * @hidden
  */
 var ResizeHandlersVue2 = {
   name: 'KendoResizeHandlers',
   props: {
-    resizable: [String, Boolean],
+    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;
@@ -26,55 +87,50 @@ var ResizeHandlersVue2 = {
     };
   },
   render: function render(createElement) {
+    var _this2 = this;
+    var _this = this;
     var h = gh || createElement;
-    var _a = this.$props,
-      resizable = _a.resizable,
-      onPress = _a.onPress,
-      rtl = _a.rtl;
-    if (!resizable) {
-      return null;
-    }
-    // const Handle = (props: { onResize: any; style: {}; d: string; onPress: any }) => (
-    //    // @ts-ignore
-    //   <Draggable
-    //     onPress={props.onPress}
-    //     onDrag={(data: any) => { props.onResize(data.event, false, props.d); }}
-    //     onRelease={(data: any) => { props.onResize(data.event, true, props.d); }}
-    //     >
-    //     <div className={'k-resize-handle k-cursor-' + props.d + '-resize'}
-    // style={{ bottom: 0, right: 0, ...props.style }} />
-    //   </Draggable>
-    // );
-    return h("div")
-    // <React.Fragment>
-    //   {resizable !== 'vertical' && (
-    //   <Handle
-    //     onPress={onPress}
-    //     onResize={this.handleResize}
-    //     d="ew"
-    //     style={rtl ? { top: 0, width: 9, left: 0, right: '' } : { top: 0, width: 9, right: 0, left: '' }}
-    //           />
-    //       )}
-    //   {resizable !== 'horizontal' && (
-    //   <Handle onPress={onPress} onResize={this.handleResize} d="ns" style={{ left: 0, height: 9 }} />)}
-    //   {(resizable === true) && (
-    //   <Handle
-    //     onPress={onPress}
-    //     onResize={this.handleResize}
-    //     d={rtl ? 'nesw' : 'nwse'}
-    //     style={rtl ? { width: 9, height: 9, right: '', left: 0 } : { width: 9, height: 9, right: 0, left: '' }}
-    //           />)}
-    // </React.Fragment>
-    ;
+    var direction = this.$props.direction;
+    return (
+      // @ts-ignore function children
+      h(kendo_vue_common_1.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.$props.onResize(event, {
+      this.$emit('resize', event, {
         end: isEnd,
         direction: direction
       });
+    },
+    handlePress: function handlePress(event) {
+      this.$emit('press', event);
     }
   }
 };