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,:classby 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_classwould contain"bg-blue-500 mt-2"@html_wrapper_classwould 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.