Packages
moon
2.80.0
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/popover.ex
defmodule Moon.Design.Popover do
@moduledoc false
use Moon.StatefulComponent
prop(on_click, :event)
prop(is_open, :boolean, default: false)
prop(class, :css_class)
slot(default, required: true)
slot(trigger)
prop(testid, :string)
def render(assigns) do
~F"""
<div {=@id} data-testid={@testid} class={@class} :on-click-away="close_panel">
<div class="relative">
<div
:if={slot_assigned?(:trigger)}
role="button"
:on-click={@on_click || "toggle_open"}
data-testid={"#{@testid}-trigger"}
>
<#slot {@trigger} />
</div>
<div
aria-expanded={(@is_open && "true") || "false"}
class={"transition-opacity transition-200", hidden: @is_open == false}
data-testid={"#{@testid}-popover-panel"}
>
<#slot />
</div>
</div>
</div>
"""
end
def handle_event("toggle_open", _, socket) do
{:noreply, assign(socket, is_open: !socket.assigns.is_open)}
end
def handle_event("close_panel", _, socket) do
{:noreply, assign(socket, is_open: false)}
end
def open(id) do
send_update(__MODULE__, id: id, is_open: true)
end
def close(id) do
send_update(__MODULE__, id: id, is_open: false)
end
end