Module: UI::DrawerOverlayBehavior

Included in:
DrawerOverlay, DrawerOverlayComponent
Defined in:
app/behaviors/ui/drawer_overlay_behavior.rb

Overview

Shared behavior for Drawer Overlay component Handles backdrop/overlay styling and attributes for Vaul drawer

Instance Method Summary collapse

Instance Method Details

#drawer_overlay_base_classes ⇒ Object

Base CSS classes for overlay backdrop Animated background overlay with fade transition



10
11
12
13
14
15
16
17
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 10

def drawer_overlay_base_classes
  [
    "fixed inset-0 z-50 bg-black/50",
    "transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
    "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
    "data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none"
  ].join(" ")
end

#drawer_overlay_classes ⇒ Object

Merge base classes with custom classes using TailwindMerge



20
21
22
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 20

def drawer_overlay_classes
  TailwindMerge::Merger.new.merge([drawer_overlay_base_classes].compact.join(" "))
end

#drawer_overlay_container_base_classes ⇒ Object

Container wrapper classes Always visible to allow animations - control visibility via pointer-events



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

def drawer_overlay_container_base_classes
  "fixed inset-0 z-50 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none"
end

#drawer_overlay_container_classes ⇒ Object

Merge container base classes with custom classes



31
32
33
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 31

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

#drawer_overlay_container_data_attributes ⇒ Object

Data attributes for container



36
37
38
39
40
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 36

def drawer_overlay_container_data_attributes
  {
    ui__drawer_target: "container"
  }
end

#drawer_overlay_container_html_attributes ⇒ Object

Build complete HTML attributes hash for container wrapper



57
58
59
60
61
62
63
64
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 57

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

#drawer_overlay_data_attributes ⇒ Object

Data attributes for overlay backdrop (Stimulus only)



43
44
45
46
47
48
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 43

def drawer_overlay_data_attributes
  {
    ui__drawer_target: "overlay",
    action: "click->ui--drawer#closeOnOverlayClick"
  }
end

#drawer_overlay_html_attributes ⇒ Object

Build complete HTML attributes hash for overlay backdrop



67
68
69
70
71
72
73
74
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 67

def drawer_overlay_html_attributes
  {
    class: drawer_overlay_classes,
    "data-state": @open ? "open" : "closed",
    "data-vaul-overlay": "",
    data: drawer_overlay_data_attributes
  }
end

#merged_drawer_overlay_container_data_attributes ⇒ Object

Merge user-provided data attributes for container



51
52
53
54
 
# File 'app/behaviors/ui/drawer_overlay_behavior.rb', line 51

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