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

update mixins to ES6 module exports

Browse Source
This commit is contained in:
Jeff
2018-08-12 19:38:51 -07:00
parent 48782a7664
commit 945e908e3f
3 changed files with 112 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/mixins/ajax.js
+68 -68
View File
@@ -1,72 +1,72 @@
module.exports = { export default {
props: { props: {
/**
* Toggles the adding of a 'loading' class to the main
* .v-select wrapper. Useful to control UI state when
* results are being processed through AJAX.
*/
loading: {
type: Boolean,
default: false
},
/**
* Accept a callback function that will be
* run when the search text changes.
*
* loading() accepts a boolean value, and can
* be used to toggle a loading class from
* the onSearch callback.
*
* @param {search} String Current search text
* @param {loading} Function(bool) Toggle loading class
*/
onSearch: {
type: Function,
default: function(search, loading){}
}
},
data() {
return {
mutableLoading: false
}
},
watch: {
/**
* If a callback & search text has been provided,
* invoke the onSearch callback.
*/
search() {
if (this.search.length > 0) {
this.onSearch(this.search, this.toggleLoading)
this.$emit('search', this.search, this.toggleLoading)
}
},
/** /**
* Sync the loading prop with the internal * Toggles the adding of a 'loading' class to the main
* mutable loading value. * .v-select wrapper. Useful to control UI state when
* results are being processed through AJAX.
*/
loading: {
type: Boolean,
default: false
},
/**
* Accept a callback function that will be
* run when the search text changes.
*
* loading() accepts a boolean value, and can
* be used to toggle a loading class from
* the onSearch callback.
*
* @param {search} String Current search text
* @param {loading} Function(bool) Toggle loading class
*/
onSearch: {
type: Function,
default: function(search, loading) {} // eslint-disable-line no-unused-vars
}
},
data() {
return {
mutableLoading: false
};
},
watch: {
/**
* If a callback & search text has been provided,
* invoke the onSearch callback.
*/
search() {
if (this.search.length > 0) {
this.onSearch(this.search, this.toggleLoading);
this.$emit("search", this.search, this.toggleLoading);
}
},
/**
* Sync the loading prop with the internal
* 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 return (this.mutableLoading = !this.mutableLoading);
} }
return this.mutableLoading = toggle return (this.mutableLoading = toggle);
} }
} }
} };
src/mixins/pointerScroll.js
+28 -22
View File
@@ -1,9 +1,7 @@
// flow export default {
module.exports = {
watch: { watch: {
typeAheadPointer() { typeAheadPointer() {
this.maybeAdjustScroll() this.maybeAdjustScroll();
} }
}, },
@@ -15,13 +13,13 @@ module.exports = {
* @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());
} }
}, },
@@ -31,13 +29,14 @@ module.exports = {
* @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;
} }
} }
return pixelsToPointerTop return pixelsToPointerTop;
}, },
/** /**
@@ -46,7 +45,7 @@ module.exports = {
* @returns {*} * @returns {*}
*/ */
pixelsToPointerBottom() { pixelsToPointerBottom() {
return this.pixelsToPointerTop() + this.pointerHeight() return this.pixelsToPointerTop() + this.pointerHeight();
}, },
/** /**
@@ -54,8 +53,10 @@ module.exports = {
* @returns {number} * @returns {number}
*/ */
pointerHeight() { pointerHeight() {
let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false let element = this.$refs.dropdownMenu
return element ? element.offsetHeight : 0 ? this.$refs.dropdownMenu.children[this.typeAheadPointer]
: false;
return element ? element.offsetHeight : 0;
}, },
/** /**
@@ -64,9 +65,12 @@ module.exports = {
*/ */
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
};
}, },
/** /**
@@ -75,7 +79,9 @@ module.exports = {
* @returns {*} * @returns {*}
*/ */
scrollTo(position) { scrollTo(position) {
return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop = position : null return this.$refs.dropdownMenu
}, ? (this.$refs.dropdownMenu.scrollTop = position)
: null;
}
} }
} };
src/mixins/typeAheadPointer.js
+16 -16
View File
@@ -1,13 +1,13 @@
module.exports = { export default {
data() { data() {
return { return {
typeAheadPointer: -1 typeAheadPointer: -1
} };
}, },
watch: { watch: {
filteredOptions() { filteredOptions() {
this.typeAheadPointer = 0 this.typeAheadPointer = 0;
} }
}, },
@@ -19,9 +19,9 @@ module.exports = {
*/ */
typeAheadUp() { typeAheadUp() {
if (this.typeAheadPointer > 0) { if (this.typeAheadPointer > 0) {
this.typeAheadPointer-- this.typeAheadPointer--;
if( this.maybeAdjustScroll ) { if (this.maybeAdjustScroll) {
this.maybeAdjustScroll() this.maybeAdjustScroll();
} }
} }
}, },
@@ -33,9 +33,9 @@ module.exports = {
*/ */
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();
} }
} }
}, },
@@ -46,15 +46,15 @@ module.exports = {
* @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 = "";
} }
}, }
} }
} };