Packages
moon
2.79.2
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/deprecated/text_input.ex
defmodule Moon.Components.Deprecated.TextInput do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.FieldLabel
prop(field, :atom)
prop(label, :string)
prop(type, :string,
default: "text",
values: [
"date",
"datetime-local",
"email",
"number",
"password",
"search",
"tel",
"text",
"url",
"time",
"url"
]
)
prop(value, :string)
prop(placeholder, :string)
prop(error, :string)
prop(rounded, :boolean)
prop(disabled, :boolean)
prop(required, :boolean)
prop(class, :css_class)
prop(focus, :event)
prop(keydown, :event)
prop(keyup, :event)
prop(blur, :event)
prop(step, :string, default: "1")
prop(background_color, :string, values: Moon.colors(), default: "goku")
prop(size, :string, values: ["medium", "large"], default: "large")
prop(border_color_class, :string)
prop(states_class, :string)
slot(left_icon)
slot(right_icon)
slot(hint_text)
def render(assigns) do
text_input = ~F"""
<div class="relative">
{#if slot_assigned?(:left_icon)}
<div class="absolute inset-y-0 left-0 pl-4 flex items-center text-trunks">
<#slot {@left_icon} />
</div>
{/if}
{#if slot_assigned?(:right_icon)}
<div class="absolute inset-y-0 right-0 pr-4 flex items-center text-trunks">
<#slot {@right_icon} />
</div>
{/if}
<Surface.Components.Form.TextInput
class={
Moon.Components.FieldBorder.get_default_class(),
@border_color_class || Moon.Components.FieldBorder.get_default_border_color_class(),
@states_class || Moon.Components.FieldBorder.get_default_states_class(),
"h-10 text-moon-14 px-3": @size == "medium",
"h-12 text-moon-16 px-4": @size == "large",
"pl-11": slot_assigned?(:left_icon),
"pr-11": slot_assigned?(:right_icon),
"border-chichi": @error,
"#{@class}": true,
"bg-#{@background_color}": true
}
field={@field}
opts={
placeholder: @placeholder,
disabled: @disabled,
required: @required && !@disabled,
type: @type,
"data-lpignore": "true",
step: @step
}
value={@value}
focus={@focus}
blur={@blur}
keydown={@keydown}
keyup={@keyup}
/>
{#if slot_assigned?(:hint_text)}
<div class="mt-2 ml-2 relative text-trunks">
<#slot {@hint_text} />
</div>
{/if}
</div>
"""
~F"""
{#if @label}
<FieldLabel text={@label}>
<div class="mt-2 relative">
{text_input}
</div>
</FieldLabel>
{#else}
{text_input}
{/if}
"""
end
end