Merge pull request #15522 from filamentphp/container-queries

Container queries
filamentphp · Feb 5, 2025 · 6d35dd6 · 6d35dd6
2 parents c94b5e8 + 9160371
commit 6d35dd6
Show file tree

Hide file tree

Showing 17 changed files with 570 additions and 88 deletions.
diff --git a/docs-assets/app/public/css/filament/support/support.css b/docs-assets/app/public/css/filament/support/support.css
diff --git a/docs-assets/app/public/js/filament/support/support.js b/docs-assets/app/public/js/filament/support/support.js
diff --git a/packages/actions/resources/views/action-modal.blade.php b/packages/actions/resources/views/action-modal.blade.php
@@ -39,7 +39,7 @@
         :sticky-header="$actionIsModalHeaderSticky"
         :width="$actionModalWidth"
         :wire:key="$actionModalWireKey"
-        x-on:modal-closed.stop="$wire.unmountAction(false)"
+        :x-on:modal-closed="'if ($event.detail.id === ' . \Illuminate\Support\Js::from($actionModalId) . ') $wire.unmountAction(false)'"
     >
         {{ $action->getModalContent() }}
 

diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php
@@ -37,26 +37,17 @@
             openModal: function () {
                 const id = this.generateModalId(this.actionNestingIndex)
 
-                if (! this.$el.querySelector(`#${id}`)) {
-                    return
-                }
-
                 this.$dispatch('open-modal', { id })
             },
 
             closeModal: function () {
                 const id = this.generateModalId(this.actionNestingIndex)
 
-                if (! this.$el.querySelector(`#${id}`)) {
-                    return
-                }
-
                 this.$dispatch('close-modal-quietly', { id })
             },
         }"
         x-on:sync-action-modals.window="
-            if ($event.detail.id === '{{ $this->getId() }}')
-                syncActionModals($event.detail.newActionNestingIndex)
+            if ($event.detail.id === @js($this->getId())) syncActionModals($event.detail.newActionNestingIndex)
         "
         style="height: 0"
     >

diff --git a/packages/schemas/resources/views/schema.blade.php b/packages/schemas/resources/views/schema.blade.php
@@ -36,6 +36,10 @@ function (Component | Action | ActionGroup $component) use (&$hasVisibleComponen
 @endphp
 
 @if ((! $isDirectlyHidden()) && $hasVisibleComponents)
+    @if ($isRoot)
+        {!! '<div class="fi-grid-ctn">' !!}
+    @endif
+
     <div
         {{
             $getExtraAttributeBag()
@@ -149,6 +153,9 @@ function (Component | Action | ActionGroup $component) use (&$hasVisibleComponen
                                 x-show="{{ $xShow }}"
                                 x-cloak
                             @endif
+                            @class([
+                                'fi-grid-ctn' => $schemaComponent->isGridContainer(),
+                            ])
                         >
                             {{ $schemaComponent }}
                         </div>
@@ -159,4 +166,8 @@ function (Component | Action | ActionGroup $component) use (&$hasVisibleComponen
             @endif
         @endforeach
     </div>
+
+    @if ($isRoot)
+        {!! '</div>' !!}
+    @endif
 @endif
diff --git a/packages/schemas/src/Components/Component.php b/packages/schemas/src/Components/Component.php
@@ -6,6 +6,7 @@
 use Filament\Schemas\Components\Concerns\BelongsToModel;
 use Filament\Schemas\Components\Concerns\CanBeConcealed;
 use Filament\Schemas\Components\Concerns\CanBeDisabled;
+use Filament\Schemas\Components\Concerns\CanBeGridContainer;
 use Filament\Schemas\Components\Concerns\CanBeHidden;
 use Filament\Schemas\Components\Concerns\CanBeLiberatedFromContainerGrid;
 use Filament\Schemas\Components\Concerns\CanBeRepeated;
@@ -41,6 +42,7 @@ class Component extends ViewComponent
     use BelongsToModel;
     use CanBeConcealed;
     use CanBeDisabled;
+    use CanBeGridContainer;
     use CanBeHidden;
     use CanBeLiberatedFromContainerGrid;
     use CanBeRepeated;

diff --git a/packages/schemas/src/Components/Concerns/CanBeGridContainer.php b/packages/schemas/src/Components/Concerns/CanBeGridContainer.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Filament\Schemas\Components\Concerns;
+
+use Closure;
+
+trait CanBeGridContainer
+{
+    protected bool | Closure $isGridContainer = false;
+
+    public function gridContainer(bool | Closure $condition = true): static
+    {
+        $this->isGridContainer = $condition;
+
+        return $this;
+    }
+
+    public function isGridContainer(): bool
+    {
+        return (bool) $this->evaluate($this->isGridContainer);
+    }
+}
diff --git a/packages/support/dist/index.css b/packages/support/dist/index.css
diff --git a/packages/support/dist/index.js b/packages/support/dist/index.js