Packages
moon
2.76.1
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_inner_label.ex
defmodule Moon.Components.TextInput.TextInputInnerLabel do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.TextInput.Container
alias Moon.Components.TextInput.Input
alias Moon.Components.TextInput.Utils
alias Moon.Components.ErrorTag
prop(class, :css_class)
prop(id, :string)
prop(field, :atom)
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(background_color, :string, from_context: {Moon.Components.TextInput, :background_color})
data(is_error, :boolean, from_context: {Moon.Components.TextInput, :is_error})
data(label, :string, from_context: {Moon.Components.TextInput, :label})
data(use_error_tag, :boolean, from_context: {Moon.Components.TextInput, :use_error_tag})
data(has_left_icon, :boolean, from_context: {Moon.Components.TextInput, :has_left_icon})
def render(assigns) do
~F"""
<Container {=@disabled} {=@size} {=@class}>
<div class={
@class,
"w-full max-w-full relative",
Utils.get_border_radius(@size),
"bg-transparent": !@background_color,
"bg-#{@background_color}": @background_color
}>
<Input {=@id} {=@field} />
<label
:if={@label}
class={
"absolute text-moon-12 leading-3 text-trunks top-3 z-20 transition-all ease-in-out duration-200 pointer-events-none",
"rtl:right-4",
"ltr:left-4",
"opacity-60 cursor-not-allowed": @disabled,
"pl-8": @has_left_icon
}
>
{@label}
</label>
<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 />
<div class="inline-block mt-2 text-moon-12" :if={@use_error_tag && @is_error}>
<ErrorTag {=@field} />
</div>
</Container>
"""
end
end