Packages
moon
2.79.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/dropdown.ex
defmodule Moon.Components.Dropdown do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Assets.Icons.IconZoom
alias Moon.Components.Form
alias Moon.Components.Deprecated.TextInput
prop(on_search_change, :event)
prop(search_placeholder, :string)
prop(search_name, :string)
prop(search_value, :string)
prop(class, :string)
slot(default)
def render(assigns) do
~F"""
<div class="box-content bg-goku h-auto rounded-lg #{@class}">
<div class="relative" :if={@on_search_change}>
<IconZoom class="absolute top-4 left-4" />
<Form for={@search_name} change={@on_search_change}>
<TextInput
class="outline-none bg-transparent pl-12 p-4 w-full"
type="search"
placeholder={@search_placeholder}
field={:value}
value={@search_value}
/>
</Form>
</div>
<#slot />
</div>
"""
end
end
defmodule Moon.Components.Dropdown.Item do
@moduledoc false
use Moon.StatelessComponent
prop(click, :event)
prop(item_id, :number)
slot(default)
def render(assigns) do
~F"""
<div
class="p-2 pl-3 pr-3 hover:bg-hover rounded-md"
:on-click={@click}
phx-value-item_id={@item_id}
>
<#slot />
</div>
"""
end
end
defmodule Moon.Components.Dropdown.CheckboxItem do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.Checkbox
prop(click, :event)
prop(item_id, :number)
prop(checked, :boolean)
slot(default)
def render(assigns) do
~F"""
<div
class="p-2 pl-3 pr-3 hover:bg-hover rounded-md relative"
:on-click={@click}
phx-value-item_id={@item_id}
>
<#slot />
<Checkbox class="absolute right-0" checked={@checked} />
</div>
"""
end
end