Packages

phoenix_duskmoon

6.0.5
9.9.2 9.9.1 9.9.0 9.8.0 9.7.1 9.7.0 9.6.4 9.6.3 9.6.2 9.6.1 9.6.0 9.5.4 9.5.3 9.5.2 9.5.1 9.5.0 9.4.3 9.4.2 9.4.1 9.4.0 9.3.0 9.2.0 9.1.4 9.1.3 9.1.1 9.1.1-rc.1 retired 9.0.1 9.0.0-rc.3 9.0.0-rc.2 9.0.0-rc.1 8.0.0 7.2.1 7.2.0 7.1.3 7.1.2 7.1.1 6.3.2 6.3.1 6.3.0 6.2.0 6.1.3 6.1.2 6.1.1 6.1.0 6.0.10 6.0.9 6.0.8 6.0.7 6.0.6 6.0.5 6.0.4 6.0.3 6.0.2 6.0.1 6.0.0 5.2.0-beta.5 5.2.0-beta.4 5.2.0-beta.3 5.2.0-beta.2 5.2.0-beta.1 5.1.0 5.0.6 5.0.5 5.0.4 5.0.3 5.0.2 5.0.1 5.0.0 4.6.6 4.6.5 4.6.4 4.6.3 4.6.2 4.6.1 4.6.0 4.5.2 4.5.1 4.5.0 4.4.4 4.4.3 4.4.2 4.4.1 4.4.0 4.3.2 4.3.1 4.3.0 4.2.0 4.1.1 4.1.0 4.0.0

Duskmoon UI component library for Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
90 Versions
7 Dependencies
Dependants
Files
Activity
phoenix_duskmoon lib phoenix_duskmoon component flash.ex
Raw

lib/phoenix_duskmoon/component/flash.ex 

defmodule PhoenixDuskmoon.Component.Flash do

  @moduledoc """

  Duskmoon UI Flash Component



  Use this component to display flash messages.

  Replace default flash in `Phoenix` project.



      <.dm_flash_group flash={@flash} />

  """

  use PhoenixDuskmoon.Component, :html



  import PhoenixDuskmoon.Component.Icons



  @doc """

  Renders flash notices.



  ## Examples



      <.dm_flash kind={:info} flash={@flash} />

      <.dm_flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.dm_flash>

  """

  attr(:id, :string, default: "flash", doc: "the optional id of flash container")

  attr(:flash, :map, default: %{}, doc: "the map of flash messages to display")

  attr(:title, :string, default: nil)

  attr(:kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup")

  attr(:autoshow, :boolean, default: true, doc: "whether to auto show the flash on mount")

  attr(:close, :boolean, default: true, doc: "whether the flash can be closed")

  attr(:rest, :global, doc: "the arbitrary HTML attributes to add to the flash container")



  slot(:inner_block, doc: "the optional inner block that renders the flash message")



  def dm_flash(assigns) do

    ~H"""

    <div

      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}

      id={@id}

      phx-mounted={@autoshow && JS.show(to: "##{@id}")}

      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> JS.hide(to: "##{@id}")}

      role="alert"

      class={"hidden w-80 sm:w-96 toast toast-top toast-end z-[1000]"}

      {@rest}

    >

      <div class={["flex flex-col gap-2 relative alert", if(@kind == :info, do: "alert-info"), if(@kind == :error, do: "alert-error")]}>

        <div :if={@title} class="flex items-center gap-1.5 w-full text-xs font-semibold leading-6">

          <.dm_bsi :if={@kind == :info} name="info-circle" class="w-4 h-4" />

          <.dm_bsi :if={@kind == :error} name="exclamation-circle" class="w-4 h-4" />

          <%= @title %>

        </div>

        <div class="w-full text-xs leading-5"><%= msg %></div>

        <button

          :if={@close}

          type="button"

          class="absolute top-2 right-2 btn btn-ghost btn-xs"

          aria-label={"close"}

        >

          <.dm_bsi name="x" class="w-5 h-5 " />

        </button>

      </div>

    </div>

    """

  end



  @doc """

  Shows the flash group with standard titles and content.



  ## Examples



      <.dm_flash_group flash={@flash} />

  """

  attr(:flash, :map, required: true, doc: "the map of flash messages")



  def dm_flash_group(assigns) do

    ~H"""

    <.dm_flash id="flash-info" kind={:info} title={"Success!"} flash={@flash} />

    <.dm_flash id="flash-error" kind={:error} title={"Error!"} flash={@flash} />

    <.dm_flash

      id="disconnected"

      kind={:error}

      title="We can't find the internet"

      close={false}

      autoshow={false}

      phx-disconnected={JS.show(to: "#disconnected")}

      phx-connected={JS.hide(to: "#disconnected")}

    >

      Attempting to reconnect <.dm_bsi name="arrow-repeat" class="inline ml-1 w-3 h-3 animate-spin" />

    </.dm_flash>

    """

  end

end