# `LineaUI`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui.ex#L1)

Phoenix LiveView components with the LineOne design.

    use LineaUI

imports every component. Pick or drop some with `:only` and `:except`, which take the
keys of `components/0`:

    use LineaUI, only: [:button, :modal]
    use LineaUI, except: [:table]

`avoid_conflicts: true` drops the names Phoenix's generated `CoreComponents` also defines
(`button`, `input`, `table`, `label`, `error`, `header`).

## Overlays

A modal, drawer, popover, dropdown or tooltip is opened, closed and toggled by its `id`,
in three shapes:

| Call | Returns | Use in |
|---|---|---|
| `LineaUI.open("id")` | `%JS{}` | `phx-click` |
| `LineaUI.open(socket, "id")` | socket | `handle_event/3`, `handle_info/2` |
| `LineaUI.open(%JS{}, "id")` | `%JS{}` | a JS pipeline |

The same holds for `close` and `toggle`. `"id"` and `"#id"` are both accepted.

# `close`

```elixir
@spec close(String.t()) :: Phoenix.LiveView.JS.t()
```

Closes the overlay with `id`.

# `close`

```elixir
@spec close(Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t()
```

# `components`

```elixir
@spec components() :: %{required(atom()) => module()}
```

The component modules `use LineaUI` imports, by key.

# `open`

```elixir
@spec open(String.t()) :: Phoenix.LiveView.JS.t()
```

Opens the overlay with `id`.

# `open`

```elixir
@spec open(Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t()
```

# `toggle`

```elixir
@spec toggle(String.t()) :: Phoenix.LiveView.JS.t()
```

Opens the overlay with `id` when it is closed and closes it when it is open.

# `toggle`

```elixir
@spec toggle(Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t()
```

---

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