Current section

Files

Jump to
moon lib moon design form.ex
Raw

lib/moon/design/form.ex

defmodule Moon.Design.Form do
@moduledoc false
use Moon.StatelessComponent
import Moon.Helpers.Form, only: [transfor: 1]
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Atom or changeset to inform the form data"
prop(for, :any)
@doc "The server side parameter in which all parameters will be gathered."
prop(as, :atom)
@doc "Triggered when the form is changed"
prop(change, :event)
@doc "Triggered when the form is submitted"
prop(submit, :event)
@doc "Additional Tailwind classes"
prop(class, :string)
@doc "Whether autocomplete is enabled"
prop(autocomplete, :string, default: "on", values: ["on", "off"])
@doc "Target"
prop(target, :any)
@doc "URL to where the form is submitted"
prop(action, :string)
@doc "Trigger a standard form submit on DOM patch to the URL specified in the form's standard action
attribute.
This is useful to perform pre-final validation of a LiveView form submit before posting to a
controller route for operations that require Plug session mutation."
prop(trigger_action, :any)
@doc "Whether label is on side of input field"
prop(is_horizontal, :boolean, default: false)
@doc "Whether error icon is shown"
prop(has_error_icon, :boolean, default: false)
@doc "Additional ttributes to be added to form tag"
prop(attrs, :map, default: %{})
@doc "Default slot"
slot(default)
def render(assigns) do
~F"""
<Surface.Components.Form
for={transfor(@for)}
{=@as}
{=@submit}
{=@change}
{=@class}
{=@action}
{=@trigger_action}
opts={Map.merge(
%{autocomplete: @autocomplete, id: @id, "data-testid": @testid, "phx-target": @target},
@attrs
)}
>
<#slot context_put={is_horizontal: @is_horizontal, has_error_icon: @has_error_icon} />
</Surface.Components.Form>
"""
end
end