Merge pull request #1 from jfsullivan/livewire-3

Livewire 3

README.md

@@ -57,7 +57,7 @@ You can run `php artisan make:livewire EditUser` to make the initial Livewire co
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use LivewireUI\Modal\ModalComponent;
 
@@ -106,7 +106,7 @@ The parameters are passed to the `mount` method on the modal component:
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use App\Models\User;
 use LivewireUI\Modal\ModalComponent;
@@ -151,7 +151,7 @@ You can also close a modal from within your modal component class:
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use App\Models\User;
 use LivewireUI\Modal\ModalComponent;
@@ -290,7 +290,7 @@ You can use the `skipPreviousModal` method to achieve this. By default it will s
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use App\Models\Team;
 use LivewireUI\Modal\ModalComponent;

composer.json

@@ -18,13 +18,13 @@
         "php": "^8.1",
         "spatie/laravel-package-tools": "^1.14.0",
         "illuminate/contracts": "^10.0",
-        "livewire/livewire": "^2.11"
+        "livewire/livewire": "^3.0"
     },
     "require-dev": {
         "laravel/pint": "^1.0",
         "nunomaduro/collision": "^7.9",
         "nunomaduro/larastan": "^2.0.1",
-        "orchestra/testbench": "^8.0",
+        "orchestra/testbench": "^8.5",
         "pestphp/pest": "^2.0",
         "pestphp/pest-plugin-arch": "^2.0",
         "pestphp/pest-plugin-laravel": "^2.0",

phpunit.xml.dist

@@ -9,4 +9,7 @@
             <directory suffix="Test.php">./tests</directory>
         </testsuite>
     </testsuites>
+    <php>
+        <env name="APP_ENV" value="testing"/>
+    </php>
 </phpunit>

resources/js/modal.js

@@ -28,40 +28,43 @@ window.LivewireUIModal = () => {
             this.closeModal(true);
         },
         closeModal(force = false, skipPreviousModals = 0, destroySkipped = false) {
+            if(this.show === false) {
+                return;
+            }
 
             if (this.getActiveComponentModalAttribute('dispatchCloseEvent') === true) {
                 const componentName = this.$wire.get('components')[this.activeComponent].name;
-                Livewire.emit('modalClosed', componentName);
+                Livewire.dispatch('modalClosed', componentName);
             }
 
             if (this.getActiveComponentModalAttribute('destroyOnClose') === true) {
-                Livewire.emit('destroyComponent', this.activeComponent);
+                Livewire.dispatch('destroyComponent', {id: this.activeComponent});
             }
 
             if (skipPreviousModals > 0) {
                 for (var i = 0; i < skipPreviousModals; i++) {
                     if (destroySkipped) {
                         const id = this.componentHistory[this.componentHistory.length - 1];
-                        Livewire.emit('destroyComponent', id);
+                        Livewire.dispatch('destroyComponent', {id: id});
                     }
                     this.componentHistory.pop();
                 }
             }
 
             const id = this.componentHistory.pop();
 
-            if (id && force === false) {
+            if (id && !force) {
                 if (id) {
                     this.setActiveModalComponent(id, true);
                 } else {
-                    this.show = false;
+                    this.setShowPropertyTo(false);
                 }
             } else {
-                this.show = false;
+                this.setShowPropertyTo(false);
             }
         },
         setActiveModalComponent(id, skip = false) {
-            this.show = true;
+            this.setShowPropertyTo(true);
 
             if (this.activeComponent === id) {
                 return;
@@ -104,7 +107,7 @@ window.LivewireUIModal = () => {
             });
         },
         focusables() {
-            let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+            let selector = 'a, button, input:not([type=\'hidden\'], textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
 
             return [...this.$el.querySelectorAll(selector)]
                 .filter(el => !el.hasAttribute('disabled'))
@@ -127,34 +130,31 @@ window.LivewireUIModal = () => {
         prevFocusableIndex() {
             return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1
         },
+        setShowPropertyTo(show) {
+            this.show = show;
+
+            if (show) {
+                document.body.classList.add('overflow-y-hidden');
+            } else {
+                document.body.classList.remove('overflow-y-hidden');
+
+                setTimeout(() => {
+                    this.activeComponent = false;
+                    this.$wire.resetState();
+                }, 300);
+            }
+        },
         init() {
             this.modalWidth = this.getActiveComponentModalAttribute('maxWidthClass');
             this.fullScreen = this.getActiveComponentModalAttribute('fullScreen');
 
-            this.$watch('show', value => {
-                if (value) {
-                    document.body.classList.add('overflow-y-hidden');
-                } else {
-                    document.body.classList.remove('overflow-y-hidden');
-
-                    setTimeout(() => {
-                        this.activeComponent = false;
-                        this.activeComponentType = null;
-
-                        this.$wire.resetState();
-                    }, 300);
-                }
+            Livewire.on('closeModal', (data) => {
+                this.closeModal(data?.force ?? false, data?.skipPreviousModals ?? 0, data?.destroySkipped ?? false);
             });
 
-            Livewire.on('closeModal', (force = false, skipPreviousModals = 0, destroySkipped = false) => {
-                this.closeModal(force, skipPreviousModals, destroySkipped);
-            });
-
-            Livewire.on('activeModalComponentChanged', (id) => {
+            Livewire.on('activeModalComponentChanged', ({id}) => {
                 this.setActiveModalComponent(id);
             });
-
-
         }
     };
 }

resources/views/modal-test.blade.php

@@ -0,0 +1,30 @@
+{{-- w-screen max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl max-w-full duration-2000--}}
+<div>
+    @isset($jsPath)
+        <script>{!! file_get_contents($jsPath) !!}</script>
+    @endisset
+    @isset($cssPath)
+        <style>{!! file_get_contents($cssPath) !!}</style>
+    @endisset
+
+    @teleport('body')
+        <div
+            x-data="LivewireUIModal()"
+            x-on:close.stop="setShowPropertyTo(false)"
+            x-on:keydown.escape.window="closeModalOnEscape()"
+            x-show="show"
+            class="fixed inset-0 z-40 overflow-y-auto"
+            style="display: none;"
+        >
+            <div class="w-screen h-full pointer-events-auto" 
+                x-bind:class="modalWidth"
+            >
+                @foreach($components as $id => $component)
+                    <div class="flex flex-col h-full" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                        @livewire($component['name'], $component['arguments'], key($id))
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endteleport
+</div>