en-select

Simple select component written in ember.js without any external dependencies.

Usage

There are two components: en-select and en-multi-select.

en-select creates a select component that allows a single selection. en-multi-select creates a select component that allows multiple selections.

Here's an example:

  {{en-select label="Placeholder"
              options=options
              on-select=(action "some-action")}}

By default, it expects the options you pass to have id and label properties. You can also specify a custom path for them. Here's an example.

  {{en-select label="Placeholder"
              options=options
              optionValuePath="name"
              optionLabelPath="text"
              on-select=(action "some-action")}}

On selection, the on-select action is called with the selected object.

If you want only the ID—and not the object—you can do this:

  {{en-select label="Placeholder"
              options=options
              optionValuePath="name"
              optionLabelPath="text"
              on-select=(action (mut someValue) value="id")}}

This will set someValue to the id of the selected object.

Advanced Usage

<<<<<<< HEAD en-select can be used in the block form as well, like so:

  {{#en-select options=options on-select="some-action" as |option|}}
    {{option.label}}
  {{/en-select}}

You can also customize what shows up when no options are available (i.e. the options you pass in is an empty array, or what the user searched for has no results available). Here's how:

  {{#en-select options=options on-select="some-action" as |option|}}
    {{option.label}}
  {{else}}
    <h5>No results found</h5>
  {{/en-select}}

Options

Option | Type | Default | Explanation ----------------|--------|------------------------------|--------------- isDisabled | boolean | false | Disables the select component, adds a is-disabled class. disableSearch | boolean | false | Hides the search box if set to true canRemoveSelection | boolean | true | Allows the user to cancel the selection label | string | null | Acts as the placeholder when nothing is selected options | array | [] | An array of the list items that you want to render value | object/string | null | The current selection

Actions

Action | Explanation ----------------|------------------------------------------------------ on-select | When an option is selected, on-select action is triggered on-focus | When an option gets focus, on-focus action is triggered on-remove | When an option is removed, on-remove action is triggered

Installation

ember install en-select

License

This project is licensed under the MIT License.