Class: PhlexKit::InputOtp

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/input_otp/input_otp.rb

Overview

One-time-code input, ported from shadcn/ui's InputOTP (the input-otp npm lib is replaced by the phlex-kit--input-otp controller: per-slot typing with auto-advance, backspace retreat, paste distribution, arrow movement). The hidden input carries the joined value under name:. Compose InputOtp > InputOtpGroup(InputOtpSlot…) [+ InputOtpSeparator + more groups]; slot count must total length:. .pk-input-otp* (input_otp.css).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(length: 6, name: nil, value: nil, label: "One-time code", **attrs) ⇒ InputOtp

Returns a new instance of InputOtp.



9
10
11
12
13
14
15
 
# File 'app/components/phlex_kit/input_otp/input_otp.rb', line 9

def initialize(length: 6, name: nil, value: nil, label: "One-time code", **attrs)
  @length = length
  @name = name
  @value = value
  @label = label
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
# File 'app/components/phlex_kit/input_otp/input_otp.rb', line 17

def view_template(&block)
  div(**mix({
    class: "pk-input-otp",
    role: "group",
    aria: { label: @label },
    data: {
      controller: "phlex-kit--input-otp",
      phlex_kit__input_otp_length_value: @length
    }
  }, @attrs)) do
    input(type: :hidden, name: @name, value: @value, data: { phlex_kit__input_otp_target: "value" }) if @name
    yield if block
  end
end