Class: Fluxbit::Form::ToggleComponent

Inherits:
FieldComponent
  • Object
show all
Includes:
Config::Form::ToggleComponent
Defined in:
app/components/fluxbit/form/toggle_component.rb

Overview

The ‘Fluxbit::Form::ToggleComponent` renders a styled switch/toggle (on/off) input. It supports custom label placement, color and sizing options, helper text, and is fully compatible with Rails form builders. Additional options allow you to invert label order, customize colors for checked/unchecked/button states, and provide an extra label via a slot.

Examples:

Basic usage

= render Fluxbit::Form::ToggleComponent.new(name: :enabled, label: "Enabled?")

See Also:

  • For detailed documentation and examples.

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ ToggleComponent

Initializes the toggle component with the given properties.

Parameters:

  • form (ActionView::Helpers::FormBuilder) —

    The form builder (optional, for Rails forms)

  • attribute (Symbol) —

    The model attribute to be used in the form (required if using form builder)

  • id (String) —

    The id of the input element (optional)

  • label (String) —

    The label for the input field (optional)

  • help_text (String) —

    Additional help text for the input field (optional)

  • helper_popover (String) —

    Content for a popover helper (optional)

  • helper_popover_placement (String) —

    Placement of the popover (default: “right”)

  • name (String) —

    Name of the field (required unless using form builder)

  • other_label (String) —

    Additional label, rendered via slot (optional)

  • sizing (Integer) —

    Size index for the toggle (default: config)

  • color (Symbol) —

    Checked toggle color (:default, :success, :failure, :info, :warning, etc)

  • unchecked_color (Symbol) —

    Unchecked toggle color (see config)

  • button_color (Symbol) —

    Color for the toggle button

  • invert_label (Boolean) —

    If true, inverts label/toggle order (default: config)

  • disabled (Boolean) —

    Disables the toggle if true

  • class (String) —

    Additional CSS classes for the input element

  • ... —

    any other HTML attribute supported by <input type=“checkbox”>



37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
# File 'app/components/fluxbit/form/toggle_component.rb', line 37

def initialize(**props)
  super(**props)

  @other_label = props.delete(:other_label)
  @sizing = @props.delete(:sizing) || @@sizing
  @sizing = (styles[:toggle][:sizes].count - 1) if @sizing > (styles[:toggle][:sizes].count - 1)
  @color = valid_color(@props.delete(:color))
  @unchecked_color = options(
    @props.delete(:unchecked_color),
    collection: styles[:toggle][:unchecked].keys,
    default: @@unchecked_color
  )
  @button_color = options(@props.delete(:button_color), collection: styles[:toggle][:button].keys, default: @@button_color)
  @invert_label = options(@props.delete(:invert_label), collection: [ true, false ], default: @@invert_label)

  add to: @props, first_element: true, class: styles[:input]
end

Instance Method Details

#input_class ⇒ Object 



66
67
68
 
# File 'app/components/fluxbit/form/toggle_component.rb', line 66

def input_class
  styles[:input]
end

#label_class ⇒ Object 



62
63
64
 
# File 'app/components/fluxbit/form/toggle_component.rb', line 62

def label_class
  styles[:label]
end

#toggle_class ⇒ Object 



70
71
72
73
74
75
76
77
78
79
80
 
# File 'app/components/fluxbit/form/toggle_component.rb', line 70

def toggle_class
  [
    (@invert_label || @other_label || other_label?) ? styles[:toggle][:invert_label] : nil,
    styles[:toggle][:base],
    styles[:toggle][:unchecked][@unchecked_color],
    styles[:toggle][:checked][@color],
    styles[:toggle][:button][@button_color],
    styles[:toggle][:sizes][@sizing],
    styles[:toggle][:active][(@props[:disabled] ? :off : :on)]
  ].compact.join(" ")
end

#valid_color(color) ⇒ Object 



55
56
57
58
59
60
 
# File 'app/components/fluxbit/form/toggle_component.rb', line 55

def valid_color(color)
  return color if styles[:toggle][:checked].key?(color)
  return :failure if errors.present?

  @@color
end