Class: LightningUiKit::ToggleGroupComponent

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

Constant Summary collapse

TYPES = 
%i[single multiple].freeze
VARIANTS = 
%i[default outline].freeze
SIZES = 
%i[default sm lg].freeze

Instance Method Summary collapse

Constructor Details

#initialize(type: :single, variant: :default, size: :default, value: nil, **options) ⇒ ToggleGroupComponent

Returns a new instance of ToggleGroupComponent.



8
9
10
11
12
13
14
 
# File 'app/components/lightning_ui_kit/toggle_group_component.rb', line 8

def initialize(type: :single, variant: :default, size: :default, value: nil, **options)
  @type = TYPES.include?(type) ? type : :single
  @variant = VARIANTS.include?(variant) ? variant : :default
  @size = SIZES.include?(size) ? size : :default
  @value = Array(value).map(&:to_s)
  @options = options
end

Instance Method Details

#classes ⇒ Object 



24
25
26
 
# File 'app/components/lightning_ui_kit/toggle_group_component.rb', line 24

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

#data ⇒ Object 



37
38
39
40
41
42
 
# File 'app/components/lightning_ui_kit/toggle_group_component.rb', line 37

def data
  {
    controller: "lui-toggle-group",
    lui_toggle_group_type_value: @type.to_s
  }.merge(@options[:data] || {})
end

#item_classes ⇒ Object 



28
29
30
31
32
33
34
35
 
# File 'app/components/lightning_ui_kit/toggle_group_component.rb', line 28

def item_classes
  base = "lui:inline-flex lui:items-center lui:justify-center lui:gap-2 lui:rounded-md lui:text-sm lui:font-medium lui:whitespace-nowrap lui:cursor-pointer lui:select-none lui:transition-colors " \
    "lui:text-foreground-muted lui:hover:bg-surface-hover lui:hover:text-foreground " \
    "lui:data-[state=on]:bg-surface-hover lui:data-[state=on]:text-foreground " \
    "lui:focus-visible:outline-2 lui:focus-visible:outline-offset-2 lui:focus-visible:outline-focus " \
    "lui:disabled:pointer-events-none lui:disabled:opacity-50"
  [base, variant_classes, size_classes].join(" ")
end

#selected?(item_value) ⇒ Boolean

Returns:

  • (Boolean) 


16
17
18
 
# File 'app/components/lightning_ui_kit/toggle_group_component.rb', line 16

def selected?(item_value)
  @value.include?(item_value.to_s)
end

#state(item_value) ⇒ Object 



20
21
22
 
# File 'app/components/lightning_ui_kit/toggle_group_component.rb', line 20

def state(item_value)
  selected?(item_value) ? "on" : "off"
end