Class: LightningUiKit::InputOtpComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/lightning_ui_kit/input_otp_component.rb

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(name:, length: 6, value: "", form: nil, numeric: true, **options) ⇒ InputOtpComponent

Returns a new instance of InputOtpComponent.



2
3
4
5
6
7
8
9
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 2

def initialize(name:, length: 6, value: "", form: nil, numeric: true, **options)
  @name = name
  @length = length
  @value = value.to_s
  @form = form
  @numeric = numeric
  @options = options
end

Instance Attribute Details

#length ⇒ Object (readonly)

Returns the value of attribute length.



11
12
13
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 11

def length
  @length
end

#numeric ⇒ Object (readonly)

Returns the value of attribute numeric.



11
12
13
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 11

def numeric
  @numeric
end

Instance Method Details

#classes ⇒ Object 



23
24
25
26
27
28
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 23

def classes
  merge_classes([
    "lui:flex lui:items-center lui:gap-2",
    @options[:class]
  ].compact.join(" "))
end

#data ⇒ Object 



34
35
36
37
38
39
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 34

def data
  {
    controller: "lui-otp",
    lui_otp_length_value: @length
  }.merge(@options[:data] || {})
end

#digit_at(index) ⇒ Object 



19
20
21
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 19

def digit_at(index)
  @value[index]
end

#input_name ⇒ Object 



13
14
15
16
17
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 13

def input_name
  return @name unless @form

  "#{@form.object_name}[#{@name}]"
end

#slot_classes ⇒ Object 



30
31
32
 
# File 'app/components/lightning_ui_kit/input_otp_component.rb', line 30

def slot_classes
  "lui:size-10 lui:rounded-md lui:border lui:border-border lui:bg-surface-input lui:text-center lui:text-base lui:font-medium lui:text-foreground lui:outline-none lui:transition-colors lui:focus:border-interactive lui:focus:ring-2 lui:focus:ring-focus/40"
end