Class: UI::ResponsiveDialog

Inherits:
Phlex::HTML
  • Object
show all
Includes:
ResponsiveDialogBehavior
Defined in:
app/components/ui/responsive_dialog.rb

Overview

ResponsiveDialog - Renders Dialog on desktop, Drawer on mobile Uses hybrid CSS + Stimulus approach for responsive switching at 768px (md breakpoint)

This component renders BOTH Dialog and Drawer, hiding one with CSS. The responsive-dialog Stimulus controller handles state synchronization.

Examples:

Basic usage

render UI::ResponsiveDialog.new do |rd|
  rd.with_trigger { "Edit Profile" }
  rd.with_content do
    # Shared content for both Dialog and Drawer
    render_form
  end
end

Instance Method Summary collapse

Methods included from ResponsiveDialogBehavior

#merged_responsive_dialog_data_attributes, #responsive_dialog_base_classes, #responsive_dialog_classes, #responsive_dialog_data_attributes, #responsive_dialog_html_attributes

Constructor Details

#initialize(open: false, breakpoint: 768, direction: "bottom", classes: nil, **attributes) ⇒ ResponsiveDialog

Returns a new instance of ResponsiveDialog.



20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
# File 'app/components/ui/responsive_dialog.rb', line 20

def initialize(
  open: false,
  breakpoint: 768,
  direction: "bottom",
  classes: nil,
  **attributes
)
  @open = open
  @breakpoint = breakpoint
  @direction = direction
  @classes = classes
  @attributes = attributes
  @trigger_content = nil
  @content_block = nil
end

Instance Method Details

#view_template {|_self| ... } ⇒ Object

Yields:

  • (_self)

Yield Parameters:



46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'app/components/ui/responsive_dialog.rb', line 46

def view_template(&block)
  # Allow block-based API
  yield(self) if block_given?

  div(**responsive_dialog_html_attributes) do
    # Mobile: Drawer (hidden on md and up)
    div(class: "md:hidden", data: {ui__responsive_dialog_target: "drawer"}) do
      render_drawer
    end

    # Desktop: Dialog (hidden below md)
    div(class: "hidden md:block", data: {ui__responsive_dialog_target: "dialog"}) do
      render_dialog
    end
  end
end

#with_content(&block) ⇒ Object

Builder method for content



42
43
44
 
# File 'app/components/ui/responsive_dialog.rb', line 42

def with_content(&block)
  @content_block = block
end

#with_trigger(&block) ⇒ Object

Builder method for trigger



37
38
39
 
# File 'app/components/ui/responsive_dialog.rb', line 37

def with_trigger(&block)
  @trigger_content = block
end