vue-allotment/dist/index.d.ts

Vue 3 port of React Allotment - resizable split views with draggable dividers

import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { default as default_2 } from 'eventemitter3';
import { DefineComponent } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';

declare const __VLS_component: DefineComponent<AllotmentProps, {
reset: typeof reset;
resize: typeof resize;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: (sizes: number[]) => any;
reset: () => any;
visibleChange: (index: number, visible: boolean) => any;
dragStart: (sizes: number[]) => any;
dragEnd: (sizes: number[]) => any;
}, string, PublicProps, Readonly<AllotmentProps> & Readonly<{
onChange?: ((sizes: number[]) => any) | undefined;
onReset?: (() => any) | undefined;
onVisibleChange?: ((index: number, visible: boolean) => any) | undefined;
onDragStart?: ((sizes: number[]) => any) | undefined;
onDragEnd?: ((sizes: number[]) => any) | undefined;
}>, {
vertical: boolean;
className: string;
maxSize: number;
minSize: number;
proportionalLayout: boolean;
separator: boolean;
snap: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, false, {
containerRef: HTMLDivElement;
splitViewContainerRef: HTMLDivElement;
}, HTMLDivElement>;

declare const __VLS_component_2: DefineComponent<PaneProps, {
element: Ref<HTMLElement | undefined, HTMLElement | undefined>;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PaneProps> & Readonly<{}>, {
className: string;
snap: boolean;
visible: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, false, {
paneRef: HTMLDivElement;
}, HTMLDivElement>;

declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        default?(_: {}): any;
    };
    refs: {
        containerRef: HTMLDivElement;
        splitViewContainerRef: HTMLDivElement;
    };
    rootEl: HTMLDivElement;
};

declare function __VLS_template_2(): {
    attrs: Partial<{}>;
    slots: {
        default?(_: {}): any;
    };
    refs: {
        paneRef: HTMLDivElement;
    };
    rootEl: HTMLDivElement;
};

declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;

declare type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_2<T, S> = T & {
    new (): {
        $slots: S;
    };
};

export declare const Allotment: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

export declare interface AllotmentHandle {
    reset: () => void;
    resize: (sizes: number[]) => void;
}

export declare interface AllotmentProps {
    /** Sets a className attribute on the outer component */
    className?: string;
    /** Initial size of each element */
    defaultSizes?: number[];
    /** The id to set on the SplitView component */
    id?: string;
    /** Maximum size of each element */
    maxSize?: number;
    /** Minimum size of each element */
    minSize?: number;
    /** Resize each view proportionally when resizing container */
    proportionalLayout?: boolean;
    /** Whether to render a separator between panes */
    separator?: boolean;
    /** Enable snap to zero size */
    snap?: boolean;
    /**
     * Initial size of each element
     * @deprecated Use defaultSizes instead
     */
    sizes?: number[];
    /** Direction to split */
    vertical?: boolean;
}

/**
 * Use the dispose method of this interface to explicitly release unmanaged resources.
 */
declare interface Disposable_2 {
    dispose: () => void;
}

/**
 * When adding or removing views, distribute the delta space among
 * all other views.
 */
declare interface DistributeSizing {
    type: 'distribute';
}

/**
 * When adding or removing views, assume the view is invisible.
 */
declare interface InvisibleSizing {
    type: 'invisible';
    cachedVisibleSize: number;
}

export declare enum LayoutPriority {
    Normal = 0,
    Low = 1,
    High = 2
}

declare type LayoutPriorityType = LayoutPriority;

export declare class LayoutService {
    private _size;
    getSize(): number;
    setSize(size: number): void;
}

export declare enum Orientation {
    Vertical = 0,
    Horizontal = 1
}

export declare const Pane: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;

export declare interface PaneProps {
    /** Sets a className attribute on the pane */
    className?: string;
    /** Maximum size of this pane */
    maxSize?: number;
    /** Minimum size of this pane */
    minSize?: number;
    /** Enable snap to zero size */
    snap?: boolean;
    /**
     * Preferred size of this pane. Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the `reset` method is called on the Allotment instance.
     * @remarks The size can either be a number or a string. If it is a number it will be interpreted as a number of pixels. If it is a string it should end in either "px" or "%". If it ends in "px" it will be interpreted as a number of pixels, e.g. "120px". If it ends in "%" it will be interpreted as a percentage of the size of the Allotment component, e.g. "50%".
     */
    preferredSize?: number | string;
    /**
     * The priority of the pane when the layout algorithm runs. Panes with higher priority will be resized first.
     * @remarks Only used when `proportionalLayout` is false.
     */
    priority?: LayoutPriority;
    /** Whether the pane should be visible */
    visible?: boolean;
}

export declare class PaneView implements View {
    minimumSize: number;
    maximumSize: number;
    readonly element: HTMLElement;
    readonly priority?: LayoutPriorityType | undefined;
    readonly snap: boolean;
    private layoutService;
    private layoutStrategy;
    get preferredSize(): number | undefined;
    set preferredSize(preferredSize: number | string | undefined);
    constructor(layoutService: LayoutService, options: PaneViewOptions);
    layout(_size: number): void;
}

declare interface PaneViewOptions {
    element: HTMLElement;
    minimumSize?: number;
    maximumSize?: number;
    priority?: LayoutPriorityType;
    preferredSize?: number | string;
    snap?: boolean;
}

declare function reset(): void;

declare function resize(sizes: number[]): void;

/**
 * Set sash size. This is set in both css and js and this function keeps the two in sync.
 *
 * @param sashSize Sash size in pixels
 */
export declare function setSashSize(sashSize: number): void;

/**
 * When adding or removing views, the sizing provides fine grained
 * control over how other views get resized.
 */
export declare type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;

/**
 * When adding or removing views, split the delta space with another
 * specific view, indexed by the provided `index`.
 */
declare interface SplitSizing {
    type: 'split';
    index: number;
}

export declare class SplitView extends default_2 implements Disposable_2 {
    onDidChange: ((sizes: number[]) => void) | undefined;
    onDidDragStart: ((sizes: number[]) => void) | undefined;
    onDidDragEnd: ((sizes: number[]) => void) | undefined;
    private _orientation;
    get orientation(): Orientation;
    set orientation(orientation: Orientation);
    private sashContainer;
    private size;
    private contentSize;
    private proportions;
    private viewItems;
    private sashItems;
    private sashDragState;
    private _proportionalLayout;
    get proportionalLayout(): boolean;
    set proportionalLayout(value: boolean);
    private readonly getSashOrthogonalSize;
    private _startSnappingEnabled;
    get startSnappingEnabled(): boolean;
    set startSnappingEnabled(startSnappingEnabled: boolean);
    private _endSnappingEnabled;
    get endSnappingEnabled(): boolean;
    set endSnappingEnabled(endSnappingEnabled: boolean);
    /** Create a new {@link SplitView} instance. */
    constructor(container: HTMLElement, options?: SplitViewOptions, onDidChange?: (sizes: number[]) => void, onDidDragStart?: (sizes: number[]) => void, onDidDragEnd?: (sizes: number[]) => void);
    addView(container: HTMLElement, view: View, size: number | Sizing, index?: number, skipLayout?: boolean): void;
    removeView(index: number, sizing?: Sizing): View;
    moveView(container: HTMLElement, from: number, to: number): void;
    private getViewCachedVisibleSize;
    layout(size?: number): void;
    resizeView(index: number, size: number): void;
    resizeViews(sizes: number[]): void;
    getViewSize(index: number): number;
    isViewVisible(index: number): boolean;
    setViewVisible(index: number, visible: boolean): void;
    distributeViewSizes(): void;
    dispose(): void;
    private onSashStart;
    private onSashChange;
    private onSashEnd;
    private getMinDelta;
    private getMaxDelta;
    private resize;
    private distributeEmptySpace;
    private layoutViews;
    private saveProportions;
    private relayout;
    private getSashPosition;
    private findFirstSnapIndex;
    private updateSashEnablement;
}

/** A descriptor for a {@link SplitView} instance. */
declare interface SplitViewDescriptor {
    /** The layout size of the {@link SplitView}. */
    size: number;
    /**
     * Descriptors for each {@link View view}.
     */
    views: {
        /** Whether the {@link View view} is visible. */
        visible?: boolean;
        /** The size of the {@link View view}. */
        size: number;
        container: HTMLElement;
        view: View;
    }[];
}

declare interface SplitViewOptions {
    /** Which axis the views align on. */
    readonly orientation?: Orientation;
    /** Resize each view proportionally when resizing the SplitView. */
    readonly proportionalLayout?: boolean;
    /**
     * An initial description of this {@link SplitView} instance, allowing
     * to initialize all views within the ctor.
     */
    readonly descriptor?: SplitViewDescriptor;
    /** Override the orthogonal size of sashes. */
    readonly getSashOrthogonalSize?: () => number;
}

/**
 * The interface to implement for views within a {@link SplitView}.
 */
declare interface View {
    /** The DOM element for this view. */
    readonly element: HTMLElement;
    /**
     * A minimum size for this view.
     *
     * @remarks If none, set it to `0`.
     */
    readonly minimumSize: number;
    /**
     * A minimum size for this view.
     *
     * @remarks If none, set it to `Number.POSITIVE_INFINITY`.
     */
    readonly maximumSize: number;
    /**
     * The priority of the view when the {@link SplitView.resize layout} algorithm
     * runs. Views with higher priority will be resized first.
     *
     * @remarks Only used when `proportionalLayout` is false.
     */
    readonly priority?: LayoutPriority;
    /**
     * Whether the view will snap whenever the user reaches its minimum size or
     * attempts to grow it beyond the minimum size.
     */
    readonly snap?: boolean;
    /**
     * This will be called by the {@link SplitView} during layout. A view meant to
     * pass along the layout information down to its descendants.
     *
     * @param size The size of this view, in pixels.
     * @param offset The offset of this view, relative to the start of the {@link SplitView}.
     */
    layout: (size: number, offset: number) => void;
    /**
     * This will be called by the {@link SplitView} whenever this view is made
     * visible or hidden.
     *
     * @param visible Whether the view becomes visible.
     */
    setVisible?: (visible: boolean) => void;
}

export { }