wip: AuSelect component

addon/components/au-select.hbs

@@ -0,0 +1,15 @@
+<select {{on "change" this.handleSelectionChange}} ...attributes>
+  {{#if @placeholder}}
+    {{!
+      TODO this probably needs to be influenced by the `@allowClear` argument as well.
+      If that is false this first option should not be visible, or disabled if the placeholder is set.
+    }}
+    <option value={{this.CLEAR_VALUE}}>{{@placeholder}}</option>
+  {{/if}}
+  {{#each @options as |optionValue index|}}
+    {{!-- TODO: add option grouping support --}}
+    <option value={{index}} selected={{eq optionValue @selected}}>
+      {{~yield optionValue~}}
+    </option>
+  {{/each}}
+</select>

addon/components/au-select.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+const CLEAR_VALUE = 'CLEAR';
+const EMPTY = null;
+
+export default class AuSelectComponent extends Component {
+  CLEAR_VALUE = CLEAR_VALUE;
+
+  @action
+  handleSelectionChange(event) {
+    let optionIndexOrClear = event.target.value;
+    let selectedOption = EMPTY;
+
+    if (optionIndexOrClear !== CLEAR_VALUE) {
+      selectedOption = this.args.options[optionIndexOrClear];
+    }
+
+    this.args.onChange?.(selectedOption);
+  }
+}

app/components/au-select.js

@@ -0,0 +1 @@
+export { default } from '@appuniversum/ember-appuniversum/components/au-select';

tests/dummy/app/components/sidebar.hbs

@@ -91,6 +91,11 @@
                 Form: Checkbox
               </AuNavigationLink>
             </li>
+            <li class="au-c-list-navigation__item">
+              <AuNavigationLink @route="docs.atoms.au-form-select">
+                Form: Select
+              </AuNavigationLink>
+            </li>
             <li class="au-c-list-navigation__item">
               <AuNavigationLink @route="docs.atoms.ember-power-select">
                 Form: ember power select (draft)

tests/dummy/app/controllers/docs/atoms/au-form-select.js

@@ -0,0 +1,14 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Controller {
+  @tracked selectedProvince = null;
+
+  provinces = [
+    { label: 'Antwerpen' },
+    { label: 'Limburg' },
+    { label: 'Oost-vlaanderen' },
+    { label: 'Vlaams-Brabant' },
+    { label: 'West-Vlaanderen' },
+  ];
+}

tests/dummy/app/router.js

@@ -29,6 +29,7 @@ Router.map(function() {
       this.route('au-form-textarea');
       this.route('au-form-radio');
       this.route('au-form-checkbox');
+      this.route('au-form-select');
       this.route('au-link');
       this.route('au-loader');
       this.route("au-navigation-link");

tests/dummy/app/templates/docs/atoms/au-form-select.md

@@ -0,0 +1,35 @@
+# Select
+
+---
+
+## Single select
+
+{{#docs-demo as |demo|}}
+  {{#demo.example name='au-form-select.hbs'}}
+    <AuLabel for="au-select-province">Provincie</AuLabel>
+    <AuSelect
+      @placeholder="Kies een provincie"
+      @options={{this.provinces}}
+      @selected={{this.selectedProvince}}
+      @onChange={{fn (mut this.selectedProvince)}} 
+      id="au-select-province"
+      as |province|
+    >
+      {{province.label}}
+    </AuSelect>
+    <br>
+    Selected province: {{this.selectedProvince.label}}
+  {{/demo.example}}
+  {{demo.snippet 'au-form-select.hbs'}}
+{{/docs-demo}}
+
+## Arguments
+
+| Argument      | Description | Type | Default value |
+| ------------- | ----------- | ---- | ------------- |
+| `@selected` | The selected option | `string` | - |
+| `@options`| List of options that can be selected | 'integer' | 0 |
+| `@onChange`| Gets called when the user selects an option with that option as the argument | any | - |
+| `@placeholder` | The text that will be shown in the empty option  | `string` | - |
+
+

tests/integration/components/au-select-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | au-select', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<AuSelect />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <AuSelect>
+        template block text
+      </AuSelect>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});