Packages
moon
2.73.1
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/breadcrumb/collapsed.ex
defmodule Moon.Design.Breadcrumb.Collapsed do
@moduledoc false
use Moon.StatefulComponent
alias Moon.Icon
alias Moon.Design.Breadcrumb.Item
alias Moon.Design.Breadcrumb.Dropdown
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "List of crumbs to display - Moon.Design.Breadcrumb.Crumb"
prop(breadcrumbs, :list)
@doc "Name of custom icon used as a divider between breadcrumb items"
prop(divider, :string, default: "arrows_right")
@doc "Name of custom icon used as a collapsed icon"
prop(icon, :string)
@doc "Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...)"
prop(responsive_crumbs_on, :string, values: ~w(sm md lg xl 2xl))
@doc "Additional Tailwind classes"
prop(divider_class, :css_class)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "List of shown crumbs - Moon.Design.Breadcrumb.Crumb"
data(shown_breadcrumbs, :list, default: [])
@doc "List of collapsed crumbs - Moon.Design.Breadcrumb.Crumb"
data(items, :list, default: [])
@doc "Items slot"
slot(item)
@doc "Dropdown slot for collapsed items"
slot(dropdown)
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 - 3))
socket =
socket
|> assign(assigns)
|> assign(
:shown_breadcrumbs,
shown_breadcrumbs
)
|> assign(
:items,
items
)
{:ok, socket}
end
def render(assigns) do
~F"""
<nav aria-label="Breadcrumb" data-testid={@testid}>
<ol class="flex flex-wrap items-center">
{#for {crumb, index} <- Enum.with_index(@shown_breadcrumbs)}
<#slot
{@item, crumb: crumb, index: index}
context_put={
value: index,
responsive_crumbs_on: @responsive_crumbs_on,
title: crumb.name,
href: crumb.link,
divider: @divider,
divider_class: @divider_class
}
>
<Item
{=@divider}
{=@responsive_crumbs_on}
{=@divider_class}
{=@class}
value={index}
href={crumb.link}
title={crumb.name}
icon={Map.get(crumb, :icon)}
/>
</#slot>
{#if index == 0}
<Icon
name={@divider}
class={merge(["rtl:rotate-180 mx-2 text-moon-14 text-trunks", @divider_class])}
/>
<#slot
{@dropdown}
context_put={
items: @items
}
>
<Dropdown {=@id} {=@items} {=@icon} />
</#slot>
{/if}
{/for}
</ol>
</nav>
"""
end
end