Allow Objects as Values For Select Component

README.md

@@ -31,7 +31,7 @@ ember install ember-select-light
   }} />
 ```
 
-`value` and `label` will be the default object keys used unless `@valueKey="...` and/or `@displayKey="...` are used respectively, like so...
+The text`value` and `label` will be the default object keys used for the HTML `option` and innerText respectively unless `@valueKey="...` and/or `@displayKey="...` are used respectively, like so...
 
 ```handlebars
 <SelectLight

addon/components/select-light.hbs

@@ -8,22 +8,23 @@
   {{/if}}
 
   {{#if hasBlock}}
-    {{yield}}
+    {{yield (hash
+      option=(
+        component "select-light/option"
+        parent=this
+        valueKey=this.valueKey
+        displayKey=this.displayKey
+        selectedValue=@value
+      )
+    )}}
   {{else}}
-    {{#if this.hasDetailedOptions}}
-      {{#each @options as | optionValue |}}
-        <option
-          value={{get optionValue this.valueKey}}
-          selected={{is-equal (get optionValue this.valueKey) @value}}>
-          {{get optionValue this.displayKey}}
-        </option>
-      {{/each}}
-    {{else}}
-      {{#each @options as | optionValue |}}
-        <option value={{optionValue}} selected={{is-equal optionValue @value}}>
-          {{optionValue}}
-        </option>
-      {{/each}}
-    {{/if}}
+    {{#each @options as | optionValue |}}
+      <SelectLight::Option
+        @parent={{this}}
+        @valueKey={{this.valueKey}}
+        @displayKey={{this.displayKey}}
+        @value={{optionValue}}
+        @selectedValue={{@value}} />
+    {{/each}}
   {{/if}}
 </select>

addon/components/select-light.js

@@ -1,16 +1,19 @@
 import Component from '@glimmer/component';
 import { isNone } from '@ember/utils';
 import { deprecate } from '@ember/debug';
+import { action } from '@ember/object';
 
 const noop = () => {};
 
 export default class extends Component {
+  childComponents = new Set();
+
   constructor() {
     super(...arguments);
+    this.changeCallback = this.args.onChange ?? this.args.change ?? noop;
 
     this.valueKey = this.args.valueKey ?? 'value';
     this.displayKey = this.args.displayKey ?? 'label';
-    this.change = this.args.onChange ?? this.args.change ?? noop;
 
     deprecate(`Triggering @change on <SelectLight /> is deprecated in favor of @onChange due to ember-template-lint's no-passed-in-event-handlers rule`, !this.args.change, {
       id: 'ember-select-light.no-passed-in-event-handlers',
@@ -22,6 +25,27 @@ export default class extends Component {
     });
   }
 
+  registerChild(option) {
+    this.childComponents.add(option);
+  }
+
+  unregisterChild(option) {
+    this.childComponents.delete(option);
+  }
+
+  getValue(valueStr) {
+    return Array.from(this.childComponents).reduce((selectedValue, childComponent) => {
+      return childComponent.value == valueStr ? childComponent.objValue : selectedValue
+    }, valueStr);
+  }
+
+  @action
+  change(ev) {
+    let value = this.getValue(ev.target.value);
+
+    return this.changeCallback(value, ev);
+  }
+
   get hasDetailedOptions() {
     return ![ // Returns a boolean if all data is available for a { label: foo, value: bar } style list of options
       this.args.options?.[0][this.valueKey],

addon/components/select-light/option.hbs

@@ -0,0 +1,7 @@
+<option value={{this.value}} selected={{this.selected}} ...attributes>
+  {{#if hasBlock}}
+    {{yield}}
+  {{else}}
+    {{this.label}}
+  {{/if}}
+</option>

addon/components/select-light/option.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+
+
+export default class SelectLightOption extends Component {
+  constructor() {
+    super(...arguments);
+
+    this.valueKey = this.args.valueKey ?? 'value';
+    this.displayKey = this.args.displayKey ?? 'label';
+
+    if (this.args.parent) {
+      this.args.parent.registerChild(this);
+    }
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+
+    if (this.args.parent) {
+      this.args.parent.unregisterChild(this);
+    }
+  }
+
+  get objValue() {
+    return this.args.value;
+  }
+
+  get value() {
+    if (typeof this.args.value === 'string' || !this.args.value) {
+      return this.args.value;
+    }
+
+    return this.args.value?.[this.valueKey] ?? this.args.value;
+  }
+
+  get label() {
+    return this.args.value?.[this.displayKey];
+  }
+
+  get selected() {
+    return this.args.selectedValue == this.args.value || this.args.selectedValue == this.value;
+  }
+}

app/components/select-light/option.js

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