add modal and fix popover focus

BioKIC · Oct 15, 2024 · 574f0fe · 574f0fe
1 parent 332cee3
commit 574f0fe
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 5 deletions.
diff --git a/resources/views/core/input.blade.php b/resources/views/core/input.blade.php
@@ -1,4 +1,4 @@
-@props(['id', 'label' => false, 'error_text', 'assistive_text'])
+@props(['id'=> uniqid(), 'label' => false, 'error_text', 'assistive_text'])
 <!-- resources/views/core/input.blade.php -->
 <div class="group w-full text-base-content">
     @if($label)

diff --git a/resources/views/core/layout.blade.php b/resources/views/core/layout.blade.php
@@ -47,7 +47,7 @@
     @stack('js-libs')
 </head>
 
-<body id="app-body" class="min-h-screen flex flex-col bg-base-100 text-base-content">
+<body id="app-body" class="min-h-screen flex flex-col bg-base-100 text-base-content" x-trap>
     <x-header />
     <x-navbar :navigations="$navigations" />
     <div {{ $attributes->twMerge('flex-grow p-10') }} >

diff --git a/resources/views/core/modal.blade.php b/resources/views/core/modal.blade.php
@@ -0,0 +1,38 @@
+<div x-data="{ modalOpen: false }"
+    @keydown.escape.window="modalOpen = false"
+    class="relative z-50 w-auto h-auto">
+    <button @click="modalOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
+    <template x-teleport="body">
+        <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
+            <div x-show="modalOpen"
+                x-transition:enter="ease-out duration-300"
+                x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100"
+                x-transition:leave="ease-in duration-300"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0"
+                @click="modalOpen=false" class="absolute inset-0 w-full h-full bg-black bg-opacity-40"></div>
+            <div x-show="modalOpen"
+                x-trap.inert.noscroll="modalOpen"
+                x-transition:enter="ease-out duration-300"
+                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave="ease-in duration-200"
+                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                class="relative w-full py-6 bg-white px-7 sm:max-w-lg sm:rounded-lg">
+                <div class="flex items-center justify-between pb-2">
+                    @isset($title)
+                        <div {{ $title->attributes->twMerge('font-bold') }}>{{ $title }}</div>
+                    @endisset
+                    <button @click="modalOpen=false" class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                    </button>
+                </div>
+                @isset($body)
+                    <div {{ $body->attributes->twMerge('relative w-auto') }}>{{ $body }}</div>
+                @endisset
+            </div>
+        </div>
+    </template>
+</div>
diff --git a/resources/views/core/popover.blade.php b/resources/views/core/popover.blade.php
@@ -1,5 +1,3 @@
-
-
 <div x-data="{
         popoverOpen: false,
         popoverArrow: true,
@@ -43,7 +41,6 @@ class="relative">
 
     <div x-ref="popover"
         x-show="popoverOpen"
-        x-init="setTimeout(function(){ popoverHeightCalculate(); }, 100);"
         x-trap.inert="popoverOpen"
         @click.away="popoverOpen=false;"
         @keydown.escape.window="popoverOpen=false"

diff --git a/resources/views/tw-components.blade.php b/resources/views/tw-components.blade.php
@@ -80,6 +80,19 @@
             ]"/>
         </div>
 
+        <x-modal>
+            <x-slot:title class="text-2xl">
+                Title
+            </x-slot>
+            <x-slot name="body">
+                <form class="flex flex-col gap-2">
+                    <x-input name="testOne" label="Test 1"/>
+                    <x-input name="testTwo" label="Test 2"/>
+                    <x-button type="submit">Submit</x-button>
+                </form>
+            </x-slot>
+        </x-modal>
+
         <x-select label="Groceries" :default="1" :items="[
             [
                 'title' => 'Milk',