PhxComponentHelpers (phx_component_helpers v0.2.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 attributes from component assigns
- set data attributes from component assigns
- set phx_* attributes from component assigns
- 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.
Extends assigns with html_* attributes that can be interpolated within your component markup.
Extends assigns with html_* data-attributes that can be interpolated within your component markup.
Extends assigns with phx* attributes that can be interpolated within
your component markup. It will automatically detect any attribute prefixed by
phx_
from input assigns.
Link to this section Functions
extend_class(assigns, class_attribute_name \\ :class, default_classes)
View SourceExtends 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 assignsclass_attribute_name
- the class attribute you want to define,:class
by defaultdefault_classes
- the css classed that will put by default
Example
assigns
|> extend_class("bg-blue-500 mt-8")
|> extend_class(:wrapper_class, "py-4 px-2 divide-y-8 divide-gray-200")
assigns
now contains @html_class
and @html_wrapper_class
.
If your input assigns were %{class: "mt-2", wrapper_class: "divide-none"}
then:
@html_class
would contain"bg-blue-500 mt-2"
@html_wrapper_class
would contain"py-4 px-2 divide-none"
Extends assigns with html_* 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
Options
:init
- a list of attributes that will be initialized if absent from assigns:required
- raises if required attributes are absent from assigns:json
- when true, will JSON encode the assign value
Example
assigns
|> set_component_attributes([:id, :name, :label], required: [:id, :name])
|> set_component_attributes([:value], json: true)
assigns
now contains @html_id
, @html_name
, @html_label
and @html_value
.
Extends assigns with html_* data-attributes that can be interpolated within your component markup.
Behaves exactly like set_component_attributes/3
excepted the output @html_attr
assigns contain data-attributes markup.
Example
assigns
|> set_data_attributes([:key, :text], required: [:key])
|> set_data_attributes([:document], json: true)
assigns
now contains @html_key
, @html_text
and @html_document
.
Extends assigns with phx* attributes that can be interpolated within
your component markup. It will automatically detect any attribute prefixed by
phx_
from input assigns.
Parameters
assigns
- your component assigns
Options
:init
- a list of attributes that will be initialized if absent from assigns:required
- raises if required attributes are absent from assigns
Example
assigns
|> set_phx_attributes([:phx_change, :phx_submit], required: [:phx_submit], init: [:phx_change])
assigns
now contains @html_phx_change
and @html_phx_submit
.