Packages
moon
2.80.2
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/components/breadcrumb/subcomponents/collapsed.ex
defmodule Moon.Components.Breadcrumb.Collapsed do
@moduledoc false
use Moon.StatefulComponent
alias Moon.Icons.ArrowsRight
alias Moon.Components.Button
alias Phoenix.LiveView.JS
prop(breadcrumbs, :list)
data(shown_breadcrumbs, :list, default: [])
data(items, :list, default: [])
def update(assigns, socket) do
count = Enum.count(assigns.breadcrumbs)
first_crumb = Enum.at(assigns.breadcrumbs, 0)
tail_breadcrumbs = Enum.take(assigns.breadcrumbs, -2)
shown_breadcrumbs = Enum.concat([first_crumb], tail_breadcrumbs)
items = Enum.slice(assigns.breadcrumbs, 1..(count - 2))
socket =
socket
|> assign(assigns)
|> assign(
:shown_breadcrumbs,
shown_breadcrumbs
)
|> assign(
:items,
items
)
{:ok, socket}
end
def render(assigns) do
~F"""
<nav aria-label="Breadcrumb">
<ol class="flex flex-wrap gap-2 items-center text-moon-14">
<li class="flex items-center gap-2 text-trunks">
<span class="text-trunks transition-colors duration-200 hover:text-bulma">
<a href={Enum.at(@shown_breadcrumbs, 0).link}>{Enum.at(@shown_breadcrumbs, 0).name}</a>
</span>
<ArrowsRight class="rtl:rotate-180" />
</li>
<li
class="relative"
phx-click-away={JS.dispatch("moon:close-breadcrumb-flyout", detail: %{breacrumb_flyout_id: "#{@id}_flyout"})}
>
<Button
variant="ghost"
right_icon="other3_dots_horizontal"
on_click={JS.dispatch("moon:toggle-collapsed-breadcrumbs", detail: %{breacrumb_flyout_id: "#{@id}_flyout"})}
/>
<ol
id={"#{@id}_flyout"}
class="absolute hidden left-0 top-full bg-goku p-1 mt-2 flex-col gap-2 shadow-moon-xl rounded-moon-s-xs z-[10000] min-w-[12rem]"
>
{#for crumb <- @items}
<li class="flex flex-col items-stretch text-bulma text-moon-14 brcrumb-li rounded-sm cursor-pointer hover:bg-gohan">
<a href={crumb.link}>{crumb.name}</a>
</li>
{/for}
</ol>
</li>
{#for {crumb, index} <- Enum.with_index(@shown_breadcrumbs)}
<li class="flex items-center gap-2 text-trunks" :if={index > 0}>
<ArrowsRight />
<span class={
"text-trunks transition-colors duration-200 hover:text-bulma",
"text-bulma font-medium": index == Enum.count(@shown_breadcrumbs) - 1
}>
<a href={crumb.link}>{crumb.name}</a>
</span>
</li>
{/for}
</ol>
</nav>
"""
end
end