Class: BetterUi::General::Modal::ModalComponent
- Inherits:
-
ViewComponent::Base
- Object
- ViewComponent::Base
- BetterUi::General::Modal::ModalComponent
- Defined in:
- app/components/better_ui/general/modal/modal_component.rb
Constant Summary collapse
- MODAL_BACKDROP_CLASSES =
Classi base sempre presenti per il backdrop
"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
- MODAL_CONTAINER_CLASSES =
Classi base per il contenitore del modal
"relative bg-white shadow-xl w-full"
- MODAL_THEME =
Temi dell’header del modal con classi Tailwind dirette
{ default: "bg-gray-50 border-b border-gray-200 text-gray-900", white: "bg-white border-b border-gray-200 text-gray-900", red: "bg-red-50 border-b border-red-200 text-red-900", rose: "bg-rose-50 border-b border-rose-200 text-rose-900", orange: "bg-orange-50 border-b border-orange-200 text-orange-900", green: "bg-green-50 border-b border-green-200 text-green-900", blue: "bg-blue-50 border-b border-blue-200 text-blue-900", yellow: "bg-yellow-50 border-b border-yellow-200 text-yellow-900", violet: "bg-violet-50 border-b border-violet-200 text-violet-900" }
- MODAL_SIZES =
Dimensioni con classi Tailwind dirette
{ small: "max-w-sm", medium: "max-w-md", large: "max-w-2xl" }
- MODAL_ROUNDED =
Border radius con classi Tailwind dirette
{ none: "rounded-none", small: "rounded-md", medium: "rounded-lg", large: "rounded-xl", full: "rounded-full" }
Instance Attribute Summary collapse
-
#backdrop ⇒ Object
readonly
Returns the value of attribute backdrop.
-
#classes ⇒ Object
readonly
Returns the value of attribute classes.
-
#closable ⇒ Object
readonly
Returns the value of attribute closable.
-
#html_options ⇒ Object
readonly
Returns the value of attribute html_options.
-
#size ⇒ Object
readonly
Returns the value of attribute size.
-
#theme ⇒ Object
readonly
Returns the value of attribute theme.
-
#title ⇒ Object
readonly
Returns the value of attribute title.
Instance Method Summary collapse
-
#backdrop_attributes ⇒ Object
Restituisce gli attributi per il backdrop.
-
#backdrop_classes ⇒ Object
Combina tutte le classi per il backdrop.
-
#container_attributes ⇒ Object
Restituisce gli attributi per il contenitore.
-
#container_classes ⇒ Object
Combina tutte le classi per il contenitore.
- #get_modal_rounded_classes ⇒ Object
- #get_modal_size_classes ⇒ Object
- #get_modal_theme_classes ⇒ Object
-
#header_attributes ⇒ Object
Restituisce gli attributi per l’header.
-
#header_classes ⇒ Object
Combina tutte le classi per l’header.
-
#initialize(title:, theme: :default, size: :medium, rounded: :medium, backdrop: true, closable: true, classes: nil, **html_options) ⇒ ModalComponent
constructor
Inizializzazione del modal component.
-
#render? ⇒ Boolean
Verifica se rendere il componente.
Constructor Details
#initialize(title:, theme: :default, size: :medium, rounded: :medium, backdrop: true, closable: true, classes: nil, **html_options) ⇒ ModalComponent
Inizializzazione del modal component
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 43 def initialize( title:, theme: :default, size: :medium, rounded: :medium, backdrop: true, closable: true, classes: nil, ** ) @title = title @theme = theme.to_sym @size = size.to_sym @rounded = rounded.to_sym @backdrop = backdrop @closable = closable @classes = classes @html_options = validate_params end |
Instance Attribute Details
#backdrop ⇒ Object (readonly)
Returns the value of attribute backdrop.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def backdrop @backdrop end |
#classes ⇒ Object (readonly)
Returns the value of attribute classes.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def classes @classes end |
#closable ⇒ Object (readonly)
Returns the value of attribute closable.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def closable @closable end |
#html_options ⇒ Object (readonly)
Returns the value of attribute html_options.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def @html_options end |
#size ⇒ Object (readonly)
Returns the value of attribute size.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def size @size end |
#theme ⇒ Object (readonly)
Returns the value of attribute theme.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def theme @theme end |
#title ⇒ Object (readonly)
Returns the value of attribute title.
5 6 7 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 5 def title @title end |
Instance Method Details
#backdrop_attributes ⇒ Object
Restituisce gli attributi per il backdrop
102 103 104 105 106 107 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 102 def backdrop_attributes { class: backdrop_classes, 'data-bui-modal-target': 'backdrop' } end |
#backdrop_classes ⇒ Object
Combina tutte le classi per il backdrop
66 67 68 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 66 def backdrop_classes MODAL_BACKDROP_CLASSES end |
#container_attributes ⇒ Object
Restituisce gli attributi per il contenitore
110 111 112 113 114 115 116 117 118 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 110 def container_attributes { class: container_classes, role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", 'data-bui-modal-target': 'container' } end |
#container_classes ⇒ Object
Combina tutte le classi per il contenitore
71 72 73 74 75 76 77 78 79 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 71 def container_classes [ MODAL_CONTAINER_CLASSES, get_modal_size_classes, get_modal_rounded_classes, @classes, @html_options[:class] ].compact.join(" ") end |
#get_modal_rounded_classes ⇒ Object
97 98 99 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 97 def get_modal_rounded_classes MODAL_ROUNDED[@rounded] || MODAL_ROUNDED[:medium] end |
#get_modal_size_classes ⇒ Object
93 94 95 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 93 def get_modal_size_classes MODAL_SIZES[@size] || MODAL_SIZES[:medium] end |
#get_modal_theme_classes ⇒ Object
89 90 91 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 89 def get_modal_theme_classes MODAL_THEME[@theme] || MODAL_THEME[:default] end |
#header_attributes ⇒ Object
Restituisce gli attributi per l’header
121 122 123 124 125 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 121 def header_attributes { class: header_classes } end |
#header_classes ⇒ Object
Combina tutte le classi per l’header
82 83 84 85 86 87 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 82 def header_classes [ "flex items-center justify-between p-6", get_modal_theme_classes ].compact.join(" ") end |
#render? ⇒ Boolean
Verifica se rendere il componente
128 129 130 |
# File 'app/components/better_ui/general/modal/modal_component.rb', line 128 def render? @title.present? end |