Packages
moon
2.89.4
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 "Is modal open"
prop(is_open, :boolean)
@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 "Size of the modal"
prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "xl")
@doc "Close button slot"
slot(close_button)
@doc "Default slot for modal content"
slot(default)
def render(assigns) do
~F"""
<Modal {=@id} {=@testid} {=@on_close} {=@is_open}>
<Modal.Backdrop />
<Modal.Panel class={merge([
[
"flex flex-col p-8 w-auto h-auto rounded-[1.25rem] bg-goku relative",
get_modal_size_classes(@size)
],
@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-4 top-4 z-20"
icon="controls_close_small"
on_click={@on_close}
/>
</#slot>
<#slot />
</Modal.Panel>
</Modal>
"""
end
defdelegate open(id), to: Modal
defdelegate close(id), to: Modal
def get_modal_size_classes(size) do
case size do
"xs" -> "pb-4 pe-4 min-h-fit max-w-[28rem] max-h-[13.25rem] overflow-auto"
"sm" -> "min-h-fit max-w-[35rem] max-h-[28rem] overflow-auto"
"md" -> "min-h-fit max-w-[45.5rem] max-h-[34.25rem] overflow-auto"
"lg" -> "min-h-fit max-w-[45.5rem] max-h-[39.75rem] overflow-auto"
"xl" -> "min-h-[20rem] max-w-[68.5rem] max-h-[43.5rem] overflow-auto"
end
end
end