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

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

@@ -0,0 +1,135 @@
+/**
+ * The interface for describing items that can be passed to the `items` property of the TileLayout component.
+ */
+export interface TileLayoutItem {
+    /**
+     * The position which is used when the TileLayout is in uncontrolled mode
+     * ([see example]({% slug tiles_tilelayout %}#toc-position-and-dimensions)).
+     */
+    defaultPosition?: TilePosition;
+    /**
+     * Sets additional classes to the TileLayoutItem.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the TileLayoutItem hint element.
+     */
+    hintStyle?: object;
+    /**
+     * Sets additional classes to the TileLayoutItem hint element.
+     */
+    hintClassName?: string;
+    /**
+     * Sets the title in the TileLayoutItem's header
+     * ([see example]({% slug tiles_tilelayout %})).
+     */
+    header?: any;
+    /**
+     * Sets the content in TileLayoutItem's body
+     * ([see example]({% slug tiles_tilelayout %})).
+     */
+    body?: any;
+    /**
+     * Overrides the default rendering of the TileLayoutItem
+     * ([see example]({% slug tiles_tilelayout %}#toc-custom-rendering)).
+     */
+    item?: any;
+    /**
+     * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
+     * ([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 | string | boolean;
+    /**
+     * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
+     * ([see example]({% slug tiles_tilelayout %}#toc-reordering)).
+     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
+     */
+    reorderable?: boolean;
+}
+/**
+ * Specifies the position of each tile.
+ */
+export interface TilePosition {
+    /**
+     * Defines the order index of the TileLayoutItem.
+     * If not set, items will receive a sequential order.
+     */
+    order?: number;
+    /**
+     * (Required) Defines on which column-line the TileLayoutItem will start.
+     * It is required in order reordering and resizing functionalities to work as expected as they rely on it.
+     */
+    col: number;
+    /**
+     * Specifies how many columns will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    colSpan?: number;
+    /**
+     * Defines on which row-line the TileLayoutItem will start.
+     */
+    row?: number;
+    /**
+     * Specifies how many rows will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    rowSpan?: number;
+}
+/**
+ * Specifies the strict position of each tile.
+ * Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}).
+ */
+export interface TileStrictPosition extends TilePosition {
+    /**
+     * Defines the order index of the TileLayoutItem.
+     * If not set, items will receive a sequential order.
+     */
+    order: number;
+    /**
+     * Specifies how many rows will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    rowSpan: number;
+    /**
+     * Specifies how many columns will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    colSpan: number;
+}
+/**
+ * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
+ * ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
+ * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
+ */
+export declare type TileResizeMode = 'horizontal' | 'vertical' | boolean;
+/**
+ * Specifies the gaps between the tiles.
+ */
+export interface TileLayoutGap {
+    /**
+     * The rows gap between tiles.
+     * Defaults to `16px`.
+     */
+    rows?: number | string;
+    /**
+     * The columns gap between tiles.
+     * Defaults to `16px`.
+     */
+    columns?: number | string;
+}
+/**
+ * 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`.
+ */
+export declare type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';
+/**
+ * The arguments for the `onReposition` TileLayout event.
+ */
+export interface TileLayoutRepositionEvent {
+    /**
+     * The new positions of the TileLayout tiles.
+     */
+    value: Array<TileStrictPosition>;
+}

package/dist/esm/tilelayout/interfaces/main.js

@@ -0,0 +1 @@
+export {};

package/dist/npm/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/npm/main.js

@@ -63,6 +63,8 @@ __exportStar(require("./panelbar/interfaces/PanelBarProps"), exports);
 __exportStar(require("./panelbar/interfaces/PanelBarItemProps"), exports);
 __exportStar(require("./panelbar/interfaces/RenderPanelBarItem"), exports);
 __exportStar(require("./panelbar/interfaces/PanelBarSelectEventArguments"), exports);
+__exportStar(require("./tilelayout/TileLayout"), exports);
+__exportStar(require("./tilelayout/interfaces/main"), exports);
 __exportStar(require("./appbar/AppBar"), exports);
 __exportStar(require("./appbar/interfaces/AppBarProps"), exports);
 __exportStar(require("./appbar/AppBarSection"), exports);

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: 1667290002,
+    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/npm/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/npm/tilelayout/ResizeHandlers.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizeHandlersVue2 = exports.ResizeHandlers = void 0;
+// @ts-ignore
+var Vue = require("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
+      });
+    }
+  }
+};
+exports.ResizeHandlersVue2 = ResizeHandlersVue2;
+/**
+ * @hidden
+ */
+var ResizeHandlers = ResizeHandlersVue2;
+exports.ResizeHandlers = ResizeHandlers;

package/dist/npm/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 };