diff --git a/README.md b/README.md index 5091d36..7a3008c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ - Supports Vuex - Select Single/Multiple Options - Bootstrap Friendly Markup -- +90% Test Coverage +- +95% Test Coverage #### Upcoming/In Progress @@ -18,12 +18,13 @@ - Rich Option Templating - Asyncronous Option Loading -## Demo +## Live Examples & Docs [http://sagalbot.github.io/vue-select/](http://sagalbot.github.io/vue-select/) ## Install / Usage +vue-select is now published on npm, **huge thanks to [@onefriendaday](https://github.com/onefriendaday)** for changing ownership of [his package](https://github.com/onefriendaday/vue-select). ``` bash -$ npm install sagalbot/vue-select +$ npm install vue-select ``` ```html diff --git a/package.json b/package.json index 3725e6f..3148a81 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-select", - "version": "1.1.1", + "version": "1.1.4", "description": "A Vue.js project", "author": "Jeff Sagal ", "private": false, diff --git a/src/components/Select.vue b/src/components/Select.vue index d943d8c..e8e0989 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -138,8 +138,8 @@ v-model="search" @keydown.delete="maybeDeleteValue" @keyup.esc="onEscape" - @keyup.up.prevent="typeAheadUp" - @keyup.down.prevent="typeAheadDown" + @keydown.up.prevent="typeAheadUp" + @keydown.down.prevent="typeAheadDown" @keyup.enter.prevent="typeAheadSelect" @blur="open = false" @focus="open = true" @@ -265,6 +265,24 @@ default: 'label' }, + /** + * Callback to generate the label text. If {option} + * is an object, returns option[this.label] by default. + * @param {Object || String} option + * @return {String} + */ + getOptionLabel: { + type: Function, + default(option) { + if( typeof option === 'object' ) { + if( this.label && option[this.label] ) { + return option[this.label] + } + } + return option; + } + }, + /** * An optional callback function that is called each time the selected * value(s) change. When integrating with Vuex, use this callback to trigger @@ -419,22 +437,6 @@ return this.value === 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' ) { - if( this.label && option[this.label] ) { - return option[this.label] - } - } - return option; - }, - /** * If there is any text in the search input, remove it. * Otherwise, blur the search input to close the dropdown. diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/mixins/pointerScroll.js b/src/mixins/pointerScroll.js index 6cb24bd..de7d6e8 100644 --- a/src/mixins/pointerScroll.js +++ b/src/mixins/pointerScroll.js @@ -1,4 +1,4 @@ -export default { +module.exports = { watch: { typeAheadPointer() { this.maybeAdjustScroll() diff --git a/src/mixins/typeAheadPointer.js b/src/mixins/typeAheadPointer.js index 62279d9..26c9374 100644 --- a/src/mixins/typeAheadPointer.js +++ b/src/mixins/typeAheadPointer.js @@ -1,4 +1,4 @@ -export default { +module.exports = { data() { return { typeAheadPointer: -1 diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index 23abfb9..099743e 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -327,7 +327,7 @@ describe('Select.vue', () => { }) }) - it('should move the pointer visually up the list on up arrow keyUp', () => { + it('should move the pointer visually up the list on up arrow keyDown', () => { const vm = new Vue({ template: '
', components: {vSelect}, @@ -338,11 +338,11 @@ describe('Select.vue', () => { vm.$children[0].typeAheadPointer = 1 - trigger(vm.$children[0].$els.search, 'keyup', (e) => e.keyCode = 38) + trigger(vm.$children[0].$els.search, 'keydown', (e) => e.keyCode = 38) expect(vm.$children[0].typeAheadPointer).toEqual(0) }) - it('should move the pointer visually down the list on down arrow keyUp', () => { + it('should move the pointer visually down the list on down arrow keyDown', () => { const vm = new Vue({ template: '
', components: {vSelect}, @@ -352,7 +352,7 @@ describe('Select.vue', () => { }).$mount() vm.$children[0].typeAheadPointer = 1 - trigger(vm.$children[0].$els.search, 'keyup', (e) => e.keyCode = 40) + trigger(vm.$children[0].$els.search, 'keydown', (e) => e.keyCode = 40) expect(vm.$children[0].typeAheadPointer).toEqual(2) }) @@ -371,7 +371,7 @@ describe('Select.vue', () => { }) describe('Automatic Scrolling', () => { - it('should check if the scroll position needs to be adjusted on up arrow keyUp', () => { + it('should check if the scroll position needs to be adjusted on up arrow keyDown', () => { const vm = new Vue({ template: '
', components: {vSelect}, @@ -382,11 +382,11 @@ describe('Select.vue', () => { vm.$children[0].typeAheadPointer = 1 spyOn(vm.$children[0], 'maybeAdjustScroll') - trigger(vm.$children[0].$els.search, 'keyup', (e) => e.keyCode = 38) + trigger(vm.$children[0].$els.search, 'keydown', (e) => e.keyCode = 38) expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled() }) - it('should check if the scroll position needs to be adjusted on down arrow keyUp', () => { + it('should check if the scroll position needs to be adjusted on down arrow keyDown', () => { const vm = new Vue({ template: '
', components: {vSelect}, @@ -396,7 +396,7 @@ describe('Select.vue', () => { }).$mount() spyOn(vm.$children[0], 'maybeAdjustScroll') - trigger(vm.$children[0].$els.search, 'keyup', (e) => e.keyCode = 40) + trigger(vm.$children[0].$els.search, 'keydown', (e) => e.keyCode = 40) expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled() })