Ember Power Select - Semantic UI

example-key-value.hbs

{{! templates/example-key-value.hbs }}
{{! In this example we are selecting from the countries array by key (iso3) and setting the selected country key (iso3) as the value }}
{{! This would be used in query params where the value is text in the end and we need to translate back and forth from text to model and back}}
{{#power-select
    placeholder="Select Country"
    selected=(get-selected country_iso3 countries "iso3")
    options=countries
    onchange=(action (set-selected "country_iso3" "iso3"))
    as |country|
}}
  {{country.name}}
{{/power-select}}

example-value.hbs

{{! templates/example-value.hbs }}
{{! In this example we are selecting from the countries array and setting the selected country as the value }}
{{#power-select
    placeholder="Select Country"
    selected=country
    options=countries
    onchange=(action (mut country))
    as |country|
}}
  {{country.name}}
{{/power-select}}

get-selected.js

// helpers/get-selected.js
import Ember from 'ember';

export function getOptions(collection) {
  if (Ember.isBlank(collection)) {
    return collection;
  }

  let options = [];
  for (let item of collection.toArray()) {
    if (Ember.isPresent(item.groupName)) {
      options.push(...item.options);
    } else {
      options.push(item);
    }
  }
  return options;
}

export function generateMultiple(property, collection, key) {
  // Generate multiple
  if (Ember.isBlank(property)) {
    return [];
  }
  let values = (property || '').split(',');

  let collection_values = getOptions(collection);
  return collection_values.filter((c) => values.indexOf((c.get(key) || '').toString()) >= 0);
}

export function generateSingle(property, collection, key) {
  if (Ember.isBlank(property)) {
    return null;
  }

  let collection_values = getOptions(collection);
  return collection_values.find((c) => property === (c.get(key) || '').toString());
}

export function getSelected([property, collection, key], options) {
  if (options.multiple === true) {
    return generateMultiple(property, collection, key);
  } else {
    return generateSingle(property, collection, key);
  }
}

export default Ember.Helper.helper(getSelected);

semantic-ui-ember-power-select.scss

// styles/semantic-ui-ember-power-select.scss
// Backgrounds
// $ember-power-select-background-color: #ffffff !default;
$ember-power-select-disabled-background-color: #ffffff !default;
$ember-power-select-multiple-selection-background-color: #e8e8e8 !default;
$ember-power-select-highlighted-background: rgba(0,0,0,.03) !default;
$ember-power-select-selected-background: rgba(0,0,0,.05) !default;

// // Texts
$ember-power-select-text-color: rgba(0,0,0,.95) !default;
$ember-power-select-placeholder-color: rgba(191,191,191,.87) !default;
$ember-power-select-highlighted-color: rgba(0,0,0,.95) !default;
$ember-power-select-disabled-option-color: rgba(191,191,191,.87) !default;
$ember-power-select-multiple-selection-color: rgba(0, 0, 0, 0.6) !default;

// // Borders
$ember-power-select-border-color: rgba(34, 36, 38, 0.15) !default;
$ember-power-select-focus-border-color: rgb(150, 200, 218) !default;
$ember-power-select-default-border: 1px solid $ember-power-select-border-color !default;
$ember-power-select-default-focus-border: 1px solid $ember-power-select-focus-border-color !default;

// $ember-power-select-trigger-border: $ember-power-select-default-border !default;
// $ember-power-select-trigger-border-top: $ember-power-select-trigger-border !default;
// $ember-power-select-trigger-border-bottom: $ember-power-select-trigger-border !default;
// $ember-power-select-trigger-border-right: $ember-power-select-trigger-border !default;
// $ember-power-select-trigger-border-left: $ember-power-select-trigger-border !default;
// $ember-power-select-active-trigger-border: $ember-power-select-default-focus-border !default;
// $ember-power-select-active-trigger-border-top: $ember-power-select-active-trigger-border !default;
// $ember-power-select-active-trigger-border-bottom: none !default;
// $ember-power-select-active-trigger-border-right: $ember-power-select-active-trigger-border !default;
// $ember-power-select-active-trigger-border-left: $ember-power-select-active-trigger-border !default;
$ember-power-select-dropdown-border: rgb(250, 250, 250) !default;
$ember-power-select-search-field-border: $ember-power-select-default-border !default;
$ember-power-select-search-field-focus-border: $ember-power-select-default-focus-border !default;

// $ember-power-select-dropdown-top-border: none !default;
$ember-power-select-dropdown-right-border: $ember-power-select-default-focus-border !default;
$ember-power-select-dropdown-bottom-border: $ember-power-select-default-focus-border !default;
$ember-power-select-dropdown-left-border: $ember-power-select-default-focus-border !default;

// $ember-power-select-dropdown-contiguous-border: none !default;

$ember-power-select-multiple-option-border-color: rgba(34,36,38,.15) !default;
// $ember-power-select-multiple-option-border: 1px solid $ember-power-select-multiple-option-border-color !default;

// // Borders radius
// $ember-power-select-default-border-radius: 4px !default; // General border radius
// $ember-power-select-trigger-default-border-radius: $ember-power-select-default-border-radius !default;
// $ember-power-select-dropdown-default-border-radius: $ember-power-select-default-border-radius !default;

// $ember-power-select-opened-border-radius: 0 !default; // Border radius of the side of the dropdown and the trigger where they touch

// $ember-power-select-search-input-border-radius: 0 !important;
// $ember-power-select-multiple-option-border-radius: $ember-power-select-default-border-radius !default;

// // Other
// $ember-power-select-focus-box-shadow: none !default;
// $ember-power-select-dropdown-margin: 0 !default; // Margin between the dropdown and the trigger
// $ember-power-select-dropdown-box-shadow: none !default;
// $ember-power-select-line-height: 1.75 !default;
$ember-power-select-trigger-icon-color: rgba(0, 0, 0, 0.87) !default;
// $ember-power-select-clear-btn-margin: 25px !default;
$ember-power-select-option-padding: 1.14em !default;
// $ember-power-select-number-of-visible-options: 7 !default;
$ember-power-select-focus-outline: rgba(0, 0, 0, 0) !default;
// $ember-power-select-trigger-ltr-padding: 0 30px 0 0 !default;
// $ember-power-select-trigger-rtl-padding: 0 0 0 16px !default;
$ember-power-select-multiple-option-padding: 0.40em 0.78em !default;
$ember-power-select-multiple-option-line-height: 1 !default;

.root {
  // Single select
  .ember-basic-dropdown-trigger {
    padding: 0.78em 2.1em 0.78em 1em;
    line-height: 1;

    .ember-power-select-selected-item, .ember-power-select-placeholder {
      margin-left: 0;
    }

    .ember-power-select-placeholder {
      overflow: hidden;
    }
  }

  // Multiple select
  .ember-power-select-multiple-trigger {
    padding: 0.22em 2.1em 0.22em 0.35em;

    .ember-power-select-multiple-options {

      .ember-power-select-placeholder {
        padding-left: 0.6em;
        line-height: 2.1em;
      }

      .ember-power-select-multiple-option {
        margin-left: 0px;
        margin-right: 4px;
        font-weight: bold;
        padding-right: 23px;
        position: relative;
        font-size: 0.99em;

        > .ember-power-select-multiple-remove-btn {
          position: absolute;
          right: 7px;
          font-size: 22px;
          display: flex;
          align-items: center;
          height: 100%;
          top: 0;
        }
      }

      .ember-power-select-trigger-multiple-input {
        border: none;
        position: static;
        padding: 0;
        max-width: 100%;
        margin: .5em 0 .5em .4em;
        width: 2.2em;
        line-height: 1.1em;
      }
    }
  }

  // Both triggers
  .ember-basic-dropdown-trigger, .ember-power-select-multiple-trigger {
    font-size: 1rem;

    .ember-power-select-status-icon {
      right: 13px;
      border-width: 4px 4px 0 4px;
    }

    .ember-power-select-clear-btn {
      right: 33px;
    }

    &[aria-disabled='true'] {
      opacity: 0.45;
    }
  }

  .ember-power-select-dropdown {
    .ember-power-select-options {
      .ember-power-select-option {
        border-top: 1px solid rgb(250, 250, 250);
        padding: 0.78em 1.14em;
        font-style: 1rem;
        line-height: 1em;

        &[aria-selected="true"] {
          font-weight: bold;
        }
      }
    }

    .ember-power-select-group {
      border-top: 1px solid rgb(250, 250, 250);

      .ember-power-select-group-name {
         text-transform: uppercase;
         font-size: 0.8em;
         padding: 0.78em 1.5em;
         display: block;
         color: #9b9b9b;
      }
    }
  }
}

set-selected.js

// helpers/set-selected.js
import Ember from 'ember';

// Doesn't compute correctly unless we use the full helper version
export default Ember.Helper.extend({
  compute([property, key], options) {
    return function(value) {
      let target = options.target || this;
      if (Ember.isArray(value)) {
        target.set(property, value.mapBy(key).join(','));
      } else {
        if (Ember.isPresent(value)) {
          target.set(property, value.get(key));
        } else {
          let default_value = null;
          if (options.default != null) {
            default_value = options.default;
          }
          target.set(property, default_value);
        }
      }
    };
  }
});