Add ember-power-select

app/components/input-select.hbs

@@ -0,0 +1,18 @@
+<div class="mb-4">
+  {{#if @label}}
+    <label for={{this.id}} class="block font-medium mb-1 text-dark">{{@label}}</label>
+  {{/if}}
+  <PowerSelect
+    @placeholder={{@placeholder}}
+    @searchEnabled={{@searchEnabled}}
+    @searchField={{@searchField}}
+    @onChange={{@onChange}}
+    @options={{@options}}
+    @selected={{@selected}}
+    @triggerClass={{@triggerClass}}
+    @allowClear={{@allowClear}}
+    ...attributes
+    as |option select|>
+    {{yield option select}}
+  </PowerSelect>
+</div>

app/components/input-select.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+
+export default class InputSelectComponent extends Component {
+  get guid() {
+    return guidFor(this);
+  }
+
+  get id() {
+    return this.args.id ?? this.guid;
+  }
+
+  @action
+  onChange(event) {
+    if (this.args.onChange) {
+      this.args.onChange(event.target.value, event);
+    }
+  }
+}

app/styles/app.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import 'ember-basic-dropdown';
 
 .md-icon {
   fill: currentColor;

app/templates/admin/indexes/item/settings.hbs

@@ -1,7 +1,7 @@
 {{page-title "Settings"}}
 
 {{#let (hash td="px-4 py-2 text-left whitespace-nowrap") as |classes|}}
-  <h2 class="text-xl mb-4">Attributes</h2>
+  <label class="mb-2">Attributes</label>
   <table class="mb-4 table-auto">
     <thead>
       <tr class="bg-gray-50">
@@ -46,6 +46,16 @@
   </table>
 {{/let}}
 
+<InputSelect
+  @label="Distinct attribute"
+  @options={{keys @model.stats.fieldDistribution}}
+  @selected={{@model.settings.distinctAttribute}}
+  @onChange={{set @model.settings 'distinctAttribute'}}
+  @allowClear={{true}}
+  as |option|>
+  {{option}}
+</InputSelect>
+
 <Button
   @text="Save"
   @pendingText="Saving"

config/tailwind.config.js

@@ -10,9 +10,164 @@ module.exports = {
         primary: '#2563EB',
       },
     },
+    emberPowerSelect: theme => ({
+      default: {
+        trigger: {
+          borderRadius: theme('borderRadius.default'),
+          borderColor: theme('borderColor.border'),
+          fontSize: theme('fontSize.base'),
+          padding: `${theme('spacing.2')} ${theme('spacing.10')} ${theme('spacing.2')} ${theme('spacing.3')}`,
+          minHeight: '42px',
+          lineHeight: theme('lineHeight.normal'),
+          maxWidth: theme('maxWidth.md'),
+          zIndex: 0,
+          '&:focus': {
+            boxShadow: 'none',
+            borderColor: theme('colors.primary'),
+          },
+        },
+        dropdown: {
+          // color: config.textColor,
+          // backgroundColor: config.dropdownBackgroundColor,
+          borderColor: theme('colors.border'),
+          // borderWidth: defaultTheme.borderWidth.default,
+          // borderRadius: config.dropdownBorderRadius,
+          boxShadow: theme('boxShadow.sm'),
+          // '&.ember-basic-dropdown-content--in-place': {
+          //   width: defaultTheme.width.full
+          // },
+          // '&.ember-basic-dropdown-content--above': {
+          //   transform:
+          //     config.dropdownMargin && config.dropdownMargin !== '0'
+          //       ? `translateY(calc(-1 * ${config.dropdownMargin}))`
+          //       : null,
+          //   borderBottomLeftRadius: config.openedBorderRadius,
+          //   borderBottomRightRadius: config.openedBorderRadius
+          // },
+          // '&.ember-basic-dropdown-content--below, &.ember-basic-dropdown-content--in-place': {
+          //   transform:
+          //     config.dropdownMargin && config.dropdownMargin !== '0'
+          //       ? `translateY(${config.dropdownMargin})`
+          //       : null,
+          //   borderTopLeftRadius: config.openedBorderRadius,
+          //   borderTopRightRadius: config.openedBorderRadius
+          // }
+        },
+        options: {
+          // listStyle: 'none',
+          marginTop: theme('spacing.1'),
+          marginBottom: theme('spacing.1'),
+          // marginLeft: '0',
+          // marginRight: '0',
+          // padding: '0',
+          // userSelect: 'none',
+          // '&[role="listbox"]': {
+          //   overflowY: 'auto',
+          //   '-webkit-overflow-scrolling': 'touch',
+          //   maxHeight: defaultTheme.spacing[48]
+          // }
+        },
+        option: {
+          paddingLeft: theme('spacing.4'),
+          paddingRight: theme('spacing.4'),
+          paddingTop: theme('spacing.2'),
+          paddingBottom: theme('spacing.2'),
+          // fontSize: theme('fontSize.sm'),
+          lineHeight: theme('lineHeight.5'),
+          // color: theme('colors.gray.dark'),
+          // '&[aria-disabled="true"]': {
+          //   color: config.disabledTextColor,
+          //   cursor: 'not-allowed'
+          // },
+          // '&[aria-selected="true"]': {
+          //   backgroundColor: theme('colors.primary'),
+          //   color: theme('colors.gray-700'),
+          // },
+          '&[aria-current="true"]': {
+            backgroundColor: theme('colors.gray.light'),
+            color: null,
+          }
+        },
+        placeholder: {
+          // display: 'block',
+          // overflowX: 'hidden',
+          // whiteSpace: 'nowrap',
+          // textOverflow: 'ellipsis',
+          // color: config.placeholderTextColor,
+          lineHeight: theme('lineHeight.normal'),
+        },
+        search: {
+          paddingBottom: theme('spacing.2')
+        },
+        searchInput: {
+          borderRadius: theme('borderRadius.default'),
+          borderColor: theme('borderColor.border'),
+          fontSize: theme('fontSize.base'),
+          padding: `${theme('spacing.2')} ${theme('spacing.3')}`,
+          minHeight: '42px',
+          lineHeight: theme('lineHeight.normal'),
+          maxWidth: theme('maxWidth.md'),
+          '&:focus': {
+            boxShadow: 'none',
+            borderColor: theme('colors.primary'),
+          },
+        },
+        multipleOptions: {
+          // display: 'flex',
+          // flexWrap: 'wrap',
+          // alignItems: 'center',
+          // paddingRight: defaultTheme.spacing[6],
+          // marginTop: `-${theme('spacing.1')}`, // Discount to make one line items not take more space
+          // marginBottom: `-${theme('spacing.2')}` // Discount marginBottom from option
+        },
+
+        multipleOption: {
+          // display: 'flex',
+          // alignItems: 'center',
+          backgroundColor: theme('colors.gray.dark'),
+          // color: config.multipleOptionTextColor,
+          // borderRadius: config.multipleOptionBorderRadius,
+          // fontSize: defaultTheme.fontSize.sm,
+          // lineHeight: defaultTheme.lineHeight.tight,
+          // paddingTop: defaultTheme.spacing[1],
+          // paddingRight: defaultTheme.spacing[2],
+          // paddingBottom: defaultTheme.spacing[1],
+          // paddingLeft: defaultTheme.spacing[1],
+          // marginRight: defaultTheme.spacing[1],
+          // marginBottom: 0,
+          // '&:first-child': {
+          //   marginLeft: 0
+          // },
+          // '&:last-child': {
+          //   marginRight: 0
+          // }
+        },
+        // multipleRemoveBtn: {
+        //   lineHeight: defaultTheme.lineHeight.tight,
+        //   display: 'inline-block',
+        //   cursor: 'pointer',
+        //   textIndent: '-9999rem',
+        //   marginTop: '0.15em',
+        //   transition: 'opacity .20s ease-in-out',
+        //   height: '1em',
+        //   width: '1em',
+        //   iconColor: 'currentColor',
+        //   icon: iconColor =>
+        //     `<svg fill="${iconColor}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z" /></svg>`,
+        //   '&:not(:hover)': {
+        //     opacity: 0.5
+        //   }
+        // }
+      },
+    }),
   },
   variants: {
     extend: {},
   },
-  plugins: [],
+  safelist: [
+    {
+      pattern: /^ember-power-select-/,
+    },
+  ],
+  plugins: [require('tailwindcss-ember-power-select').plugin()],
 };

ember-cli-build.js

@@ -6,6 +6,9 @@ const tailwind = require('tailwindcss');
 
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
+    'ember-power-select': {
+      theme: false,
+    },
     postcssOptions: {
       compile: {
         cacheInclude: [/.*\.(css|scss|hbs)$/, /.*tailwind.config.js$/],

package.json

@@ -70,6 +70,7 @@
     "ember-load-initializers": "^2.1.2",
     "ember-mdi": "^0.9.0",
     "ember-page-title": "^7.0.0",
+    "ember-power-select": "^5.0.4",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
     "ember-resources": "^4.4.0",
@@ -90,6 +91,7 @@
     "qunit": "^2.18.0",
     "qunit-dom": "^2.0.0",
     "tailwindcss": "^3.0.23",
+    "tailwindcss-ember-power-select": "^0.4.1",
     "webpack": "^5.69.1"
   },
   "engines": {

tests/integration/components/input-select-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | input-select', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<InputSelect />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <InputSelect>
+        template block text
+      </InputSelect>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});