Packages
moon
2.82.0
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/text_input/input.ex
defmodule Moon.Components.TextInput.Input do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.TextInput.Utils
prop(id, :string)
prop(field, :atom)
data(placeholder, :string, from_context: {Moon.Components.TextInput, :placeholder})
data(disabled, :boolean, from_context: {Moon.Components.TextInput, :disabled})
data(required, :boolean, from_context: {Moon.Components.TextInput, :required})
data(type, :string, from_context: {Moon.Components.TextInput, :type})
data(step, :string, from_context: {Moon.Components.TextInput, :step})
prop(min, :string, from_context: {Moon.Components.TextInput, :min})
prop(max, :string, from_context: {Moon.Components.TextInput, :max})
data(readonly, :boolean, from_context: {Moon.Components.TextInput, :readonly})
data(value, :string, from_context: {Moon.Components.TextInput, :value})
data(size, :string, from_context: {Moon.Components.TextInput, :size})
data(is_error, :boolean, from_context: {Moon.Components.TextInput, :is_error})
data(background_color, :string, from_context: {Moon.Components.TextInput, :background_color})
data(label, :string, from_context: {Moon.Components.TextInput, :label})
data(focus, :event, from_context: {Moon.Components.TextInput, :focus})
data(keyup, :event, from_context: {Moon.Components.TextInput, :keyup})
data(keydown, :event, from_context: {Moon.Components.TextInput, :keydown})
data(blur, :event, from_context: {Moon.Components.TextInput, :blur})
data(has_left_icon, :boolean, from_context: {Moon.Components.TextInput, :has_left_icon})
data(has_right_icon, :boolean, from_context: {Moon.Components.TextInput, :has_right_icon})
def render(assigns) do
~F"""
<Surface.Components.Form.TextInput
{=@id}
{=@field}
opts={
placeholder: @placeholder,
disabled: @disabled,
required: @required && !@disabled,
type: @type,
"data-lpignore": "true",
step: @step,
min: @min,
max: @max,
readonly: @readonly
}
{=@value}
class={
"focus:ring-0 border-0",
"block w-full max-w-full py-0 px-4 m-0 appearance-none",
"text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
"shadow-input hover:shadow-input-hov",
"focus:shadow-input-focus focus:outline-none",
"before:box-border after:box-border",
"placeholder:text-trunks placeholder:opacity placeholder:transition-opacity placeholder:delay-75",
"read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
"input-dt-shared",
"invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
Utils.get_size_styles(@size),
get_class_for_date_type(@type),
@background_color,
"bg-#{@background_color}",
"ltr:input-t rtl:input-t-rtl": @type == "time",
"input-number-clear": @type == "number",
"shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
"bg-transparent": !@background_color,
"input-xl-dt-shared": @size == "xl",
"input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @label,
"input-lg-dt-shared": @size == "lg",
"pl-12": @has_left_icon,
"pr-12": @has_right_icon
}
{=@focus}
{=@keyup}
{=@keydown}
{=@blur}
/>
"""
end
defp get_class_for_date_type(type) do
cond do
type in ["date", "month"] -> "ltr:input-d rtl:input-d-rtl"
type == "datetime-local" -> "ltr:input-d rtl:input-dt-local-rtl"
true -> ""
end
end
end