chore: PR suggestions - part 3

knoxville-utilities-board · Aug 13, 2024 · dbe5f45 · dbe5f45
1 parent cf91ce8
commit dbe5f45
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/apps/ember-test-app/app/components/code-block.gts b/apps/ember-test-app/app/components/code-block.gts
@@ -24,6 +24,7 @@ export default class CodeBlock extends Component {
       style="--bs-bg-opacity: 0; font-size: 0.8rem;"
       tabindex="0"
       {{onInsert this.highlight}}
+      ...attributes
     >
       <code></code>
     </pre>

diff --git a/apps/ember-test-app/app/components/f/form/select.gts b/apps/ember-test-app/app/components/f/form/select.gts
@@ -137,17 +137,27 @@ export default class extends Component {
     </FreestyleSection>
 
     <div class="grid">
-      <div class="g-col-4 border p-3">
+      <div class="g-col-4">
         <h3>String Options</h3>
-        <CodeBlock @lang="json" @code={{this.stringOptionsSource}} />
+        <CodeBlock
+          class="border rounded p-3"
+          @lang="json"
+          @code={{this.stringOptionsSource}}
+        />
       </div>
-      <div class="g-col-4 border p-3">
+      <div class="g-col-4">
         <h3>Object Options</h3>
-        <CodeBlock @lang="json" @code={{this.objectOptionsSource}} />
+        <CodeBlock
+          class="border rounded p-3"
+          @lang="json"
+          @code={{this.objectOptionsSource}}
+        />
       </div>
-      <div class="g-col-4 border p-3">
+      <div class="g-col-4">
         <h3>Selected</h3>
-        {{this.selectValue}}
+        <div class="border rounded p-3">
+          {{this.selectValue}}
+        </div>
       </div>
     </div>
   </template>

diff --git a/packages/ember/src/components/form/select.gts b/packages/ember/src/components/form/select.gts
@@ -1,18 +1,22 @@
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { get, action } from '@ember/object';
+import { service } from '@ember/service';
+import { isEqual } from '@ember/utils';
 import Component from '@glimmer/component';
 // @ts-expect-error Glimmer doesn't currently ship a type for the `cached` decorator
 // https://github.com/glimmerjs/glimmer.js/issues/408
 import { tracked, cached } from '@glimmer/tracking';
 // @ts-expect-error Ember keyboard doesn't currently ship a type for the `on-key` modifier
+// https://github.com/adopted-ember-addons/ember-keyboard/issues/464
 import onKey from 'ember-keyboard/modifiers/on-key';
 import { runTask } from 'ember-lifeline';
 
 import BoundValue from './bound-value.ts';
 import onInsert from '../../modifiers/did-insert.ts';
 
 import type { Optional } from '../../types.d.ts';
+import type IntlService from 'ember-intl/services/intl';
 
 declare type SelectOption<T> = {
   label: string;
@@ -35,11 +39,17 @@ interface SelectItemSignature<T> {
 
 class SelectItem<T> extends Component<SelectItemSignature<T>> {
   get classList() {
-    let classes = ['dropdown-item'];
+    const classes = ['dropdown-item'];
 
     const useIndexActive = this.args.activeIndex != -1;
-    const isCurrentIndex = this.args.optionIndex === this.args.activeIndex;
-    const isCurrentValue = this.args.option.value === this.args.currentValue;
+    const isCurrentIndex = isEqual(
+      this.args.optionIndex,
+      this.args.activeIndex,
+    );
+    const isCurrentValue = isEqual(
+      this.args.option.value,
+      this.args.currentValue,
+    );
 
     if (useIndexActive && isCurrentIndex) {
       classes.push('active');
@@ -53,7 +63,7 @@ class SelectItem<T> extends Component<SelectItemSignature<T>> {
   }
 
   get isActive() {
-    return this.args.option.value === this.args.currentValue;
+    return isEqual(this.args.option.value, this.args.currentValue);
   }
 
   <template>
@@ -86,8 +96,6 @@ export interface SelectSignature<T> {
   Element: HTMLButtonElement;
 }
 
-const baseDefaultText = 'Select an Option'; // TODO i18n
-
 export default class Select<T> extends BoundValue<
   SelectSignature<T>,
   string | T
@@ -107,8 +115,11 @@ export default class Select<T> extends BoundValue<
   @tracked
   internalSearchBuffer = '';
 
+  @service
+  declare intl: IntlService;
+
   get classList() {
-    let classes = ['dropdown', 'form-control', 'text-start', 'focus-ring'];
+    const classes = ['dropdown', 'form-control', 'text-start', 'focus-ring'];
 
     if (this.scrollable) {
       classes.push('scrollable');
@@ -122,6 +133,7 @@ export default class Select<T> extends BoundValue<
   }
 
   get defaultText() {
+    const baseDefaultText = this.intl.t('nrg.select.baseDefaultText', {});
     return this.args.defaultText ?? baseDefaultText;
   }
 
@@ -213,7 +225,7 @@ export default class Select<T> extends BoundValue<
       return;
     }
     const childElements = Array.from(
-      document.querySelectorAll(`#${CSS.escape(this.menuId)} > li`),
+      this.menuElement?.querySelectorAll(`li`) ?? [],
     );
     const activeElement = childElements[this.activeItem];
     if (!activeElement) {

diff --git a/packages/ember/translations/en-us.json b/packages/ember/translations/en-us.json
@@ -52,6 +52,9 @@
         "match": "This field is invalid",
         "doesNotMatch": "This field is invalid"
       }
+    },
+    "select": {
+      "baseDefaultText": "Select an Option"
     }
   }
 }