Packages

phoenix_duskmoon

9.1.4
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
6 Dependencies
Dependants
Files
Activity
phoenix_duskmoon lib phoenix_duskmoon component data_display badge.ex
Raw

lib/phoenix_duskmoon/component/data_display/badge.ex 

defmodule PhoenixDuskmoon.Component.DataDisplay.Badge do

  @moduledoc """

  Badge component for status indicators and labels.



  Uses the `el-dm-badge` custom element from duskmoon-elements.



  ## Examples



      <.dm_badge>New</.dm_badge>



      <.dm_badge variant="success">Active</.dm_badge>



      <.dm_badge variant="error" size="lg">Error</.dm_badge>



      <.dm_badge variant="warning" outline>Warning</.dm_badge>



      <.dm_badge variant="success" soft>Success</.dm_badge>



  ## Attributes



  * `variant` - Badge color: primary, secondary, tertiary, accent, info, success, warning, error, ghost, neutral (default: primary)

  * `size` - Badge size: xs, sm, md, lg (default: md)

  * `outline` - Show outline style (default: false)

  * `soft` - Show soft style with muted background (default: false)

  * `dot` - Show as a dot indicator only (default: false)

  * `class` - Additional CSS classes



  ## Slots



  * `:inner_block` - Badge content (required)

  """



  use Phoenix.Component

  import PhoenixDuskmoon.Component.Helpers, only: [css_color: 1]



  @doc """

  Renders a badge for status indicators and labels.



  ## Examples



      <.dm_badge>New</.dm_badge>

      <.dm_badge variant="success" size="sm">Active</.dm_badge>



  """

  @doc type: :component

  attr(:variant, :string,

    default: "primary",

    values: [

      "primary",

      "secondary",

      "tertiary",

      "accent",

      "info",

      "success",

      "warning",

      "error",

      "ghost",

      "neutral"

    ],

    doc: "badge color variant"

  )



  attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg"], doc: "badge size")

  attr(:outline, :boolean, default: false, doc: "show outline style")

  attr(:soft, :boolean, default: false, doc: "show soft style with muted background")

  attr(:pill, :boolean, default: false, doc: "use pill (rounded) shape")

  attr(:dot, :boolean, default: false, doc: "show as a dot indicator only")

  attr(:class, :any, default: nil, doc: "additional CSS classes")

  attr(:rest, :global)



  slot(:inner_block, required: true, doc: "badge text or content")



  def dm_badge(assigns) do

    element_variant =

      cond do

        assigns.soft -> "soft"

        assigns.outline -> "outlined"

        true -> nil

      end



    assigns =

      assigns

      |> assign(:element_color, css_color(assigns.variant))

      |> assign(:element_variant, element_variant)



    ~H"""

    <el-dm-badge

      color={@element_color}

      variant={@element_variant}

      size={@size}

      pill={@pill}

      dot={@dot}

      class={@class}

      {@rest}

    >

      {render_slot(@inner_block)}

    </el-dm-badge>

    """

  end

end