Class: Shadcn::InputOtp::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/input_otp/component.rb

Overview

Port of registry/new-york-v4/ui/input-otp.tsx

Upstream builds this on the input-otp package, and this port does not. Measured: of its 715 lines, input-otp.tsx uses the root component and, per box, three values — char, isActive and hasFakeCaret. The rule behind them is six lines (input.tsx:596-618), and the mechanism under it is one real <input> laid invisibly over the boxes, which is what makes typing, paste, backspace, the arrow keys and a one-time-code autofill the browser's problem rather than ours.

What the 715 lines mostly are is the part that cannot be ported by reading: 21 of them name Safari, iOS, a password manager or a selection quirk. features/input-otp.md says which of those this port answers and which it does not.

The shape is upstream's, read from the rendered demo rather than from the TSX, which shows none of it: the boxes come first, and the input sits over them in an absolutely positioned layer.

Constant Summary collapse

INPUT_CLASSES =

Everything the input needs to be a real one. disabled:cursor-not-allowed is upstream's class for it; the rest of its look is a rule in shadcn.css, because it is a technique rather than a style — see there.

"disabled:cursor-not-allowed"

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(max_length: 6, name: nil, value: nil, disabled: false, pattern: nil, autofocus: false, input: {}, **attributes) ⇒ Component

Returns a new instance of Component.



37
38
39
40
41
42
43
44
45
46
47
 
# File 'app/components/shadcn/input_otp/component.rb', line 37

def initialize(max_length: 6, name: nil, value: nil, disabled: false, pattern: nil,
               autofocus: false, input: {}, **attributes)
  @max_length = max_length.to_i
  @name = name
  @value = value.to_s
  @disabled = disabled
  @pattern = pattern
  @autofocus = autofocus
  @input_attributes = input
  super(**attributes)
end

Instance Attribute Details

#autofocus ⇒ Object (readonly)

Returns the value of attribute autofocus.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def autofocus
  @autofocus
end

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def disabled
  @disabled
end

#input_attributes ⇒ Object (readonly)

Returns the value of attribute input_attributes.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def input_attributes
  @input_attributes
end

#max_length ⇒ Object (readonly)

Returns the value of attribute max_length.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def max_length
  @max_length
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def name
  @name
end

#pattern ⇒ Object (readonly)

Returns the value of attribute pattern.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def pattern
  @pattern
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



35
36
37
 
# File 'app/components/shadcn/input_otp/component.rb', line 35

def value
  @value
end

Instance Method Details

#call ⇒ Object 



57
58
59
 
# File 'app/components/shadcn/input_otp/component.rb', line 57

def call
  render_element(body: safe_join([ content, overlay ]))
end

#element_attributes(**defaults) ⇒ Object 



49
50
51
52
53
54
55
 
# File 'app/components/shadcn/input_otp/component.rb', line 49

def element_attributes(**defaults)
  super(**{
    style: merged_style("position:relative"),
    "data-controller" => "shadcn--input-otp",
    "data-shadcn--input-otp-length-value" => max_length
  }.merge(defaults))
end