commit | author | age
|
f7d0ce
|
1 |
@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white']) |
F |
2 |
|
|
3 |
@php |
|
4 |
switch ($align) { |
|
5 |
case 'left': |
|
6 |
$alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0'; |
|
7 |
break; |
|
8 |
case 'top': |
|
9 |
$alignmentClasses = 'origin-top'; |
|
10 |
break; |
|
11 |
case 'right': |
|
12 |
default: |
|
13 |
$alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0'; |
|
14 |
break; |
|
15 |
} |
|
16 |
|
|
17 |
switch ($width) { |
|
18 |
case '48': |
|
19 |
$width = 'w-48'; |
|
20 |
break; |
|
21 |
} |
|
22 |
@endphp |
|
23 |
|
|
24 |
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false"> |
|
25 |
<div @click="open = ! open"> |
|
26 |
{{ $trigger }} |
|
27 |
</div> |
|
28 |
|
|
29 |
<div x-show="open" |
|
30 |
x-transition:enter="transition ease-out duration-200" |
|
31 |
x-transition:enter-start="opacity-0 scale-95" |
|
32 |
x-transition:enter-end="opacity-100 scale-100" |
|
33 |
x-transition:leave="transition ease-in duration-75" |
|
34 |
x-transition:leave-start="opacity-100 scale-100" |
|
35 |
x-transition:leave-end="opacity-0 scale-95" |
|
36 |
class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}" |
|
37 |
style="display: none;" |
|
38 |
@click="open = false"> |
|
39 |
<div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}"> |
|
40 |
{{ $content }} |
|
41 |
</div> |
|
42 |
</div> |
|
43 |
</div> |