Class: BetterUi::General::Alert::Component

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

Constant Summary collapse

ALERT_BASE_CLASSES =

Classi base sempre presenti

"flex p-4 mb-4 border"
ALERT_ICON_CLASSES =

Classi per elementi interni

"flex-shrink-0 mr-3 w-5 h-5"
ALERT_ICON_RIGHT_CLASSES = 
"flex-shrink-0 ml-3 mr-0"
ALERT_CONTENT_CLASSES = 
"flex-1"
ALERT_TITLE_CLASSES = 
"font-medium mb-1"
ALERT_MESSAGE_CLASSES = 
"text-sm"
ALERT_CLOSE_CLASSES = 
"ml-auto -my-1.5 -mr-1.5 p-1.5 rounded-md focus:ring-2 focus:ring-offset-2 hover:bg-gray-100"
ALERT_THEME_CLASSES =

Temi di alert con classi Tailwind dirette

{
  default: "bg-black text-white border-gray-900",
  white: "bg-white text-black border-gray-200",
  red: "bg-red-500 text-white border-red-600",
  rose: "bg-rose-500 text-white border-rose-600",
  orange: "bg-orange-500 text-white border-orange-600",
  green: "bg-green-500 text-white border-green-600",
  blue: "bg-blue-500 text-white border-blue-600",
  yellow: "bg-yellow-500 text-black border-yellow-600",
  violet: "bg-violet-500 text-white border-violet-600"
}
ALERT_ICON_THEME_CLASSES =

Colori icone per ogni tema

{
  default: "text-white",
  white: "text-black",
  red: "text-white",
  rose: "text-white",
  orange: "text-white",
  green: "text-white",
  blue: "text-white",
  yellow: "text-black",
  violet: "text-white"
}
ALERT_CLOSE_THEME_CLASSES =

Colori close button per ogni tema

{
  default: "text-white focus:ring-gray-600",
  white: "text-black focus:ring-gray-400",
  red: "text-white focus:ring-red-400",
  rose: "text-white focus:ring-rose-400",
  orange: "text-white focus:ring-orange-400",
  green: "text-white focus:ring-green-400",
  blue: "text-white focus:ring-blue-400",
  yellow: "text-black focus:ring-yellow-400",
  violet: "text-white focus:ring-violet-400"
}
ALERT_RADIUS_CLASSES =

Border radius con classi Tailwind dirette

{
  none: "rounded-none",
  small: "rounded-sm",
  medium: "rounded-md",
  large: "rounded-lg",
  full: "rounded-full"
}
ALERT_ICON_RIGHT_LAYOUT_CLASSES =

Classi per layout quando icon è a destra

"flex-row-reverse"
ALERT_CONTENT_RIGHT_CLASSES = 
"text-right"
ALERT_DISMISSIBLE_CLASSES =

Classi per alert dismissible

"pr-12 relative"
ALERT_CLOSE_POSITION_CLASSES = 
"absolute right-4 top-4"
IMPORTANCE_LEVELS =

Livelli di importanza con attributi ARIA

{
  high: { role: "alert", "aria-live": "assertive" },
  medium: { role: "status", "aria-live": "polite" },
  low: { role: "status", "aria-live": "polite" }
}

Instance Method Summary collapse

Constructor Details

#initialize(title: nil, message: nil, theme: :white, icon: nil, icon_position: :left, dismissible: false, rounded: :medium, importance: :medium, html_content: false, classes: nil, **html_options) ⇒ Component

Returns a new instance of Component.

Parameters:

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

    titolo dell’alert (opzionale)

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

    contenuto dell’alert

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

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

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

    nome dell’icona (opzionale)

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

    :left, :right posizione dell’icona

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

    se l’alert può essere chiuso

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

    :none, :small, :medium, :large, :full arrotondamento degli angoli

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

    :high, :medium, :low livello di importanza per accessibilità

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

    se il messaggio contiene HTML

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

    classi CSS aggiuntive

  • html_options (Hash) —

    opzioni HTML per il container



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
 
# File 'app/components/better_ui/general/alert/component.rb', line 90

def initialize(
  title: nil,
  message: nil,
  theme: :white,
  icon: nil,
  icon_position: :left,
  dismissible: false,
  rounded: :medium,
  importance: :medium,
  html_content: false,
  classes: nil,
  **html_options
)
  @title = title
  @message = message
  @theme = theme.to_sym
  @icon = icon
  @icon_position = icon_position.to_sym
  @dismissible = dismissible
  @rounded = rounded.to_sym
  @importance = importance.to_sym
  @html_content = html_content
  @classes = classes
  @html_options = html_options

  validate_params
end

Instance Method Details

#alert_attributes ⇒ Object

Restituisce gli attributi per l’alert



146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
# File 'app/components/better_ui/general/alert/component.rb', line 146

def alert_attributes
  attrs = {
    class: combined_classes
  }

  # Aggiungi attributi ARIA in base al livello di importanza
  importance_attrs = IMPORTANCE_LEVELS[@importance] || IMPORTANCE_LEVELS[:medium]
  importance_attrs.each do |key, value|
    attrs[key] = value
  end

  # 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



133
134
135
136
137
138
139
140
141
142
143
 
# File 'app/components/better_ui/general/alert/component.rb', line 133

def combined_classes
  [
    ALERT_BASE_CLASSES,
    get_theme_class,
    get_border_radius_class,
    get_icon_position_class,
    @dismissible ? ALERT_DISMISSIBLE_CLASSES : nil,
    @classes,
    @html_options[:class]
  ].compact.join(" ")
end

#default_icon ⇒ Object 



118
119
120
121
122
123
124
125
126
127
128
129
130
 
# File 'app/components/better_ui/general/alert/component.rb', line 118

def default_icon
  case @theme
  when :default then "bell"
  when :white then "information-circle"
  when :red, :rose then "exclamation-circle"
  when :orange then "bell"
  when :green then "check-circle"
  when :blue then "information-circle"
  when :yellow then "exclamation-triangle"
  when :violet then "shield-exclamation"
  else "information-circle"
  end
end

#get_border_radius_class ⇒ Object

Genera le classi per il border radius



171
172
173
 
# File 'app/components/better_ui/general/alert/component.rb', line 171

def get_border_radius_class
  ALERT_RADIUS_CLASSES[@rounded] || ALERT_RADIUS_CLASSES[:medium]
end

#get_close_classes ⇒ Object

Genera le classi per il close button



204
205
206
207
208
209
210
 
# File 'app/components/better_ui/general/alert/component.rb', line 204

def get_close_classes
  base_classes = ALERT_CLOSE_CLASSES
  theme_classes = ALERT_CLOSE_THEME_CLASSES[@theme] || ALERT_CLOSE_THEME_CLASSES[:white]
  position_classes = @dismissible ? ALERT_CLOSE_POSITION_CLASSES : nil

  [ base_classes, theme_classes, position_classes ].compact.join(" ")
end

#get_content_classes ⇒ Object

Genera le classi per il contenuto



190
191
192
193
194
195
196
 
# File 'app/components/better_ui/general/alert/component.rb', line 190

def get_content_classes
  if @icon_position == :right
    [ ALERT_CONTENT_CLASSES, ALERT_CONTENT_RIGHT_CLASSES ].join(" ")
  else
    ALERT_CONTENT_CLASSES
  end
end

#get_icon_classes ⇒ Object

Genera le classi per l’icona



181
182
183
184
185
186
187
 
# File 'app/components/better_ui/general/alert/component.rb', line 181

def get_icon_classes
  if @icon_position == :right
    ALERT_ICON_RIGHT_CLASSES
  else
    ALERT_ICON_CLASSES
  end
end

#get_icon_position_class ⇒ Object

Genera la classe per la posizione dell’icona (layout)



176
177
178
 
# File 'app/components/better_ui/general/alert/component.rb', line 176

def get_icon_position_class
  @icon_position == :right ? ALERT_ICON_RIGHT_LAYOUT_CLASSES : nil
end

#get_icon_theme_class ⇒ Object

Genera le classi per l’icona del tema



199
200
201
 
# File 'app/components/better_ui/general/alert/component.rb', line 199

def get_icon_theme_class
  ALERT_ICON_THEME_CLASSES[@theme] || ALERT_ICON_THEME_CLASSES[:white]
end

#get_theme_class ⇒ Object

Genera le classi del tema



166
167
168
 
# File 'app/components/better_ui/general/alert/component.rb', line 166

def get_theme_class
  ALERT_THEME_CLASSES[@theme] || ALERT_THEME_CLASSES[:white]
end