Packages
moon
2.73.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/subcomponents/text_input_basic.ex
defmodule Moon.Components.TextInput.TextInputBasic do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.TextInput.Container
alias Moon.Components.TextInput.Input
alias Moon.Components.ErrorTag
alias Moon.Components.TextInput.Utils
prop(id, :string)
prop(field, :atom)
prop(class, :css_class)
slot(default)
slot(left_icon_slot)
slot(right_icon_slot)
data(disabled, :boolean, from_context: {Moon.Components.TextInput, :disabled})
data(size, :string, from_context: {Moon.Components.TextInput, :size})
data(label, :string, from_context: {Moon.Components.TextInput, :label})
data(is_error, :boolean, from_context: {Moon.Components.TextInput, :is_error})
data(use_error_tag, :boolean, from_context: {Moon.Components.TextInput, :use_error_tag})
def render(assigns) do
~F"""
<Container {=@disabled} {=@size} {=@class}>
<label
:if={@label}
class={
"block text-moon-16 text-bulma pb-2 pointer-events-none",
"opacity-60 cursor-not-allowed": @disabled
}
>
{@label}
</label>
<div class={
"w-full relative",
Utils.get_height_by_size(@size)
}>
<div class="w-full absolute top-0 left-0 bg-transparent">
<Input {=@id} {=@field} />
</div>
<div class={
"w-full absolute top-0 left-0 z-20 bg-transparent pointer-events-none",
Utils.get_height_by_size(@size)
}>
<div class="w-full h-full flex items-center justify-between px-4 bg-transparent">
<div class="justify-self-start pointer-events-auto"><#slot {@left_icon_slot} /></div>
<div class="justify-self-end pointer-events-auto"><#slot {@right_icon_slot} /></div>
</div>
</div>
</div>
<#slot />
</Container>
<div class="inline-block mt-2 text-moon-12" :if={@use_error_tag && @is_error}>
<ErrorTag {=@field} />
</div>
"""
end
end