Packages
moon
2.89.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/menu_item.ex
defmodule Moon.Design.MenuItem do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.AsComponent
alias Moon.Lego
@doc "Attribute data-testid for the tag"
prop(testid, :string)
@doc "An id attribute for the slot"
prop(id, :string)
@doc "Any additional CSS classes for the DOM element"
prop(class, :css_class)
@doc "Some title. If no default slot given - will add Lego.Title with this title"
prop(title, :string)
@doc "Some text. If no default slot given - will add Lego.MultiTitle with this text and title"
prop(text, :string)
@doc "Some additional classes will be added to indicate is active"
prop(is_active, :boolean, default: false)
@doc "Add this as is_selected value and also work for underlying checkbox/radio"
prop(is_selected, :boolean, default: false)
@doc "Well, on-click event handler"
prop(on_click, :event)
@doc "Wenever add Checbox/Switch/Radio inside when no default slot is given"
prop(role, :string, values: ~w(checkbox switch radio))
@doc "CSS class for width"
prop(width, :css_class, default: "w-full")
@doc "Which tag should be set for rendering"
prop(as, :string, values!: ~w(a button div), default: "button")
@doc "A href attribute when prop as=\"a\""
prop(href, :string)
@doc "Additional attributes set for the tag"
prop(attrs, :map, default: %{})
@doc "Value atrribute if needs to be assigned"
prop(value, :integer)
@doc "Size of menu item"
prop(size, :string, values: ["md", "lg", "xl"], default: "md")
@doc "Inner content of the component, some properties are ignored when set - see above"
slot(default)
def render(assigns) do
~F"""
<AsComponent
{=@id}
{=@as}
{=@href}
{=@role}
{=@value}
class={merge([
[
"flex justify-between items-center bg-transparent rounded-moon-i-sm text-moon-14",
"focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition",
@width,
"bg-heles": @is_active || @is_selected,
"p-2 gap-2": @size == "md",
"p-3 gap-3": @size == "lg",
"p-4 gap-4": @size == "xl"
],
@class
])}
{=@attrs}
on_click={@on_click}
values={is_selected: !@is_selected}
testid={@testid}
>
<#slot context_put={is_selected: @is_selected}>
<Lego.Title {=@title} :if={@title && !@text} />
<Lego.MultiTitle {=@title} {=@text} :if={@text} />
<Lego.Checkbox :if={@role == "checkbox"} {=@is_selected} />
<Lego.Radio :if={@role == "radio"} {=@is_selected} />
<Lego.ChevronUpDown :if={@role == "switch"} {=@is_selected} />
</#slot>
</AsComponent>
"""
end
end