From 94182fead3db78369404ca5c37a1fc06de46a233 Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Tue, 2 Apr 2024 23:53:47 +0000 Subject: [PATCH 01/16] Initial commit --- packages/actions/resources/views/components/modals.blade.php | 5 +++++ .../support/resources/views/components/modal/index.blade.php | 2 ++ 2 files changed, 7 insertions(+) diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index db7911121c..d0dde15a2e 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -5,6 +5,7 @@ @endphp null, 'alignment' => Alignment::Start, 'ariaLabelledby' => null, 'closeButton' => \Filament\Support\View\Components\Modal::$hasCloseButton, @@ -172,6 +173,7 @@ @endif @class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', + 'fi-modal-window-' . str($actionName)->camel()->kebab() => $actionName, 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 // to ensure compatibility with custom themes that may use an older version of Tailwind CSS. From e26a10788640bf7b76e8baa5f56fad99fddcdbcd Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Wed, 3 Apr 2024 08:04:28 +0000 Subject: [PATCH 02/16] Add method to CanOpenModal, change arg name --- .../resources/views/components/modals.blade.php | 10 +++++----- packages/actions/src/Concerns/CanOpenModal.php | 5 +++++ .../resources/views/components/modal/index.blade.php | 4 ++-- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index d0dde15a2e..32e8598145 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -5,7 +5,6 @@ @endphp getName())->camel()->kebab(); + } } diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index e53c445ef6..c98a2d746d 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -4,7 +4,6 @@ @endphp @props([ - 'actionName' => null, 'alignment' => Alignment::Start, 'ariaLabelledby' => null, 'closeButton' => \Filament\Support\View\Components\Modal::$hasCloseButton, @@ -21,6 +20,7 @@ 'iconAlias' => null, 'iconColor' => 'primary', 'id' => null, + 'modalWindowClass' => null, 'openEventName' => 'open-modal', 'slideOver' => false, 'stickyFooter' => false, @@ -173,7 +173,7 @@ @endif @class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', - 'fi-modal-window-' . str($actionName)->camel()->kebab() => $actionName, + $modalWindowClass => $modalWindowClass, 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 // to ensure compatibility with custom themes that may use an older version of Tailwind CSS. From c1eaf4cefa31737bdb2a30ddfb76d4e5845df6e6 Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:46:30 +0000 Subject: [PATCH 03/16] Refactor to extraModalAttributes --- .../views/components/modals.blade.php | 30 ++++++++++--- .../src/Concerns/HasExtraModalAttributes.php | 42 +++++++++++++++++++ packages/actions/src/MountableAction.php | 1 + .../views/components/modal/index.blade.php | 2 - 4 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 packages/actions/src/Concerns/HasExtraModalAttributes.php diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index 32e8598145..630e3edefb 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -16,7 +16,6 @@ :icon="$action?->getModalIcon()" :icon-color="$action?->getModalIconColor()" :id="$this->getId() . '-action'" - :modal-window-class="$action?->getModalWindowClass()" :slide-over="$action?->isModalSlideOver()" :sticky-footer="$action?->isModalFooterSticky()" :sticky-header="$action?->isModalHeaderSticky()" @@ -38,6 +37,11 @@ $wire.unmountAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" + :attributes=" + \Filament\Support\prepare_inherited_attributes( + new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) + ) + " > @if ($action) {{ $action->getModalContent() }} @@ -76,7 +80,6 @@ :icon="$action?->getModalIcon()" :icon-color="$action?->getModalIconColor()" :id="$this->getId() . '-table-action'" - :modal-window-class="$action?->getModalWindowClass()" :slide-over="$action?->isModalSlideOver()" :sticky-footer="$action?->isModalFooterSticky()" :sticky-header="$action?->isModalHeaderSticky()" @@ -98,6 +101,11 @@ $wire.unmountTableAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" + :attributes=" + \Filament\Support\prepare_inherited_attributes( + new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) + ) + " > @if ($action) {{ $action->getModalContent() }} @@ -130,7 +138,6 @@ :icon="$action?->getModalIcon()" :icon-color="$action?->getModalIconColor()" :id="$this->getId() . '-table-bulk-action'" - :modal-window-class="$action?->getModalWindowClass()" :slide-over="$action?->isModalSlideOver()" :sticky-footer="$action?->isModalFooterSticky()" :sticky-header="$action?->isModalHeaderSticky()" @@ -152,6 +159,11 @@ $wire.unmountTableBulkAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" + :attributes=" + \Filament\Support\prepare_inherited_attributes( + new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) + ) + " > @if ($action) {{ $action->getModalContent() }} @@ -190,7 +202,6 @@ :icon="$action?->getModalIcon()" :icon-color="$action?->getModalIconColor()" :id="$this->getId() . '-infolist-action'" - :modal-window-class="$action?->getModalWindowClass()" :slide-over="$action?->isModalSlideOver()" :sticky-footer="$action?->isModalFooterSticky()" :sticky-header="$action?->isModalHeaderSticky()" @@ -212,6 +223,11 @@ $wire.unmountInfolistAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" + :attributes=" + \Filament\Support\prepare_inherited_attributes( + new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) + ) + " > @if ($action) {{ $action->getModalContent() }} @@ -250,7 +266,6 @@ :icon="$action?->getModalIcon()" :icon-color="$action?->getModalIconColor()" :id="$this->getId() . '-form-component-action'" - :modal-window-class="$action?->getModalWindowClass()" :slide-over="$action?->isModalSlideOver()" :sticky-footer="$action?->isModalFooterSticky()" :sticky-header="$action?->isModalHeaderSticky()" @@ -264,6 +279,11 @@ $wire.unmountFormComponentAction(false) } " + :attributes=" + \Filament\Support\prepare_inherited_attributes( + new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) + ) + " > @if ($action) {{ $action->getModalContent() }} diff --git a/packages/actions/src/Concerns/HasExtraModalAttributes.php b/packages/actions/src/Concerns/HasExtraModalAttributes.php new file mode 100644 index 0000000000..f1365bfd03 --- /dev/null +++ b/packages/actions/src/Concerns/HasExtraModalAttributes.php @@ -0,0 +1,42 @@ + | Closure> + */ + protected array $extraModalAttributes = []; + + /** + * @param array | Closure $attributes + */ + public function extraModalAttributes(array | Closure $attributes, bool $merge = false): static + { + if ($merge) { + $this->extraModalAttributes[] = $attributes; + } else { + $this->extraModalAttributes = [$attributes]; + } + + return $this; + } + + /** + * @return array + */ + public function getExtraModalAttributes(): array + { + $temporaryAttributeBag = new ComponentAttributeBag(); + + foreach ($this->extraModalAttributes as $extraModalAttributes) { + $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($extraModalAttributes)); + } + + return $temporaryAttributeBag->getAttributes(); + } +} diff --git a/packages/actions/src/MountableAction.php b/packages/actions/src/MountableAction.php index 260378a452..043dcb0f71 100644 --- a/packages/actions/src/MountableAction.php +++ b/packages/actions/src/MountableAction.php @@ -19,6 +19,7 @@ abstract class MountableAction extends StaticAction implements HasLivewire use Concerns\HasForm; use Concerns\HasInfolist; use Concerns\HasLifecycleHooks; + use Concerns\HasExtraModalAttributes; use Concerns\HasParentActions; use Concerns\HasWizard; diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index c98a2d746d..678a467ea4 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -20,7 +20,6 @@ 'iconAlias' => null, 'iconColor' => 'primary', 'id' => null, - 'modalWindowClass' => null, 'openEventName' => 'open-modal', 'slideOver' => false, 'stickyFooter' => false, @@ -173,7 +172,6 @@ @endif @class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', - $modalWindowClass => $modalWindowClass, 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 // to ensure compatibility with custom themes that may use an older version of Tailwind CSS. From c806822f2983c9645e39d9583b457ec7f0de7d7e Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:48:37 +0000 Subject: [PATCH 04/16] Revert CanOpenModal changes --- packages/actions/src/Concerns/CanOpenModal.php | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/actions/src/Concerns/CanOpenModal.php b/packages/actions/src/Concerns/CanOpenModal.php index 173222a6b5..e7ec7e39f0 100644 --- a/packages/actions/src/Concerns/CanOpenModal.php +++ b/packages/actions/src/Concerns/CanOpenModal.php @@ -653,9 +653,4 @@ trait CanOpenModal return $this; } - - public function getModalWindowClass(): string - { - return 'fi-modal-window-' . str($this->getName())->camel()->kebab(); - } } From 42997e78063a3b25dc4d535bd6d73d6300aa207d Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:57:19 +0000 Subject: [PATCH 05/16] Fix OCD --- packages/actions/src/MountableAction.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/actions/src/MountableAction.php b/packages/actions/src/MountableAction.php index 043dcb0f71..6c5b1bfb14 100644 --- a/packages/actions/src/MountableAction.php +++ b/packages/actions/src/MountableAction.php @@ -16,10 +16,10 @@ abstract class MountableAction extends StaticAction implements HasLivewire use Concerns\CanRedirect; use Concerns\CanRequireConfirmation; use Concerns\CanUseDatabaseTransactions; + use Concerns\HasExtraModalAttributes; use Concerns\HasForm; use Concerns\HasInfolist; use Concerns\HasLifecycleHooks; - use Concerns\HasExtraModalAttributes; use Concerns\HasParentActions; use Concerns\HasWizard; From 909c5104ea5c5683a0901ec1aaa08f5dba18f0ca Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Thu, 4 Apr 2024 12:19:45 +0000 Subject: [PATCH 06/16] Update docs --- packages/actions/docs/04-modals.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 2d3c11b78f..8537e3e55a 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -272,6 +272,15 @@ Now, in the view file, you can render the action button by calling `getModalActi ``` +## Adding extra attributes to modal container + +You may also pass extra HTML attributes to the modal container using `extraModalAttributes()`: + +```php +Action::make('updateAuthor') + ->extraModalAttributes(['class' => 'update-author-modal']) +``` + ## Using a slide-over instead of a modal You can open a "slide-over" dialog instead of a modal by using the `slideOver()` method: From 73ed6acb2160b11c42abaa4f033fac460d0b39bd Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Thu, 4 Apr 2024 12:26:44 +0000 Subject: [PATCH 07/16] Update docs --- packages/actions/docs/04-modals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 8537e3e55a..2222ebc220 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -272,7 +272,7 @@ Now, in the view file, you can render the action button by calling `getModalActi ``` -## Adding extra attributes to modal container +## Adding extra attributes to the modal container You may also pass extra HTML attributes to the modal container using `extraModalAttributes()`: From d3272a1723f5c786ba1a4e552c1e00329ab145bf Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Fri, 5 Apr 2024 00:21:23 +0000 Subject: [PATCH 08/16] Refactor to extraModalWindowAttributes --- packages/actions/docs/04-modals.md | 6 +-- .../views/components/modals.blade.php | 30 +++---------- .../src/Concerns/HasExtraModalAttributes.php | 42 ------------------- .../HasExtraModalWindowAttributes.php | 23 ++++++++++ packages/actions/src/MountableAction.php | 2 +- .../views/components/modal/index.blade.php | 6 ++- 6 files changed, 36 insertions(+), 73 deletions(-) delete mode 100644 packages/actions/src/Concerns/HasExtraModalAttributes.php create mode 100644 packages/actions/src/Concerns/HasExtraModalWindowAttributes.php diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 2222ebc220..fb609242df 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -272,13 +272,13 @@ Now, in the view file, you can render the action button by calling `getModalActi ``` -## Adding extra attributes to the modal container +## Adding extra attributes to the modal window -You may also pass extra HTML attributes to the modal container using `extraModalAttributes()`: +You may also pass extra HTML attributes to the modal window using `extraModalWindowAttributes()`: ```php Action::make('updateAuthor') - ->extraModalAttributes(['class' => 'update-author-modal']) + ->extraModalWindowAttributes(['class' => 'update-author-modal']) ``` ## Using a slide-over instead of a modal diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index 630e3edefb..394308247e 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -10,6 +10,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -37,11 +38,6 @@ $wire.unmountAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" - :attributes=" - \Filament\Support\prepare_inherited_attributes( - new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) - ) - " > @if ($action) {{ $action->getModalContent() }} @@ -74,6 +70,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -101,11 +98,6 @@ $wire.unmountTableAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" - :attributes=" - \Filament\Support\prepare_inherited_attributes( - new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) - ) - " > @if ($action) {{ $action->getModalContent() }} @@ -132,6 +124,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -159,11 +152,6 @@ $wire.unmountTableBulkAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" - :attributes=" - \Filament\Support\prepare_inherited_attributes( - new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) - ) - " > @if ($action) {{ $action->getModalContent() }} @@ -196,6 +184,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -223,11 +212,6 @@ $wire.unmountInfolistAction(false) " x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()" - :attributes=" - \Filament\Support\prepare_inherited_attributes( - new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) - ) - " > @if ($action) {{ $action->getModalContent() }} @@ -260,6 +244,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -279,11 +264,6 @@ $wire.unmountFormComponentAction(false) } " - :attributes=" - \Filament\Support\prepare_inherited_attributes( - new \Illuminate\View\ComponentAttributeBag($action?->getExtraModalAttributes() ?? []) - ) - " > @if ($action) {{ $action->getModalContent() }} diff --git a/packages/actions/src/Concerns/HasExtraModalAttributes.php b/packages/actions/src/Concerns/HasExtraModalAttributes.php deleted file mode 100644 index f1365bfd03..0000000000 --- a/packages/actions/src/Concerns/HasExtraModalAttributes.php +++ /dev/null @@ -1,42 +0,0 @@ - | Closure> - */ - protected array $extraModalAttributes = []; - - /** - * @param array | Closure $attributes - */ - public function extraModalAttributes(array | Closure $attributes, bool $merge = false): static - { - if ($merge) { - $this->extraModalAttributes[] = $attributes; - } else { - $this->extraModalAttributes = [$attributes]; - } - - return $this; - } - - /** - * @return array - */ - public function getExtraModalAttributes(): array - { - $temporaryAttributeBag = new ComponentAttributeBag(); - - foreach ($this->extraModalAttributes as $extraModalAttributes) { - $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($extraModalAttributes)); - } - - return $temporaryAttributeBag->getAttributes(); - } -} diff --git a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php new file mode 100644 index 0000000000..4063d4502f --- /dev/null +++ b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php @@ -0,0 +1,23 @@ +extraModalWindowAttributes = $attributes; + + return $this; + } + + public function getExtraModalWindowAttributes(): array + { + return $this->evaluate($this->extraModalWindowAttributes); + } +} diff --git a/packages/actions/src/MountableAction.php b/packages/actions/src/MountableAction.php index 6c5b1bfb14..f484ca2cbb 100644 --- a/packages/actions/src/MountableAction.php +++ b/packages/actions/src/MountableAction.php @@ -16,7 +16,7 @@ abstract class MountableAction extends StaticAction implements HasLivewire use Concerns\CanRedirect; use Concerns\CanRequireConfirmation; use Concerns\CanUseDatabaseTransactions; - use Concerns\HasExtraModalAttributes; + use Concerns\HasExtraModalWindowAttributes; use Concerns\HasForm; use Concerns\HasInfolist; use Concerns\HasLifecycleHooks; diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 678a467ea4..5ac79d2abd 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -11,6 +11,7 @@ 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', + 'extraModalWindowAttributes' => [], 'footer' => null, 'footerActions' => [], 'footerActionsAlignment' => Alignment::Start, @@ -30,6 +31,7 @@ ]) @php + ray($extraModalWindowAttributes); $hasDescription = filled($description); $hasHeading = filled($heading); $hasIcon = filled($icon); @@ -170,7 +172,7 @@ x-transition:leave-start="scale-100 opacity-100" x-transition:leave-end="scale-95 opacity-0" @endif - @class([ + {{ $attributes->class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 @@ -203,7 +205,7 @@ MaxWidth::Screen => 'fixed inset-0', default => $width, }, - ]) + ])->merge($extraModalWindowAttributes) }} > @if ($heading || $header)
Date: Fri, 5 Apr 2024 00:23:08 +0000 Subject: [PATCH 09/16] Refactor to extraModalWindowAttributes --- .../support/resources/views/components/modal/index.blade.php | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 5ac79d2abd..8bc858786c 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -31,7 +31,6 @@ ]) @php - ray($extraModalWindowAttributes); $hasDescription = filled($description); $hasHeading = filled($heading); $hasIcon = filled($icon); From 45b585fd91e2377014645509837b1dacf547504e Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Fri, 5 Apr 2024 00:30:19 +0000 Subject: [PATCH 10/16] Fix PHPStan --- .../src/Concerns/HasExtraModalWindowAttributes.php | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php index 4063d4502f..b522ed4f90 100644 --- a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php +++ b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php @@ -7,8 +7,14 @@ use Illuminate\View\ComponentAttributeBag; trait HasExtraModalWindowAttributes { + /** + * @var array | Closure> + */ protected array $extraModalWindowAttributes = []; + /** + * @param array | Closure $attributes + */ public function extraModalWindowAttributes(array | Closure $attributes): static { $this->extraModalWindowAttributes = $attributes; @@ -16,6 +22,9 @@ trait HasExtraModalWindowAttributes return $this; } + /** + * @return array + */ public function getExtraModalWindowAttributes(): array { return $this->evaluate($this->extraModalWindowAttributes); From 74d6735ed2b9b56d699b2e22d66336788c3dd923 Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Fri, 5 Apr 2024 00:47:29 +0000 Subject: [PATCH 11/16] wip --- packages/actions/src/Concerns/HasExtraModalWindowAttributes.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php index b522ed4f90..d82139c3e5 100644 --- a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php +++ b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php @@ -10,7 +10,7 @@ trait HasExtraModalWindowAttributes /** * @var array | Closure> */ - protected array $extraModalWindowAttributes = []; + protected array | Closure $extraModalWindowAttributes = []; /** * @param array | Closure $attributes From e241c2a573800b2350d69f65bea3b14aa1038089 Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Fri, 5 Apr 2024 09:05:13 +0000 Subject: [PATCH 12/16] Use attribute bag --- .../resources/views/components/modals.blade.php | 10 +++++----- .../src/Concerns/HasExtraModalWindowAttributes.php | 11 ++++++----- .../resources/views/components/modal/index.blade.php | 8 +++++--- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index 394308247e..d9b43efd5f 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -10,7 +10,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" + :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -70,7 +70,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" + :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -124,7 +124,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" + :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -184,7 +184,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" + :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -244,7 +244,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes="$action?->getExtraModalWindowAttributes()" + :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" diff --git a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php index d82139c3e5..33dab7c3e1 100644 --- a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php +++ b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php @@ -22,11 +22,12 @@ trait HasExtraModalWindowAttributes return $this; } - /** - * @return array - */ - public function getExtraModalWindowAttributes(): array + public function getExtraModalWindowAttributesBag(): ComponentAttributeBag { - return $this->evaluate($this->extraModalWindowAttributes); + $temporaryAttributeBag = new ComponentAttributeBag(); + + $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($this->extraModalWindowAttributes)); + + return $temporaryAttributeBag; } } diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 8bc858786c..43dda174c2 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -11,7 +11,7 @@ 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', - 'extraModalWindowAttributes' => [], + 'extraModalWindowAttributesBag' => new \Illuminate\View\ComponentAttributeBag([]), 'footer' => null, 'footerActions' => [], 'footerActionsAlignment' => Alignment::Start, @@ -48,6 +48,8 @@ } $closeEventHandler = filled($id) ? '$dispatch(' . \Illuminate\Support\Js::from($closeEventName) . ', { id: ' . \Illuminate\Support\Js::from($id) . ' })' : 'close()'; + + $modalWindowAttributes = $extraModalWindowAttributesBag ?? new \Illuminate\View\ComponentAttributeBag([]); @endphp
class([ + {{ $modalWindowAttributes->class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 @@ -204,7 +206,7 @@ MaxWidth::Screen => 'fixed inset-0', default => $width, }, - ])->merge($extraModalWindowAttributes) }} + ]) }} > @if ($heading || $header)
Date: Fri, 5 Apr 2024 09:23:14 +0000 Subject: [PATCH 13/16] Use attribute bag --- .../support/resources/views/components/modal/index.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 43dda174c2..c8291eae94 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -11,7 +11,7 @@ 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', - 'extraModalWindowAttributesBag' => new \Illuminate\View\ComponentAttributeBag([]), + 'extraModalWindowAttributesBag' => null, 'footer' => null, 'footerActions' => [], 'footerActionsAlignment' => Alignment::Start, From 010370af252f22a1aedf70e1497cc3a7afc21c76 Mon Sep 17 00:00:00 2001 From: Raj Siva-Rajah <5361908+binaryfire@users.noreply.github.com> Date: Fri, 5 Apr 2024 09:44:01 +0000 Subject: [PATCH 14/16] Use attribute bag --- .../support/resources/views/components/modal/index.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index c8291eae94..95d735b5aa 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -49,7 +49,7 @@ $closeEventHandler = filled($id) ? '$dispatch(' . \Illuminate\Support\Js::from($closeEventName) . ', { id: ' . \Illuminate\Support\Js::from($id) . ' })' : 'close()'; - $modalWindowAttributes = $extraModalWindowAttributesBag ?? new \Illuminate\View\ComponentAttributeBag([]); + $modalWindowAttributes = $extraModalWindowAttributesBag ?? new \Illuminate\View\ComponentAttributeBag(); @endphp
Date: Thu, 11 Apr 2024 07:42:23 +0000 Subject: [PATCH 15/16] Update --- .../views/components/modals.blade.php | 10 +++---- .../HasExtraModalWindowAttributes.php | 28 ++++++++++++++----- .../views/components/modal/index.blade.php | 4 +-- 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index d9b43efd5f..d4e91b8217 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -10,7 +10,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -70,7 +70,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -124,7 +124,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -184,7 +184,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -244,7 +244,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" - :extra-modal-window-attributes-bag="$action?->getExtraModalWindowAttributesBag()" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" diff --git a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php index 33dab7c3e1..e4973b7cb9 100644 --- a/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php +++ b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php @@ -8,26 +8,40 @@ use Illuminate\View\ComponentAttributeBag; trait HasExtraModalWindowAttributes { /** - * @var array | Closure> + * @var array | Closure> */ - protected array | Closure $extraModalWindowAttributes = []; + protected array $extraModalWindowAttributes = []; /** * @param array | Closure $attributes */ - public function extraModalWindowAttributes(array | Closure $attributes): static + public function extraModalWindowAttributes(array | Closure $attributes, bool $merge = false): static { - $this->extraModalWindowAttributes = $attributes; + if ($merge) { + $this->extraModalWindowAttributes[] = $attributes; + } else { + $this->extraModalWindowAttributes = [$attributes]; + } return $this; } - public function getExtraModalWindowAttributesBag(): ComponentAttributeBag + /** + * @return array + */ + public function getExtraModalWindowAttributes(): array { $temporaryAttributeBag = new ComponentAttributeBag(); - $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($this->extraModalWindowAttributes)); + foreach ($this->extraModalWindowAttributes as $extraModalWindowAttributes) { + $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($extraModalWindowAttributes)); + } - return $temporaryAttributeBag; + return $temporaryAttributeBag->getAttributes(); + } + + public function getExtraModalWindowAttributeBag(): ComponentAttributeBag + { + return new ComponentAttributeBag($this->getExtraModalWindowAttributes()); } } diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 95d735b5aa..429702528e 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -11,7 +11,7 @@ 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', - 'extraModalWindowAttributesBag' => null, + 'extraModalWindowAttributeBag' => null, 'footer' => null, 'footerActions' => [], 'footerActionsAlignment' => Alignment::Start, @@ -49,7 +49,7 @@ $closeEventHandler = filled($id) ? '$dispatch(' . \Illuminate\Support\Js::from($closeEventName) . ', { id: ' . \Illuminate\Support\Js::from($id) . ' })' : 'close()'; - $modalWindowAttributes = $extraModalWindowAttributesBag ?? new \Illuminate\View\ComponentAttributeBag(); + $modalWindowAttributes = $extraModalWindowAttributeBag ?? new \Illuminate\View\ComponentAttributeBag(); @endphp
Date: Thu, 11 Apr 2024 08:45:49 +0100 Subject: [PATCH 16/16] Update 04-modals.md --- packages/actions/docs/04-modals.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index fb609242df..312bf08326 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -272,15 +272,6 @@ Now, in the view file, you can render the action button by calling `getModalActi
``` -## Adding extra attributes to the modal window - -You may also pass extra HTML attributes to the modal window using `extraModalWindowAttributes()`: - -```php -Action::make('updateAuthor') - ->extraModalWindowAttributes(['class' => 'update-author-modal']) -``` - ## Using a slide-over instead of a modal You can open a "slide-over" dialog instead of a modal by using the `slideOver()` method: @@ -561,3 +552,12 @@ Action::make('create') ->modalHidden(fn (): bool => $this->role !== 'admin') ->modalContent(view('filament.pages.actions.create')) ``` + +## Adding extra attributes to the modal window + +You may also pass extra HTML attributes to the modal window using `extraModalWindowAttributes()`: + +```php +Action::make('updateAuthor') + ->extraModalWindowAttributes(['class' => 'update-author-modal']) +```