Packages
moon
2.85.1
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/switch.ex
defmodule Moon.Design.Switch do
@moduledoc false
use Moon.StatelessComponent
prop(checked, :boolean, default: false)
prop(disabled, :boolean, default: false)
prop(size, :string, values: ["2xs", "xs", "sm"], default: "sm")
prop(on_bg_color, :css_class, default: "bg-piccolo")
prop(off_bg_color, :css_class, default: "bg-beerus")
prop(switcher_class, :css_class)
prop(on_change, :event)
slot(off_icon)
slot(on_icon)
prop(id, :string)
prop(testid, :string)
prop(class, :css_class)
@spec render(map) :: Phoenix.LiveView.Rendered.t()
def render(assigns) do
~F"""
<button
{=@id}
type="button"
aria-pressed={"#{@checked}"}
disabled={@disabled}
class={merge([
[
"block rounded-full transition",
(@checked && @on_bg_color) || @off_bg_color,
"w-7 h-4 p-0.5": @size == "2xs",
"w-11 h-6 p-1": @size == "xs",
"w-[3.75rem] h-8 p-1": @size == "sm",
"cursor-pointer": !@disabled,
"opacity-60 cursor-not-allowed select-none": @disabled
],
@class
])}
value={"#{!@checked}"}
data-testid={@testid}
:on-click={@on_change}
>
<span class="block relative h-full w-full">
{#if slot_assigned?(:on_icon)}
<span
class={merge([
"z-1 absolute ltr:left-0 rtl:right-0 top-1/2 -translate-y-1/2 transition-opacity flex text-goten opacity-100",
get_icon_size(@size),
"opacity-0": !@checked
])}
aria-hidden="true"
>
<#slot {@on_icon} />
</span>
{/if}
{#if slot_assigned?(:off_icon)}
<span
class={merge([
"z-1 absolute ltr:right-0 rtl:left-0 top-1/2 -translate-y-1/2 transition-opacity flex text-bulma opacity-0",
get_icon_size(@size),
"opacity-100": !@checked
])}
aria-hidden="true"
>
<#slot {@off_icon} />
</span>
{/if}
<span
aria-hidden="true"
class={merge([
[
"z-5 absolute top-1/2 -translate-y-1/2 translate-x-0 shadow-moon-sm pointer-events-none rounded-full",
"bg-goten transition-all",
"w-3 h-3 ltr:left-[calc(100%-12px)] rtl:right-[calc(100%-12px)]": @size == "2xs",
"w-4 h-4 ltr:left-[calc(100%-16px)] rtl:right-[calc(100%-16px)]": @size == "xs",
"w-6 h-6 ltr:left-[calc(100%-24px)] rtl:right-[calc(100%-24px)]": @size == "sm",
"ltr:left-0 rtl:right-0": !@checked
],
@switcher_class
])}
/>
</span>
</button>
"""
end
def get_icon_size(size) do
case size do
"2xs" -> "text-moon-12 "
"xs" -> "text-moon-16 "
"sm" -> "text-moon-24 "
end
end
end