npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

ember-frost-select

1.8.0 • Public • Published

Travis Coveralls NPM

ember-frost-select

the drop-down select widget to rule them all

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

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

install

npm i ember-frost-select

Downloadsweekly downloads

23

version

1.8.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability