Merge pull request #10 from lara-zeus/support-hover

add support for hover trigger
lara-zeus · Feb 24, 2024 · 249001d · 249001d
2 parents 1c9bb77 + 7a14060
commit 249001d
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>