consul/ui-v2/app/components/popover-menu/index.hbs

44 lines
1.7 KiB
Handlebars

{{yield}}
<div class="popover-menu" ...attributes>
<AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|>
<ToggleButton
@checked={{if keyboardAccess ariaExpanded expanded}}
@onchange={{queue change (action "change")}}
as |api|>
<Ref @target={{this}} @name="toggle" @value={{api}} />
<button type="button" aria-haspopup="menu" onkeydown={{keypress}} onclick={{this.toggle.click}} id={{ariaLabelledBy}} aria-controls={{ariaControls}}>
<YieldSlot @name="trigger">
{{yield (hash
addSubmenu=(action 'addSubmenu')
removeSubmenu=(action 'removeSubmenu')
)}}
</YieldSlot>
</button>
</ToggleButton>
<MenuPanel @position={{position}} id={{ariaControls}} aria-labelledby={{ariaLabelledBy}} aria-expanded={{ariaExpanded}} as |api|>
<BlockSlot @name="controls">
<input type="checkbox" id={{concat 'popover-menu-' guid '-'}} />
{{#each submenus as |sub|}}
<input type="checkbox" id={{concat 'popover-menu-' guid '-' sub}} onchange={{api.change}} />
{{/each}}
</BlockSlot>
{{#if hasHeader}}
<BlockSlot @name="header">
{{yield (hash
addSubmenu=(action 'addSubmenu')
removeSubmenu=(action 'removeSubmenu')
)}}
{{#yield-slot name="header"}}{{else}}{{/yield-slot}}
</BlockSlot>
{{/if}}
<BlockSlot @name="menu">
<YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") send keypressClick this.toggle.click}}>
{{yield (hash
addSubmenu=(action 'addSubmenu')
removeSubmenu=(action 'removeSubmenu')
)}}
</YieldSlot>
</BlockSlot>
</MenuPanel>
</AriaMenu>
</div>