/**
* @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
*
*
*
*
*
Top Pane
*
*
*
*
*
Bottom Pane
*
*
*
*
*
*
* ```
*
*
*
* ### props Readonly<[SplitterProps]({% slug api_layout_splitterprops %})
* The props of the Splitter component.
*/
declare const Splitter: import('vue').DefineComponent;
default: string;
validator: (value: string) => any;
};
panes: PropType;
defaultPanes: PropType;
}>, {}, {
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;
default: string;
validator: (value: string) => any;
};
panes: PropType;
defaultPanes: PropType;
}>> & Readonly<{
onChange?: (event: SplitterOnChangeEvent) => any;
}>, {
orientation: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { Splitter };