Packages
moon
2.72.4
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/item.ex
defmodule Moon.Design.Breadcrumb.Item do
@moduledoc false
use Moon.StatelessComponent, slot: "item"
alias Moon.Icon
@doc "Id of the component"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(divider_class, :css_class, from_context: :divider_class)
@doc "Title of the crumb"
prop(title, :string, from_context: :title)
@doc "Link to the crumb"
prop(href, :string, from_context: :href)
@doc "Icon of the crumb"
prop(icon, :string, from_context: :icon)
@doc "Index of the item in the list of breadcrumbs"
prop(value, :integer, from_context: :value)
@doc "Name of custom icon used as a divider between breadcrumb items"
prop(divider, :string, from_context: :divider)
@doc "Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...)"
prop(responsive_crumbs_on, :string, from_context: :responsive_crumbs_on)
@doc "Default slot"
slot(default)
@doc "Divider slot"
slot(divider_slot)
def render(assigns) do
~F"""
<li
class={merge([
"flex items-center text-trunks text-moon-14 last:text-bulma last:font-medium",
@class
])}
{=@id}
data-testid={@testid}
>
<#slot
{@divider_slot}
context_put={
value: @value != 0,
divider: @divider || "arrows_right"
}
>
<Icon
name={@divider || "arrows_right"}
class={merge(["rtl:rotate-180 mx-2 text-moon-14 text-trunks", @divider_class])}
:if={@value != 0}
/>
</#slot>
<span class={merge([
"transition-colors duration-200 ",
hidden: @responsive_crumbs_on,
"#{breadcrumb_classes(@responsive_crumbs_on)}": @responsive_crumbs_on
])}>
<a href={@href}>
<Icon name={@icon} class="text-moon-24" :if={@icon && @icon != ""} />
<#slot>{@title}</#slot>
</a>
</span>
<span
:if={@responsive_crumbs_on}
class={merge([
"inline",
ellipsed_breadcrumb_classes(@responsive_crumbs_on)
])}
>
<a href={@href}>
<Icon name={@icon} class="text-moon-24" :if={@icon && @icon != ""} />
{#if @title && @title != ""}
{name_with_ellips(@title)}
{/if}
</a>
</span>
</li>
"""
end
defp name_with_ellips(name) do
[first_word | _] = String.split(name)
if String.split(name) |> tl() != [] do
first_word <> "..."
else
first_word
end
end
defp breadcrumb_classes(nil), do: []
defp breadcrumb_classes(size) do
~w(inline) |> Enum.map(&"#{size}:#{&1}")
end
defp ellipsed_breadcrumb_classes(nil), do: []
defp ellipsed_breadcrumb_classes(size) do
~w(hidden) |> Enum.map(&"#{size}:#{&1}")
end
end