Property dialog - POC

components.tab-content.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  selected_comp_name: ''
  
});

components.tab-five.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.tab-four.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.tab-one.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  willDestroyElement(){
  	alert( 'Component destroyed!' );
  }
  
});

components.tab-three.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.tab-title.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  title: '',
  tab_index: '',
  custom_class:'',
  custom_event: 'mouseMove'
  
});

components.tab-two.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.ui-tabs.js

import Ember from 'ember';

export default Ember.Component.extend({
    
  tabs_and_content: [],
  active_tab_index: 0,
  active_obj: '',
  
  didReceiveAttrs(){ 
   
    var tab_index = this.get( 'active_tab_index' ),
    		total_tabs = Object.keys( this.get( 'tabs_and_content' ) ).length;
       
    tab_index =  total_tabs >= tab_index && tab_index > 0 ? tab_index : 1 ;
    
    this.send( 'changeTab', tab_index, tab_index - 1 );
    
  },
  
  actions:{
  
  	changeTab( tab, index ){
      
      var tabs_and_content = this.get( 'tabs_and_content' ); 
      tab = typeof( tab ) === 'string' ? tab : tab - 1 ;

    	this.set( 'active_obj', typeof( tab ) === 'string' ? tabs_and_content.filterBy( 'tab_name', tab )[0] : tabs_and_content[ tab ] );
     
      this.set( 'active_tab_index', index ); 
    }    
  }
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  tabs_and_content: [ 
  
    { 'tab_name': 'Smileys', 'comp_name': 'tab-one', 'custom_class': '😂' }, 
    { 'tab_name': 'Activity', 'comp_name': 'tab-two', 'custom_class': '⚽' },
    { 'tab_name': 'Flags', 'comp_name': 'tab-three', 'custom_class': '🎌' },
    { 'tab_name': 'Travel', 'comp_name': 'tab-four', 'custom_class': '🌇 ' },
    { 'tab_name': 'Animals', 'comp_name': 'tab-five', 'custom_class': '🐻' }
  
  ]
  
});

helpers.eq.js

import Ember from 'ember';

const eq = (params) => params[0] === params[1];
export default Ember.Helper.helper(eq);

styles.app.css

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

.wrapper{
	border: solid 1px;
   padding: 10px;
}

.title{
	  display: inline-block;
    border: solid 1px;
  	cursor: pointer;
  	margin-bottom: 5px;
  	margin-top: 5px;
}

.title div{
	padding: 5px 10px;
}

.title:hover{
	color: green;
  border: solid 2px;
  margin-right: -2px;
  margin-bottom: -2px;
  margin-top: -2px;
}

.content{
  	border: solid 1px;
    padding: 25px;
    text-align: center;
    margin: 25px;
}

.active{
	color: green;
  background: #DAF4EB;
}

templates.application.hbs

<h1>Ember Tab's Addon </h1>
<br>
{{outlet}}
<br>

 <!--  active_tab_index = default_tab  -->

{{ui-tabs tabs_and_content=tabs_and_content active_tab_index=5 class='wrapper'}}

templates.components.tab-content.hbs

{{component selected_comp_name}}

templates.components.tab-five.hbs

{{yield}}
🙈 🙉 🙊 💦 💨 🐵 🐒 🐶 🐕 🐩 🐺 🐱 🐈 🦁 🐯 🐅 🐆 🐴 🐎 🦄 🐮 🐂 🐃 🐄  🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐇 🐿 🐻 🐨 🐼 🦃 🐔 🐓 🐣 🐤 🐥 🐦 🐧 🕊  🐇 🐿 🐻 🐨 🐼 🦃  🐒 

templates.components.tab-four.hbs

{{yield}}
🗻 🏕 🏖 🏜 🏝 🏞 🏟 🏛 🏗 🏘 🏙 🏚 🏠 🏡 🏢 🏣 🏤 🏥 🏦 🏨 🏩 🏪 🏫 🏬 🏭 🏯 🏰 💒 🗼 🗽 ⛪ 🕌 🕍 ⛩ 🕋 ⛲ 🌁 🌃 🌆 🌇 🗽 ⛪ 🕌 🕍 ⛩ 🕋 ⛲ 🌁 🌃 🏚 🏠 🏡 🏢 🏣

templates.components.tab-one.hbs

😀 😁 😂 😃 😄 😅 😆 😉 😊 😋 😎 😍 😘 😗 😙 😚 🙂 🤗 😇 🤔 😐 😑 😶 🙄 😏 😣 😥 😮 🤐 😯 😪 😫 😴 😌 😛 😜 😝 😒 😓 😔 😛 😜 😝 😒 😒 😓 😔 😁 😆 😉 😊 😋 😎 😘 

{{yield}}

templates.components.tab-three.hbs

{{yield}}
🇮🇳 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇵 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇬 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇦 🇪🇨 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇨🇵 🇨🇷 🇨🇺 🇨🇻 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇵 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇮🇳 🇨🇬 🇨🇭

templates.components.tab-title.hbs

<div {{action 'changeTab' title tab_index on='click'}}>
{{custom_class}}
	{{title}}
 </div> 
 {{yield}}  

templates.components.tab-two.hbs

{{yield}}
🛀 🎗 🎟 🎫 🎖 🏆 🏅 ⚽ ⚾ 🏀 🏐 🏈 🏉 🎾 🎱 🎳 🏏 🏑 🏒 🏓 🏸 ⛳ 🏌 ⛸ 🎣 🎽 🎿 ⛷ 🏂 🏄 🏇 🏊 ⛹ 🏋 🚴 🚵 🎯 🎮 🎲 🎷  🏄 🏇 🏊 ⛹ 🏋 🎗 🎟 🎫 🎖 🏆 🏅  🏒 🏓 🏸

templates.components.ui-tabs.hbs

{{#each tabs_and_content as | tab_obj index |}}

	{{#if (eq index active_tab_index) }}
	
  		{{tab-title title=tab_obj.tab_name class='title active' custom_class=tab_obj.custom_class}} 
    
	{{else}}
  
    		{{tab-title title=tab_obj.tab_name class='title' custom_class=tab_obj.custom_class tab_index=index}}  

	{{/if}}

{{/each}}

<hr> 

{{tab-content selected_comp_name=active_obj.comp_name class='content'}} 

twiddle.json

{
  "version": "0.10.5",
  "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.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}