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

package/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-vue-common';
+/**
+ * Represents the props of the PanelBarItem component.
+ */
+export interface PanelBarItemProps {
+    /**
+     * Sets the subitems of the item.
+     */
+    items?: any[];
+    /**
+     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
+     */
+    animation?: boolean;
+    /**
+     * The class name that is set to the PanelBarItem header.
+     */
+    headerClassName?: string;
+    /**
+     * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    level?: number;
+    /**
+     * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered next to the title.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
+     */
+    imageUrl?: string;
+    /**
+     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
+     */
+    selected?: boolean;
+    /**
+     * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
+     */
+    title?: any;
+    /**
+     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
+     */
+    id?: string | number;
+    /**
+     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    parentExpanded?: boolean;
+    /**
+     *  Defines the custom rendering of the content of the PanelBarItem. Accepts a Vue component, a `render` function, or a slot name.
+     */
+    content?: any;
+    /**
+     *  Defines the custom rendering of the header of the PanelBarItem. Accepts a Vue component, a `render` function, or a slot name.
+     */
+    header?: any;
+    /**
+     * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
+     */
+    uniquePrivateKey?: string | number;
+    /**
+     * @hidden
+     */
+    parentUniquePrivateKey?: string[];
+    /**
+     * @hidden
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    item?: any;
+}

package/panelbar/interfaces/PanelBarProps.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarSelectEventArguments } from './PanelBarSelectEventArguments';
+/**
+ * Represents the expand modes of the Kendo UI for Vue PanelBar. Defaults to `multiple`.
+ */
+export type PanelBarExpandMode = 'single' | 'multiple';
+/**
+ * Represents the props of the [Kendo UI for Vue PanelBar component]({% slug overview_panelbar %}).
+ */
+export interface PanelBarProps {
+    /**
+     * The class name that is set to the PanelBar.
+     */
+    className?: string;
+    /**
+     * Sets the animation state of the PanelBar.
+     */
+    animation?: boolean;
+    /**
+     * Sets the items of the PanelBar.
+     */
+    items?: any[];
+    /**
+     * Sets the expand mode of the PanelBar ([see example]({% slug expandmodes_panelbar %})).
+     *
+     * The available modes are:
+     * - `"single"`—Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
+     * - `"multiple"` (default)—Allows you to expand two or more items at a time. Items can also be toggled.
+     */
+    expandMode?: PanelBarExpandMode;
+    /**
+     * Sets the direction of the PanelBar component.
+     */
+    dir?: string;
+    /**
+     * If set, overrides the currently selected property in the PanelBar state.
+     */
+    selected?: string | number;
+    /**
+     * Sets the initial expanded state of the PanelBar.
+     */
+    expanded?: string[];
+    /**
+     * Sets the initial focused state of the PanelBar.
+     */
+    focused?: string | number;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Determines if the PanelBar is going to be used in controlled state.
+     */
+    isControlled?: boolean;
+    /**
+     * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
+     */
+    onSelect?: (event: PanelBarSelectEventArguments) => void;
+}

package/panelbar/interfaces/PanelBarSelectEventArguments.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments that are passed to the `onSelect` callback function.
+ */
+export interface PanelBarSelectEventArguments {
+    /**
+     * The selected PanelBar item.
+     */
+    target: any;
+    /**
+     * The new expanded PanelBar items state.
+     */
+    expandedItems: string[];
+}

package/panelbar/interfaces/RenderPanelBarItem.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarData } from '../PanelBar';
+/**
+ * @hidden
+ */
+export interface RenderPanelBarItem {
+    animation?: boolean;
+    keepItemsMounted?: boolean;
+    state: PanelBarData;
+    expanded: string[];
+    handleSelect: any;
+    parentExpanded?: boolean;
+    level?: number;
+    parentPrivateKey?: string[];
+}

package/panelbar/util.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarData } from './PanelBar';
+import { RenderPanelBarItem } from './interfaces/RenderPanelBarItem';
+import { PanelBarExpandMode } from './interfaces/PanelBarProps';
+/**
+ * @hidden
+ */
+export declare const renderChildren: (this: any, items: any[], { animation, keepItemsMounted, state, expanded, handleSelect, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => any;
+/**
+ * @hidden
+ */
+export declare const getFirstId: (props: any) => any;
+/**
+ * @hidden
+ */
+export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarData, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarData;
+/**
+ * @hidden
+ */
+export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare const isPresent: Function;
+/**
+ * @hidden
+ */
+export declare const isArrayEqual: (firstArray: any[], secondArray: any[]) => boolean;

package/splitter/Splitter.d.ts

@@ -0,0 +1,170 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SplitterPaneExtendedProps, SplitterPaneProps } from './SplitterPane';
+import { PropType } from 'vue';
+/**
+ * Represents the onChange event of the Splitter.
+ */
+export interface SplitterOnChangeEvent {
+    /**
+     * The new panes state.
+     */
+    newState: SplitterPaneProps[];
+    /**
+     * Indicates if is the last event during drag. Can be used to optimize performance.
+     */
+    isLast: boolean;
+    /**
+     * The native DOM event.
+     */
+    nativeEvent: any;
+}
+/**
+ * Represents the options of the Splitter.
+ */
+export interface SplitterProps {
+    /**
+     * Sets the options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for controlled state.
+     */
+    panes?: SplitterPaneProps[];
+    /**
+     * Sets the initial options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for uncontrolled state.
+     */
+    defaultPanes?: SplitterPaneProps[];
+    /**
+     * Specifies the orientation of the panes within the Splitter ([more information and examples]({% slug orientation_splitter %})). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
+     */
+    orientation?: 'vertical' | 'horizontal' | string;
+    /**
+     * Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
+     */
+    onChange?: (event: SplitterOnChangeEvent) => void;
+}
+/**
+ * @hidden
+ */
+export interface SplitterData {
+    isDragging: boolean;
+    dragIndex?: number;
+    startTime: number;
+    originalX: number;
+    originalY: number;
+    originalPrevSize: number;
+    originalNextSize: number;
+    currentPanes: SplitterPaneProps[];
+}
+/**
+ * Represents the [Kendo UI for Vue Native Splitter component]({% slug overview_splitter %}).
+ *
+ * ```js-no-run
+ * <template>
+ *   <Splitter
+ *     :style="{ height: '340px' }"
+ *     :panes="panes"
+ *     :orientation="'vertical'"
+ *     @change="onChange"
+ *   >
+ *     <template v-slot:first>
+ *       <div class="pane-content">
+ *         <h3>Top Pane</h3>
+ *       </div>
+ *     </template>
+ *     <template v-slot:second>
+ *       <div class="pane-content">
+ *         <h3>Bottom Pane</h3>
+ *       </div>
+ *     </template>
+ *   </Splitter>
+ * </template>
+ *
+ * <script>
+ * import { Splitter } from '@progress/kendo-vue-layout';
+ * import './styles.css';
+ *
+ * export default {
+ *   components: {
+ *     Splitter,
+ *   },
+ *   data() {
+ *     return {
+ *       panes: [
+ *         { size: '40%', containsSplitter: true, content: 'first' },
+ *         { content: 'second' },
+ *       ],
+ *     };
+ *   },
+ *   methods: {
+ *     onChange(event) {
+ *       this.panes = event.newState;
+ *     },
+ *   },
+ * };
+ * </script>
+ * ```
+ *
+ *
+ *
+ * ### props <span class='code'>Readonly&lt;[SplitterProps]({% slug api_layout_splitterprops %})</span>
+ * The props of the Splitter component.
+ */
+declare const Splitter: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    panes: PropType<SplitterPaneProps[]>;
+    defaultPanes: PropType<SplitterPaneProps[]>;
+}>, {}, {
+    currentRtl: boolean;
+    isDragging: boolean;
+    dragIndex: any;
+    startTime: number;
+    originalX: number;
+    originalY: number;
+    originalPrevSize: number;
+    originalNextSize: number;
+    currentPanes: SplitterPaneProps[];
+}, {
+    isControlledState(): boolean;
+    computedPanes(): SplitterPaneProps[] | undefined;
+}, {
+    validatePanes(panesOptions: SplitterPaneProps[]): void;
+    mapPaneOptions(panes: SplitterPaneProps[]): SplitterPaneExtendedProps[];
+    onBarToggle(index: number, event: any): void;
+    onBarDragResize(event: any, barElement: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean): void;
+    onBarKeyboardResize(barElement: HTMLDivElement, index: number, delta: number, event: any): void;
+    surroudingPanes(barElement: HTMLDivElement): {
+        prevElement: Element;
+        nextElement: Element;
+    };
+    containerSize(): number;
+    isPercent(size: string): boolean;
+    toPixels(size: string, splitterSize: number): number;
+    panesOptions(): SplitterPaneProps[];
+    resetDragState(): void;
+    elementSize(el: HTMLElement, isContainer?: boolean): number;
+    clamp(min: number, max: number, v: number): number;
+    fixedSize(size: string | undefined): any;
+    resize(prevIndex: number, nextIndex: number, originalPrevSize: number, originalNextSize: number, delta: any, isLast: boolean, event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (event: SplitterOnChangeEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    panes: PropType<SplitterPaneProps[]>;
+    defaultPanes: PropType<SplitterPaneProps[]>;
+}>> & Readonly<{
+    onChange?: (event: SplitterOnChangeEvent) => any;
+}>, {
+    orientation: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { Splitter };

package/splitter/SplitterBar.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SplitterPaneExtendedProps } from './SplitterPane';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface SplitterBarProps {
+    orientation: 'vertical' | 'horizontal' | string;
+    index: number;
+    prev: SplitterPaneExtendedProps;
+    next: SplitterPaneExtendedProps;
+    isRtl?: boolean;
+}
+/**
+ * @hidden
+ */
+declare const SplitterBar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    index: PropType<number>;
+    prev: PropType<SplitterPaneExtendedProps>;
+    next: PropType<SplitterPaneExtendedProps>;
+    isRtl: PropType<boolean>;
+}>, {}, {
+    focused: boolean;
+}, {
+    isStatic(): boolean;
+    isDraggable(): boolean;
+    isHorizontal(): boolean;
+}, {
+    onDrag(data: any, isFirst: boolean, isLast: boolean): void;
+    onFocus(): void;
+    onBlur(): void;
+    onToggle(event: any): void;
+    onPrevToggle(event: any): void;
+    onNextToggle(event: any): void;
+    onKeyDown(event: any): void;
+    previousArrowName(isHorizontal: boolean): "" | "caret-alt-right" | "caret-alt-left" | "caret-alt-up" | "caret-alt-down";
+    previousArrowSVG(isHorizontal: boolean): import('@progress/kendo-svg-icons').SVGIcon;
+    nextArrowName(isHorizontal: boolean): "" | "caret-alt-right" | "caret-alt-left" | "caret-alt-up" | "caret-alt-down";
+    nextArrowSVG(isHorizontal: boolean): import('@progress/kendo-svg-icons').SVGIcon;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    drag: any;
+    toggle: any;
+    keyboardresize: any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    index: PropType<number>;
+    prev: PropType<SplitterPaneExtendedProps>;
+    next: PropType<SplitterPaneExtendedProps>;
+    isRtl: PropType<boolean>;
+}>> & Readonly<{
+    onDrag?: (...args: any[] | unknown[]) => any;
+    onToggle?: (...args: any[] | unknown[]) => any;
+    onKeyboardresize?: (...args: any[] | unknown[]) => any;
+}>, {
+    orientation: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { SplitterBar };

package/splitter/SplitterPane.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @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';
+/**
+ * Represents the pane options of the Splitter.
+ */
+export interface SplitterPaneProps {
+    /**
+     * Sets the size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)). Has to be between the `min` and `max` properties.
+     */
+    size?: string;
+    /**
+     * Sets the minimum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    min?: string;
+    /**
+     * Sets the maximum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    max?: string;
+    /**
+     * Specifies if the user is allowed to resize the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-resizing)). If `resizable` is not specified, the resizing of the pane will be enabled.
+     */
+    resizable?: boolean;
+    /**
+     * Specifies if the user is allowed to hide the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsible?: boolean;
+    /**
+     * Specifies the pane collapsed state ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsed?: boolean;
+    /**
+     * Specifies if overflowing content is scrollable or hidden ([see example]({% slug panes_splitter %}#toc-scrolling)). If `scrollable` is not specified, the content will be scrollable.
+     */
+    scrollable?: boolean;
+    /**
+     * Specifies if the content of the pane contains Splitter.
+     */
+    containsSplitter: boolean;
+    /**
+     * Specifies if the children of the pane should be mounted when it's in collapsed state.
+     */
+    keepMounted?: boolean;
+    /**
+     * The slot template for the content of the splitter
+     */
+    content?: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneExtendedProps extends SplitterPaneProps {
+    orientation: 'vertical' | 'horizontal' | string;
+    overlay: boolean;
+}
+/**
+ * @hidden
+ */
+declare const SplitterPane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<string>;
+        default: () => any;
+        validator: (value: string) => any;
+    };
+    overlay: PropType<boolean>;
+    containsSplitter: PropType<boolean>;
+    size: PropType<string>;
+    min: PropType<string>;
+    max: PropType<string>;
+    resizable: PropType<boolean>;
+    collapsible: PropType<boolean>;
+    collapsed: PropType<boolean>;
+    scrollable: PropType<boolean>;
+    keepMounted: PropType<boolean>;
+    content: PropType<any>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<string>;
+        default: () => any;
+        validator: (value: string) => any;
+    };
+    overlay: PropType<boolean>;
+    containsSplitter: PropType<boolean>;
+    size: PropType<string>;
+    min: PropType<string>;
+    max: PropType<string>;
+    resizable: PropType<boolean>;
+    collapsible: PropType<boolean>;
+    collapsed: PropType<boolean>;
+    scrollable: PropType<boolean>;
+    keepMounted: PropType<boolean>;
+    content: PropType<any>;
+}>> & Readonly<{}>, {
+    orientation: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { SplitterPane };

package/stacklayout/StackLayout.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @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';
+import { StackLayoutAlign } from './StackLayoutProps';
+/**
+ * Represents the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
+ * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
+ */
+declare const StackLayout: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    gap: {
+        type: PropType<string | number>;
+    };
+    align: {
+        type: PropType<StackLayoutAlign>;
+        validator: (value: StackLayoutAlign) => any;
+    };
+}>, {}, {}, {
+    hAlign(): any;
+    vAlign(): any;
+    stackLayoutClasses(): {
+        'k-stack-layout': boolean;
+        'k-hstack': boolean;
+        'k-vstack': boolean;
+        'k-justify-content-start': boolean;
+        'k-justify-content-center': boolean;
+        'k-justify-content-end': boolean;
+        'k-justify-content-stretch': boolean;
+        'k-align-items-start': boolean;
+        'k-align-items-center': boolean;
+        'k-align-items-end': boolean;
+        'k-align-items-stretch': boolean;
+    };
+    stackLayoutStyles(): {
+        gap: string;
+    };
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    gap: {
+        type: PropType<string | number>;
+    };
+    align: {
+        type: PropType<StackLayoutAlign>;
+        validator: (value: StackLayoutAlign) => any;
+    };
+}>> & Readonly<{}>, {
+    orientation: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { StackLayout };