mwg API
    Preparing search index...

    Class TabbedList<T>

    The model behind a tabbed, searchable, paged list - an inventory, journal, shop or codex - kept apart from how it is drawn, the same split SelectionModel already draws for plain lists. The caller supplies the tabs and the rows per tab (any type it likes, so no item taxonomy is assumed), plus optionally how a row labels, filters and disables itself; this owns the tab choice, the query, the selection, the page and the detail/close state.

    The page is derived from the selection rather than tracked beside it: a selection index into the filtered rows decides which page is visible, so the two can never disagree and nextPage is just a selection move of one page. move skips disabled rows.

    Rendering is the caller's: read pageRows and selectedIndex each frame, or listen to onChange.

    import { TabbedList } from '@datamoc/mw_games/two-d/ui';

    const items = [
      { name: 'Sword', kind: 'weapon' },
      { name: 'Bread', kind: 'food' },
      { name: 'Shield', kind: 'armor' },
    ];

    const list = new TabbedList<(typeof items)[number]>({
      tabs: [{ id: 'all', label: 'All' }, { id: 'weapon', label: 'Weapons' }],
      rowsFor: (tab) => (tab === 'all' ? items : items.filter((item) => item.kind === tab)),
      label: (item) => item.name,
      pageSize: 2,
    });

    console.log(list.selected?.name); // 'Sword'
    list.setQuery('sh'); // filter down to Shield; selection and page reset
    console.log(list.rows.length, list.page); // 1 0
    list.openDetail(); // true, with the current row

    Type Parameters

    • T
    Index
    constructor
    onChange
    detailOpen page pageCount pageRows query rows selected selectedIndex tab tabs
    closeDetail move nextPage nextTab openDetail selectTab setPage setQuery
    onChange: Signal<void> = ...

    fires whenever the tab, query, selection, page or detail state changes

    • get detailOpen(): boolean

      whether the detail view has been opened for the current selection

      Returns boolean

    page

    • get page(): number

      the page the selection is on, derived from it rather than tracked next to it

      Returns number

    • get pageCount(): number

      how many pages rows fills; always at least 1, so an empty list is one empty page

      Returns number

    • moves the selection delta rows, skipping disabled ones and clamping at both ends

      Parameters

      • delta: number

      Returns void

    • moves delta pages; the selection lands on the target page's first selectable row

      Parameters

      • delta: number

      Returns void

    • moves to the next enabled tab, delta steps on (wrapping); skips disabled tabs

      Parameters

      • delta: number = 1

      Returns void

    • opens the detail view for the current selection; false when there is nothing to open

      Returns boolean

    • opens id's tab; a disabled tab or an unknown id is ignored

      Parameters

      • id: string

      Returns void

    • jumps to a page by number, clamped; the selection moves to its first selectable row

      Parameters

      • page: number

      Returns void

    • replaces the query; the selection and page reset to the first row that survives it

      Parameters

      • query: string

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods