You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-gray-700']) |
|
|
|
@php |
|
switch ($align) { |
|
case 'left': |
|
$alignmentClasses = 'origin-top-left left-0'; |
|
break; |
|
case 'top': |
|
$alignmentClasses = 'origin-top'; |
|
break; |
|
case 'right': |
|
default: |
|
$alignmentClasses = 'origin-top-right right-0'; |
|
break; |
|
} |
|
|
|
switch ($width) { |
|
case '48': |
|
$width = 'w-48'; |
|
break; |
|
} |
|
@endphp |
|
|
|
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false"> |
|
<div @click="open = ! open"> |
|
{{ $trigger }} |
|
</div> |
|
|
|
<div x-show="open" |
|
x-transition:enter="transition ease-out duration-200" |
|
x-transition:enter-start="opacity-0 scale-95" |
|
x-transition:enter-end="opacity-100 scale-100" |
|
x-transition:leave="transition ease-in duration-75" |
|
x-transition:leave-start="opacity-100 scale-100" |
|
x-transition:leave-end="opacity-0 scale-95" |
|
class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}" |
|
style="display: none;" |
|
@click="open = false"> |
|
<div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}"> |
|
{{ $content }} |
|
</div> |
|
</div> |
|
</div>
|
|
|