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/drawer.ex
defmodule Moon.Design.Drawer do
@moduledoc false
use Moon.StatefulComponent
prop(is_open, :boolean, default: false)
data(is_closing, :boolean, default: false)
slot(panel, required: true)
slot(backdrop)
prop(on_close, :event)
prop(lg_persists, :boolean)
prop(testid, :string)
prop(class, :css_class)
def render(assigns) do
~F"""
<div
{=@id}
phx-hook="Animation"
data-is_open={@is_open}
data-is_closing={"#{@is_closing}"}
data-lg_persists={@lg_persists}
aria-expanded={(@is_open && "true") || "false"}
class={merge(["fixed z-[99999] inset-0 hidden", @class])}
data-testid={@testid}
>
<#slot {@backdrop} />
<#slot
{@panel}
context_put={
on_close: @on_close || %{name: "start_closing_drawer", target: @myself}
}
/>
</div>
"""
end
def open(drawer_id) do
send_update(__MODULE__, id: drawer_id, is_open: true)
end
def close(drawer_id) do
send_update(__MODULE__, id: drawer_id, is_closing: true)
end
def handle_event("set_open", _, socket) do
{:noreply, assign(socket, is_open: true)}
end
def handle_event("start_closing_drawer", _, socket) do
{:noreply, assign(socket, is_closing: true)}
end
def handle_event("stop_closing", _, socket) do
{:noreply, assign(socket, is_closing: false)}
end
def handle_event("set_close", _, socket) do
{:noreply, assign(socket, is_open: false, is_closing: false)}
end
end