Packages
moon
2.72.2
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/modal_page.ex
defmodule MoonWeb.Pages.Components.Dialog.ModalPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.PullAside
alias Moon.Autolayouts.LeftToRight
alias Moon.Components.Button
alias Moon.Components.Dialog.Modal
alias Moon.Components.Select.SingleSelect
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "#",
name: "Dialog"
},
%{
to: "/components/dialog/modal",
name: "Modal"
}
]
)
data(modal_is_open, :boolean, default: true)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Modal">
<DeprecationWarning
name="Modal"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.ModalPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Modal" id="modal_1">
<:example>
<Button variant="primary" on_click="set_open">Open modal</Button>
<Modal close="set_close" :if={@modal_is_open}>
<:title>Title text</:title>
<:content>
<SingleSelect
id="permissions-1"
options={MoonWeb.Pages.Tutorials.AddDataUsingForm.User.available_permissions_with_left_icon()}
/>
</:content>
<:footer>
<PullAside>
<:left>
<Button>Label</Button>
</:left>
<:right>
<LeftToRight>
<Button variant="tertiary">Label</Button>
<Button variant="primary">Label</Button>
</LeftToRight>
</:right>
</PullAside>
</:footer>
</Modal>
</:example>
<:code>{get_example_code_1()}</:code>
<:state>{get_state(assigns)}</:state>
</ExampleAndCode>
</Page>
"""
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def handle_event("set_open", _params, socket) do
socket = assign(socket, modal_is_open: true)
{:noreply, socket}
end
def handle_event("set_close", _params, socket) do
socket = assign(socket, modal_is_open: false)
{:noreply, socket}
end
def get_example_code_1() do
"""
<Modal close="set_close" :if={@modal_is_open}>
<:title>Title text</:title>
<:content>Content here</:content>
<:footer>
<PullAside>
<:left>
<Button>Label</Button>
</:left>
<:right>
<LeftToRight>
<Button variant="tertiary">Label</Button>
<Button variant="primary">Label</Button>
</LeftToRight>
</:right>
</PullAside>
</:footer>
</Modal>
"""
end
def get_state(assigns) do
inspect(%{modal_is_open: assigns.modal_is_open})
end
end