Aurora. Uix. Templates. Basic. Components
(Aurora UIX v0.1.5)
Copy Markdown
Aurora UIX-specific UI components for the Basic template.
This module provides the higher-level components used by the Basic template's renderers,
complementing the lower-level Phoenix-compatible components in Aurora.Uix.Templates.Basic.CoreComponents.
Components
auix_simple_form/1— form wrapper with Aurora UIX layout classes.auix_items/1— responsive table/card switcher for collection views.auix_items_table/1— desktop table view for collections.auix_items_card/1— mobile card view for collections.pages_selection/1— pagination bar with page numbers and selection counts.record_navigator_bar/1— previous/next record navigation for form/show views.
Overriding
All public components support runtime override. Configure a replacement module:
config :aurora_uix, :basic_components, MyApp.MyComponentsThe replacement module only needs to export the specific functions it overrides; unimplemented functions fall back to the defaults here.
See Aurora.Uix.ComponentsResolver and Aurora.Uix.ComponentsResolverHelper for
details on the override mechanism.
Summary
Functions
Renders a list of value-carrying checkboxes that all submit under a single array name.
Renders a table or card with generic styling.
Renders a list of cards with generic styling.
Renders a table with generic styling.
Renders a plain, read-only list of already-resolved display labels.
Renders a simple form.
Renders a pagination navigation bar with page numbers and selection counts.
Determines if record navigator should be displayed at the specified position.
Renders a record navigation bar with previous/next controls and record counter.
Functions
@spec auix_checkbox_group(map()) :: Phoenix.LiveView.Rendered.t()
@spec auix_checkbox_group(map()) :: Phoenix.LiveView.Rendered.t()
Renders a list of value-carrying checkboxes that all submit under a single array name.
Unlike Aurora.Uix.Templates.Basic.CoreComponents.input/1 with type="checkbox", which renders a
single boolean and emits a "false" companion input, every checkbox here carries an option value
and shares one name. The browser therefore submits exactly the checked values — the same wire
format a <select multiple> produces — which is what lets a multi-select be swapped for this
without touching the receiving side.
The <input type="checkbox"> is written as a raw tag on purpose: this is the function
component, and there is no lower-level styled primitive to delegate to.
Parameters
assigns(map()) - Component assigns. See theattrdeclarations below.
Returns
Phoenix.LiveView.Rendered.t() - The rendered checkbox group.
Examples
<.auix_checkbox_group
id="auix-many-to-many-suppliers-form-options"
name="product[suppliers][]"
label="Suppliers"
options={[{"ACME", 1}, {"Globex", 2}]}
value={[1]}
>
<:label_actions>{toggle_all}</:label_actions>
</.auix_checkbox_group>Attributes
id(:string) (required) - base id; each checkbox gets#{id}-option-#{value}.name(:string) (required) - shared array input name, e.g.product[suppliers][].label(:string) - Defaults tonil.options(:list) (required) - list of{label, value}tuples.value(:list) - the checked option values. Defaults to[].disabled(:boolean) - Defaults tofalse.omit_label?(:boolean) - If true, label is not rendered at all. Defaults tofalse.empty_message(:string) - shown whenoptionsis empty. Defaults tonil.class(:string) - optional class adendum for the options container. Defaults to"".label_class(:string) - optional label class adendum. Defaults to"".input_class(:string) - optional class adendum for each checkbox. Defaults to"".host_components(:any)- Global attributes are accepted.
Slots
label_actions- actions rendered immediately right of the label, e.g. a toggle-all.actions- actions rendered at the top right of the group.
@spec auix_items(map()) :: Phoenix.LiveView.Rendered.t()
@spec auix_items(map()) :: Phoenix.LiveView.Rendered.t()
Renders a table or card with generic styling.
Examples
<.auix_items id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.auix_items>Attributes
id(:string) (required)streams(:map) (required)row_id(:any) - the function for generating the row id. Defaults tonil.row_click(:any) - the function for handling phx-click on each row. Defaults tonil.row_click_navigate(:any) - the function for handling phx-click on each row using auix_route_forward. Defaults tonil.row_click_patch(:any) - the function for handling phx-click on each row using auix_route_forward. Defaults tonil.row_item(:any) - the function for mapping each row before calling the :col and :action slots. Defaults to&Function.identity/1.auix(:map) - Defaults to%{}.first_column_not_checkbox?(:boolean) - Defaults tofalse.host_components(:any)
Slots
col(required) - Accepts attributes:label(:string)field(:map)
filter_action- the slot for showing filter actions in the last table heading column.filter_element- The filter elements to display.action- the slot for showing user actions in the last table column.
@spec auix_items_card(map()) :: Phoenix.LiveView.Rendered.t()
@spec auix_items_card(map()) :: Phoenix.LiveView.Rendered.t()
Renders a list of cards with generic styling.
Examples
<.auix_items_card id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.auix_items>Attributes
id(:string) (required)rows(:list) (required)row_id(:any) - the function for generating the row id. Defaults tonil.row_click(:any) - the function for handling phx-click on each row. Defaults tonil.row_click_navigate(:any) - the function for handling phx-click on each row using auix_route_forward. Defaults tonil.row_click_patch(:any) - the function for handling phx-click on each row using auix_route_forward. Defaults tonil.row_item(:any) - the function for mapping each row before calling the :col and :action slots. Defaults to&Function.identity/1.auix(:map) - Defaults to%{}.first_column_not_checkbox?(:boolean) - Defaults tofalse.host_components(:any)
Slots
col(required) - Accepts attributes:label(:string)
filter_action- the slot for showing filter actions in the last table heading column.filter_element- The filter elements to display.action- the slot for showing user actions in the last table column.
@spec auix_items_table(map()) :: Phoenix.LiveView.Rendered.t()
@spec auix_items_table(map()) :: Phoenix.LiveView.Rendered.t()
Renders a table with generic styling.
Examples
<.auix_items_table id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.auix_items>Attributes
id(:string) (required)rows(:list) (required)row_id(:any) - the function for generating the row id. Defaults tonil.row_click(:any) - the function for handling phx-click on each row. Defaults tonil.row_click_navigate(:any) - the function for handling phx-click on each row using auix_route_forward. Defaults tonil.row_click_patch(:any) - the function for handling phx-click on each row using auix_route_forward. Defaults tonil.row_item(:any) - the function for mapping each row before calling the :col and :action slots. Defaults to&Function.identity/1.auix(:map) - Defaults to%{}.first_column_not_checkbox?(:boolean) - Defaults tofalse.host_components(:any)
Slots
col(required) - Accepts attributes:label(:string)
filter_action- the slot for showing filter actions in the last table heading column.filter_element- The filter elements to display.action- the slot for showing user actions in the last table column.
@spec auix_selected_list(map()) :: Phoenix.LiveView.Rendered.t()
@spec auix_selected_list(map()) :: Phoenix.LiveView.Rendered.t()
Renders a plain, read-only list of already-resolved display labels.
Used for read-only association membership (e.g. many-to-many in :show), where only the
selected records matter and no interaction — checking, unchecking, highlighting — is possible.
Parameters
assigns(map()) - Component assigns. See theattrdeclarations below.
Returns
Phoenix.LiveView.Rendered.t() - The rendered list.
Examples
<.auix_selected_list
id="auix-many-to-many-suppliers-show-options"
label="Suppliers"
items={["ACME", "Globex"]}
empty_message="No items to show"
/>Attributes
id(:string) (required)label(:string) - Defaults tonil.omit_label?(:boolean) - If true, label is not rendered at all. Defaults tofalse.items(:list) (required) - already-resolved display labels.empty_message(:string) - shown whenitemsis empty. Defaults tonil.class(:string) - optional class adendum for the list container. Defaults to"".host_components(:any)
@spec auix_simple_form(map()) :: Phoenix.LiveView.Rendered.t()
@spec auix_simple_form(map()) :: Phoenix.LiveView.Rendered.t()
Renders a simple form.
Examples
<.simple_form for={@form} phx-change="validate" phx-submit="save">
<.input field={@form[:email]} label="Email"/>
<.input field={@form[:username]} label="Username" />
<:actions>
<.button>Save</.button>
</:actions>
</.simple_form>Attributes
for(:any) (required) - the data structure for the form.as(:any) - the server side parameter to collect all input under. Defaults tonil.host_components(:any)- Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus:
["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target", "multipart"].
Slots
inner_block(required)actions- the slot for form actions, such as a submit button.
@spec pages_selection(map()) :: Phoenix.LiveView.Rendered.t()
@spec pages_selection(map()) :: Phoenix.LiveView.Rendered.t()
Renders a pagination navigation bar with page numbers and selection counts.
Parameters
assigns(map()) - Component assigns containing::pagination(map()) - Pagination state with page and pages_count.:pages_bar_range_offset(integer()) - Number of pages to show before and after current page.:selected_in_page(map()) - Map of selected items per page. Defaults to%{}.
Returns
Phoenix.LiveView.Rendered.t() - Rendered pagination bar component.
Examples
<.pages_selection
pagination={%{page: 3, pages_count: 10}}
pages_bar_range_offset={2}
selected_in_page={%{1 => MapSet.new([1, 2]), 3 => MapSet.new([5])}}
/>Attributes
pagination(:map) (required)pages_bar_range_offset(:integer) (required)selected_in_page(:map) - Defaults to%{}.host_components(:any)