Class: Shadcn::Carousel::Component

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

Overview

Port of registry/new-york-v4/ui/carousel.tsx

Upstream builds this on embla-carousel, and this port does not. That is a measurement rather than a preference: of embla's 3,170 lines, carousel.tsx reaches for six things — scrollPrev, scrollNext, canScrollPrev, canScrollNext and the select/reInit events — and everything else about the component is flex markup and two buttons.

The six are what a scroll container already answers. The viewport is a scroller with snap points, so the browser does the dragging, the momentum and the snapping, and this controller reads scrollLeft for the two canScroll questions and writes it for the two scroll ones. It is the same trade scroll-area made — the layout is CSS, and the controller computes a number per axis.

What is not reproduced is in features/carousel.md: opts (embla's loop, align, slidesToScroll), the api object, its event stream, and plugins. None has markup, so parity_spec cannot see their absence; the feature doc is where that is written down.

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

Constructor Details

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

Returns a new instance of Component.



37
38
39
40
 
# File 'app/components/shadcn/carousel/component.rb', line 37

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

Instance Attribute Details

#orientation ⇒ Object (readonly)

Returns the value of attribute orientation.



35
36
37
 
# File 'app/components/shadcn/carousel/component.rb', line 35

def orientation
  @orientation
end

Instance Method Details

#call ⇒ Object 



56
57
58
 
# File 'app/components/shadcn/carousel/component.rb', line 56

def call
  render_element(body: safe_join([ carousel_content, previous, next_control, content ].compact))
end

#element_attributes(**defaults) ⇒ Object 



42
43
44
45
46
47
48
49
50
51
52
53
54
 
# File 'app/components/shadcn/carousel/component.rb', line 42

def element_attributes(**defaults)
  super(**{
    role: "region",
    "aria-roledescription" => "carousel",
    "data-orientation" => orientation,
    "data-controller" => "shadcn--carousel",
    "data-shadcn--carousel-orientation-value" => orientation,
    # Capture, as upstream does (`onKeyDownCapture`, carousel.tsx:119): a
    # slide can hold controls of its own, and one that stops a keydown
    # would otherwise take the carousel's arrows with it.
    "data-action" => "keydown->shadcn--carousel#keydown:capture"
  }.merge(defaults))
end