@triptyk/tpk-ember-select NPM

tpk-ember-select

This addon will give you a simple select alternative in TailwindCSS

Compatibility

Ember.js v3.24 or above
Ember CLI v3.24 or above
Node.js v12 or above
You need tailwind v2 or above to use this simple select

Installation

ember install @triptyk/tpk-ember-select

pnpm add -D @triptyk/tpk-ember-select

Usage

Once the plugin is added you can simply add a select as shown.

The @options should be an array with this structure and the @updatedValue catch the selected item values

options = [
    { id: 1, text: 'Monkey D. Luffy', value: 1 },
    { id: 1, text: 'Joe Boy', value: 2 },
    { id: 2, text: 'Gol D. Roger', value: 5678 },
  ];

Integration example

Template .hbs

<Ui::Select
  @label={{"Choose your captain"}}
  @options={{this.options}}
  @updateValue={{this.setValue}}
  @selectedValue={{this.value}}
  @placeholder="Select a value"
  @key="text"
  class="w-1/3"
/>

Controller .ts/.js

@tracked value = '';

options = [
  { id: 1, text: 'Monkey D. Luffy', value: 1 },
  { id: 1, text: 'Joe Boy', value: 2 },
  { id: 2, text: 'Gol D. Roger', value: 5678 },
];
@action
setValue(value: any) {
  this.value = value.value;
}