Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
ember-ted-select
Advanced tools
Data down, actions up, Ember select component built with real DOM
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.
ember install ember-ted-select
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)
{{ted-select
selectClassNames="form-control"
content=TEDevents
optionValueKey="id"
optionLabelKey="title"
onchange=(action "update")
selected=initialSelection
}}
Visit the docs site 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 disabled attribute. | 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' |
git clone <repository-url>
this repositorynpm install
bower install
ember serve
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
ember build
PRs that do not include the following will not be merged:
tests/dummy
(if applicable)ember github-pages:commit --message "update gh-pages"
git push origin gh-pages
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 and (semver docs)[http://semver.org/] if you're not sure which appliesnpm publish
git push --tags
For more information on using ember-cli, visit https://www.ember-cli.com/.
FAQs
Data down, actions up, Ember select component built with real DOM
The npm package ember-ted-select receives a total of 1 weekly downloads. As such, ember-ted-select popularity was classified as not popular.
We found that ember-ted-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.