Class: LightningUiKit::SwitchComponent

Inherits:
BaseComponent
  • Object
show all
Includes:
Errors, Labelable
Defined in:
app/components/lightning_ui_kit/switch_component.rb

Instance Method Summary collapse

Methods included from Labelable

#effective_label, #render_label?

Methods included from Errors

#error_messages, #has_errors?, #infer_errors_from_association

Methods inherited from BaseComponent

#merge_classes

Methods included from HeroiconHelper

#heroicon

Constructor Details

#initialize(name:, form: nil, label: nil, error: nil, description: nil, enabled: false, disabled: false, **options) ⇒ SwitchComponent

Returns a new instance of SwitchComponent.



5
6
7
8
9
10
11
12
13
14
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 5

def initialize(name:, form: nil, label: nil, error: nil, description: nil, enabled: false, disabled: false, **options)
  @name = name
  @form = form
  @label = label
  @error = error
  @description = description
  @enabled = enabled
  @disabled = disabled
  @options = options
end

Instance Method Details

#button_aria ⇒ Object 



77
78
79
80
81
82
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 77

def button_aria
  {
    checked: @enabled,
    labelledby: (label_id if render_label?)
  }.compact
end

#button_classes ⇒ Object 



53
54
55
56
57
58
59
60
61
62
63
64
65
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 53

def button_classes
  "lui:group lui:relative lui:isolate lui:inline-flex lui:h-6 lui:w-10 lui:cursor-default lui:rounded-full " \
  "lui:p-[3px] lui:sm:h-5 lui:sm:w-8 lui:transition lui:duration-200 lui:ease-in-out " \
  "lui:forced-colors:outline lui:forced-colors:[--switch-bg:Highlight] lui:bg-surface-tertiary lui:ring-1 lui:ring-black/5 lui:ring-inset " \
  "lui:data-checked:bg-(--switch-bg) lui:data-checked:ring-(--switch-bg-ring) lui:focus:outline-hidden lui:data-focus:outline-2 " \
  "lui:data-focus:outline-offset-2 lui:data-focus:outline-focus lui:hover:ring-black/15 lui:hover:data-checked:ring-(--switch-bg-ring) " \
  "lui:data-disabled:bg-surface-tertiary lui:data-disabled:opacity-50 lui:data-disabled:data-checked:bg-surface-tertiary lui:data-disabled:data-checked:ring-black/5 " \
  "lui:[--switch-bg-ring:var(--lui-theme-border-invert)] " \
  "lui:[--switch-bg:var(--lui-theme-surface-invert)] " \
  "lui:[--switch-ring:var(--lui-theme-border-invert)] " \
  "lui:[--switch-shadow:var(--lui-color-black)]/10 " \
  "lui:[--switch:white]"
end

#button_data ⇒ Object 



67
68
69
70
71
72
73
74
75
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 67

def button_data
  {
    slot: "control",
    action: "click->lui-switch#toggle"
  }.tap do |data|
    data[:disabled] = "true" if @disabled
    data[:checked] = "true" if @enabled
  end
end

#classes ⇒ Object 



16
17
18
19
20
21
22
23
24
25
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 16

def classes
  merge_classes([
    "lui:grid lui:grid-cols-[1fr_auto] lui:items-center lui:gap-x-8 lui:gap-y-1 lui:sm:grid-cols-[1fr_auto]",
    "lui:*:data-[slot=control]:col-start-2 lui:*:data-[slot=control]:self-center lui:*:data-[slot=label]:col-start-1",
    "lui:*:data-[slot=label]:row-start-1 lui:*:data-[slot=label]:justify-self-start lui:*:data-[slot=description]:col-start-1",
    "lui:*:data-[slot=description]:row-start-2 lui:has-data-[slot=description]:**:data-[slot=label]:font-medium",
    "lui:*:data-[slot=error]:col-start-1 lui:*:data-[slot=error]:row-start-3",
    @options[:class]
  ].compact.join(" "))
end

#data ⇒ Object 



27
28
29
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 27

def data
  {slot: "field", controller: "lui-switch"}.merge(@options[:data] || {})
end

#description_data ⇒ Object 



41
42
43
44
45
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 41

def description_data
  {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
    data[:disabled] = "true" if @disabled
  end
end

#error_data ⇒ Object 



47
48
49
50
51
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 47

def error_data
  {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
    data[:disabled] = "true" if @disabled
  end
end

#hidden_field_data ⇒ Object 



93
94
95
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 93

def hidden_field_data
  {lui_switch_target: "field"}
end

#knob_classes ⇒ Object 



84
85
86
87
88
89
90
91
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 84

def knob_classes
  "lui:pointer-events-none lui:relative lui:inline-block lui:size-[1.125rem] lui:rounded-full lui:sm:size-3.5 " \
  "lui:translate-x-0 lui:transition lui:duration-200 lui:ease-in-out lui:border lui:border-transparent lui:bg-white " \
  "lui:ring-1 lui:shadow-sm lui:ring-black/5 lui:group-data-checked:bg-(--switch) lui:group-data-checked:shadow-(--switch-shadow) " \
  "lui:group-data-checked:ring-(--switch-ring) lui:group-data-checked:translate-x-4 lui:sm:group-data-checked:translate-x-3 " \
  "lui:group-data-checked:group-data-disabled:bg-white lui:group-data-checked:group-data-disabled:shadow-sm " \
  "lui:group-data-checked:group-data-disabled:ring-black/5"
end

#label_data ⇒ Object 



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

def label_data
  {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
    data[:disabled] = "true" if @disabled
  end
end

#label_id ⇒ Object 



31
32
33
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 31

def label_id
  "#{@name}_label"
end

#render_hidden_field ⇒ Object 



103
104
105
106
107
108
109
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 103

def render_hidden_field
  if @form
    @form.hidden_field(@name, value: @enabled, data: hidden_field_data)
  else
    hidden_field_tag(@name, @enabled, data: hidden_field_data)
  end
end

#render_label ⇒ Object 



97
98
99
100
101
 
# File 'app/components/lightning_ui_kit/switch_component.rb', line 97

def render_label
  return unless render_label?

  tag.label(effective_label, id: label_id, class: "lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6", data: label_data)
end