Packages
moon
2.74.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_web/examples/design/modal_example/with_select.ex
defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithSelect do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Icons.ControlsCloseSmall
alias Moon.Design.Modal
alias Moon.Design.Button
alias MoonWeb.Schema.User
alias Moon.Design.Form
alias Moon.Design.Form.Select
prop(size_options, :list,
default: [
[key: "Small", value: "small"],
[key: "Medium", value: "medium"],
[key: "Large", value: "large"]
]
)
prop(color_options, :list,
default: [
[key: "Red", value: "red"],
[key: "Blue", value: "blue"],
[key: "Green", value: "green"]
]
)
prop(material_options, :list,
default: [
[key: "Leather", value: "leather"],
[key: "Wool", value: "wool"],
[key: "Cotton", value: "cotton"],
[key: "Silk", value: "silk"]
]
)
prop(user_changeset, :any, default: User.changeset(%User{}))
def render(assigns) do
~F"""
<div>
<Button on_click="set_open" testid="open-modal">Open dialog</Button>
<Modal id="with_select_modal">
<Modal.Backdrop />
<Modal.Panel>
<div class="border-b-[0.063rem] border-beerus pt-5 pb-4 px-6 relative">
<h3 class="text-moon-18 text-bulma font-medium">Modal title</h3>
<span class="absolute top-5 right-5 cursor-pointer">
<ControlsCloseSmall class="text-moon-24" click="set_close" />
</span>
</div>
<div class="px-6 py-4 flex flex-col gap-3">
<Form for={@user_changeset}>
<Select field={:size} options={@size_options} prompt="Please select size" class="w-full" />
</Form>
<Form for={@user_changeset}>
<Select field={:color} options={@color_options} prompt="Please select color" class="w-full" />
</Form>
<Form for={@user_changeset}>
<Select
field={:material}
options={@material_options}
prompt="Please select material"
class="w-full"
/>
</Form>
</div>
<div class="flex gap-2 p-4 justify-end pt-2">
<Button variant="outline" on_click="set_close" testid="close-modal">Cancel</Button>
<Button on_click="set_close">Create</Button>
</div>
</Modal.Panel>
</Modal>
</div>
"""
end
def handle_event("set_open", _, socket) do
Modal.open("with_select_modal")
{:noreply, socket}
end
def handle_event("set_close", _, socket) do
Modal.close("with_select_modal")
{:noreply, socket}
end
def code() do
"""
alias Moon.Icons.ControlsCloseSmall
alias Moon.Design.Modal
alias Moon.Design.Button
alias MoonWeb.Schema.User
alias Moon.Design.Form
alias Moon.Design.Form.Select
prop(size_options, :list,
default: [
[key: "Small", value: "small"],
[key: "Medium", value: "medium"],
[key: "Large", value: "large"]
]
)
prop(color_options, :list,
default: [
[key: "Red", value: "red"],
[key: "Blue", value: "blue"],
[key: "Green", value: "green"]
]
)
prop(material_options, :list,
default: [
[key: "Leather", value: "leather"],
[key: "Wool", value: "wool"],
[key: "Cotton", value: "cotton"],
[key: "Silk", value: "silk"]
]
)
prop(user_changeset, :any, default: User.changeset(%User{}))
def render(assigns) do
~F\"""
<div>
<Button on_click="set_open">Open dialog</Button>
<Modal id="with_select_modal">
<Modal.Backdrop />
<Modal.Panel>
<div class="border-b-[0.063rem] border-beerus pt-5 pb-4 px-6 relative">
<h3 class="text-moon-18 text-bulma font-medium">Modal title</h3>
<span class="absolute top-5 right-5 cursor-pointer" >
<ControlsCloseSmall class="text-moon-24" click="set_close"/>
</span>
</div>
<div class="px-6 py-4 flex flex-col gap-3">
<Form for={@user_changeset}>
<Select field={:size} options={@size_options} prompt="Please select size" class="w-full" />
</Form>
<Form for={@user_changeset}>
<Select field={:color} options={@color_options} prompt="Please select color" class="w-full" />
</Form>
<Form for={@user_changeset}>
<Select
field={:material}
options={@material_options}
prompt="Please select material"
class="w-full"
/>
</Form>
</div>
<div class="flex gap-2 p-4 justify-end pt-2">
<Button variant="outline" on_click="set_close">Cancel</Button>
<Button on_click="set_close">Create</Button>
</div>
</Modal.Panel>
</Modal>
</div>
\"""
end
def handle_event("set_open", _, socket) do
Modal.open("with_select_modal")
{:noreply, socket}
end
def handle_event("set_close", _, socket) do
Modal.close("with_select_modal")
{:noreply, socket}
end
"""
end
end