Splitter

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SplitterAtAGlance(Component):
    template = """
      <c-CSplitter c-sizes="[30, 70]" variant="outline">
        <c-CSplitterPanel id="navigation" label="Navigation">
          <strong>Navigation</strong><p>Projects, files, and saved views.</p>
        </c-CSplitterPanel>
        <c-CSplitterPanel id="workspace" label="Workspace">
          <strong>Workspace</strong><p>Resize with the separator or its Arrow keys.</p>
        </c-CSplitterPanel>
      </c-CSplitter>
    """


preview = SplitterAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class MultiplePanels(Component):
    template = """
      <c-CSplitter c-sizes="[20, 45, 35]" variant="soft">
        <c-CSplitterPanel id="outline" label="Document outline">Outline</c-CSplitterPanel>
        <c-CSplitterPanel id="editor" label="Document editor">Editor</c-CSplitterPanel>
        <c-CSplitterPanel id="preview" label="Document preview">Preview</c-CSplitterPanel>
      </c-CSplitter>
    """


preview = MultiplePanels()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class VerticalNested(Component):
    template = """
      <c-CSplitter orientation="vertical" c-sizes="[35, 65]" variant="outline">
        <c-CSplitterPanel id="header" label="Header preview">Header preview</c-CSplitterPanel>
        <c-CSplitterPanel id="workbench" label="Workbench">
          <c-CSplitter c-sizes="[40, 60]" size="sm">
            <c-CSplitterPanel id="source" label="Source">Source</c-CSplitterPanel>
            <c-CSplitterPanel id="result" label="Result">Result</c-CSplitterPanel>
          </c-CSplitter>
        </c-CSplitterPanel>
      </c-CSplitter>
    """


preview = VerticalNested()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ConstrainedSplitter(Component):
    template = """
      <c-CSplitter c-sizes="[35, 65]" c-keyboard_step="5" variant="outline">
        <c-CSplitterPanel id="tools" label="Tools" c-min_size="20" c-max_size="50">
          Focus the separator. Arrow keys move 5%; Shift moves 20%; Home and End use the limits.
        </c-CSplitterPanel>
        <c-CSplitterPanel id="canvas" label="Canvas" c-min_size="40">Canvas</c-CSplitterPanel>
      </c-CSplitter>
    """


preview = ConstrainedSplitter()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledSplitter(Component):
    template = """
      <section x-data="{ sizes: [25, 75], saved: '' }">
        <c-CSplitter
          c-sizes="[25, 75]"
          $c-props="{
            sizes,
            onResize: (next) => sizes = next,
            onResizeEnd: (next) => saved = next.map(value => value.toFixed(0)).join(' / ')
          }"
        >
          <c-CSplitterPanel id="filters" label="Filters">Filters</c-CSplitterPanel>
          <c-CSplitterPanel id="results" label="Results">Results</c-CSplitterPanel>
        </c-CSplitter>
        <output x-text="saved ? `Saved: ${saved}` : 'Resize to save the layout'"></output>
      </section>
    """


preview = ControlledSplitter()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DisabledSplitter(Component):
    template = """
      <fieldset disabled>
        <legend>Locked layout</legend>
        <c-CSplitter c-sizes="[40, 60]" variant="soft">
          <c-CSplitterPanel id="summary" label="Summary">Summary</c-CSplitterPanel>
          <c-CSplitterPanel id="details" label="Details">Details</c-CSplitterPanel>
        </c-CSplitter>
      </fieldset>
    """


preview = DisabledSplitter()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedSplitter(Component):
    template = """
      <div class="brand-splitter">
        <style>
          .brand-splitter {
            --cui-splitter-radius: 1.25rem;
            --cui-splitter-handle-active-color: rebeccapurple;
            --cui-splitter-background: color-mix(in srgb, rebeccapurple 7%, Canvas);
          }
          .brand-splitter [data-citry-ui-part="panel"] { overflow-wrap: anywhere; }
        </style>
        <c-CSplitter c-sizes="[38, 62]" variant="outline" size="lg">
          <c-CSplitterPanel id="index" label="Index">Branded index</c-CSplitterPanel>
          <c-CSplitterPanel id="article" label="Article">Branded article</c-CSplitterPanel>
        </c-CSplitter>
      </div>
    """


preview = CustomizedSplitter()
preview  # noqa: B018