ttabs-svelte
Version:
A flexible layout management system with draggable, resizable tiles and tabs for Svelte applications. Like in VSCode
106 lines (105 loc) • 2.7 kB
TypeScript
import { TTabs } from "./TTabs.svelte";
/**
* Base class for all ttabs objects
*/
declare abstract class TileObject {
protected ttabs: TTabs;
protected _id: string;
constructor(ttabs: TTabs, _id: string);
/**
* Get the ID of this object
*/
get id(): string;
}
/**
* Grid object - the root container of the layout
*/
export declare class Grid extends TileObject {
/**
* Create a new row in this grid
* @param height Height of the row (e.g., "100%", "260px", "auto")
*/
newRow(height?: string): Row;
}
/**
* Row object - contains columns
*/
export declare class Row extends TileObject {
/**
* Create a new column in this row
* @param width Width of the column (e.g., "100%", "260px", "auto")
*/
newColumn(width?: string): Column;
}
/**
* Column object - contains panels or other components
*/
export declare class Column extends TileObject {
/**
* Create a new panel in this column
*/
newPanel(): Panel;
/**
* Add a component directly to this column
* @param componentId ID of the registered component
* @param props Props to pass to the component
*/
setComponent(componentId: string, props?: Record<string, any>): this;
}
/**
* Panel object - contains tabs
*/
export declare class Panel extends TileObject {
/**
* Create a new tab in this panel
* @param name Name of the tab
* @param active Whether to make this tab active
*/
newTab(name: string, active?: boolean): Tab;
/**
* Set this panel as the active panel
*/
setActive(): this;
/**
* Get or set the left components of the panel
*/
get leftComponents(): Array<{
componentId: string;
props?: Record<string, any>;
}>;
set leftComponents(components: Array<{
componentId: string;
props?: Record<string, any>;
}>);
/**
* Get or set the right components of the panel
*/
get rightComponents(): Array<{
componentId: string;
props?: Record<string, any>;
}>;
set rightComponents(components: Array<{
componentId: string;
props?: Record<string, any>;
}>);
}
/**
* Tab object - contains content
*/
export declare class Tab extends TileObject {
/**
* Set a component for this tab
* @param componentId ID of the registered component
* @param props Props to pass to the component
*/
setComponent(componentId: string, props?: Record<string, any>): this;
/**
* Set this tab as the active tab
*/
setActive(): this;
/**
* Set this tab as the focused active tab
*/
setFocused(): this;
}
export {};