diff --git a/README.md b/README.md index f8fb2e9..85b456c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # vue-select [](https://travis-ci.org/sagalbot/vue-select) -Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no dependencies other than Vue. +Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no JavaScript dependencies other than Vue. + +Currently the `vue-select` component includes bootstrap classes in the markup, that provide some default layout styles. If you're not using bootstrap in your project, you'll need to add some CSS yourself. This will likely be updated in the future so that the bootstrap classes are optional, and if they're not included, some sensible default layout-related CSS will be used. ## Demo [http://sagalbot.github.io/vue-select/](http://sagalbot.github.io/vue-select/) @@ -35,12 +37,15 @@ export default { - `value` Represents the currently selected value(s). Can be `null`, an empty string, or `[]`. If `multiple` is true, the current value will be represented in an array, otherwise it will be a single string or object, depending on what you've passed for `options`. - twoway: true, - required: true -- `options` An array of strings or objects to be used as dropdown choices. Supports `['foo','bar']` & `[{label: 'Foo', value: 'foo'}]`. When using the `[{}]` syntax, the objects in the array can have as many properties as you need, as long as the object contains `value` and `label` keys. +- `options` An array of strings or objects to be used as dropdown choices. Supports `['foo','bar']` & `[{label: 'Foo', value: 'foo'}]`. When using the `[{}]` syntax, the objects in the array can have as many properties as you need, as long as the object contains a `label` key. If you are working with options where you are unable to add this key, you can also set a custom key using the `label` prop. - type: `Array` - default: `[]` +- `label` This is the key that will be used when generating labels for options. ex) If your dataset is `[{name: 'John Doe', age: 35}]` and you want the name to be used as the label, you would set the label prop as `name`. + - type: `String` + - default: `'label'` - `maxHeight` Limit the height of the dropdown menu. - type: String - - default: '400px' + - default: `'400px'` - `searchable` Toggle filtering of options. - type: Boolean - default: true @@ -49,23 +54,22 @@ export default { - default: true - `placeholder` Equivalent to `placeholder` attribute on an ``. - type: String - - default: ' ' -- `transition` Vue `transition` prop applied to the `.dropdown-menu`. - - type: Boolean - - default: true + - default: '' +- `transition` Vue `transition` prop applied to the `.dropdown-menu`. The component itself does not include any CSS for transitions, they must be implemented yourself. + - type: String + - default: '' ## Todos: +- load data from an ajax source with vue-resource +- rich option formatting with slots/partials +- fix layout/toggle issues when `searchable` is false +- `simple` prop that disables `search` and keeps a static `placeholder` regardless of current selection (useful for things like icon button dropdowns) +- less opinionated styles / only include css necessary to acheive layout (no colors, etc) +- ~~ability to pre-select options when using `[{label: 'Foo', value: 'foo'}]` syntax (already works with `['foo','bar','baz']` syntax)~~ - ~~fix layout issues with multiple selections~~ - ~~tags overflow outside `.dropdown`~~ - ~~search input overflows outside `.dropdown`~~ - ~~use an actual element instead of `:after` to detect clicks on dropdown caret~~ -- fix layout/toggle issues when `searchable` is false -- `simple` prop that disables `search` and keeps a static `placeholder` regardless of current selection (useful for things like icon button dropdowns) -- less opinionated styles / only include css necessary to acheive layout (no colors, etc) -- ability to pre-select options when using `[{label: 'Foo', value: 'foo'}]` syntax (already works with `['foo','bar','baz']` syntax) -- (maybe) load data from an ajax source with vue-resource -- more tests!! - ## Build Setup for Contributing @@ -78,14 +82,11 @@ npm install # serve with hot reload at localhost:8080 npm run dev -# build for demo site (without minification so visitors can inspect with Vue Dev Tools) -npm run build - -# lint all *.js and *.vue files -npm run lint - # run unit tests npm test + +# watch files and run unit tests on save +npm run test-watch ``` For more information see the [docs for vueify](https://github.com/vuejs/vueify). diff --git a/package.json b/package.json index 6b40586..cab70d3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "uglify": "cross-env NODE_ENV=production browserify -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js", "build": "cross-env NODE_ENV=production browserify -e src/main.js > dist/build.js", "lint": "eslint --ext .js,.vue src test/unit", - "test": "karma start karma.conf.js" + "test": "karma start karma.conf.js", + "test-watch": "karma start karma.conf.js --single-run false --auto-watch true" }, "browserify": { "transform": [ diff --git a/src/components/Select.vue b/src/components/Select.vue index cf82c21..2ee9f56 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -183,6 +183,10 @@ clearSearchOnSelect: { type: Boolean, default: true + }, + label: { + type: String, + default: 'label' } }, @@ -235,6 +239,11 @@ } }, + /** + * Toggle the visibility of the dropdown menu. + * @param {Event} e + * @return {void} + */ toggleDropdown( e ) { if( e.target === this.$els.openIndicator || e.target === this.$els.search || e.target === this.$els.toggle || e.target === this.$el ) { if( this.open ) { @@ -262,22 +271,46 @@ return option; }, + /** + * Generate the option label text. If {option} + * is an object, return option[this.label]. + * + * @param {Object || String} option + * @return {String} + */ getOptionLabel( option ) { - if( typeof option === 'object' && option.label ) { - return option.label; + if( typeof option === 'object' ) { + if( this.label && option[this.label] ) { + return option[this.label]; + } else if( option.label ) { + return option.label + } } - return option; }, + /** + * Move the typeAheadPointer visually up the list by + * subtracting the current index by one. + * @return {void} + */ typeAheadUp() { if (this.typeAheadPointer > 0) this.typeAheadPointer-- }, + /** + * Move the typeAheadPointer visually down the list by + * adding the current index by one. + * @return {void} + */ typeAheadDown() { if (this.typeAheadPointer < this.filteredOptions.length - 1) this.typeAheadPointer++ }, + /** + * Select the option at the current typeAheadPointer position. + * @return {void} + */ typeAheadSelect() { if( this.filteredOptions[ this.typeAheadPointer ] ) { this.select( this.filteredOptions[ this.typeAheadPointer ] ); diff --git a/test/unit/Select.spec.js b/test/unit/Select.spec.js index b0fefd4..000f46d 100644 --- a/test/unit/Select.spec.js +++ b/test/unit/Select.spec.js @@ -5,79 +5,58 @@ import vSelect from '../../src/components/Select.vue' describe('Select.vue', () => { - // it('sets open to true when search on focus and false on blur', () => { - // const vm = new Vue({ - // template: '