Radio-set component

components.my-tab.js

import Ember from 'ember';

export default Ember.Component.extend({
  isActive: false,
  
  click() {
    if (this.get('isActive')) {
      console.log('clicked');
    }
  }
});

components.radio-set.js

import Ember from 'ember';

const RadioSetComponent = Ember.Component.extend({
  
  /**
   * The active item in the radio-set.
   */
  activeItem: null,
  
  /**
   * A provided function called when an item is selected.
   */
  selectItem() {},
  
  /**
   * An optional array of item values to bind to element selection.
   */
  items: null,
  
  /**
   * Whether to clear the active item when it is reselected.
   */
  allowDeselect: false,
  
  /**
   * Overridable CSS class to apply to the active item's element.
   */
  activeClass: 'radio-set--active',
  
  /**
   * Intercept click event, determine whether it was a radio item and call selectItem().
   */
  click(event) {
    const $tab = Ember.$(event.target).closest('[data-value]');
    const activeItem = this.get('activeItem');
    const allowDeselect = this.get('allowDeselect');
    let value = $tab.attr('data-value');
    
    if (allowDeselect && value === activeItem) {
      value = null;
    }
    this.selectItem(value);
  },
  
  /**
   * Decorate the active radio item when the radio-set renders.
   */
  didRender() {
    const activeItem = this.get('activeItem');
    const activeClass = this.get('activeClass');
    this.$().children().removeClass(activeClass)
      .filter(`[data-value="${activeItem}"]`).addClass(activeClass);
  }
});

RadioSetComponent.reopenClass({
	positionalParams : ['activeItem', 'selectItem']
});

export default RadioSetComponent;

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  activeItem: null,
  activeItem2: null,
  activeItem3: null,
  
  selectItem(item) {
  	this.set('activeItem', item);
  },

  selectItem2(item) {
  	this.set('activeItem2', item);
  },
  
  selectItem3(item) {
  	this.set('activeItem3', item);
  }
});

radio-set.template.hbs

{{yield}}

styles.app.css

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

.tabs {
 display: flex; 
}

.tab {
  background: #eee;
  margin: 1px;
  padding: 5px 10px;
  cursor: pointer;
}

.radio-set--active {
  background: #5fb5ff; 
}

.tab--weird {
  border-radius: 50%;
  margin-left: 30px;
  width: 10px;
  text-align: center;
}

templates.application.hbs

<h1>Radio-set</h1>
<br>

<h3>Unique mark up for every radio element</h3>
{{#radio-set activeItem (action selectItem) class="tabs"}}
	<div data-value="val1" class="tab">Item 1</div>
  <div data-value="val2" class="tab">Item 2</div>
  <div data-value="val3" class="tab">Item 3</div>
  <div data-value="val4" class="tab tab--weird">i</div>
{{/radio-set}}
<br>

<h3>allowDeselect=true</h3>
{{#radio-set activeItem2 (action selectItem2) class="tabs" allowDeselect=true}}
	<div data-value="val1" class="tab">Item 1</div>
  <div data-value="val2" class="tab">Item 2</div>
  <div data-value="val3" class="tab">Item 3</div>
{{/radio-set}}
<br>

<h3>Wrap components</h3>
{{#radio-set activeItem3 (action selectItem3) class="tabs" items=['val1', 'val2', 'val3']}}
	{{#my-tab class="tab"}}Item 1{{/my-tab}}
  {{#my-tab class="tab"}}Item 2{{/my-tab}}
  {{#my-tab class="tab"}}Item 3{{/my-tab}}
{{/radio-set}}

twiddle.json

{
  "version": "0.11.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.11.0",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.11.0",
    "ember-testing": "2.11.0"
  },
  "addons": {}
}