Merge pull request #12 from luvi-ui/sheet-as-dialog

Sheet as dialog

Author: anotherfrontendguy

app/Services/DialogCvaService.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Services;
+
+use FeatureNinja\Cva\ClassVarianceAuthority;
+
+class DialogCvaService
+{
+    public static function new(): ClassVarianceAuthority
+    {
+        return ClassVarianceAuthority::new(
+            [
+                'transition ease-in-out backdrop:bg-black/80 backdrop:duration-300 backdrop:opacity-0 backdrop:transition-[opacity,display,overlay] backdrop:[transition-behavior:allow-discrete] open:backdrop:opacity-100 [@starting-style]:open:backdrop:opacity-0',
+            ],
+            [
+                'variants' => [
+                    'variant' => [
+                        'dialog' => 'w-full max-w-lg border bg-background p-6 shadow-lg  sm:rounded-lg',
+                        'sheet' => 'open:grid grid-rows-[auto_1fr_auto]  m-0 gap-4 bg-background p-6 shadow-lg transition-[display,overlay,transform] ease-in-out duration-500 [transition-behavior:allow-discrete] ',
+                    ],
+                    'side' => [
+                        'top' => 'max-w-full min-w-full overflow-x-auto !mb-auto border-b -translate-y-full open:translate-y-0 [@starting-style]:open:-translate-y-full',
+                        'bottom' => 'max-w-full min-w-full overflow-x-auto !mt-auto border-t translate-y-full open:translate-y-0 [@starting-style]:open:translate-y-full',
+                        'left' => 'max-h-dvh min-h-dvh overflow-y-auto !mr-auto w-3/4 border-r sm:max-w-sm -translate-x-full open:translate-x-0 [@starting-style]:open:-translate-x-full',
+                        'right' => 'max-h-dvh min-h-dvh overflow-y-auto !ml-auto w-3/4 border-l sm:max-w-sm translate-x-full open:translate-x-0 [@starting-style]:open:translate-x-full',
+                        'center' => 'open:fade-in-0 open:zoom-in-95 fade-out-0 zoom-out-95 ',
+                    ],
+                ],
+                'defaultVariants' => [
+                    'side' => 'center',
+                    'variant' => 'dialog',
+                ],
+            ],
+        );
+    }
+}

app/Services/SheetCvaService.php

@@ -1,5 +1,5 @@
 <x-button
-    @click="open = false"
+    x-on:click="__sheetOpen = false"
     {{ $attributes->twMerge('') }}
 >
     {{ $slot }}

resources/views/components/sheet/close.blade.php

@@ -2,49 +2,20 @@
     'side' => 'right',
 ])
 
-@php
-    $one = match ($side) {
-        'top' => '-translate-y-full',
-        'right' => 'translate-x-full',
-        'bottom' => 'translate-y-full',
-        'left' => '-translate-x-full',
-    };
+@inject('sheet', 'App\Services\DialogCvaService')
 
-    $two = match ($side) {
-        'top' => '-translate-y-0',
-        'right' => 'translate-x-0',
-        'bottom' => 'translate-y-0',
-        'left' => 'translate-x-0',
-    };
-@endphp
-
-@inject('sheet', 'App\Services\SheetCvaService')
-
-<div @keydown.escape.window="open = false">
-    <template x-teleport="body">
-        <x-sheet.overlay />
-    </template>
-
-    <template x-teleport="body">
-        <div
-            x-show="open"
-            x-transition:enter="transition ease-out duration-500"
-            x-transition:enter-start="{{ $one }}"
-            x-transition:enter-end="{{ $two }}"
-            x-transition:leave="transition ease-in duration-300"
-            x-transition:leave-start="{{ $two }}"
-            x-transition:leave-end="{{ $one }}"
-            {{ $attributes->twMerge($sheet(['side' => $side])) }}
-        >
-            <x-sheet.close
-                variant="icon"
-                class="noway absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-            >
-                <x-lucide-x class="size-4" />
-            </x-sheet.close>
-            {{ $slot }}
-        </div>
-
-    </template>
-
-</div>
+<dialog
+    wire:ignore.self
+    x-on:cancel="__sheetOpen = false"
+    x-trap.noscroll="__sheetOpen"
+    x-effect="__sheetOpen ? $el.showModal() : $el.close()"
+    {{ $attributes->twMerge($sheet(['side' => $side, 'variant' => 'sheet'])) }}
+>
+    <x-sheet.close
+        variant="icon"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+    >
+        <x-lucide-x class="size-4" />
+    </x-sheet.close>
+    {{ $slot }}
+</dialog>

resources/views/components/sheet/content.blade.php

@@ -1,3 +1,3 @@
-<div {{ $attributes->twMerge('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2') }}>
+<div {{ $attributes->twMerge('row-start-3 flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2') }}>
     {{ $slot }}
 </div>

resources/views/components/sheet/footer.blade.php

@@ -1,3 +1,6 @@
-<div x-data="{ open: false }">
+<div
+    x-data="{ __sheetOpen: false }"
+    x-modelable="__sheetOpen"
+>
     {{ $slot }}
 </div>

resources/views/components/sheet/index.blade.php

@@ -0,0 +1,3 @@
+<div {{ $attributes->twMerge('row-start-2') }}>
+    {{ $slot }}
+</div>

resources/views/components/sheet/main.blade.php

@@ -1,3 +1,3 @@
-<div @click="open = ! open">
+<div x-on:click="__sheetOpen = true">
     {{ $slot }}
 </div>

resources/views/components/sheet/trigger.blade.php

@@ -5,7 +5,7 @@
 use App\Services\AlertCvaService;
 use App\Services\BadgeCvaService;
 use App\Services\ButtonCvaService;
-use App\Services\SheetCvaService;
+use App\Services\DialogCvaService;
 use Illuminate\Support\ServiceProvider;
 
 class LaravelLuviServiceProvider extends ServiceProvider
@@ -52,7 +52,7 @@ public function register(): void
         $this->app->singleton(AlertCvaService::class, fn () => AlertCvaService::new());
         $this->app->singleton(BadgeCvaService::class, fn () => BadgeCvaService::new());
         $this->app->singleton(ButtonCvaService::class, fn () => ButtonCvaService::new());
-        $this->app->singleton(SheetCvaService::class, fn () => SheetCvaService::new());
+        $this->app->singleton(DialogCvaService::class, fn () => DialogCvaService::new());
     }
 
     public function boot(): void
@@ -86,7 +86,7 @@ public function boot(): void
         ], 'badge');
 
         $this->publishes([
-            __DIR__.'/../app/Services/SheetCvaService.php' => app_path('Services/SheetCvaService.php'),
+            __DIR__.'/../app/Services/DialogCvaService.php' => app_path('Services/DialogCvaService.php'),
         ], 'sheet');
 
         // plugins