PHP code example of laravelcm / livewire-slide-overs

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

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

    

laravelcm / livewire-slide-overs example snippets

namespace App\Livewire;

use Laravelcm\LivewireSlideOvers\SlideOverComponent;

class ShoppingCart extends SlideOverComponent
{
    public function render()
    {
        return view('livewire.shopping-cart');
    }
}

namespace App\Livewire;

use App\Models\User;
use Laravelcm\LivewireSlideOvers\SlideOverComponent;

class EditUser extends SlideOverComponent
{
    public User $user;

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

    public function render()
    {
        return view('livewire.edit-user');
    }
}

public function loadDetails(): void
{
    // ... fetch data ...

    // Expand the panel to give the new content some room.
    $this->resizePanel('max-w-6xl');
}

public function clearDetails(): void
{
    // ... reset ...

    $this->resizePanel('max-w-2xl');
}

$this->resizePanel('max-w-4xl', $panelId);

public function save()
{
    // Save logic...

    $this->closePanel();
}

public function save()
{
    $this->forceClose()->closePanel();
}

// Skip the previous panel
$this->skipPreviousPanel()->closePanel();

// Skip multiple panels
$this->skipPreviousPanels(2)->closePanel();

// Skip and destroy the skipped panels
$this->skipPreviousPanels(2)->destroySkippedPanels()->closePanel();

// Emit a simple event
$this->closePanelWithEvents(['refreshList']);

// Emit event to a specific component
$this->closePanelWithEvents([
    'user-table' => 'refreshList',
]);

// Emit event with parameters
$this->closePanelWithEvents([
    ['refreshList', ['user' => $this->user->id]],
]);

namespace App\Livewire;

use Laravelcm\LivewireSlideOvers\SlideOverComponent;

class EditUser extends SlideOverComponent
{
    // Set the max width (sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl)
    public static function panelMaxWidth(): string
    {
        return '2xl';
    }

    // Disable closing by clicking away
    public static function closePanelOnClickAway(): bool
    {
        return false;
    }

    // Disable closing on escape key
    public static function closePanelOnEscape(): bool
    {
        return false;
    }

    // Make escape key close only the current panel (not force close all)
    public static function closePanelOnEscapeIsForceful(): bool
    {
        return false;
    }

    // Dispatch a close event when the panel is closed
    public static function dispatchCloseEvent(): bool
    {
        return true;
    }

    // Destroy the component state when closed
    public static function destroyOnClose(): bool
    {
        return true;
    }

    public function render()
    {
        return view('livewire.edit-user');
    }
}

return [
    // Include the package CSS (set to true if not using TailwindCSS)
    ' position: Position::Right or Position::Left
    'position' => Position::Right,

    // Default component settings
    'component_defaults' => [
        'slide_over_max_width' => 'xl',
        'close_slide_over_on_click_away' => true,
        'close_slide_over_on_escape' => true,
        'close_slide_over_on_escape_is_forceful' => true,
        'dispatch_close_event' => false,
        'destroy_on_close' => false,
    ],
];

shell
php artisan vendor:publish --tag=livewire-slide-over-config

js
module.exports = {
    content: [
        // ...
        './vendor/laravelcm/livewire-slide-overs/resources/views/**/*.blade.php',
    ],
    // ...
}