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, :danger, :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
54
 
# 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]
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#checkbox_without_wrapper ⇒ Object

Renders the checkbox without Rails’ field_with_errors wrapper We handle errors through help_text instead



85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
# File 'app/components/fluxbit/form/toggle_component.rb', line 85

def checkbox_without_wrapper
  return check_box_tag(@name, **@props) unless @form.present? && @attribute.present?

  # Temporarily remove errors to prevent field_with_errors wrapper
  if @object&.errors&.any? && @object.errors.include?(@attribute)
    # Store the errors for this attribute
    attribute_errors = @object.errors.where(@attribute).to_a
    # Delete them temporarily
    @object.errors.delete(@attribute)
    # Render checkbox without wrapper
    checkbox_html = @form.check_box(@attribute, **@props)
    # Restore the errors
    attribute_errors.each { |error| @object.errors.add(@attribute, error.type, **error.options) }
    checkbox_html
  else
    @form.check_box(@attribute, **@props)
  end
end

#input_class ⇒ Object 



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

def input_class
  styles[:input]
end

#label_class ⇒ Object 



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

def label_class
  styles[:label]
end

#toggle_class ⇒ Object 



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

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 



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

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

  @@color
end