generated from boboko/starter
43 lines
1.3 KiB
PHP
43 lines
1.3 KiB
PHP
|
@props([
|
||
|
|
'id',
|
||
|
|
'label' => null,
|
||
|
|
'ariaLabel' => null,
|
||
|
|
'triggerClass' => '',
|
||
|
|
])
|
||
|
|
|
||
|
|
<div
|
||
|
|
data-controller="dropdown"
|
||
|
|
{{ $attributes->merge(['class' => 'dropdown relative inline-flex items-center']) }}
|
||
|
|
>
|
||
|
|
{{-- Popover invoker buttons get implicit aria-expanded / aria-details from
|
||
|
|
the browser, so only the accessible name needs setting here.
|
||
|
|
click->dropdown#position measures this button and feeds the panel's
|
||
|
|
position to CSS before the native popover toggle paints it. --}}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
popovertarget="{{ $id }}"
|
||
|
|
popovertargetaction="toggle"
|
||
|
|
data-dropdown-target="trigger"
|
||
|
|
data-action="click->dropdown#position"
|
||
|
|
@if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
|
||
|
|
class="bg-transparent border-b border-black pr-10 py-2.5 cursor-pointer focus:outline-none text-left whitespace-nowrap {{ $triggerClass }}"
|
||
|
|
>
|
||
|
|
{{ $label }}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<x-ui.icon
|
||
|
|
name="arrow-down"
|
||
|
|
:size="16"
|
||
|
|
class="dropdown-caret pointer-events-none absolute right-0 transition-transform duration-200"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="{{ $id }}"
|
||
|
|
popover
|
||
|
|
data-dropdown-target="panel"
|
||
|
|
class="dropdown-panel absolute w-max max-w-xs bg-neutral-200 border border-black"
|
||
|
|
>
|
||
|
|
{{ $slot }}
|
||
|
|
</div>
|
||
|
|
</div>
|