allow paper item to proxy radios

addon/components/paper-radio-base.js

@@ -0,0 +1,59 @@
+/**
+ * @module ember-paper
+ */
+import Ember from 'ember';
+import layout from '../templates/components/paper-radio-base';
+import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
+import RippleMixin from 'ember-paper/mixins/ripple-mixin';
+import ColorMixin from 'ember-paper/mixins/color-mixin';
+
+const { Component, computed, assert } = Ember;
+
+/**
+ * @class PaperRadio
+ * @extends Ember.Component
+ * @uses FocusableMixin
+ * @uses ColorMixin
+ * @uses RippleMixin
+ */
+export default Component.extend(FocusableMixin, RippleMixin, ColorMixin, {
+  layout,
+  tagName: 'md-radio-button',
+  classNames: ['md-default-theme'],
+  classNameBindings: ['checked:md-checked'],
+
+  tabindex: null,
+
+  toggle: false,
+
+  /* Ripple Overrides */
+  rippleContainerSelector: '.md-container',
+  center: true,
+  dimBackground: false,
+  fitRipple: true,
+
+  /* FocusableMixin Overrides */
+  focusOnlyOnKey: true,
+
+  // Lifecycle hooks
+  init() {
+    assert('{{paper-radio}} requires an `onChange` action or null for no action.', this.get('onChange') !== undefined);
+    this._super(...arguments);
+  },
+
+  checked: computed('groupValue', 'value', function() {
+    return this.get('groupValue') === this.get('value');
+  }),
+
+  click() {
+    if (!this.get('disabled')) {
+      if (this.get('toggle')) {
+        this.sendAction('onChange', this.get('checked') ? null : this.get('value'));
+      } else {
+        this.sendAction('onChange', this.get('value'));
+      }
+    }
+    // Prevent bubbling, if specified. If undefined, the event will bubble.
+    return this.get('bubbles');
+  }
+});

addon/components/paper-radio-proxiable.js

@@ -0,0 +1,16 @@
+/**
+ * @module ember-paper
+ */
+import PaperRadioBaseComponent from './paper-radio-base';
+import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
+
+/**
+ * @class PaperRadio
+ * @extends PaperRadioBaseComponent
+ * @uses ProxiableMixin
+ */
+export default PaperRadioBaseComponent.extend(ProxiableMixin, {
+  processProxy() {
+    this.click();
+  }
+});

addon/components/paper-radio.js

@@ -1,64 +1,14 @@
 /**
  * @module ember-paper
  */
-import Ember from 'ember';
-import layout from '../templates/components/paper-radio';
-import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
-import RippleMixin from 'ember-paper/mixins/ripple-mixin';
-import ColorMixin from 'ember-paper/mixins/color-mixin';
+import PaperRadioBaseComponent from './paper-radio-base';
 import { ChildMixin } from 'ember-composability-tools';
 
-const { Component, computed, assert } = Ember;
-
 /**
  * @class PaperRadio
- * @extends Ember.Component
- * @uses FocusableMixin
- * @uses ColorMixin
- * @uses RippleMixin
+ * @extends PaperRadioBaseComponent
  * @uses ChildMixin
  */
-export default Component.extend(FocusableMixin, RippleMixin, ColorMixin, ChildMixin, {
-  layout,
-  tagName: 'md-radio-button',
-  classNames: ['md-default-theme'],
-  classNameBindings: ['checked:md-checked'],
-
-  tabindex: null,
-
-  toggle: false,
-
-  /* Ripple Overrides */
-  rippleContainerSelector: '.md-container',
-  center: true,
-  dimBackground: false,
-  fitRipple: true,
-
-  /* FocusableMixin Overrides */
-  focusOnlyOnKey: true,
-
-  /* ChildMixin Overrides */
-  shouldRegister: false,
-
-  // Lifecycle hooks
-  init() {
-    assert('{{paper-radio}} requires an `onChange` action or null for no action.', this.get('onChange') !== undefined);
-    this._super(...arguments);
-  },
-
-  checked: computed('groupValue', 'value', function() {
-    return this.get('groupValue') === this.get('value');
-  }),
-
-  click() {
-    if (!this.get('disabled')) {
-      if (this.get('toggle')) {
-        this.sendAction('onChange', this.get('checked') ? null : this.get('value'));
-      } else {
-        this.sendAction('onChange', this.get('value'));
-      }
-    }
-    // Prevent bubbling, if specified. If undefined, the event will bubble.
-    return this.get('bubbles');
-  }
+export default PaperRadioBaseComponent.extend(ChildMixin, {
+  shouldRegister: false
 });

addon/templates/components/paper-item.hbs

@@ -2,6 +2,7 @@
   checkbox=(component "paper-checkbox" parentComponent=this bubbles=false shouldRegister=true)
   button=(component "paper-button" parentComponent=this bubbles=false shouldRegister=true skipProxy=true)
   switch=(component "paper-switch" parentComponent=this bubbles=false shouldRegister=true)
+  radio=(component "paper-radio-proxiable" parentComponent=this bubbles=false shouldRegister=true)
 ) as |controls|}}
 
   {{#if hasPrimaryAction}}

app/components/paper-radio-group.js

@@ -1,3 +1 @@
-import PaperRadioGroup from 'ember-paper/components/paper-radio-group';
-
-export default PaperRadioGroup;
+export { default } from 'ember-paper/components/paper-radio-group';

app/components/paper-radio-proxiable.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-radio-proxiable';

app/components/paper-radio.js

@@ -1,3 +1 @@
-import PaperRadio from 'ember-paper/components/paper-radio';
-
-export default PaperRadio;
+export { default } from 'ember-paper/components/paper-radio';

tests/dummy/app/templates/demo/list.hbs

@@ -173,6 +173,18 @@
           {{/paper-item}}
         {{/each}}
 
+        {{#paper-subheader}}Single Action Radios{{/paper-subheader}}
+        {{#each toppings as |topping|}}
+          {{#paper-item as |controls|}}
+            <p>{{topping.name}}</p>
+            {{controls.radio
+              groupValue=radioSelectedTopping
+              value=topping
+              secondary=true
+              onChange=(action (mut radioSelectedTopping))}}
+          {{/paper-item}}
+        {{/each}}
+
       {{/paper-list}}
       {{! END-SNIPPET }}
     {{/paper-content}}

tests/integration/components/paper-item-test.js

@@ -60,6 +60,38 @@ test('single action checkboxes should react to item clicks', function(assert) {
   });
 });
 
+test('single action radios should react to item clicks', function(assert) {
+  assert.expect(2);
+
+  this.set('selectedValue', null);
+  this.render(hbs`
+    {{#paper-list}}
+      {{#paper-item as |controls|}}
+        <p>Checkbox 1</p>
+        {{controls.radio
+          groupValue=selectedValue
+          value="some value 1"
+          onChange=(action (mut selectedValue))}}
+      {{/paper-item}}
+      {{#paper-item as |controls|}}
+        <p>Checkbox 2</p>
+        {{controls.radio
+          groupValue=selectedValue
+          value="some value 2"
+          onChange=(action (mut selectedValue))}}
+      {{/paper-item}}
+    {{/paper-list}}
+  `);
+  return wait().then(() => {
+    let firstItem = this.$('.md-list-item-inner').eq(0);
+    firstItem.click();
+    assert.equal(this.get('selectedValue'), 'some value 1');
+    let secondItem = this.$('.md-list-item-inner').eq(1);
+    secondItem.click();
+    assert.equal(this.get('selectedValue'), 'some value 2');
+  });
+});
+
 test('Clickable Items with Secondary Controls must not bubble main item action', function(assert) {
   // the switch test is tricky as it involves passing hammer
   // tap event.