Composition

components.product-selector\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

const Products = [
  {
    name: 'learning',
    versions: [
      { tag: '1.0.0', deprecated: true },
      { tag: '1.1.0', deprecated: false },
      { tag: '2.1.0', deprecated: false },
      { tag: '3.1.0', deprecated: true },
      { tag: '3.1.1', deprecated: false }
    ]
  },
  {
    name: 'publishing',
    versions: [
      { tag: '1.0.0', deprecated: true },
      { tag: '1.1.0', deprecated: false },
      { tag: '1.2.0', deprecated: true },
      { tag: '1.2.1', deprecated: false },
      { tag: '1.3.0', deprecated: false }
    ]
  }
]

export default class extends Component {
  @tracked
  products = ['learning', 'publishing']
  
  @action
  selectProduct(product) {
    this.args.updateProduct(Products.find(p => p.name === product));
  }
}

components.version-manager\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {
  @tracked
  selectedProduct = null;

  @tracked
  selectedVersions = null;
  _selectedVersionsByProduct = {};

  @action
  updateProduct(product) {
    this.selectedProduct = product;
    this.selectedVersions = this._selectedVersionsByProduct[product.name] = this._selectedVersionsByProduct[product.name] || [];
  }

  @action selectVersion(versionName) {
    let version = this.selectedProduct.versions.find(v => v.tag === versionName);
    this.selectedVersions.pushObject(version); 
  }

  @action removeVersion(version) {
    this.selectedVersions.removeObject(version);
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

helpers.filter\.js

import { helper } from '@ember/component/helper';
import { get } from '@ember/object';

export default helper(function filter([arr, prop, value]) {
  return arr.filter(v => get(v, prop) === value);
});

helpers.map\.js

import { helper } from '@ember/component/helper';
import { get } from '@ember/object';

export default helper(function filter([arr, prop]) {
  return arr.map(v => get(v, prop));
});

templates.application\.hbs

<h1>Version Manager</h1>

<VersionManager />
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.product-selector\.hbs

{{yield this.products this.selectProduct}}

templates.components.select\.hbs

<select {{on "change" (action @updateSelection value="target.value")}}>
  <option disabled selected value> -- select an option -- </option>
{{#each @values as |opt|}}
  <option value={{opt}}>
    {{yield opt}}
  </option>
{{/each}}
</select>

templates.components.version-manager\.hbs

<ProductSelector @updateProduct={{this.updateProduct}} as |products selectProduct|>
  Product 
  <Select
    @values={{products}} 
    @updateSelection={{selectProduct}}
    as |option|>{{option}}</Select>
</ProductSelector>

<br>

{{#if this.selectedProduct}}
  {{#let (map (filter this.selectedProduct.versions 'deprecated' false) 'tag') as |availableVersions|}}
  Version
  <Select
    @values={{availableVersions}}
    @updateSelection={{selectVersion}}
    as |version|>{{version}}</Select>
  {{/let}}
  
  Selected Versions:
  <ol>
  {{#each this.selectedVersions as |version|}}
    <li>{{version.tag}} <button {{on "click" (fn this.removeVersion version)}}>X</button></li>
  {{/each}}
  </ol>
{{else}}
  You must select a product before you can select a version.
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}