Packages
moon
2.87.0
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/dropdown_example/custom.ex
defmodule MoonWeb.Examples.Design.Form.DropdownExample.Custom do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias MoonWeb.Schema.User
alias Moon.Design.Form
alias Moon.Design.Dropdown
prop(roles, :list, default: User.available_roles_with_icon())
prop(changeset1, :any, default: User.changeset(%User{}))
prop(changeset2, :any, default: User.changeset(%User{}))
def handle_event("change" <> num, params, socket) do
changeset = User.changeset(%User{}, Map.get(params, "user", %{}))
{:noreply, assign(socket, "changeset#{num}": changeset)}
end
defp icon_and_title(assigns = %{option: nil}), do: ~F"{@prompt}"
defp icon_and_title(assigns), do: ~F"<Moon.Icon name={@option[:icon]} /> {@option[:key]}"
def render(assigns) do
~F"""
<div class="w-full flex flex-col lg:flex-row gap-2 justify-between">
<Form for={@changeset2} class="w-full" change="change2" id="user_bit_custom">
<Form.Field field={:role} label="Light customization">
<Form.Dropdown options={@roles}>
<:option :let={option: option}>
<Moon.Icon :if={option} name={option[:icon]} />
{option[:key] || "Please select role"}
</:option>
</Form.Dropdown>
</Form.Field>
</Form>
<Form for={@changeset1} class="w-full" change="change1" id="user_very_custom">
<Form.Field field={:role} label="Deep customization">
<Dropdown id="my-custom-dropdown">
<Dropdown.Select class="rounded-full bg-chichi/10">
[<.icon_and_title
option={Enum.find(@roles, &(&1[:value] == to_form(@changeset1)[:role].value))}
prompt="Select role"
/>]
</Dropdown.Select>
<Dropdown.Options class="rounded-none my-0 shadow-chichi">
<Form.Radio.Button
:for={o <- @roles}
class="p-2 hover:bg-heles"
value={o[:value]}
disabled={o[:disabled]}
>
<.icon_and_title option={o} />
<Form.Radio.Indicator />
</Form.Radio.Button>
</Dropdown.Options>
</Dropdown>
</Form.Field>
</Form>
</div>
"""
end
def code() do
"""
alias MoonWeb.Schema.User
alias Moon.Design.Form
alias Moon.Design.Dropdown
prop(roles, :list, default: User.available_roles_with_icon())
prop(changeset1, :any, default: User.changeset(%User{}))
prop(changeset2, :any, default: User.changeset(%User{}))
def handle_event("change" <> num, params, socket) do
changeset = User.changeset(%User{}, Map.get(params, "user", %{}))
{:noreply, assign(socket, "changeset\#{num}": changeset)}
end
defp icon_and_title(assigns = %{option: nil}), do: ~F"{@prompt}"
defp icon_and_title(assigns), do: ~F"<Moon.Icon name={@option[:icon]} /> {@option[:key]}"
def render(assigns) do
~F\"""
<div class="w-full flex flex-col lg:flex-row gap-2 justify-between">
<Form for={@changeset2} class="w-full" change="change2" id="user_bit_custom">
<Form.Field field={:role} label="Light customization">
<Form.Dropdown options={@roles}>
<:option :let={option: option}>
<Moon.Icon :if={option} name={option[:icon]} />
{option[:key] || "Please select role"}
</:option>
</Form.Dropdown>
</Form.Field>
</Form>
<Form for={@changeset1} class="w-full" change="change1" id="user_very_custom">
<Form.Field field={:role} label="Deep customization">
<Dropdown id="my-custom-dropdown">
<Dropdown.Select class="rounded-full bg-chichi/10">
[<.icon_and_title
option={Enum.find(@roles, &(&1[:value] == to_form(@changeset1)[:role].value))}
prompt="Select role"
/>]
</Dropdown.Select>
<Dropdown.Options class="rounded-none my-0 shadow-chichi">
<Form.Radio.Button
:for={o <- @roles}
class="p-2 hover:bg-heles"
value={o[:value]}
disabled={o[:disabled]}
>
<Form.Radio.Indicator />
<.icon_and_title option={o} />
</Form.Radio.Button>
</Dropdown.Options>
</Dropdown>
</Form.Field>
</Form>
</div>
\"""
end
"""
end
end