Packages
moon
2.80.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/design/dropdown/select.ex
defmodule Moon.Design.Dropdown.Select do
@moduledoc "Element that triggers Dropdown component, renders as a button"
use Moon.StatelessComponent, slot: "trigger"
alias Moon.Icon
alias Moon.Design.Dropdown.Badge
@doc "Data-testid attribute for html tag"
prop(testid, :string)
@doc "Id attribute for html tag"
prop(id, :string)
@doc "Additional CSS classes for the html tag"
prop(class, :css_class)
@doc "Text to be shown when no value given"
prop(prompt, :string, default: "...")
@doc "Value to be shown"
prop(value, :string)
@doc "Badge to show selected items count or smth else"
prop(badge, :integer)
@doc "Some additional styling will be set to indicate field is iinvalid"
prop(error, :boolean, from_context: :error)
@doc "If the open indicator is active or not"
prop(is_open, :boolean, from_context: :is_open)
@doc "Site of the select"
prop(size, :string, values!: ~w(sm md lg), from_context: :size)
@doc "If the item should be marked as disabled"
prop(disabled, :boolean, from_context: :disabled)
@doc "Event that fired when trigger is clicked"
prop(on_click, :event, from_context: :on_trigger)
@doc "Content of the button"
slot(default)
def render(assigns) do
~F"""
<button
{=@id}
data-testid={@testid}
type="button"
:on-click={!@disabled && @on_click}
{=@error}
{=@disabled}
class={merge([
"flex items-center w-full bg-goku border-beerus",
"shadow-input hover:shadow-input-hov transition-shadow duration-200",
"focus:shadow-input-focus focus:outline-none py-0 pe-4 m-0",
"moon-error:shadow-input-err moon-error:hover:shadow-input-err moon-error:focus:shadow-input-err",
[
"h-8 leading-8 rounded-moon-i-xs text-moon-14 ps-2": @size == "sm",
"h-10 leading-10 rounded-moon-i-sm text-moon-16 ps-2 ": !(@size in ~w(sm lg)),
"h-12 leading-[3rem] rounded-moon-i-sm text-moon-16 ps-3": @size == "lg",
"opacity-60 outline-0 border-none cursor-not-allowed hover:shadow-input focus:shadow-input":
@disabled
],
get_config(:default_class),
@class
])}
>
<Badge :if={@badge && @badge > 0} {=@size} count={@badge} />
<span class={merge([
"overflow-hidden whitespace-nowrap text-trunks ps-2",
"text-bulma": !!@value
])}>
<#slot>{@value || @prompt}</#slot>
</span>
<Icon
name="controls_chevron_down"
class={"text-trunks flex-shrink-0 transition-transform ltr:ml-auto rtl:mr-auto", "rotate-180": @is_open}
/>
</button>
"""
end
end