Skip to content

ember-a11y/ember-select-light

 
 

Repository files navigation

Ember-Select-Light

CI PRs Welcome License: MIT npm package Ember Observer

Ember-Select-Light is an Ember Addon focused on simplicity. Just powerful enough to offer expected baseline functionality while being easy to implement, style, and make accessible.

This addon is Octane ready and follows ember-component-pattern's for how to best write a Select Element.

Getting Started

ember install ember-select-light

Example Usage

<SelectLight
  @value="turtle"
  @options={{array "turtle" "tortoise"}}
  @onChange={{this.handleChange}} />

With an array of objects...

<SelectLight
  @options={{array
    (hash value="shortfin" label="Shortfin Shark")
    (hash value="mako" label="Mako Shark")
  }} />

value and label will be the default object keys used unless @valueKey="... and/or @displayKey="... are used respectively, like so...

<SelectLight
  @options={{array
    (hash myValue="shortfin" myLabel="Shortfin Shark")
    (hash myValue="mako" myLabel="Mako Shark")
  }}
  @valueKey="myValue"
  @displayKey="myLabel" />

As a Yield

<SelectLight>
  <option value="clown">Clown Fish</option>
  <option value="cat">Cat Fish</option>
</SelectLight>

Other arguments

Other arguments are spread onto the <select ...attributes as you'd expect, allowing you to use common attributes such as disabled, tabindex and of course class.

<SelectLight class="my-select" disabled="true" />

Styled

As shown above we can pass in other arguments like class=" which allows us to style our Select dropdowns. Below is an example with the Select dropdown styled using Tailwind CSS.

Following the Tailwind Custom Select guides this component can be easily styled


Upgrading

See the upgrading guide for how to upgrade from previous versions.


Running

Linting

  • npm run lint:hbs
  • npm run lint:js
  • npm run lint:js -- --fix

Contributing

We love pull requests from everyone. By participating in this project, you agree to abide by the code of conduct and is subject to the project license.

Clone this repo, make your changes with test coverage, push up a fork and submit a pull request.

Soon after some primary contributors will review your code and submit feedback and hopefully click the fancy green approve button. Any test and linting failures should be caught during the pull request continuous integration environment and human eyes here after.

Running Tests

  • npm run test (Runs ember try:each to test your addon against multiple Ember versions)
  • or ember test

About

The simplest Ember <select> there is.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 83.7%
  • HTML 8.6%
  • Handlebars 7.7%