Packages
moon
2.86.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/password_input.ex
defmodule Moon.Components.PasswordInput do
@moduledoc false
use Moon.StatefulComponent
alias Moon.Components.Deprecated.TextInput
data(hidden, :boolean, default: true)
prop(field, :atom)
prop(label, :string)
prop(value, :string)
prop(placeholder, :string)
prop(error, :string)
prop(rounded, :boolean)
prop(disabled, :boolean)
prop(required, :boolean)
prop(class, :string)
prop(focus, :event)
prop(blur, :event)
prop(background_color, :string, values: Moon.colors(), default: "goku")
prop(size, :string, values: ["medium", "large"], default: "large")
slot(left_icon)
def render(assigns) do
# the reason for if else is left_icon,
# surface currently does not support conditionals on slots,
# but hopefully in 0.17 liveview it works
if slot_assigned?(:left_icon) do
~F"""
<TextInput
type={@hidden && "password"}
{=@field}
{=@label}
{=@value}
{=@placeholder}
{=@error}
{=@rounded}
{=@disabled}
{=@required}
{=@class}
{=@focus}
{=@blur}
{=@background_color}
{=@size}
>
<:left_icon>
<#slot {@left_icon} />
</:left_icon>
<:right_icon>
<div style="font-size: 1.2em">
{#if @hidden}
<Moon.Icons.ControlsEyeCrossed click="show" />
{/if}
{#if !@hidden}
<Moon.Icons.ControlsEye click="hide" />
{/if}
</div>
</:right_icon>
</TextInput>
"""
else
~F"""
<TextInput
type={@hidden && "password"}
{=@field}
{=@label}
{=@value}
{=@placeholder}
{=@error}
{=@rounded}
{=@disabled}
{=@required}
{=@class}
{=@focus}
{=@blur}
{=@background_color}
{=@size}
>
<:right_icon>
<div style="font-size: 1.2em">
{#if @hidden}
<Moon.Icons.ControlsEyeCrossed click="show" />
{/if}
{#if !@hidden}
<Moon.Icons.ControlsEye click="hide" />
{/if}
</div>
</:right_icon>
</TextInput>
"""
end
end
def handle_event("show", _, socket) do
{:noreply, assign(socket, hidden: false)}
end
def handle_event("hide", _, socket) do
{:noreply, assign(socket, hidden: true)}
end
end