Packages
corex
0.1.0-alpha.9
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
lib/components/toast.ex
defmodule Corex.Toast do
@moduledoc """
Phoenix implementation of [Zag.js Toast](https://zagjs.com/components/react/toast).
## Examples
```heex
<.toast_group />
<div phx-disconnected={Corex.Toast.create("We can't find the internet", "Attempting to reconnect", :loading, duration: :infinity)}></div>
```
## API Control
***Client-side***
```heex
<button phx-click={Corex.Toast.create_toast("This is an info toast", "This is an info toast description", :info)} class="button">
Create Info Toast
</button>
```
***Server-side***
```elixir
def handle_event("create_info_toast", _, socket) do
{:noreply, Corex.Toast.push_toast(socket, "This is an info toast", "This is an info toast description", :info)}
end
```
"""
@doc type: :component
use Phoenix.Component
@doc """
Renders a toast group (toaster) that manages multiple toast notifications.
This component should be rendered once in your layout.
## Examples
```heex
<.toast_group />
<div phx-disconnected={Corex.Toast.create_toast("We can't find the internet", "Attempting to reconnect", :loading, duration: :infinity)}></div>
```
## API Control
***Client-side***
```heex
<button phx-click={Corex.Toast.create_toast("This is an info toast", "This is an info toast description", :info)} class="button">
Create Info Toast
</button>
```
***Server-side***
```elixir
def handle_event("create_info_toast", _, socket) do
{:noreply, Corex.Toast.push_toast(socket, "This is an info toast", "This is an info toast description", :info)}
end
```
"""
attr(:id, :string, default: nil)
attr(:placement, :string,
default: "bottom-end",
values: ~w(top-start top top-end bottom-start bottom bottom-end)
)
attr(:overlap, :boolean, default: false)
attr(:max, :integer, default: 5)
attr(:gap, :integer, default: nil)
attr(:offset, :string, default: nil)
attr(:pause_on_page_idle, :boolean, default: false)
def toast_group(assigns) do
~H"""
<div
id={@id}
phx-hook="Toast"
class="toast toast-group-js"
data-placement={@placement}
data-max={@max}
data-gap={@gap}
data-offset={@offset}
data-overlap={@overlap}
>
<div data-scope="toast" data-part="group">
</div>
</div>
"""
end
@doc type: :api
@doc """
Creates a toast notification programmatically (client-side).
This function returns a JS command that can be used in event handlers.
## Examples
def handle_event("save", _params, socket) do
# ... save logic ...
{:noreply, push_event(socket, "toast-create", %{
title: "Saved!",
description: "Your changes have been saved.",
type: "success"
})}
end
Or use the JS command version:
<button phx-click={Corex.Toast.create("Saved!", "Your changes have been saved.", :success)}>
Save
</button>
<button phx-click={Corex.Toast.create("Loading...", nil, :loading, duration: :infinity)}>
Show Loading
</button>
"""
def create_toast(title, description \\ nil, type \\ :info, opts \\ []) do
duration = Keyword.get(opts, :duration, 5000)
duration_str = if duration == :infinity, do: "Infinity", else: duration
type_str =
case type do
:info -> "info"
:success -> "success"
:error -> "error"
:warning -> "warning"
:loading -> "loading"
_ -> "info"
end
Phoenix.LiveView.JS.dispatch("toast:create",
to: ".toast-group-js",
detail: %{
title: title,
description: description,
type: type_str,
duration: duration_str
}
)
end
@doc type: :api
@doc """
Server-side function to push a toast event to the client.
Use this in your LiveView event handlers.
## Examples
def handle_event("save", _params, socket) do
# ... save logic ...
{:noreply, push_toast(socket, "Saved!", "Your changes have been saved.", :success)}
end
"""
def push_toast(socket, title, description \\ nil, type \\ :info, duration \\ 5000) do
type_str =
case type do
:info -> "info"
:success -> "success"
:error -> "error"
:warning -> "warning"
:loading -> "loading"
_ -> "info"
end
Phoenix.LiveView.push_event(socket, "toast-create", %{
title: title,
description: description,
type: type_str,
duration: duration
})
end
end