Packages
moon
2.78.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/design/tooltip/content.ex
defmodule Moon.Design.Tooltip.Content do
@moduledoc false
use Surface.Component, slot: "default"
import Moon.Helpers.MergeClass
prop(class, :css_class)
prop(position, :string,
values!: [
"top-start",
"top-center",
"top-end",
"bottom-start",
"bottom-center",
"bottom-end",
"right",
"left"
],
default: "top-center"
)
prop(has_no_shadow, :boolean)
slot(default, required: true)
slot(arrow)
prop(testid, :string)
prop(id, :string)
def render(assigns) do
~F"""
<div
{=@id}
class={
"absolute flex items-center z-30",
"drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]": !@has_no_shadow,
"left-full rtl:flex-row-reverse": @position == "right",
"right-full ltr:flex-row-reverse": @position == "left",
"top-full left-0 right-0 flex-col": String.starts_with?(@position, "bottom"),
"bottom-full left-0 right-0 flex-col-reverse": String.starts_with?(@position, "top")
}
data-testid={@testid}
>
<div class={"overflow-hidden", (@position in ~w(right left) && "py-1") || "px-1"}>
<#slot
{@arrow}
context_put={
parent_class: [
@class,
"translate-x-1/2": @position == "right",
"-translate-x-1/2": @position == "left",
"translate-y-1/2": String.starts_with?(@position, "bottom"),
"-translate-y-1/2": String.starts_with?(@position, "top")
],
has_no_shadow: @has_no_shadow
}
>
<div class="w-3 h-3 bg-transparent" />
</#slot>
</div>
<div class={content_class(@class, @has_no_shadow, @position)}>
<#slot />
</div>
</div>
"""
end
defp content_class(class, has_no_shadow, position) do
align =
case position do
"top-" <> a -> a
"bottom-" <> a -> a
_ -> "center"
end
merge([
"p-3 rounded-moon-s-xs text-moon-12 text-bulma bg-goku whitespace-nowrap",
[
"shadow-[0_6px_6px_-6px_rgba(0,0,0,0.16)]": !has_no_shadow,
"ltr:-translate-x-1/3 rtl:translate-x-1/3": align == "end",
"ltr:translate-x-1/3 rtl:-translate-x-1/3": align == "start"
],
class
])
end
end