CVA v0.2.1

View Source CVA.Component (CVA v0.2.1)

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

 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

Link to this section Summary

Functions

compound_variant(class, variants)

Declares a compound variant for HEEx function components.

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

Declares a variant for HEEx function components.

Link to this section Functions

Link to this macro

compound_variant(class, variants)

View Source (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

 Arguments

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

  • variants - a keyword list of required variants.

example

 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
Link to this macro

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

View Source (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

 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

 Options 

* `default` - the default variant.

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

example

 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