github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/templates/components/multi-select-dropdown.hbs (about)

     1  <BasicDropdown
     2    @horizontalPosition="left"
     3    @onOpen={{action
     4      (queue (action (mut this.isOpen) true) (action this.capture))
     5    }}
     6    @onClose={{action (mut this.isOpen) false}}
     7    as |dd|
     8  >
     9    <dd.Trigger
    10      data-test-dropdown-trigger
    11      class="dropdown-trigger"
    12      {{on "keyup" (action "openOnArrowDown" dd)}}
    13    >
    14      <div class="dropdown-trigger-label" id="{{this.elementId}}-label">
    15        {{this.label}}
    16        {{#if this.selection.length}}
    17          <span data-test-dropdown-count class="tag is-light">
    18            {{this.selection.length}}
    19          </span>
    20        {{/if}}
    21      </div>
    22      <span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
    23    </dd.Trigger>
    24    <dd.Content class="dropdown-options">
    25      {{#if this.options}}
    26        <ul
    27          role="listbox"
    28          aria-labelledby="{{this.elementId}}-label"
    29          data-test-dropdown-options
    30        >
    31          {{#each this.options key="key" as |option|}}
    32            <div
    33              data-test-dropdown-option={{option.key}}
    34              class="dropdown-option"
    35              tabindex="0"
    36              onkeyup={{action "traverseList" option}}
    37            >
    38              <label>
    39                <input
    40                  type="checkbox"
    41                  tabindex="-1"
    42                  checked={{includes option.key this.selection}}
    43                  role="option"
    44                  onchange={{action "toggle" option}}
    45                />
    46                {{option.label}}
    47              </label>
    48            </div>
    49          {{/each}}
    50        </ul>
    51      {{else}}
    52        <ul aria-labelledby="{{this.elementId}}-label" data-test-dropdown-options>
    53          <li data-test-dropdown-empty class="dropdown-empty">
    54            No options
    55          </li>
    56        </ul>
    57      {{/if}}
    58    </dd.Content>
    59  </BasicDropdown>