Aurora.Uix.Templates.Basic.Components (Aurora UIX v0.1.4-rc.7)

Copy Markdown

Provides the core set of reusable UI components for Aurora UIX, including modals, tables, forms, flash messages, and more.

Most functions in this module are equivalent to those in the original Phoenix Framework's core_components.ex, with some stylistic changes for Aurora UIX, but retaining 100% compatibility with the Phoenix API and usage patterns.

Key Features

  • Provides modal, table, form, flash, and input components for LiveView UIs.
  • All components are built with CSS classes for customization via the theme system.
  • Includes icon support via Heroicons. See icon/1 for usage.
  • Designed for extensibility and override in your own application.
  • Well-documented with doc strings and declarative assigns for each component.
  • All components are compatible with Phoenix LiveView and Phoenix.Component.

Note

This module may be injected as the core components module depending on the Aurora UIX template configuration. Dynamic selection and import of the core components module is handled via use Aurora.Uix.CoreComponentsImporter, which will import either this module or a custom one as configured in your application or template.

Summary

Functions

auix_items(assigns)

Renders a table or card with generic styling.

auix_items_card(assigns)

Renders a list of cards with generic styling.

auix_items_table(assigns)

Renders a table with generic styling.

auix_simple_form(assigns)

Renders a simple form.

pages_selection(assigns)

Renders a pagination navigation bar with page numbers and selection counts.

record_navigator?(arg1, position)

Determines if record navigator should be displayed at the specified position.

record_navigator_bar(assigns)

Renders a record navigation bar with previous/next controls and record counter.

Functions

auix_items(assigns)

@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 to nil.
  • row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
  • row_click_navigate (:any) - the function for handling phx-click on each row using auix_route_forward. Defaults to nil.
  • row_click_patch (:any) - the function for handling phx-click on each row using auix_route_forward. Defaults to nil.
  • 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 to false.

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.

auix_items_card(assigns)

@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 to nil.
  • row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
  • row_click_navigate (:any) - the function for handling phx-click on each row using auix_route_forward. Defaults to nil.
  • row_click_patch (:any) - the function for handling phx-click on each row using auix_route_forward. Defaults to nil.
  • 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 to false.

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.

auix_items_table(assigns)

@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 to nil.
  • row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
  • row_click_navigate (:any) - the function for handling phx-click on each row using auix_route_forward. Defaults to nil.
  • row_click_patch (:any) - the function for handling phx-click on each row using auix_route_forward. Defaults to nil.
  • 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 to false.

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.

auix_simple_form(assigns)

@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 to nil.
  • 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.

pages_selection(assigns)

@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 %{}.

record_navigator?(arg1, position)

@spec record_navigator?(map(), atom()) :: boolean()

Determines if record navigator should be displayed at the specified position.

Parameters

  • layout_options (map()) - Layout configuration map containing record_navigator setting.
  • position (atom()) - The position to check. Common values include :top, :bottom, or :both.

Returns

boolean() - True if record navigator should be displayed at the given position, false otherwise.

Examples

iex> record_navigator?(%{layout_options: %{record_navigator: [:top, :bottom]}}, :top)
true

iex> record_navigator?(%{layout_options: %{record_navigator: :top}}, :top)
true

iex> record_navigator?(%{layout_options: %{record_navigator: :top}}, :bottom)
false

record_navigator_bar(assigns)

@spec record_navigator_bar(map()) :: Phoenix.LiveView.Rendered.t()

Renders a record navigation bar with previous/next controls and record counter.

Parameters

  • assigns (map()) - Component assigns containing:
    • :pagination (map()) - Pagination state with page, per_page, pages_count, and entries_count.
    • :item_index (integer()) - Current item index within the page.

Returns

Phoenix.LiveView.Rendered.t() - Rendered record navigator bar component.

Examples

<.record_navigator_bar
  pagination={%{page: 2, per_page: 10, pages_count: 5, entries_count: 43}}
  item_index={3}
/>