SusTreeView

Expandable hierarchy — skill / craft / folder trees driven by nested Items.

Package

SusKit · Molecules (commercial)

Open in Playground

SusKit · Molecules

Props

Name	Type	Default
Model	Prop<string>	""	v-model
Disabled	Prop<bool>	false	v-model
Density	Prop<string>	"default"	v-model
OpenAll	Prop<bool>	false	v-model

Slots

No slots.

Events

Name	Field	Payload
Change	OnChange	string
Toggle	OnToggle	string

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-tree-view
• sus-tree-view__item
• sus-tree-view__item--disabled
• sus-tree-view__item--selected
• sus-tree-view__item-icon
• sus-tree-view__label
• sus-tree-view__root
• sus-tree-view__spacer
• sus-tree-view__toggle
• sus-tree-view--dense
• sus-tree-view--disabled

Usage

Items are set in code (List<TreeViewItem> with optional Children).

var tree = new SusTreeView();
tree.Items.Value = new List<SusTreeView.TreeViewItem>
{
    new()
    {
        Title = "Combat",
        Value = "combat",
        Children = new List<SusTreeView.TreeViewItem>
        {
            new() { Title = "Strike", Value = "strike" },
            new() { Title = "Guard", Value = "guard" },
        }
    },
    new()
    {
        Title = "Craft",
        Value = "craft",
        Children = new List<SusTreeView.TreeViewItem>
        {
            new() { Title = "Forge", Value = "forge" },
            new() { Title = "Alchemy", Value = "alchemy" },
        }
    },
};
tree.Model.Value = "strike";
tree.OnChange += value => { /* selection */ };
tree.OnToggle += value => { /* expand/collapse key */ };

<template>
  <sus:SusTreeView :Model="Selected.Value"
                   :Density="Density.Value"
                   :OpenAll="OpenAll.Value"
                   :Disabled="Disabled.Value"
                   @change="OnChange"
                   @toggle="OnToggle" />
</template>

<script>
public Prop<string> Selected = new("");
public Prop<string> Density = new("default");
public Prop<bool> OpenAll = new(false);
public Prop<bool> Disabled = new(false);
void OnChange(string value) { Selected.Value = value; }
void OnToggle(string value) { /* … */ }
// Populate Items in code.
</script>

Prop	Role
Items	Nested List<TreeViewItem>
Model	Selected item key (Value or Title)
OpenAll	Expand every branch
Density	default · compact (dense rows)
Disabled	Block select / toggle

Notes

• Item fields: Title, Value, Disabled, Children.
• Key = Value if set, else Title.
• Toggle chevron expands/collapses; row click selects and fires OnChange.