mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

minimal progress

Browse Source
This commit is contained in:
Jeff Sagal
2016-05-30 09:56:42 -07:00
parent f682f03946
commit 7ba45e9d10
1 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+46 -14
View File
@@ -58,7 +58,7 @@
.v-select > .dropdown-menu { .v-select > .dropdown-menu {
margin: 0; margin: 0;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: scroll;
border-top: none; border-top: none;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@@ -152,17 +152,19 @@
<i v-el:open-indicator role="presentation" class="open-indicator"></i> <i v-el:open-indicator role="presentation" class="open-indicator"></i>
</div> </div>
<ul v-show="open" v-el:dropdown-menu :transition="transition" :style="{ 'max-height': maxHeight }" class="dropdown-menu animated"> <div v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
<li v-for="option in filteredOptions" track-by="$index" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }" @mouseover="typeAheadPointer = $index"> <ul class="options" v-el:dropdown-menu>
<a @mousedown.prevent="select(option)"> <li v-for="option in filteredOptions" track-by="$index" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }" @mouseover="typeAheadPointer = $index">
{{ getOptionLabel(option) }} <a @mousedown.prevent="select(option)">
</a> {{ getOptionLabel(option) }}
</li> </a>
<li transition="fade" v-if="!filteredOptions.length" class="divider"></li> </li>
<li transition="fade" v-if="!filteredOptions.length" class="text-center"> <li transition="fade" v-if="!filteredOptions.length" class="divider"></li>
<slot name="no-options">Sorry, no matching options.</slot> <li transition="fade" v-if="!filteredOptions.length" class="text-center">
</li> <slot name="no-options">Sorry, no matching options.</slot>
</ul> </li>
</ul>
</div>
</div> </div>
</template> </template>
@@ -440,7 +442,10 @@
* @return {void} * @return {void}
*/ */
typeAheadUp() { typeAheadUp() {
if (this.typeAheadPointer > 0) this.typeAheadPointer-- if (this.typeAheadPointer > 0) {
this.typeAheadPointer--
this.maybeAdjustScrollPosition()
}
}, },
/** /**
@@ -449,7 +454,10 @@
* @return {void} * @return {void}
*/ */
typeAheadDown() { typeAheadDown() {
if (this.typeAheadPointer < this.filteredOptions.length - 1) this.typeAheadPointer++ if (this.typeAheadPointer < this.filteredOptions.length - 1) {
this.typeAheadPointer++
this.maybeAdjustScrollPosition()
}
}, },
/** /**
@@ -469,6 +477,26 @@
} }
}, },
maybeAdjustScrollPosition() {
let offset = this.$els.dropdownMenu.children[0].offsetHeight * ( this.typeAheadPointer + 1 )
let bounds = this.$els.dropdownMenu.offsetHeight
let scrollTo = this.$els.dropdownMenu.children[this.typeAheadPointer]
console.dir(this.$els.dropdownMenu)
// if( offset > listHeight ) {
// console.log('scroll')
// }
// console.log(offset, listHeight)
},
test(e) {
console.dir(e)
},
/** /**
* If there is any text in the search input, remove it. * If there is any text in the search input, remove it.
* Otherwise, blur the search input to close the dropdown. * Otherwise, blur the search input to close the dropdown.
@@ -517,6 +545,10 @@
computed: { computed: {
scrollTop() {
return [this.$els.dropdownMenu.scrollTop,this.$el.scrollTop]
},
/** /**
* Classes to be output on .dropdown * Classes to be output on .dropdown
* @return {Object} * @return {Object}