Packages
moon
2.71.1
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/parts/modal.ex
defmodule Moon.Parts.Modal do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.Modal
alias Moon.Parts.IconButton
@doc "id attribute for Modal"
prop(id, :string, required: true)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Title of the modal"
prop(title, :string)
@doc "On close button is pressed event. Is used if no close_button slot is given"
prop(on_close, :event)
@doc "Close button slot"
slot(close_button)
slot(default)
def render(assigns) do
~F"""
<Modal {=@id} {=@testid}>
<Modal.Backdrop />
<Modal.Panel class={
"flex flex-col max-w-[68.5rem] min-h-[20rem] p-8 w-auto rounded-[1.25rem] bg-goku relative",
@class
}>
<h3 :if={@title} class="text-moon-24 text-bulma font-grotesk w-full">{@title}</h3>
<#slot {@close_button}>
<IconButton.White
:if={@on_close}
class="absolute end-2 top-2 z-10"
icon="controls_close_small"
on_click={@on_close}
/>
</#slot>
<#slot />
</Modal.Panel>
</Modal>
"""
end
defdelegate open(id), to: Modal
defdelegate close(id), to: Modal
end