Class: UI::InputOtp

Inherits:
Phlex::HTML
  • Object
show all
Includes:
InputOtpBehavior
Defined in:
app/components/ui/input_otp.rb

Overview

InputOtp - Phlex implementation

Accessible one-time password container component. Supports both composition (with Group/Slot/Separator) and auto-generation.

Examples:

With composition

render UI::InputOtp.new(length: 6) do
  render UI::Group.new do
    render UI::Slot.new(index: 0)
  end
end

Auto-generated

render UI::InputOtp.new(length: 6)

Instance Method Summary collapse

Methods included from InputOtpBehavior

#input_otp_classes, #input_otp_data_attributes, #input_otp_html_attributes

Constructor Details

#initialize(length: 6, pattern: "\\d", name: nil, id: nil, disabled: false, classes: "", **attributes) ⇒ InputOtp

Returns a new instance of InputOtp.

Parameters:

  • length (Integer) (defaults to: 6) —

    Maximum number of OTP characters

  • pattern (String) (defaults to: "\\d") —

    Regex pattern for valid characters (default: digits only)

  • name (String) (defaults to: nil) —

    Form input name

  • id (String) (defaults to: nil) —

    HTML id attribute

  • disabled (Boolean) (defaults to: false) —

    Whether inputs are disabled

  • classes (String) (defaults to: "") —

    Additional CSS classes

  • attributes (Hash) —

    Additional HTML attributes



27
28
29
30
31
32
33
34
35
 
# File 'app/components/ui/input_otp.rb', line 27

def initialize(length: 6, pattern: "\\d", name: nil, id: nil, disabled: false, classes: "", **attributes)
  @length = length
  @pattern = pattern
  @name = name
  @id = id
  @disabled = disabled
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'app/components/ui/input_otp.rb', line 37

def view_template(&block)
  div(**input_otp_html_attributes.merge(@attributes)) do
    if block_given?
      yield
    else
      # Auto-generate inputs wrapped in Group
      render Group.new do
        @length.times do |i|
          render Slot.new(
            index: i,
            name: @name ? "#{@name}[#{i}]" : nil,
            id: @id ? "#{@id}_#{i}" : nil,
            disabled: @disabled
          )
        end
      end
    end
  end
end