Packages
moon
2.68.10
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/components/chip.ex
defmodule Moon.Components.Chip do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Icon
slot(default)
prop(id, :string)
prop(class, :string)
prop(left_icon, :string)
prop(right_icon, :string)
prop(on_click, :event)
prop(value, :string)
prop(value_name, :string)
prop(active, :boolean, default: false)
prop(active_class, :string, default: "")
prop(inactive_class, :string, default: "")
prop(testid, :string)
prop(size, :string, values: ["small", "medium"], default: "medium")
prop(is_stroke, :boolean, default: false)
prop(icon_only, :string)
prop(variant, :string, values: ["default", "ghost"], default: "default")
prop(button_type, :string, values: ["submit", "reset", "button"], default: "submit")
def render(assigns) do
~F"""
<button
id={@id}
class={
"flex justify-center items-center rounded-moon-i-sm relative transition text-moon-14",
"hover:text-piccolo hover:bg-piccolo/[.12] #{@class} #{active_btn_class(@active, @active_class, @inactive_class)}",
get_padding(@size, @left_icon, @right_icon, @icon_only),
get_bg_color(@active, @variant),
"h-8 w-8": @size == "small" && !slot_assigned?(:default),
"h-10 w-10": @size == "medium" && !slot_assigned?(:default),
"shadow-border": @is_stroke && @active,
"hover:shadow-border": @is_stroke
}
data-size={@size}
data-testid={@testid}
:on-click={@on_click}
{...phx_val_tag(@value_name || (@value && "click_value") || nil, @value)}
type={@button_type}
>
<Icon name={@left_icon} font_size="1.5rem" :if={@left_icon && !@icon_only} />
<Icon name={@icon_only} font_size="1.5rem" :if={@icon_only} />
<#slot :if={!@icon_only} />
<Icon name={@right_icon} font_size="1.5rem" :if={@right_icon && !@icon_only} />
</button>
"""
end
defp get_padding(size, left_icon, right_icon, icon_only) do
if size == "medium" do
if icon_only do
"p-2 gap-2"
else
"py-2 gap-2 #{if left_icon, do: "pl-2", else: "pl-3"} #{if right_icon, do: "pr-2", else: "pr-3"}"
end
else
if icon_only do
"p-1 gap-1"
else
"py-1 gap-1 #{if left_icon, do: "pl-1", else: "pl-2"} #{if right_icon, do: "pr-1", else: "pr-2"}"
end
end
end
defp phx_val_tag(nil, _), do: []
defp phx_val_tag(name, value) do
# credo:disable-for-next-line Credo.Check.Warning.UnsafeToAtom
key = String.to_atom("phx-value-#{name}")
[{key, value}]
end
defp active_btn_class(true, active_class, _),
do: "text-piccolo bg-opacity-12 #{active_class}"
defp active_btn_class(false, _, inactive_class),
do: "text-bulma bg-goku #{inactive_class}"
defp get_bg_color(active, variant) do
if variant == "default" do
if active, do: "bg-piccolo", else: "bg-goku"
else
"bg-transparent"
end
end
end