Ember dropdown component

component.js

// app/components/dropdown-select/component.js
import Ember from 'ember';

const {
  Component,
  computed
} = Ember;

export default Component.extend({
  // public api
  content: [],
  prompt: 'select...',
  isDropped: false,

  selectedItem: null,
  hasSelectedItem: computed.bool('selectedItem'),

  actions: {
    toggleDropped() {
      this.toggleProperty('isDropped');
    },

    selectItem(item) {
      this.set('selectedItem', item);
      this.sendAction('selectItem', item);
    }
  }
});

template.hbs

{{! app/components/dropdown-select/template.hbs }}
{{! n.b. the classes used assume semantic ui }}
<div class='ui selection dropdown {{if isDropped 'active visible'}}'
  {{action 'toggleDropped'}}>

  <i class='dropdown icon'></i>

  <div class='text {{unless selectedItem 'default'}}'>
    {{#if hasSelectedItem}}
      {{#if hasBlock}}
        {{yield selectedItem}}
      {{else}}
        {{selectedItem}}
      {{/if}}
    {{else}}
      {{prompt}}
    {{/if}}
  </div>

  <div class='menu transition {{if isDropped 'visible' 'hidden'}}'>
    {{#each content as |item|}}
      <div class='item {{if (eq item selectedItem) 'active selected'}}'
        {{action 'selectItem' item}}>

        {{#if hasBlock}}
          {{yield item}}
        {{else}}
          {{item}}
        {{/if}}
      </div>
    {{/each}}
  </div>
</div>