Packages
moon
2.71.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/carousel.ex
defmodule Moon.Design.Carousel do
@moduledoc false
use Moon.StatefulComponent
alias Phoenix.LiveView.JS
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Index of selected item"
prop(value, :integer, default: 0)
@doc "The function to call when reel is updated"
prop(on_change, :event)
@doc "Step of scroll"
prop(step, :integer, default: 1)
@doc "Interval of auto sliding in milliseconds. No auto sliding if undefined"
prop(autoslide_delay, :integer)
@doc "Reel of Carousel component, see Carousel.Reel"
slot(reel)
@doc "Left arrow of Carousel component, see Carousel.LeftArrow"
slot(left_arrow)
@doc "Right arrow of Carousel component, see Carousel.RightArrow"
slot(right_arrow)
@doc "Default slot of Carousel component, used for customized arrows"
slot(default)
def render(assigns) do
~F"""
<div
{=@id}
class={merge(["relative w-full", @class])}
data-testid={@testid}
:hook="default"
data-autoslide_delay={@autoslide_delay}
data-step={@step}
data-value={@value}
>
<#slot />
<#slot
{@left_arrow}
context_put={
value: @value - @step,
on_change: @on_change || JS.dispatch("triggerLeftArrowClick", detail: %{})
}
/>
<#slot
{@reel}
context_put={
value: @value,
autoslide_delay: @autoslide_delay,
on_change: @on_change || %{name: "set_selected_index", target: @myself}
}
/>
<#slot
{@right_arrow}
context_put={
value: @value + @step,
on_change: @on_change || JS.dispatch("triggerRightArrowClick", detail: %{})
}
/>
</div>
"""
end
def handle_event("set_selected_index", %{"value" => item}, socket) do
new_value = String.to_integer(item)
{:noreply, assign(socket, value: new_value)}
end
end