Support for slideover from left

Author: pascalbaljet

app/resources/views/modal/base.blade.php

@@ -7,6 +7,7 @@
 <div class="flex space-x-3">
     <Link modal dusk="one" href="{{ route('modal.one') }}">Open Modal One</Link>
     <Link slideover dusk="slideover" href="{{ route('modal.slideover') }}">Open Modal Slideover</Link>
+    <Link slideover dusk="slideover-left" href="{{ route('modal.slideover', ['left' => 1]) }}">Open Modal Slideover Left</Link>
     <Link modal dusk="validation" href="{{ route('modal.validation') }}">Open Modal Validation</Link>
     <Link modal dusk="libraries" href="{{ route('form.components.libraries') }}">Open Form Libraries</Link>
     <Link modal dusk="form-select" href="{{ route('form.components.customSelectOptions') }}">Open Custom Select Options</Link>

app/resources/views/modal/slideover.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 
-<x-splade-modal>
+<x-splade-modal position="{{ request()->query('left') ? 'left' : 'right' }}">
     ModalComponentSlideover
 
     <Link modal dusk="one-from-slideover" href="{{ route('modal.one') }}">Open Modal One</Link>

app/tests/Browser/ModalTest.php

@@ -81,6 +81,29 @@ public function it_can_show_a_slideover()
         });
     }
 
+    /** @test */
+    public function it_can_show_a_slideover_on_the_left_side()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/modal/base')
+                ->resize(1024, 768)
+                ->waitForText('ModalComponent')
+                ->click('@slideover-left')
+                ->waitForText('ModalComponentSlideover')
+                ->pause(500)
+                ->screenshot('ModalComponentSlideover')
+                ->click('@close-slideover')
+                ->waitUntilMissingText('ModalComponentSlideover')
+                ->pause(500)
+                ->screenshot('ModalComponentSlideoverClosed');
+
+            $this->assertScreenshotSnapshot([
+                'ModalComponentSlideover',
+                'ModalComponentSlideoverClosed',
+            ]);
+        });
+    }
+
     /** @test */
     public function it_can_do_nested_slideover()
     {

lib/Components/Modal.vue

@@ -47,7 +47,9 @@ export default {
         position: {
             type: String,
             required: false,
-            default: "center"
+            default: (props) => {
+                return props.type === "modal" ? "center" : "right";
+            },
         },
 
         name: {

resources/views/components/slideover.blade.php

@@ -2,9 +2,12 @@
     <!-- Full-screen scrollable container -->
     <div class="fixed inset-0 z-40 overflow-y-auto">
         <!-- Container to center the panel -->
-        <div class="flex min-h-full items-center justify-end">
+        <div class="flex min-h-full items-center" v-bind:class="{
+            'justify-start': modal.position === 'left',
+            'justify-end': modal.position === 'right'
+        }">
             <!-- The actual dialog panel -->
-            <x-splade-component is="transition" child animation="slide-right" after-leave="modal.emitClose" v-bind:class="{
+            <x-splade-component is="transition" child after-leave="modal.emitClose" v-bind:class="{
                 'transition w-full': true,
                 'blur-sm': !modal.onTopOfStack,
                 'sm:max-w-sm': modal.maxWidth == 'sm',
@@ -17,7 +20,7 @@
                 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': modal.maxWidth == '5xl',
                 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': modal.maxWidth == '6xl',
                 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': modal.maxWidth == '7xl'
-            }">
+            }" animation="{{ $attributes->get('position') === 'left' ? 'slide-left' : 'slide-right' }}">
                 <x-splade-component is="dialog" panel dusk="slideover-dialog">
                     <div {{ $attributes->class('bg-white p-6 min-h-screen relative') }}>
                         <div v-if="modal.closeButton" class="absolute top-0 right-0 pt-3 pr-3">

resources/views/transitions/classes.blade.php

@@ -1,3 +1,3 @@
-<div class='duration-300 ease-in-out opacity-0 opacity-100 scale-100 scale-95 sm:scale-100 sm:scale-95 sm:translate-y-0 transform transition translate-x-0 translate-x-full translate-y-0 translate-y-4'>
+<div class='-translate-x-full duration-300 ease-in-out opacity-0 opacity-100 scale-100 scale-95 sm:scale-100 sm:scale-95 sm:translate-y-0 transform transition translate-x-0 translate-x-full translate-y-0 translate-y-4'>
 <!-- This is an automatically generated template so that Tailwind won't purge these transition classes... -->
 </div>

src/ServiceProvider.php

@@ -512,6 +512,15 @@ public static function registerTransitionAnimations(TransitionRepository $transi
                 leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
                 leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
             )
+            ->new(
+                name: 'slide-left',
+                enter: 'transform transform ease-in-out duration-300',
+                enterFrom: 'opacity-0 -translate-x-full',
+                enterTo: 'opacity-100 translate-x-0',
+                leave: 'transform transform ease-in-out duration-300',
+                leaveFrom: 'opacity-100 translate-x-0',
+                leaveTo: 'opacity-0 -translate-x-full',
+            )
             ->new(
                 name: 'slide-right',
                 enter: 'transform transform ease-in-out duration-300',