Tree

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TreeAtAGlance(Component):
    template = """
      <c-CTree label="Project files" c-expanded="['src']" c-selected="['app']" variant="soft">
        <c-CTreeItem value="src" label="src">
          <c-CTreeItem value="app" label="app.py" />
          <c-CTreeItem value="styles" label="styles.css" />
        </c-CTreeItem>
        <c-CTreeItem value="tests" label="tests" />
        <c-CTreeItem value="readme" label="README.md" />
      </c-CTree>
    """


preview = TreeAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledExpansion(Component):
    template = """
      <section x-data="{ expanded: ['docs'] }">
        <c-CTree
          label="Knowledge base"
          $c-props="{ expanded, onExpandedChange: (next) => expanded = next }"
        >
          <c-CTreeItem value="docs" label="Documentation">
            <c-CTreeItem value="guides" label="Guides" />
            <c-CTreeItem value="reference" label="Reference" />
          </c-CTreeItem>
          <c-CTreeItem value="examples" label="Examples" />
        </c-CTree>
        <output x-text="expanded.join(', ') || 'All branches collapsed'"></output>
      </section>
    """


preview = ControlledExpansion()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TreeSingleSelection(Component):
    template = """
      <section x-data="{ selected: ['mercury'] }">
        <c-CTree
          label="Planets"
          c-selected="['mercury']"
          $c-props="{ selected, onSelectionChange: (next) => selected = next }"
        >
          <c-CTreeItem value="mercury" label="Mercury" />
          <c-CTreeItem value="venus" label="Venus" />
          <c-CTreeItem value="earth" label="Earth" />
        </c-CTree>
        <output x-text="selected[0] ?? 'No selection'"></output>
      </section>
    """


preview = TreeSingleSelection()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TreeMultipleSelection(Component):
    template = """
      <section x-data="{ selected: ['alder'] }">
        <c-CTree
          label="Specimens"
          selection_mode="multiple"
          c-selected="['alder']"
          $c-props="{ selected, onSelectionChange: (next) => selected = next }"
        >
          <c-CTreeItem value="alder" label="Alder" />
          <c-CTreeItem value="birch" label="Birch" />
          <c-CTreeItem value="cedar" label="Cedar" />
        </c-CTree>
        <output x-text="selected.join(', ')"></output>
      </section>
    """


preview = TreeMultipleSelection()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class KeyboardTree(Component):
    template = """
      <c-CTree label="Keyboard explorer" c-expanded="['animals']" variant="outline">
        <c-CTreeItem value="animals" label="Animals">
          <c-CTreeItem value="badger" label="Badger" />
          <c-CTreeItem value="beaver" label="Beaver" />
        </c-CTreeItem>
        <c-CTreeItem value="minerals" label="Minerals" />
        <c-CTreeItem value="plants" label="Plants" />
      </c-CTree>
    """


preview = KeyboardTree()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TreeDisabledItems(Component):
    template = """
      <c-CTree label="Deployment targets" c-expanded="['regions']">
        <c-CTreeItem value="regions" label="Regions">
          <c-CTreeItem value="eu" label="Europe" />
          <c-CTreeItem value="us" label="United States" disabled />
        </c-CTreeItem>
        <c-CTreeItem value="archive" label="Archived targets" disabled />
      </c-CTree>
    """


preview = TreeDisabledItems()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedTree(Component):
    template = """
      <div class="brand-tree">
        <style>
          .brand-tree {
            --cui-tree-indent: 1.75rem;
            --cui-tree-radius: 1rem;
            --cui-tree-selected-background: rebeccapurple;
            --cui-tree-selected-color: white;
          }
        </style>
        <c-CTree label="Branded catalog" c-selected="['ferns']" variant="outline" size="lg">
          <c-CTreeItem value="mosses" label="Mosses" />
          <c-CTreeItem value="ferns" label="Ferns" />
          <c-CTreeItem value="orchids" label="Orchids" />
        </c-CTree>
      </div>
    """


preview = CustomizedTree()
preview  # noqa: B018