Danchadwick wip buff up

CHANGELOG.md

@@ -1,6 +1,20 @@
 # Ember Paper Changelog
 
 ### 1.0.0
+
+#### Migrating from releases prior to 1.0
+
+Version 1.0 introduces many API changes relative to previous releases. In addition to the specific changelog listing below, the follow general changes have been made. Note that during the development of 1.0, the `wip/v1.0.0` branch reflects the most up-to-date version, with a mixture of updated and to-be-updated components.
+
+Contributions and pull requests are always welcome. Contributors may often be found on the slack.com #e-paper channel. Building the dummy application by installing `ember-paper` as if it were an application will provide you an up-to-date interactive demo, templates, and code samples.
+
+- Attributes are now `camelCased` rather than `kebob-cased`.
+- Components which accept user input, such as `paper-input`, `paper-checkbox`, and `paper-select` now receive their input via the one-way `value` attribute and notify of a changed value by the `onChange` actions.
+- When provided by the API, `onChange` actions are required and throw an assertion if not provided.
+- Actions maybe be specified by a string action name (`onChange="updateValue"`) or an action closure (`onChange=(action (mut "myValue"))`). If you need to specify a target or additional parameter, you must use an action closure.
+- Many attributes have been renamed for clarity and consistency. See the specific changes below.
+
+#### 1.0.0 specific changes
 - [1a9b641](https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649) paper-progress-circular now uses `diameter` instead of `md-diameter`
 - [cf2a8da](https://github.com/miguelcobain/ember-paper/commit/cf2a8da350ea805e11eef36914ae76213b4c9f24) paper-progress-linear now uses `bufferValue` instead of `buffer-value`
 - [#285](https://github.com/miguelcobain/ember-paper/pull/285) paper-checkbox now uses *actions up, data down*. `onChange` action is mandatory.
@@ -19,6 +33,16 @@
 - [#324](https://github.com/miguelcobain/ember-paper/pull/324)
   - paper-button now uses `iconButton` instead of `icon-button`
   - paper-button now uses the action `onClick` instead of `action`
+- [#334](https://github.com/miguelcobain/ember-paper/pull/334)
+  - paper-menu-item now uses action `onClick` instead of `action`.
+  - paper-item now uses action `onClick` instead of `action`.
+  - paper-menu now uses `value` instead of `model`.
+  - paper-checkbox now uses `value` instead of `checked`.
+  - paper-switch now uses `value` instead of `checked`.
+  - paper-select now uses required an `onchange` action.
+  - paper-select now uses attribute `itemLabelCallback` instead of `item-label-callback`.
+  - paper-select now uses attribute `getItems` instead of `on-open`.
+  - paper-menu now uses attribute `isOpen` instead of `is-open`.
 
 ### 0.2.11
 

CONTRIBUTING.md

@@ -11,8 +11,8 @@ Many ember-paper contributors hang out on the [ember-paper channel on slack](htt
 * **jscs.** Before submitting a pull request,
 check for coding style issues with  `jscs -c .jscsrc app addon`.
 
-* **Actions.** Require action closures rather than strings representing action names.
-`{{some-component someAction=(action "myAction")}}`, not `{{some-component someAction="myAction"}}`.
+* **Actions.** Accept action closures rather than strings representing action names.
+`{{some-component someAction=(action "myAction")}}`, not `{{some-component someAction="myAction" param="the stuff" target=someTarget}}`. Invoke the action with `this.sendAction('onWhatever');`. There is no need to test for the presence of `onWhatever` as `sendAction` handles that situation.
 
 * **Encapsulation.** When communicating with a private ember-paper component, bind as many properties as are needed.
 When communicating between two public ember components, use `nearestOfType` in a computed property to find the outer component (for pre 2.3 compatibility), and override it when yielding a contextual component.

addon/components/paper-button.js

@@ -4,11 +4,7 @@ import RippleMixin from '../mixins/ripple-mixin';
 import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
-const {
-  assert,
-  computed,
-  isPresent
-} = Ember;
+const { computed } = Ember;
 
 export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   attributeBindings: ['type'],

addon/components/paper-checkbox.js

@@ -8,7 +8,7 @@ const { inject, assert } = Ember;
 export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   tagName: 'md-checkbox',
   classNames: ['md-checkbox', 'md-default-theme'],
-  classNameBindings: ['checked:md-checked'],
+  classNameBindings: ['value:md-checked'],
 
   /* Ripple Overrides */
   rippleContainerSelector: '.md-container',
@@ -21,16 +21,16 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
 
   constants: inject.service(),
 
-  checked: false,
+  value: false,
 
   didInitAttrs() {
     this._super(...arguments);
-    assert('{{paper-checkbox}} requires an `onChange` function', !!this.get('onChange'));
+    assert('{{paper-checkbox}} requires an `onChange` action', !!this.get('onChange'));
   },
 
   click() {
     if (!this.get('disabled')) {
-      this.sendAction('onChange', !this.get('checked'));
+      this.sendAction('onChange', !this.get('value'));
     }
   },
 
@@ -43,6 +43,6 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   },
 
   processProxy() {
-    this.sendAction('onChange', !this.get('checked'));
+    this.sendAction('onChange', !this.get('value'));
   }
 });

addon/components/paper-dialog.js

@@ -1,11 +1,6 @@
 import Ember from 'ember';
 
-const {
-  Component,
-  computed,
-  inject: { service },
-  isEmpty
-} = Ember;
+const { $, Component, computed, inject } = Ember;
 
 export default Component.extend({
   tagName: '',
@@ -43,7 +38,7 @@ export default Component.extend({
     }
   }),
 
-  constants: service(),
+  constants: inject.service(),
 
   didInsertElement() {
     if (this.get('escapeToClose')) {

addon/components/paper-input.js

@@ -9,7 +9,7 @@ import maxValidator from 'ember-paper/validators/max';
 import minlengthValidator from 'ember-paper/validators/minlength';
 import maxlengthValidator from 'ember-paper/validators/maxlength';
 
-const { $, computed, isPresent, isArray, isEmpty, isBlank, isNone, Logger, A, getWithDefault, run, assert, get } = Ember;
+const { $, computed, isArray, isEmpty, Logger, A, run, assert, get } = Ember;
 
 export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   tagName: 'md-input-container',
@@ -119,7 +119,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   // Lifecycle hooks
   didReceiveAttrs() {
     this._super(...arguments);
-    assert('{{paper-input}} requires an `onChange` function', !!this.get('onChange'));
+    assert('{{paper-input}} and {{paper-select}} require an `onChange` action.', !!this.get('onChange'));
   },
 
   didInsertElement() {

addon/components/paper-item.js

@@ -19,9 +19,9 @@ export default Ember.Component.extend(RippleMixin, ProxyMixin, {
 
   hasProxiedComponent: Ember.computed.bool('proxiedComponents.length'),
 
-  hasSecondaryAction: Ember.computed('secondaryItem', 'action', function() {
+  hasSecondaryAction: Ember.computed('secondaryItem', 'onClick', function() {
     let secondaryItem = this.get('secondaryItem');
-    return secondaryItem && (secondaryItem.action || (this.get('action') && this.isProxiedComponent(secondaryItem)));
+    return secondaryItem && (secondaryItem.action || (this.get('onClick') && this.isProxiedComponent(secondaryItem)));
   }),
 
   secondaryItem: Ember.computed('proxiedComponents.[]', function() {
@@ -31,8 +31,8 @@ export default Ember.Component.extend(RippleMixin, ProxyMixin, {
     });
   }),
 
-  shouldBeClickable: Ember.computed('proxiedComponents.length', 'action', function() {
-    return this.get('proxiedComponents.length') || this.get('action');
+  shouldBeClickable: Ember.computed('proxiedComponents.length', 'onClick', function() {
+    return this.get('proxiedComponents.length') || this.get('onClick');
   }),
 
   didInsertElement() {
@@ -51,7 +51,7 @@ export default Ember.Component.extend(RippleMixin, ProxyMixin, {
 
     // Allow proxied component to propagate ripple hammer event
     this.get('proxiedComponents').forEach(function(component) {
-      if (!component.get('action')) {
+      if (!component.get('onClick')) {
         component.set('propagateRipple', true);
       }
     });
@@ -107,7 +107,7 @@ export default Ember.Component.extend(RippleMixin, ProxyMixin, {
           component.processProxy();
         }
       });
-      this.sendAction('action', this.get('param'));
+      this.sendAction('onClick');
     }
   }
 

addon/components/paper-menu-abstract.js

@@ -1,17 +1,15 @@
 import Ember from 'ember';
 
-const { Component, computed: { alias }, inject: { service }, assert } = Ember;
+const { Component, inject, assert } = Ember;
 
 export default Component.extend({
-  constants: service(),
+  constants: inject.service(),
 
-  'is-open': false,
+  /* `isOpen` true when toggleMenu action is called, but only turns false when animation to hide the wrapper is done. */
+  isOpen: false,
 
-  /* this is true when toggleMenu action is called, but only turns false when animation to hide the wrapper is done. */
-  isOpen: alias('is-open'),
-
-  /* Supports a on-open that can return a promise, menu is not opened before this promise is resolved by the origin. */
-  onOpen: alias('on-open'),
+  /* Supports `getItems` that can return a promise, menu is not opened before this promise is resolved by the origin. */
+  getItems: null,
 
   /* async: is true if promise was not resolved. */
   isLoading: false,
@@ -21,8 +19,6 @@ export default Component.extend({
 
   preventMenuOpen: false,
 
-  itemLabelCallback: alias('item-label-callback'),
-
   setOpen(newState) {
     this.set('isOpen', newState);
     let action = this.get(newState ? 'onOpenMenu' : 'onCloseMenu');
@@ -42,11 +38,11 @@ export default Component.extend({
         if (this.get('preventMenuOpen')) {
           return;
         }
-        if (this.get('onOpen') && (!this.get('items') || !this.get('cache'))) {
+        if (this.get('getItems') && (!this.get('items') || !this.get('cache'))) {
           this.set('activeWrapper', null);
           this.set('isLoading', true);
           this.setOpen(true);
-          let promise = this.get('onOpen').call(this);
+          let promise = this.get('getItems').call(this);
           promise.then((data) => {
             this.set('items', data);
             this.set('isLoading', false);

addon/components/paper-menu-item.js

@@ -6,11 +6,9 @@ const { Component } = Ember;
 export default Component.extend({
   tagName: 'md-menu-item',
 
-  actions: {
-    action() {
-      this.nearestOfType(PaperMenuAbstract).send('toggleMenu');
-      this.sendAction('action', this.get('param'));
-    }
+  click(event) {
+    this.nearestOfType(PaperMenuAbstract).send('toggleMenu');
+    this.sendAction('onClick', event);
   }
 
 });

addon/components/paper-option.js

@@ -62,7 +62,7 @@ export default BaseFocusable.extend(RippleMixin, {
     this.get('menuAbstract').send('toggleMenu');
   },
 
-  selected: Ember.computed('menuAbstract.model', function() {
-    return this.get('menuAbstract').get('model') === this.get('value') ? 'selected' : null;
+  selected: Ember.computed('menuAbstract.value', function() {
+    return this.get('menuAbstract').get('value') === this.get('value') ? 'selected' : null;
   })
 });

addon/components/paper-radio-group.js

@@ -14,7 +14,7 @@ export default BaseFocusable.extend({
   // Lifecycle hooks
   didInitAttrs() {
     this._super(...arguments);
-    Ember.assert('{{paper-radio-group}} requires an `onChange` function', !!this.get('onChange'));
+    Ember.assert('{{paper-radio-group}} requires an `onChange` action', !!this.get('onChange'));
   },
 
   childRadios: computed(function() {

addon/components/paper-radio.js

@@ -25,7 +25,7 @@ export default BaseFocusable.extend(RippleMixin, ColorMixin, {
   // Lifecycle hooks
   didInitAttrs() {
     this._super(...arguments);
-    assert('{{paper-radio}} requires an `onChange` function', !!this.get('onChange'));
+    assert('{{paper-radio}} requires an `onChange` action', !!this.get('onChange'));
 
     if (this.get('parentGroup')) {
       this.get('parentGroup').register(this);

addon/components/paper-select-core.js

@@ -40,26 +40,26 @@ export default PaperMenuAbstract.extend({
     return !!this.get('disabled');
   }),
 
-  label: Ember.computed('model', 'itemLabelCallback', function() {
-    if (!this.get('model')) {
+  label: Ember.computed('value', 'itemLabelCallback', function() {
+    if (!this.get('value')) {
       return null;
     }
     if (this.get('itemLabelCallback')) {
-      return this.get('itemLabelCallback').call(this, this.get('model'));
+      return this.get('itemLabelCallback').call(this, this.get('value'));
     }
-    return this.get('model');
+    return this.get('value');
   }),
 
   click() {
     this.send('toggleMenu');
   },
 
   actions: {
-    selectOption(model) {
-      this.set('model', model);
+    selectOption(value) {
+      this.set('value', value);
     },
     deselectOption() {
-      this.set('model', null);
+      this.set('value', null);
     }
   },
 

addon/components/paper-select.js

@@ -1,9 +1,8 @@
 import Ember from 'ember';
 import PaperInput from './paper-input';
 
+let { computed } = Ember;
+
 export default PaperInput.extend({
-  label: Ember.computed.alias('placeholder'),
-  value: Ember.computed.alias('model'),
-  itemLabelCallback: Ember.computed.alias('item-label-callback'),
-  onOpen: Ember.computed.alias('on-open')
+  label: computed.alias('placeholder')
 });

addon/components/paper-switch.js

@@ -17,7 +17,7 @@ const {
 export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   tagName: 'md-switch',
   classNames: ['paper-switch', 'md-default-theme'],
-  classNameBindings: ['checked:md-checked', 'dragging:md-dragging'],
+  classNameBindings: ['value:md-checked', 'dragging:md-dragging'],
   toggle: true,
 
   /* Ripple Overrides */
@@ -26,7 +26,7 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   dimBackground: false,
   fitRipple: true,
 
-  checked: false,
+  value: false,
   disabled: false,
   dragging: false,
 
@@ -55,7 +55,7 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
 
   didInitAttrs() {
     this._super(...arguments);
-    assert('{{paper-switch}} requires an `onChange` function', !!this.get('onChange'));
+    assert('{{paper-switch}} requires an `onChange` action', !!this.get('onChange'));
   },
 
   willDestroyElement() {
@@ -110,20 +110,20 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
     if (!this.get('disabled')) {
       // Get the amount the switch has been dragged
       let percent = event.deltaX / this.get('switchWidth');
-      percent = this.get('checked') ? 1 + percent : percent;
+      percent = this.get('value') ? 1 + percent : percent;
       this.set('dragAmount', percent);
     }
   },
 
   _dragEnd(ev) {
     if (!this.get('disabled')) {
-      let checked = this.get('checked');
+      let value = this.get('value');
       let dragAmount = this.get('dragAmount');
 
       if ((!this.get('dragging')) ||
-           (checked && dragAmount < 0.5) ||
-           (!checked && dragAmount > 0.5)) {
-        this.sendAction('onChange', !checked);
+           (value && dragAmount < 0.5) ||
+           (!value && dragAmount > 0.5)) {
+        this.sendAction('onChange', !value);
       }
       this.set('dragging', false);
       this.set('dragAmount', null);
@@ -143,7 +143,7 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   },
 
   processProxy() {
-    this.sendAction('onChange', !this.get('checked'));
+    this.sendAction('onChange', !this.get('value'));
   }
 
 });

addon/mixins/translate3d-mixin.js

@@ -6,14 +6,13 @@ const {
   String: { htmlSafe },
   RSVP: { Promise },
   computed,
-  inject: { service },
+  inject,
   run,
-  K,
-  typeOf
+  K
 } = Ember;
 
 export default Mixin.create({
-  constants: service(),
+  constants: inject.service(),
 
   attributeBindings: ['translateStyle:style'],
   classNameBindings: ['transformIn:md-transition-in'],