From 7a140602fd88c095defd17d1ae58dcfd4f752d50 Mon Sep 17 00:00:00 2001
From: Ash Monsh <wh7r.com@gmail.com>
Date: Sat, 24 Feb 2024 16:23:03 +0300
Subject: [PATCH] add support for hover trigger

---
 docs/filament.md                         |  2 +-
 docs/getting-started/installation.md     |  8 +--
 docs/introduction.md                     |  2 +-
 resources/views/popover-column.blade.php | 42 ++++++++------
 resources/views/popover-entry.blade.php  | 70 +++++++++++++-----------
 5 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/docs/filament.md b/docs/filament.md
index a6e1520..d6b2edf 100644
--- a/docs/filament.md
+++ b/docs/filament.md
@@ -4,7 +4,7 @@ Popover (tippyjs) with custom content in tables and infolist
 
 ## Features
 
-- 🔥 trigger (click)
+- 🔥 trigger (click,hover)
 - 🔥 placement (right)
 - 🔥 offset from the content
 - 🔥 Max Width
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index c92c425..36d7821 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -23,10 +23,10 @@ composer require lara-zeus/popover
     ->toggleable()
     
     // main options
-    ->trigger('click') // for now popover only support click!
+    ->trigger('click') // support click and hover
     ->placement('right') // for more: https://alpinejs.dev/plugins/anchor#positioning
     ->offset(10) // int px, for more: https://alpinejs.dev/plugins/anchor#offset
-    ->popOverMaxWidth('none') // todo change to classes as in filament for more: 
+    ->popOverMaxWidth('none') 
     ->icon('heroicon-o-chevron-right') // show custom icon
 
     // direct HTML content
@@ -45,10 +45,10 @@ composer require lara-zeus/popover
 ```php
 \LaraZeus\Popover\Infolists\PopoverEntry::make('name')
     // main options
-    ->trigger('click') // for now popover only support click!
+    ->trigger('click') // support click and hover
     ->placement('right') // for more: https://alpinejs.dev/plugins/anchor#positioning
     ->offset(10) // int px, for more: https://alpinejs.dev/plugins/anchor#offset
-    ->popOverMaxWidth('none') // todo change to classes as in filament for more: 
+    ->popOverMaxWidth('none') 
     ->icon('heroicon-o-chevron-right') // show custom icon
 
     // direct HTML content
diff --git a/docs/introduction.md b/docs/introduction.md
index 1e4bea5..2b24083 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -10,7 +10,7 @@ weight: 1
 
 ## features
 
-- 🔥 trigger (click)
+- 🔥 trigger (click,hover)
 - 🔥 placement (right)
 - 🔥 offset from the content
 - 🔥 Max Width
diff --git a/resources/views/popover-column.blade.php b/resources/views/popover-column.blade.php
index 785d007..c08561c 100644
--- a/resources/views/popover-column.blade.php
+++ b/resources/views/popover-column.blade.php
@@ -1,20 +1,27 @@
+@php
+    $getState = $getState();
+    $getTrigger = $getTrigger();
+    $getPlacement = $getPlacement();
+    $getOffset = $getOffset();
+    $getPopOverMaxWidth = $getPopOverMaxWidth();
+    $getIcon = $getIcon($getState);
+    $descriptionAbove = $getDescriptionAbove();
+    $descriptionBelow = $getDescriptionBelow();
+    $canWrap = $canWrap();
+    $getContent = $getContent();
+@endphp
 <div
     wire:key="{{ $this->getId() }}.table.record.{{ $recordKey }}.column.{{ $getName() }}"
     x-data="{ open: false }"
+
+    @if($getTrigger === 'hover')
+        @pointerleave="clearTimeout($time); open = false"
+    @else
+        @click.away="open = false"
+    @endif
+
     class="fi-popover fi-ta-text grid w-full gap-y-1 px-3 py-4"
 >
-    @php
-        $getState = $getState();
-        $getTrigger = $getTrigger();
-        $getPlacement = $getPlacement();
-        $getOffset = $getOffset();
-        $getPopOverMaxWidth = $getPopOverMaxWidth();
-        $getIcon = $getIcon($getState);
-        $descriptionAbove = $getDescriptionAbove();
-        $descriptionBelow = $getDescriptionBelow();
-        $canWrap = $canWrap();
-        $getContent = $getContent();
-    @endphp
 
     @if (filled($descriptionAbove))
         <p
@@ -30,8 +37,11 @@ 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"
-        @click="open = ! open"
-        {{--@pointerenter="open = ! open"--}}
+        @if($getTrigger === 'hover')
+            @pointerenter="$time = setTimeout(() => { open = true }, 200)"
+        @else
+            @click="open = ! open"
+        @endif
     >
         {{ $getState }}
 
@@ -44,11 +54,9 @@ 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-500 shadow-lg bg-white dark:bg-gray-800"
-         x-cloak
+         x-cloak x-trap="open"
          x-show="open"
          x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
-         {{--@pointerleave="open = false"--}}
-         @click.away="open = false"
     >
         {{ $getContent }}
     </div>
diff --git a/resources/views/popover-entry.blade.php b/resources/views/popover-entry.blade.php
index fbe2e60..0deb388 100644
--- a/resources/views/popover-entry.blade.php
+++ b/resources/views/popover-entry.blade.php
@@ -1,40 +1,48 @@
-<div x-data class="fi-popover">
-    @php
-        $getState = $getState();
-        $getTrigger = $getTrigger();
-        $getPlacement = $getPlacement();
-        $getOffset = $getOffset();
-        $getPopOverMaxWidth = $getPopOverMaxWidth();
-        $getIcon = $getIcon($getState);
-    @endphp
-    <template x-ref="template">
-        <div class="fi-popover-content">
-            {{ $getContent() }}
-        </div>
-    </template>
+@php
+    $getState = $getState();
+    $getTrigger = $getTrigger();
+    $getPlacement = $getPlacement();
+    $getOffset = $getOffset();
+    $getPopOverMaxWidth = $getPopOverMaxWidth();
+    $getIcon = $getIcon($getState);
+    $getContent = $getContent();
+@endphp
+<div
+        wire:key="{{ $this->getId() }}.entry.record.{{ $getName() }}"
+        x-data="{ open: false }"
 
-    <button
-        class="w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
-        x-tooltip="{
-            trigger: '{{ $getTrigger }}',
-            placement: '{{ $getPlacement }}',
-            offset: @js($getOffset),
-            maxWidth: '{{ $getPopOverMaxWidth }}',
-
-            content: () => $refs.template.innerHTML,
-            appendTo: $root,
-            allowHTML: true,
-            interactive: true,
-            theme: $store.theme,
-        }">
+        @if($getTrigger === 'hover')
+            @pointerleave="clearTimeout($time); open = false"
+        @else
+            @click.away="open = false"
+        @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
-    </button>
+    </div>
+
+    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-500 shadow-lg bg-white dark:bg-gray-800"
+         x-cloak x-trap="open"
+         x-show="open"
+         x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
+    >
+        {{ $getContent }}
+    </div>
 </div>