Use Fluxon modal

lib/music_library_web/components/core_components.ex

@@ -23,89 +23,11 @@ defmodule MusicLibraryWeb.CoreComponents do
   defdelegate date_time_picker(assigns), to: Fluxon.Components.DatePicker
   defdelegate input(assigns), to: Fluxon.Components.Input
   defdelegate loading(assigns), to: Fluxon.Components.Loading
+  defdelegate modal(assigns), to: Fluxon.Components.Modal
   defdelegate select(assigns), to: Fluxon.Components.Select
   defdelegate separator(assigns), to: Fluxon.Components.Separator
   defdelegate sheet(assigns), to: Fluxon.Components.Sheet
 
-  @doc """
-  Renders a modal.
-
-  ## Examples
-
-      <.modal id="confirm-modal">
-        This is a modal.
-      </.modal>
-
-  JS commands may be passed to the `:on_cancel` to configure
-  the closing/cancel event, for example:
-
-      <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
-        This is another modal.
-      </.modal>
-
-  """
-  attr :id, :string, required: true
-  attr :show, :boolean, default: false
-  attr :on_cancel, JS, default: %JS{}
-  slot :inner_block, required: true
-
-  def modal(assigns) do
-    ~H"""
-    <div
-      id={@id}
-      phx-mounted={@show && show_modal(@id)}
-      phx-remove={hide_modal(@id)}
-      data-cancel={JS.exec(@on_cancel, "phx-remove")}
-      class="relative z-50 hidden"
-    >
-      <div
-        id={"#{@id}-bg"}
-        class="backdrop-blur-sm fixed inset-0 transition-opacity"
-        aria-hidden="true"
-      />
-      <div
-        class="fixed inset-0 overflow-y-auto"
-        aria-labelledby={"#{@id}-title"}
-        aria-describedby={"#{@id}-description"}
-        role="dialog"
-        aria-modal="true"
-        tabindex="0"
-      >
-        <div class="flex min-h-full items-start justify-center">
-          <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
-            <.focus_wrap
-              id={"#{@id}-container"}
-              phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
-              phx-key="escape"
-              phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
-              class={[
-                "shadow-zinc-700/10 ring-zinc-700/10",
-                "relative hidden rounded-2xl",
-                "bg-white dark:bg-zinc-800",
-                "p-8 shadow-lg ring-1 transition"
-              ]}
-            >
-              <div class="absolute top-6 right-5">
-                <button
-                  phx-click={JS.exec("data-cancel", to: "##{@id}")}
-                  type="button"
-                  class="-m-3 flex-none p-3 opacity-40 hover:opacity-80 bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-50"
-                  aria-label={gettext("close")}
-                >
-                  <.icon name="hero-x-mark-solid" class="h-5 w-5" />
-                </button>
-              </div>
-              <div id={"#{@id}-content"}>
-                {render_slot(@inner_block)}
-              </div>
-            </.focus_wrap>
-          </div>
-        </div>
-      </div>
-    </div>
-    """
-  end
-
   @doc """
   Renders flash notices.
 

lib/music_library_web/live/artist_live/show.html.heex

@@ -155,9 +155,10 @@
 
 <.modal
   :if={@live_action == :import}
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
+  on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
 >
   <.live_component
     module={MusicLibraryWeb.AddRecordComponent}

lib/music_library_web/live/collection_live/index.html.heex

@@ -70,9 +70,10 @@
 
 <.modal
   :if={@live_action == :edit}
+  class="md:min-w-2xl"
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}
@@ -86,9 +87,10 @@
 
 <.modal
   :if={@live_action == :import}
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.AddRecordComponent}
@@ -104,9 +106,10 @@
 
 <.modal
   :if={@live_action == :barcode_scan}
+  class="min-w-sm md:min-w-2xl max-w-3xl"
   id="barcode-scanner-modal"
-  show
+  open
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.BarcodeScannerComponent}

lib/music_library_web/live/collection_live/show.html.heex

@@ -284,8 +284,8 @@
 <.modal
   :if={@live_action == :edit}
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(~p"/collection/#{@record}")}
+  on_close={JS.patch(~p"/collection/#{@record}")}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -29,9 +29,10 @@
 
 <.modal
   :if={@live_action == :edit}
+  class="md:min-w-2xl"
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}
@@ -45,9 +46,10 @@
 
 <.modal
   :if={@live_action == :import}
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.AddRecordComponent}

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -278,9 +278,10 @@
 
 <.modal
   :if={@live_action == :edit}
+  class="md:min-w-2xl"
   id="record-modal"
-  show
+  open
-  on_cancel={JS.patch(~p"/wishlist/#{@record}")}
+  on_close={JS.patch(~p"/wishlist/#{@record}")}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}