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_web/pages/components/dialog/popover_page.ex
defmodule MoonWeb.Pages.Components.Dialog.PopoverPage.PopoverExample do
@moduledoc false
use MoonWeb, :stateful_component
alias Moon.Components.Button
alias Moon.Components.Popover
prop(placement, :string, required: true)
data(show, :boolean, default: false)
def render(assigns) do
~F"""
<Popover show={@show} placement={@placement} on_close="toggle_show">
<Button on_click="toggle_show" variant="primary">Click Me</Button>
<:content>
<div class="w-64 h-24 flex items-center justify-around bg-goku border-2 border-goku z-50">
<div class="capitalize">{"#{@placement}"}</div>
</div>
</:content>
</Popover>
"""
end
def handle_event("toggle_show", _, socket = %{assigns: %{show: show}}) do
{:noreply, socket |> assign(show: !show)}
end
end
defmodule MoonWeb.Pages.Components.Dialog.PopoverPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Facing.DeprecationWarning
alias Moon.Autolayouts.LeftToRight
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Pages.Components.Dialog.PopoverPage.PopoverExample
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/popover",
name: "Popover"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"content",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Content of popover"
},
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Content of popover toggle element"
},
%{
:name => ~c"default_state",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Open/Closed popover by default"
},
%{
:name => ~c"close_on_click_outside",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Close popover if clicked outside"
},
%{
:name => ~c"placement",
:type =>
~c"top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end",
:required => ~c"No",
:default => ~c"bottom-start",
:description => ~c"TODO - Placement of popover"
},
%{
:name => ~c"min_width",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - min-width value of popover (px)min-width value of popover (px)"
},
%{
:name => ~c"max_width",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - max-width value of popover (px)"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Popover">
<DeprecationWarning
name="Popover"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.PopoverPage)}
/>
</ComponentPageDescription>
{#for placement <- [
"top-start",
"top",
"top-end",
"right-start",
"right",
"right-end",
"bottom-start",
"bottom",
"bottom-end",
"left-start",
"left",
"left-end"
]}
<ExampleAndCode id={"popover_#{placement}"} title={"Placement: #{placement}"}>
<:example>
<LeftToRight>
<PopoverExample id={placement} placement={placement} />
</LeftToRight>
</:example>
<:code>
{get_popover_code(placement)}
</:code>
</ExampleAndCode>
{/for}
<PropsTable data={@props_info_array} />
</Page>
"""
end
def get_popover_code(placement) do
"""
<Popover show={@show} placement="#{placement}" on_close="toogle_show">
<Chip on_click="toogle_show">Click Me</Chip>
<:content>...</:content>
</Popover>
"""
end
end