ember-bootstrap-power-select

Integrate Ember Power Select into your Ember Bootstrap forms.

Compatibility

• Ember Power Select v6 or above
• Ember Bootstrap v5 or above
• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v20 or above

Installation

ember install ember-bootstrap-power-select

This will additionally install ember-power-select into your app, and setup its Bootstrap theme, either by importing the appropriate Less or Sass file (if you use one of these preprocessors), or by editing your ember-cli-build.js to include the static theme CSS (if you use plain CSS).

Usage

With this addon installed, you have a new controlType of power-select available. Use the options property to set the array of selectable options:

<BsForm @model={{yourModel}} as |form|>
  <form.element
    @controlType="power-select"
    @property="foo"
    @label="Choose"
    @options={{options}}
  />
</BsForm>

If your options array consists of objects, use the optionLabelPath to specify the property that should be used as the options label:

<BsForm @model={{yourModel}} as |form|>
  <form.element
    @controlType="power-select"
    @property="foo"
    @label="Choose"
    @options={{options}}
    @optionLabelPath="title"
  />
</BsForm>

If you need more control over how the options label are rendered (e.g. for formatting or internalization) you should use the yielded <control> component in block mode:

<BsForm @model={{yourModel}} as |form|>
  <form.element
    @controlType="power-select"
    @property="author"
    @label="Author"
    @options={{options}}
    as |el|
  >
    <el.control as |option|>
      {{option.name}}
      (b.
      {{format-date option.dayOfBirth}})
    </el.control>
  </form.element>
</BsForm>

Power Select Multiple

The power-select-multiple is also supported and works similarly to the power-select implementation.

<BsForm @model={{yourModel}} as |form|>
  <form.element
    @controlType="power-select-multiple"
    @property="foo"
    @label="Choose"
    @options={{options}}
  />
</BsForm>

Advanced usage

If you need more control of the power-select configuration, use the yielded control component to get direct access to the power-select component. The power-select's selected, disabled properties and the onChange action are already wired up to the controlling form.element for you. Set any other options as you need:

<BsForm @model={{yourModel}} as |form|>
  <form.element
    @controlType="power-select"
    @property="foo"
    @label="Choose"
    @options={{options}}
    as |el|
  >
    <el.control @searchEnabled={{true}} @searchPlaceholder="Type your name" />
  </form.element>
</BsForm>

Please consult the Ember Power Select documentation for all available options.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.