Module: UI::DialogContentBehavior

Included in:
DialogContent, DialogContentComponent
Defined in:
app/behaviors/ui/dialog_content_behavior.rb

Overview

Shared behavior for Dialog Content component Handles content area styling, ARIA attributes, and animations

Instance Method Summary collapse

Instance Method Details

#dialog_content_base_classes ⇒ Object

Base CSS classes for dialog content Use opacity-0/scale-95 and pointer-events-none when closed for smooth animations



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

def dialog_content_base_classes
  "bg-background data-[state=closed]:invisible data-[state=open]:visible 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]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg"
end

#dialog_content_classes ⇒ Object

Merge base classes with custom classes using TailwindMerge



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

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

#dialog_content_data_attributes ⇒ Object

Data attributes for Stimulus target



20
21
22
23
24
 
# File 'app/behaviors/ui/dialog_content_behavior.rb', line 20

def dialog_content_data_attributes
  {
    ui__dialog_target: "content"
  }
end

#dialog_content_html_attributes ⇒ Object

Build complete HTML attributes hash for dialog content



33
34
35
36
37
38
39
40
41
42
43
44
45
 
# File 'app/behaviors/ui/dialog_content_behavior.rb', line 33

def dialog_content_html_attributes
  base_attrs = @attributes&.except(:data) || {}
  attrs = base_attrs.merge(
    class: dialog_content_classes,
    role: "dialog",
    "aria-modal": "true",
    "data-state": @open ? "open" : "closed",
    data: merged_dialog_content_data_attributes
  )
  # Add inert when closed to prevent focus on elements inside
  attrs[:inert] = true unless @open
  attrs
end

#merged_dialog_content_data_attributes ⇒ Object

Merge user-provided data attributes



27
28
29
30
 
# File 'app/behaviors/ui/dialog_content_behavior.rb', line 27

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