Packages
moon
2.87.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/inset_field.ex
defmodule Moon.Design.Form.InsetField do
@moduledoc false
use Moon.StatelessComponent
import Moon.Helpers.Form
alias __MODULE__
alias Moon.Design.Form.Field.Error
@doc "Form info, usually should be taken from context"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Field name, surface-style"
prop(field, :atom)
@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 "Sets disabled state"
prop(disabled, :boolean)
@doc "Sets read-only state"
prop(readonly, :boolean)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(field_class, :css_class, from_context: :field_class)
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Inner content of the component"
slot(default)
def render(assigns) do
~F"""
<Surface.Components.Form.Field
name={@field}
class={merge([
[
"relative rounded-moon-i-sm bg-goku shadow-input",
"opacity-60 cursor-not-allowed": @disabled
] ++
[@field_class, @class]
])}
>
<#slot context_put={
field_class: [
"bg-transparent h-14 leading-[3.5rem]",
"shadow-none",
"before:box-border after:box-border",
"input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label",
"rounded-moon-i-sm"
],
disabled: @disabled,
readonly: @readonly,
error: !!@field && !!@form && has_error(@form, @field)
} />
<InsetField.Label :if={@label} title={@label} {=@disabled} />
</Surface.Components.Form.Field>
<InsetField.Hint :if={@hint} title={@hint} {=@disabled} />
<Error :if={!@hide_errors && !!@field && !!@form} />
"""
end
end