I have made a library (before phoenix introduced daisyUI) that creates the liveview components using daisyUI styles. You can check it here, it includes the modal component, which is based on the old phoenix generators. I use dialog as the html element, as recommended on daisy docs. Here is also the storybook if you want to test it out.
You can use the library or just copy the code, there are other components there from old phoenix generators if you are interested.
phcurado
2
sreyansjain
I am trying to implement dialog using beercss.
My implementation is below -
attr :class, :string, default: ""
attr :width, :string, default: "large"
attr :style, :string, doc: "style to be applied to the dialog", default: ""
attr :on_cancel, JS, default: %JS{}, doc: "the JS command to execute on cancel"
def dialog(assigns) do
~H"""
<div id={"#{@id}_overlay"} class="overlay"></div>
<dialog
id={@id}
phx-mounted={@show && show_dialog(@id)}
phx-remove={hide_dialog(@id)}
data-cancel={JS.exec(@on_cancel, "phx-remove")}
class={[@class, "modal surface", "#{@width}-width"]}
style={@style}
>
<div id={"#{@id}-content"}>
<.focus_wrap id={"#{@id}_fw"}>
{render_slot(@inner_block)}
</.focus_wrap>
</div>
</dialog>
"""
end
def show_dialog(js \\ %JS{}, id) when is_binary(id) do
js
|> JS.add_class("active", to: "##{id}_overlay")
|> JS.add_class("active", to: "##{id}")
|> JS.focus_first(to: "##{id}")
end
def hide_dialog(js \\ %JS{}, id) do
js
|> JS.remove_class("active", to: "##{id}_overlay")
|> JS.remove_class("active", to: "##{id}")
|> JS.pop_focus()
end
The dialog is called like so -
<.dialog
:if={@live_action in [:new, :edit]}
title={@title}
id="doctor-modal"
show
on_cancel={JS.patch(~p"/admin/doctors")}
>
<.live_component
module={SecondOpinionWeb.Admin.DoctorLive.FormComponent}
id={@doctor.id || :new}
title={@page_title}
action={@live_action}
doctor={@doctor}
patch={~p"/admin/doctors"}
/>
</.dialog>
When I navigate to :new or :edit routes, the dialog appears. I have a cancel button in the live_component like so -
<.button class=“border” phx-click={JS.exec(“data-cancel”, to: “#doctor-modal”)}>Cancel</.button>
Clicking on the cancel button works fine and I see the dialog disappear with animation.
But when I click the save button on the form, it does a push_patch to the :index route, the dialog disappears abruptly.
It seems that phx-remove doesn’t finish before the dialog is being removed from the DOM.
But whats strange is the cancel button works just fine.
Can someone please help? Thanks.
0
sreyansjain
I got it to work by changing the hide_dialog to below -
def hide_dialog(js \\ %JS{}, id) do
js
|> JS.remove_class("active", to: "##{id}_overlay")
|> JS.remove_class("surface", to: "##{id}", transition: {"a", "active", ""}, time: 0)
|> JS.pop_focus()
end
0
ryoung786
I ended up using a colocated hook - I like how it keeps everything consolidated into one spot in the codebase.
You can show the modal with something like <button onclick="my_modal.showModal()">open modal</button> and <.modal id=”my_modal”>This is the body of the modal</.modal>
def modal(assigns) do
~H"""
<script :type={Phoenix.LiveView.ColocatedHook} name=".Modal">
export default {
mounted() {
window.addEventListener("myapp:close-modal", (e) => {
this.el.close()
});
}
}
</script>
<dialog id={@id} class="modal" phx-hook=".Modal">
<div class="modal-box overflow-visible">
<button
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
phx-click={JS.dispatch("myapp:close-modal")}
>
✕
</button>
{render_slot(@inner_block)}
</div>
<div class="modal-backdrop">
<button phx-click={JS.dispatch("myapp:close-modal")}>
close
</button>
</div>
</dialog>
"""
end
3
matt-savvy
I’m usually using a nested form, so my solution is:
# regular button
<button type="button" class="..." onclick="some_modal.showModal()">Select $ITEM</button>
# modal is a dialog using JS.ignore_attributes so the page update doesn't break
<dialog
phx-mounted={JS.ignore_attributes("open")}
id="some_modal"
class="modal"
>
<div class="modal-box">
<h3 class="text-lg font-bold">Select $ITEM</h3>
<.live_component
module={MyAppWeb.Items.SelectionForm}
id="add-item-form-component"
...
/>
</div>
</dialog>
# nested form submits its info to the parent live view via send
# use push_event to send an event to the client
@impl true
def handle_info({:add_item, selected_item}, socket) do
...
{:noreply,
socket
|> ... # any other updates
|> push_event("close-modal", %{id: "some_modal_id"})} # send close-modal event to client
end
and finally, in app.js, add an event listener which closes the modal.
window.addEventListener("phx:close-modal", (e) => {
const modalId = e.detail.id;
const modal = document.getElementById(modalId);
modal.close();
})
2
kish10
Here is a simple & easy solution that worked for me with Liveview & daisyUI modal on a dialog tag.
The idea is to use JS.set_attribute({“open”, “”}, to: “#modal-id”) & JS.remove_attribute(“open”, to: “#modal-id”), to open & close the modal.
Example:
# -- Modal
<dialog id="example-modal" class="modal">
<div class="modal-box">
<p>Hello!</p>
<button phx-click={JS.remove_attribute("open", to: "#example-modal")}>Close</button>
</div>
<div class="modal-backdrop" phx-click={JS.remove_attribute("open", to: "#example-modal")}></div>
</dialog>
# -- Open button
<button phx-click={JS.set_attribute({“open”, “”}, to: “#example-modal”)}>Open</button>
1