Toolbar

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarAtAGlance(Component):
    template = """
      <c-CToolbar label="Document tools" variant="soft">
        <c-CButton variant="ghost">Undo</c-CButton>
        <c-CToggle>Bold</c-CToggle>
        <c-CToggle>Italic</c-CToggle>
        <c-CDivider orientation="vertical" decorative />
        <a href="#toolbar-preview">Help</a>
      </c-CToolbar>
    """


preview = ToolbarAtAGlance()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarCommands(Component):
    template = """
      <c-CToolbar label="Text formatting" variant="outline">
        <c-CButton>Undo</c-CButton>
        <c-CButton>Redo</c-CButton>
        <c-CToggle c-pressed="True">Bold</c-CToggle>
        <c-CToggle>Italic</c-CToggle>
      </c-CToolbar>
    """


preview = ToolbarCommands()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarComposition(Component):
    template = """
      <c-CToolbar label="Map tools" variant="soft">
        <c-CButtonGroup label="Zoom">
          <c-CButton variant="outline">Zoom in</c-CButton>
          <c-CButton variant="outline">Zoom out</c-CButton>
        </c-CButtonGroup>
        <c-CDivider orientation="vertical" decorative />
        <c-CToggleGroup label="Map layer" value="terrain">
          <c-CToggle value="terrain">Terrain</c-CToggle>
          <c-CToggle value="satellite">Satellite</c-CToggle>
        </c-CToggleGroup>
        <c-CPopover>
          <c-fill name="activator" data="{ activator_attrs }">
            <c-CButton c-attrs="activator_attrs">Details</c-CButton>
          </c-fill>
          <c-fill name="title">Map details</c-fill>
          <c-fill name="default"><p>Projection and data source information.</p></c-fill>
        </c-CPopover>
      </c-CToolbar>
    """


preview = ToolbarComposition()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarOrientation(Component):
    template = """
      <div style="display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start">
        <c-CToolbar label="Horizontal tools" c-loop="False">
          <c-CButton>Previous</c-CButton>
          <c-CButton>Current</c-CButton>
          <c-CButton>Next</c-CButton>
        </c-CToolbar>
        <c-CToolbar label="Vertical tools" orientation="vertical" variant="outline">
          <c-CButton>Up</c-CButton>
          <c-CButton>Center</c-CButton>
          <c-CButton>Down</c-CButton>
        </c-CToolbar>
      </div>
    """


preview = ToolbarOrientation()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarVariants(Component):
    template = """
      <c-CStack gap="md">
        <c-CToolbar
          c-for="variant, size in [('plain', 'sm'), ('soft', 'md'), ('outline', 'lg')]"
          c-label="variant + ' ' + size + ' tools'"
          c-variant="variant"
          c-size="size"
        >
          <c-CButton>Cut</c-CButton>
          <c-CButton>Copy</c-CButton>
          <c-CButton>Paste</c-CButton>
        </c-CToolbar>
      </c-CStack>
    """


preview = ToolbarVariants()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarDisabled(Component):
    template = """
      <fieldset disabled>
        <legend>Unavailable editor</legend>
        <c-CToolbar label="Unavailable tools" variant="outline">
          <c-CButton>Cut</c-CButton>
          <c-CButton>Copy</c-CButton>
          <c-CButton>Paste</c-CButton>
        </c-CToolbar>
      </fieldset>
    """


preview = ToolbarDisabled()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToolbarCustomization(Component):
    template = """
      <c-CToolbar
        label="Forest tools"
        variant="soft"
        c-style="{
          '--cui-toolbar-gap': '0.75rem',
          '--cui-toolbar-radius': '1.25rem',
          '--cui-toolbar-background': '#eef8ec',
          '--cui-toolbar-border-color': '#497a43'
        }"
      >
        <c-CButton variant="ghost">Canopy</c-CButton>
        <c-CButton variant="ghost">Understory</c-CButton>
        <c-CButton variant="ghost">Soil</c-CButton>
      </c-CToolbar>
    """


preview = ToolbarCustomization()

preview  # noqa: B018