Add edit modal slide-over option (#31)

* Add edit modal slideover option * Update README.md --------- Co-authored-by: Mo Khosh <[email protected]>
mokhosh · Apr 8, 2024 · f350ca6 · f350ca6
1 parent 3a86761
commit f350ca6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -195,7 +195,7 @@ The `data` array contains the form data, and the `state` array contains the full
 
 ### Customizing modal's appearance
 
-You can customize modal's title, size and the labels for save and cancel buttons:
+You can customize modal's title, size and the labels for save and cancel buttons, or use Filament's slide-over instead of a modal:
 
 ```php
 protected string $editModalTitle = 'Edit Record';
@@ -205,6 +205,8 @@ protected string $editModalWidth = '2xl';
 protected string $editModalSaveButtonLabel = 'Save';
 
 protected string $editModalCancelButtonLabel = 'Cancel';
+
+protected bool $editModalSlideOver = true;
 ```
 
 ## Customization

diff --git a/resources/views/components/edit-record-modal.blade.php b/resources/views/components/edit-record-modal.blade.php
@@ -1,5 +1,5 @@
 <x-filament-panels::form wire:submit.prevent="editModalFormSubmitted">
-    <x-filament::modal id="kanban--edit-record-modal" :width="$this->getEditModalWidth()">
+    <x-filament::modal id="kanban--edit-record-modal" :slideOver="$this->getEditModalSlideOver()" :width="$this->getEditModalWidth()">
         <x-slot name="header">
             <x-filament::modal.heading>
                 {{ $this->getEditModalTitle() }}

diff --git a/src/Concerns/HasEditRecordModal.php b/src/Concerns/HasEditRecordModal.php
@@ -15,6 +15,8 @@ trait HasEditRecordModal
 
     protected string $editModalTitle = 'Edit Record';
 
+    protected bool $editModalSlideOver = false;
+
     protected string $editModalWidth = '2xl';
 
     protected string $editModalSaveButtonLabel = 'Save';
@@ -81,6 +83,11 @@ protected function getEditModalTitle(): string
         return $this->editModalTitle;
     }
 
+    protected function getEditModalSlideOver(): bool
+    {
+        return $this->editModalSlideOver;
+    }
+
     protected function getEditModalWidth(): string
     {
         return $this->editModalWidth;