Packages
moon
2.78.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/form/field.ex
defmodule Moon.Design.Form.Field do
@moduledoc false
use Moon.StatelessComponent
import Moon.Helpers.Form
alias __MODULE__
@doc "Form, Surface-style"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Field, Surface-style"
prop(field, :atom)
@doc "Input size"
prop(size, :string, values!: ~w(sm md lg), default: "md")
@doc "Label for input field"
prop(label, :string)
@doc "Hint for input field"
prop(hint, :string)
@doc "Whether error message is shown"
prop(hide_errors, :boolean)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(error_class, :css_class)
@doc "Additional Tailwind classes"
prop(hint_class, :css_class)
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Whether label is on side of input field"
prop(is_horizontal, :boolean, from_context: :is_horizontal)
@doc "Whether error icon is shown"
prop(has_error_icon, :boolean, from_context: :has_error_icon)
@doc "Inner content of the component"
slot(default)
prop(attrs, :map)
# opts={Map.merge(%{id: @id, "data-testid": @testid}, @attrs)}
def render(assigns) do
~F"""
<Surface.Components.Form.Field
name={@field}
class={merge([
[
"grid grid-cols-2": @is_horizontal
],
@class
])}
>
<Field.Label :if={@label} {=@size} title={@label} />
<#slot context_put={
size: @size,
has_error_icon: @has_error_icon,
error: !!@field && !!@form && has_error(@form, @field),
is_horizontal: @is_horizontal
} />
<Field.Hint :if={@hint} title={@hint} class={@hint_class} {=@is_horizontal} />
<Field.Error
:if={!@hide_errors && !!@field && !!@form && has_error(@form, @field)}
class={@error_class}
{=@has_error_icon}
{=@is_horizontal}
/>
</Surface.Components.Form.Field>
"""
end
end