12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- @props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-fogra'])
- @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="transform opacity-0 scale-95"
- x-transition:enter-end="transform opacity-100 scale-100"
- x-transition:leave="transition ease-in duration-75"
- x-transition:leave-start="transform opacity-100 scale-100"
- x-transition:leave-end="transform opacity-0 scale-95"
- class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-md shadow-burnt {{ $alignmentClasses }}"
- style="display: none;"
- @click="open = false">
- <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
- {{ $content }}
- </div>
- </div>
- </div>
|