Class: Fluxbit::CardComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/fluxbit/card_component.rb

Constant Summary

Constants inherited from Component

Fluxbit::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(color: :default, shadow: true, border: true, rounded: true, hoverable: false, image: nil, image_position: :top, image_props: {}, tooltip_text: nil, tooltip_placement: "top", tooltip_trigger: "hover", popover_text: nil, popover_placement: "top", popover_trigger: "click", **props) ⇒ CardComponent

Initializes the card component with various customization options.

Parameters:

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

    Color theme for the card (e.g., :default, :primary, :success).

  • shadow (Boolean) (defaults to: true) —

    Whether to apply a drop shadow.

  • border (Boolean) (defaults to: true) —

    Whether to display a border.

  • rounded (Boolean) (defaults to: true) —

    Whether the card has rounded corners.

  • hoverable (Boolean) (defaults to: false) —

    Whether to apply a hover effect.

  • image (String, nil) (defaults to: nil) —

    URL or path of an image to display (optional).

  • image_position (Symbol) (defaults to: :top) —

    Position of the image (:top or :left). Defaults to :top.

  • href (String, nil) —

    Whether the entire card is clickable.

  • tooltip_text (String, nil) (defaults to: nil) —

    Text for a tooltip (optional).

  • tooltip_placement (String) (defaults to: "top") —

    Placement of the tooltip (e.g., “top”, “right”).

  • tooltip_trigger (String) (defaults to: "hover") —

    Trigger event for the tooltip (e.g., “hover”, “click”).

  • popover_text (String, nil) (defaults to: nil) —

    Text for a popover (optional).

  • popover_placement (String) (defaults to: "top") —

    Placement of the popover.

  • popover_trigger (String) (defaults to: "click") —

    Trigger event for the popover.

  • props (Hash) —

    Additional HTML attributes for the container.



52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
# File 'app/components/fluxbit/card_component.rb', line 52

def initialize(color: :default, shadow: true, border: true, rounded: true, hoverable: false,
               image: nil, image_position: :top, image_props: {},
               tooltip_text: nil, tooltip_placement: "top", tooltip_trigger: "hover",
               popover_text: nil, popover_placement: "top", popover_trigger: "click",
               **props)
  @color             = color ? color.to_sym : :default
  @shadow            = shadow
  @border            = border
  @rounded           = rounded
  @hoverable         = hoverable
  @image             = image
  @image_position    = image_position.to_sym
  @image_props       = image_props
  @tooltip_text      = tooltip_text
  @tooltip_placement = tooltip_placement
  @tooltip_trigger   = tooltip_trigger
  @popover_text      = popover_text
  @popover_placement = popover_placement
  @popover_trigger   = popover_trigger
  @props             = props
  @image_props[:src] = @image
end

Instance Method Details

#before_render ⇒ Object 



75
76
77
78
79
80
81
82
83
84
85
86
87
 
# File 'app/components/fluxbit/card_component.rb', line 75

def before_render
  add to: @props, first_element: true, class: [
    styles[:base],
    @border ? styles[:border] : nil,
    @shadow ? styles[:shadow] : nil,
    @rounded ? styles[:rounded] : nil,
    styles[:colors][@color] || nil,
    @hoverable ? styles[:hoverable] : nil,
    @props[:href] ? styles[:clickable][@color] : nil,
    (@image && @image_position == :left) ? styles[:base_image_left] : nil
  ]
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

#call ⇒ Object 



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
# File 'app/components/fluxbit/card_component.rb', line 89

def call
  container_tag = @props[:href] ? :a : :div

  header_html = header ? content_tag(:div, header, class: self.class.styles[:header]) : nil
  footer_html = footer ? content_tag(:div, footer, class: self.class.styles[:footer]) : nil
  body_content = section ? section : nil

  if @image && @image_position == :top
    # Top image layout: image at the top, then header, body, and footer.
    add(class: styles[:image_top], to: @image_props)
    image_html = content_tag(:img, nil, **@image_props)
    body_html  = body_content ? content_tag(:div, body_content, class: self.class.styles[:body]) : nil

    content_tag(container_tag, **@props) do
      concat(image_html)
      concat(header_html) if header_html
      concat(body_html) if body_html
      concat(footer_html) if footer_html
    end
  elsif @image && @image_position == :left
    # Left image layout: image on the left and content on the right in a flex container.
    add(class: styles[:image_left], to: @image_props)
    image_html = content_tag(:div, class: "x") do
      content_tag(:img, nil, **@image_props)
    end
    content_inner = "".html_safe
    content_inner << header_html.to_s if header_html
    if body_content.present?
      content_inner << content_tag(:div, body_content, class: self.class.styles[:body] + " " + self.class.styles[:content_left])
    end
    content_inner << footer_html.to_s if footer_html

    content_tag(container_tag, **@props) do
      concat(image_html)
      concat(content_tag(:div, content_inner, class: "flex-1"))
    end
  else
    # Fallback: render without image or with an unrecognized image_position.
    body_html = body_content ? content_tag(:div, body_content, class: self.class.styles[:body]) : nil
    content_tag(container_tag, **@props) do
      concat(header_html) if header_html
      concat(body_html) if body_html
      concat(footer_html) if footer_html
    end
  end
end