Class: Fluxbit::ButtonComponent

Inherits:
Component
  • Object
show all
Includes:
Config::ButtonComponent
Defined in:
app/components/fluxbit/button_component.rb

Overview

The ‘Fluxbit::ButtonComponent` is a customizable button component that extends `Fluxbit::Component`. It allows you to create buttons with various styles, sizes, colors, and supports additional features like popovers and tooltips.

Constant Summary

Constants inherited from Component

Component::ComponentObj

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #options, #random_id, #remove_class, #render_popover_or_tooltip, #target

Constructor Details

#initialize(**props) ⇒ Fluxbit::ButtonComponent

Initializes the button component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the button.

Options Hash (**props):

  • :form (Object) — default: nil —

    The form object associated with the button.

  • :as (Symbol, String) —

    The HTML tag to use for the button (e.g., ‘:button`, `:a`).

  • :pill (Boolean) — default: false —

    Determines if the button has pill-shaped edges.

  • :color (Symbol, String) —

    The color style of the button.

  • :size (Symbol, String) —

    The size of the button (e.g., ‘0` to `4`).

  • :disabled (Boolean) — default: false —

    Sets the button to a disabled state.

  • :remove_class (String) — default: '' —

    Classes to remove from the default class list.

  • :popover_text (String) — default: nil —

    Popover text (from Fluxbit::Component).

  • :popover_placement (Symbol) — default: :right —

    Popover placement (e.g., ‘:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).

  • :popover_trigger (Symbol) — default: :hover —

    Popover trigger (e.g., ‘:hover`, `:click`) (from Fluxbit::Component).

  • :tooltip_text (String) — default: nil —

    Tooltip text (from Fluxbit::Component).

  • :tooltip_placement (Symbol) — default: :right —

    Tooltip placement (e.g., ‘:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).

  • :tooltip_trigger (Symbol) — default: :hover —

    Tooltip trigger (e.g., ‘:hover`, `:click`) (from Fluxbit::Component).

  • **props (Hash) —

    Remaining options declared as HTML attributes.



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

def initialize(**props)
  super
  @props = props
  @form = @props.delete(:form)
  @as = @props.delete(:as) || @@as
  @pill = @props.delete(:pill) || @@pill
  @color = @props.delete(:color) || @@color
  @grouped = @props.delete(:grouped) || false
  @first_button = @props.delete(:first_button) || false
  @last_button = @props.delete(:last_button) || false
  @outline = @color.end_with?("_outline")
  declare_size(@props.delete(:size) || @@size)
  declare_disabled
  declare_classes
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#before_render ⇒ Object 



87
88
89
 
# File 'app/components/fluxbit/button_component.rb', line 87

def before_render
  add_popover_or_tooltip
end

#call ⇒ Object 



91
92
93
94
95
96
 
# File 'app/components/fluxbit/button_component.rb', line 91

def call
  concat(
    (@form.nil? ? content_tag(@as, content, @props) : @form.submit(**@props)) +
    render_popover_or_tooltip.to_s
  )
end

#declare_classes ⇒ Object 



65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
# File 'app/components/fluxbit/button_component.rb', line 65

def declare_classes
  add(class: styles[:pill][@pill ? :on : :off], to: @props, first_element: true) unless @outline
  add(class: styles[:outline][:pill][@pill ? :on : :off], to: @props, first_element: true) if @outline
  add(class: styles[:outline][@outline ? :on : :off], to: @props, first_element: true)
  add(class: styles[:base], to: @props, first_element: true)
  add(
    class: (@color.in?(styles[:colors].keys) ? styles[:colors][@color] : styles[:colors][:info]),
    to: @props,
    first_element: true
  )
  add(class: styles[:inner][:base], to: @props) if @grouped
  add(class: styles[:inner][:position][:start], to: @props) if @grouped && @first_button
  add(class: styles[:inner][:position][:end], to: @props) if @grouped && @last_button
  add(class: styles[:inner][:position][:middle], to: @props) if @grouped && !@last_button && !@first_button
end

#declare_disabled ⇒ Object 



81
82
83
84
85
 
# File 'app/components/fluxbit/button_component.rb', line 81

def declare_disabled
  return unless @props[:disabled].present? && @props[:disabled] == true

  add(class: styles[:disabled], to: @props, first_element: true)
end

#declare_size(size) ⇒ Object 



55
56
57
58
59
60
61
62
63
 
# File 'app/components/fluxbit/button_component.rb', line 55

def declare_size(size)
  return if size.blank?

  add(
    class: (styles[:size][size.to_i]),
    to: @props,
    first_element: true
  )
end