Skip to content
🔠 A faux select box for Ember apps
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon-test-support/helpers move location of test helpers May 20, 2019
addon add some defaults Jan 22, 2020
app prettier Dec 7, 2019
config flip to npm Nov 8, 2019
docs Update class-names.md Jan 21, 2020
tests correct function call Jan 14, 2020
vendor initial commit Dec 23, 2015
.editorconfig upgrade ember-cli2 Jul 28, 2016
.ember-cli initial commit Dec 23, 2015
.eslintignore
.eslintrc.js
.gitignore update project Jan 18, 2019
.npmignore flip to npm Nov 8, 2019
.prettierrc.js lint Dec 6, 2019
.release-it.js run tests before release Dec 11, 2019
.stylelintignore update stylelint command Jun 14, 2019
.stylelintrc.js temporarily ignore linter Jul 12, 2019
.template-lintrc.js simplify template lint config now that tests are angle bracketified Apr 26, 2019
.travis.yml remove versions from travis Dec 9, 2019
.watchmanconfig initial commit Dec 23, 2015
CHANGELOG.md update deps Jan 14, 2020
CONTRIBUTING.md add hacky focuser component Aug 23, 2019
LICENSE.md update project Jan 18, 2019
README.md fix tests Dec 14, 2019
ember-cli-build.js upgrade deps and prettify Nov 18, 2018
index.js upgrade deps and prettify Nov 18, 2018
package-lock.json Release 13.0.7 Jan 14, 2020
package.json Release 13.0.7 Jan 14, 2020
testem.js add hacky focuser component Aug 23, 2019

README.md

@zestia/ember-select-box

Select box solutions are rarely perfect for what you want.

They come with a myriad of options to configure every possible situation, and they make too many assumptions about how your select-box should behave.

This addon does less, and gives you the primitives to easily compose your own.

Installation

ember install @zestia/ember-select-box

Demo

https://zestia.github.io/ember-select-box

Features

  • Native select box (that supports complex values) ✔︎
  • Faux select box (mimics a native select box, but easily stylable) ✔︎
  • Navigatable options and groups ✔︎
  • ARIA Attributes ✔︎
  • Supports promises ✔︎
  • Any HTML you want ✔︎
  • Fully themeable using namespaced classes ✔︎
  • Customisable class names ✔︎
  • Will never come with built-in styles ✔︎
  • Ember Data friendly ✔︎
  • Does not use jQuery ✔︎
  • Easily create an autocompleter ✔︎
  • Easily create a dropdown menu ✔︎
  • Full control at all times with the API ✔︎
  • 'Jump-to option' behaviour based on keyboard input ✔︎
  • Very few issues over many years of Ember! ✔︎

Example

To create your own select box, make a new component that renders a select box:

{{! foo-select.hbs }}
<SelectBox
  @value={{@value}}
  @onSelect={{@onSelect}}
  @classNamePrefix="foo-select" as |sb|
>
  <sb.SelectedOption {{on "click" sb.toggle}}>
    {{sb.value.name}}
  </sb.SelectedOption>
  <sb.Options>
    {{yield sb}}
  </sb.Options>
</SelectBox>

...and then use it like this:

{{! application.hbs }}
<FooSelect
  @value={{foo}}
  @onSelect={{this.selectFoo}} as |sb|
>
  {{#each this.foos as |foo|}}
    <sb.Option @value={{foo}}>{{foo.name}}</sb.Option>
  {{/each}}
</FooSelect>

...which will render...

<div class="foo-select">
  <div class="foo-select__selected-option">Foo</div>
  <div class="foo-select__options">
    <div class="foo-select__option">Foo</div>
    <div class="foo-select__option foo-select__option--selected">Bar</div>
    <div class="foo-select__option">Baz</div>
  </div>
</div>

...as you can see, apart from being able to select a value - this addon does very little out of the box! It's up to you to add the layer of behaviour that you require using the API.

Docs

You can’t perform that action at this time.