Class: BetterUi::General::Badge::Component

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/better_ui/general/badge/component.rb

Constant Summary collapse

BADGE_BASE_CLASSES =

Classi base sempre presenti

"inline-flex items-center justify-center font-medium"
BADGE_ICON_LEFT_CLASSES =

Classi per elementi interni

"flex-shrink-0 -ml-0.5 mr-1.5"
BADGE_ICON_RIGHT_CLASSES = 
"flex-shrink-0 -mr-0.5 ml-1.5"
BADGE_TEXT_CLASSES = 
"whitespace-nowrap"
BADGE_DOT_CLASSES = 
"h-2 w-2 rounded-full mr-1.5"
BADGE_THEME_FILLED_CLASSES =

Temi di badge con stile FILLED - classi Tailwind dirette

{
  default: "bg-black text-white",
  white: "bg-white text-black",
  red: "bg-red-500 text-white",
  rose: "bg-rose-500 text-white",
  orange: "bg-orange-500 text-white",
  green: "bg-green-500 text-white",
  blue: "bg-blue-500 text-white",
  yellow: "bg-yellow-500 text-black",
  violet: "bg-violet-500 text-white",
  gray: "bg-gray-500 text-white"
}
BADGE_THEME_OUTLINE_CLASSES =

Temi di badge con stile OUTLINE - classi Tailwind dirette

{
  default: "border border-black text-black bg-transparent",
  white: "border border-gray-300 text-gray-700 bg-transparent",
  red: "border border-red-500 text-red-500 bg-transparent",
  rose: "border border-rose-500 text-rose-500 bg-transparent",
  orange: "border border-orange-500 text-orange-500 bg-transparent",
  green: "border border-green-500 text-green-500 bg-transparent",
  blue: "border border-blue-500 text-blue-500 bg-transparent",
  yellow: "border border-yellow-500 text-yellow-500 bg-transparent",
  violet: "border border-violet-500 text-violet-500 bg-transparent",
  gray: "border border-gray-500 text-gray-500 bg-transparent"
}
BADGE_SIZE_CLASSES =

Dimensioni con classi Tailwind dirette

{
  small: "text-xs px-2 py-0.5",
  medium: "text-sm px-2.5 py-0.5",
  large: "text-sm px-3 py-1"
}
BADGE_SHAPE_CLASSES =

Forme con classi Tailwind dirette

{
  square: "rounded-md",
  rounded: "rounded-full"
}
BADGE_DOT_COLOR_CLASSES =

Colori dot per ogni tema

{
  default: "bg-gray-500",
  white: "bg-gray-400",
  red: "bg-red-700",
  rose: "bg-rose-700",
  orange: "bg-orange-700",
  green: "bg-green-700",
  blue: "bg-blue-700",
  yellow: "bg-yellow-700",
  violet: "bg-violet-700",
  gray: "bg-gray-700"
}

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(label: nil, theme: :white, size: :medium, shape: :rounded, style: :filled, variant: nil, icon: nil, icon_position: :left, classes: nil, id: nil, **html_options) ⇒ Component

Returns a new instance of Component.

Parameters:

  • label (String) (defaults to: nil) —

    Testo del badge

  • theme (Symbol) (defaults to: :white) —

    default, white, red, rose, orange, green, blue, yellow, violet, gray

  • size (Symbol) (defaults to: :medium) —

    small, medium, large

  • shape (Symbol) (defaults to: :rounded) —

    square, rounded

  • style (Symbol) (defaults to: :filled) —

    filled, outline

  • variant (Symbol) (defaults to: nil) —

    nil, notification, counter, dot

  • icon (String) (defaults to: nil) —

    Nome icona (opzionale)

  • icon_position (Symbol) (defaults to: :left) —

    left, right

  • html_options (Hash) —

    Opzioni HTML aggiuntive



80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'app/components/better_ui/general/badge/component.rb', line 80

def initialize(
  label: nil,
  theme: :white,
  size: :medium,
  shape: :rounded,
  style: :filled,
  variant: nil,
  icon: nil,
  icon_position: :left,
  classes: nil,
  id: nil,
  **html_options
)
  @label = label
  @theme = theme.to_sym
  @size = size.to_sym
  @shape = shape.to_sym
  @style = style.to_sym
  @variant = variant.present? ? variant.to_sym : nil
  @icon = icon
  @icon_position = icon_position.to_sym
  @classes = classes
  @id = id
  @html_options = html_options

  validate_params
end

Instance Attribute Details

#classes ⇒ Object (readonly)

Returns the value of attribute classes.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def classes
  @classes
end

#icon ⇒ Object (readonly)

Returns the value of attribute icon.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def icon
  @icon
end

#icon_position ⇒ Object (readonly)

Returns the value of attribute icon_position.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def icon_position
  @icon_position
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def id
  @id
end

#label ⇒ Object (readonly)

Returns the value of attribute label.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def label
  @label
end

#shape ⇒ Object (readonly)

Returns the value of attribute shape.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def shape
  @shape
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def size
  @size
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def style
  @style
end

#theme ⇒ Object (readonly)

Returns the value of attribute theme.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def theme
  @theme
end

#variant ⇒ Object (readonly)

Returns the value of attribute variant.



5
6
7
 
# File 'app/components/better_ui/general/badge/component.rb', line 5

def variant
  @variant
end

Instance Method Details

#badge_attributes ⇒ Object

Restituisce gli attributi per il badge



137
138
139
140
141
142
143
144
145
146
147
148
149
 
# File 'app/components/better_ui/general/badge/component.rb', line 137

def badge_attributes
  attrs = {
    class: combined_classes,
    id: @id
  }

  # Aggiungi altri attributi HTML se presenti
  @html_options.except(:class).each do |key, value|
    attrs[key] = value
  end

  attrs
end

#combined_classes ⇒ Object

Combina tutte le classi



109
110
111
112
113
114
115
116
117
118
 
# File 'app/components/better_ui/general/badge/component.rb', line 109

def combined_classes
  [
    BADGE_BASE_CLASSES,
    get_theme_class,
    get_size_class,
    get_shape_class,
    @classes,
    @html_options[:class]
  ].compact.join(" ")
end

#dot_classes ⇒ Object 



163
164
165
166
167
168
 
# File 'app/components/better_ui/general/badge/component.rb', line 163

def dot_classes
  [
    BADGE_DOT_CLASSES,
    get_dot_color_class
  ].compact.join(" ")
end

#get_dot_color_class ⇒ Object 



170
171
172
 
# File 'app/components/better_ui/general/badge/component.rb', line 170

def get_dot_color_class
  BADGE_DOT_COLOR_CLASSES[@theme] || BADGE_DOT_COLOR_CLASSES[:white]
end

#get_shape_class ⇒ Object 



132
133
134
 
# File 'app/components/better_ui/general/badge/component.rb', line 132

def get_shape_class
  BADGE_SHAPE_CLASSES[@shape] || BADGE_SHAPE_CLASSES[:rounded]
end

#get_size_class ⇒ Object 



128
129
130
 
# File 'app/components/better_ui/general/badge/component.rb', line 128

def get_size_class
  BADGE_SIZE_CLASSES[@size] || BADGE_SIZE_CLASSES[:medium]
end

#get_theme_class ⇒ Object 



120
121
122
123
124
125
126
 
# File 'app/components/better_ui/general/badge/component.rb', line 120

def get_theme_class
  if @style == :outline
    BADGE_THEME_OUTLINE_CLASSES[@theme] || BADGE_THEME_OUTLINE_CLASSES[:white]
  else
    BADGE_THEME_FILLED_CLASSES[@theme] || BADGE_THEME_FILLED_CLASSES[:white]
  end
end

#icon_classes ⇒ Object 



151
152
153
154
155
156
157
 
# File 'app/components/better_ui/general/badge/component.rb', line 151

def icon_classes
  if @icon_position == :left
    BADGE_ICON_LEFT_CLASSES
  else
    BADGE_ICON_RIGHT_CLASSES
  end
end

#render_icon(icon_name) ⇒ Object

Helper per renderizzare le icone



175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
 
# File 'app/components/better_ui/general/badge/component.rb', line 175

def render_icon(icon_name)
  # Mappa le dimensioni del badge alle dimensioni dell'icona
  icon_size = case @size
  when :large
               :small
  when :small
               :tiny
  else
               :tiny
  end

  # Utilizziamo il componente Icon
  render BetterUi::General::IconComponent.new(
    name: icon_name,
    size: icon_size,
    fixed_width: true
  )
end

#text_classes ⇒ Object 



159
160
161
 
# File 'app/components/better_ui/general/badge/component.rb', line 159

def text_classes
  BADGE_TEXT_CLASSES
end