Features/power select (#26)

* WIP

* WIP

* Fix

* Fix CSS

addon/components/form/power-select-multiple.hbs

@@ -0,0 +1,43 @@
+<Form::Label
+  @text={{@label}}
+  @identifier={{@identifier}}
+  @required={{@required}}
+/>
+
+{{#if @onCreate}}
+  <PowerSelectMultipleWithCreate
+    @options={{@options}}
+    @selected={{@selected}}
+    @disabled={{@disabled}}
+    @placeholder="Choose&hellip;"
+    @renderInPlace={{true}}
+    @searchEnabled={{true}}
+    @searchField={{@searchField}}
+    @onChange={{@onChange}}
+    @onCreate={{@onCreate}}
+    ...attributes
+    as |option|
+  >
+    {{yield option}}
+  </PowerSelectMultipleWithCreate>
+{{else}}
+  <PowerSelectMultiple
+    @options={{@options}}
+    @selected={{@selected}}
+    @disabled={{@disabled}}
+    @placeholder="Choose&hellip;"
+    @renderInPlace={{true}}
+    @searchEnabled={{true}}
+    @searchField={{@searchField}}
+    @onChange={{@onChange}}
+    id={{@identifier}}
+    ...attributes
+    as |option|
+  >
+    {{yield option}}
+  </PowerSelectMultiple>
+{{/if}}
+
+{{#if @help}}
+  <Form::Help @text={{@help}} />
+{{/if}}

addon/components/form/power-select-multiple.ts

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+
+import type EmberArray from '@ember/array';
+
+interface FormPowerSelectMultipleSignature<T> {
+  Args: {
+    options: T[];
+    selected: T[] | EmberArray<T>;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+    help?: string;
+    identifier: string;
+    required?: boolean;
+    renderInPlace?: boolean;
+    searchEnabled?: boolean;
+    searchField?: string;
+    onChange: (selected: never[]) => void;
+    onCreate?: (query: string) => void;
+  };
+  Blocks: {
+    default: [T];
+  };
+  Element: HTMLElement;
+}
+
+export default class FormPowerSelectMultiple<T> extends Component<
+  FormPowerSelectMultipleSignature<T>
+> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Form::PowerSelectMultiple': typeof FormPowerSelectMultiple;
+  }
+}

addon/components/form/power-select.hbs

@@ -0,0 +1,63 @@
+<Form::Label
+  @text={{@label}}
+  @identifier={{@identifier}}
+  @required={{@required}}
+/>
+
+{{#if @onCreate}}
+  <PowerSelectWithCreate
+    @options={{@options}}
+    @search={{@search}}
+    @selected={{@selected}}
+    @disabled={{@disabled}}
+    @placeholder="Choose&hellip;"
+    @renderInPlace={{true}}
+    @searchEnabled={{true}}
+    @searchField={{@searchField}}
+    @searchPlaceholder="Search&hellip;"
+    @allowClear={{@allowClear}}
+    @showCreatePosition="bottom"
+    @onChange={{@onChange}}
+    @onCreate={{@onCreate}}
+    id={{@identifier}}
+    ...attributes
+    as |option|
+  >
+    {{! @glint-ignore }}
+    {{yield option}}
+  </PowerSelectWithCreate>
+{{else}}
+  <PowerSelect
+    @options={{@options}}
+    @search={{@search}}
+    @selected={{@selected}}
+    @disabled={{@disabled}}
+    @placeholder="Choose&hellip;"
+    @renderInPlace={{true}}
+    @searchEnabled={{true}}
+    @searchField={{@searchField}}
+    @searchPlaceholder="Search&hellip;"
+    @allowClear={{@allowClear}}
+    @onChange={{@onChange}}
+    id={{@identifier}}
+    ...attributes
+    as |option|
+  >
+    {{! @glint-ignore }}
+    {{yield option}}
+  </PowerSelect>
+{{/if}}
+
+{{!-- <Input
+  @value={{@selected.content}}
+  @type="text"
+  required={{@required}}
+  class="d-none"
+/>
+<div class="invalid-feedback">
+  {{or @invalidFeedback "Please select a value."}}
+</div> --}}
+
+{{#if @help}}
+  <Form::Help @text={{@help}} />
+{{/if}}

addon/components/form/power-select.ts

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+
+import type { Group } from 'ember-power-select/addon/utils/group-utils';
+
+interface FormPowerSelectSignature<T> {
+  Args: {
+    options?: (T | Group)[];
+    selected: T | null | undefined;
+    label?: string;
+    identifier: string;
+    required?: boolean;
+    disabled?: boolean;
+    search?: (query: string) => T[];
+    searchField?: string;
+    allowClear?: boolean;
+    help?: string;
+    onChange: (selected: never) => void;
+    onCreate?: (query: string) => void;
+  };
+  Blocks: {
+    default: [T];
+  };
+  Element: HTMLElement;
+}
+
+export default class FormPowerSelect<T> extends Component<
+  FormPowerSelectSignature<T>
+> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Form::PowerSelect': typeof FormPowerSelect;
+  }
+}

addon/styles/design-system.css

@@ -69,3 +69,115 @@ aside.collapsed nav .fa-fw {
 .yeti-table-pagination-controls-page-info {
   margin-right: auto;
 }
+
+/* ember-power-select */
+
+.ember-power-select-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+  line-height: 1.5;
+  background-color: var(--bs-body-bg);
+  background-image: var(--bs-form-select-bg-img),
+    var(--bs-form-select-bg-icon, none);
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+
+  /* @include border-radius($form-select-border-radius, 0);
+  @include box-shadow($form-select-box-shadow);
+  @include transition($form-select-transition); */
+}
+
+.ember-power-select-trigger:focus {
+  /* border-color: $form-select-focus-border-color; */
+  outline: 0;
+
+  /* @if $enable-shadows {
+    @include box-shadow(
+      $form-select-box-shadow,
+      $form-select-focus-box-shadow
+    );
+  } @else {
+    box-shadow: $form-select-focus-box-shadow;
+  } */
+}
+
+.ember-power-select-trigger[aria-disabled="true"] {
+  cursor: default;
+}
+
+.ember-power-select-placeholder,
+.ember-power-select-selected-item {
+  width: 100%;
+  margin-left: 0;
+}
+
+.ember-power-select-clear-btn {
+  position: static;
+  float: right;
+  font-size: 150%;
+  line-height: 1;
+  margin-left: 0.5rem;
+}
+
+.ember-power-select-status-icon {
+  display: none;
+}
+
+.ember-power-select-dropdown {
+  background-color: var(--bs-body-bg);
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent) !important;
+  box-shadow: var(--bs-dropdown-box-shadow);
+}
+
+.ember-power-select-search {
+  padding: 0.5rem;
+  line-height: 1.5;
+  background-color: var(--bs-tertiary-bg);
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+}
+
+.ember-power-select-search-input {
+  padding: 0.375rem 0.75rem;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+
+  /* @include transition($input-transition); */
+}
+
+/* .ember-power-select-search-input:focus {
+  color: $input-focus-color;
+  background-color: $input-focus-bg;
+  border-color: $input-focus-border-color;
+  outline: 0;
+  box-shadow: $input-focus-box-shadow;
+} */
+
+.ember-power-select-options {
+  padding: 0.5rem 0;
+}
+
+.ember-power-select-option {
+  padding: 0.25rem 1rem;
+}
+
+.ember-power-select-option[aria-selected="true"] {
+  color: #fff;
+  background-color: #0d6efd;
+}
+
+.ember-power-select-multiple-trigger {
+  padding-left: 0.5rem;
+}
+
+.ember-power-select-multiple-option {
+  border: none;
+  margin: 0;
+  margin-right: 0.25rem;
+}
+
+.ember-basic-dropdown {
+  min-width: 0;
+}

app/components/form/power-select-multiple.js

@@ -0,0 +1 @@
+export { default } from '@trusted-american/design-system/components/form/power-select-multiple';

app/components/form/power-select.js

@@ -0,0 +1 @@
+export { default } from '@trusted-american/design-system/components/form/power-select';