TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Dialog

Dialog component.

# Configuration

  • Insert the dialog component on your main layout: 
    <html>
        <body>
            <x-dialog /> 
     
            <!--... -->
        </body>
    </html>
  • Use the Interactions trait in your Livewire component: 
    use TallStackUi\Traits\Interactions; 
     
    class CreateUser extends Component
    {
        use Interactions; 
     
        // ...
    }
  • Dispatch the Dialog from a Livewire method: 
    public function save(): void
    {
        $this->dialog()->success('...')->send();
        $this->dialog()->error('...')->send();
        $this->dialog()->warning('...')->send();
        $this->dialog()->info('...')->send();
    }

# Basic Usage 

$this->dialog()->success('Success', 'This is a success message.')->send();
$this->dialog()->error('Error', 'This is an error message.')->send();
$this->dialog()->warning('Warning', 'This is a warning message.')->send();
$this->dialog()->info('Info', 'This is an info message.')->send();

# Confirmations

Interacting with actions. 

public function save(): void
{
    $this->dialog()
        ->question('Warning!', 'Are you sure?')
        ->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
        ->cancel('Cancel', 'cancelled', 'Cancelled Successfully')
        ->send();
}
 
public function confirmed(string $message): void
{
    $this->dialog()->success('Success', $message)->send();
}
 
public function cancelled(string $message): void
{
    $this->dialog()->error('Cancelled', $message)->send();
}
public function save(): void
{
    // 1. The methods `confirm()` and `cancel()` are optional.
    $this->dialog()
        ->question('Warning!', 'Are you sure?')
        ->send();
 
    // 2. You can set only `confirm()` or `cancel()`.
    // If you set only one, the other will be set as default.
    $this->dialog()
        ->question('Warning!', 'Are you sure?')
        ->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
        ->send();
 
    // 3. You can make `confirm()` and `cancel()`
    // as static buttons just by defining the text.
    $this->dialog()
        ->question('Warning!', 'Are you sure?')
        ->confirm('Confirm')
        ->cancel('Cancel')
        ->send();
 
    // 4. You can set only the method and parameters
    // to use the original text in the buttons.
    $this->dialog()
        ->question('Warning!', 'Are you sure?')
        ->confirm(method: 'confirmed', params: 'Confirmed Successfully')
        ->cancel(method: 'cancelled', params: 'Cancelled Successfully')
        ->send();
 
    // 5. You can ask for a confirmation with other Dialog types
    $this->dialog()
        ->success('Success!', 'Process completed successfully.')
        ->confirm('Undo', 'undo')
        ->cancel('Ok')
        ->send();
}

# Events

An option to listen to events. 

<div x-on:dialog:accepted.window="alert($event.detail.description)"
     x-on:dialog:rejected.window="alert($event.detail.description)"
     x-on:dialog:dismissed.window="show($event.detail.description)">
    ...
</div>
Event Detail Fired when
dialog:accepted { title, description, type } The confirm action is pressed
dialog:rejected { title, description, type } The cancel action is pressed
dialog:dismissed { title, description, type } The dialog is dismissed
We recommend that you use listeners in one place, whether in the base layout or once per component.

# Hooks 

public function save(): void
{
    $this->dialog()
        ->success('...')
        ->hook([
            // When using `success()`, `error()`, `warning()`, `info()` and pressing the OK button.
            'ok' => [
                'method' => 'method',
                // The parameters can be anything you want: arrays, strings, int.
                'params' => ['param1', 'param2']
            ],
            // When close the dialog by clicking on the "x" button.
            'close' => [
                'method' => 'method',
                'params' => ['param1', 'param2']
            ],
            // When close the dialog by dismiss (clicking out of the dialog).
            'dismiss' => [
                'method' => 'method',
                'params' => ['param1', 'param2']
            ],
        ])
        ->send();
}

Optionally, you can also set params as closure: 

public function save(): void
{
    $this->dialog()
        ->success('...')
        ->hook([
            'ok' => [
                'method' => 'method',
                'params' => fn () => ['param1', 'param2'] 
            ],
            'dismiss' => [
                'method' => 'method',
                'params' => function () { 
                    return ['param1', 'param2'];
                }
            ],
        ])
        ->send();
}

The closure will be resolved using Laravel container and the result will be passed to the hook.

# JavaScript API

JavaScript API to interact with Dialog. 

<div>
    <x-button color="green" onclick="show()">Success</x-button>
    <x-button color="red" onclick="error()">Error</x-button>
    <x-button color="yellow" onclick="warning()">Warning</x-button>
    <x-button color="info" onclick="info()">Info</x-button>
    <x-button color="secondary" onclick="confirm()">Confirmation</x-button>
 
    <script>
        show = () => $tsui.interaction('dialog')
            .success('Success', 'This is a success message.')
            .send();
 
        error = () => $tsui.interaction('dialog')
            .error('Error', 'This is an error message.')
            .send();
 
        warning = () => $tsui.interaction('dialog')
            .warning('Warning', 'This is a warning message.')
            .send();
 
        info = () => $tsui.interaction('dialog')
            .info('Info', 'This is an info message.')
            .send();
 
        // Confirm/cancel that call a Livewire method need the
        // component id, passed through `wireable()`.
        const component = Livewire.find('your-component-id-goes-here').id; 
 
        confirm = () => $tsui.interaction('dialog')
            .wireable(component) 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // Omit the id to target the first Livewire component on the page.
 
        confirm = () => $tsui.interaction('dialog')
            .wireable() 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
    </script>
</div>
The dialog hooks are unavailable in the JavaScript API.

# Display After Redirects

You can trigger a dialog that will actually be displayed after a redirect action. Regardless of whether the redirection is to another Livewire component or to basic controllers, you can still display the dialog. 

use Illuminate\Contracts\View\View;
use Livewire\Component;
use TallStackUi\Traits\Interactions;
 
class Payment extends Component
{
    use Interactions;
 
    public function render(): View
    {
        return view('livewire.livewire');
    }
 
    public function save()
    {
        $this->dialog()
            ->success('Done!', 'Your money has been sent!')
            ->flash() 
            ->send();
 
        return $this->redirect(route('dashboard'));
    }
}

When using flash() method, the dialog will not be displayed in the current request, but yes stored temporarily in the session and displayed in the next request.

# Dispatching via Controllers

You can trigger a dialog via controllers.

use Illuminate\Http\Request;
use TallStackUi\Traits\Interactions;
 
class PaymentController extends Controller
{
    use Interactions; 
 
    public function index()
    {
        return view('payment.index', [
            //
        ]);
    }
 
    public function update(Request $request)
    {
        // ...
 
        $this->dialog() 
            ->success('...')
            ->send();
    }
}

Because certain methods were created and designed to be used with Livewire components , methods like confirm , cancel and hooks will be unavailable and will throw exceptions when you try to use them in controllers.

# Persistent

An option to prevent the dialog from being closed by clicking outside. 

$this->dialog()
    ->success('Success', 'This is a success message.')
    ->persistent()
    ->send();

# Colorful

You can invert the Dialog colors using the colorful global so the body background takes the notification type color (green for success, red for error, and so on) with white text. Learn more about the global Colorful.

# Confirming with Enter
NEW 

// Enter closes it, like clicking OK
$this->dialog()
    ->success('Saved!')
    ->send();
 
// Enter runs the method, like clicking Yes
$this->dialog()
    ->question('Delete?')
    ->confirm(title: 'Yes', method: 'delete')
    ->cancel()
    ->send();
It fires only while the focus is outside the dialog. A button already activates on Enter while focused, so without that guard a dialog whose cancel button had been reached with Tab would cancel and confirm on a single keystroke. It also works on a persistent() dialog, where Escape does not: pressing the confirm button is the answer it is waiting for, not a way around it.

Code highlighting provided by Torchlight