mirror of
https://github.com/ClaperCo/Claper.git
synced 2026-07-10 04:24:14 +02:00
72 lines
2.2 KiB
Elixir
72 lines
2.2 KiB
Elixir
defmodule ClaperWeb.Component.Select do
|
|
@moduledoc """
|
|
DaisyUI select field for Claper forms.
|
|
|
|
Wraps the daisyUI [`select`](https://daisyui.com/components/select/) component
|
|
(pill-shaped and `!font-display` via `assets/css/app.css`) together with a bold
|
|
field label and inline validation errors. Form-aware: pass a
|
|
`Phoenix.HTML.Form`, the field `key` and the `options`.
|
|
|
|
`options` accepts anything
|
|
[`options_for_select/2`](https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#options_for_select/2)
|
|
understands, e.g. `[{"Text", "text"}, {"Email", "email"}]`.
|
|
|
|
## Sizes
|
|
- `:sm` - 40px height
|
|
- `:md` - 48px height (default)
|
|
- `:lg` - 56px height
|
|
|
|
## Examples
|
|
|
|
<.select_field
|
|
form={i}
|
|
key={:type}
|
|
label={gettext("Type")}
|
|
options={[{gettext("Text"), "text"}, {gettext("Email"), "email"}]}
|
|
/>
|
|
"""
|
|
use ClaperWeb, :view_component
|
|
|
|
attr :form, Phoenix.HTML.Form, required: true
|
|
attr :key, :atom, required: true
|
|
attr :options, :list, required: true
|
|
attr :label, :string, default: nil
|
|
attr :prompt, :string, default: nil
|
|
attr :required, :boolean, default: false
|
|
attr :size, :atom, default: :md, values: [:sm, :md, :lg]
|
|
attr :class, :string, default: nil
|
|
attr :rest, :global, include: ~w(disabled multiple phx-change)
|
|
|
|
def select_field(assigns) do
|
|
assigns = assign_new(assigns, :errors, fn -> error_tag(assigns.form, assigns.key) end)
|
|
|
|
~H"""
|
|
<div class="flex flex-col gap-1">
|
|
<label :if={@label} for={input_id(@form, @key)} class="text-sm font-bold text-base-content">
|
|
{@label}
|
|
</label>
|
|
<select
|
|
name={input_name(@form, @key)}
|
|
id={input_id(@form, @key)}
|
|
required={@required}
|
|
class={[
|
|
"select w-full bg-white",
|
|
size_class(@size),
|
|
@errors != [] && "select-error",
|
|
@class
|
|
]}
|
|
{@rest}
|
|
>
|
|
<option :if={@prompt} value="">{@prompt}</option>
|
|
{Phoenix.HTML.Form.options_for_select(@options, input_value(@form, @key))}
|
|
</select>
|
|
<p :if={@errors != []} class="text-supporting-red-500 text-sm">{@errors}</p>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
defp size_class(:sm), do: "h-10"
|
|
defp size_class(:md), do: "h-12"
|
|
defp size_class(:lg), do: "h-14"
|
|
end
|