Livewire 3 update

jfsullivan · Mar 19, 2024 · 54863ab · 54863ab
1 parent 26fae75
commit 54863ab
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 40 deletions.
diff --git a/README.md b/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;

diff --git a/composer.json b/composer.json
@@ -24,7 +24,7 @@
         "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",

diff --git a/config/livewire-ui-modal.php → config/wire-elements-modal.php b/config/livewire-ui-modal.php → config/wire-elements-modal.php
diff --git a/public/modal.js b/public/modal.js
diff --git a/resources/js/modal.js b/resources/js/modal.js
@@ -38,7 +38,7 @@ window.LivewireUIModal = () => {
             }
 
             if (this.getActiveComponentModalAttribute('destroyOnClose') === true) {
-                Livewire.dispatch('destroyComponent', this.activeComponent);
+                Livewire.dispatch('destroyComponent', {id: this.activeComponent});
             }
 
             if (skipPreviousModals > 0) {
@@ -53,7 +53,7 @@ window.LivewireUIModal = () => {
 
             const id = this.componentHistory.pop();
 
-            if (id && force === false) {
+            if (id && !force) {
                 if (id) {
                     this.setActiveModalComponent(id, true);
                 } else {
@@ -148,21 +148,6 @@ window.LivewireUIModal = () => {
             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);
             });

diff --git a/resources/views/modal-test.blade.php b/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>
diff --git a/resources/views/modal.blade.php b/resources/views/modal.blade.php
@@ -35,7 +35,7 @@ class="fixed inset-0 transition-all transform"
         <div class="fixed inset-0 overflow-hidden" x-show="show">
             <div class="absolute inset-0 overflow-hidden">
                 <div 
-                    class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full" 
+                    class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none" 
                     x-bind:class="{ 'pl-10 sm:pl-16' : !fullScreen}"
                     x-show="activeComponentType == 'slide-over'"
                 >
@@ -47,13 +47,15 @@ class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full"
                         x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" 
                         x-transition:leave-start="translate-x-0" 
                         x-transition:leave-end="translate-x-full" 
-                        class="h-full pointer-events-auto w-screen" 
-                        x-bind:class="modalWidth" 
+                        class="w-screen h-full pointer-events-auto" 
+                        x-bind:class="modalWidth"
+                        id="modal-container"
+                        {{-- x-trap.noscroll.inert="show && showActiveComponent" --}}
                         x-description="Slide-over panel, show/hide based on slide-over state."
                     >
                         @foreach($components as $id => $component)
                             @if(isset($component['modalAttributes']['type']) && $component['modalAttributes']['type'] == 'slide-over')
-                                <div class="flex h-full flex-col" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                                <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>
                             @endif
@@ -62,7 +64,7 @@ class="h-full pointer-events-auto w-screen"
                 </div>
 
                 <div class="fixed inset-0 overflow-y-auto" x-show="activeComponentType == 'modal'">
-                    <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
+                    <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
                         <div 
                             x-show="show && activeComponentType == 'modal'" 
                             x-transition:enter="ease-out duration-300" 
@@ -71,13 +73,15 @@ class="h-full pointer-events-auto w-screen"
                             x-transition:leave="ease-in duration-200" 
                             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                            class="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all w-screen sm:p-6" 
+                            class="relative w-screen px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white shadow-xl rounded-xl sm:p-6" 
                             x-bind:class="modalWidth" 
+                            id="modal-container"
+                            x-trap.noscroll.inert="show && showActiveComponent"
                             x-description="Modal panel, show/hide based on modal state." 
                         >
                             @foreach($components as $id => $component)
                                 @if(isset($component['modalAttributes']['type']) && $component['modalAttributes']['type'] == 'modal')
-                                    <div class="flex h-full flex-col" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                                    <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>
                                 @endif