Class: Fluxbit::SpinnerPercentComponent

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

Overview

The ‘Fluxbit::SpinnerPercentComponent` is a component for rendering progress spinners with percentage display.

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #icon, #options, #popover?, #random_id, #remove_class, #remove_class_from_props, #render_popover_or_tooltip, #target, #tooltip?

Methods included from IconHelpers

#chevron_double_left, #chevron_double_right, #chevron_down, #chevron_left, #chevron_right, #chevron_up, #close_icon, #ellipsis_horizontal, #eye_icon, #eye_slash_icon, #plus_icon

Constructor Details

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

Initializes the SpinnerPercent component with various customization options.

Parameters:

  • **props (Hash) —

    The properties to customize the spinner.

  • props (Hash) —

    a customizable set of options

Options Hash (**props):

  • :color (Symbol) — default: :default —

    The color theme of the spinner (:default, :info, :success, :failure, :warning, :pink, :purple).

  • :size (Integer) — default: 1 —

    The size of the spinner (-1 to 4).

  • :percent (Integer) — default: 0 —

    The percentage completion (0 to 100).

  • :label (String) — default: 'Loading...' —

    The aria-label for accessibility.

  • :show_percent (Boolean) — default: true —

    Whether to display the percentage text.

  • :text (String) — default: nil —

    Custom text to display instead of percentage. If provided, overrides show_percent.

  • :label_html (Hash) — default: {} —

    HTML attributes for the inner text element. Supports remove_class key to remove default classes.

  • :animate (Boolean) — default: false —

    Whether to apply rotation animation to the circle.

  • :speed (Symbol) — default: :normal —

    The speed of rotation animation (:slow, :normal, :fast, :very_fast).

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

    CSS classes to remove from the default class list.

  • **props (Hash) —

    Remaining options declared as HTML attributes.



23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'app/components/fluxbit/spinner_percent_component.rb', line 23

def initialize(**props)
  super
  @props = props

  @color = options @props.delete(:color), collection: styles[:colors].keys, default: @@color
  @size = options @props.delete(:size), collection: (0..styles[:sizes].count - 1).to_a, default: @@size
  @percent = [ @props.delete(:percent) || @@percent, 0 ].max
  @percent = [ @percent, 100 ].min
  @label = @props.delete(:label) || @@label
  @show_percent = @props.delete(:show_percent)
  @show_percent = @@show_percent if @show_percent.nil?
  @text = @props.delete(:text) || @@text
  @label_html = @props.delete(:label_html) || {}
  @animate = @props.delete(:animate)
  @animate = @@animate if @animate.nil?
  @speed = options @props.delete(:speed), collection: styles[:speeds].keys, default: @@speed

  add class: [
    styles[:base],
    styles[:sizes][@size]
  ], to: @props

  # Add accessibility attributes
  @props[:role] = "progressbar"
  @props[:"aria-label"] = @label
  @props[:"aria-valuenow"] = @percent
  @props[:"aria-valuemin"] = "0"
  @props[:"aria-valuemax"] = "100"

  # Add Stimulus controller
  @props[:data] ||= {}
  @props[:data][:controller] = "fx-spinner-percent"
  @props[:data][:"fx-spinner-percent-percent-value"] = @percent
  @props[:data][:"fx-spinner-percent-animate-value"] = @animate
  @props[:data][:"fx-spinner-percent-speed-value"] = @speed
  @props[:data][:"fx-spinner-percent-has-custom-text-value"] = !@text.nil?

  remove_class_from_props(@props)
end

Instance Method Details

#call ⇒ Object 



63
64
65
66
67
68
69
 
# File 'app/components/fluxbit/spinner_percent_component.rb', line 63

def call
  content_tag(:div, **@props) do
    concat svg_content
    concat text_content
    concat screen_reader_content
  end
end