CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-lumino--widgets

Comprehensive UI widget toolkit for building desktop-like web applications with layouts, panels, tabs, menus, and other interactive components

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Lumino Widgets

Lumino Widgets is a comprehensive UI widget toolkit for building desktop-like web applications. It provides a flexible widget system with layout management, panels, menus, docking, tabs, and many other UI components for creating sophisticated user interfaces that mimic desktop application experiences in the browser.

Package Information

  • Package Name: @lumino/widgets
  • Package Type: npm
  • Language: TypeScript
  • Version: 2.7.1
  • Installation: npm install @lumino/widgets

Core Imports

import { Widget, BoxPanel, DockPanel, TabBar, MenuBar } from "@lumino/widgets";

For CommonJS:

const { Widget, BoxPanel, DockPanel, TabBar, MenuBar } = require("@lumino/widgets");

Basic Usage

import { Widget, BoxPanel, DockPanel, TabPanel } from "@lumino/widgets";

// Create widgets
const widget1 = new Widget({ node: document.createElement('div') });
widget1.node.textContent = 'Widget 1';
widget1.title.label = 'First Widget';

const widget2 = new Widget({ node: document.createElement('div') });
widget2.node.textContent = 'Widget 2';
widget2.title.label = 'Second Widget';

// Create a tab panel to organize widgets
const tabPanel = new TabPanel();
tabPanel.addWidget(widget1);
tabPanel.addWidget(widget2);

// Create a dock panel for advanced layout
const dockPanel = new DockPanel();
dockPanel.addWidget(tabPanel);

// Attach to DOM
Widget.attach(dockPanel, document.body);

Architecture

Lumino Widgets is built around several key architectural concepts:

  • Widget Hierarchy: Widget is the base class for all UI components, providing lifecycle management, event handling, and DOM integration
  • Layout System: Abstract Layout classes manage widget positioning and sizing within containers
  • Panel System: Specialized containers (Panel, BoxPanel, SplitPanel, etc.) that combine widgets with specific layouts
  • Title System: Title objects provide metadata (labels, icons, captions) for widgets in containers like tabs and menus
  • Message System: Event-driven communication using the Lumino messaging system for lifecycle and user interaction events
  • Renderer Pattern: Customizable rendering through renderer interfaces for consistent theming and extensibility

Capabilities

Widget Foundation

Core widget system providing the foundational classes for building UI components.

class Widget {
  constructor(options?: Widget.IOptions);
  readonly node: HTMLElement;
  readonly isDisposed: boolean;
  readonly isAttached: boolean;
  readonly isHidden: boolean;
  readonly isVisible: boolean;
  readonly title: Title<Widget>;
  parent: Widget | null;
  layout: Layout | null;
  dispose(): void;
  show(): void;
  hide(): void;
  update(): void;
  fit(): void;
}

class Title<T> {
  constructor(options: Title.IOptions<T>);
  readonly owner: T;
  label: string;
  icon: VirtualElement.IRenderer | undefined;
  iconClass: string;
  caption: string;
  className: string;
  closable: boolean;
}

abstract class Layout {
  parent: Widget | null;
  readonly isDisposed: boolean;
  abstract dispose(): void;
  abstract widgets(): IterableIterator<Widget>;
  fit(): void;
  update(): void;
}

Widget Foundation

Layout System

Flexible layout managers for organizing widgets with different arrangement patterns.

class BoxLayout extends Layout {
  constructor(options?: BoxLayout.IOptions);
  direction: BoxLayout.Direction;
  alignment: BoxLayout.Alignment;
  spacing: number;
  insertWidget(index: number, widget: Widget): void;
  removeWidget(widget: Widget): void;
}

class GridLayout extends Layout {
  constructor(options?: GridLayout.IOptions);
  readonly rowCount: number;
  readonly columnCount: number;
  rowSpacing: number;
  columnSpacing: number;
}

class SplitLayout extends Layout {
  constructor(options: SplitLayout.IOptions);
  orientation: SplitLayout.Orientation;
  alignment: SplitLayout.Alignment;
  spacing: number;
  readonly handles: ReadonlyArray<HTMLDivElement>;
  setRelativeSizes(sizes: number[], update?: boolean): void;
}

class AccordionLayout extends SplitLayout {
  constructor(options?: AccordionLayout.IOptions);
  readonly renderer: AccordionLayout.IRenderer;
  titleSpace: number;
  collapse(index: number): void;
  expand(index: number): void;
  isExpanded(index: number): boolean;
}

class DockLayout extends Layout {
  constructor(options: DockLayout.IOptions);
  readonly renderer: DockLayout.IRenderer;
  spacing: number;
  readonly isEmpty: boolean;
  addWidget(widget: Widget, options?: DockLayout.IAddOptions): void;
  saveLayout(): DockLayout.ILayoutConfig;
  restoreLayout(config: DockLayout.ILayoutConfig): void;
}

Layout System

Panel Widgets

Container widgets that combine layout managers with widget collections for common UI patterns.

class Panel extends Widget {
  constructor(options?: Panel.IOptions);
  readonly widgets: ReadonlyArray<Widget>;
  addWidget(widget: Widget): void;
  insertWidget(index: number, widget: Widget): void;
}

class BoxPanel extends Panel {
  constructor(options?: BoxPanel.IOptions);
  direction: BoxPanel.Direction;
  alignment: BoxPanel.Alignment;
  spacing: number;
}

class DockPanel extends Panel {
  constructor(options?: DockPanel.IOptions);
  readonly isEmpty: boolean;
  mode: DockPanel.Mode;
  tabsMovable: boolean;
  readonly selectedWidgets: ReadonlyArray<Widget>;
  readonly tabBars: ReadonlyArray<TabBar<Widget>>;
  addWidget(widget: Widget, options?: DockPanel.IAddOptions): void;
  saveLayout(): DockPanel.ILayoutConfig;
  restoreLayout(config: DockPanel.ILayoutConfig): void;
}

class TabPanel extends Panel {
  constructor(options?: TabPanel.IOptions);
  currentIndex: number;
  readonly currentWidget: Widget | null;
  tabsMovable: boolean;
  tabPlacement: TabPanel.TabPlacement;
  readonly tabBar: TabBar<Widget>;
}

Panel Widgets

UI Components

Interactive UI components for user input and navigation.

class MenuBar extends Widget {
  constructor(options?: MenuBar.IOptions);
  readonly activeMenu: Menu | null;
  activeIndex: number;
  readonly menus: ReadonlyArray<Menu>;
  addMenu(menu: Menu, update?: boolean): void;
  insertMenu(index: number, menu: Menu, update?: boolean): void;
  openActiveMenu(): void;
}

class TabBar<T> extends Widget {
  constructor(options?: TabBar.IOptions<T>);
  tabsMovable: boolean;
  titlesEditable: boolean;
  allowDeselect: boolean;
  currentTitle: Title<T> | null;
  currentIndex: number;
  orientation: TabBar.Orientation;
  readonly titles: ReadonlyArray<Title<T>>;
  addTab(value: Title<T> | Title.IOptions<T>): Title<T>;
  insertTab(index: number, value: Title<T> | Title.IOptions<T>): Title<T>;
}

class CommandPalette extends Widget {
  constructor(options: CommandPalette.IOptions);
  readonly commands: CommandRegistry;
  addItem(options: CommandPalette.IItemOptions): CommandPalette.IItem;
  removeItem(item: CommandPalette.IItem): void;
  refresh(): void;
}

class ScrollBar extends Widget {
  constructor(options?: ScrollBar.IOptions);
  orientation: ScrollBar.Orientation;
  value: number;
  page: number;
  maximum: number;
}

UI Components

Specialized Features

Advanced features for focus management, context menus, and other specialized functionality.

class FocusTracker<T> implements IDisposable {
  constructor();
  readonly currentWidget: T | null;
  readonly activeWidget: T | null;
  readonly widgets: ReadonlyArray<T>;
  add(widget: T): void;
  remove(widget: T): void;
}

class ContextMenu {
  constructor(options: ContextMenu.IOptions);
  readonly menu: Menu;
  addItem(options: ContextMenu.IItemOptions): ContextMenu.IItem;
  open(event: MouseEvent | KeyboardEvent): boolean;
}

class Menu extends Widget {
  constructor(options: Menu.IOptions);
  readonly items: ReadonlyArray<Menu.IItem>;
  activeItem: Menu.IItem | null;
  activeIndex: number;
  addItem(options: Menu.IItemOptions): Menu.IItem;
  open(x: number, y: number, options?: Menu.IOpenOptions): boolean;
}

Specialized Features

Core Types

namespace Widget {
  interface IOptions {
    node?: HTMLElement;
    tag?: keyof HTMLElementTagNameMap;
  }

  enum HiddenMode {
    Display = 0,
    Scale = 1,
    ContentVisibility = 2
  }

  enum Flag {
    IsDisposed = 0x1,
    IsAttached = 0x2,
    IsHidden = 0x4,
    IsVisible = 0x8,
    DisallowLayout = 0x10
  }

  class ResizeMessage {
    constructor(width: number, height: number);
    readonly width: number;
    readonly height: number;
  }

  class ChildMessage {
    constructor(type: string, child: Widget);
    readonly child: Widget;
  }

  // Static utility functions
  function attach(widget: Widget, host: HTMLElement, ref?: HTMLElement | null): void;
  function detach(widget: Widget): void;
}

namespace Title {
  interface IOptions<T> {
    owner: T;
    label?: string;
    mnemonic?: number;
    icon?: VirtualElement.IRenderer;
    iconClass?: string;
    iconLabel?: string;
    caption?: string;
    className?: string;
    closable?: boolean;
    dataset?: Dataset;
  }

  type Dataset = { readonly [key: string]: string };
}

docs

components.md

index.md

layouts.md

panels.md

specialized.md

widget-foundation.md

tile.json