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/.