ttabs-svelte/dist/ttabs/ttabsObjects.js

A flexible layout management system with draggable, resizable tiles and tabs for Svelte applications. Like in VSCode

import { TTabs } from "./TTabs.svelte";
/**
 * Base class for all ttabs objects
 */
class TileObject {
    ttabs;
    _id;
    constructor(ttabs, _id) {
        this.ttabs = ttabs;
        this._id = _id;
    }
    /**
     * Get the ID of this object
     */
    get id() {
        return this._id;
    }
}
/**
 * Grid object - the root container of the layout
 */
export class Grid extends TileObject {
    /**
     * Create a new row in this grid
     * @param height Height of the row (e.g., "100%", "260px", "auto")
     */
    newRow(height) {
        const rowId = this.ttabs.addRow(this._id, height);
        return new Row(this.ttabs, rowId);
    }
}
/**
 * Row object - contains columns
 */
export class Row extends TileObject {
    /**
     * Create a new column in this row
     * @param width Width of the column (e.g., "100%", "260px", "auto")
     */
    newColumn(width) {
        const columnId = this.ttabs.addColumn(this._id, width);
        return new Column(this.ttabs, columnId);
    }
}
/**
 * Column object - contains panels or other components
 */
export class Column extends TileObject {
    /**
     * Create a new panel in this column
     */
    newPanel() {
        const panelId = this.ttabs.addPanel(this._id);
        return new Panel(this.ttabs, panelId);
    }
    /**
     * Add a component directly to this column
     * @param componentId ID of the registered component
     * @param props Props to pass to the component
     */
    setComponent(componentId, props = {}) {
        this.ttabs.setComponent(this._id, componentId, props);
        return this;
    }
}
/**
 * Panel object - contains tabs
 */
export 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, active = false) {
        const tabId = this.ttabs.addTab(this._id, name, active);
        return new Tab(this.ttabs, tabId);
    }
    /**
     * Set this panel as the active panel
     */
    setActive() {
        this.ttabs.setActivePanel(this._id);
        return this;
    }
    /**
     * Get or set the left components of the panel
     */
    get leftComponents() {
        const panel = this.ttabs.getPanel(this._id);
        return panel.leftComponents || [];
    }
    set leftComponents(components) {
        this.ttabs.updateTile(this._id, {
            leftComponents: components.map(c => ({
                componentId: c.componentId,
                props: c.props || {}
            }))
        });
    }
    /**
     * Get or set the right components of the panel
     */
    get rightComponents() {
        const panel = this.ttabs.getPanel(this._id);
        return panel.rightComponents || [];
    }
    set rightComponents(components) {
        this.ttabs.updateTile(this._id, {
            rightComponents: components.map(c => ({
                componentId: c.componentId,
                props: c.props || {}
            }))
        });
    }
}
/**
 * Tab object - contains content
 */
export 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, props = {}) {
        this.ttabs.setComponent(this._id, componentId, props);
        return this;
    }
    /**
     * Set this tab as the active tab
     */
    setActive() {
        this.ttabs.setActiveTab(this._id);
        return this;
    }
    /**
     * Set this tab as the focused active tab
     */
    setFocused() {
        this.ttabs.setFocusedActiveTab(this._id);
        return this;
    }
}