Packages
moon
2.79.13
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/checkbox.ex
defmodule Moon.Design.Form.Checkbox do
@moduledoc "Checkbox to be rendered on form. Label is the root component. For rebdering outside the from please use Moon.Lego.Checkbox"
use Moon.StatelessComponent
alias Moon.Lego.Checkbox
alias Moon.Design.Form.Field.Label
@doc "Field name, surface-style"
prop(field, :atom, from_context: {Surface.Components.Form.Field, :field})
@doc "Form, surface-style"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Label to be shown to user"
prop(label, :string)
@doc "If the field is disabled"
prop(disabled, :boolean)
@doc "If the field is read-only"
prop(readonly, :boolean)
@doc "Id to be given to the HTML tag"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "Class to be given to the visible checkbox"
prop(class, :css_class)
@doc "Additional Tailwind classes for checkbox label"
prop(checkbox_label_class, :css_class)
@doc "On_click event for the checkbox"
prop(on_click, :event)
@doc "The value to be sent when the checkbox is checked. Defaults to \"true\""
prop(checked_value, :any, default: true)
@doc "Controls if this function will generate a hidden input to submit the unchecked value or not, defaults to \"true\"."
prop(hidden_input, :boolean, default: true)
@doc "The value to be sent when the checkbox is unchecked, defaults to \"false\"."
prop(unchecked_value, :any, default: false)
@doc "Adding [] to the field name for support multiple checkboxes with the same name"
prop(is_multiple, :boolean)
@doc "Size of the label"
prop(size, :string, values!: ~w(sm md lg), default: "md")
@doc "Inner content - put label here"
slot(default)
def render(assigns) do
~F"""
<Label
{=@size}
class={merge([
[
"relative inline-flex items-center select-none font-normal",
"opacity-disabled": @disabled,
"cursor-not-allowed select-none": @readonly || @disabled
],
get_config(:default_label_class),
@checkbox_label_class
])}
{=@field}
{=@form}
>
<Surface.Components.Form.Checkbox
{=@field}
{=@form}
{=@id}
{=@checked_value}
{=@unchecked_value}
{=@hidden_input}
click={(!@readonly && !@disabled && @on_click) || nil}
class="opacity-0"
opts={[
disabled: @disabled || @readonly,
readonly: @readonly,
"data-testid": @testid
] ++ maybe_multiple_opts(assigns)}
/>
<Checkbox
is_selected={is_selected(assigns)}
class={merge([
"absolute top-1 ltr:left-0 rtl:right-0",
get_config(:default_class),
@class
])}
/>
<#slot>{@label}</#slot>
</Label>
"""
end
defp is_selected(%{form: form, field: field, checked_value: checked_value, is_multiple: true}) do
checked_value in (form[field].value || [])
end
defp is_selected(%{form: form, field: field, checked_value: checked_value}) do
"#{checked_value}" === "#{form[field].value}"
end
defp maybe_multiple_opts(assigns = %{form: form, field: field, is_multiple: true}),
do: [name: form[field].name <> "[]", checked: is_selected(assigns)]
defp maybe_multiple_opts(_), do: []
end