Class: Shadcn::Drawer::Content::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/drawer/content/component.rb

Overview

DrawerContent — renders its own overlay, as the TSX does, and the drag handle above the content.

Unlike the Sheet, the four edges are not cva variants: upstream emits all four sets of classes at once and lets data-vaul-drawer-direction pick between them, so this element carries every one of them and the attribute does the choosing. That attribute name is vaul's, not ours — it is in the class strings this port has to reproduce byte for byte, so the markup has to speak it.

Constant Summary collapse

DIRECTIONS = 
%i[top bottom left right].freeze
HANDLE_CLASSES = 
"mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted " \
"group-data-[vaul-drawer-direction=bottom]/drawer-content:block"

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(direction: :bottom, **attributes) ⇒ Component

Returns a new instance of Component.



46
47
48
49
 
# File 'app/components/shadcn/drawer/content/component.rb', line 46

def initialize(direction: :bottom, **attributes)
  @direction = DIRECTIONS.include?(direction&.to_sym) ? direction.to_sym : :bottom
  super(**attributes)
end

Instance Attribute Details

#direction ⇒ Object (readonly)

Returns the value of attribute direction.



44
45
46
 
# File 'app/components/shadcn/drawer/content/component.rb', line 44

def direction
  @direction
end

Instance Method Details

#call ⇒ Object

shadcn wraps the overlay and the content in a DrawerPortal, which vaul relocates to document.body; here it stays put, as the dialog's does, and is display: contents so it adds no box of its own.



76
77
78
79
80
81
82
83
 
# File 'app/components/shadcn/drawer/content/component.rb', line 76

def call
  tag.div("data-slot": "drawer-portal", style: CONTENTS_STYLE) do
    safe_join([
      render(Overlay::Component.new("data-vaul-overlay": "", "data-shadcn--drawer-target": "overlay")),
      render_element(body: safe_join([ handle, header, content, footer ].compact))
    ])
  end
end

#element_attributes(**defaults) ⇒ Object 



51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
# File 'app/components/shadcn/drawer/content/component.rb', line 51

def element_attributes(**defaults)
  super(**{
    role: "dialog",
    "aria-modal" => "true",
    tabindex: "-1",
    "data-state" => "closed",
    hidden: true,
    "data-vaul-drawer" => "",
    "data-vaul-drawer-direction" => direction,
    # A constant, because this port has no snap points — and named
    # rather than dropped because vaul's own selectors carry it, and the
    # stylesheet reproduced in `shadcn.css` matches on it.
    "data-vaul-snap-points" => "false",
    "data-shadcn--dialog-target" => "content",
    "data-shadcn--drawer-target" => "content",
    "data-action" => "pointerdown->shadcn--drawer#press " \
                     "pointermove->shadcn--drawer#move " \
                     "pointerup->shadcn--drawer#release " \
                     "pointercancel->shadcn--drawer#release"
  }.merge(defaults))
end