Packages
moon
2.86.1
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_web/examples/light/form_example/registration.exs
defmodule MoonWeb.Examples.Light.FormExample.Registration do
@moduledoc false
use Moon.Light.LiveComponent
use MoonWeb, :example
alias MoonWeb.Schema.User
alias Moon.Design.Form
alias Moon.Design.Form.Field.Label
alias Moon.Design.Form.Select
alias Moon.Design.Form.Input
alias Moon.Design.Form.TextArea
alias Moon.Design.Form.Field
alias Moon.Design.Form.Switch
alias Moon.Design.Form.Checkbox
alias Moon.Design.Button
alias MoonWeb.Components.Anatomy
attr(:user_changeset, :any,
default:
User.changeset(%User{
gender: "invalid",
username: "userName",
email: "my@e.mail",
agrees_to_terms_of_service: false,
agrees_to_marketing_emails: true
})
)
attr(:gender_options, :list,
default: [
[key: "Female", value: "female"],
[key: "Male", value: "male"],
[key: "Invalid choice", value: "invalid"],
[key: "I identify as God and this is not important", value: "god", disabled: true]
]
)
def render(assigns) do
~H"""
<.form
:let={form}
for={@user_changeset}
phx-change="change"
phx-target={@myself}
phx-submit="submit"
>
<Elixir.Moon.Light.Form.field
label="Label for select"
hint="Hint for Select"
field={form[:gender]}
>
<Elixir.Moon.Light.Form.select field={form[:gender]} options={@gender_options} />
</Elixir.Moon.Light.Form.field>
<Elixir.Moon.Light.Form.field
label="Label for textinput"
hint="Hint for Textinput"
field={form[:username]}
>
<Elixir.Moon.Light.Form.input field={form[:username]} />
</Elixir.Moon.Light.Form.field>
<Elixir.Moon.Light.Form.field
label="Label for TextArea"
hint="Hint for TextArea"
field={form[:email]}
>
<Elixir.Moon.Light.Form.text_area field={form[:email]} />
</Elixir.Moon.Light.Form.field>
<Elixir.Moon.Light.Form.field field={form[:agrees_to_terms_of_service]}>
<Elixir.Moon.Light.Form.Field.label field={form[:agrees_to_terms_of_service]} size="sm">
<Elixir.Moon.Light.Form.switch /> I agree terms of service
</Elixir.Moon.Light.Form.Field.label>
</Elixir.Moon.Light.Form.field>
<Elixir.Moon.Light.Form.field field={form[:agrees_to_marketing_emails]}>
<Elixir.Moon.Light.Form.Field.label field={form[:agrees_to_marketing_emails]} size="sm">
<Elixir.Moon.Light.Form.checkbox /> Marketing emails
</Elixir.Moon.Light.Form.Field.label>
</Elixir.Moon.Light.Form.field>
<.button type="submit">Submit</.button>
<.moon module={Anatomy} class="theme-moon-dark" title={false}>
@user_changeset = <%= inspect(@user_changeset, pretty: true) %>
</.moon>
</.form>
"""
end
def handle_event("change", %{"user" => params}, socket) do
user_changeset = User.changeset(%User{}, params)
{:noreply, assign(socket, user_changeset: user_changeset)}
end
def handle_event("submit", _, socket) do
user_changeset = Map.merge(socket.assigns.user_changeset, %{action: :insert})
{:noreply, assign(socket, user_changeset: user_changeset)}
end
end