Packages
moon
2.87.5
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/design/form/auth_code.ex
defmodule Moon.Design.Form.AuthCode do
@moduledoc false
use Moon.StatelessComponent
import Phoenix.HTML.Form
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Number of inputs for inserting single values"
prop(length, :integer, default: 6)
@doc "Puts element in error state"
prop(error, :boolean)
@doc "If true, disables whole AuthCode component"
prop(disabled, :boolean)
@doc "Default placeholder for input elements"
prop(placeholder, :string, default: " ")
@doc "Form info, usually should be taken from context"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Name of the field, usually should be taken from context"
prop(field, :atom, from_context: {Surface.Components.Form.Field, :field})
@doc "Specifies the type of input characters"
prop(allowed_characters, :string,
values!: ["numeric", "alpha", "alphanumeric"],
default: "alphanumeric"
)
@doc "HTML5 type of the input"
prop(type, :string,
values!: [
"password",
"text"
],
default: "text"
)
@doc "Value of input field(s)"
prop(value, :string)
@doc "Input fields of AuthCode component"
slot(input, required: true)
@doc "Hint message of AuthCode component"
slot(hint)
def render(assigns) do
~F"""
<div
id={@id || input_id(@form, @field)}
phx-hook="Authcode"
class={merge([
"flex gap-2",
@class
])}
data-testid={@testid}
>
<#slot
{@input}
context_put={
length: @length,
error: @error,
placeholder: @placeholder,
allowed_characters: @allowed_characters,
type: @type,
value: @value,
disabled: @disabled,
id: "#{@id}-hidden"
}
/>
</div>
<#slot {@hint} />
"""
end
end