Packages
moon
2.72.3
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/form/switch.ex
defmodule Moon.Design.Form.Switch do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.Switch
alias Phoenix.LiveView.JS
import Phoenix.HTML.Form, only: [input_id: 2]
import Moon.Helpers.Form, only: [value_is_true: 2]
prop(field, :atom, from_context: {Surface.Components.Form.Field, :field})
prop(form, :form, from_context: {Surface.Components.Form, :form})
prop(label, :string)
prop(disabled, :boolean, default: false)
prop(readonly, :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(class, :css_class)
prop(testid, :string)
prop(id, :string)
slot(on_icon)
slot(off_icon)
def render(assigns) do
~F"""
<div>
<Surface.Components.Form.Checkbox
{=@field}
{=@form}
class="hidden"
opts={disabled: @disabled, readonly: @readonly}
/>
<Switch
{=@size}
{=@on_bg_color}
{=@off_bg_color}
disabled={@disabled || @readonly}
{=@class}
{=@testid}
{=@id}
on_change={on_click(@form, @field)}
checked={value_is_true(@form, @field)}
>
<:on_icon>
<#slot {@on_icon} />
</:on_icon>
<:off_icon>
<#slot {@off_icon} />
</:off_icon>
</Switch>
{@label}
</div>
"""
end
defp on_click(form, field) do
JS.dispatch("moon2:update-switch",
detail: %{checked: !value_is_true(form, field)},
to: "##{input_id(form, field)}"
)
end
end