Module: UI::DialogOverlayBehavior

Included in:
DialogOverlay, DialogOverlayComponent
Defined in:
app/behaviors/ui/dialog_overlay_behavior.rb

Overview

Shared behavior for Dialog Overlay component Handles backdrop/overlay styling and attributes

Instance Method Summary collapse

Instance Method Details

#dialog_overlay_base_classes ⇒ Object

Base CSS classes for overlay backdrop Use opacity-0 and pointer-events-none when closed for smooth animations



10
11
12
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 10

def dialog_overlay_base_classes
  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed inset-0 z-50 bg-black/50"
end

#dialog_overlay_classes ⇒ Object

Merge base classes with custom classes using TailwindMerge



15
16
17
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 15

def dialog_overlay_classes
  TailwindMerge::Merger.new.merge([dialog_overlay_base_classes].compact.join(" "))
end

#dialog_overlay_container_base_classes ⇒ Object

Container wrapper classes Use invisible (visibility: hidden) when closed, visible when open



21
22
23
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 21

def dialog_overlay_container_base_classes
  "data-[state=closed]:invisible data-[state=open]:visible fixed inset-0 z-50"
end

#dialog_overlay_container_classes ⇒ Object

Merge container base classes with custom classes



26
27
28
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 26

def dialog_overlay_container_classes
  TailwindMerge::Merger.new.merge([dialog_overlay_container_base_classes, @classes].compact.join(" "))
end

#dialog_overlay_container_data_attributes ⇒ Object

Data attributes for container



31
32
33
34
35
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 31

def dialog_overlay_container_data_attributes
  {
    ui__dialog_target: "container"
  }
end

#dialog_overlay_container_html_attributes ⇒ Object

Build complete HTML attributes hash for container wrapper



52
53
54
55
56
57
58
59
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 52

def dialog_overlay_container_html_attributes
  base_attrs = @attributes&.except(:data) || {}
  base_attrs.merge(
    class: dialog_overlay_container_classes,
    "data-state": @open ? "open" : "closed",
    data: merged_dialog_overlay_container_data_attributes
  )
end

#dialog_overlay_data_attributes ⇒ Object

Data attributes for overlay backdrop



38
39
40
41
42
43
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 38

def dialog_overlay_data_attributes
  {
    ui__dialog_target: "overlay",
    action: "click->ui--dialog#closeOnOverlayClick"
  }
end

#dialog_overlay_html_attributes ⇒ Object

Build complete HTML attributes hash for overlay backdrop



62
63
64
65
66
67
68
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 62

def dialog_overlay_html_attributes
  {
    class: dialog_overlay_classes,
    "data-state": @open ? "open" : "closed",
    data: dialog_overlay_data_attributes
  }
end

#merged_dialog_overlay_container_data_attributes ⇒ Object

Merge user-provided data attributes for container



46
47
48
49
 
# File 'app/behaviors/ui/dialog_overlay_behavior.rb', line 46

def merged_dialog_overlay_container_data_attributes
  user_data = @attributes&.fetch(:data, {}) || {}
  user_data.merge(dialog_overlay_container_data_attributes)
end