Packages
moon
2.78.2
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/design/dropdown/options.ex
defmodule Moon.Design.Dropdown.Options do
@moduledoc "Options list for the Dropdown component"
use Moon.StatelessComponent
import Moon.Helpers.MakeList
import Moon.Helpers.Positions
@doc "Value of the selected option(s)"
prop(value, :any, from_context: :value)
@doc "On option click event, in most cases got from context"
prop(on_change, :event, from_context: :on_change)
@doc "If the optionlist is open, got from context"
prop(is_open, :boolean, from_context: :is_open)
@doc "Size of the options"
prop(size, :string, values!: ~w(sm md lg), default: "md")
@doc "Additional CSS classes for the div"
prop(class, :css_class)
@doc "Specifies the position of the dropdown"
prop(position, :string, values: position_list())
@doc "Additional values to be passed"
prop(values, :map, from_context: :values)
@doc "List of the options. Used when no option slot is given "
prop(titles, :list, default: [])
@doc "Option module"
prop(option_module, :atom, default: Moon.Design.Dropdown.Option)
@doc "Data-testid attribute for div"
prop(testid, :string)
@doc "Id attribute for div"
prop(id, :string)
slot(option)
slot(default)
slot(header)
slot(footer)
def render(assigns) do
~F"""
<div
class={merge([
"flex flex-col absolute z-[99]",
"p-1 rounded-moon-s-md box-border bg-goku shadow-moon-lg overflow-y-auto focus:outline-none",
(@position && position_class(@position)) || "w-full top-full my-2",
@class,
hidden: !@is_open,
"p-0": slot_assigned?(:header) || slot_assigned?(:footer)
])}
{=@id}
data-testid={@testid}
role="listbox"
>
<#slot {@header} />
{#if slot_assigned?(:option)}
{#for {option, index} <- Enum.with_index(make_list(@option))}
<#slot
{option}
context_put={
is_selected: Enum.member?(make_list(@value), option.value || "#{index}"),
size: @size,
on_click: @on_change,
value: index,
values: @values
}
/>
{/for}
{#else}
<.moon
:for={title <- @titles}
module={@option_module}
is_selected={Enum.member?(make_list(@value), title)}
{=@size}
on_click={@on_change}
value={title}
values={@values}
>{title}</.moon>
{/if}
<#slot context_put={
size: @size,
on_click: @on_change,
values: @values
} />
<#slot {@footer} />
</div>
"""
end
end