How to use ember-power-select - 10 common examples

import { get, set } from '@ember/object';
import { on } from '@ember/object/evented';
import BeforeOptionsComponent from 'ember-power-select/components/power-select/before-options';
import {
  EKMixin as EmberKeyboardMixin,
  keyDown
} from 'ember-keyboard';

export default BeforeOptionsComponent.extend(EmberKeyboardMixin, {
  init() {
    this._super(...arguments);

    set(this, 'keyboardActivated', true);
  },

  keydown: on(keyDown(), function(event, ekEvent) {
    ekEvent.stopPropagation();
    ekEvent.stopImmediatePropagation();
    // Send the action ember-power-select expects
    this.sendAction('onKeydown', event);
  }),

  actions: {
    close() {
      get(this, 'selectRemoteController').actions.close();

import { alias } from '@ember/object/computed';
import { assert } from '@ember/debug';
import { isNone } from '@ember/utils';
import { defineProperty, computed } from '@ember/object';
import PowerSelect from 'ember-power-select/components/power-select';
import layout from '../templates/components/paper-autocomplete';
import ValidationMixin from 'ember-paper/mixins/validation-mixin';
import ChildMixin from 'ember-paper/mixins/child-mixin';
import { indexOfOption } from 'ember-power-select/utils/group-utils';
import calculatePosition from '../utils/calculate-ac-position';

/**
 * @class PaperAutocomplete
 * @extends PowerSelectComponent
 */
export default PowerSelect.extend(ValidationMixin, ChildMixin, {
  layout,
  calculatePosition,

  triggerComponent: 'paper-autocomplete-trigger',
  contentComponent: 'paper-autocomplete-content',
  optionsComponent: 'paper-autocomplete-options',
  triggerWrapperComponent: 'paper-autocomplete-trigger-container',
  onfocus: alias('onFocus'),
  onblur: alias('onBlur'),
  onchange: null,
  oninput: null,
  searchText: '',
  defaultHighlighted: null, // Don't automatically highlight any option
  _onChangeNop() { },

  extra: computed('labelPath', 'label', function() {

import PowerSelectComponent from 'ember-power-select/components/power-select';
import { get, computed } from '@ember/object';
import { inject as service } from '@ember/service';

// Override `ember-power-select` to support intl messages
export default PowerSelectComponent.extend({
  intl: service(),

  loadingMessage: computed('intl.locale', function() {
    return get(this, 'intl').t('selects.loading');
  }),

  noMatchesMessage: computed('intl.locale', function() {
    return get(this, 'intl').t('selects.none');
  }),

  searchMessage: computed('intl.locale', function() {
    return get(this, 'intl').t('selects.search');
  })
});

// Passed into power-select component for customized searching.
        // Returns results if match in node, root, or parent title
        const fields = [
            'title',
            'root.title',
            'parent.title',
        ];

        const sanitizedTerm = stripDiacritics(term).toLowerCase();

        for (const field of fields) {
            const fieldValue = node.get(field) || '';

            if (!fieldValue) continue;

            const sanitizedValue = stripDiacritics(fieldValue).toLowerCase();

            if (sanitizedValue.includes(sanitizedTerm)) {
                return 1;
            }
        }
        return -1;
    },
});

titleMatcher(node, term) {
        // Passed into power-select component for customized searching.
        // Returns results if match in node, root, or parent title
        const fields = [
            'title',
            'root.title',
            'parent.title',
        ];

        const sanitizedTerm = stripDiacritics(term).toLowerCase();

        for (const field of fields) {
            const fieldValue = node.get(field) || '';

            if (!fieldValue) continue;

            const sanitizedValue = stripDiacritics(fieldValue).toLowerCase();

            if (sanitizedValue.includes(sanitizedTerm)) {
                return 1;
            }
        }
        return -1;
    },
});

scrollTo(option) {
      if (!document || !option) {
        return;
      }
      let publicAPI = this.get('publicAPI');
      let optionsList = document.getElementById(`ember-power-select-options-${publicAPI.uniqueId}`);

      if (!optionsList) {
        return;
      }

      let index = indexOfOption(publicAPI.results, option);
      if (index === -1) {
        return;
      }
      // Update the scroll index
      this.updateState({ scrollIndex: index });
    }
  }

import $ from 'jquery';
import PowerSelectMultiple from 'ember-power-select/components/power-select-multiple';
import {bind} from '@ember/runloop';

const endActions = 'click.ghToken mouseup.ghToken touchend.ghToken';

// triggering focus on the search input within ESA's onfocus event breaks the
// drag-n-drop functionality in ember-drag-drop so we watch for events that
// could be the start of a drag and disable the default focus behaviour until
// we get another event signalling the end of a drag

export default PowerSelectMultiple.extend({

    tagName: 'div',

    _canFocus: true,

    willDestroyElement() {
        this._super(...arguments);

        if (this._allowFocusListener) {
            $(window).off(endActions, this._allowFocusListener);
        }
    },

    actions: {
        optionMouseDown(event) {
            if (event.which === 1 && !event.ctrlKey) {

init() {
    this._super(...arguments);
    this.set('tenDaysAgo', add(new Date(), -10, 'day'));
    this.set('threeDaysAgo', add(new Date(), -3, 'day'));
    this.set('threeDaysFromNow', add(new Date(), 3, 'day'));
    this.set('tomorrow', add(new Date(), 1, 'day'));
    this.set('tomorrowDate', add(new Date(), 1, 'day').toDate());
    this.set('pastMonth', add(new Date(), -1, 'month'));
    this.set('nextMonth', add(new Date(), 1, 'month'));
    this.set('februaryNextYear', new Date(2017, 1, 5));
    this.set('selected', add(new Date(), -15, 'day'));
    this.set('range', { start: add(new Date(), 2, 'day'), end: add(new Date(), 7, 'day') });
  }
});

init() {
    this._super(...arguments);
    this.set('tenDaysAgo', add(new Date(), -10, 'day'));
    this.set('threeDaysAgo', add(new Date(), -3, 'day'));
    this.set('threeDaysFromNow', add(new Date(), 3, 'day'));
    this.set('tomorrow', add(new Date(), 1, 'day'));
    this.set('tomorrowDate', add(new Date(), 1, 'day').toDate());
    this.set('pastMonth', add(new Date(), -1, 'month'));
    this.set('nextMonth', add(new Date(), 1, 'month'));
    this.set('februaryNextYear', new Date(2017, 1, 5));
    this.set('selected', add(new Date(), -15, 'day'));
    this.set('range', { start: add(new Date(), 2, 'day'), end: add(new Date(), 7, 'day') });
  }
});

init() {
    this._super(...arguments);
    this.set('tenDaysAgo', add(new Date(), -10, 'day'));
    this.set('threeDaysAgo', add(new Date(), -3, 'day'));
    this.set('threeDaysFromNow', add(new Date(), 3, 'day'));
    this.set('tomorrow', add(new Date(), 1, 'day'));
    this.set('tomorrowDate', add(new Date(), 1, 'day').toDate());
    this.set('pastMonth', add(new Date(), -1, 'month'));
    this.set('nextMonth', add(new Date(), 1, 'month'));
    this.set('februaryNextYear', new Date(2017, 1, 5));
    this.set('selected', add(new Date(), -15, 'day'));
    this.set('range', { start: add(new Date(), 2, 'day'), end: add(new Date(), 7, 'day') });
  }
});