radio input multi select

components.multi-select.js

import Ember from 'ember';
import { computed } from '@ember/object';
import { set } from '@ember/object';

export default Ember.Component.extend({
  valueForAll: '',
  // isAllSelected: computed('items.[]', {
  isAllSelected: computed('items.@each.selceted', {
  	get() {
      return this.get('items').every(item => item.selceted)
    },
    
    set(_, isAllSelected) {
      this.get('items').forEach(item => set(item, 'selceted', isAllSelected))
      return isAllSelected
    }
  }),
  
  ll: computed('items.[]', function() {
    return this.get('items.length') + 1
  }),
  
  actions: {
  	onSelectSingleOption() {},
    onSelectAllOption() {},
    addOne() {
    	this.items.pushObject({ name: `No. ${this.items.length}` })
    },
    replaceOne() {
      this.items.replace(1, 1, [{ name: 'set-bar-2-replaced' }])
    }
  }
});

components.post-action\.js

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      //toggling the text
      toggleBody: function (event) {
        console.log('post action:', event);
        this.toggleProperty('isShowing');
      }
   }
});

controllers.application.js

import Ember from 'ember';
import { get } from '@ember/object';

let list = [{
	name: 'set-bar-1',
  value: 1
}, {
	name: 'set-bar-2',
  value: 2
}]
let defaultBar = 1

let ST_ALL = 'ALL'
let ST_VOID = 'VOID'
let ST_Y = true
let ST_N = false

// let { lastObject: mmax } = []
console.log(get([1,2], 'lastObject'))

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  foo: '<button>click</button>',
  bar: defaultBar,
  qux: { a: 1, b: 2 },
  bl: '',
  list,
  
  actions: {
  	change(v) {
      this.set('bl', JSON.parse(v))
    },
    
    keyPress(event) {
      // console.log(event.keyCode, event, code)
      console.log(event)
    }
  }
});

helpers.eq.js

import { helper } from '@ember/component/helper'; 
 
/** 
Helper, which compares two values strictly. Returns `true` if the values are the same, `false` 
otherwise. 
 
@param value1 {Any} the first value 
@param value2 {Any} the second value 
@return `true` if the values are equal, `false` otherwise. 
*/ 
export function eq([value1, value2] /* , hash*/) { 
  // console.log(value1, value2)
  return value1 === value2; 
} 
 
export default helper(eq); 

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{{foo}}}

{{get list "0.name"}}

{{input value=notexist}}{{notexist}}

<button {{action (mut (get qux 'b')) 1}}>change</button>
<br>
{{#each list as |item|}}
	<label>
  	{{item.name}}
    {{#let (eq item.value bar) (eq item list.lastObject) as |checked lastOne|}}
    	{{lastOne}}
      <input
      	type="radio"
        name="bar"
        onchange={{action (mut bar) item.value}}
        checked={{checked}}
      >
    {{/let}}
  </label>
  <br>
{{/each}}
<br>
bar: {{bar}}
<br>
qux.a: {{qux.a}}
<br>
qux.b: {{qux.b}}

<br>
<br>

<select onchange={{action "change" value="target.value"}}>
  <option value="" selected>all</option>
  <option value={{true}}>true</option>
  <option value={{false}}>false</option>
</select>
<br>
<label>bl {{input type="checkbox" change=(action (mut bl) value="target.checked") checked=bl}}</label>
<br>
{{bl}} {{eq bl true}}

<br>
<br>
{{multi-select items=list}}

{{outlet}}
<br>
<br>
<br>
<br>
<ul onkeyPress={{action "keyPress" allowedKeys="shift"}}>
  <li>11{{input type="checkbox"}}</li>
  <li>22{{input type="checkbox"}}</li>
  <li>33{{input type="checkbox"}}</li>
  <li>44{{input type="checkbox"}}</li>
</ul>

{{post-action title = "Click Me"}}

templates.components.multi-select.hbs

<button {{action "addOne"}}>Add</button> {{ll}} <button {{action "replaceOne"}}>Replace</button>
<br>
<label>
  All
  {{input type="checkbox" change=(action (mut isAllSelected) value="target.checked") checked=isAllSelected}}
</label>
<br>
{{#each items as |item|}}
  <label>
    {{item.name}}
    {{input type="checkbox" change=(action (mut item.selceted) value="target.checked") checked=item.selceted}}
    {{item.selceted}}
  </label>
  <br>
{{/each}}

templates.components.post-action\.hbs

<button onclick={{action "toggleBody" allowedKeys="alt" value="target"}}>{{title}}</button>
{{#if isShowing}}
<h2>Welcome to TutorialsPoint</h2>
{{/if}}
{{outlet}}

twiddle.json

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