ttabs-svelte
Version:
A flexible layout management system with draggable, resizable tiles and tabs for Svelte applications. Like in VSCode
87 lines (86 loc) • 1.98 kB
TypeScript
/**
* Possible tile types
*/
export type TileType = 'grid' | 'row' | 'column' | 'panel' | 'tab' | 'content';
/**
* Type for panel UI component
*/
export interface PanelUIComponent {
componentId: string;
props?: Record<string, any>;
}
/**
* Base tile interface with common properties
*/
export interface TileBaseState {
id: string;
parent: string | null;
type: TileType;
dontClean?: boolean;
}
/**
* Size information with unit
*/
export interface SizeInfo {
value: number;
unit: 'px' | '%';
}
/**
* Grid tile that contains rows
*/
export interface TileGridState extends TileBaseState {
type: 'grid';
rows: string[];
}
/**
* Row tile that contains columns
*/
export interface TileRowState extends TileBaseState {
type: 'row';
columns: string[];
height: SizeInfo;
computedSize?: number;
originalHeight?: number;
}
/**
* Column tile that contains a single child (panel, grid, or content)
*/
export interface TileColumnState extends TileBaseState {
type: 'column';
child: string;
width: SizeInfo;
computedSize?: number;
originalWidth?: number;
}
/**
* Panel tile that contains tabs
*/
export interface TilePanelState extends TileBaseState {
type: 'panel';
tabs: string[];
activeTab: string | null;
leftComponents?: PanelUIComponent[];
rightComponents?: PanelUIComponent[];
}
/**
* Tab tile that references content
*/
export interface TileTabState extends TileBaseState {
type: 'tab';
name: string;
content: string;
isLazy: boolean;
}
/**
* Content tile that contains actual content
* Can be extended with application-specific properties
*/
export interface TileContentState extends TileBaseState {
type: 'content';
componentId?: string;
data?: Record<string, any>;
}
/**
* Union type of all possible tile types
*/
export type TileState = TileGridState | TileRowState | TileColumnState | TilePanelState | TileTabState | TileContentState;