open-nomad/ui/app/templates/components/multi-select-dropdown.hbs

36 lines
1.2 KiB
Handlebars

{{#basic-dropdown
horizontalPosition="left"
onOpen=(action (queue
(action (mut isOpen) true)
(action capture)
))
onClose=(action (mut isOpen) false)
as |dd|}}
{{#dd.trigger data-test-dropdown-trigger class="dropdown-trigger" onKeyDown=(action "openOnArrowDown")}}
<span class="dropdown-trigger-label">
{{label}}
{{#if selection.length}}
<span data-test-dropdown-count class="tag is-light">{{selection.length}}</span>
{{/if}}
</span>
<span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
{{/dd.trigger}}
{{#dd.content class="dropdown-options"}}
<ul role="listbox" data-test-dropdown-options>
{{#each options key="key" as |option|}}
<li data-test-dropdown-option={{option.key}} class="dropdown-option" tabindex="1" onkeydown={{action "traverseList" option}}>
<label>
<input
type="checkbox"
tabindex="-1"
checked={{contains option.key selection}}
onchange={{action "toggle" option}} />
{{option.label}}
</label>
</li>
{{else}}
<em data-test-dropdown-empty class="dropdown-empty">No options</em>
{{/each}}
</ul>
{{/dd.content}}
{{/basic-dropdown}}