Packages
moon
2.79.13
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 flex-nowrap", @class}
{=@selected}
>
<Tabs.List
class={
"flex-col overflow-x-hidden overflow-y-auto items-center md:items-start w-1/4 md:w-1/3 pe-10 ps-8 rounded-moon-s-lg",
"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 md:inline hidden">{title.title}</span>
<p class="text-moon-14 text-trunks text-start md: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