refactor stacking structure

Author: QuentinGab

resources/views/components/modal.blade.php

@@ -1,11 +1,9 @@
 @props([
     'position' => 'center',
-    'fullscreen' => false,
 ])
 
 <div {!! $attributes->class([
     'max-w-full min-w-0 transition',
-    'max-h-[calc(100%-3rem)]' => !$fullscreen,
     match ($position) {
         'center' => 'm-auto origin-top',
         'left' => 'mr-auto my-auto',
@@ -18,6 +16,6 @@
         'bottom-right' => 'mt-auto ml-auto',
         default => '',
     },
-]) !!}>
+]) !!} x-bind="modalAttributes">
     {{ $slot }}
 </div>

resources/views/components/slideover.blade.php

@@ -2,14 +2,6 @@
     'position' => 'right',
 ])
 
-<x-livewire-modal::modal :attributes="$attributes->class([
-    'h-full',
-    match ($position) {
-        'center' => 'sm:mx-6',
-        'right' => 'sm:mr-6',
-        'left' => 'sm:ml-6',
-        default => '',
-    },
-])" :position="$position">
+<x-livewire-modal::modal :attributes="$attributes->class(['h-full'])" :position="$position">
     {{ $slot }}
 </x-livewire-modal::modal>

resources/views/components/stack.blade.php

@@ -0,0 +1,61 @@
+@props([
+    'fullscreen' => false,
+])
+
+<div {!! $attributes->class([
+    'pt-20 sm:p-5' => !$fullscreen,
+    'size-full min-w-0 flex pointer-events-none [&>*]:pointer-events-auto',
+]) !!} x-data="{
+    modalPosition: [null, null],
+    get modalIndexReversed() { return findModalHistoryIndex(modalId, true); },
+    get modalStackDirection() {
+        const [px, py] = this.modalPosition;
+
+        const directions = {
+            left: [1, 0],
+            right: [-1, 0],
+            top: [0, 1],
+            bottom: [0, -1],
+        };
+
+        return directions[px || py] || [0, -1];
+    },
+    computeModalPosition() {
+        const parent = this.$el.getBoundingClientRect();
+        const rect = this.$el.firstElementChild.getBoundingClientRect();
+
+        const dx = parent.width - rect.right;
+        const dy = parent.height - rect.bottom;
+
+        const px = dx === rect.left ? 'center' : dx < rect.left ? 'right' : 'left';
+        const py = dy === rect.top ? 'center' : dy < rect.top ? 'bottom' : 'top';
+
+        return [px, py];
+    },
+    init() {
+        this.$nextTick(() => {
+            this.modalPosition = this.computeModalPosition();
+        });
+    },
+    modalAttributes: {
+        ['x-show']() { return isModalStacked ? modalHistory.includes(modalId) : isModalActive; },
+        ['x-bind:inert']() { return !isModalActive },
+        ['x-bind:style']() {
+            if (isModalStacked) {
+                const [dx, dy] = this.modalStackDirection;
+
+                return {
+                    '--dx': dx,
+                    '--dy': dy,
+                    '--i': this.modalIndexReversed,
+                    transform: `scale(calc(1 - 0.05 * var(--i))) translate(calc(2rem * var(--dx) * var(--i)), calc(2rem * var(--dy) * var(--i)))`,
+                    opacity: this.modalIndexReversed <= 2 ? 1 : 0,
+                };
+            }
+
+            return {};
+        },
+    },
+}">
+    {{ $slot }}
+</div>

resources/views/livewire/modal.blade.php

@@ -152,94 +152,16 @@ class="fixed left-0 top-0 z-40 grid h-dvh w-full select-none overflow-hidden bg-
         grid-template-areas: 'stack';
     ">
 
-    @foreach ($components as $component)
-        @php
-            ['id' => $id, 'component' => $componentName, 'props' => $props, 'params' => $params] = $component;
-        @endphp
+    @foreach ($components as ['id' => $id, 'component' => $component, 'props' => $props])
         <div x-data="{
-            modalPosition: [null, null],
-            get modalId() {
-                return '{{ $component['id'] }}';
-            },
-            get isModalActive() {
-                return modalActiveId === this.modalId;
-            },
-            get modal() {
-                return findModalById(this.modalId);
-            },
-            get modalStack() {
-                return this.modal?.stack ?? null;
-            },
-            get isModalStacked() {
-                return modalActiveStack && modalActiveStack === this.modalStack;
-            },
-            get modalIndexReversed() {
-                return findModalHistoryIndex(this.modalId, true);
-            },
-            computeModalPosition() {
-                const parent = this.$el.getBoundingClientRect();
-                const rect = this.$el.firstElementChild.getBoundingClientRect();
-        
-                const dx = parent.width - rect.right;
-                const dy = parent.height - rect.bottom;
-        
-                const px = dx === rect.left ? 'center' : dx < rect.left ? 'right' : 'left';
-                const py = dy === rect.top ? 'center' : dy < rect.top ? 'bottom' : 'top';
-        
-                return [px, py];
-            },
-            get modalStackDirection() {
-                const [px, py] = this.modalPosition;
-        
-                const directions = {
-                    left: [1, 0],
-                    right: [-1, 0],
-                    top: [0, 1],
-                    bottom: [0, -1],
-                };
-        
-                return directions[px || py] || [0, -1];
-            },
-            init() {
-                this.$nextTick(() => {
-                    this.modalPosition = this.computeModalPosition();
-                });
-            },
-            modalWrapper: {
-                ['x-bind:inert']() {
-                    return !this.isModalActive;
-                },
-                ['x-show']() {
-                    if (this.isModalStacked) {
-                        return modalHistory.includes(this.modalId);
-                    }
-                    return this.isModalActive;
-                },
-                ['x-bind:style']() {
-                    let base = {
-                        'grid-area': 'stack'
-                    };
-        
-                    if (this.isModalStacked) {
-                        const [dx, dy] = this.modalStackDirection;
-        
-                        return {
-                            ...base,
-                            '--dx': dx,
-                            '--dy': dy,
-                            '--i': this.modalIndexReversed,
-                            transform: `scale(calc(1 - 0.05 * var(--i))) translate(calc(1rem * var(--dx) * var(--i)), calc(1rem * var(--dy) * var(--i)))`,
-                            opacity: this.modalIndexReversed <= 2 ? 1 : 0,
-                        };
-                    }
-        
-                    return base;
-                }
-            },
-        }" x-bind="modalWrapper"
-            class="pointer-events-none isolate flex size-full min-w-0 select-text transition [&>*]:pointer-events-auto"
-            wire:key="{{ $this->getId() }}.modalComponents.{{ $id }}">
-            @livewire($componentName, $props, key("{$this->getId()}.modalComponents.{$id}.component"))
+            get modalId() { return '{{ $id }}'; },
+            get isModalActive() { return modalActiveId === this.modalId; },
+            get modal() { return findModalById(this.modalId); },
+            get modalStack() { return this.modal?.stack ?? null; },
+            get isModalStacked() { return modalActiveStack && modalActiveStack === this.modalStack; },
+        }" class="min-w-0 select-text" style="grid-area: stack;" x-bind:id="modalId"
+            x-on:mousedown.self="onCloseModal" wire:key="{{ $this->getId() }}.modalComponents.{{ $id }}">
+            @livewire($component, $props, key("{$this->getId()}.modalComponents.{$id}.component"))
         </div>
     @endforeach
 

src/Facades/.gitkeep

@@ -1,52 +1,54 @@
-<x-livewire-modal::modal class="flex size-96 flex-col overflow-auto rounded-md border bg-white" :position="$position">
-    <div class="p-5">
-        <p>
-            Modal ID: <span x-text="modalId"></span>
-        </p>
-        <p>
-            Rendered At: <span>{{ now() }}</span>
-        </p>
-    </div>
+<x-livewire-modal::stack>
+    <x-livewire-modal::modal :position="$position" class="size-96 overflow-auto rounded-md border bg-white">
+        <div class="p-5">
+            <p>
+                Modal ID: <span x-text="modalId"></span>
+            </p>
+            <p>
+                Rendered At: <span>{{ now() }}</span>
+            </p>
+        </div>
 
-    <div class="flex flex-col gap-2 p-5">
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card' }">
-            Open Modal
-        </button>
+        <div class="flex flex-col gap-2 p-5">
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card' }">
+                Open Modal
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'slideover' }">
-            Open Slideover
-        </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'slideover' }">
+                Open Slideover
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'slideover', stack: 'slideover' }">
-            Open Stacked Slideover
-        </button>
-    </div>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'slideover', stack: 'slideover' }">
+                Open Stacked Slideover
+            </button>
+        </div>
 
-    <div class="flex flex-col gap-2 p-5">
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card', stack: 'card', }">
-            Open Stacked
-        </button>
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card', stack: 'card', props: { position: 'left' } }">
-            Open Stacked Left
-        </button>
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card', stack: 'card', props: { position: 'right' } }">
-            Open Stacked Right
-        </button>
+        <div class="flex flex-col gap-2 p-5">
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card', stack: 'card', }">
+                Open Stacked
+            </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card', stack: 'card', props: { position: 'left' } }">
+                Open Stacked Left
+            </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card', stack: 'card', props: { position: 'right' } }">
+                Open Stacked Right
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card', stack: 'card', props: { position: 'bottom' } }">
-            Open Stacked Bottom
-        </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card', stack: 'card', props: { position: 'bottom' } }">
+                Open Stacked Bottom
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card', stack: 'card', props: { position: 'top' } }">
-            Open Stacked Top
-        </button>
-    </div>
-</x-livewire-modal::modal>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card', stack: 'card', props: { position: 'top' } }">
+                Open Stacked Top
+            </button>
+        </div>
+    </x-livewire-modal::modal>
+</x-livewire-modal::stack>

workbench/resources/views/livewire/card.blade.php

@@ -1,38 +1,39 @@
-<x-livewire-modal::slideover class="flex w-96 flex-col rounded-md border bg-white" :position="$position">
+<x-livewire-modal::stack>
+    <x-livewire-modal::slideover :position="$position" class="w-full overflow-auto rounded-md border bg-white sm:w-96">
+        <div class="p-5">
+            <p>
+                Modal ID: <span x-text="modalId"></span>
+            </p>
+            <p>
+                Rendered At: <span>{{ now() }}</span>
+            </p>
+        </div>
 
-    <div class="p-5">
-        <p>
-            Modal ID: <span x-text="modalId"></span>
-        </p>
-        <p>
-            Rendered At: <span>{{ now() }}</span>
-        </p>
-    </div>
+        <div class="flex flex-col gap-2 p-5">
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card' }">
+                Open Modal
+            </button>
 
-    <div class="flex flex-col gap-2 p-5">
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card' }">
-            Open Modal
-        </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'slideover' }">
+                Open Slideover
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'slideover' }">
-            Open Slideover
-        </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'card', stack: 'card' }">
+                Open Stacked Modal
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'card', stack: 'card' }">
-            Open Stacked Modal
-        </button>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'slideover', stack: 'slideover' }">
+                Open Stacked Slideover
+            </button>
 
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'slideover', stack: 'slideover' }">
-            Open Stacked Slideover
-        </button>
-
-        <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
-            x-modal:open="{ component: 'slideover', props:{ position: 'left' }, stack: 'slideover-left' }">
-            Open Stacked Slideover Left
-        </button>
-    </div>
-</x-livewire-modal::slideover>
+            <button type="button" class="rounded-md border px-3.5 py-1.5 shadow-sm focus:ring active:shadow-none"
+                x-modal:open="{ component: 'slideover', props:{ position: 'left' }, stack: 'slideover-left' }">
+                Open Stacked Slideover Left
+            </button>
+        </div>
+    </x-livewire-modal::slideover>
+</x-livewire-modal::stack>