{"id":23440888,"url":"https://github.com/tedconf/ember-ted-select","last_synced_at":"2025-04-13T09:13:33.218Z","repository":{"id":33957136,"uuid":"37686626","full_name":"tedconf/ember-ted-select","owner":"tedconf","description":"A data-down, actions up select component built with real DOM elements","archived":false,"fork":false,"pushed_at":"2025-01-31T16:30:12.000Z","size":1109,"stargazers_count":22,"open_issues_count":2,"forks_count":6,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-03-27T00:54:54.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tedconf.github.io/ember-ted-select/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tedconf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-18T21:40:27.000Z","updated_at":"2023-09-26T19:59:12.000Z","dependencies_parsed_at":"2022-07-13T15:31:09.059Z","dependency_job_id":null,"html_url":"https://github.com/tedconf/ember-ted-select","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fember-ted-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fember-ted-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fember-ted-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fember-ted-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tedconf","download_url":"https://codeload.github.com/tedconf/ember-ted-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248252718,"owners_count":21072701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-23T16:20:14.248Z","updated_at":"2025-04-13T09:13:33.194Z","avatar_url":"https://github.com/tedconf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deprecation Notice\n\nTED has shifted to React and will no longer maintain this application/library. If you wish to continue using this application/library, please create a pull request and repo ownership can be transferred. This repository will be archived at the end of 2022.\n\n\n# Ember-ted-select\n\nA data down, actions up select component rendered with real DOM elements.Supports disabled options, multi-select, option sorting and custom prompt.\n\n\u003e 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.\n\n## Installation\n\n* `ember install ember-ted-select`\n\n## Examples\n\n### Standard Usage\n\nYou'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)\n\n```hbs\n{{ted-select\n  selectClassNames=\"form-control\"\n  content=TEDevents\n  optionValueKey=\"id\"\n  optionLabelKey=\"title\"\n  onchange=(action \"update\")\n  selected=initialSelection\n}}\n````\n\n### Demo and additional examples\n\nVisit the [docs site](http://tedconf.github.io/ember-ted-select/) for demos and more detailed usage examples.\n\n\n##Configurable options\n\n\u003ctable class=\"table table-bordered\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProperty\u003c/th\u003e\n      \u003cth\u003ePurpose\u003c/th\u003e\n      \u003cth\u003eExpected Type\u003c/th\u003e\n      \u003cth\u003eDefault value\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003econtent\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePass 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.\u003c/td\u003e\n      \u003ctd\u003earray\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eoptionLabelKey\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[optional] Specify a property of the content object to use as each option's label.\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'id'\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eoptionValueKey\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[optional] Specify a property of the content object to use as each option's \u003ccode\u003evalue\u003c/code\u003e attribute.\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'title'\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eoptionDisabledKey\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[optional] Specify a boolean property of the content object to use as a flag for the \u003ccode\u003edisabled\u003c/code\u003eattribute.\u003c/td\u003e\n      \u003ctd\u003estring, null\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eonchange\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Specify your own named action to trigger when the select value changes. Standard usage is: \u003ccode\u003e(action \"update\")\u003c/code\u003e. Your action handler will receive the new value, as a single value for a standard select or as an array if \u003ccode\u003emultiple\u003c/code\u003e is active.\u003cbr\u003e\n        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 \u003cstrong\u003etwo-way-bound\u003c/strong\u003e for an example.\n      \u003c/td\u003e\n      \u003ctd\u003eEmber action\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eEmber.K\u003c/code\u003e (noop)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eselected\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        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.\n      \u003c/td\u003e\n      \u003ctd\u003eObject, Array\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003esortBy\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[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.\u003c/td\u003e\n      \u003ctd\u003estring, null\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003emultiple\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        [optional] When \u003ccode\u003etrue\u003c/code\u003e, adds the \u003ccode\u003emultiple\u003c/code\u003e attribute to the rendered \u003ccode\u003e\u0026lt;select\u0026gt;\u003c/code\u003eelement.\u003cbr\u003e\n        When active, the \u003ccode\u003eonchange\u003c/code\u003e action will pass an array of objects rather than a single selected object.\n      \u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edisabled\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[optional] Pass a boolean value in to disabled the entire input.\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ename\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[optional] Add a name attribute to the select element.\u003c/td\u003e\n      \u003ctd\u003estring, null\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eselectClassNames\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAdds one or more custom class names to the select element. Pass multiple classes as a space separated list: \u003ccode\u003eform-control My-select\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003estring, null\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eselectId\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSets the ID on the select element.\u003c/td\u003e\n      \u003ctd\u003estring, null\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eprompt\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e[optional] String or \u003ccode\u003enull\u003c/code\u003e. Sets the prompt text or hides the prompt option when set to \u003ccode\u003enull\u003c/code\u003e.\u003c/td\u003e\n      \u003ctd\u003estring, null\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'Select an item'\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Running a demo\n\n* `git clone \u003crepository-url\u003e` this repository\n* `npm install`\n* `bower install`\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n\n## Running Tests\n\n* `npm test` (Runs ember try:each to test your addon against multiple Ember versions)\n\nor to run a test server while developing:\n\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\n## For contributors:\nPRs that do not include the following will not be merged:\n\n* a passing test suite\n* test coverage for your new code\n* updated README docs (if applicable)\n* updated docs and/or examples in the docs site found in `tests/dummy` (if applicable)\n\n## For maintainers:\n\n### Updating the GitHub pages docs site\n* `ember github-pages:commit --message \"update gh-pages\"`\n* `git push origin gh-pages`\n\n### Creating a new release and publishing to npm\n\n* `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](https://docs.npmjs.com/cli/version) and (semver docs)[http://semver.org/] if you're not sure which applies\n* `npm publish`\n* `git push --tags`\n* document the changes by [creating a new release](https://github.com/tedconf/ember-ted-select/releases)\n\n\nFor more information on using ember-cli, visit [https://www.ember-cli.com/](https://www.ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedconf%2Fember-ted-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftedconf%2Fember-ted-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedconf%2Fember-ted-select/lists"}