View Source CVA.Component (CVA v0.2.2)

Integrates CVA with Phoenix function components.

The variant/3 and compound_variant/2 macros allow easy definition of variants and compound variants for a component. This also includes compile time checks for the specified variants.

When using this module, please make sure that you add include :cva to your imports in .formatter.exs.

[
  import_deps: [:cva],
]

Usage

defmodule MyWeb.Components do
  use CVA.Component

  variant :intent, [
      primary: "bg-cyan-600",
      secondary: "bg-zinc-700",
      destructive: "bg-red-500"
    ],
    default: :secondary

  variant :size, [
      xs: "rounded px-2.5 py-1.5 text-xs",
      sm: "rounded-md px-3 py-2 text-sm",
      md: "rounded-md px-4 py-2 text-sm",
      lg: "rounded-md px-4 py-2 text-base",
      xl: "rounded-md px-6 py-3 text-base"
    ],
    default: :md

  compound_variant "uppercase", intent: :primary, size: :xl

  attr :rest, :global
  slot :inner_block

  def button(assigns) do
    ~H"""
    <button class={@cva_class} {@rest}><%= render_slot(@inner_block) %></button>
    """
  end
end

defmodule MyWeb.SomeLive do
  import MyWeb.Components

  def render(assigns) do
    ~H"""
    <.button intent="primary">Click me</.button>
    """
  end
end

Summary

Functions

Declares a compound variant for HEEx function components.

Declares a variant for HEEx function components.

Functions

compound_variant(class, variants)

(macro)

Declares a compound variant for HEEx function components.

A compound variant defines a set of required variants. If all variants are present, the given class will be assigned.

A component can have multiple compound variants.

Arguments

  • class - the class to add if all variants are present.

  • variants - a keyword list of required variants.

Example

defmodule MyWeb.Components do
  use CVA.Component

  variant :intent, [
      primary: "bg-cyan-600",
      secondary: "bg-zinc-700",
    ],
    default: :secondary

  variant :size, [
      md: "rounded-md px-4 py-2 text-sm",
      xl: "rounded-md px-6 py-3 text-base"
    ],
    default: :md

  compound_variant "uppercase", intent: :primary, size: :xl

  def button(assigns) do
    ~H"""
    <button class={@cva_class} {@rest}><%= render_slot(@inner_block) %></button>
    """
  end
end

variant(name, variants, opts \\ [])

(macro)

Declares a variant for HEEx function components.

When declaring variants, an assign cva_class is added to the component. This assign contains the class according to all variant definitions of the component. This class is intended to be passed into the class attribute of the component.

A component can have multiple variants.

Arguments

  • name - an atom defining the name of the attribute. Note that attributes cannot define the same name as any other attributes or slots or attributes declared for the same component.

  • variants - a keyword list of variants. Supported variant values are strings and a list of strings.

  • opts - a keyword list of options. Defaults to [].

Options

* `default` - the default variant.

All other options will be passed to `Phoenix.Component.attr/3`.

Example

defmodule MyWeb.Components do
  use CVA.Component

  variant :intent, [
      primary: "bg-cyan-600",
      secondary: "bg-zinc-700",
      destructive: "bg-red-500"
    ],
    default: :secondary

  variant :size, [
      xs: "rounded px-2.5 py-1.5 text-xs",
      sm: "rounded-md px-3 py-2 text-sm",
      md: "rounded-md px-4 py-2 text-sm",
      lg: "rounded-md px-4 py-2 text-base",
      xl: "rounded-md px-6 py-3 text-base"
    ],
    default: :md

  def button(assigns) do
    ~H"""
    <button class={@cva_class} {@rest}><%= render_slot(@inner_block) %></button>
    """
  end
end