Packages
moon
2.78.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/drawer/panel.ex
defmodule Moon.Design.Drawer.Panel do
@moduledoc false
use Moon.StatelessComponent, slot: "panel"
slot(default)
prop(class, :css_class)
prop(testid, :string)
prop(id, :string)
prop(position, :string,
values!: [
"top",
"bottom",
"start",
"end"
],
default: "end"
)
# inner API
prop(on_close, :event, from_context: :on_close)
def render(assigns) do
~F"""
<div
{=@id}
data-animate_enter_class={animate_enter_class(@position)}
data-animate_leave_class={animate_leave_class(@position)}
class={merge([
[
"fixed w-full bg-goku text-bulma shadow-moon-xl",
"moon-panel",
"top-0": @position == "top",
"bottom-0": @position == "bottom",
"inset-y-0 ltr:left-0 rtl:right-0 w-5/6 max-w-md ": @position == "start",
"inset-y-0 ltr:right-0 rtl:left-0 w-5/6 max-w-md ": @position == "end"
],
@class
])}
:on-click-away={@on_close}
data-testid={@testid}
>
<#slot />
</div>
"""
end
defp animate_enter_class(position) do
case position do
"top" -> "animate-drawer_enter_top"
"bottom" -> "animate-drawer_enter_bottom"
"start" -> "ltr:animate-drawer_enter_left rtl:animate-drawer_enter_right"
"end" -> "ltr:animate-drawer_enter_right rtl:animate-drawer_enter_left"
end
end
defp animate_leave_class(position) do
case position do
"top" -> "animate-drawer_leave_top"
"bottom" -> "animate-drawer_leave_bottom"
"start" -> "ltr:animate-drawer_leave_left rtl:animate-drawer_leave_right"
"end" -> "ltr:animate-drawer_leave_right rtl:animate-drawer_leave_left"
end
end
end