Packages
moon
2.87.4
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.ex
defmodule MoonWeb.Examples.Light.FormExample.Registration do
@moduledoc false
use Moon.Light.LiveComponent
use MoonWeb, :example
alias MoonWeb.Schema.User
alias MoonWeb.Components.Anatomy
alias Elixir.Moon.Light.Form
import Form
import Elixir.Moon.Light.Form.Field, only: [label: 1]
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"""
<div>
<.form
:let={form}
for={@user_changeset}
phx-change="change"
phx-target={@myself}
phx-submit="submit"
>
<.field label="Label for select" hint="Hint for Select" field={form[:gender]}>
<.select field={form[:gender]} options={@gender_options} />
</.field>
<.field label="Label for textinput" hint="Hint for Textinput" field={form[:username]}>
<.input field={form[:username]} />
</.field>
<.field label="Label for TextArea" hint="Hint for TextArea" field={form[:email]}>
<.text_area field={form[:email]} />
</.field>
<.field field={form[:agrees_to_terms_of_service]}>
<.label field={form[:agrees_to_terms_of_service]} size="sm">
<Form.switch field={form[:agrees_to_terms_of_service]} /> I agree terms of service
</.label>
</.field>
<.field field={form[:agrees_to_marketing_emails]}>
<Form.checkbox field={form[:agrees_to_marketing_emails]} label="Marketing emails" />
</.field>
<.button type="submit">Submit</.button>
<.moon module={Anatomy} class="theme-moon-dark" title={false}>
@user_changeset = <%= inspect(@user_changeset, pretty: true) %>
</.moon>
</.form>
</div>
"""
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