fluxbit_view_components 0.3.0 → 0.4.0

data/app/components/fluxbit/pagination_component.rb

@@ -0,0 +1,206 @@
+# The `Fluxbit::PaginationComponent` is a component for rendering customizable pagination controls.
+# It extends `Fluxbit::Component` and provides options for configuring the pagination's
+# appearance, behavior, and content areas. You can control the pagination's layout, item count,
+# and other interactive elements. The pagination is divided into different sections (previous, next, etc.),
+# each of which can be styled or customized through various properties.
+class Fluxbit::PaginationComponent < Fluxbit::Component
+  include Fluxbit::Config::PaginationComponent
+
+  def initialize(pagy = nil, **props)
+    @pagy = pagy
+
+    @props = props
+    @count = @props.delete(:count) || 0
+    @last = @props.delete(:last) || 1
+    @next = @props.delete(:next)
+    @page = @props.delete(:page) || 1
+    @prev = @props.delete(:prev)
+    @size = @props.delete(:size) || :default
+    @ends = @props.delete(:ends) || true
+    @request_path = @props.delete(:request_path) || nil
+
+    if @pagy
+      @count = @pagy.count
+      @last = @pagy.last
+      @next = @pagy.next
+      @page = @pagy.page
+      @prev = @pagy.prev
+      @size = @pagy.vars[:size]
+      @ends = @pagy.vars[:ends]
+      @request_path = @pagy.vars[:request_path]
+    end
+
+    unless @size.is_a?(Integer) && @size >= 0
+      raise ArgumentError, "expected :size to be an Integer >= 0, got #{@size.inspect} (#{@size.class})"
+    end
+
+    @show_first_last = options @props.delete(:show_first_last), default: @@show_first_last
+    @show_prev_next = options @props.delete(:show_prev_next), default: @@show_prev_next
+    @show_pages = options @props.delete(:show_pages), default: @@show_pages
+    @show_icons = options @props.delete(:show_icons), default: @@show_icons
+    @show_texts = options @props.delete(:show_texts), default: @@show_texts
+    @sizing = options @props.delete(:sizing), default: @@sizing
+    @aria_label = @props.delete(:aria_label) || translate("aria_label.nav", count: @last)
+    @show_texts = true if !@show_icons && !@show_texts
+
+    add(class: [ styles[:root], styles[:sizes][@sizing][:root] ], to: @props)
+    @page_link_style = [ styles[:page_link], styles[:sizes][@sizing][:page_link] ].join(" ")
+    @current_style = [ styles[:current], styles[:sizes][@sizing][:page_link] ].join(" ")
+    @props[:aria] ||= {}
+    @props[:aria][:label] = @aria_label unless @props[:aria][:label]
+  end
+
+  def call
+    tag.nav(**@props) do
+      concat first_button if @show_first_last
+      concat prev_button if @show_prev_next
+
+      if @show_pages
+        series.each do |item|
+          case item
+          when Integer
+            concat(tag.a(item.to_s, href: url_for(item), role: "link", class: @page_link_style, aria: { label: item.to_s }))
+          when String
+            concat(tag.a(item.to_s, role: "link", class: @current_style, aria: { disabled: true, current: "page" }))
+          when :gap
+            concat(tag.a(ellipsis_horizontal, role: "link", class: @page_link_style, aria: { disabled: true }))
+          end
+        end
+      end
+
+      concat next_button if @show_prev_next
+      concat last_button if @show_first_last
+    end
+  end
+
+  private
+
+  def translate(key, options = {})
+    I18n.t(key, **options.merge(scope: "fluxbit.pagination")) # , default: Fluxbit::DEFAULT_TRANSLATIONS["fluxbit.pagination.#{key}"]))
+  end
+
+  def first_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.first") } }
+    if @page != 1
+      props[:href] = url_for(1)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add class: styles[:previous], to: props
+
+    tag.a(**props) do
+      concat(chevron_double_left) if @show_icons
+      concat(tag.span(
+        translate("first"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_prev] : styles[:only_text]) : styles[:only_icon]
+      ))
+    end
+  end
+
+  def last_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.last") } }
+    if @page != @last
+      props[:href] = url_for(@last)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add class: styles[:next], to: props
+
+    tag.a(**props) do
+      concat(tag.span(
+        translate("last"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_next] : styles[:only_text]) : styles[:only_icon]
+      ))
+      concat(chevron_double_right) if @show_icons
+    end
+  end
+
+  def prev_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.prev") } }
+    if prev_page = @prev
+      props[:href] = url_for(prev_page)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add(class: styles[:previous], to: props) unless @show_first_last
+
+    tag.a(**props) do
+      concat(chevron_left) if @show_icons
+      concat(tag.span(
+        translate("prev"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_prev] : styles[:only_text]) : styles[:only_icon]
+        )
+      )
+    end
+  end
+
+  def next_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.next") } }
+    if next_page = @next
+      props[:href] = url_for(next_page)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add(class: styles[:next], to: props) unless @show_first_last
+
+    tag.a(**props) do
+      concat(tag.span(
+        translate("next"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_next] : styles[:only_text]) : styles[:only_icon]
+      ))
+      concat(chevron_right) if @show_icons
+    end
+  end
+
+  def series
+    return @pagy.series(size: @size) if @pagy && @pagy.respond_to?(:series, true)
+    return [] if @size.zero?
+
+    [].tap do |series|
+      if @size >= @last
+        series.push(*1..@last)
+      else
+        left  = ((@size - 1) / 2.0).floor            # left half might be 1 page shorter for even size
+        start = if @page <= left                     # beginning pages
+                  1
+        elsif @page > (@last - @size + left) # end pages
+                  @last - @size + 1
+        else                                 # intermediate pages
+                  @page - left
+        end
+        series.push(*start...start + @size)
+        # Set first and last pages plus gaps when needed, respecting the size
+        if @ends && @size >= 7
+          series[0]  = 1
+          series[1]  = :gap  unless series[1]  == 2
+          series[-2] = :gap  unless series[-2] == @last - 1
+          series[-1] = @last
+        end
+      end
+      series[series.index(@page)] = @page.to_s
+    end
+  end
+
+  def url_for(page)
+    vars = @pagy&.vars || {}
+    # Use current request parameters as base
+    params = (respond_to?(:request) ? request.GET : controller.request.GET).dup
+    params.merge!(vars[:params].transform_keys(&:to_s)) if vars[:params].is_a?(Hash)
+    # Set page and possibly limit
+    params[vars[:page_param].to_s] = page
+    params[vars[:limit_param].to_s] = vars[:limit] if vars[:limit_extra]
+    # Apply params proc if given
+    params = vars[:params].call(params) if vars[:params].is_a?(Proc)
+
+    # Build query string
+    query_str = params.any? ? "?#{Rack::Utils.build_nested_query(params)}" : ""
+    # Base path (use stored request_path or current path)
+    base_path = @request_path || (respond_to?(:request) ? request.path : controller.request.path)
+    base_path = "#{request.base_url}#{base_path}" if vars[:absolute]
+    "#{base_path}#{query_str}#{vars[:fragment] || ''}"
+  end
+end

data/app/components/fluxbit/popover_component.rb

@@ -16,7 +16,7 @@ class Fluxbit::PopoverComponent < Fluxbit::Component
   # @option props [Boolean] :has_arrow (true) Determines if an arrow should be displayed on the popover.
   # @option props [String] :image (nil) The URL of an image to be displayed in the popover.
   # @option props [Symbol] :image_position (:right) The position of the image relative to the content (:left or :right).
-  # @option props [Hash] :image_props ({}) Additional HTML attributes for the image element.
+  # @option props [Hash] :image_html ({}) Additional HTML attributes for the image element.
   # @option props [Symbol, String] :size (2) The size of the popover (0 to 4).
   # @option props [String] :remove_class ('') Classes to be removed from the default popover class list.
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the popover container.
@@ -27,31 +27,31 @@ class Fluxbit::PopoverComponent < Fluxbit::Component
     @has_arrow = options @props.delete(:has_arrow), default: @@has_arrow
     @image = @props.delete(:image)
     @image_position = options @props.delete(:image_position), default: @@image_position
-    @image_props = options @props.delete(:image_props), default: @@image_props
+    @image_html = options @props.delete(:image_html), default: @@image_html
     @props["data-popover"] = "data-popover"
     @props["role"] = "tooltip"
 
     add(class: [ styles[:base], styles[:size][@props.delete(:size) || @@size] ], to: @props)
-    add(class: styles[:image_content][:image], to: @image_props)
-    @image_props[:src] = @image
+    add(class: styles[:image_content][:image], to: @image_html)
+    @image_html[:src] = @image
 
     @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
-    @image_props[:class] = remove_class(@props.delete(:remove_class) || "", @image_props[:class])
+    @image_html[:class] = remove_class(@props.delete(:remove_class) || "", @image_html[:class])
   end
 
   def call
-    content_tag :div, @props do
+    tag.div(**@props) do
       concat div_title unless @title.blank?
-      concat (content_tag(:div, class: styles[@image.blank? ? :content : :image_base]) do
+      concat (tag.div(class: styles[@image.blank? ? :content : :image_base]) do
         if @image.blank?
           content
         else
           if @image_position == :left
-            concat content_tag(:img, nil, @image_props)
-            concat content_tag(:div, content, class: styles[:image_content][:text])
+            concat tag.img(**@image_html)
+            concat tag.div(content, class: styles[:image_content][:text])
           else
-            concat content_tag(:div, content, class: styles[:image_content][:text])
-            concat content_tag(:img, nil, @image_props)
+            concat tag.div(content, class: styles[:image_content][:text])
+            concat tag.img(**@image_html)
           end
         end
       end)
@@ -60,12 +60,12 @@ class Fluxbit::PopoverComponent < Fluxbit::Component
   end
 
   def popper_arrow
-    content_tag :div, "", "data-popper-arrow" => true
+    tag.div("data-popper-arrow" => true)
   end
 
   def div_title
-    content_tag :div, class: styles[:title][:div] do
-      content_tag :h3, @title, class: styles[:title][:h3]
+    tag.div(class: styles[:title][:div]) do
+      tag.h3(@title, class: styles[:title][:h3])
     end
   end
 end

data/app/components/fluxbit/progress_component.rb

@@ -0,0 +1,196 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::ProgressComponent` is a customizable progress bar component that extends `Fluxbit::Component`.
+# It allows you to create progress indicators with various styles, sizes, colors, and label positioning options
+# to display completion status or loading progress.
+#
+# @example Basic usage
+#   = fx_progress(progress: 45)
+#
+# @example With labels
+#   = fx_progress(progress: 75, text_label: "Loading", label_progress: true)
+#
+# @see docs/02_Components/Progress.md For detailed documentation.
+class Fluxbit::ProgressComponent < Fluxbit::Component
+  include Fluxbit::Config::ProgressComponent
+
+  ##
+  # Initializes the progress component with the given properties.
+  #
+  # @param [Hash] **props The properties to customize the component.
+  # @option props [Integer] :progress (0) The progress percentage (0-100).
+  # @option props [Symbol, String] :color (:default) The color theme of the progress bar.
+  # @option props [Integer] :size (1) The size of the progress bar (0-3).
+  # @option props [String] :text_label (nil) Label text to display with the progress bar.
+  # @option props [Boolean] :label_progress (false) Whether to show the progress percentage.
+  # @option props [Boolean] :label_text (false) Whether to show the text label.
+  # @option props [Symbol] :progress_label_position (:inside) Position of progress label (:inside or :outside).
+  # @option props [Symbol] :text_label_position (:outside) Position of text label (:inside or :outside).
+  # @option props [Hash] :label_html ({}) HTML attributes for label elements. Supports :remove_class.
+  # @option props [Boolean] :stimulus (false) Whether to add Stimulus controller data attributes for JavaScript interactions.
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options as HTML attributes.
+  #
+  # @return [Fluxbit::ProgressComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    # Use options() function with config defaults
+    @progress = options(@props.delete(:progress), default: @@progress)
+    @color = options(@props.delete(:color), collection: styles[:bar][:colors].keys, default: @@color)
+    @size = options(@props.delete(:size), default: @@size)
+    @text_label = options(@props.delete(:text_label), default: @@text_label)
+    @label_progress = options(@props.delete(:label_progress), default: @@label_progress)
+    @label_text = options(@props.delete(:label_text), default: @@label_text)
+    @progress_label_position = options(@props.delete(:progress_label_position),
+                                      collection: [ :inside, :outside ],
+                                      default: @@progress_label_position)
+    @text_label_position = options(@props.delete(:text_label_position),
+                                  collection: [ :inside, :outside ],
+                                  default: @@text_label_position)
+    @label_html = options(@props.delete(:label_html), default: @@label_html)
+    @stimulus = options(@props.delete(:stimulus), default: @@stimulus)
+
+    # Sanitize progress value
+    @progress = [ @progress.to_i, 0 ].max
+    @progress = [ @progress, 100 ].min
+
+    # Apply styling
+    declare_classes
+
+    # Handle class removal
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    content_tag(:div) do
+      safe_join([
+        render_outside_labels,
+        render_progress_container
+      ].compact)
+    end
+  end
+
+  private
+
+  def declare_classes
+    add(class: styles[:base], to: @props, first_element: true)
+    add(class: styles[:sizes][@size], to: @props, first_element: true)
+
+    # Add Stimulus controller attributes if enabled
+    if @stimulus
+      @props["data-controller"] = [ @props["data-controller"], "fx-progress" ].compact.join(" ")
+      @props["data-fx-progress-progress-value"] = @progress
+      @props["data-fx-progress-animate-value"] = true
+    end
+  end
+
+  def render_outside_labels
+    return unless has_outside_labels?
+
+    content_tag(:div, class: styles[:labels][:outside][:base]) do
+      safe_join([
+        render_outside_text_label,
+        render_outside_progress_label
+      ].compact)
+    end
+  end
+
+  def render_outside_text_label
+    return unless @label_text && @text_label.present? && @text_label_position == :outside
+
+    label_props = build_label_props(styles[:labels][:outside][:text], is_progress_label: false)
+    content_tag(:span, @text_label, **label_props)
+  end
+
+  def render_outside_progress_label
+    return unless @label_progress && @progress_label_position == :outside
+
+    label_props = build_label_props(styles[:labels][:outside][:progress], is_progress_label: true)
+    content_tag(:span, "#{@progress}%", **label_props)
+  end
+
+  def render_progress_container
+    content_tag(:div, **@props) do
+      content_tag(:div, progress_bar_content, **progress_bar_props)
+    end
+  end
+
+  def progress_bar_props
+    bar_props = {
+      class: progress_bar_classes,
+      style: "width: #{@progress}%"
+    }
+
+    # Add Stimulus target if enabled
+    if @stimulus
+      bar_props["data-fx-progress-target"] = "bar"
+    end
+
+    bar_props
+  end
+
+  def progress_bar_classes
+    classes = [ styles[:bar][:base] ]
+    classes << styles[:bar][:colors][@color]
+    classes << styles[:bar][:text_sizes][@size] if has_inside_labels?
+    classes.join(" ")
+  end
+
+  def progress_bar_content
+    return "" unless has_inside_labels?
+
+    safe_join([
+      render_inside_text_label,
+      render_inside_progress_label
+    ].compact, " ")
+  end
+
+  def render_inside_text_label
+    return unless @label_text && @text_label.present? && @text_label_position == :inside
+
+    label_props = build_label_props(styles[:labels][:inside][:text], is_progress_label: false)
+    content_tag(:span, @text_label, **label_props)
+  end
+
+  def render_inside_progress_label
+    return unless @label_progress && @progress_label_position == :inside
+
+    label_props = build_label_props(styles[:labels][:inside][:progress], is_progress_label: true)
+    content_tag(:span, "#{@progress}%", **label_props)
+  end
+
+  def has_outside_labels?
+    (@label_text && @text_label.present? && @text_label_position == :outside) ||
+    (@label_progress && @progress_label_position == :outside)
+  end
+
+  def has_inside_labels?
+    (@label_text && @text_label.present? && @text_label_position == :inside) ||
+    (@label_progress && @progress_label_position == :inside)
+  end
+
+  def build_label_props(base_class, is_progress_label: false)
+    label_props = @label_html.dup
+
+    # Start with base class and merge with any custom classes
+    label_props[:class] = base_class
+    add(class: @label_html[:class], to: label_props) if @label_html[:class].present?
+
+    # Add Stimulus target if enabled and this is a progress label
+    if @stimulus && is_progress_label
+      label_props["data-fx-progress-target"] = "progressLabel"
+    elsif @stimulus && !is_progress_label
+      label_props["data-fx-progress-target"] = "textLabel"
+    end
+
+    # Handle remove_class for labels
+    if label_props[:remove_class].present?
+      label_props[:class] = remove_class(label_props.delete(:remove_class), label_props[:class])
+    end
+
+    label_props
+  end
+end