Configurable modal width + prevent close on escape

README.md

@@ -209,6 +209,35 @@ public function update()
 }
 ```
 
+## Changing modal properties
+
+You can change the width of the modal by overriding the static `modalMaxWidth` method in your modal component class:
+
+```php
+public static function modalMaxWidth(): string
+{
+    // 'sm'
+    // 'md'
+    // 'lg'
+    // 'xl'
+    // '2xl'
+    // '3xl'
+    // '4xl'
+    // '5xl'
+    // '6xl'
+    // '7xl'
+    return '2xl';
+}
+```
+
+By default, the modal will close when you hit the `escape` key. If you want to disable this behavior to, for example, prevent accidentally closing the modal you can overwrite the static `closeModalOnEscape` method and have it return `false`.
+```php
+public static function closeModalOnEscape(): bool
+{
+    return false;
+}
+```
+
 ## Skipping previous modals
 In some cases you might want to skip previous modals. For example:
 1. Team overview modal

resources/js/modal.js

@@ -4,6 +4,17 @@ window.LivewireUiModal = () => {
         showActiveComponent: true,
         activeComponent: false,
         componentHistory: [],
+        modalWidth: 'sm:max-w-2xl',
+        getActiveComponentModalAttribute(key) {
+            return this.$wire.get('components')[this.activeComponent]['modalAttributes'][key];
+        },
+        closeModalViaEscape(trigger) {
+            if(this.getActiveComponentModalAttribute('closeOnEscape') === false) {
+                return;
+            }
+
+            this.show = false;
+        },
         setActiveModalComponent(id, skip = false) {
             this.show = true;
 
@@ -14,14 +25,17 @@ window.LivewireUiModal = () => {
             if (this.activeComponent === false) {
                 this.activeComponent = id
                 this.showActiveComponent = true;
+                this.modalWidth = 'sm:max-w-' + this.getActiveComponentModalAttribute('maxWidth');
             } else {
                 this.showActiveComponent = false;
 
                 setTimeout(() => {
                     this.activeComponent = id;
                     this.showActiveComponent = true;
+                    this.modalWidth = 'sm:max-w-' +  this.getActiveComponentModalAttribute('maxWidth');
                 }, 300);
             }
+
         },
         focusables() {
             let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'

resources/views/modal.blade.php

@@ -1,23 +1,8 @@
-@php
-    $maxWidth = [
-        'sm' => 'sm:max-w-sm',
-        'md' => 'sm:max-w-md',
-        'lg' => 'sm:max-w-lg',
-        'xl' => 'sm:max-w-xl',
-        '2xl' => 'sm:max-w-2xl',
-        '3xl' => 'sm:max-w-3xl',
-        '4xl' => 'sm:max-w-4xl',
-        '5xl' => 'sm:max-w-5xl',
-        '6xl' => 'sm:max-w-6xl',
-        '7xl' => 'sm:max-w-7xl',
-    ][$maxWidth ?? '2xl'];
-@endphp
-
 <div
     x-data="LivewireUiModal()"
     x-init="init()"
     x-on:close.stop="show = false"
-    x-on:keydown.escape.window="show = false"
+    x-on:keydown.escape.window="closeModalViaEscape()"
     x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
     x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
     x-show="show"
@@ -49,7 +34,8 @@ class="fixed inset-0 transition-all transform"
             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="inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full {{ $maxWidth }}"
+            :class="modalWidth"
+            class="inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full"
         >
             @forelse($components as $id => $component)
                 <div x-show.immediate="activeComponent == '{{ $id }}'">

src/Modal.php

@@ -33,7 +33,10 @@ public function openModal($component, $componentAttributes = [], $modalAttribute
         $this->components[$id] = [
             'name'            => $component,
             'attributes'      => $componentAttributes,
-            'modalAttributes' => $modalAttributes,
+            'modalAttributes' => array_merge([
+                'closeOnEscape' => $componentClass::closeModalOnEscape(),
+                'maxWidth' => $componentClass::modalMaxWidth(),
+            ], $modalAttributes),
         ];
 
         $this->activeComponent = $id;

src/ModalComponent.php

@@ -43,6 +43,16 @@ public function closeModalWithEvents(array $events): void
         $this->emitModalEvents($events);
     }
 
+    public static function modalMaxWidth(): string
+    {
+        return '2xl';
+    }
+
+    public static function closeModalOnEscape(): bool
+    {
+        return true;
+    }
+
     private function emitModalEvents(array $events): void
     {
         foreach ($events as $component => $event) {

tests/LivewireModalTest.php

@@ -17,7 +17,7 @@ public function testOpenModalEventListener(): void
         // Event attributes
         $component = 'demo-modal';
         $componentAttributes = ['message' => 'Foobar'];
-        $modalAttributes = ['hello' => 'world'];
+        $modalAttributes = ['hello' => 'world', 'closeOnEscape' => true, 'maxWidth' => '2xl'];
 
         // Demo modal unique identifier
         $id = md5($component . serialize($componentAttributes));