b5a40473ab
* ui: Move more menu subcomponents deeper down into popovermenu * ui: Simplify aria-menu component+remove auto menu close on route change * Add ember-string-fns * Use new PopoverMenu sub components and fix up tests * Fix up wrong closing let * Remove dcs from the service show page now we have it in the navigation
62 lines
2 KiB
Handlebars
62 lines
2 KiB
Handlebars
{{yield}}
|
|
<div class="popover-menu" ...attributes>
|
|
<AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress keypressClick aria|>
|
|
|
|
{{#let (hash
|
|
MenuItem=(component
|
|
'popover-menu/menu-item'
|
|
menu=(hash
|
|
addSubmenu=(action "addSubmenu")
|
|
removeSubmenu=(action "removeSubmenu")
|
|
confirm=(concat "popover-menu-" guid "-")
|
|
clickTrigger=this.toggle.click
|
|
keypressClick=keypressClick
|
|
)
|
|
)
|
|
MenuSeparator=(component
|
|
'popover-menu/menu-separator'
|
|
)
|
|
)
|
|
as |components|}}
|
|
{{#let (hash
|
|
toggle=this.toggle.click
|
|
)
|
|
as |api|}}
|
|
|
|
<ToggleButton
|
|
@checked={{if keyboardAccess aria.expanded expanded}}
|
|
@onchange={{queue change (action "change")}}
|
|
as |toggle|>
|
|
<Ref @target={{this}} @name="toggle" @value={{toggle}} />
|
|
<button type="button" aria-haspopup="menu" onkeydown={{keypress}} onclick={{this.toggle.click}} id={{aria.labelledBy}} aria-controls={{aria.controls}}>
|
|
<YieldSlot @name="trigger">
|
|
{{yield components api}}
|
|
</YieldSlot>
|
|
</button>
|
|
</ToggleButton>
|
|
|
|
<MenuPanel @position={{position}} id={{aria.controls}} aria-labelledby={{aria.labelledBy}} aria-expanded={{aria.expanded}} as |menu|>
|
|
<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={{menu.change}} />
|
|
{{/each}}
|
|
</BlockSlot>
|
|
{{#if hasHeader}}
|
|
<BlockSlot @name="header">
|
|
{{yield components api}}
|
|
{{#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 components api}}
|
|
</YieldSlot>
|
|
</BlockSlot>
|
|
</MenuPanel>
|
|
|
|
{{/let}}
|
|
{{/let}}
|
|
|
|
</AriaMenu>
|
|
</div> |