ember-frost-select

the drop-down select widget to rule them all

• Installation
• API
• Examples
• Development

Installation

ember install ember-frost-select

API

Attribute	Type	Value	Description
data	array	[{"label: "foo", "value": "bar"}]	An array of "label"/"value" key/value pairs representing the rows in the select drop-down.
disabled	boolean	true/false	disable/enable the component
error	boolean	true/false	tell component to render an error styling
on-change	string	<action-name>	The action callback to call when the value of the select component changes
on-input	string	<action-name>	The action callback to call when the value of the filter changes as the user types
selected	number or array	1 or [1, 2]	The indices of the pre-selected values corresponding to values in the passed-in data.
selectedValue	any, array if using multi-select, null to clear	'bar' or ['bar', 'buzz']	A value to choose in the drop down programmatically, or an array of values if using multi-select. Takes precedence over selected attribute. Passing null will clear the selected state.

Examples

Assuming the following data is available in the consuming context:

data = [
  {
    "label": "foo",
    "value": "bar"
  },
  {
    "label": "fizz",
    "value": "buzz"
  }
]
 
singleSelected = 1
multipleSelected = [1, 2]

Simple single select

{{frost-select
  data=data
  selected=singleSelected
  on-change=(action 'yourCallbackAction')
}}}

Multi select

{{frost-multi-select
  data=data
  on-change=(action 'yourCallbackAction')
  selected=multipleSelected
}}}

Simple single select w/ external filtering

{{frost-select
  data=data
  on-change=(action 'yourCallbackAction')
  on-input=(action 'yourInputFilterCallbackAction')
}}}

Selecting by value

Single value

To select values from the drop down programmatically, you can use the selectedValue attribute

var selectedValue = "bar"

And in your HTMLbars template

{{frost-select
  data=data
  selectedValue=selectedValue
}}

will select

Multiple Values

If you are using multi-select, an array will be treated as multiple values to choose. In the example, the selectedValue attribute

var selectedValue = ["bar", "buzz"]

will select both values "bar" and "buzz".

NOTE: Changing selectedValue will overwrite any previous selections. However, changing selectedValue to be undefined, or a value that can be evaluated to be equal to the previous value (using lodash's isEqual function) will not cause values to be overwritten. Setting selectedValue to null will clear the selection.

Contributing

This following outlines the details of collaborating on this Ember addon:

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

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

Building

• ember build

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