TallStackUI, Dialog

# 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>

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('...')
        ->hooks([
            // 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('...')
        ->hooks([
            '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 = () => $interaction('dialog')
            .success('Success', 'This is a success message.')
            .send();
 
        error = () => $interaction('dialog')
            .error('Success', 'This is a error message.')
            .send();
 
        warning = () => $interaction('dialog')
            .warning('Success', 'This is a warning message.')
            .send();
 
        info = () => $interaction('dialog')
            .info('Success', 'This is a info message.')
            .send();
 
        // To use confirmations the use and interact with methods of
        // a Livewire component, it is necessary to pass the id of
        // the component where the method is defined. You need to
        // do this by interacting with the `wireable()` method.
 
        const component = Livewire.find('your-component-id-goes-here').id; 
 
        confirm = () => $interaction('dialog')
            .wireable(component) 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // Alternatively, you can pass the component id as an
        // empty string to use the FIRST LIVEWIRE COMPONENT OF THE PAGE.
 
        confirm = () => $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.

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.

# Configurations

This component contains settings available in the configuration file. Click here to learn more.

Dialog

Dialog, Personalization Blocks