@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/components/tabdocs/TabDockArea.d.ts

@@ -0,0 +1,91 @@
+import { type Bind } from '@motifx/core';
+import type { LayoutOrientation } from '../layout/layout-orientation';
+import type { AutoHideStrip } from './AutoHideStrip';
+import type { LayoutItem } from './layout-item';
+import type { SashOwner } from './sash-owner';
+import { SplitSash } from './SplitSash';
+import { TabBarSettings } from './TabBarSettings';
+import type { TabDockPresentation } from './tab-dock-presentation';
+import type { TabDockSide } from './tab-dock-side';
+import type { TabDocument } from './TabDocument';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabGroup } from './TabGroup';
+/**
+ * A dock area of a `TabDocumentManager`: one side around the documents, with groups of its own
+ * (split and resized as the documents' groups are), a size, and a splitter against the documents.
+ * Folded (`autoHide`), only its tab titles stay along the manager's edge and it slides out over the
+ * documents when one is chosen. The manager makes the area when something is docked there, and
+ * takes it away once it is empty. Its strips are compact by default (the manager's `compact…`
+ * props); its own settings (`scrollButtons`, `tabSize`, `tabMinWidth`, `singleTabTitle`,
+ * `barButtons`) win.
+ */
+export declare class TabDockArea extends TabBarSettings implements SashOwner {
+    private readonly owner;
+    readonly side: TabDockSide;
+    readonly element: HTMLDivElement;
+    /** @internal */
+    readonly sash: SplitSash;
+    /** @internal The top of its layout. */
+    root: LayoutItem | null;
+    /** @internal Its tab titles along the manager's edge, while it is folded. */
+    strip: AutoHideStrip | null;
+    private readonly sizeSignal;
+    private readonly folded;
+    private readonly openSignal;
+    private readonly phoneMode;
+    private readonly tabletMode;
+    constructor(owner: TabDocumentManager, side: TabDockSide, size: number | string);
+    get manager(): TabDocumentManager;
+    /** As set: pixels, or a share of the manager such as `'25%'`. Reactive. */
+    get size(): number | string;
+    /** Folded to the manager's edge. Reactive. */
+    get autoHidden(): boolean;
+    /** Folded and slid out over the documents now. Reactive. */
+    get isOpen(): boolean;
+    /** Its groups, in layout order. Reactive. */
+    get groups(): readonly TabGroup[];
+    /** How it shows on a phone (a sheet, a drawer, or not at all), over the manager's `phoneDockMode`; `null` follows the manager. Reactive. */
+    get phoneDockMode(): TabDockPresentation | null;
+    set phoneDockMode(value: Bind<TabDockPresentation | null>);
+    /** How it shows on a tablet, over the manager's `tabletDockMode`; `null` follows the manager. Reactive. */
+    get tabletDockMode(): TabDockPresentation | null;
+    set tabletDockMode(value: Bind<TabDockPresentation | null>);
+    /** Reactive. */
+    get documents(): readonly TabDocument[];
+    /** Its place in the manager's `dockAreas`, the outermost first. Reactive. */
+    get index(): number;
+    /** Where it is on the screen now (empty while folded and not slid out). */
+    get rect(): DOMRect;
+    /** Sets its size: pixels, or a share of the manager such as `'25%'`. */
+    resize(size: number | string): boolean;
+    /** Folds it to the manager's edge (`true`), or brings it back. */
+    autoHide(on?: boolean): boolean;
+    /** Folded: slides it out over the documents with `document` (else its active one). */
+    show(document?: TabDocument): boolean;
+    get orientation(): LayoutOrientation;
+    get rtl(): boolean;
+    /** @internal Its size in pixels, as a drag starts from. */
+    get sizes(): number[];
+    set sizes(value: number[]);
+    sashIndex(): number;
+    /** @internal The splitter moved `delta` pixels in the reading direction: towards the documents the area grows. */
+    resizeBy(_index: number, delta: number): boolean;
+    /** @internal A double click gives it the size areas of its side start with. */
+    resetSizes(): void;
+    /** @internal Its size in pixels now, within its smallest and largest. */
+    pixels(): number;
+    /** @internal Its size in pixels as set, not kept within anything. */
+    rawPixels(): number;
+    /** @internal Sets the size in pixels, as a share again when it was one. */
+    setPixels(px: number): void;
+    /** @internal */
+    setSize(size: number | string): void;
+    /** @internal */
+    markFolded(on: boolean): void;
+    /** @internal */
+    markOpen(on: boolean): void;
+    /** @internal The length of the manager along which the area's size runs. */
+    room(): number;
+    /** @internal */
+    dispose(): void;
+}

package/dist/components/tabdocs/TabDocument.d.ts

@@ -0,0 +1,129 @@
+import { type Bind, type ComponentBase } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+import type { ToolbarItem } from '../toolbar/toolbar-item';
+import type { ContentLifetime } from './content-lifetime';
+import type { TabBrowserWindow } from './TabBrowserWindow';
+import type { TabContentClone } from './tab-content-clone';
+import type { TabDockSide } from './tab-dock-side';
+import type { TabDocumentContent } from './tab-document-content';
+import type { TabDocumentOptions } from './tab-document-options';
+import type { TabDockArea } from './TabDockArea';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabGroup } from './TabGroup';
+import type { TabShowOptions } from './tab-show-options';
+import type { TabTone } from './tab-tone';
+import type { TabWindow } from './TabWindow';
+/**
+ * A document of a `TabDocumentManager`: a tab and its content, which can be any component. Every
+ * field takes a value or a function (`dirty: () => form.changed`) and is reactive to read.
+ *
+ * @example
+ * const doc = new TabDocument({ type: 'order', title: 'Order 1042', state: { id: 1042 }, content: (d) => new OrderForm(d.state) });
+ * manager.open(doc);
+ * doc.dirty = true;
+ */
+export declare class TabDocument {
+    readonly id: string;
+    readonly type: string;
+    /** What `contentComponent` is made from. */
+    content: TabDocumentContent | null;
+    /** Makes the content of a copy in another group. */
+    clone: TabContentClone | null;
+    private readonly values;
+    /** The manager it is open in, and its group (`null` while it is hidden). */
+    private readonly where;
+    private readonly from;
+    constructor(options?: TabDocumentOptions, from?: TabDocument | null);
+    get title(): string;
+    set title(value: Bind<string>);
+    get description(): string;
+    set description(value: Bind<string>);
+    get icon(): IconSource | null;
+    set icon(value: Bind<IconSource | null | undefined>);
+    get tooltip(): string;
+    set tooltip(value: Bind<string>);
+    /** A text, a number, or `true` for a dot. */
+    get badge(): string | number | boolean | null;
+    set badge(value: Bind<string | number | boolean | null | undefined>);
+    get tone(): TabTone | null;
+    set tone(value: Bind<TabTone | null | undefined>);
+    get dirty(): boolean;
+    set dirty(value: Bind<boolean>);
+    /** Set it through the manager's `pin` and `unpin` to be asked and told. */
+    get pinned(): boolean;
+    set pinned(value: Bind<boolean>);
+    /** Set it to `false` through the manager's `keep` to be asked and told. */
+    get preview(): boolean;
+    set preview(value: Bind<boolean>);
+    get closable(): boolean;
+    set closable(value: Bind<boolean>);
+    /** The document's own setting; `undefined` follows the manager. */
+    get contentLifetime(): ContentLifetime | undefined;
+    set contentLifetime(value: Bind<ContentLifetime | undefined>);
+    /** The document's own setting; `undefined` follows the manager. */
+    get allowDuplicate(): boolean | undefined;
+    set allowDuplicate(value: Bind<boolean | undefined>);
+    /** The document's own setting; `undefined` follows the manager's `allowDrag`. */
+    get allowDrag(): boolean | undefined;
+    set allowDrag(value: Bind<boolean | undefined>);
+    /** The document's own setting; `undefined` follows the manager's `allowFloat`. */
+    get allowFloat(): boolean | undefined;
+    set allowFloat(value: Bind<boolean | undefined>);
+    /** The document's own setting; `undefined` follows the manager's `allowDock`. */
+    get allowDock(): boolean | undefined;
+    set allowDock(value: Bind<boolean | undefined>);
+    /** The dock areas it may go to; `undefined` follows the manager's `dockSides`. */
+    get dockSides(): readonly TabDockSide[] | undefined;
+    set dockSides(value: Bind<readonly TabDockSide[] | undefined>);
+    /** The document's own setting; `undefined` follows the manager's `allowAutoHide`. */
+    get allowAutoHide(): boolean | undefined;
+    set allowAutoHide(value: Bind<boolean | undefined>);
+    /** The document's own setting; `undefined` follows the manager's `allowHide`. */
+    get allowHide(): boolean | undefined;
+    set allowHide(value: Bind<boolean | undefined>);
+    /** The document's own setting; `undefined` follows the manager's `allowNewWindow`. */
+    get allowNewWindow(): boolean | undefined;
+    set allowNewWindow(value: Bind<boolean | undefined>);
+    get actions(): readonly ToolbarItem[];
+    set actions(value: Bind<readonly ToolbarItem[]>);
+    get state(): unknown;
+    set state(value: Bind<unknown>);
+    /** The document this one is a copy of (open in another group), `null` for the document itself. */
+    get original(): TabDocument | null;
+    /** The manager it is open in. Reactive. */
+    get manager(): TabDocumentManager | null;
+    /** The group it is open in. Reactive. */
+    get group(): TabGroup | null;
+    /** In a manager: in one of its groups, or hidden there. */
+    get isOpen(): boolean;
+    /** Hidden by its manager: in no group, its content kept as its `contentLifetime` says, until `show`. Reactive. */
+    get isHidden(): boolean;
+    /** Whether it is its group's active tab. Reactive. */
+    get isActive(): boolean;
+    /** The content made for it, `null` while it is not built. */
+    get contentComponent(): ComponentBase | null;
+    /** The floating window it is in, `null` elsewhere. Reactive. */
+    get window(): TabWindow | null;
+    /** The dock area it is in, `null` elsewhere. Reactive. */
+    get dockArea(): TabDockArea | null;
+    /** The new browser window it is in, `null` in the main window. Reactive. */
+    get browserWindow(): TabBrowserWindow | null;
+    /** Makes it its group's active tab. */
+    activate(focus?: boolean): boolean;
+    /** Closes it as its close button does: `onClosing` may keep it. */
+    close(): Promise<boolean>;
+    /** Takes it out of its group, kept for `show`. */
+    hide(): boolean;
+    /** Puts it back after `hide`: where it was, unless `options` say where. */
+    show(options?: TabShowOptions): boolean;
+    /** Whether a copy of it can get content of its own: from `clone`, from `content` given as a function, or from the manager's factory. */
+    canCopy(factory: boolean): boolean;
+    /** @internal A copy for another group: the same id and type, sharing every field but `pinned`, `preview` and `contentLifetime`. */
+    makeCopy(): TabDocument;
+    /** @internal Where the manager put it. */
+    placeIn(manager: TabDocumentManager | null, group: TabGroup | null): void;
+    /** @internal Hidden: still the manager's, in no group. */
+    markHidden(manager: TabDocumentManager): void;
+    private get;
+    private slot;
+}