github.com/hernad/nomad@v1.6.112/ui/app/templates/components/multi-select-dropdown.hbs (about)

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