Class: Keystone::Ui::ModalComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/keystone/ui/modal_component.rb

Constant Summary collapse

BACKDROP_CLASSES = 
"hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60"
PANEL_CLASSES = 
"rounded-xl border border-gray-200 bg-white p-6 w-full mx-4 max-h-[80vh] flex flex-col dark:border-zinc-700 dark:bg-zinc-800"
HEADER_CLASSES = 
"flex items-center justify-between mb-4"
TITLE_CLASSES = 
"text-lg font-semibold text-gray-900 dark:text-gray-200"
CLOSE_BUTTON_CLASSES = 
"text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
BODY_CLASSES = 
"overflow-auto flex-1"
SIZE_CLASSES = 
{
  sm: "max-w-sm",
  md: "max-w-lg",
  lg: "max-w-2xl",
  xl: "max-w-4xl"
}.freeze
CLOSE_ICON = 
<<~SVG.freeze
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
SVG

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(title:, size: :md) ⇒ ModalComponent

Returns a new instance of ModalComponent.



26
27
28
29
 
# File 'app/components/keystone/ui/modal_component.rb', line 26

def initialize(title:, size: :md)
  @title = title
  @size = size
end

Instance Attribute Details

#title ⇒ Object (readonly)

Returns the value of attribute title.



24
25
26
 
# File 'app/components/keystone/ui/modal_component.rb', line 24

def title
  @title
end

Instance Method Details

#backdrop_classes ⇒ Object 



31
32
33
 
# File 'app/components/keystone/ui/modal_component.rb', line 31

def backdrop_classes
  BACKDROP_CLASSES
end

#body_classes ⇒ Object 



51
52
53
 
# File 'app/components/keystone/ui/modal_component.rb', line 51

def body_classes
  BODY_CLASSES
end

#close_button_classes ⇒ Object 



47
48
49
 
# File 'app/components/keystone/ui/modal_component.rb', line 47

def close_button_classes
  CLOSE_BUTTON_CLASSES
end

#close_icon ⇒ Object 



59
60
61
 
# File 'app/components/keystone/ui/modal_component.rb', line 59

def close_icon
  CLOSE_ICON
end

#header_classes ⇒ Object 



39
40
41
 
# File 'app/components/keystone/ui/modal_component.rb', line 39

def header_classes
  HEADER_CLASSES
end

#panel_classes ⇒ Object 



35
36
37
 
# File 'app/components/keystone/ui/modal_component.rb', line 35

def panel_classes
  [ PANEL_CLASSES, size_class ].join(" ")
end

#size_class ⇒ Object 



55
56
57
 
# File 'app/components/keystone/ui/modal_component.rb', line 55

def size_class
  SIZE_CLASSES.fetch(@size)
end

#title_classes ⇒ Object 



43
44
45
 
# File 'app/components/keystone/ui/modal_component.rb', line 43

def title_classes
  TITLE_CLASSES
end

#wrapper_data ⇒ Object 



63
64
65
 
# File 'app/components/keystone/ui/modal_component.rb', line 63

def wrapper_data
  { controller: "modal" }
end