PhxComponentHelpers (phx_component_helpers v0.9.0) View Source

PhxComponentHelpers are helper functions meant to be used within Phoenix LiveView live_components to make your components more configurable and extensible from your templates.

It provides following features:

  • set HTML or data attributes from component assigns
  • set phx_* attributes from component assigns
  • set attributes with any custom prefix such as @click or x-bind: from alpinejs
  • encode attributes as JSON from an Elixir structure assign
  • validate mandatory attributes
  • set and extend CSS classes from component assigns

Link to this section Summary

Functions

Extends assigns with class attributes.

Forward and filter assigns to sub components.

Extends assigns with raw_* attributes that can be interpolated within your component markup.

Extends assigns with form related attributes.

Just a convenient method built on top of set_prefixed_attributes/3 for phx attributes. It will automatically detect any attribute prefixed by phx_ from input assigns. By default, the :into option of set_prefixed_attributes/3 is :phx_attributes

Extends assigns with prefixed attributes that can be interpolated within your component markup. It will automatically detect any attribute prefixed by any of the given prefixes from input assigns.

Validates that attributes are present in assigns. Raises an ArgumentError if any attribute is missing.

Link to this section Functions

Link to this function

extend_class(assigns, default_classes, opts \\ [])

View Source

Extends assigns with class attributes.

The class attribute will take provided default_classes as a default value and will be extended, on a class-by-class basis, by your assigns.

Parameters

  • assigns - your component assigns
  • default_classes - the default classes that will be overridden by your assigns.

Options

  • :attribute - read & write css classes from & into this key
  • :error_class - extra class that will be added if assigns contain form/field keys and field is faulty.

Example

assigns
|> extend_class("bg-blue-500 mt-8")
|> extend_class("py-4 px-2 divide-y-8 divide-gray-200", attribute: :wrapper_class)
|> extend_class("form-input", error_class: "form-input-error", attribute: :input_class)

assigns now contains @raw_class and @raw_wrapper_class.

If your input assigns were %{class: "mt-2", wrapper_class: "divide-none"} then:

  • @raw_class would contain "bg-blue-500 mt-2"
  • @raw_wrapper_class would contain "py-4 px-2 divide-none"
Link to this function

forward_assigns(assigns, opts)

View Source

Forward and filter assigns to sub components.

Parameters

  • assigns - your component assigns

Options

  • prefix - will only forward assigns prefixed by the given prefix. Forwarded assign key will no longer have the prefix
  • take- is a list of key (without prefix) that will be picked from assigns to be forwarded

If both options are given at the same time, the resulting assigns will be the union of the two.

Example

Following will forward an assign map containing %{button_id: 42, button_label: "label", phx_click: "save"} as %{id: 42, label: "label", phx_click: "save"}

forward_assigns(assigns, prefix: :button, take: [:phx_click])
Link to this function

set_attributes(assigns, attributes, opts \\ [])

View Source

Extends assigns with raw_* attributes that can be interpolated within your component markup.

Parameters

  • assigns - your component assigns
  • attributes - a list of attributes (atoms) that will be fetched from assigns. Attributes can either be single atoms or tuples in the form {:atom, default} to provide default values.

Options

  • :required - raises if required attributes are absent from assigns
  • :json - when true, will JSON encode the assign value
  • :data - when true, HTML attributes are prefixed with data-
  • :into - merges all assigns in a single one that can be interpolated at once

Example

assigns
|> set_attributes(
    [:id, :name, label: "default label"],
    required: [:id, :name],
    into: :attributes
  )
|> set_attributes([:value], json: true)

assigns now contains @raw_id, @raw_name, @raw_label and @raw_value. It also contains @raw_attributes which holds the values if :id, :name and :label.

Link to this function

set_form_attributes(assigns)

View Source

Extends assigns with form related attributes.

If assigns contain :form and :field keys then it will set :id, :name, ':for', :value, and :errors from received Phoenix.HTML.Form.

Parameters

  • assigns - your component assigns

Example

assigns
|> set_form_attributes()
Link to this function

set_phx_attributes(assigns, opts \\ [])

View Source

Just a convenient method built on top of set_prefixed_attributes/3 for phx attributes. It will automatically detect any attribute prefixed by phx_ from input assigns. By default, the :into option of set_prefixed_attributes/3 is :phx_attributes

Example

assigns
|> set_phx_attributes(required: [:phx_submit], init: [:phx_change])

assigns now contains @raw_phx_change, @raw_phx_submit and @raw_phx_attributes.

Link to this function

set_prefixed_attributes(assigns, prefixes, opts \\ [])

View Source

Extends assigns with prefixed attributes that can be interpolated within your component markup. It will automatically detect any attribute prefixed by any of the given prefixes from input assigns.

Can be used for intance to easily map alpinejs html attributes.

Parameters

  • assigns - your component assigns
  • prefixes - a list of prefix as binaries

Options

  • :init - a list of attributes that will be initialized if absent from assigns
  • :required - raises if required attributes are absent from assigns
  • :into - merges all assigns in a single one that can be interpolated at once

Example

assigns
|> set_prefixed_attributes(
    ["@click", "x-bind:"],
    required: ["x-bind:class"],
    into: :alpine_attributes
  )

assigns now contains @raw_click, @raw_x-bind:class and @raw_alpine_attributes.

Link to this function

validate_required_attributes(assigns, required)

View Source

Validates that attributes are present in assigns. Raises an ArgumentError if any attribute is missing.

Example

assigns
|> validate_required_attributes([:id, :label])