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

Fix code style issues

This commit is contained in:
Lexxus
2017-12-29 12:07:15 +02:00
parent a54c4123e9
commit 4bf6c0ce44
7 changed files with 1353 additions and 1340 deletions
+2 -1
View File
@@ -11,7 +11,8 @@
"env": { "env": {
"browser": true, "browser": true,
"node": true, "node": true,
"es6": true "es6": true,
"jasmine": true
}, },
"extends": "standard" "extends": "standard"
+59 -51
View File
@@ -370,9 +370,9 @@
*/ */
options: { options: {
type: Array, type: Array,
default() { default () {
return [] return []
}, }
}, },
/** /**
@@ -469,13 +469,13 @@
*/ */
getOptionLabel: { getOptionLabel: {
type: Function, type: Function,
default(option) { default (option) {
if (typeof option === 'object') { if (typeof option === 'object') {
if (this.label && option[this.label]) { if (this.label && option[this.label]) {
return option[this.label] return option[this.label]
} }
} }
return option; return option
} }
}, },
@@ -538,7 +538,7 @@
*/ */
createOption: { createOption: {
type: Function, type: Function,
default(newOption) { default (newOption) {
if (typeof this.mutableOptions[0] === 'object') { if (typeof this.mutableOptions[0] === 'object') {
newOption = {[this.label]: newOption} newOption = {[this.label]: newOption}
} }
@@ -583,10 +583,10 @@
dir: { dir: {
type: String, type: String,
default: 'auto' default: 'auto'
}, }
}, },
data() { data () {
return { return {
search: '', search: '',
open: false, open: false,
@@ -598,12 +598,12 @@
watch: { watch: {
/** /**
* When the value prop changes, update * When the value prop changes, update
* the internal mutableValue. * the internal mutableValue.
* @param {mixed} val * @param {mixed} val
* @return {void} * @return {void}
*/ */
value(val) { value (val) {
this.mutableValue = val this.mutableValue = val
}, },
/** /**
@@ -612,11 +612,11 @@
* @param {string|object} old * @param {string|object} old
* @return {void} * @return {void}
*/ */
mutableValue(val, old) { mutableValue (val, old) {
if (this.multiple) { if (this.multiple) {
this.onChange ? this.onChange(val) : null if (this.onChange) this.onChange(val)
} else { } else {
this.onChange && val !== old ? this.onChange(val) : null if (this.onChange && val !== old) this.onChange(val)
} }
}, },
@@ -626,29 +626,29 @@
* @param {array} val * @param {array} val
* @return {void} * @return {void}
*/ */
options(val) { options (val) {
this.mutableOptions = val this.mutableOptions = val
}, },
/** /**
* Maybe reset the mutableValue * Maybe reset the mutableValue
* when mutableOptions change. * when mutableOptions change.
* @return {[type]} [description] * @return {[type]} [description]
*/ */
mutableOptions() { mutableOptions () {
if (!this.taggable && this.resetOnOptionsChange) { if (!this.taggable && this.resetOnOptionsChange) {
this.mutableValue = this.multiple ? [] : null this.mutableValue = this.multiple ? [] : null
} }
}, },
/** /**
* Always reset the mutableValue when * Always reset the mutableValue when
* the multiple prop changes. * the multiple prop changes.
* @param {Boolean} val * @param {Boolean} val
* @return {void} * @return {void}
*/ */
multiple(val) { multiple (val) {
this.mutableValue = val ? [] : null this.mutableValue = val ? [] : null
} }
}, },
@@ -656,10 +656,10 @@
* Clone props into mutable values, * Clone props into mutable values,
* attach any event listeners. * attach any event listeners.
*/ */
created() { created () {
this.mutableValue = this.value this.mutableValue = this.value
this.mutableOptions = this.options.slice(0) this.mutableOptions = this.options.slice(0)
this.mutableLoading = this.loading this.mutableLoading = this.loading
this.$on('option:created', this.maybePushTag) this.$on('option:created', this.maybePushTag)
}, },
@@ -671,7 +671,7 @@
* @param {Object|String} option * @param {Object|String} option
* @return {void} * @return {void}
*/ */
select(option) { select (option) {
if (this.isOptionSelected(option)) { if (this.isOptionSelected(option)) {
this.deselect(option) this.deselect(option)
} else { } else {
@@ -696,15 +696,15 @@
* @param {Object|String} option * @param {Object|String} option
* @return {void} * @return {void}
*/ */
deselect(option) { deselect (option) {
if (this.multiple) { if (this.multiple) {
let ref = -1 let ref = -1
this.mutableValue.forEach((val) => { this.mutableValue.forEach((val) => {
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) { if (val === option || (typeof val === 'object' && val[this.label] === option[this.label])) {
ref = val ref = val
} }
}) })
var index = this.mutableValue.indexOf(ref) const index = this.mutableValue.indexOf(ref)
this.mutableValue.splice(index, 1) this.mutableValue.splice(index, 1)
} else { } else {
this.mutableValue = null this.mutableValue = null
@@ -716,7 +716,7 @@
* @param {Object|String} option * @param {Object|String} option
* @return {void} * @return {void}
*/ */
onAfterSelect(option) { onAfterSelect (option) {
if (this.closeOnSelect) { if (this.closeOnSelect) {
this.open = !this.open this.open = !this.open
this.$refs.search.blur() this.$refs.search.blur()
@@ -732,8 +732,9 @@
* @param {Event} e * @param {Event} e
* @return {void} * @return {void}
*/ */
toggleDropdown(e) { toggleDropdown (e) {
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.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.$refs.search.blur() // dropdown will close on blur this.$refs.search.blur() // dropdown will close on blur
} else { } else {
@@ -750,7 +751,7 @@
* @param {Object|String} option * @param {Object|String} option
* @return {Boolean} True when selected | False otherwise * @return {Boolean} True when selected | False otherwise
*/ */
isOptionSelected(option) { isOptionSelected (option) {
if (this.multiple && this.mutableValue) { if (this.multiple && this.mutableValue) {
let selected = false let selected = false
this.mutableValue.forEach(opt => { this.mutableValue.forEach(opt => {
@@ -758,8 +759,7 @@
selected = true selected = true
} else if (typeof opt === 'object' && opt[this.label] === option) { } else if (typeof opt === 'object' && opt[this.label] === option) {
selected = true selected = true
} } else if (opt === option) {
else if (opt === option) {
selected = true selected = true
} }
}) })
@@ -774,7 +774,7 @@
* Otherwise, blur the search input to close the dropdown. * Otherwise, blur the search input to close the dropdown.
* @return {void} * @return {void}
*/ */
onEscape() { onEscape () {
if (!this.search.length) { if (!this.search.length) {
this.$refs.search.blur() this.$refs.search.blur()
} else { } else {
@@ -787,7 +787,7 @@
* @emits {search:blur} * @emits {search:blur}
* @return {void} * @return {void}
*/ */
onSearchBlur() { onSearchBlur () {
if (this.clearSearchOnBlur) { if (this.clearSearchOnBlur) {
this.search = '' this.search = ''
} }
@@ -800,7 +800,7 @@
* @emits {search:focus} * @emits {search:focus}
* @return {void} * @return {void}
*/ */
onSearchFocus() { onSearchFocus () {
this.open = true this.open = true
this.$emit('search:focus') this.$emit('search:focus')
}, },
@@ -810,10 +810,18 @@
* text in the search input, & there's tags to delete * text in the search input, & there's tags to delete
* @return {this.value} * @return {this.value}
*/ */
maybeDeleteValue() { maybeDeleteValue () {
let value = null
if (!this.$refs.search.value.length && this.mutableValue) { if (!this.$refs.search.value.length && this.mutableValue) {
return this.multiple ? this.mutableValue.pop() : this.mutableValue = null if (this.multiple) {
value = this.mutableValue.pop()
} else {
value = this.mutableValue = null
}
} }
return value
}, },
/** /**
@@ -823,7 +831,7 @@
* @param {Object || String} option * @param {Object || String} option
* @return {boolean} * @return {boolean}
*/ */
optionExists(option) { optionExists (option) {
let exists = false let exists = false
this.mutableOptions.forEach(opt => { this.mutableOptions.forEach(opt => {
@@ -844,7 +852,7 @@
* @param {Object || String} option * @param {Object || String} option
* @return {void} * @return {void}
*/ */
maybePushTag(option) { maybePushTag (option) {
if (this.pushTags) { if (this.pushTags) {
this.mutableOptions.push(option) this.mutableOptions.push(option)
} }
@@ -857,7 +865,7 @@
* Classes to be output on .dropdown * Classes to be output on .dropdown
* @return {Object} * @return {Object}
*/ */
dropdownClasses() { dropdownClasses () {
return { return {
open: this.dropdownOpen, open: this.dropdownOpen,
single: !this.multiple, single: !this.multiple,
@@ -874,7 +882,7 @@
* If search text should clear on blur * If search text should clear on blur
* @return {Boolean} True when single and clearSearchOnSelect * @return {Boolean} True when single and clearSearchOnSelect
*/ */
clearSearchOnBlur() { clearSearchOnBlur () {
return this.clearSearchOnSelect && !this.multiple return this.clearSearchOnSelect && !this.multiple
}, },
@@ -883,7 +891,7 @@
* search input * search input
* @return {Boolean} True if non empty value * @return {Boolean} True if non empty value
*/ */
searching() { searching () {
return !!this.search return !!this.search
}, },
@@ -892,7 +900,7 @@
* dropdown menu. * dropdown menu.
* @return {Boolean} True if open * @return {Boolean} True if open
*/ */
dropdownOpen() { dropdownOpen () {
return this.noDrop ? false : this.open && !this.mutableLoading return this.noDrop ? false : this.open && !this.mutableLoading
}, },
@@ -901,9 +909,9 @@
* & there is no value selected. * & there is no value selected.
* @return {String} Placeholder text * @return {String} Placeholder text
*/ */
searchPlaceholder() { searchPlaceholder () {
if (this.isValueEmpty && this.placeholder) { if (this.isValueEmpty && this.placeholder) {
return this.placeholder; return this.placeholder
} }
}, },
@@ -915,7 +923,7 @@
* *
* @return {array} * @return {array}
*/ */
filteredOptions() { filteredOptions () {
if (!this.filterable && !this.taggable) { if (!this.filterable && !this.taggable) {
return this.mutableOptions.slice() return this.mutableOptions.slice()
} }
@@ -937,7 +945,7 @@
* Check if there aren't any options selected. * Check if there aren't any options selected.
* @return {Boolean} * @return {Boolean}
*/ */
isValueEmpty() { isValueEmpty () {
if (this.mutableValue) { if (this.mutableValue) {
if (typeof this.mutableValue === 'object') { if (typeof this.mutableValue === 'object') {
return !Object.keys(this.mutableValue).length return !Object.keys(this.mutableValue).length
@@ -945,14 +953,14 @@
return !this.mutableValue.length return !this.mutableValue.length
} }
return true; return true
}, },
/** /**
* Return the current value in array format. * Return the current value in array format.
* @return {Array} * @return {Array}
*/ */
valueAsArray() { valueAsArray () {
if (this.multiple) { if (this.multiple) {
return this.mutableValue return this.mutableValue
} else if (this.mutableValue) { } else if (this.mutableValue) {
@@ -961,7 +969,7 @@
return [] return []
} }
}, }
} }
</script> </script>
+3 -3
View File
@@ -14,18 +14,18 @@ Vue.config.devtools = true
new Vue({ new Vue({
el: '#app', el: '#app',
data: { data: {
placeholder: "placeholder", placeholder: 'placeholder',
value: null, value: null,
options: countries, options: countries,
ajaxRes: [], ajaxRes: [],
people: [] people: []
}, },
methods: { methods: {
search(search, loading) { search (search, loading) {
loading(true) loading(true)
this.getRepositories(search, loading, this) this.getRepositories(search, loading, this)
}, },
searchPeople(search, loading) { searchPeople (search, loading) {
loading(true) loading(true)
this.getPeople(loading, this) this.getPeople(loading, this)
}, },
+62 -59
View File
@@ -1,72 +1,75 @@
module.exports = { module.exports = {
props: { props: {
/** /**
* Toggles the adding of a 'loading' class to the main * Toggles the adding of a 'loading' class to the main
* .v-select wrapper. Useful to control UI state when * .v-select wrapper. Useful to control UI state when
* results are being processed through AJAX. * results are being processed through AJAX.
*/ */
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* Accept a callback function that will be * Accept a callback function that will be
* run when the search text changes. * run when the search text changes.
* *
* loading() accepts a boolean value, and can * loading() accepts a boolean value, and can
* be used to toggle a loading class from * be used to toggle a loading class from
* the onSearch callback. * the onSearch callback.
* *
* @param {search} String Current search text * @param {search} String Current search text
* @param {loading} Function(bool) Toggle loading class * @param {loading} Function(bool) Toggle loading class
*/ */
onSearch: { onSearch: {
type: Function, type: Function,
default: function(search, loading){} default: function (search, loading) {}
} }
}, },
data() { data () {
return { return {
mutableLoading: false mutableLoading: false
} }
}, },
watch: { watch: {
/** /**
* If a callback & search text has been provided, * If a callback & search text has been provided,
* invoke the onSearch callback. * invoke the onSearch callback.
*/ */
search() { search () {
if (this.search.length > 0) { if (this.search.length > 0) {
this.onSearch(this.search, this.toggleLoading) this.onSearch(this.search, this.toggleLoading)
this.$emit('search', this.search, this.toggleLoading) this.$emit('search', this.search, this.toggleLoading)
} }
}, },
/** /**
* Sync the loading prop with the internal * Sync the loading prop with the internal
* mutable loading value. * mutable loading value.
* @param val * @param val
*/ */
loading(val) { loading (val) {
this.mutableLoading = val this.mutableLoading = val
} }
}, },
methods: { methods: {
/** /**
* Toggle this.loading. Optionally pass a boolean * Toggle this.loading. Optionally pass a boolean
* value. If no value is provided, this.loading * value. If no value is provided, this.loading
* will be set to the opposite of it's current value. * will be set to the opposite of it's current value.
* @param toggle Boolean * @param toggle Boolean
* @returns {*} * @returns {*}
*/ */
toggleLoading(toggle = null) { toggleLoading (toggle = null) {
if (toggle == null) { if (toggle == null) {
return this.mutableLoading = !this.mutableLoading this.mutableLoading = !this.mutableLoading
} } else {
return this.mutableLoading = toggle this.mutableLoading = toggle
} }
}
return this.mutableLoading
}
}
} }
+21 -14
View File
@@ -2,7 +2,7 @@
module.exports = { module.exports = {
watch: { watch: {
typeAheadPointer() { typeAheadPointer () {
this.maybeAdjustScroll() this.maybeAdjustScroll()
} }
}, },
@@ -14,14 +14,14 @@ module.exports = {
* overflow bounds. * overflow bounds.
* @returns {*} * @returns {*}
*/ */
maybeAdjustScroll() { maybeAdjustScroll () {
let pixelsToPointerTop = this.pixelsToPointerTop() let pixelsToPointerTop = this.pixelsToPointerTop()
let pixelsToPointerBottom = this.pixelsToPointerBottom() let pixelsToPointerBottom = this.pixelsToPointerBottom()
if ( pixelsToPointerTop <= this.viewport().top) { if (pixelsToPointerTop <= this.viewport().top) {
return this.scrollTo( pixelsToPointerTop ) return this.scrollTo(pixelsToPointerTop)
} else if (pixelsToPointerBottom >= this.viewport().bottom) { } else if (pixelsToPointerBottom >= this.viewport().bottom) {
return this.scrollTo( this.viewport().top + this.pointerHeight() ) return this.scrollTo(this.viewport().top + this.pointerHeight())
} }
}, },
@@ -30,9 +30,10 @@ module.exports = {
* list to the top of the current pointer element. * list to the top of the current pointer element.
* @returns {number} * @returns {number}
*/ */
pixelsToPointerTop() { pixelsToPointerTop () {
let pixelsToPointerTop = 0 let pixelsToPointerTop = 0
if( this.$refs.dropdownMenu ) {
if (this.$refs.dropdownMenu) {
for (let i = 0; i < this.typeAheadPointer; i++) { for (let i = 0; i < this.typeAheadPointer; i++) {
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
} }
@@ -45,7 +46,7 @@ module.exports = {
* list to the bottom of the current pointer element. * list to the bottom of the current pointer element.
* @returns {*} * @returns {*}
*/ */
pixelsToPointerBottom() { pixelsToPointerBottom () {
return this.pixelsToPointerTop() + this.pointerHeight() return this.pixelsToPointerTop() + this.pointerHeight()
}, },
@@ -53,7 +54,7 @@ module.exports = {
* The offsetHeight of the current pointer element. * The offsetHeight of the current pointer element.
* @returns {number} * @returns {number}
*/ */
pointerHeight() { pointerHeight () {
let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false
return element ? element.offsetHeight : 0 return element ? element.offsetHeight : 0
}, },
@@ -62,9 +63,9 @@ module.exports = {
* The currently viewable portion of the dropdownMenu. * The currently viewable portion of the dropdownMenu.
* @returns {{top: (string|*|number), bottom: *}} * @returns {{top: (string|*|number), bottom: *}}
*/ */
viewport() { viewport () {
return { return {
top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop: 0, top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop : 0,
bottom: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop : 0 bottom: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop : 0
} }
}, },
@@ -74,8 +75,14 @@ module.exports = {
* @param position * @param position
* @returns {*} * @returns {*}
*/ */
scrollTo(position) { scrollTo (position) {
return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop = position : null let result = null
},
if (this.$refs.dropdownMenu) {
result = this.$refs.dropdownMenu.scrollTop = position
}
return result
}
} }
} }
+13 -13
View File
@@ -1,12 +1,12 @@
module.exports = { module.exports = {
data() { data () {
return { return {
typeAheadPointer: -1 typeAheadPointer: -1
} }
}, },
watch: { watch: {
filteredOptions() { filteredOptions () {
this.typeAheadPointer = 0 this.typeAheadPointer = 0
} }
}, },
@@ -17,10 +17,10 @@ module.exports = {
* subtracting the current index by one. * subtracting the current index by one.
* @return {void} * @return {void}
*/ */
typeAheadUp() { typeAheadUp () {
if (this.typeAheadPointer > 0) { if (this.typeAheadPointer > 0) {
this.typeAheadPointer-- this.typeAheadPointer--
if( this.maybeAdjustScroll ) { if (this.maybeAdjustScroll) {
this.maybeAdjustScroll() this.maybeAdjustScroll()
} }
} }
@@ -31,10 +31,10 @@ module.exports = {
* adding the current index by one. * adding the current index by one.
* @return {void} * @return {void}
*/ */
typeAheadDown() { typeAheadDown () {
if (this.typeAheadPointer < this.filteredOptions.length - 1) { if (this.typeAheadPointer < this.filteredOptions.length - 1) {
this.typeAheadPointer++ this.typeAheadPointer++
if( this.maybeAdjustScroll ) { if (this.maybeAdjustScroll) {
this.maybeAdjustScroll() this.maybeAdjustScroll()
} }
} }
@@ -45,16 +45,16 @@ module.exports = {
* Optionally clear the search input on selection. * Optionally clear the search input on selection.
* @return {void} * @return {void}
*/ */
typeAheadSelect() { typeAheadSelect () {
if( this.filteredOptions[ this.typeAheadPointer ] ) { if (this.filteredOptions[ this.typeAheadPointer ]) {
this.select( this.filteredOptions[ this.typeAheadPointer ] ); this.select(this.filteredOptions[this.typeAheadPointer])
} else if (this.taggable && this.search.length){ } else if (this.taggable && this.search.length) {
this.select(this.search) this.select(this.search)
} }
if( this.clearSearchOnSelect ) { if (this.clearSearchOnSelect) {
this.search = ""; this.search = ''
} }
}, }
} }
} }
File diff suppressed because it is too large Load Diff