Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon/design/bottom_sheet.ex
defmodule Moon.Design.BottomSheet do
@moduledoc false
use Moon.StatefulComponent
@doc "Whether the BottomSheet is open or not"
prop(is_open, :boolean, default: false)
@doc "Called when the BottomSheet is dismissed"
prop(on_close, :event)
@doc """
Deprecated: Whether the BottomSheet has a shadow or not
"""
prop(has_shadow, :boolean, default: false)
@doc """
Deprecated: The size of the BottomSheet, sm, md, lg or custom pixel/percentage/rem value
"""
prop(size, :string,
values!: [
"sm",
"md",
"lg"
],
default: "sm"
)
@doc "Tailwind classes for customization"
prop(class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc """
Experimental: makes BottomSheet behave as Modal on some screen widths,
please reffer to https://tailwindcss.com/docs/screens
"""
prop(as_modal_on, :string, values: ~w(sm md lg xl 2xl))
@doc "Panel of BottomSheet, see BottomSheet.Panel"
slot(panel, required: true)
@doc "Backdrop of BottomSheet, see BottomSheet.Backdrop"
slot(backdrop)
# internal API
@doc "Internal API, used for transition of the element"
data(is_closing, :boolean, default: false)
def render(assigns) do
~F"""
<div
{=@id}
phx-hook="Bottomsheet"
data-is_open={@is_open}
data-is_closing={"#{@is_closing}"}
class={merge([
"fixed z-[99999] inset-0 hidden",
modal_classes(@as_modal_on),
@class
]) <> " flex"}
data-testid={@testid}
>
<#slot {@backdrop} />
<#slot
{@panel}
context_put={
on_close: @on_close || %{name: "start_closing_bottom_sheet", target: @myself},
has_shadow: @has_shadow,
as_modal_on: @as_modal_on,
size: @size
}
/>
</div>
"""
end
def open(bottom_sheet_id) do
send_update(__MODULE__, id: bottom_sheet_id, is_open: true)
end
def close(bottom_sheet_id) do
send_update(__MODULE__, id: bottom_sheet_id, is_closing: true)
end
def handle_event("set_open", _, socket) do
{:noreply, assign(socket, is_open: true)}
end
def handle_event("start_closing_bottom_sheet", _, 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
defp modal_classes(nil), do: []
defp modal_classes(size) do
~w(hidden items-center justify-center) |> Enum.map(&"#{size}:#{&1}")
end
end