Slideover Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require aristridely/slideover
   

   Add the Livewire directive to your layout (typically app.blade.php):

   @livewire('livewire-ui-slideover')
   

2. AlpineJS: Include AlpineJS via CDN (or npm) in your layout:

   <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
   

3. First Slideover: Generate a Livewire component:

   php artisan make:livewire EditUserSlideover
   

   Update the component to extend SlideoverComponent:

   use LivewireUI\Slideover\SlideoverComponent;
   
   class EditUserSlideover extends SlideoverComponent { ... }
   

4. Trigger the Slideover: Use Alpine to toggle visibility (e.g., via a button):

   <button @click="$wire.toggleSlideover('edit-user')">Edit User</button>
   

5. Render the Slideover: In your Blade template:

   @livewire('edit-user-slideover', key('edit-user'))
   

Implementation Patterns

Core Workflow

1. Component Structure:

   • Extend SlideoverComponent for all slideovers.
   • Override render() to define slideover content (e.g., forms, modals).
   • Use $this->show = true/false to control visibility programmatically.

2. Dynamic Keys:

   • Assign unique key() values to each slideover instance for independent state management:

     @livewire('edit-user-slideover', key('edit-user'))
     @livewire('delete-user-slideover', key('delete-user'))
     

3. Alpine Integration:

   • Use Alpine to trigger slideovers from non-Livewire elements:

     <button @click="$wire.toggleSlideover('edit-user')">Open</button>
     

   • Close via Escape key or backdrop click (handled by the package).

4. Configuration:

   • Publish views for customization:

     php artisan vendor:publish --tag=livewire-ui-slideover-views
     

   • Override default widths/animations in config/livewire-ui-slideover.php.

5. Nested Slideovers:

   • Support overlapping slideovers by leveraging unique keys and Alpine’s stack management.

Advanced Patterns

1. Conditional Rendering:

   • Use mount() to initialize data or hydrate() for dynamic updates:

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

2. Form Handling:

   • Embed Livewire forms inside slideovers for seamless validation:

     <form wire:submit="save">
         <input wire:model="name">
         <button type="submit">Save</button>
     </form>
     

3. Event Listeners:

   • Listen to slideover events (e.g., slideover-opened) via Alpine:

     <div x-data @slideover-opened.window="console.log('Opened')">
         @livewire('edit-user-slideover', key('edit-user'))
     </div>
     

4. Custom Animations:

   • Extend the published Blade template to override Tailwind classes or add CSS transitions.

5. Server-Side Logic:

   • Offload heavy computations to updatedProperty() or updated() hooks:

     protected $listeners = ['refreshData' => 'loadData'];
     

Gotchas and Tips

Common Pitfalls

1. Key Conflicts:

   • Issue: Duplicate keys cause slideovers to share state.
   • Fix: Ensure unique keys for each instance (e.g., key('edit-user-123')).

2. Alpine Scope:

   • Issue: Alpine $wire methods may fail if not in a valid scope.
   • Fix: Wrap slideovers in x-data or use global Alpine events.

3. Tailwind Dependencies:

   • Issue: Custom CSS frameworks may break styling.
   • Fix: Publish views and replace Tailwind classes with your framework’s equivalents.

4. Z-Index Management:

   • Issue: Slideovers may appear behind other elements.
   • Fix: Adjust the z-index in the published Blade template or CSS.

5. Livewire State Persistence:

   • Issue: Slideover state resets on page reload.
   • Fix: Use session storage or persist data in a database/model.

Debugging Tips

1. Log Visibility State:

   • Add debug logs to track slideover state:

     protected $listeners = ['slideover-toggled' => 'logState'];
     public function logState() {
         \Log::info('Slideover state:', ['show' => $this->show]);
     }
     

2. Inspect Alpine Events:

   • Use browser dev tools to verify Alpine event listeners (e.g., slideover-opened).

3. Check for JavaScript Errors:

   • Ensure Alpine and Livewire scripts load before the slideover directive.

4. Validate Key Uniqueness:

   • Use dd($this->key) in mount() to verify keys are unique.

Extension Points

1. Custom Slideover Templates:

   • Override the published Blade template (resources/views/vendor/livewire-ui-slideover/slideover.blade.php) to modify markup, animations, or accessibility attributes.

2. Dynamic Widths:

   • Pass width via component properties:

     public $width = 'md'; // Options: 'sm', 'md', 'lg', 'xl', or custom px/%
     

   • Extend the config to add custom sizes.

3. Accessibility:

   • Enhance the published template with ARIA attributes (e.g., aria-modal, aria-hidden).

4. Server-Side Theming:

   • Use component properties to toggle themes/dark mode:

     public $theme = 'light';
     

   • Apply conditional classes in the Blade template.

5. Integration with Other Packages:

   • Combine with livewire-ui/modal for hybrid dialogs or filament/support for Filament projects by extending the component class.