Livewire Slideover Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require cloudmeshdev/livewire-slideover
   

   Add the Livewire directive to your layout (e.g., resources/views/layouts/app.blade.php):

   @livewire('livewire-ui-slideover')
   

2. Generate a Slideover Component

   php artisan make:livewire EditUserSlideover
   

   Update the generated class to extend SlideoverComponent:

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

3. First Use Case Trigger the slideover from a button in your view:

   <button wire:click="$emit('open-slideover', 'edit-user-slideover')">
       Edit User
   </button>
   

   Render the slideover in a dedicated view (resources/views/livewire/edit-user-slideover.blade.php):

   <div class="slideover-content">
       <!-- Your content here -->
   </div>
   

Implementation Patterns

Core Workflow

1. Component Initialization Extend SlideoverComponent to inherit:

   • Slideover state management (open/close).
   • Configurable width (default: 400px).
   • Alpine.js integration for smooth animations.

2. Triggering Slideovers Use $emit('open-slideover', 'component-name') to open a slideover dynamically. Close via $emit('close-slideover') or by clicking outside the content.

3. Multiple Slideovers The package supports overlapping slideovers. Assign unique IDs to each component:

   public $slideoverId = 'edit-user-slideover'; // Required
   

4. Styling & Theming

   • TailwindCSS: Use provided classes (e.g., slideover-backdrop, slideover-content).
   • Custom CSS: Publish views and override templates:

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

     Modify resources/views/vendor/livewire-ui-slideover/slideover.blade.php.

5. Dynamic Content Pass data to slideovers via Livewire properties:

   public $userData = [];
   
   public function mount($userId) {
       $this->userData = User::find($userId)->toArray();
   }
   

   Access in the view:

   <input wire:model="userData.name">
   

6. Nested Slideovers Open a second slideover from within another:

   <button wire:click="$emit('open-slideover', 'nested-slideover')">
       Nested Action
   </button>
   

Gotchas and Tips

Pitfalls

1. Missing slideoverId Forgetting to set public $slideoverId will break slideover targeting. Always define it:

   public $slideoverId = 'unique-component-name';
   

2. Z-Index Conflicts Overlapping slideovers may hide behind modals or fixed elements. Ensure parent containers have sufficient z-index (e.g., z-50 for backdrops).

3. Alpine.js Conflicts If using Alpine.js v2, manually include it in your layout:

   <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.x.x/dist/alpine.min.js"></script>
   

   The package assumes Alpine v3 (bundled with Livewire v3).

4. TailwindCSS Class Overrides Custom styles may clash with Tailwind’s default classes. Use !important sparingly; prefer utility classes like !m-0 over resetting entire classes.

5. Livewire Event Scope Events like open-slideover are global. Avoid naming collisions with other Livewire components.

Debugging

• Slideover Not Opening? Check browser console for Alpine.js errors. Verify the slideoverId matches the emitted event:

  // Expected: $wire.emit('open-slideover', 'edit-user-slideover');
  

• Styling Issues Inspect the rendered HTML to confirm classes are applied. Publish the view template if overriding styles:

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

• Performance with Many Slideovers Each slideover adds a backdrop div. For >3 overlapping slideovers, consider lazy-loading or optimizing animations.

Extension Points

1. Custom Animations Override Alpine.js directives in the published template. Example:

   <!-- resources/views/vendor/livewire-ui-slideover/slideover.blade.php -->
   <script>
       document.addEventListener('alpine:init', () => {
           Alpine.data('slideover', () => ({
               enter() { /* Custom enter animation */ },
               leave() { /* Custom leave animation */ }
           }));
       });
   </script>
   

2. Slideover Width Logic Dynamically set width in the component:

   public function getWidthProperty() {
       return request()->wantsJson ? '600px' : '400px';
   }
   

3. Accessibility Add ARIA attributes to the published template:

   <div
       x-show="isOpen"
       @click.away="$wire.closeSlideover"
       role="dialog"
       aria-modal="true"
       aria-labelledby="slideover-title"
   >
   

4. Server-Side Logic Use Livewire hooks to trigger actions on slideover state changes:

   protected $listeners = ['slideoverOpened' => 'handleSlideoverOpen'];
   
   public function handleSlideoverOpen() {
       $this->resetValidation();
   }