Packages
moon
2.80.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/design/form_example/registration.ex
defmodule MoonWeb.Examples.Design.FormExample.Registration do
@moduledoc false
use Moon.StatefulComponent
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
prop(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
})
)
prop(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
~F"""
<Form for={@user_changeset} change="change" submit="submit">
<Field label="Label for select" hint="Hint for Select" field={:gender}>
<Select options={@gender_options} />
</Field>
<Field label="Label for textinput" hint="Hint for Textinput" field={:username}>
<Input />
</Field>
<Field label="Label for TextArea" hint="Hint for TextArea" field={:email}>
<TextArea />
</Field>
<Field field={:agrees_to_terms_of_service}>
<Label size="sm">
<Switch />
I agree terms of service
</Label>
</Field>
<Field field={:agrees_to_marketing_emails}>
<Label size="sm">
<Checkbox />
Marketing emails
</Label>
</Field>
<Button type="submit">Submit</Button>
<Anatomy class="theme-moon-dark" title={false}>@user_changeset = {inspect(@user_changeset, pretty: true)}</Anatomy>
</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
def code() do
"""
"""
end
end