Deprecation Notice

TED has shifted to React and will no longer maintain this application/library. If you wish to continue using this application/library, please create a pull request and repo ownership can be transferred. This repository will be archived at the end of 2022.

Ember-ted-select

A data down, actions up select component rendered with real DOM elements.Supports disabled options, multi-select, option sorting and custom prompt.

This addon is prepared for internal use at TED. We're happy to share our code as open-source, but be aware that it may not be maintianed for broader community use.

Installation

• ember install ember-ted-select

Examples

Standard Usage

You'll need to give ted-select an array of options (content), specifying a property to use for both option value and option label. A selection can be passed in (data down) using the selected property, and the add-on will send an onchange action out (actions-up)

{{ted-select
  selectClassNames="form-control"
  content=TEDevents
  optionValueKey="id"
  optionLabelKey="title"
  onchange=(action "update")
  selected=initialSelection
}}

Demo and additional examples

Visit the docs site for demos and more detailed usage examples.

##Configurable options

Property	Purpose	Expected Type	Default value
content	Pass in a content array to populate the select options. Each array element must be an object with properties for both the 'value' attribute and option label text.	array	null
optionLabelKey	[optional] Specify a property of the content object to use as each option's label.	string	'id'
optionValueKey	[optional] Specify a property of the content object to use as each option's value attribute.	string	'title'
optionDisabledKey	[optional] Specify a boolean property of the content object to use as a flag for the disabledattribute.	string, null	null
onchange	Specify your own named action to trigger when the select value changes. Standard usage is: (action "update"). Your action handler will receive the new value, as a single value for a standard select or as an array if multiple is active. You can also force a two-way binding by using the [`mut` helper](http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_mut). See two-way-bound for an example.	Ember action	Ember.K (noop)
selected	Pass in an initial selection or update the selected value from outside the component. Must match one of the options in the content array for single select, or be an array of objects for multi-select.	Object, Array	null
sortBy	[optional] Specify a property of the content array to use for sorting the options. When set to null, options will remain in the order of the original array.	string, null	null
multiple	[optional] When true, adds the multiple attribute to the rendered <select>element. When active, the onchange action will pass an array of objects rather than a single selected object.	boolean	false
disabled	[optional] Pass a boolean value in to disabled the entire input.	boolean	false
name	[optional] Add a name attribute to the select element.	string, null	null
selectClassNames	Adds one or more custom class names to the select element. Pass multiple classes as a space separated list: form-control My-select	string, null	null
selectId	Sets the ID on the select element.	string, null	null
prompt	[optional] String or null. Sets the prompt text or hides the prompt option when set to null.	string, null	'Select an item'

Running a demo

• git clone <repository-url> this repository
• npm install
• bower install
• ember serve
• Visit your app at http://localhost:4200.

Running Tests

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

or to run a test server while developing:

• ember test --server

Building

• ember build

For contributors:

PRs that do not include the following will not be merged:

• a passing test suite
• test coverage for your new code
• updated README docs (if applicable)
• updated docs and/or examples in the docs site found in tests/dummy (if applicable)

For maintainers:

Updating the GitHub pages docs site

• ember github-pages:commit --message "update gh-pages"
• git push origin gh-pages

Creating a new release and publishing to npm

• npm version $TYPE -m "message about this version" where $TYPE indicates the semver release type, eg. patch, major or minor. see the npm-version docs and (semver docs)[http://semver.org/] if you're not sure which applies
• npm publish
• git push --tags
• document the changes by creating a new release

For more information on using ember-cli, visit https://www.ember-cli.com/.