Packages
moon
2.72.3
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/parts/wizard.ex
defmodule Moon.Parts.Wizard do
@moduledoc false
use Moon.StatefulComponent
alias __MODULE__
alias Moon.Design.Tabs
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Index of the selected step"
prop(selected, :integer, default: 0)
@doc "List of steps, format: [%{title, text}]"
prop(steps, :list, default: [])
@doc "Dark/Light theme switch"
prop(is_dark, :boolean, default: true)
@doc "Next button click event"
prop(on_next, :event)
@doc "Previous button click event"
prop(on_prev, :event)
@doc "Description slot"
slot(description)
@doc "Slot for buttons and so on"
slot(default)
@doc "Slot for tab panels"
slot(content)
@doc "Slot for custom step info rendering"
slot(step)
def render(assigns) do
~F"""
<div class="relative w-full">
<Tabs id={"#{@id}-tabs"} testid={@testid} class={"flex-row items-stretch", @class} {=@selected}>
<Tabs.List
class={
"flex-col overflow-x-hidden overflow-y-auto items-start w-1/3 pe-10 ps-8",
"theme-moon-dark bg-goku": @is_dark
}
tab_module={Wizard.Step}
tab_titles={@steps}
>
<#slot {@description} />
<:tab_title :let={tabindex: index, title: title}>
<#slot {@step, tabindex: index, title: title}>
<span class="text-moon-14 text-bulma font-medium">{title.title}</span>
<p class="text-moon-14 text-bulma text-start lg:inline hidden">{title.text}</p>
</#slot>
</:tab_title>
</Tabs.List>
<:content>
<#slot {@content} />
</:content>
</Tabs>
<#slot context_put={
on_next: @on_next || %{name: "next_page", target: @myself},
on_prev: @on_prev || %{name: "prev_page", target: @myself},
button_values: %{selected: @selected, total: Enum.count(@steps)}
} />
</div>
"""
end
def handle_event("next_page", %{"selected" => selected, "total" => tab_count}, socket) do
selected =
if String.to_integer(selected) >= tab_count,
do: String.to_integer(selected),
else: String.to_integer(selected) + 1
{:noreply, assign(socket, selected: selected)}
end
def handle_event("prev_page", %{"selected" => selected}, socket) do
selected = String.to_integer(selected) - 1
{:noreply, assign(socket, selected: selected)}
end
end