Dropdown test 1

controllers.application.js

import Ember from 'ember';
import { computed } from '@ember/object';

// These would contain i18n keys to be looked up in the template,
// allowing the translation tool to work. Twiddle has no i18n
// by default, thus the hard-coding of English strings
const ORDER_TYPE_DATA = {
  MARKET_IOC: {
    label: 'Market order',
    title: 'Market – execute and eliminate',
    description: 'Request to buy or sell as quickly as possible, at the best available price. Any remainder will be immediately cancelled.'
  },
  LIMIT_GTC: {
    label: 'Limit - GTC',
    title: 'Limit – good \'til cancelled',
    description: 'Order will begin to fill at your specified price or better. Any remainder stays until cancelled.'
  },
  LIMIT_DAY: {
    label: 'Limit - Day',
    title: 'Limit – good for the day',
    description: 'Order will begin to fill at your specified price or better. Any remainder will be cancelled end of day.'
  },
  LIMIT_IOC: {
    label: 'Limit - EAE',
    title: 'Limit – execute and eliminate',
    description: 'Order will begin to fill at your specified price or better. Any remainder will be immediately cancelled.'
  },
};

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',

	ORDER_TYPE_DATA,

  selectedValue: 'LIMIT_DAY',

  selectedLabel: computed('selectedValue', function() {
    return ORDER_TYPE_DATA[this.selectedValue].label;
	}),

  actions: {
		onSelect(dropDown, newValue) {
      console.log('>> dropDown', dropDown);
      this.set('selectedValue', newValue);
      dropDown.actions.close();
    }
  },

});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.ember-basic-dropdown-trigger {
  cursor: pointer;
  padding: 2px;

  /* Just to make it obvious what to click, would use an arrow SVG in reality */
	box-shadow: 0px 0px 4px 2px rgba(0, 0, 255, 0.5);
}

.ember-basic-dropdown-content {
  box-shadow: 0px 2px 4px 0px rgba(38, 38, 41, 0.16); /* @context-menu-shadow */
  border: 1px solid #b0b0b8; /* @context-menu-border */
  border-radius: 2px;
  background-color: #f5f6f7; /* @context-menu-bg */
	color: #262629; /* @context-menu-color */
  max-width: 300px;
}

.ember-basic-dropdown-content ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.ember-basic-dropdown-content li {
  cursor: pointer;
  padding: 8px;
}

.ember-basic-dropdown-content li:hover {
	background-color: #337ab9;	/* @context-menu-hover-bg */
	color: #ffffff; /* @context-menu-hover-color */
}

.ember-basic-dropdown-content h5 {
  margin: 0px 0px 8px 0px;
  padding: 0px;
  font-size: 13px;
}

.ember-basic-dropdown-content p {
  margin: 0px;
  padding: 0px;
  font-size: 11px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br><br><br><br><br><br><br><br><br><br>
{{outlet}}
<hr>
{{#basic-dropdown as | dd |}}
  {{#dd.trigger}}{{selectedLabel}}{{/dd.trigger}}
  {{#dd.content}}
  	<ul>
    	{{#each-in ORDER_TYPE_DATA as | orderValue orderData |}}
    		<li data-value={{orderValue}} {{action "onSelect" dd orderValue}}>
          {{! Outside of Twiddle, these would use the t helper }}
      		<h5>{{orderData.title}}</h5>
        	<p>{{orderData.description}}</p>
				</li>
      {{/each-in}}
    </ul>
  {{/dd.content}}
{{/basic-dropdown}}
<hr>
<br><br>
<div id="ember-basic-dropdown-wormhole"></div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-basic-dropdown": "1.1.2"
  }
}