Packages
moon
2.72.4
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/design/dropdown/Input.ex
defmodule Moon.Design.Dropdown.Input do
@moduledoc "Element that triggers Dropdown component, renders as a HTML input inside div with some addons"
use Moon.StatelessComponent, slot: "trigger"
@doc "Data-testid attribute for html tag"
prop(testid, :string)
@doc "Id attribute for html tag"
prop(id, :string)
@doc "Additional CSS classes for the html tag"
prop(class, :css_class)
@doc "Additional classes for the <input> tag in case of floating label or Group"
prop(field_class, :css_class, from_context: :field_class)
@doc "Text to be shown when no value given"
prop(placeholder, :string)
@doc "Value to be shown"
prop(value, :string)
@doc "Some additional styling will be set to indicate field is iinvalid"
prop(error, :boolean, from_context: :error)
@doc "Site of the select"
prop(size, :string, values!: ~w(sm md lg), from_context: :size)
@doc "If the item should be marked as disabled"
prop(disabled, :boolean)
@doc "Dropdown opening action, only from context"
prop(open_me, :event, from_context: :open_me)
@doc "Actually - on_keyup event for the input, use it for filter options with new user input"
prop(on_keyup, :event)
@doc "Event that fired when trigger is clicked"
prop(on_trigger, :event, from_context: :on_trigger)
@doc "If the open indicator is active or not"
prop(is_open, :boolean, from_context: :is_open)
@doc "Some buttons and icons over the input"
slot(default)
def render(assigns) do
~F"""
<div class="relative w-full">
<input
{=@value}
{=@id}
{=@placeholder}
data-testid={@testid}
:on-keyup={@on_keyup}
:on-focus={@open_me}
{=@error}
{=@disabled}
autocomplete="off"
class={"moon-comboinput", @field_class, @class}
/>
<#slot />
</div>
"""
end
end