Packages
moon
2.90.2
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/group.ex
defmodule Moon.Design.Form.Group do
@moduledoc """
Component for visual groupping Form.Input & Form.Select
"""
use Moon.StatelessComponent
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(field_class, :css_class, from_context: :field_class)
@doc "Group orientation"
prop(orientation, :string, values!: ~w(horizontal vertical), default: "vertical")
@doc "Inner content of the component"
slot(default, required: true)
def render(assigns) do
~F"""
<div
class={merge([
"flex border-none bg-goku rounded-moon-i-sm h-fit",
(@orientation == "horizontal" && "flex-row") || "flex-col",
@class
])}
{=@id}
data-testid={@testid}
>
<#slot context_put={
field_class:
merge([
(@orientation == "vertical" &&
[
"not-last:rounded-bl-none not-last:rounded-br-none not-last:not(:moon-error):input-bbb-hidden",
"not-first:rounded-tl-none not-first:rounded-tr-none not-first:not(:moon-error):input-tbb-hidden"
]) ||
[
"flex-1 basis-1/2",
"not-last:rtl:rounded-bl-none not-last:rtl:rounded-tl-none not-last:rtl:not(:moon-error):input-lsb-hidden",
"not-last:ltr:rounded-br-none not-last:ltr:rounded-tr-none not-last:ltr:not(:moon-error):input-rsb-hidden",
"not-first:rtl:rounded-tr-none not-first:rtl:rounded-br-none not-first:rtl:not(:moon-error):input-rsb-hidden",
"not-first:ltr:rounded-tl-none not-first:ltr:rounded-bl-none not-first:ltr:not(:moon-error):input-lsb-hidden"
] ++
[@field_class]
])
} />
</div>
"""
end
end