Packages
moon
2.87.3
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/input.ex
defmodule Moon.Design.Form.AuthCode.Input do
@moduledoc false
use Moon.StatelessComponent, slot: "input"
import Phoenix.HTML.Form
import Moon.Helpers.Form
alias Surface.Components.Form.HiddenInput
@doc "Id attribute for DOM element"
prop(id, :string, from_context: :id)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Will be got from AuthCode in most cases"
prop(disabled, :boolean, from_context: :disabled)
@doc "Will be got from AuthCode in most cases"
prop(placeholder, :string, from_context: :placeholder)
@doc "Will be got from AuthCode in most cases"
prop(type, :string, from_context: :type)
@doc "Will be got from AuthCode in most cases"
prop(length, :integer, from_context: :length)
@doc "Name of the field, usually should be taken from context"
prop(field, :atom, from_context: {Surface.Components.Form.Field, :field})
@doc "Form info, usually should be taken from context"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Will be got from AuthCode in most cases"
prop(error, :boolean, from_context: :error)
@doc "Will be got from AuthCode in most cases"
prop(allowed_characters, :string, from_context: :allowed_characters)
@doc "Will be got from AuthCode in most cases"
prop(value, :string, from_context: :value)
def render(assigns) do
~F"""
{#for index <- 0..(@length - 1)}
<input
class={[
merge(
input_classes(assigns) ++
[
"h-[72px] w-full max-w-[48px] rounded-moon-i-sm text-moon-24",
"px-0",
"focus:ring-0",
"focus-visible::shadow-input-focus focus-visible::outline-none",
"moon-error:focus:ring-0 moon-error:text-chichi ",
"invalid:text-chichi ",
"leading-[3.5rem] text-moon-24",
[
"shadow-input focus:shadow-input hover:shadow-input cursor-not-allowed": @disabled
],
@class
]
),
"text-center"
]}
maxlength={@length}
{=@type}
autocomplete="off"
placeholder={String.at(@placeholder, index)}
data-testid={@testid}
error={@error || has_error(@form, @field)}
{...input_attributes(@allowed_characters)}
value={String.at(@value || input_value(@form, @field) || "", index)}
{=@disabled}
aria-label={"Character #{index + 1}"}
/>
{/for}
<HiddenInput {=@id} value={@value} />
"""
end
defp input_attributes("alpha") do
[type: "text", inputmode: "text", pattern: "[a-zA-Z]{1}"]
end
defp input_attributes("alphanumeric") do
[type: "text", inputmode: "text", pattern: "[a-zA-Z0-9]{1}"]
end
defp input_attributes("numeric") do
[type: "tel", inputmode: "numeric", pattern: "[0-9]{1}", min: "0", max: "9"]
end
end