Packages
moon
2.81.4
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/password.ex
defmodule Moon.Components.TextInput.Password do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.TextInput.Utils
prop(id, :string)
prop(field, :atom)
prop(value, :string)
prop(on_keyup, :string)
prop(input_password_id, :string)
prop(type, :string,
values: [
"password",
"text"
],
default: "text"
)
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(readonly, :boolean, from_context: {Moon.Components.TextInput, :readonly})
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(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.PasswordInput
opts={
placeholder: @placeholder,
disabled: @disabled,
required: @required && !@disabled,
"data-lpignore": "true",
readonly: @readonly,
type: @type
}
value={@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),
"shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
"bg-#{@background_color}": @background_color,
"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
}
id={"#{@id}_input"}
keyup={@on_keyup, target: "##{@input_password_id}"}
{=@field}
{=@focus}
{=@keydown}
{=@blur}
/>
"""
end
end