Update actions to kebob case & arguments. (#159)

* Update actions to kebob case & arguments.

Now we send the same arguments for all of the actions. The value of the
select & the event.

* Update to closure actions only

* Clarify readme for `componentState`

* Send warning for string actions & remove componentState

.travis.yml

@@ -10,7 +10,7 @@ before_install:
   - npm install -g bower
   - npm install -g yarn
   - bower --version
-  - yarn add phantomjs-prebuilt
+  - npm i phantomjs-prebuilt
   - phantomjs --version
 install:
   - yarn

README.md

@@ -61,9 +61,6 @@ through data rather than through the DOM.
 {{/x-select}}
 ```
 
-If you're using a lower version of Ember, `emberx-select` will continue
-to work without block params for the forseeable future.
-
 ### Multiselect
 
 As of version 1.1.0, `emberx-select` supports the `multiple`
@@ -80,28 +77,29 @@ its selections directly on that array.
 
 The selections array will be initialized to an empty array if not present.
 
-## Action and Action Arguments
+## Actions and Action Arguments
 
-The action that is dispatched by x-select whenever the selected value or values
-change (change event) has a function signature of:
+All of x-selects actions are closure actions. This means you must use
+the `action` helper (i.e. `on-click=(action "onClick")`). The function
+that is dispatched by x-select whenever the event fires has a function
+signature of:
 
 ```js
 /**
-* @param value {Object} the value selected by the user.
-* @param component {Ember.Component} the x-select component itself
+* @param {Object} value - the value selected by the user.
+* @param {Object} event - the jQuery event of the action
 */
-function (value, component) {
+function (value, event) {
   // action body...
 }
 ```
 
 Most of the time all you need is the value that has been selected, but
 sometimes your action requires more context than just that. In those
-cases, you can associate arbitrary attributes with the component
-itself and use them later inside your action handler.  For example:
+cases, you can pass any arguments you need from the template. For example:
 
 ```handlebars
-{{#x-select action="didMakeSelection" default=anything as |xs|}}
+{{#x-select on-click=(action "didMakeSelection" isXSelectRequired) required=isXSelectRequired as |xs|}}
   <option>Nothing</option>
   {{#xs.option value=something}}Something{{/xs.option}}
 {{/x-select}}
@@ -111,38 +109,36 @@ then, inside your action handler:
 ```js
 export default Ember.Route.extend({
   actions: {
-    didMakeSelection: function(selection, component) {
-      if (selection) {
-        this.set('selection', selection)
+    didMakeSelection(value, event, isXSelectRequired) {
+      if (!value & isXSelectRequired) {
+        this.set('error', 'You must fill out this field');
       } else {
-        this.set('selection', component.get('default'))
+        this.set('selection', value);
       }
     }
   }
 });
 ```
 
-#### Other Actions
-
-x-select also provides other actions that fire on different event
+x-select provides other actions that fire on different event
 types. These actions follow the HTML input event naming convention.
 
-**onblur**
+**on-blur**
 
-`onblur` fires anytime the `blur` event is triggered on the x-select
-component. When the action fires it sends three arguments: the
-component, the value, and the jQuery event.
+`on-blur` fires anytime the `blur` event is triggered on the x-select
+component. When the action fires it sends two arguments: the value,
+the jQuery event.
 
-**onfocusout**
+**on-focus-out**
 
-`onfocusout` fires anytime the `focusOut` event is triggered on the x-select
-component. When the action fires it sends three arguments: the
-component, the value, and the jQuery event.
+`on-focus-out` fires anytime the `focusOut` event is triggered on the x-select
+component. When the action fires it sends two arguments: the value,
+the jQuery event.
 
-**onclick**
+**on-click**
 
-`onclick` fires when x-select is clicked. When the action fires it
-sends three arguments: the component, the value, and the jQuery event.
+`on-click` fires when x-select is clicked. When the action fires it
+sends two arguments: the value, the jQuery event.
 
 **on-disable** (x-option)
 

addon/components/x-select.js

@@ -36,18 +36,18 @@ export default Ember.Component.extend({
    *
    * @property disabled
    * @type Boolean
-   * @default null
+   * @default false
    */
-  disabled: null,
+  disabled: false,
 
   /**
    * Bound to the `multiple` attribute on the native <select> tag.
    *
    * @property multiple
    * @type Boolean
-   * @default null
+   * @default false
    */
-  multiple: null,
+  multiple: false,
 
   /**
    * The collection of options for this select box. When options are
@@ -71,39 +71,91 @@ export default Ember.Component.extend({
    */
   tabindex: 0,
 
+  /**
+   * Function for the `on-blur` action
+   *
+   * @property on-blur
+   * @type Function
+   */
+  "on-blur": Ember.K,
+
+  /**
+   * Function for the `on-click` action
+   *
+   * @property on-click
+   * @type Function
+   */
+  "on-click": Ember.K,
+
+  /**
+   * Function for the `on-change` action
+   *
+   * @property on-change
+   * @type Function
+   */
+  "on-change": Ember.K,
+
+  /**
+   * Function for the `on-focus-out` action
+   *
+   * @property on-focus-out
+   * @type Function
+   */
+  "on-focus-out": Ember.K,
+
+  /**
+   * Function that calls an action and sends the proper arguments.
+   *
+   * @method _handleAction
+   * @type Function
+   * @param {String} action - string name of the action to invoke
+   * @param {String|Object} value - current value of the component
+   * @param {Object} event - jQuery event from the current action
+   */
+  _handleAction(action, value, event) {
+    let actionValue = this.get(action);
+
+    if(typeof actionValue === 'string') {
+      Ember.warn(`x-select: You must use the action helper for all actions. The try: ${action}=(action "${actionValue}") in your template`, false, {id: 'x-select-string-action'});
+      return;
+    }
+
+    this.get(action)(value, event);
+  },
+
   /**
    * When the select DOM event fires on the element, trigger the
    * component's action with the current value.
    */
   change(event) {
     let nextValue = this._getValue();
 
-    this.sendAction('action', nextValue, this);
-    this.sendAction('onchange', this, nextValue, event);
+    this.sendAction('action', nextValue, event, this);
+    this._handleAction('on-change', nextValue, event);
   },
 
   /**
    * When the click DOM event fires on the element, trigger the
    * component's action with the component, x-select value, and the jQuery event.
    */
   click(event) {
-    this.sendAction('onclick', this, this._getValue(), event);
+    this._handleAction('on-click', this._getValue(), event);
   },
 
   /**
    * When the blur DOM event fires on the element, trigger the
    * component's action with the component, x-select value, and the jQuery event.
    */
   blur(event) {
-    this.sendAction('onblur', this, this._getValue(), event);
+    this._handleAction('on-blur', this._getValue(), event);
   },
 
   /**
    * When the focusOut DOM event fires on the element, trigger the
    * component's action with the component, x-select value, and the jQuery event.
    */
   focusOut(event) {
-    this.sendAction('onfocusout', this, this._getValue(), event);
+    this._handleAction('on-focus-out', this._getValue(), event);
   },
 
   /**
@@ -125,7 +177,7 @@ export default Ember.Component.extend({
    *
    * @private
    * @return {Array} all the values from selected x-options
-  */
+   */
   _findMultipleValues() {
     return this.get('options').filter(isSelectedOption).map(option => option.get('value'));
   },
@@ -136,7 +188,7 @@ export default Ember.Component.extend({
    *
    * @private
    * @return {Object} the value of the first select `x-option`, or null
-  */
+   */
   _findSingleValue() {
     let selectedValue = this.get('options').find(isSelectedOption);
     return selectedValue ? selectedValue.get('value') : null;

tests/dummy/app/controllers/events/blur.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   actions: {
-    onBlur(component, value, event) {
+    onBlur(value, event) {
       this.set('eventType', event.type);
     }
   }

tests/dummy/app/controllers/events/click.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   actions: {
-    onClick(component, value, event) {
+    onClick(value, event) {
       this.set('eventType', event.type);
     }
   }

tests/dummy/app/controllers/events/focus-out.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   actions: {
-    focusOut(component, value, event) {
+    focusOut(value, event) {
       this.set('eventType', event.type);
     }
   }

tests/dummy/app/controllers/single.js

@@ -10,8 +10,8 @@ export default Ember.Controller.extend(Folks, {
   attrSize: null,
 
   actions: {
-    tagYouAreIt: function(object) {
-      this.set('it', object);
+    tagYouAreIt: function(value) {
+      this.set('it', value);
     }
   }
 });

tests/dummy/app/templates/events/blur.hbs

@@ -1,6 +1,6 @@
 <h2>Blur</h2>
 
-{{#x-select value=it onblur="onBlur" as |xs|}}
+{{#x-select value=it on-blur=(action "onBlur") as |xs|}}
   {{#xs.option value=charles}}Charles{{/xs.option}}
   {{#xs.option value=bastion}}Bastion{{/xs.option}}
   {{#xs.option value=stanley}}Stanley{{/xs.option}}

tests/dummy/app/templates/events/click.hbs

@@ -1,6 +1,6 @@
 <h2>Click</h2>
 
-{{#x-select value=it onclick="onClick" as |xs|}}
+{{#x-select value=it on-click=(action "onClick") as |xs|}}
   {{#xs.option value=charles}}Charles{{/xs.option}}
   {{#xs.option value=bastion}}Bastion{{/xs.option}}
   {{#xs.option value=stanley}}Stanley{{/xs.option}}

tests/dummy/app/templates/events/focus-out.hbs

@@ -1,6 +1,6 @@
 <h2>Focus Out</h2>
 
-{{#x-select value=it onfocusout="focusOut" as |xs|}}
+{{#x-select value=it on-focus-out=(action "focusOut") as |xs|}}
   {{#xs.option value=charles}}Charles{{/xs.option}}
   {{#xs.option value=bastion}}Bastion{{/xs.option}}
   {{#xs.option value=stanley}}Stanley{{/xs.option}}

tests/integration/components/default-value-test.js

@@ -0,0 +1,45 @@
+/* jshint expr:true */
+import { expect } from 'chai';
+import { describeComponent, it } from 'ember-mocha';
+import { describe, beforeEach } from 'mocha';
+import hbs from 'htmlbars-inline-precompile';
+
+describeComponent(
+  'default-value',
+  'Integration: DefaultValue',
+  {
+    integration: true
+  },
+  function() {
+    describe("default value of null", function() {
+      beforeEach(function() {
+        this.set('make', null);
+        this.set('selectAction', (value) => {
+          this.set("make", value);
+          this.set("wasCalled", true);
+        });
+
+        this.render(hbs`
+          {{#x-select value=make action=selectAction as |xs|}}
+            {{#xs.option value="fordValue" class="spec-ford-option"}}Ford{{/xs.option}}
+            {{#xs.option value="chevyValue"}}Chevy{{/xs.option}}
+            {{#xs.option value="dodgeValue" class="spec-dodge-option"}}Dodge{{/xs.option}}
+          {{/x-select}}
+        `);
+      });
+
+      it("displays the first item in the list", function() {
+        expect(this.$('select option:selected').text()).to.equal("Ford");
+      });
+
+      it("sets the default value to the first element", function() {
+        expect(this.get('make')).to.equal("fordValue");
+      });
+
+      it("invokes the select action on init", function() {
+        expect(this.get("wasCalled")).to.equal(true);
+      });
+
+    });
+  }
+);