Packages
moon
2.76.0
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/tabs/list.ex
defmodule Moon.Design.Tabs.List do
@moduledoc false
use Moon.StatelessComponent, slot: "header"
alias Surface.Components.Dynamic.Component
import Moon.Helpers.MakeList
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Size of tabs"
prop(size, :string, values!: ~w(sm md), default: "md")
@doc "Will be got from Tabs in most cases"
prop(selected, :integer, from_context: :selected)
@doc "Value of the tab"
prop(value, :integer, from_context: :value)
@doc "List of tab titles. They are rendered with tab_module. Only if no slot tabs assigned"
prop(tab_titles, :list, default: [])
@doc "List of tab titles. THe are rendered with tab_module. Only if no slot tabs assigned"
prop(tab_module, :atom, default: Moon.Design.Tabs.Tab)
@doc "Event to happen when non-disabled tab is clicked"
prop(on_change, :event, from_context: :on_change)
@doc "Tabs slot"
slot(tabs)
@doc "Default slot"
slot(default)
@doc "Slot for redering tab title when tab_tiltles given"
slot(tab_title)
def render(assigns) do
~F"""
<div
class={merge(["flex items-center justify-left w-full", (@size == "sm" && "gap-1") || "gap-2", @class])}
role="tablist"
aria-orientation="horizontal"
{=@id}
data-testid={@testid}
>
<#slot {@default} />
{#if slot_assigned?(:tabs)}
{#for {tab, tabindex} <- Enum.with_index(make_list(@tabs))}
<#slot
{tab}
context_put={
is_selected: tabindex == @selected,
is_last: tabindex + 1 == make_list(@tabs) |> length(),
size: @size,
tabindex: tabindex,
selected: @selected
}
/>
{/for}
{#else}
<Component
:for={{title, tabindex} <- Enum.with_index(@tab_titles)}
module={@tab_module}
is_selected={tabindex == @selected}
{=@size}
is_last={tabindex + 1 == @tab_titles |> length()}
{=tabindex}
{=@on_change}
{=@selected}
>
<#slot {@tab_title, title: title, tabindex: tabindex}>{title}</#slot>
</Component>
{/if}
</div>
"""
end
end