Packages
moon
2.69.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/modal.ex
defmodule Moon.Design.Modal do
@moduledoc false
use Moon.StatefulComponent
prop(is_open, :boolean, default: false)
data(is_closing, :boolean, default: false)
slot(backdrop, required: true)
slot(panel, required: true)
prop(on_close, :event)
prop(testid, :string)
def render(assigns) do
~F"""
<div
{=@id}
phx-hook="Animation"
data-is_open={@is_open}
data-is_closing={"#{@is_closing}"}
aria-modal={(@is_open && "true") || "false"}
class="fixed inset-0 z-[99999] overflow-y-auto hidden"
data-testid={@testid}
>
<div class="flex min-h-full items-center justify-center p-4">
<#slot {@backdrop} />
<#slot
{@panel}
context_put={
on_close: @on_close || %{name: "start_closing_modal", target: @myself}
}
/>
</div>
</div>
"""
end
def open(modal_id) do
send_update(__MODULE__, id: modal_id, is_open: true)
end
def close(modal_id) do
send_update(__MODULE__, id: modal_id, is_closing: true)
end
def handle_event("set_open", _, socket) do
{:noreply, assign(socket, is_open: true)}
end
def handle_event("start_closing_modal", _, 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