@progress/kendo-vue-layout/splitter/Splitter.d.ts

TODO

/**
 * @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 };