| 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> | |
