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

package/dist/es/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';
+import { Tile } from './Tile';
+/**
+ * @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 };

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

@@ -39,7 +39,7 @@ export interface TileLayoutItem {
      * ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
      * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
      */
-    resizable?: TileResizeMode;
+    resizable?: TileResizeMode | string | boolean;
     /**
      * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
      * ([see example]({% slug tiles_tilelayout %}#toc-reordering)).

package/dist/esm/main.d.ts

@@ -47,6 +47,8 @@ export * from './panelbar/interfaces/PanelBarProps';
 export * from './panelbar/interfaces/PanelBarItemProps';
 export * from './panelbar/interfaces/RenderPanelBarItem';
 export * from './panelbar/interfaces/PanelBarSelectEventArguments';
+export * from './tilelayout/TileLayout';
+export * from './tilelayout/interfaces/main';
 export * from './appbar/AppBar';
 export * from './appbar/interfaces/AppBarProps';
 export * from './appbar/AppBarSection';

package/dist/esm/main.js

@@ -47,6 +47,8 @@ export * from './panelbar/interfaces/PanelBarProps.js';
 export * from './panelbar/interfaces/PanelBarItemProps.js';
 export * from './panelbar/interfaces/RenderPanelBarItem.js';
 export * from './panelbar/interfaces/PanelBarSelectEventArguments.js';
+export * from './tilelayout/TileLayout.js';
+export * from './tilelayout/interfaces/main.js';
 export * from './appbar/AppBar.js';
 export * from './appbar/interfaces/AppBarProps.js';
 export * from './appbar/AppBarSection.js';

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1667392740,
+    publishDate: 1667399417,
     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/esm/tilelayout/ResizeHandlers.d.ts

@@ -0,0 +1,53 @@
+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 {
+    resizable: string | boolean;
+    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/esm/tilelayout/ResizeHandlers.js

@@ -0,0 +1,79 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+/**
+ * @hidden
+ */
+var ResizeHandlersVue2 = {
+  name: 'KendoResizeHandlers',
+  props: {
+    resizable: [String, Boolean],
+    rtl: Boolean
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    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>
+    ;
+  },
+
+  methods: {
+    handleResize: function handleResize(event, isEnd, direction) {
+      event.originalEvent.preventDefault();
+      this.$props.onResize(event, {
+        end: isEnd,
+        direction: direction
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var ResizeHandlers = ResizeHandlersVue2;
+export { ResizeHandlers, ResizeHandlersVue2 };

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

@@ -0,0 +1,51 @@
+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;
+}
+/**
+ * @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 };