defmodule MoonWeb.Examples.Design.DropdownExample.OptionLayouts do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Dropdown
alias Moon.Components.Chip
alias Moon.Components.Lego
alias Moon.Icons.{
OtherWater,
OtherLightning,
OtherMoon,
OtherSun
}
data(values, :list, default: ["1", "4"])
data(is_open, :boolean, default: false)
# please note - only for checkbox list "countries", bc it have different behaviour
def handle_event("on_change", %{"value" => value}, socket) do
{:noreply,
assign(socket,
is_open: true,
values:
(Enum.member?(socket.assigns.values, value) &&
Enum.filter(socket.assigns.values, &(&1 != value))) || [value | socket.assigns.values]
)}
end
def render(assigns) do
~F"""
sort by
Option 1
Option 2
Option 3
Option 4
Select language
Mandarin Chinese
English
Spanish
Hindi
Bengali
Portuguese
Select countries
Australia
Canada
China
Germany
Hungary
Japan
"""
end
def code() do
"""
data(values, :list, default: ["1", "4"])
data(is_open, :boolean, default: false)
# please note - only for checkbox list "countries", bc it have a bit different behaviour
def handle_event("on_change", %{"value" => value}, socket) do
{:noreply,
assign(socket,
is_open: true,
values:
(Enum.member?(socket.assigns.values, value) &&
Enum.filter(socket.assigns.values, &(&1 != value))) || [value | socket.assigns.values]
)}
end
...
sort by
Option 1
Option 2
Option 3
Option 4
Select language
Mandarin Chinese
English
Spanish
Hindi
Bengali
Portuguese
Select countries
Australia
Canada
China
Germany
Hungary
Japan
"""
end
end