Class: Fluxbit::CardComponent

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

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(color: :default, shadow: true, border: true, rounded: true, hoverable: false, image: nil, image_position: :top, image_html: {}, 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.



58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
# File 'app/components/fluxbit/card_component.rb', line 58

def initialize(color: :default, shadow: true, border: true, rounded: true, hoverable: false,
               image: nil, image_position: :top, image_html: {},
               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_html       = image_html
  @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_html[:src] = @image
end

Instance Method Details

#before_render ⇒ Object 



81
82
83
84
85
86
87
88
89
90
91
92
93
 
# File 'app/components/fluxbit/card_component.rb', line 81

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 



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
135
136
137
 
# File 'app/components/fluxbit/card_component.rb', line 95

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

  header_html = header? ? tag.div(header, class: self.class.styles[:header]) : nil
  footer_html = footer? ? tag.div(footer, class: self.class.styles[:footer]) : nil
  body_content = content || safe_join(sections)

  if @image && @image_position == :top
    # Top image layout: image at the top, then header, body, and footer.
    add(class: styles[:image_top], to: @image_html)
    image_html = tag.img(**@image_html)

    content_tag(container_tag, **@props) do
      concat(image_html)
      concat(header_html) if header_html
      concat(body_content) if body_content
      concat(content) if content?
      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_html)
    image_html = tag.div(class: "x") do
      tag.img(**@image_html)
    end
    content_parts = []
    content_parts << header_html if header_html
    content_parts << body_content if body_content.present?
    content_parts << footer_html if footer_html

    content_tag(container_tag, **@props) do
      concat(image_html)
      concat(tag.div(safe_join(content_parts), class: "flex-1"))
    end
  else
    # Fallback: render without image or with an unrecognized image_position.
    content_tag(container_tag, **@props) do
      concat(header_html) if header_html
      concat(body_content) if body_content
      concat(footer_html) if footer_html
    end
  end
end