Merge pull request #15 from lara-zeus/fix-table

fix popover in table
lara-zeus · Mar 7, 2024 · 4dae848 · 4dae848
2 parents 5e04995 + 4d7aa97
commit 4dae848
Show file tree

Hide file tree

Showing 7 changed files with 361 additions and 360 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
diff --git a/.github/workflows/dependabot.yml b/.github/workflows/dependabot.yml
@@ -0,0 +1,9 @@
+version: 2
+updates:
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    labels:
+      - "dependencies"
diff --git a/.github/workflows/phpstan.yml b/.github/workflows/phpstan.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '8.1'
+          php-version: '8.2'
           coverage: none
 
       - name: Install composer dependencies

diff --git a/composer.lock b/composer.lock
diff --git a/resources/views/popover-column.blade.php b/resources/views/popover-column.blade.php
@@ -12,12 +12,10 @@
 @endphp
 <div
     wire:key="{{ $this->getId() }}.table.record.{{ $recordKey }}.column.{{ $getName() }}"
-    x-data="{ open: false }"
+    x-data
 
     @if($getTrigger === 'hover')
-        @pointerleave="clearTimeout($time); open = false"
-    @else
-        @click.away="open = false"
+        @pointerleave="$refs.panel.close"
     @endif
 
     class="fi-popover fi-ta-text grid w-full gap-y-1 px-3 py-4"
@@ -36,27 +34,28 @@ class="fi-popover fi-ta-text grid w-full gap-y-1 px-3 py-4"
 
     <div
         class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
-        x-ref="button"
         @if($getTrigger === 'hover')
-            @pointerenter="$time = setTimeout(() => { open = true }, 200)"
+            @pointerenter="$refs.panel.open"
         @else
-            @click="open = ! open"
+            @click="$refs.panel.toggle"
         @endif
     >
         {{ $getState }}
 
         @if($getIcon)
             <x-filament::icon
-                    :icon="$getIcon"
-                    class="h-5 w-5 text-gray-500 dark:text-gray-400"
+                :icon="$getIcon"
+                class="h-5 w-5 text-gray-500 dark:text-gray-400"
             />
         @endif
     </div>
 
-    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800"
-         x-cloak x-trap="open"
-         x-show="open"
-         x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
+    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800 transition"
+         x-transition:enter-start="opacity-0"
+         x-transition:leave-end="opacity-0"
+         x-cloak
+         x-ref="panel"
+         x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
     >
         {{ $getContent }}
     </div>

diff --git a/resources/views/popover-entry.blade.php b/resources/views/popover-entry.blade.php
@@ -8,40 +8,37 @@
     $getContent = $getContent();
 @endphp
 <div
-        wire:key="{{ $this->getId() }}.entry.record.{{ $getName() }}"
-        x-data="{ open: false }"
-
+    class="fi-popover grid w-full gap-y-1 px-3 py-4"
+    wire:key="{{ $this->getId() }}.entry.record.{{ $getName() }}"
+    x-data
+    @if($getTrigger === 'hover')
+        @pointerleave="$refs.panel.close"
+    @endif
+>
+    <div
+        class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
         @if($getTrigger === 'hover')
-            @pointerleave="clearTimeout($time); open = false"
+            @pointerenter="$refs.panel.open"
         @else
-            @click.away="open = false"
+            @click="$refs.panel.toggle"
         @endif
-
-        class="fi-popover grid w-full gap-y-1 px-3 py-4"
->
-    <div
-            class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
-            x-ref="button"
-            @if($getTrigger === 'hover')
-                @pointerenter="$time = setTimeout(() => { open = true }, 200)"
-            @else
-                @click="open = ! open"
-            @endif
     >
         {{ $getState }}
 
         @if($getIcon)
             <x-filament::icon
-                    :icon="$getIcon"
-                    class="h-5 w-5 text-gray-500 dark:text-gray-400"
+                :icon="$getIcon"
+                class="h-5 w-5 text-gray-500 dark:text-gray-400"
             />
         @endif
     </div>
 
-    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800"
-         x-cloak x-trap="open"
-         x-show="open"
-         x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
+    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800 transition"
+         x-transition:enter-start="opacity-0"
+         x-transition:leave-end="opacity-0"
+         x-cloak
+         x-ref="panel"
+         x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
     >
         {{ $getContent }}
     </div>

diff --git a/resources/views/popover-form.blade.php b/resources/views/popover-form.blade.php
@@ -21,29 +21,28 @@
     :state-path="$getStatePath()"
 >
     <div
-        x-data="{ open: false }"
+        x-data
         @if($getTrigger === 'hover')
-            @pointerleave="clearTimeout($time); open = false"
-        @else
-            @click.away="open = false"
+            @pointerleave="$refs.panel.close"
         @endif
     >
         <div
             class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
-            x-ref="button"
             @if($getTrigger === 'hover')
-                @pointerenter="$time = setTimeout(() => { open = true }, 200)"
+                @pointerenter="$refs.panel.open"
             @else
-                @click="open = ! open"
+                @click="$refs.panel.toggle"
             @endif
         >
             {{ $getState }}
         </div>
 
         <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800"
-             x-cloak x-trap="open"
-             x-show="open"
-             x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
+             x-transition:enter-start="opacity-0"
+             x-transition:leave-end="opacity-0"
+             x-cloak
+             x-ref="panel"
+             x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
         >
             {{ $getContent }}
         </div>