File input and drop target

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class FileInputAtAGlance(Component):
    template = """
      <c-CStack gap="lg">
        <c-CField>
          <c-fill name="label">Profile photo</c-fill>
          <c-fill name="default"><c-CFileInput name="photo" accept="image/*" /></c-fill>
        </c-CField>
        <c-CDropTarget label="Project files" name="project_files" multiple>
          Drop files here or browse from this device
        </c-CDropTarget>
      </c-CStack>
    """


preview = FileInputAtAGlance()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class FileInputField(Component):
    template = """
      <c-CField required>
        <c-fill name="label">Supporting document</c-fill>
        <c-fill name="default">
          <c-CFileInput name="document" accept="application/pdf" />
        </c-fill>
        <c-fill name="description">Choose one PDF for review.</c-fill>
        <c-fill name="error">Choose a supporting document.</c-fill>
      </c-CField>
    """


preview = FileInputField()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class FileDropTarget(Component):
    template = """
      <div x-data="{names: []}">
        <c-CDropTarget
          label="Supporting documents"
          name="documents"
          multiple
          @change="names = [...$event.target.files].map(file => file.name)"
        >
          PDF or image files
        </c-CDropTarget>
        <p x-text="names.join(', ')"></p>
      </div>
    """


preview = FileDropTarget()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class MultipleFiles(Component):
    template = """
      <form @submit.prevent="window.__selectedFiles = [...new FormData($event.target).getAll('evidence')]">
        <c-CDropTarget label="Research evidence" name="evidence" multiple variant="soft">
          Select or drop several files
        </c-CDropTarget>
        <c-CButton type="submit">Inspect FormData</c-CButton>
      </form>
    """


preview = MultipleFiles()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class FileCaptureHints(Component):
    template = """
      <c-CGroup>
        <c-CField>
          <c-fill name="label">Take a photo</c-fill>
          <c-fill name="default">
            <c-CFileInput name="photo" accept="image/*" capture="environment" />
          </c-fill>
        </c-CField>
        <c-CField>
          <c-fill name="label">Record a note</c-fill>
          <c-fill name="default">
            <c-CFileInput name="note" accept="audio/*" capture="user" />
          </c-fill>
        </c-CField>
      </c-CGroup>
    """


preview = FileCaptureHints()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DisabledFiles(Component):
    template = """
      <c-CStack>
        <c-CFileInput c-attrs="{'aria-label': 'Disabled picker'}" disabled />
        <fieldset disabled>
          <legend>Archived upload</legend>
          <c-CDropTarget label="Archived evidence" c-disabled="False">
            Uploads are unavailable
          </c-CDropTarget>
        </fieldset>
      </c-CStack>
    """


preview = DisabledFiles()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedFiles(Component):
    css = """
      :where(.evidence-drop) {
        --cui-file-input-background: light-dark(#eef8f2, #10271d);
        --cui-file-input-border-color: light-dark(#28724d, #6ed59b);
        --cui-file-input-active-color: light-dark(#15623e, #82e8ad);
        --cui-file-input-radius: 1.25rem;
      }
    """
    template = """
      <c-CDropTarget label="Botanical records" class_="evidence-drop" size="lg">
        CSV, PDF, or field images
      </c-CDropTarget>
    """


preview = CustomizedFiles()

preview  # noqa: B018