Packages
moon
2.81.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/option.ex
defmodule Moon.Design.Dropdown.Option do
@moduledoc "Single oprion for the dropdown component. Renders as a button"
use Moon.StatelessComponent, slot: "option"
@doc "Data-testid attribute for button"
prop(testid, :string)
@doc "Id attribute for buttons"
prop(id, :string)
@doc "Title to be shown when no default slot is given"
prop(title, :string)
@doc "Additional CSS classes for the button tag"
prop(class, :css_class)
@doc "If the button is disabled"
prop(disabled, :boolean)
@doc "On click event, in most cases got from context"
prop(on_click, :event, from_context: :on_click)
@doc "Value of the option, in most cases got from context"
prop(value, :any, from_context: :value)
@doc "If the option is selected, in most cases got from context"
prop(is_selected, :boolean, from_context: :is_selected)
@doc "Text size & paddings for the option. Is set by Dropdown.Options in most cases"
prop(size, :string, values!: ~w(sm md lg), from_context: :size)
@doc "Additional values to be passed"
prop(values, :map, from_context: :values)
@doc "Inner content of the option"
slot(default)
def render(assigns) do
~F"""
<button
{=@id}
:on-click={@on_click}
{=@value}
:values={@values}
type="button"
role="option"
{=@disabled}
class={merge([
[
"bg-transparent text-moon-14 text-bulma whitespace-nowrap flex",
"focus:outline-none focus:bg-heles cursor-pointer hover:bg-heles transition w-full",
"bg-heles": @is_selected,
"opacity-60 cursor-not-allowed": @disabled,
"h-12 p-3 rounded-moon-i-sm": @size == "lg",
"h-8 py-1 px-2 rounded-moon-i-xs": @size == "sm",
"h-10 py-2 px-3 rounded-moon-i-sm": @size == "md"
],
get_config(:default_class),
@class
])}
data-testid={@testid}
>
<#slot>{@title}</#slot>
</button>
"""
end
end