Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tedconf/ember-ted-select

A data-down, actions up select component built with real DOM elements
https://github.com/tedconf/ember-ted-select

Last synced: about 1 year ago
JSON representation

A data-down, actions up select component built with real DOM elements

Awesome Lists containing this project

README 

          
# 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)



```hbs

{{ted-select

  selectClassNames="form-control"

  content=TEDevents

  optionValueKey="id"

  optionLabelKey="title"

  onchange=(action "update")

  selected=initialSelection

}}

````



### Demo and additional examples



Visit the [docs site](http://tedconf.github.io/ember-ted-select/) 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 ` this repository

* `npm install`

* `bower install`

* `ember serve`

* Visit your app at [http://localhost:4200](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](https://docs.npmjs.com/cli/version) 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](https://github.com/tedconf/ember-ted-select/releases)



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