Mixins / foldkit-mixins-ui

TreeView

namespace · packages/mixins-ui/src/treeView.ts:1

export * as TreeView from './treeView.js'

In the guides

Members

TreeView.init

function · packages/mixins-ui/src/treeView.ts:75

function init(options: {
  readonly id: string
  readonly open?: ReadonlyArray<string>
}): Model

TreeView.itemId

function · packages/mixins-ui/src/treeView.ts:86

function itemId(model: Model, id: string): string

The DOM id of a row's treeitem.

TreeView.Message

const · packages/mixins-ui/src/treeView.ts:65

const Message: MessageUnion<{
  readonly Pressed: { readonly key: Schema.String }
  readonly Focused: { readonly id: Schema.String }
  readonly Clicked: { readonly id: Schema.String }
  readonly CompletedFocusItem: {}
}>

TreeView.Model

const · packages/mixins-ui/src/treeView.ts:53

const Model: Schema.Struct<{
  readonly id: Schema.String
  readonly current: Schema.Option<Schema.String>
  readonly open: Schema.$Array<Schema.String>
  readonly selected: Schema.Option<Schema.String>
}>

TreeView.TreeNode

interface · packages/mixins-ui/src/treeView.ts:46

interface TreeNode {
  readonly id: string
  readonly label: string
  readonly children?: ReadonlyArray<TreeNode> | undefined
  readonly disabled?: boolean | undefined
}

A row of the tree, and the rows it holds.

TreeView.TreeViewSlots

const · packages/mixins-ui/src/treeView.ts:28

const TreeViewSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"keydown">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly item: Slot.UnnamedSlot<Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"focus">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-expanded">, Attr.AttrToken<"aria-selected">, Attr.AttrToken<"aria-disabled">], readonly Slot.RequirementName[], boolean>; readonly row: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly chevron: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[],  …;

A tree view, the APG's and Zag's: nested rows that open and shut, one tab stop, Up and Down through the rows showing, Right to open a row or step into it, Left to shut it or step out, Home and End, Enter and Space to choose a row (and open or shut it, if it holds rows), and a printed character to the next showing row that starts with it. The keys are TreeNavigation's, decided in update against this Model, so keys faster than a frame still move on. The current, open and chosen rows are this Model, which the application keeps and folds with update(nodes).

Each row is an item (the treeitem, which takes focus) holding a row (the line drawn and clicked) and, when it holds rows, a group. The item carries its depth as --fk-tree-level and data-state open or closed; a shut group stays drawn, inert, so it can animate shut.

TreeView.TreeViewView

interface · packages/mixins-ui/src/treeView.ts:230

interface TreeViewView<ParentMessage> {
  readonly label: string
  readonly model: Model
  readonly nodes: ReadonlyArray<TreeNode>
  readonly onMessage: (message: Message) => NoInfer<ParentMessage>
  readonly style?: NamedStyle<typeof TreeViewSlots> | undefined
  readonly mixins?: MixinList<ParentMessage> | undefined
}

TreeView.update

function · packages/mixins-ui/src/treeView.ts:171

function update(
  nodes: ReadonlyArray<TreeNode>,
): (model: Model, message: Message) => Return

The tree's update over nodes, the tree the view draws; the same Model when nothing changes. Pass the same nodes the view gets, built once.

TreeView.view

function · packages/mixins-ui/src/treeView.ts:243

function view<ParentMessage>(
  options: TreeViewView<ParentMessage>,
  h: HtmlBuilder<ParentMessage>,
): Html