Tree Grid

# ruff: noqa: ANN001, ANN201 - public snippets keep focus on component use

import citry_ui
from citry import Component, citry
from citry_ui import CTreeGridColumn, CTreeGridRow

citry.register_library(citry_ui)
COLUMNS = [CTreeGridColumn("name", "Account", width=240), CTreeGridColumn("owner", "Owner")]
ROWS = [
    CTreeGridRow(
        "north",
        "Northern region",
        {"name": "Northern region", "owner": "Ada"},
        children=[
            CTreeGridRow("prague", "Prague", {"name": "Prague", "owner": "Mira"}),
            CTreeGridRow("berlin", "Berlin", {"name": "Berlin", "owner": "Noah"}),
        ],
    )
]


class TreeGridAtAGlance(Component):
    def template_data(self, _kwargs, _slots):
        return {"columns": COLUMNS, "rows": ROWS}

    template = '<c-CTreeGrid c-columns="columns" c-rows="rows" label="Account hierarchy" c-expanded="[\'north\']" />'


preview = TreeGridAtAGlance()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201 - public snippets keep focus on component use

import citry_ui
from citry import Component, citry
from citry_ui import CTreeGridColumn, CTreeGridRow

citry.register_library(citry_ui)


class TreeGridExpansion(Component):
    def template_data(self, _kwargs, _slots):
        return {
            "columns": [CTreeGridColumn("work", "Work item", 260), CTreeGridColumn("state", "State")],
            "rows": [
                CTreeGridRow(
                    "launch",
                    "Launch",
                    {"work": "Launch", "state": "Active"},
                    children=[
                        CTreeGridRow("design", "Design", {"work": "Design", "state": "Done"}),
                        CTreeGridRow("build", "Build", {"work": "Build", "state": "Active"}),
                    ],
                )
            ],
        }

    template = '<c-CTreeGrid c-columns="columns" c-rows="rows" label="Project plan" c-expanded="[\'launch\']" />'


preview = TreeGridExpansion()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201, E501 - public template stays readable

import citry_ui
from citry import Component, citry
from citry_ui import CTreeGridColumn, CTreeGridRow

citry.register_library(citry_ui)


class TreeGridSelection(Component):
    def template_data(self, _kwargs, _slots):
        return {
            "columns": [CTreeGridColumn("team", "Team"), CTreeGridColumn("people", "People")],
            "rows": [
                CTreeGridRow("product", "Product", {"team": "Product", "people": 18}),
                CTreeGridRow("ops", "Operations", {"team": "Operations", "people": 12}),
            ],
        }

    template = '<form><c-CTreeGrid c-columns="columns" c-rows="rows" label="Teams" selection="multiple" c-selected="[\'product\']" name="team" /></form>'


preview = TreeGridSelection()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201, E501 - public template stays readable

import citry_ui
from citry import Component, citry
from citry_ui import CTreeGridColumn, CTreeGridRow

citry.register_library(citry_ui)


class TreeGridControlled(Component):
    def template_data(self, _kwargs, _slots):
        return {
            "columns": [CTreeGridColumn("name", "Name")],
            "rows": [
                CTreeGridRow(
                    "root", "Root", {"name": "Root"}, children=[CTreeGridRow("child", "Child", {"name": "Child"})]
                )
            ],
        }

    template = """<div x-data="{open:[],chosen:[]}"><c-CTreeGrid c-columns="columns" c-rows="rows" label="Controlled tree" selection="multiple" $c-props="{expanded:open,selected:chosen,onExpandedChange:value=>open=value,onSelectionChange:value=>chosen=value}" /></div>"""


preview = TreeGridControlled()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201, E501 - public template stays readable

import citry_ui
from citry import Component, citry
from citry_ui import CTreeGridColumn, CTreeGridRow

citry.register_library(citry_ui)


class TreeGridCustomCells(Component):
    def template_data(self, _kwargs, _slots):
        return {
            "columns": [CTreeGridColumn("name", "Initiative", 240), CTreeGridColumn("score", "Score", align="end")],
            "rows": [
                CTreeGridRow(
                    "quality",
                    "Quality",
                    {"name": "Quality", "score": 92},
                    children=[CTreeGridRow("a11y", "Accessibility", {"name": "Accessibility", "score": 98})],
                )
            ],
        }

    template = """<c-CTreeGrid c-columns="columns" c-rows="rows" label="Initiatives" c-expanded="['quality']"><c-fill name="cell" data="{ column, cell }"><strong c-if="column.key == 'score'">{{ cell.value }}%</strong><span c-else>{{ cell.value }}</span></c-fill></c-CTreeGrid>"""


preview = TreeGridCustomCells()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201 - public snippets keep focus on component use

import citry_ui
from citry import Component, citry
from citry_ui import CTreeGridColumn, CTreeGridRow

citry.register_library(citry_ui)


class TreeGridAccessibility(Component):
    def template_data(self, _kwargs, _slots):
        return {
            "columns": [CTreeGridColumn("name", "Record", 260), CTreeGridColumn("status", "Status")],
            "rows": [
                CTreeGridRow("available", "Available record", {"name": "Available record", "status": "Ready"}),
                CTreeGridRow(
                    "locked", "Locked record", {"name": "Locked record", "status": "Archived"}, disabled=True
                ),
            ],
        }

    template = (
        '<c-CTreeGrid c-columns="columns" c-rows="rows" label="Records" selection="multiple" density="spacious" />'
    )


preview = TreeGridAccessibility()
preview  # noqa: B018