Packages

backpex

0.8.1
0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.3 0.18.2 0.18.1 0.18.0 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.3 0.16.2 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.0 0.13.0 0.12.0 0.11.0 0.10.0 0.9.1 0.9.0 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.0 0.1.1

Highly customizable administration panel for Phoenix LiveView applications.

HexDocs

Current section

Files

Jump to
Readme
45 Versions
14 Dependencies
Dependants
Files
Activity
backpex lib backpex html core_components.ex
Raw

lib/backpex/html/core_components.ex 

defmodule Backpex.HTML.CoreComponents do

  @moduledoc """

  Provides core components for Backpex.

  """

  use BackpexWeb, :html



  attr :name, :string, required: true

  attr :class, :any, default: nil

  attr :rest, :global, default: %{"aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor"}



  def icon(%{name: "hero-" <> _} = assigns) do

    ~H"""

    <span class={[@name, @class]} {@rest} />

    """

  end



  @doc """

  Renders a filter_badge component.

  """

  attr :clear_event, :string, default: "clear-filter", doc: "event name for removing the badge"

  attr :filter_name, :string, required: true

  attr :label, :string, required: true



  slot :inner_block



  def filter_badge(assigns) do

    ~H"""

    <div class="join indicator ring-base-content/10 relative ring-1">

      <div class="badge badge-outline join-item bg-base-300 h-auto border-0 px-4 py-1.5 font-semibold">

        <%= @label %>

      </div>

      <div class="badge badge-outline join-item h-auto border-0 px-4 py-1.5">

        <%= render_slot(@inner_block) %>

      </div>

      <button

        type="button"

        phx-click={@clear_event}

        phx-value-field={@filter_name}

        class="indicator-item bg-base-300 rounded-badge grid place-items-center p-1 shadow transition duration-75 hover:text-secondary hover:scale-110"

        aria-label={Backpex.translate({"Clear %{name} filter", %{name: @label}})}

      >

        <.icon name="hero-x-mark" class="h-3 w-3" />

      </button>

    </div>

    """

  end

end