Module: UI::ToggleGroupItemBehavior

Included in:
ToggleGroupItem, ToggleGroupItemComponent
Defined in:
app/behaviors/ui/toggle_group_item_behavior.rb

Overview

ToggleGroupItemBehavior

Shared behavior for ToggleGroupItem component across ERB, ViewComponent, and Phlex implementations. This module provides consistent styling for items within a toggle group, inheriting variant/size from parent.

Instance Method Summary collapse

Instance Method Details

#toggle_group_item_classes ⇒ Object

Returns combined CSS classes for the toggle group item



40
41
42
43
44
45
46
47
48
49
 
# File 'app/behaviors/ui/toggle_group_item_behavior.rb', line 40

def toggle_group_item_classes
  classes_value = respond_to?(:classes, true) ? classes : @classes
  TailwindMerge::Merger.new.merge([
    toggle_group_item_base_classes,
    toggle_group_item_variant_classes,
    toggle_group_item_size_classes,
    toggle_group_item_spacing_classes,
    classes_value
  ].compact.join(" "))
end

#toggle_group_item_html_attributes ⇒ Object

Returns HTML attributes for the toggle group item element



11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
# File 'app/behaviors/ui/toggle_group_item_behavior.rb', line 11

def toggle_group_item_html_attributes
  attrs = {
    class: toggle_group_item_classes,
    type: "button",
    role: (@group_type == "single") ? "radio" : "button",
    disabled: @disabled ? true : nil,
    "aria-pressed": if @group_type == "multiple"
                      @pressed ? "true" : "false"
                    end,
    "aria-checked": if @group_type == "single"
                      @pressed ? "true" : "false"
                    end,
    data: {
      "ui--toggle-group-target": "item",
      action: "click->ui--toggle-group#toggle",
      value: @value,
      state: @pressed ? "on" : "off"
    }
  }

  # Add state attribute for CSS targeting
  attrs[:"data-state"] = @pressed ? "on" : "off"
  attrs[:"data-disabled"] = "" if @disabled
  attrs[:"data-spacing"] = @spacing.to_s if @spacing

  attrs.compact
end