wip select

webapp/app/pods/components/acc-select/component.ts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import {action} from '@ember/object';
 
 interface Args {
   searchEnabled: boolean;
@@ -12,4 +13,9 @@ interface Args {
   renderInPlace: boolean;
 }
 
-export default class Select extends Component<Args> {}
+export default class Select extends Component<Args> {
+  @action
+  selectChange(event: Event) {
+    this.args.onchange(event.target);
+  }
+}

webapp/app/pods/components/acc-select/styles.scss

@@ -0,0 +1,28 @@
+.root {
+  position: relative;
+
+  :global(select) {
+    appearance: none;
+    width: 100%;
+    font-size: 13px;
+    cursor: pointer;
+    padding: 5px 10px;
+    background: var(--body-background);
+    box-shadow: none;
+    border: 1px solid transparent;
+    border-color: var(--background-light-highlight);
+    color: var(--color-black-opacity-70);
+  }
+
+  &:after {
+    display: block;
+    pointer-events: none;
+    cursor: pointer;
+    content: "›";
+    position: absolute;
+    bottom: 0;
+    right: 11px;
+    font-size: 150%;
+    transform: rotate(90deg);
+  }
+}

webapp/app/pods/components/acc-select/template.hbs

@@ -1,13 +1,25 @@
-<PowerSelect
-  @options={{@options}}
-  @matchTriggerWidth={{@matchTriggerWidth}}
-  @searchEnabled={{@searchEnabled}}
-  @selected={{@selected}}
-  @search={{@search}}
-  @placeholder={{@placeholder}}
-  @searchPlaceholder={{@searchPlaceholder}}
-  @renderInPlace={{@renderInPlace}}
-  @onChange={{@onchange}} as |option|
->
-  {{option.label}}
-</PowerSelect>
+{{#if @searchEnabled}}
+  <PowerSelect
+    @options={{@options}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @searchEnabled={{@searchEnabled}}
+    @selected={{@selected}}
+    @search={{@search}}
+    @placeholder={{@placeholder}}
+    @searchPlaceholder={{@searchPlaceholder}}
+    @renderInPlace={{@renderInPlace}}
+    @onChange={{@onchange}} as |option|
+  >
+    {{option.label}}
+  </PowerSelect>
+{{else}}
+  <div local-class="root">
+    <select {{on 'change' this.selectChange}}>
+      {{#each @options key="value" as |selectOption|}}
+        <option value={{selectOption.value}}>
+          {{selectOption.label}}
+        </option>
+      {{/each}}
+    </select>
+  </div>
+{{/if}}

webapp/app/pods/components/revision-export-options/component.ts

@@ -41,7 +41,7 @@ export default class RevisionExportOptions extends Component<Args> {
   get orderByOptions() {
     return [
       {
-        value: null,
+        value: '',
         label: this.intl.t(
           'components.revision_export_options.orders.original'
         ),
@@ -71,7 +71,7 @@ export default class RevisionExportOptions extends Component<Args> {
   get formatOptions() {
     return [
       {
-        value: null,
+        value: '',
         label: this.intl.t('components.revision_export_options.default_format'),
       },
       ...this.formattedDocumentFormats,