@progress/kendo-vue-layout 8.0.3-develop.1 → 8.0.3-develop.3

package/tilelayout/ResizeHandlers.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface ResizeHandlersProps {
+    direction: string;
+    onResize?: (e: any, args: {
+        end: boolean;
+        direction: any;
+    }) => void;
+    onPress?: (e: any) => void;
+    rtl: boolean;
+}
+/**
+ * @hidden
+ */
+declare const ResizeHandlers: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    direction: PropType<string>;
+    rtl: PropType<boolean>;
+    onResize: PropType<(e: any, args: {
+        end: boolean;
+        direction: any;
+    }) => void>;
+    onPress: PropType<(e: any) => void>;
+}>, {}, {}, {
+    handleClass(): string;
+    dirStyles(): {
+        top: number;
+        width: string;
+        left: number;
+        right: string;
+        height?: undefined;
+    } | {
+        top: number;
+        width: string;
+        right: number;
+        left: string;
+        height?: undefined;
+    } | {
+        left: number;
+        height: string;
+        top?: undefined;
+        width?: undefined;
+        right?: undefined;
+    } | {
+        width: string;
+        height: string;
+        right: string;
+        left: number;
+        top?: undefined;
+    } | {
+        width: string;
+        height: string;
+        right: number;
+        left: string;
+        top?: undefined;
+    } | {
+        top?: undefined;
+        width?: undefined;
+        left?: undefined;
+        right?: undefined;
+        height?: undefined;
+    };
+    handleStyle(): any;
+}, {
+    handleResize(event: any, isEnd: boolean, direction: any): void;
+    handlePress(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    direction: PropType<string>;
+    rtl: PropType<boolean>;
+    onResize: PropType<(e: any, args: {
+        end: boolean;
+        direction: any;
+    }) => void>;
+    onPress: PropType<(e: any) => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ResizeHandlers };

package/tilelayout/Tile.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TileStrictPosition, TileLayoutItem } from './interfaces/main';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface TileProps extends TileLayoutItem {
+    onUpdate?: (index: number, dRow: number, dCol: number, row: number, col: number) => void;
+    index: number;
+    defaultPosition: TileStrictPosition;
+    ignoreDrag?: (event: any) => boolean;
+    tabIndex: number;
+    ariaDescribedBy: string;
+}
+/**
+ * @hidden
+ */
+declare const Tile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    defaultPosition: {
+        type: PropType<TileStrictPosition>;
+        required: true;
+    };
+    index: PropType<number>;
+    tile: PropType<object>;
+    hintStyle: PropType<object>;
+    hintClass: PropType<string>;
+    header: PropType<any>;
+    body: PropType<any>;
+    item: PropType<any>;
+    resizable: {
+        type: PropType<string | boolean>;
+        default: boolean;
+        validator: (value: string) => any;
+    };
+    reorderable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    ariaDescribedBy: PropType<string>;
+    ignoreDrag: PropType<(event: any) => boolean>;
+    onUpdate: PropType<(index: number, dRow: number, dCol: number, row: number, col: number) => void>;
+}>, {}, {
+    rtl: boolean;
+    grabbed: boolean;
+    showHint: boolean;
+}, {
+    wrapperClass(): {
+        'k-tilelayout-item': boolean;
+        'k-card': boolean;
+        'k-cursor-grab': any;
+    };
+}, {
+    touchStart(e: any): void;
+    dragElement(): any;
+    handleResize(e: any, q: {
+        end: boolean;
+        direction: any;
+    }): void;
+    handlePress(e: any): void;
+    handleDrag(e: any): void;
+    handleRelease(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    defaultPosition: {
+        type: PropType<TileStrictPosition>;
+        required: true;
+    };
+    index: PropType<number>;
+    tile: PropType<object>;
+    hintStyle: PropType<object>;
+    hintClass: PropType<string>;
+    header: PropType<any>;
+    body: PropType<any>;
+    item: PropType<any>;
+    resizable: {
+        type: PropType<string | boolean>;
+        default: boolean;
+        validator: (value: string) => any;
+    };
+    reorderable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    ariaDescribedBy: PropType<string>;
+    ignoreDrag: PropType<(event: any) => boolean>;
+    onUpdate: PropType<(index: number, dRow: number, dCol: number, row: number, col: number) => void>;
+}>> & Readonly<{}>, {
+    tabIndex: number;
+    resizable: string | boolean;
+    reorderable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { Tile };

package/tilelayout/TileLayout.d.ts

@@ -0,0 +1,126 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, 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
+ */
+declare const TileLayout: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: StringConstructor;
+    dir: StringConstructor;
+    gap: ObjectConstructor;
+    columns: NumberConstructor;
+    columnWidth: (StringConstructor | NumberConstructor)[];
+    rowHeight: (StringConstructor | NumberConstructor)[];
+    dataItemKey: StringConstructor;
+    items: ArrayConstructor;
+    positions: ArrayConstructor;
+    autoFlow: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => any;
+    };
+    ignoreDrag: FunctionConstructor;
+}>, {}, {
+    currentPositions: any[];
+    showLicenseWatermark: boolean;
+    licenseMessage: any;
+}, {
+    compPositions(): any;
+    wrapperClass(): {
+        [x: number]: boolean;
+        'k-tilelayout': boolean;
+        'k-pos-relative': boolean;
+    };
+}, {
+    focus(): void;
+    updateHandle(index: number, dOrder: number, dCol: number, dRowSpan: number, dColSpan: number, isResized: boolean): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: StringConstructor;
+    dir: StringConstructor;
+    gap: ObjectConstructor;
+    columns: NumberConstructor;
+    columnWidth: (StringConstructor | NumberConstructor)[];
+    rowHeight: (StringConstructor | NumberConstructor)[];
+    dataItemKey: StringConstructor;
+    items: ArrayConstructor;
+    positions: ArrayConstructor;
+    autoFlow: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => any;
+    };
+    ignoreDrag: FunctionConstructor;
+}>> & Readonly<{}>, {
+    autoFlow: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TileLayout };

package/tilelayout/interfaces/main.d.ts

@@ -0,0 +1,205 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * 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_position_dimensions_tilelayout %})).
+     */
+    defaultPosition?: TilePosition;
+    /**
+     * Sets additional styles to the TileLayoutItem.
+     */
+    style?: object;
+    /**
+     * Sets additional classes to the TileLayoutItem.
+     */
+    class?: string;
+    /**
+     * The tile object.
+     */
+    tile?: object;
+    /**
+     * Sets additional CSS styles to the TileLayoutItem hint element.
+     */
+    hintStyle?: object;
+    /**
+     * Sets additional classes to the TileLayoutItem hint element.
+     */
+    hintClass?: string;
+    /**
+     * Sets the title in the TileLayoutItem's header content
+     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
+     */
+    header?: any;
+    /**
+     * Sets the title in the TileLayoutItem's header text
+     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
+     */
+    headerText?: string;
+    /**
+     * Sets the content in TileLayoutItem's body content
+     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
+     */
+    body?: any;
+    /**
+     * Sets the content in TileLayoutItem's body text
+     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
+     */
+    bodyText?: string;
+    /**
+     * Overrides the default rendering of the TileLayoutItem
+     * ([see example]({% slug tiles_custom_rendering_tilelayout %})).
+     */
+    item?: any;
+    /**
+     * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated.
+     */
+    id?: any;
+    /**
+     * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
+     * ([see example]({% slug tiles_resizing_tilelayout %})).
+     * 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_reordering_tilelayout %})).
+     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
+     */
+    reorderable?: boolean;
+    /**
+     * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`.
+     */
+    tabIndex?: number;
+}
+/**
+ * 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_resizing_tilelayout %})).
+ * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
+ */
+export 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 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>;
+    /**
+     * The index of the currently moved tile.
+     */
+    index: number;
+    /**
+     * Returns 0 if the row is not changed, 1 if the item is dragged to the next row
+     * and -1 if the item is drag to the previous row.
+     */
+    row: number;
+    /**
+     * Returns 0 if the column is not changed, 1 if the item is dragged to the next column
+     * and -1 if the item is drag to the previous column.
+     */
+    col: number;
+}
+/**
+ * The arguments for the `onTileresize` TileLayout event.
+ */
+export interface TileLayoutTileResizeEvent {
+    /**
+     * The new resized positions of the TileLayout tiles.
+     */
+    value: Array<TileStrictPosition>;
+    /**
+     * The index of the currently resized tile.
+     */
+    index: number;
+    /**
+     * Returns 0 if the rowSpan is not changed, 1 if the rowSpan is increased
+     * and -1 if the rowSpan is decreased.
+     */
+    rowSpan: number;
+    /**
+     * Returns 0 if the columnSpan is not changed, 1 if the columnSpan is increased
+     * and -1 if the columnSpan is decreased.
+     */
+    colSpan: number;
+}