PHP code example of cloudstudio / laravel-livewire-modal

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

cloudstudio / laravel-livewire-modal example snippets

<livewire:modal />

namespace App\Livewire;

use Cloudstudio\Modal\LivewireModal;
use Illuminate\View\View;

class CreateUser extends LivewireModal
{
    public $name = '';
    public $email = '';
    
    protected $rules = [
        'name' => '   'password' => bcrypt('password'),
        ]);
        
        $this->closeModal();
        
        // Optionally emit events when the modal is closed
        $this->dispatch('userCreated', $user->id);
    }
    
    public function render(): View
    {
        return view('livewire.create-user');
    }
}

public User $user;

public function mount(User $user)
{
    $this->user = $user;
    $this->name = $user->name;
    $this->email = $user->email;
}

public function update()
{
    $this->validate();
    
    $this->user->update([
        'name' => $this->name,
        'email' => $this->email,
    ]);
    
    $this->closeModalWithEvents([
        'userUpdated', // Event name
        'userUpdated' => $this->user->id, // Event with data
        UserOverview::class => 'userModified', // Component event
        UserOverview::class => ['userModified', [$this->user->id]], // Component event with parameters
    ]);
}

/**
 * Supported sizes: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
 */
public static function modalMaxWidth(): string
{
    return 'xl';
}

public static function modalFlyout(): bool
{
    return true;
}

public static function modalFlyoutPosition(): string
{
    return 'left';
}

public static function closeModalOnEscape(): bool
{
    return false;
}

public static function closeModalOnClickAway(): bool
{
    return false;
}

public static function closeModalOnEscapeIsForceful(): bool
{
    return false;
}

public static function dispatchCloseEvent(): bool
{
    return true;
}

public static function destroyOnClose(): bool
{
    return true;
}

@script
<script>
    $wire.on('closingModalOnEscape', data => {
        if ($wire.isDirty && !confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog?') }}')) {
            data.closing = false;
        }
    });
    $wire.on('closingModalOnClickAway', data => {
        if ($wire.isDirty && !confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog?') }}')) {
            data.closing = false;
        }
    });
</script>
@endscript

public function delete()
{
    // Delete logic here
    
    // Skip the previous modal and close with events
    $this->skipPreviousModal()->closeModalWithEvents([
        TeamOverview::class => 'teamDeleted'
    ]);
    
    // Or skip multiple previous modals
    // $this->skipPreviousModals(2)->closeModal();
    
    // Optionally destroy the skipped modals' state
    // $this->destroySkippedModals();
}

return [
    /*
    |--------------------------------------------------------------------------
    | Modal Component Defaults
    |--------------------------------------------------------------------------
    |
    | Configure the default properties for a modal component.
    |
    | Supported modal_max_width
    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
    */
    'component_defaults' => [
        'modal_max_width' => '2xl',
        'display_as_flyout' => false,
        'flyout_position' => 'right',
        'close_modal_on_click_away' => true,
        'close_modal_on_escape' => true,
        'close_modal_on_escape_is_forceful' => true,
        'dispatch_close_event' => false,
        'destroy_on_close' => false,
    ],
];

bash
php artisan vendor:publish --tag=livewire-modal-config