Wondering what’s next for npm?Check out our public roadmap! »

    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

    49

    Version

    1.8.0

    License

    MIT

    Last publish

    Collaborators

    • avatar