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
orx-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
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 assignsdefault_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"
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 prefixtake
- 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])
Extends assigns with raw_* attributes that can be interpolated within your component markup.
Parameters
assigns
- your component assignsattributes
- 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 withdata-
: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
.
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()
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
.
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 assignsprefixes
- 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
.
Validates that attributes are present in assigns.
Raises an ArgumentError
if any attribute is missing.
Example
assigns
|> validate_required_attributes([:id, :label])