Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon/design/dropdown/badge.ex
defmodule Moon.Design.Dropdown.Badge do
@moduledoc "Displaying number of tems selected with close [x] button"
use Moon.StatelessComponent
alias Moon.Icon
alias Phoenix.LiveView.JS
@doc "Data-testid attribute for html tag"
prop(testid, :string)
@doc "Id attribute for html tag"
prop(id, :string)
@doc "Additional CSS classes for the html tag"
prop(class, :css_class)
@doc "Number to be shown on badge"
prop(count, :integer)
@doc "Common moon size"
prop(size, :string, values!: ~w(sm md lg), from_context: :size)
def render(assigns) do
~F"""
<span
{=@id}
data-testid={@testid}
class={merge([
"flex-shrink-0 chip bg-bulma text-goku flex items-center justify-center rounded-moon-s-xs cursor-pointer text-moon-12",
["h-4 px-0.5": @size == "sm", "h-6 px-1": @size != "sm"],
@class
])}
:on-click={JS.dispatch("moon2:clean-checkboxes")}
>
<span class={"px-0.5": @size == "sm", "px-1": @size != "sm"}>{@count}</span>
<Icon name="controls_close" class="text-goku text-moon-12" />
</span>
"""
end
end