Packages
moon
2.72.5
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/single_select.ex
# this component will be replaced by Moon.Components.Select.SingleSelect
defmodule Moon.Components.SingleSelect.Item do
@moduledoc false
use Surface.Component, slot: "items"
end
defmodule Moon.Components.SingleSelect do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.SelectTrigger
alias Phoenix.LiveView.JS
prop(id, :string)
prop(on_select, :string)
prop(target, :string)
prop(size, :string, values: ~w(md lg xl), default: "md")
prop(class, :string)
prop(trigger_class, :string)
prop(placeholder, :string, default: "Choose")
# options={[%{label: 'Option 1', value: 1}]}
prop(options, :generator, required: true)
prop(selected_option, :any)
slot(items, generator_prop: :options)
def render(assigns) do
~F"""
<div class={"relative #{@class}"} phx-click-away={hide_listbox(@id)}>
<SelectTrigger
id={"#{@id}-trigger"}
on_click={toggle_listbox(%JS{}, @id)}
class={@trigger_class}
{=@selected_option}
{=@size}
>
<#slot {@items} generator_value={@selected_option} :if={@selected_option}>
{@selected_option.label}
</#slot>
</SelectTrigger>
<ul
class="absolute z-10 w-full px-1 py-2 mt-2 space-y-1 overflow-auto rounded-lg shadow-lg bg-goku max-h-56 focus:outline-none"
tabindex="-1"
role="listbox"
id={"#{@id}-listbox"}
style="display: none;"
>
{#for option <- @options}
<li
class="relative p-3 py-2 pl-3 text-moon-14 rounded-sm cursor-pointer text-bulma hover:bg-gohan"
role="option"
:on-click={select_option(@id, @on_select, @target, option.value)}
>
<#slot {@items, item: option} generator_value={option}>
{option.label}
</#slot>
</li>
{/for}
</ul>
</div>
"""
end
defp toggle_listbox(js, id) do
js
|> JS.toggle(to: "##{id}-listbox")
|> SelectTrigger.toggle_icons(id)
end
defp hide_listbox(id) do
%JS{}
|> JS.hide(to: "##{id}-listbox")
|> SelectTrigger.reset_icons(id)
end
defp select_option(id, event, target, value) do
event
|> JS.push(target: target, value: %{option_value: value})
|> toggle_listbox(id)
end
end