Packages
moon
2.90.3
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.ex
defmodule Moon.Components.Select do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.FieldLabel
prop(field, :atom)
prop(label, :string)
prop(options, :any, default: [])
prop(value, :any)
prop(prompt, :string)
prop(error, :string)
prop(rounded, :boolean, default: true)
prop(disabled, :boolean)
prop(required, :boolean)
prop(flex, :boolean)
prop(input_grow, :boolean)
prop(icon, :string)
prop(full_width, :boolean)
prop(class, :string)
data(select, :any)
data(options_with_selected, :list)
def render(assigns) do
options_with_selected =
Enum.map(assigns.options, fn row ->
[
key: row[:key],
value: row[:value],
selected: row[:value] == assigns.value,
disabled: row[:disabled]
]
end)
assigns = assign(assigns, options_with_selected: options_with_selected)
select = ~F"""
<Surface.Components.Form.Select
class={
"text-trunks pr-3.5 bg-no-repeat bg-goku hover:bg-goku
hover:cursor-pointer focus:cursor-pointer border border-solid
border-beerus focus:text-bulma disabled:cursor-not-allowed focus:border-piccolo focus:outline-none",
"rounded-moon-s-sm": @rounded,
"#{@class}": true
}
field={@field}
options={@options_with_selected}
opts={[prompt: @prompt, disabled: @disabled]}
/>
"""
assigns = assign(assigns, select: select)
~F"""
{#if @label}
<FieldLabel text={@label}>
<div class="relative mt-2">
{@select}
</div>
</FieldLabel>
{#else}
{@select}
{/if}
"""
end
end