2019-01-15 01:59:41 +00:00
|
|
|
{{#basic-dropdown
|
2019-01-17 00:28:13 +00:00
|
|
|
horizontalPosition="left"
|
|
|
|
onOpen=(action (queue
|
|
|
|
(action (mut isOpen) true)
|
|
|
|
(action capture)
|
|
|
|
))
|
2019-01-15 01:59:41 +00:00
|
|
|
onClose=(action (mut isOpen) false)
|
|
|
|
as |dd|}}
|
2019-01-16 01:16:18 +00:00
|
|
|
{{#dd.trigger data-test-dropdown-trigger class="dropdown-trigger" onKeyDown=(action "openOnArrowDown")}}
|
2019-01-11 23:41:56 +00:00
|
|
|
<span class="dropdown-trigger-label">
|
|
|
|
{{label}}
|
|
|
|
{{#if selection.length}}
|
2019-01-16 01:16:18 +00:00
|
|
|
<span data-test-dropdown-count class="tag is-light">{{selection.length}}</span>
|
2019-01-11 23:41:56 +00:00
|
|
|
{{/if}}
|
|
|
|
</span>
|
2019-01-10 01:54:28 +00:00
|
|
|
<span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
|
|
|
|
{{/dd.trigger}}
|
|
|
|
{{#dd.content class="dropdown-options"}}
|
2019-01-16 01:16:18 +00:00
|
|
|
<ul role="listbox" data-test-dropdown-options>
|
2019-01-10 01:54:28 +00:00
|
|
|
{{#each options key="key" as |option|}}
|
2019-01-24 04:33:47 +00:00
|
|
|
<li data-test-dropdown-option={{option.key}} class="dropdown-option" tabindex="1" onkeydown={{action "traverseList" option}}>
|
2019-01-10 01:54:28 +00:00
|
|
|
<label>
|
2019-01-11 23:41:56 +00:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
2019-01-15 01:59:41 +00:00
|
|
|
tabindex="-1"
|
2019-01-22 17:17:49 +00:00
|
|
|
checked={{contains option.key selection}}
|
2019-01-11 23:41:56 +00:00
|
|
|
onchange={{action "toggle" option}} />
|
2019-01-10 01:54:28 +00:00
|
|
|
{{option.label}}
|
|
|
|
</label>
|
|
|
|
</li>
|
2019-01-23 00:29:09 +00:00
|
|
|
{{else}}
|
|
|
|
<em data-test-dropdown-empty class="dropdown-empty">No options</em>
|
2019-01-10 01:54:28 +00:00
|
|
|
{{/each}}
|
|
|
|
</ul>
|
|
|
|
{{/dd.content}}
|
|
|
|
{{/basic-dropdown}}
|