Packages
moon
2.76.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/components/single_item_select.ex
defmodule Moon.Components.SingeItemSelect.Item do
@moduledoc false
use Moon.StatelessComponent
prop(on_click, :event)
prop(item_id, :string)
prop(selected, :boolean)
slot(default)
def render(assigns) do
~F"""
<div
class={"p-2 pl-3 pr-3 hover:#{(@selected && "bg-piccolo") || "bg-hover"} rounded-md relative #{@selected && "bg-piccolo"}"}
:on-click={@on_click}
phx-value-selected_item_id={@item_id}
>
<#slot />
</div>
"""
end
end
defmodule Moon.Components.SingeItemSelect do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.SingeItemSelect.Item
prop(on_change, :event)
# this is list of Maps of label and value keys,
# for example: [%{ label: 'Game 1', value: 1 }, %{ label: 'Game 2', value: 2 }]
prop(options, :list)
# this is list of numeric ids, for example: [1, 2]
prop(value, :string)
prop(class, :string)
prop(style, :string)
slot(default)
def render(assigns) do
~F"""
<div class={"bg-goku shadow rounded-lg p-1 overflow-y-scroll #{@class}"} style={@style || ""}>
<#slot />
<div :for={option <- @options}>
<Item item_id={option.value} selected={@value == option.value} on_click={@on_change}>
{option.label}
</Item>
</div>
</div>
"""
end
end