Class: Shadcn::ScrollArea::Scrollbar::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/scroll_area/scrollbar/component.rb

Overview

Radix's ScrollAreaScrollbar, and shadcn's ScrollBar.

data-state is hidden from the server and the controller moves it. Radix unmounts the bar instead — with type="hover", the default, it is not in the DOM until the pointer arrives (measured on the live demo). Nothing is unmounted here for the same reason nothing is portalled, so the state attribute carries what a missing element carried there.

Constant Summary

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, #tag_name

Constructor Details

#initialize(orientation: :vertical, **attributes) ⇒ Component

Returns a new instance of Component.



31
32
33
34
 
# File 'app/components/shadcn/scroll_area/scrollbar/component.rb', line 31

def initialize(orientation: :vertical, **attributes)
  @orientation = orientation&.to_sym || :vertical
  super(**attributes)
end

Instance Attribute Details

#orientation ⇒ Object (readonly)

Returns the value of attribute orientation.



29
30
31
 
# File 'app/components/shadcn/scroll_area/scrollbar/component.rb', line 29

def orientation
  @orientation
end

Instance Method Details

#call ⇒ Object 



54
55
56
 
# File 'app/components/shadcn/scroll_area/scrollbar/component.rb', line 54

def call
  render_element(body: content.presence || render(Shadcn::ScrollArea::Thumb::Component.new))
end

#element_attributes(**defaults) ⇒ Object

The inline geometry is Radix's: the bar is absolutely positioned against the root and stops short of the corner, and the thumb's size travels as a custom property rather than as a width the controller writes on the thumb itself (measured on the live demo).



44
45
46
47
48
49
50
51
52
 
# File 'app/components/shadcn/scroll_area/scrollbar/component.rb', line 44

def element_attributes(**defaults)
  super(**{
    style: merged_style(position_style),
    "data-orientation" => orientation,
    "data-state" => "hidden",
    "data-shadcn--scroll-area-target" => "scrollbar",
    "data-action" => "pointerdown->shadcn--scroll-area#startDrag"
  }.merge(defaults))
end

#style_variants ⇒ Object 



36
37
38
 
# File 'app/components/shadcn/scroll_area/scrollbar/component.rb', line 36

def style_variants
  { orientation: }
end