mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00
Code Activity

Mograted to Vue2.0

Browse Source
This commit is contained in:
Rajesh Akkineni
2016-10-19 18:15:14 +05:30
parent df5827d3fe
commit 2ea337e1dc
1 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+20 -17
View File
@@ -172,9 +172,9 @@
<template> <template>
<div class="dropdown v-select" :class="dropdownClasses"> <div class="dropdown v-select" :class="dropdownClasses">
<div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button"> <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
<span class="selected-tag" v-for="option in valueAsArray" track-by="$index"> <span class="selected-tag" v-for="(option, index) in valueAsArray" track-by="index">
{{ getOptionLabel(option) }} {{ getOptionLabel(option) }}
<button v-if="multiple" @click="select(option)" type="button" class="close"> <button v-if="multiple" @click="select(option)" type="button" class="close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
@@ -182,7 +182,7 @@
</span> </span>
<input <input
v-el:search ref="search"
:debounce="debounce" :debounce="debounce"
v-model="search" v-model="search"
@keydown.delete="maybeDeleteValue" @keydown.delete="maybeDeleteValue"
@@ -199,23 +199,25 @@
:style="{ width: isValueEmpty ? '100%' : 'auto' }" :style="{ width: isValueEmpty ? '100%' : 'auto' }"
> >
<i v-el:open-indicator role="presentation" class="open-indicator"></i> <i ref="open-indicator" role="presentation" class="open-indicator"></i>
<slot name="spinner"> <slot name="spinner">
<div class="spinner" v-show="loading">Loading...</div> <div class="spinner" v-show="loading">Loading...</div>
</slot> </slot>
</div> </div>
<ul v-el:dropdown-menu v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }"> <ul ref="dropdown-menu" 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"> <li v-for="(option, index) in filteredOptions" track-by="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
<a @mousedown.prevent="select(option)"> <a @mousedown.prevent="select(option)">
{{ getOptionLabel(option) }} {{ getOptionLabel(option) }}
</a> </a>
</li> </li>
<li transition="fade" v-if="!filteredOptions.length" class="divider"></li> <transition name="fade">
<li transition="fade" v-if="!filteredOptions.length" class="text-center"> <li v-if="!filteredOptions.length" class="divider"></li>
<slot name="no-options">Sorry, no matching options.</slot> <li v-if="!filteredOptions.length" class="text-center">
</li> <slot name="no-options">Sorry, no matching options.</slot>
</li>
</transition>
</ul> </ul>
</div> </div>
</template> </template>
@@ -463,7 +465,8 @@
ref = val ref = val
} }
}) })
this.value.$remove(ref) var index = this.value.indexOf(ref)
this.value.splice(index, 1)
} else { } else {
this.value = null this.value = null
} }
@@ -477,7 +480,7 @@
onAfterSelect(option) { onAfterSelect(option) {
if (!this.multiple) { if (!this.multiple) {
this.open = !this.open this.open = !this.open
this.$els.search.blur() this.$refs.search.blur()
} }
if (this.clearSearchOnSelect) { if (this.clearSearchOnSelect) {
@@ -491,12 +494,12 @@
* @return {void} * @return {void}
*/ */
toggleDropdown(e) { toggleDropdown(e) {
if (e.target === this.$els.openIndicator || e.target === this.$els.search || e.target === this.$els.toggle || e.target === this.$el) { if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
if (this.open) { if (this.open) {
this.$els.search.blur() // dropdown will close on blur this.$refs.search.blur() // dropdown will close on blur
} else { } else {
this.open = true this.open = true
this.$els.search.focus() this.$refs.search.focus()
} }
} }
}, },
@@ -529,7 +532,7 @@
*/ */
onEscape() { onEscape() {
if (!this.search.length) { if (!this.search.length) {
this.$els.search.blur() this.$refs.search.blur()
} else { } else {
this.search = '' this.search = ''
} }
@@ -541,7 +544,7 @@
* @return {this.value} * @return {this.value}
*/ */
maybeDeleteValue() { maybeDeleteValue() {
if (!this.$els.search.value.length && this.value) { if (!this.$refs.search.value.length && this.value) {
return this.multiple ? this.value.pop() : this.$set('value', null) return this.multiple ? this.value.pop() : this.$set('value', null)
} }
}, },