Packages
moon
2.73.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_trigger.ex
defmodule Moon.Components.SelectTrigger do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Icons.{ControlsChevronDown, ControlsChevronUp}
alias Phoenix.LiveView.JS
prop(id, :string)
prop(placeholder, :string, default: "Choose")
prop(selected_option, :any)
prop(size, :string, values: ~w(md lg xl), default: "md")
prop(state, :string, values: ~w(active error disabled))
prop(class, :string)
prop(on_click, :event)
slot(default)
def render(assigns) do
~F"""
<button
class={
"w-full text-left border border-solid rounded border-beerus bg-goku flex items-center focus:border-piccolo active:border-piccolo #{@class}",
"text-moon-14 h-10 px-3": @size == "md",
"text-moon-16 h-12 px-4": @size == "lg",
"text-moon-16 h-14 px-4": @size == "xl",
"text-trunks": is_nil(@selected_option),
"text-bulma": !is_nil(@selected_option)
}
:on-click={@on_click}
>
<div class="grow">
{#if @selected_option}
<#slot />
{#else}
{@placeholder}
{/if}
</div>
<div id={"#{@id}-chevron-down"} class="items-center">
<ControlsChevronDown class="flex-shrink-0 w-6 h-6" color="bulma" />
</div>
<div id={"#{@id}-chevron-up"} class="items-center" style="display: none;">
<ControlsChevronUp class="flex-shrink-0 w-6 h-6" color="bulma" />
</div>
</button>
"""
end
def toggle_icons(js, id) do
js
|> JS.toggle(to: "##{id}-trigger-chevron-up", display: "flex")
|> JS.toggle(to: "##{id}-trigger-chevron-down", display: "flex")
end
def reset_icons(js, id) do
js
|> JS.hide(to: "##{id}-trigger-chevron-up")
|> JS.show(to: "##{id}-trigger-chevron-down", display: "flex")
end
end