apply to other components

Author: atmonshi

resources/views/popover-column.blade.php

@@ -12,7 +12,7 @@
 @endphp
 <div
     wire:key="{{ $this->getId() }}.table.record.{{ $recordKey }}.column.{{ $getName() }}"
-    x-data="{ open: false }"
+    x-data
 
     @if($getTrigger === 'hover')
         @pointerleave="$refs.panel.close"
@@ -34,7 +34,6 @@ 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="$refs.panel.open"
         @else
@@ -52,10 +51,10 @@ class="h-5 w-5 text-gray-500 dark:text-gray-400"
     </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 transition"
-         x-cloak
-         x-ref="panel"
          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 }}

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>

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>