blessanm86 / ember-cli-bm-select

bm-select is a customizable select component that supports keyboard navigation and WAI-ARIA

ember-cli-bm-select

bm-select is an ember addon component that provides the functionality of a select box. It allows you to specify templates for both the options and the selected option. It supports keyboard navigation and WAI-ARIA guidelines.

Demo

https://ember-cli-bm-select.netlify.app

Installation

npm install ember-cli-bm-select --save-dev

Usage

You know are given 4 components which needed to be used together for the addon to work

• bm-select
• bm-selected
• bm-options
• bm-option

{{#bm-select value=selectedCountry action="countrySelected"}}
  {{#bm-selected}}
    {{selectedCountry}}
  {{/bm-selected}}

  {{#bm-options}}
    {{#each item in countriesObj}}
      {{#bm-option data=item key="name"}}
        {{item.name}}
      {{/bm-option}}
    {{/each}}
  {{/bm-options}}
{{/bm-select}}

1. bm-select It is the parent component. It can take 2 options - value and action.

   • value (required) The value of the selected option. Must be a primitive type like string or integer.
   • action (optional) The name of the action which will be triggered when the selection has changed.

2. bm-selected This component should be a direct child of bm-select. It should be used as a block component where you specify how the selected value should be rendered once the selection is made. The template data use to render is taken from the controller used by bm-select.

3. bm-options This component should be a direct child of bm-select.

4. bm-option This component should be a direct child of 'bm-options'. This should be used as a block component where you specify how the option should be rendered. The template data comes from the parent context. This componenets take 4 options - value, data key and isDisabled. Either the value or data,key pair should be specified for the component.

   • value (optional) - The value of the option. Must be a primitive type like string or integer.
   • data (optional) - A object that contains the data for the option in which one proerty will hold the value for the option. Must be an object.
   • key (optional) - This is the key on the data object in which the value can be accessed. When data,key combination is given, the value will be taken like value = data.get(key); Must be a string.
   • isDisabled (optional) - If you set isDisabled to true, the option will be disabled.

###Keyboard Support You can interact with the component using the keyboard. Once the component has focus you can use the down arrow or enter button to open the options dropdown.

While the dropdown is open you can use the up and down arrow key to move focus between the different options.

While focus is on an option, you can press enter to select that option.

You can press the escape button to close the dropdown.

##Issues Or Contributions

• Post issues/enhancements in the github issue tracker.
• My email is [email protected]
• Pull requests are welcome.
• Follow Me On Twitter
• LinkedIn Pofile
• Stack Overflow Pofile