chore: Linting and formatting

knoxville-utilities-board · Dec 17, 2024 · 46b5cb0 · 46b5cb0
1 parent fe5dcd3
commit 46b5cb0
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 60 deletions.
diff --git a/apps/docs-app/app/components/f/form/search.gts b/apps/docs-app/app/components/f/form/search.gts
@@ -39,36 +39,63 @@ export default class extends Component {
   hideSearchIcon = false;
 
   @tracked
-  stringOptions = ["Apple", "Pear", "Orange", "Banana", "Grape", "Strawberry", "Mango", "Pineapple", "Peach", "Cherry", "Blueberry", "Watermelon", "Papaya", "Kiwi", "Plum", "Apricot", "Pomegranate", "Lemon", "Lime", "Raspberry", "Blackberry", "Coconut", "Dragon fruit", "Lychee", "Fig", "Tangerine" ];
+  stringOptions = [
+    'Apple',
+    'Pear',
+    'Orange',
+    'Banana',
+    'Grape',
+    'Strawberry',
+    'Mango',
+    'Pineapple',
+    'Peach',
+    'Cherry',
+    'Blueberry',
+    'Watermelon',
+    'Papaya',
+    'Kiwi',
+    'Plum',
+    'Apricot',
+    'Pomegranate',
+    'Lemon',
+    'Lime',
+    'Raspberry',
+    'Blackberry',
+    'Coconut',
+    'Dragon fruit',
+    'Lychee',
+    'Fig',
+    'Tangerine',
+  ];
 
   @tracked
   objectOptions = [
-    { key: "Option 1", fruit: "Apple"},
-    { key: "Option 2", fruit: "Pear"},
-    { key: "Option 3", fruit: "Orange"},
-    { key: "Option 4", fruit: "Banana"},
-    { key: "Option 5", fruit: "Grape"},
-    { key: "Option 6", fruit: "Strawberry"},
-    { key: "Option 7", fruit: "Mango"},
-    { key: "Option 8", fruit: "Pineapple"},
-    { key: "Option 9", fruit: "Peach"},
-    { key: "Option 10", fruit: "Cherry"},
-    { key: "Option 11", fruit: "Blueberry"},
-    { key: "Option 12", fruit: "Watermelon"},
-    { key: "Option 13", fruit: "Papaya"},
-    { key: "Option 14", fruit: "Kiwi"},
-    { key: "Option 15", fruit: "Plum"},
-    { key: "Option 16", fruit: "Apricot"},
-    { key: "Option 17", fruit: "Pomegranate"},
-    { key: "Option 18", fruit: "Lemon"},
-    { key: "Option 19", fruit: "Lime"},
-    { key: "Option 20", fruit: "Raspberry"},
-    { key: "Option 21", fruit: "Blackberry"},
-    { key: "Option 22", fruit: "Coconut"},
-    { key: "Option 23", fruit: "Dragon fruit"},
-    { key: "Option 24", fruit: "Lychee"},
-    { key: "Option 25", fruit: "Fig"},
-    { key: "Option 26", fruit: "Tangerine"}
+    { key: 'Option 1', fruit: 'Apple' },
+    { key: 'Option 2', fruit: 'Pear' },
+    { key: 'Option 3', fruit: 'Orange' },
+    { key: 'Option 4', fruit: 'Banana' },
+    { key: 'Option 5', fruit: 'Grape' },
+    { key: 'Option 6', fruit: 'Strawberry' },
+    { key: 'Option 7', fruit: 'Mango' },
+    { key: 'Option 8', fruit: 'Pineapple' },
+    { key: 'Option 9', fruit: 'Peach' },
+    { key: 'Option 10', fruit: 'Cherry' },
+    { key: 'Option 11', fruit: 'Blueberry' },
+    { key: 'Option 12', fruit: 'Watermelon' },
+    { key: 'Option 13', fruit: 'Papaya' },
+    { key: 'Option 14', fruit: 'Kiwi' },
+    { key: 'Option 15', fruit: 'Plum' },
+    { key: 'Option 16', fruit: 'Apricot' },
+    { key: 'Option 17', fruit: 'Pomegranate' },
+    { key: 'Option 18', fruit: 'Lemon' },
+    { key: 'Option 19', fruit: 'Lime' },
+    { key: 'Option 20', fruit: 'Raspberry' },
+    { key: 'Option 21', fruit: 'Blackberry' },
+    { key: 'Option 22', fruit: 'Coconut' },
+    { key: 'Option 23', fruit: 'Dragon fruit' },
+    { key: 'Option 24', fruit: 'Lychee' },
+    { key: 'Option 25', fruit: 'Fig' },
+    { key: 'Option 26', fruit: 'Tangerine' },
   ];
 
   @tracked
@@ -78,10 +105,10 @@ export default class extends Component {
   minCharacters = 1;
 
   @tracked
-  noResultsLabel = "No results found";
+  noResultsLabel = 'No results found';
 
   @tracked
-  placeholder = "Search";
+  placeholder = 'Search';
 
   @tracked
   readonly = false;
@@ -98,14 +125,18 @@ export default class extends Component {
   @action
   async stringQuery(searchString: string) {
     await timeout(1000);
-    return this.stringOptions.filter((item) => item.toLowerCase().includes(searchString.toLowerCase()));
+    return this.stringOptions.filter((item) =>
+      item.toLowerCase().includes(searchString.toLowerCase()),
+    );
   }
 
   @action
   async objectQuery(searchString: string) {
     await timeout(1000);
 
-    const things = this.objectOptions.filter((item) => item.fruit.toLowerCase().includes(searchString.toLowerCase()));
+    const things = this.objectOptions.filter((item) =>
+      item.fruit.toLowerCase().includes(searchString.toLowerCase()),
+    );
     return things;
   }
 

diff --git a/apps/docs-app/app/router.ts b/apps/docs-app/app/router.ts
@@ -23,7 +23,7 @@ Router.map(function () {
       this.route('datetime');
       this.route('phone-input');
       this.route('radio-group');
-      this.route('search')
+      this.route('search');
       this.route('select');
       this.route('text-area');
       this.route('text-input');

diff --git a/apps/docs-app/app/templates/components.hbs b/apps/docs-app/app/templates/components.hbs
@@ -22,7 +22,7 @@
         <Item @name="Checkbox Group" @route="components.form.checkbox-group" />
         <Item @name="Phone Input" @route="components.form.phone-input" />
         <Item @name="Radio Group" @route="components.form.radio-group" />
-        <Item @name="Search" @route="components.form.search"/>
+        <Item @name="Search" @route="components.form.search" />
         <Item @name="Select" @route="components.form.select" />
         <Item @name="Text Area" @route="components.form.text-area" />
         <Item @name="Text Input" @route="components.form.text-input" />

diff --git a/packages/design-system/src/_forms.scss b/packages/design-system/src/_forms.scss
@@ -42,7 +42,7 @@ select,
     }
   }
   &:not([disabled]) {
-    &:not(input[type='checkbox']):not(input[type='radio']) {
+    &:not(input[type="checkbox"]):not(input[type="radio"]) {
       background: inherit !important;
       padding-right: revert !important;
     }
@@ -136,7 +136,8 @@ input::placeholder {
       background-color: var(--bs-secondary-bg);
     }
 
-    &:hover, &.active {
+    &:hover,
+    &.active {
       background-color: var(--bs-secondary-bg);
     }
 

diff --git a/packages/ember-core/src/components/form/search.gts b/packages/ember-core/src/components/form/search.gts
@@ -34,21 +34,26 @@ class SearchItem<T> extends Component<SearchItemSignature<T>> {
   active = true;
 
   get classList() {
-      const classes = ['dropdown-item'];
+    const classes = ['dropdown-item'];
 
-      if (this.isActiveIndex) {
-        classes.push('active');
-      }
-
-      return classes.join(' ');
+    if (this.isActive) {
+      classes.push('active');
     }
 
-  get isActiveIndex() {
+    return classes.join(' ');
+  }
+
+  get isActive() {
     return this.args.activeIndex === this.args.index;
   }
 
   <template>
-    <li class={{this.classList}} role="option" ...attributes>{{this.args.option.label}}</li>
+    <li
+      class={{this.classList}}
+      role="option"
+      aria-selected={{this.isActive}}
+      ...attributes
+    >{{@option.label}}</li>
   </template>
 }
 
@@ -77,7 +82,10 @@ export interface SearchSignature<T> {
   Element: HTMLDivElement;
 }
 
-export default class Search<T> extends BoundValue<SearchSignature<T>, string | T> {
+export default class Search<T> extends BoundValue<
+  SearchSignature<T>,
+  string | T
+> {
   @tracked
   activeIndex = -1;
 
@@ -121,15 +129,15 @@ export default class Search<T> extends BoundValue<SearchSignature<T>, string | T
   }
 
   get noResultsLabel() {
-    return this.args.noResultsLabel ?? "No results found";
+    return this.args.noResultsLabel ?? 'No results found';
   }
 
   get placeholder() {
     if (this.args.basic) {
-      return "";
+      return '';
     }
 
-    return this.args.placeholder ?? "Search";
+    return this.args.placeholder ?? 'Search';
   }
 
   get scrollable() {
@@ -140,7 +148,7 @@ export default class Search<T> extends BoundValue<SearchSignature<T>, string | T
     return this.args.searchTimeout ?? 300;
   }
 
-  get canPerformSearch () {
+  get canPerformSearch() {
     return this.searchString.trim().length >= this.minCharacters;
   }
 
@@ -267,7 +275,7 @@ export default class Search<T> extends BoundValue<SearchSignature<T>, string | T
       this.activeIndex--;
       this.scrollActiveOptionIntoView();
     }
-}
+  }
 
   @action
   moveDown(evt: KeyboardEvent) {
@@ -335,7 +343,7 @@ export default class Search<T> extends BoundValue<SearchSignature<T>, string | T
 
   @action
   clear() {
-    this.searchString = ''
+    this.searchString = '';
     this.value = '';
     this.activeIndex = -1;
 
@@ -353,18 +361,14 @@ export default class Search<T> extends BoundValue<SearchSignature<T>, string | T
   }
 
   <template>
-    <div
-      class={{this.classList}}
-      {{onClickOutside this.onBlur}}
-      ...attributes
-    >
+    <div class={{this.classList}} {{onClickOutside this.onBlur}} ...attributes>
       <div class="input-group">
         {{#unless this.hideSearchIcon}}
           <span class="input-group-text">
             {{#if this.loading}}
-              <span class="spinner-border spinner-border-sm"/>
+              <span class="spinner-border spinner-border-sm" />
             {{else}}
-              <i class="bi bi-search"/>
+              <i class="bi bi-search" />
             {{/if}}
           </span>
         {{/unless}}
@@ -390,9 +394,10 @@ export default class Search<T> extends BoundValue<SearchSignature<T>, string | T
         {{#if this.clearable}}
           <button
             class="input-group-text"
+            type="button"
             {{on "click" this.clear}}
           >
-            <i class="bi bi-x-lg"/>
+            <i class="bi bi-x-lg" />
           </button>
         {{/if}}
       </div>

diff --git a/packages/ember-core/src/components/index.ts b/packages/ember-core/src/components/index.ts
@@ -7,7 +7,7 @@ export { default as Field } from './form/field.gts';
 export { default as Form } from './form/index.gts';
 export { default as PhoneInput } from './form/phone-input.gts';
 export { default as RadioGroup } from './form/radio-group.gts';
-export { default as Search } from './form/search.gts'
+export { default as Search } from './form/search.gts';
 export { default as Select } from './form/select.gts';
 export { default as TextArea } from './form/text-area.gts';
 export { default as TextInput } from './form/text-input.gts';

diff --git a/packages/ember-core/src/template-registry.ts b/packages/ember-core/src/template-registry.ts
@@ -97,4 +97,7 @@ export interface ModifierRegistry {
   'on-update': typeof OnUpdate;
 }
 
-export default interface TemplateRegistry extends ComponentRegistry, HelperRegistry, ModifierRegistry {}
+export default interface TemplateRegistry
+  extends ComponentRegistry,
+    HelperRegistry,
+    ModifierRegistry {}