Editable

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableAtAGlance(Component):
    template = """
      <c-CField>
        <c-fill name="label">Project name</c-fill>
        <c-fill name="description">Use the pencil to rename this project in place.</c-fill>
        <c-fill name="default">
          <c-CEditable value="Aurora atlas" name="project-name" />
        </c-fill>
      </c-CField>
    """


preview = EditableAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableForm(Component):
    template = """
      <form x-data @submit.prevent="result = Object.fromEntries(new FormData($event.target))">
        <c-CField required>
          <c-fill name="label">Workspace title</c-fill>
          <c-fill name="default">
            <c-CEditable value="Field notes" name="title" />
          </c-fill>
        </c-CField>
        <c-CButton type="submit">Save form</c-CButton>
        <c-CButton type="reset" variant="ghost">Reset</c-CButton>
        <output x-text="JSON.stringify(result)"></output>
      </form>
    """


preview = EditableForm()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledEditable(Component):
    template = """
      <div x-data>
        <c-CEditable
          value="Atlas"
          $c-props="{
            value:$store.editableExample.value,
            onValueChange:(next) => $store.editableExample.value = next,
          }"
        />
        <p>Committed: <strong x-text="$store.editableExample.value"></strong></p>
      </div>
    """
    js = "Alpine.store('editableExample', {value:'Atlas'});"


preview = ControlledEditable()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableSubmitModes(Component):
    template = """
      <c-CStack>
        <c-CEditable value="Enter or blur" submit_mode="both" c-input_attrs="{'aria-label':'Both'}" />
        <c-CEditable value="Enter only" submit_mode="enter" c-input_attrs="{'aria-label':'Enter only'}" />
        <c-CEditable value="Blur only" submit_mode="blur" c-input_attrs="{'aria-label':'Blur only'}" />
        <c-CEditable value="Buttons only" submit_mode="explicit" c-input_attrs="{'aria-label':'Explicit'}" />
      </c-CStack>
    """


preview = EditableSubmitModes()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableActionPositions(Component):
    template = """
      <c-CStack>
        <c-CEditable value="Actions inside by default" editing c-input_attrs="{'aria-label':'Inside actions'}" />
        <c-CEditable
          value="Actions beside the input" editing action_position="outside"
          c-input_attrs="{'aria-label':'Outside actions'}"
        />
      </c-CStack>
    """


preview = EditableActionPositions()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableStates(Component):
    template = """
      <c-CStack>
        <c-CEditable value="Available" c-input_attrs="{'aria-label':'Available title'}" />
        <c-CEditable value="Read only" readonly c-input_attrs="{'aria-label':'Read-only title'}" />
        <c-CEditable value="Disabled" disabled c-input_attrs="{'aria-label':'Disabled title'}" />
        <c-CEditable value="Needs review" invalid c-input_attrs="{'aria-label':'Invalid title'}" />
        <c-CEditable placeholder="Empty value" c-input_attrs="{'aria-label':'Empty title'}" />
      </c-CStack>
    """


preview = EditableStates()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableVariants(Component):
    template = """
      <c-CStack>
        <c-CEditable value="Small outline" variant="outline" size="sm" />
        <c-CEditable value="Medium filled" variant="filled" />
        <c-CEditable value="Large plain" variant="plain" size="lg" />
      </c-CStack>
    """


preview = EditableVariants()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class EditableKeyboard(Component):
    template = """
      <c-CStack>
        <p>Tab to Edit, press Enter to edit, then Enter to save or Escape to cancel.</p>
        <c-CEditable value="Keyboard friendly" />
        <c-CButton variant="outline">Next focus target</c-CButton>
      </c-CStack>
    """


preview = EditableKeyboard()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedEditable(Component):
    template = """
      <c-CEditable
        value="Branded title" editing
        style="--cui-editable-background:#fff8eb; --cui-editable-border-color:#f79009;
               --cui-editable-focus-color:#b54708; --cui-editable-radius:1rem"
        c-input_attrs="{'aria-label':'Branded title'}"
      />
    """


preview = CustomizedEditable()
preview  # noqa: B018