Skip to content

Commit 4dae848

Browse files
atmonshiatmonshi
authored
Merge pull request #15 from lara-zeus/fix-table
fix popover in table
2 parents 5e04995 + 4d7aa97 commit 4dae848

File tree

7 files changed

+361
-360
lines changed

7 files changed

+361
-360
lines changed

‎.github/dependabot.yml

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎.github/workflows/dependabot.yml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
version: 2
2+
updates:
3+
4+
- package-ecosystem: "github-actions"
5+
directory: "/"
6+
schedule:
7+
interval: "weekly"
8+
labels:
9+
- "dependencies"

‎.github/workflows/phpstan.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ jobs:
1616
- name: Setup PHP
1717
uses: shivammathur/setup-php@v2
1818
with:
19-
php-version: '8.1'
19+
php-version: '8.2'
2020
coverage: none
2121

2222
- name: Install composer dependencies

‎composer.lock

Lines changed: 311 additions & 302 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/views/popover-column.blade.php

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@
1212
@endphp
1313
<div
1414
wire:key="{{ $this->getId() }}.table.record.{{ $recordKey }}.column.{{ $getName() }}"
15-
x-data="{ open: false }"
15+
x-data
1616

1717
@if($getTrigger === 'hover')
18-
@pointerleave="clearTimeout($time); open = false"
19-
@else
20-
@click.away="open = false"
18+
@pointerleave="$refs.panel.close"
2119
@endif
2220

2321
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"
3634

3735
<div
3836
class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
39-
x-ref="button"
4037
@if($getTrigger === 'hover')
41-
@pointerenter="$time = setTimeout(() => { open = true }, 200)"
38+
@pointerenter="$refs.panel.open"
4239
@else
43-
@click="open = ! open"
40+
@click="$refs.panel.toggle"
4441
@endif
4542
>
4643
{{ $getState }}
4744

4845
@if($getIcon)
4946
<x-filament::icon
50-
:icon="$getIcon"
51-
class="h-5 w-5 text-gray-500 dark:text-gray-400"
47+
:icon="$getIcon"
48+
class="h-5 w-5 text-gray-500 dark:text-gray-400"
5249
/>
5350
@endif
5451
</div>
5552

56-
<div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800"
57-
x-cloak x-trap="open"
58-
x-show="open"
59-
x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
53+
<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"
54+
x-transition:enter-start="opacity-0"
55+
x-transition:leave-end="opacity-0"
56+
x-cloak
57+
x-ref="panel"
58+
x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
6059
>
6160
{{ $getContent }}
6261
</div>

‎resources/views/popover-entry.blade.php

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,37 @@
88
$getContent = $getContent();
99
@endphp
1010
<div
11-
wire:key="{{ $this->getId() }}.entry.record.{{ $getName() }}"
12-
x-data="{ open: false }"
13-
11+
class="fi-popover grid w-full gap-y-1 px-3 py-4"
12+
wire:key="{{ $this->getId() }}.entry.record.{{ $getName() }}"
13+
x-data
14+
@if($getTrigger === 'hover')
15+
@pointerleave="$refs.panel.close"
16+
@endif
17+
>
18+
<div
19+
class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
1420
@if($getTrigger === 'hover')
15-
@pointerleave="clearTimeout($time); open = false"
21+
@pointerenter="$refs.panel.open"
1622
@else
17-
@click.away="open = false"
23+
@click="$refs.panel.toggle"
1824
@endif
19-
20-
class="fi-popover grid w-full gap-y-1 px-3 py-4"
21-
>
22-
<div
23-
class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
24-
x-ref="button"
25-
@if($getTrigger === 'hover')
26-
@pointerenter="$time = setTimeout(() => { open = true }, 200)"
27-
@else
28-
@click="open = ! open"
29-
@endif
3025
>
3126
{{ $getState }}
3227

3328
@if($getIcon)
3429
<x-filament::icon
35-
:icon="$getIcon"
36-
class="h-5 w-5 text-gray-500 dark:text-gray-400"
30+
:icon="$getIcon"
31+
class="h-5 w-5 text-gray-500 dark:text-gray-400"
3732
/>
3833
@endif
3934
</div>
4035

41-
<div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800"
42-
x-cloak x-trap="open"
43-
x-show="open"
44-
x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
36+
<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"
37+
x-transition:enter-start="opacity-0"
38+
x-transition:leave-end="opacity-0"
39+
x-cloak
40+
x-ref="panel"
41+
x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
4542
>
4643
{{ $getContent }}
4744
</div>

‎resources/views/popover-form.blade.php

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,29 +21,28 @@
2121
:state-path="$getStatePath()"
2222
>
2323
<div
24-
x-data="{ open: false }"
24+
x-data
2525
@if($getTrigger === 'hover')
26-
@pointerleave="clearTimeout($time); open = false"
27-
@else
28-
@click.away="open = false"
26+
@pointerleave="$refs.panel.close"
2927
@endif
3028
>
3129
<div
3230
class="relative w-full fi-popover-trigger cursor-pointer flex items-center gap-2"
33-
x-ref="button"
3431
@if($getTrigger === 'hover')
35-
@pointerenter="$time = setTimeout(() => { open = true }, 200)"
32+
@pointerenter="$refs.panel.open"
3633
@else
37-
@click="open = ! open"
34+
@click="$refs.panel.toggle"
3835
@endif
3936
>
4037
{{ $getState }}
4138
</div>
4239

4340
<div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] border border-gray-100 rounded-lg shadow-lg bg-white dark:bg-gray-800"
44-
x-cloak x-trap="open"
45-
x-show="open"
46-
x-anchor.{{ $getPlacement }}.offset.{{ $getOffset }}="$refs.button"
41+
x-transition:enter-start="opacity-0"
42+
x-transition:leave-end="opacity-0"
43+
x-cloak
44+
x-ref="panel"
45+
x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
4746
>
4847
{{ $getContent }}
4948
</div>

0 commit comments

Comments
 (0)