A2UIPhoenix.Components (A2UIPhoenix v0.1.1)

Copy Markdown View Source

The function components that walk a resolved surface, and the helpers component implementations share.

component_node/1 renders one node of an A2UICore.Resolution.NodeResolver tree: a placeholder for the states that have no definition (:pending, :unknown_type, :cyclic), else the function component the context's component map has for the node's type. That component receives:

  • @ctx — the A2UIPhoenix.Context;
  • @node — the A2UICore.Resolution.Node;
  • @props — the node's props with every binding replaced by its current value (children stay {:node, ref}, actions stay A2UICore.Resolution.Actions);
  • @a11y — A2UICore.Accessibility.attributes/2 of the component;
  • @attrs — the global attributes for the component's root element: its DOM id, data-a2ui-id, and the ARIA attributes the component declared (aria-label for an explicit label, aria-description, aria-live when not "off", aria-hidden when hidden), and aria-busy while a property waits for an agent function.

A component renders its children with child/1 and its failed checks with validation_errors/1.

Summary

Functions

child(assigns)

Renders a child slot: {:node, ref}, a list of them, or nothing.

component_node(assigns)

Renders node ref of the context's tree (nothing when it is not mounted).

error_ids(ctx, node, props)

The ids of the error messages validation_errors/1 renders, for an input's aria-describedby (nil when the checks pass).

invalid?(props)

Whether the component's checks fail.

props(arg)

The node's props with every binding replaced by its value.

style(props, extra \\ [])

An inline style: the component's flex weight followed by extra declarations; nil when there is nothing to say.

text(value)

Text for display: strings as they are, other scalars in their JSON spelling, nil as empty.

validation_errors(assigns)

Renders the messages of a component's failed checks (isValid false and validationErrors), each with the id aria-describedby points at.

Functions

child(assigns)

(since 0.1.0) 
@spec child(map()) :: Phoenix.LiveView.Rendered.t()

Renders a child slot: {:node, ref}, a list of them, or nothing.

Attributes

component_node(assigns)

(since 0.1.0) 
@spec component_node(map()) :: Phoenix.LiveView.Rendered.t()

Renders node ref of the context's tree (nothing when it is not mounted).

Attributes

error_ids(ctx, node, props)

(since 0.1.0) 
@spec error_ids(A2UIPhoenix.Context.t(), A2UICore.Resolution.Node.t(), map()) ::
  String.t() | nil

The ids of the error messages validation_errors/1 renders, for an input's aria-describedby (nil when the checks pass).

invalid?(props)

(since 0.1.0) 
@spec invalid?(map()) :: boolean()

Whether the component's checks fail.

props(arg)

(since 0.1.0) 
@spec props(A2UICore.Resolution.Node.t()) :: map()

The node's props with every binding replaced by its value.

style(props, extra \\ [])

(since 0.1.0) 
@spec style(map(), [String.t() | nil]) :: String.t() | nil

An inline style: the component's flex weight followed by extra declarations; nil when there is nothing to say.

iex> A2UIPhoenix.Components.style(%{"weight" => 2}, ["text-align: center"])
"flex: 2; text-align: center"
iex> A2UIPhoenix.Components.style(%{})
nil

text(value)

(since 0.1.0) 
@spec text(term()) :: String.t()

Text for display: strings as they are, other scalars in their JSON spelling, nil as empty.

iex> A2UIPhoenix.Components.text(3.5)
"3.5"
iex> A2UIPhoenix.Components.text(nil)
""

validation_errors(assigns)

(since 0.1.0) 
@spec validation_errors(map()) :: Phoenix.LiveView.Rendered.t()

Renders the messages of a component's failed checks (isValid false and validationErrors), each with the id aria-describedby points at.

Attributes