backport kebob-case event names, argument order

- see adopted-ember-addons#159
- change event names to kebab-case to smooth transition from 2.x to 3.x
- change argument order to match 3.x
- NOTE: last argument `component` is deprecated in 3.x

README.md

@@ -155,22 +155,30 @@ export default Ember.Route.extend({
 x-select also 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 three arguments: the value,
+the jQuery event, and the component.
 
-**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 three arguments: the value,
+the jQuery event, and the component.
 
-**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 three arguments: the value, the jQuery event, and the component.
+
+**on-change**
+
+`on-change` fires when x-select is changed. When the action fires it
+sends three arguments: the value, the jQuery event, and the component.
+
+NOTE: For all events, the 3rd argument, the component, is removed in emberx-select 3.x+
+This argument remains in emberx-select 2.x for legacy support.
 
 ### Test Helpers
 

addon/components/x-select.js

@@ -109,31 +109,31 @@ export default Ember.Component.extend({
     }
 
     this.sendAction('action', nextValue, this);
-    this.sendAction('onchange', this, nextValue, event);
+    this.sendAction('on-change', nextValue, event, this);
   },
 
   /**
    * 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.sendAction('on-click', this._getValue(), event, this);
   },
 
   /**
    * 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.sendAction('on-blur', this._getValue(), event, this);
   },
 
   /**
    * 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.sendAction('on-focus-out', this._getValue(), event, this);
   },
 
   /**

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/*, component*/) {
       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/*, component*/) {
       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/*, component*/) {
       this.set('eventType', event.type);
     }
   }

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

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

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

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

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

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

tests/integration/components/two-way-data-binding-test.js

@@ -15,12 +15,12 @@ describeComponent(
       beforeEach(function() {
         this.set('make', 'ford');
         this.set('capture', (value)=> this.value = value);
-        this.set('onClick', (x, value)=> this.click = value);
-        this.set('onFocusOut', (x, value)=> this.focusOut = value);
-        this.set('onBlur', (x, value)=> this.blur = value);
+        this.set('onClick', (value)=> this.click = value);
+        this.set('onFocusOut', (value)=> this.focusOut = value);
+        this.set('onBlur', (value)=> this.blur = value);
 
         this.render(hbs`
-          {{#x-select value=make one-way=true action=capture onclick=onClick onfocusout=onFocusOut onblur=onBlur}}
+          {{#x-select value=make one-way=true action=capture on-click=onClick on-focus-out=onFocusOut on-blur=onBlur}}
             {{#x-option value="ford"}}Ford{{/x-option}}
             {{#x-option value="chevy"}}Chevy{{/x-option}}
             {{#x-option value="dodge" class="spec-dodge-option"}}Dodge{{/x-option}}