Class: BetterUi::General::Icon::Component

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

Constant Summary collapse

ICON_BASE_CLASSES =

Classi base per l’icona con nomenclatura BEM

"bui-icon inline-flex items-center justify-center"
ICON_SIZE_CLASSES =

Dimensioni dell’icona (standardizzate: small, medium, large)

{
  small: "bui-icon--small w-4 h-4 text-sm",
  medium: "bui-icon--medium w-5 h-5 text-base", 
  large: "bui-icon--large w-6 h-6 text-lg"
}.freeze
ICON_THEME_CLASSES =

Temi dell’icona con colori coerenti

{
  default: "bui-icon--default text-gray-600",
  white: "bui-icon--white text-white",
  red: "bui-icon--red text-red-600",
  rose: "bui-icon--rose text-rose-600", 
  orange: "bui-icon--orange text-orange-600",
  green: "bui-icon--green text-green-600",
  blue: "bui-icon--blue text-blue-600",
  yellow: "bui-icon--yellow text-yellow-600",
  violet: "bui-icon--violet text-violet-600",
  purple: "bui-icon--purple text-purple-600"
}.freeze
ICON_ANIMATION_CLASSES =

Animazioni disponibili

{
  spin: "bui-icon--spin animate-spin",
  pulse: "bui-icon--pulse animate-pulse"
}.freeze
ICON_ROTATION_CLASSES =

Trasformazioni disponibili

{
  90 => "bui-icon--rotate-90 transform rotate-90",
  180 => "bui-icon--rotate-180 transform rotate-180", 
  270 => "bui-icon--rotate-270 transform rotate-270"
}.freeze
ICON_FLIP_CLASSES = 
{
  horizontal: "bui-icon--flip-h transform scale-x-[-1]",
  vertical: "bui-icon--flip-v transform scale-y-[-1]",
  both: "bui-icon--flip-both transform scale-[-1]"
}.freeze
ICON_BORDER_CLASSES =

Bordo e larghezza fissa

"bui-icon--border border border-current rounded-full p-1"
ICON_FIXED_WIDTH_CLASSES = 
"bui-icon--fixed-width w-5"

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(name:, style: :solid, size: :medium, theme: :default, spin: false, pulse: false, border: false, fixed_width: false, rotation: nil, flip: nil, classes: nil, id: nil, **html_options) ⇒ Component

Returns a new instance of Component.

Parameters:

  • name (String) —

    Nome dell’icona (richiesto)

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

    Stile dell’icona (:solid, :regular, :brands)

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

    Dimensione (:small, :medium, :large)

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

    Tema colore (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)

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

    Rotazione continua

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

    Animazione pulsazione

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

    Mostra bordo attorno all’icona

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

    Larghezza fissa per allineamento

  • rotation (Integer) (defaults to: nil) —

    Rotazione in gradi (0, 90, 180, 270)

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

    Tipo di flip (:horizontal, :vertical, :both)

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

    Classi CSS aggiuntive

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

    ID HTML

  • html_options (Hash) —

    Attributi HTML aggiuntivi



68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
# File 'app/components/better_ui/general/icon/component.rb', line 68

def initialize(
  name:,
  style: :solid,
  size: :medium,
  theme: :default,
  spin: false,
  pulse: false,
  border: false,
  fixed_width: false,
  rotation: nil,
  flip: nil,
  classes: nil,
  id: nil,
  **html_options
)
  @name = name
  @style = style.to_sym
  @size = size.to_sym
  @theme = theme.to_sym
  @spin = spin
  @pulse = pulse
  @border = border
  @fixed_width = fixed_width
  @rotation = rotation&.to_i
  @flip = flip&.to_sym
  @classes = classes
  @id = id
  @html_options = html_options

  validate_params!
end

Instance Attribute Details

#border ⇒ Object (readonly)

Returns the value of attribute border.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def border
  @border
end

#classes ⇒ Object (readonly)

Returns the value of attribute classes.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def classes
  @classes
end

#fixed_width ⇒ Object (readonly)

Returns the value of attribute fixed_width.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def fixed_width
  @fixed_width
end

#flip ⇒ Object (readonly)

Returns the value of attribute flip.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def flip
  @flip
end

#html_options ⇒ Object (readonly)

Returns the value of attribute html_options.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def html_options
  @html_options
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def id
  @id
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def name
  @name
end

#pulse ⇒ Object (readonly)

Returns the value of attribute pulse.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def pulse
  @pulse
end

#rotation ⇒ Object (readonly)

Returns the value of attribute rotation.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def rotation
  @rotation
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def size
  @size
end

#spin ⇒ Object (readonly)

Returns the value of attribute spin.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def spin
  @spin
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def style
  @style
end

#theme ⇒ Object (readonly)

Returns the value of attribute theme.



52
53
54
 
# File 'app/components/better_ui/general/icon/component.rb', line 52

def theme
  @theme
end

Instance Method Details

#fa_class_name ⇒ Object

Nome completo della classe FontAwesome basato su stile



124
125
126
127
128
129
130
131
132
133
 
# File 'app/components/better_ui/general/icon/component.rb', line 124

def fa_class_name
  prefix = case @style
           when :solid then "fas"
           when :regular then "far" 
           when :brands then "fab"
           else "fas"
           end
  
  "#{prefix} fa-#{@name}"
end

#icon_attributes ⇒ Object

Attributi HTML per l’elemento icona



115
116
117
118
119
120
121
 
# File 'app/components/better_ui/general/icon/component.rb', line 115

def icon_attributes
  {
    class: icon_classes,
    id: @id,
    **@html_options
  }.compact
end

#icon_classes ⇒ Object

Genera le classi CSS complete per l’icona



101
102
103
104
105
106
107
108
109
110
111
112
 
# File 'app/components/better_ui/general/icon/component.rb', line 101

def icon_classes
  classes = [
    ICON_BASE_CLASSES,
    size_classes,
    theme_classes,
    animation_classes,
    transformation_classes,
    border_classes,
    fixed_width_classes,
    @classes
  ].compact.join(" ")
end

#render? ⇒ Boolean

Verifica se il componente deve essere renderizzato

Returns:

  • (Boolean) 


136
137
138
 
# File 'app/components/better_ui/general/icon/component.rb', line 136

def render?
  @name.present?
end