Packages
moon
2.79.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/design/form/group_example/variants.ex
defmodule MoonWeb.Examples.Design.Form.GroupExample.Variants do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Form
alias Moon.Design.Form.Group
alias Moon.Design.Form.Input
alias Moon.Design.Form.InsetField
alias Moon.Design.Form.Select
alias MoonWeb.Schema.User
prop(countries, :list,
default: [
[key: "Italy", value: "IT"],
[key: "China", value: "CH"],
[key: "Germany", value: "GE"]
]
)
prop(numbers, :list,
default: [
[key: "41", value: "41"],
[key: "42", value: "42"],
[key: "43", value: "43"],
[key: "44", value: "44"]
]
)
prop(user_changeset, :any, default: User.changeset(%User{}))
def handle_event("changed", %{"user" => params}, socket) do
{:noreply, assign(socket, user_changeset: User.changeset(%User{}, params))}
end
def render(assigns) do
~F"""
<div class="flex flex-col gap-4">
<Form for={@user_changeset}>
<Group>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
</Group>
</Form>
<Form for={@user_changeset}>
<Group orientation="horizontal">
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
</Group>
</Form>
<Group>
<Select options={@countries} />
<Input placeholder="Phone number" type="phone" />
</Group>
<Group orientation="horizontal">
<Input placeholder="Street" />
<Select options={@numbers} />
</Group>
</div>
"""
end
def code() do
"""
alias Moon.Design.Form
alias Moon.Design.Form.Group
alias Moon.Design.Form.Input
alias Moon.Design.Form.InsetField
alias Moon.Design.Form.Select
alias MoonWeb.Schema.User
prop(countries, :list,
default: [
[key: "Italy", value: "IT"],
[key: "China", value: "CH"],
[key: "Germany", value: "GE"]
]
)
prop(numbers, :list,
default: [
[key: "41", value: "41"],
[key: "42", value: "42"],
[key: "43", value: "43"],
[key: "44", value: "44"]
]
)
prop(user_changeset, :any, default: User.changeset(%User{}))
def handle_event("changed", %{"user" => params}, socket) do
{:noreply, assign(socket, user_changeset: User.changeset(%User{}, params))}
end
def render(assigns) do
~F\"""
<div class="flex flex-col gap-4">
<Form for={@user_changeset}>
<Group>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
</Group>
</Form>
<Form for={@user_changeset}>
<Group orientation="horizontal">
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
<InsetField label="Label">
<Input placeholder="Placeholder" />
</InsetField>
</Group>
</Form>
<Group>
<Select options={@countries} />
<Input placeholder="Phone number" type="phone" />
</Group>
<Group orientation="horizontal">
<Input placeholder="Street" />
<Select options={@numbers} />
</Group>
</div>
\"""
end
"""
end
end