Packages
moon
2.90.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/components/dialog/modal.ex
defmodule Moon.Components.Dialog.Modal.BackgroundCover do
@moduledoc false
use Moon.StatelessComponent
prop(close, :event)
def render(assigns) do
~F"""
<div
:on-click={@close}
class="fixed inset-0 bg-black opacity-[.66] transition-opacity z-10"
aria-hidden="true"
/>
"""
end
end
defmodule Moon.Components.Dialog.Modal.Panel do
@moduledoc false
use Moon.StatelessComponent
prop(id, :string)
prop(testid, :string)
prop(close, :event)
slot(default)
def render(assigns) do
~F"""
<div
id={@id}
testid={@testid}
:on-click-away={@close}
class="inline-block align-bottom rounded shadow-xl transition-all sm:align-middle sm:max-w-lg sm:w-full bg-goku z-40 relative overflow-hidden"
>
<#slot />
</div>
"""
end
end
defmodule Moon.Components.Dialog.Modal do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Autolayouts.PullAside
alias Moon.Components.Divider
alias Moon.Icons.ControlsClose
alias __MODULE__.BackgroundCover
alias __MODULE__.Panel
prop(id, :string)
prop(testid, :string)
prop(close, :event)
slot(title)
slot(content)
slot(footer)
def render(assigns) do
~F"""
<div
id={@id}
testid={@testid}
class="fixed z-10 inset-0 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<BackgroundCover />
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<Panel id={"#{@id}-panel"} testid={"#{@testid}-panel"} close={@close}>
<PullAside class="py-4 px-6">
<:left>
{#if slot_assigned?(:title)}
<div class="text-moon-18 font-semibold">
<#slot {@title} />
</div>
{/if}
</:left>
<:right>
<div :on-click={@close} data-testid={"#{@testid}-controls-close"}><ControlsClose /></div>
</:right>
</PullAside>
<Divider />
{#if slot_assigned?(:content)}
<div class="text-left p-6">
<#slot {@content} />
</div>
{/if}
<Divider />
{#if slot_assigned?(:footer)}
<div class="p-6">
<#slot {@footer} />
</div>
{/if}
</Panel>
</div>
</div>
"""
end
end