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/components/select/single_select/value/selected_value.ex
defmodule Moon.Components.Select.SingleSelect.Value.SelectedValue do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.Select.SingleSelect.Dropdown.Icon
alias Moon.Components.Select.Dropdown.Icon
alias Moon.Components.Select.SingleSelect.Value.SelectedValue.NoInnerLabelNoIconsContent
alias Moon.Components.Select.SingleSelect.Value.SelectedValue.InnerLabelNoIconsContent
alias Moon.Components.Select.SingleSelect.Value.SelectedValue.MainContent
alias Moon.Components.Select.SingleSelect.Value.SelectedValue.InnerLabelContent
prop(select_id, :string)
prop(option, :any)
prop(label, :string, default: "")
prop(placeholder, :string, default: "")
prop(size, :string)
prop(class, :css_class, default: "")
def render(assigns) do
has_value = has_value(assigns.option)
has_left_icon = has_value && not is_nil(assigns.option[:left_icon])
has_right_icon = has_value && not is_nil(assigns.option[:right_icon])
has_icons = has_left_icon or has_right_icon
is_label = not is_nil(assigns.label)
is_inner_label = is_label and assigns.size == "xl"
~F"""
<div class={
"h-fit relative flex",
@class
}>
{#if has_value}
{#if is_inner_label or has_icons}
<div class={
"flex flex-col w-full items-center text-moon-16",
"ps-6": has_left_icon,
"pe-2": has_left_icon && !has_right_icon,
"pe-6": has_right_icon
}>
<InnerLabelContent :if={is_inner_label} {=@label} {=has_icons} />
<MainContent label={@option.label} {=has_icons} {=is_inner_label} />
</div>
<div class="absolute top-0 left-0 z-20 w-full h-full flex items-center bg-transparent justify-between">
<div class="justify-self-start items-center">
<Icon class="flex" icon={@option[:left_icon]} :if={has_left_icon} />
</div>
<div class="justify-self-end me-2 items-center">
<Icon class="flex" icon={@option[:right_icon]} :if={has_right_icon} />
</div>
</div>
{#else}
<InnerLabelNoIconsContent label={@option.label} />
{/if}
{#else}
<NoInnerLabelNoIconsContent {=@placeholder} />
{/if}
</div>
"""
end
defp has_value(option) do
not is_nil(option) and option != "" and option.label != nil and option.label != 0
end
end