defmodule DaisyUIComponents.Modal do @moduledoc """ Modal component https://daisyui.com/components/modal/ """ use DaisyUIComponents, :component @doc """ Renders a dialog modal. ## Examples <.modal id="confirm-modal"> This is a 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 dialog with slots and actions: <.modal id="confirm"> <:modal_box class="w-11/12 max-w-5xl"> Modal to confirm <.modal_action> <.button>Confirm """ attr :id, :string, required: true attr :class, :string, default: nil attr :open, :boolean, default: false attr :show, :boolean, default: nil, doc: "Behaves like `open` attribute. This attribute exist to avoid compatibility issues with phoenix core components" attr :closeable, :boolean, default: true attr :close_on_click_away, :boolean, default: false attr :rest, :global attr :on_cancel, JS, default: %JS{} slot :modal_box, doc: "the slot for compacting the modal body" do attr :class, :string attr :content_class, :string end slot :inner_block def modal(assigns) do assigns = assigns |> assign(:open, assigns[:show] || assigns[:open]) ~H""" """ end attr :modal_id, :string, required: true attr :class, :string, default: nil attr :content_class, :string, default: nil attr :closeable, :boolean, default: true attr :close_on_click_away, :boolean, default: false attr :rest, :global slot :inner_block slot :actions, doc: "the slot for showing modal actions" def modal_box(assigns) do ~H""" <.focus_wrap id={"#{@modal_id}-container"} class={["modal-box", @class]} phx-window-keydown={JS.exec("data-cancel", to: "##{@modal_id}")} phx-key="escape" phx-click-away={@close_on_click_away && JS.exec("data-cancel", to: "##{@modal_id}")} >