diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 2d3c11b78f..312bf08326 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -552,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']) +``` diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index db7911121c..d4e91b8217 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-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -69,6 +70,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -122,6 +124,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -181,6 +184,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" :footer-actions="$action?->getVisibleModalFooterActions()" :footer-actions-alignment="$action?->getModalFooterActionsAlignment()" :heading="$action?->getModalHeading()" @@ -240,6 +244,7 @@ :close-by-clicking-away="$action?->isModalClosedByClickingAway()" :description="$action?->getModalDescription()" display-classes="block" + :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 new file mode 100644 index 0000000000..e4973b7cb9 --- /dev/null +++ b/packages/actions/src/Concerns/HasExtraModalWindowAttributes.php @@ -0,0 +1,47 @@ + | Closure> + */ + protected array $extraModalWindowAttributes = []; + + /** + * @param array | Closure $attributes + */ + public function extraModalWindowAttributes(array | Closure $attributes, bool $merge = false): static + { + if ($merge) { + $this->extraModalWindowAttributes[] = $attributes; + } else { + $this->extraModalWindowAttributes = [$attributes]; + } + + return $this; + } + + /** + * @return array + */ + public function getExtraModalWindowAttributes(): array + { + $temporaryAttributeBag = new ComponentAttributeBag(); + + foreach ($this->extraModalWindowAttributes as $extraModalWindowAttributes) { + $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($extraModalWindowAttributes)); + } + + return $temporaryAttributeBag->getAttributes(); + } + + public function getExtraModalWindowAttributeBag(): ComponentAttributeBag + { + return new ComponentAttributeBag($this->getExtraModalWindowAttributes()); + } +} diff --git a/packages/actions/src/MountableAction.php b/packages/actions/src/MountableAction.php index 260378a452..f484ca2cbb 100644 --- a/packages/actions/src/MountableAction.php +++ b/packages/actions/src/MountableAction.php @@ -16,6 +16,7 @@ abstract class MountableAction extends StaticAction implements HasLivewire use Concerns\CanRedirect; use Concerns\CanRequireConfirmation; use Concerns\CanUseDatabaseTransactions; + 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..429702528e 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', + 'extraModalWindowAttributeBag' => null, 'footer' => null, 'footerActions' => [], 'footerActionsAlignment' => Alignment::Start, @@ -47,6 +48,8 @@ } $closeEventHandler = filled($id) ? '$dispatch(' . \Illuminate\Support\Js::from($closeEventName) . ', { id: ' . \Illuminate\Support\Js::from($id) . ' })' : 'close()'; + + $modalWindowAttributes = $extraModalWindowAttributeBag ?? new \Illuminate\View\ComponentAttributeBag(); @endphp
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 +206,7 @@ MaxWidth::Screen => 'fixed inset-0', default => $width, }, - ]) + ]) }} > @if ($heading || $header)