# `A2UIPhoenix.Components`
[🔗](https://github.com/a2ui-elixir/a2ui/blob/v0.1.1/umbrella/apps/a2ui_phoenix/lib/a2ui_phoenix/components.ex#L1)

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.Action`s);
  * `@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`.

# `child`
*since 0.1.0* 

```elixir
@spec child(map()) :: Phoenix.LiveView.Rendered.t()
```

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

## Attributes

* `ctx` (`A2UIPhoenix.Context`) (required)
* `child` (`:any`) (required)

# `component_node`
*since 0.1.0* 

```elixir
@spec component_node(map()) :: Phoenix.LiveView.Rendered.t()
```

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

## Attributes

* `ctx` (`A2UIPhoenix.Context`) (required)
* `ref` (`:integer`) (required)

# `error_ids`
*since 0.1.0* 

```elixir
@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?`
*since 0.1.0* 

```elixir
@spec invalid?(map()) :: boolean()
```

Whether the component's checks fail.

# `props`
*since 0.1.0* 

```elixir
@spec props(A2UICore.Resolution.Node.t()) :: map()
```

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

# `style`
*since 0.1.0* 

```elixir
@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`
*since 0.1.0* 

```elixir
@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`
*since 0.1.0* 

```elixir
@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

* `ctx` (`A2UIPhoenix.Context`) (required)
* `node` (`A2UICore.Resolution.Node`) (required)
* `props` (`:map`) (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*