Wire Content Modal Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require linuxstreet/wire-content-modal
   

2. Publish Config (Optional)

   php artisan vendor:publish --provider="Linuxstreet\WireContentModal\WireContentModalServiceProvider"
   

   • Default config is minimal; customize only if needed (e.g., modal styling, default sizes).

3. First Use Case: Basic Modal Trigger

   @livewire('your-component', key('modal-trigger'))
   <button wire:click="$dispatch('open-modal', { component: 'your-component', key: 'modal-trigger' })">
       Open Modal
   </button>
   

   • Key Insight: The key attribute ensures the modal targets the correct Livewire component instance.

4. Default Modal Blade Locate the published Blade template at: resources/views/vendor/wire-content-modal/modal.blade.php

   • Modify this file to adjust modal styling, buttons, or layout.

Implementation Patterns

1. Dynamic Component Loading

• Workflow: Load any Livewire component or Blade view dynamically.

  @livewire('dynamic-component', key('dynamic-key'))
  <button wire:click="$dispatch('open-modal', {
      component: 'dynamic-component',
      key: 'dynamic-key',
      size: 'lg',
      title: 'Custom Title'
  })">
      Open Dynamic
  </button>
  

• Tip: Use size (e.g., sm, md, lg, xl) and title parameters for consistency.

2. Blade Views in Modals

• Pattern: Pass a Blade view path instead of a Livewire component.

  $dispatch('open-modal', {
      view: 'path.to.view',
      data: { key: 'value' } // Optional data to pass to the view
  });
  

• Integration: Use wire:ignore on the modal container to prevent Livewire from re-rendering it:

  <div wire:ignore>
      @include('path.to.view', ['data' => $data])
  </div>
  

3. Reusable Modal Components

• Anti-Pattern: Avoid hardcoding modal logic in multiple places.
• Solution: Create a base Livewire component for modals:

  // app/Http/Livewire/BaseModal.php
  public function mount($key) {
      $this->key = $key;
  }
  

  Extend this in your components and reuse the same modal trigger logic.

4. Form Handling

• Pattern: Use the modal for multi-step forms or confirmation dialogs.

  <!-- Inside modal component -->
  <form wire:submit.prevent="submitForm">
      @csrf
      <input wire:model="name">
      <button type="submit">Save</button>
  </form>
  

• Tip: Reset form state after submission to avoid conflicts:

  public function submitForm() {
      $this->validate([...]);
      // Save logic
      $this->reset(['name']); // Reset only form fields
  }
  

5. Event Listeners

• Integration: Listen for modal events globally or in components.

  // Global listener (e.g., in a Livewire component)
  this.$wire.on('modal-opened', (component) => {
      console.log('Opened:', component);
  });
  

• Common Events:
  • open-modal (trigger)
  • modal-opened (after render)
  • modal-closed (after close)

Gotchas and Tips

Pitfalls

1. Key Collisions

   • Issue: Using duplicate key values can cause modals to target the wrong component.
   • Fix: Use unique keys (e.g., user-{{ $user->id }}-edit-modal).

2. Livewire State Persistence

   • Issue: Modal components retain state between opens/closes if not reset.
   • Fix: Reset component properties in mount() or updated():

     public function mount() {
         $this->resetExcept(['persistent_data']);
     }
     

3. Blade View Data Binding

   • Issue: Data passed to Blade views via open-modal isn’t automatically available.
   • Fix: Use wire:ignore and manually pass data:

     <div wire:ignore>
         @include('view.name', ['data' => $this->data])
     </div>
     

4. Styling Conflicts

   • Issue: Default modal styles may clash with your app’s CSS.
   • Fix: Override the published Blade template or use custom classes:

     <x-wire-content-modal::modal class="custom-modal-classes">
     

Debugging Tips

1. Check Dispatch Events

   • Use browser dev tools to verify events are fired correctly:

     window.addEventListener('open-modal', (e) => {
         console.log('Modal event:', e.detail);
     });
     

2. Inspect Livewire Keys

   • Ensure key attributes match between triggers and components:

     // Debug in component
     dd($this->key); // Should match the dispatched key
     

3. Clear Cached Views

   • If Blade views don’t update, clear the view cache:

     php artisan view:clear
     

Extension Points

1. Custom Modal Templates

   • Override the default Blade template by publishing and modifying:

     php artisan vendor:publish --tag=wire-content-modal-views
     

2. Add Animation

   • Extend the modal Blade template to include libraries like Alpine.js or Tailwind animations:

     <div x-data="{ open: false }" x-show="open" @open-modal.window="open = true">
         <!-- Modal content -->
     </div>
     

3. Server-Side Logic

   • Use the WireContentModal facade to trigger modals from server-side code:

     use Linuxstreet\WireContentModal\Facades\WireContentModal;
     
     WireContentModal::open('component.name', ['key' => 'unique-key']);
     

   • Note: This requires additional setup (see package docs for facade usage).

4. Accessibility

   • Ensure modals are keyboard-navigable and screen-reader friendly by adding ARIA attributes:

     <div role="dialog" aria-modal="true" aria-labelledby="modal-title">