Virtual List

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class VirtualListAtAGlance(Component):
    template = """
      <c-CVirtualList aria_label="Build activity" c-estimated_item_size="64">
        <c-for each="entry in entries">
          <c-CVirtualListItem c-item_key="entry['key']">
            <article>
              <strong>{{ entry['title'] }}</strong><br />
              <small>{{ entry['detail'] }}</small>
            </article>
          </c-CVirtualListItem>
        </c-for>
      </c-CVirtualList>
    """
    css = """
      :where([data-citry-ui-part="virtual-list"] article) {
        padding: 0.75rem 1rem;
        border-block-end: 1px solid color-mix(in srgb, currentColor 14%, transparent);
      }
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {
            "entries": [
                {"key": f"build-{index}", "title": f"Build {2400 + index}", "detail": "Checks passed"}
                for index in range(80)
            ]
        }


preview = VirtualListAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class VirtualWindowExample(Component):
    template = """
      <section x-data="{last:'This preview shows the final server range'}">
        <output x-text="last">This preview shows the final server range</output>
        <c-CVirtualWindow
          aria_label="Audit records"
          c-total_count="36"
          c-start_index="20"
          c-item_size="48"
          c-initial_index="20"
          $c-props="{onRangeChange:(detail)=>last=`Requested ${detail.startIndex}-${detail.endIndex - 1}`}"
        >
          <c-for each="record in records">
            <c-CVirtualListItem c-item_key="record['key']">
              <span>{{ record['number'] }}</span> {{ record['label'] }}
            </c-CVirtualListItem>
          </c-for>
        </c-CVirtualWindow>
      </section>
    """
    css = """
      :where([data-citry-ui-part="item"]) {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-inline: 1rem;
        border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
      }
      :where([data-citry-ui-part="item"] > span) { color: GrayText; font-variant-numeric: tabular-nums; }
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {
            "records": [
                {"key": f"audit-{index}", "number": f"#{index + 1:05d}", "label": "Signed deployment record"}
                for index in range(20, 36)
            ]
        }


preview = VirtualWindowExample()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class VirtualWindowControlled(Component):
    template = """
      <section x-data="{itemSize:56,overscan:2,last:'No request'}">
        <label>Row size <input type="range" min="40" max="72" x-model.number="itemSize" /></label>
        <label>Overscan <input type="range" min="0" max="8" x-model.number="overscan" /></label>
        <output x-text="last">No request</output>
        <c-CVirtualWindow
          aria_label="Controlled geometry"
          c-total_count="12"
          c-item_size="56"
          c-viewport_size="280"
          $c-props="{
            itemSize,
            overscan,
            onRangeChange:(detail)=>last=`${detail.reason}: ${detail.startIndex}-${detail.endIndex - 1}`,
          }"
        >
          <c-for each="index in indexes">
            <c-CVirtualListItem c-item_key="f'controlled-{index}'">Record {{ index + 1 }}</c-CVirtualListItem>
          </c-for>
        </c-CVirtualWindow>
      </section>
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"indexes": list(range(12))}

    css = """
      :where([data-citry-ui-part="item"]) { display:flex;align-items:center;padding-inline:1rem; }
      :where(label) { display:inline-flex;gap:0.5rem;margin-inline-end:1rem; }
      :where(output) { display:block;margin-block:0.5rem; }
    """


preview = VirtualWindowControlled()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class VirtualListAccessibility(Component):
    template = """
      <c-CStack>
        <section>
          <h2>Complete collection</h2>
          <c-CVirtualList aria_label="All release notes" c-viewport_size="220">
            <c-for each="index in complete_indexes">
              <c-CVirtualListItem c-item_key="f'complete-{index}'">
                <a c-href="f'#release-{index + 1}'">Release {{ index + 1 }}</a>
              </c-CVirtualListItem>
            </c-for>
          </c-CVirtualList>
        </section>
        <section>
          <h2>Supplied range</h2>
          <c-CVirtualWindow
            aria_label="Windowed release notes"
            c-total_count="8"
            c-item_size="44"
            c-viewport_size="220"
          >
            <c-for each="index in window_indexes">
              <c-CVirtualListItem c-item_key="f'window-{index}'">Release {{ index + 1 }}</c-CVirtualListItem>
            </c-for>
          </c-CVirtualWindow>
        </section>
      </c-CStack>
    """
    css = """
      :where([data-citry-ui-part="item"]) {
        display:flex;align-items:center;padding-inline:0.75rem;min-block-size:44px;
      }
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"complete_indexes": list(range(16)), "window_indexes": list(range(8))}


preview = VirtualListAccessibility()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class VirtualListCustomization(Component):
    template = """
      <c-CVirtualList aria_label="Pinned environments" class_="environment-list" c-viewport_size="260">
        <c-for each="environment in environments">
          <c-CVirtualListItem c-item_key="environment['key']">
            <strong>{{ environment['name'] }}</strong>
            <span>{{ environment['region'] }}</span>
          </c-CVirtualListItem>
        </c-for>
      </c-CVirtualList>
    """
    css = """
      :where(.environment-list) {
        --cui-virtual-list-border: 2px solid #7c3aed;
        --cui-virtual-list-radius: 1rem;
        --cui-virtual-list-background: light-dark(#faf5ff, #2e1065);
        --cui-virtual-list-item-background: light-dark(#fff, #1e1b4b);
      }
      :where(.environment-list [data-citry-ui-part="item"]) {
        display:grid;
        grid-template-columns:1fr auto;
        gap:1rem;
        padding:0.875rem 1rem;
        margin:0.5rem;
        border-radius:0.625rem;
      }
      :where(.environment-list [data-citry-ui-part="item"] span) { color:GrayText; }
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {
            "environments": [
                {"key": f"environment-{index}", "name": f"Service {index + 1}", "region": "eu-central"}
                for index in range(24)
            ]
        }


preview = VirtualListCustomization()
preview  # noqa: B018