From 945e908e3f6732e0dfa492878f7a59b7f78852c7 Mon Sep 17 00:00:00 2001 From: Jeff Date: Sun, 12 Aug 2018 19:38:51 -0700 Subject: [PATCH] update mixins to ES6 module exports --- src/mixins/ajax.js | 136 ++++++++++++++++----------------- src/mixins/pointerScroll.js | 50 ++++++------ src/mixins/typeAheadPointer.js | 32 ++++---- 3 files changed, 112 insertions(+), 106 deletions(-) diff --git a/src/mixins/ajax.js b/src/mixins/ajax.js index b897053..0040ce1 100644 --- a/src/mixins/ajax.js +++ b/src/mixins/ajax.js @@ -1,72 +1,72 @@ -module.exports = { - 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) - } - }, +export default { + props: { /** - * Sync the loading prop with the internal - * mutable loading value. + * 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) {} // 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 */ - loading(val) { - this.mutableLoading = val - } - }, + loading(val) { + this.mutableLoading = val; + } + }, - methods: { - /** - * Toggle this.loading. Optionally pass a boolean - * value. If no value is provided, this.loading - * will be set to the opposite of it's current value. - * @param toggle Boolean - * @returns {*} - */ - toggleLoading(toggle = null) { - if (toggle == null) { - return this.mutableLoading = !this.mutableLoading - } - return this.mutableLoading = toggle - } - } -} + methods: { + /** + * Toggle this.loading. Optionally pass a boolean + * value. If no value is provided, this.loading + * will be set to the opposite of it's current value. + * @param toggle Boolean + * @returns {*} + */ + toggleLoading(toggle = null) { + if (toggle == null) { + return (this.mutableLoading = !this.mutableLoading); + } + return (this.mutableLoading = toggle); + } + } +}; diff --git a/src/mixins/pointerScroll.js b/src/mixins/pointerScroll.js index 5950959..160f0c0 100644 --- a/src/mixins/pointerScroll.js +++ b/src/mixins/pointerScroll.js @@ -1,9 +1,7 @@ -// flow - -module.exports = { +export default { watch: { typeAheadPointer() { - this.maybeAdjustScroll() + this.maybeAdjustScroll(); } }, @@ -15,13 +13,13 @@ module.exports = { * @returns {*} */ maybeAdjustScroll() { - let pixelsToPointerTop = this.pixelsToPointerTop() - let pixelsToPointerBottom = this.pixelsToPointerBottom() + let pixelsToPointerTop = this.pixelsToPointerTop(); + let pixelsToPointerBottom = this.pixelsToPointerBottom(); - if ( pixelsToPointerTop <= this.viewport().top) { - return this.scrollTo( pixelsToPointerTop ) + if (pixelsToPointerTop <= this.viewport().top) { + return this.scrollTo(pixelsToPointerTop); } 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} */ pixelsToPointerTop() { - let pixelsToPointerTop = 0 - if( this.$refs.dropdownMenu ) { + let pixelsToPointerTop = 0; + if (this.$refs.dropdownMenu) { 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 {*} */ pixelsToPointerBottom() { - return this.pixelsToPointerTop() + this.pointerHeight() + return this.pixelsToPointerTop() + this.pointerHeight(); }, /** @@ -54,8 +53,10 @@ module.exports = { * @returns {number} */ pointerHeight() { - let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false - return element ? element.offsetHeight : 0 + let element = this.$refs.dropdownMenu + ? this.$refs.dropdownMenu.children[this.typeAheadPointer] + : false; + return element ? element.offsetHeight : 0; }, /** @@ -64,9 +65,12 @@ module.exports = { */ viewport() { return { - top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop: 0, - bottom: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.offsetHeight + 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 + }; }, /** @@ -75,7 +79,9 @@ module.exports = { * @returns {*} */ scrollTo(position) { - return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop = position : null - }, + return this.$refs.dropdownMenu + ? (this.$refs.dropdownMenu.scrollTop = position) + : null; + } } -} +}; diff --git a/src/mixins/typeAheadPointer.js b/src/mixins/typeAheadPointer.js index 26c9374..456a9d4 100644 --- a/src/mixins/typeAheadPointer.js +++ b/src/mixins/typeAheadPointer.js @@ -1,13 +1,13 @@ -module.exports = { +export default { data() { return { typeAheadPointer: -1 - } + }; }, watch: { filteredOptions() { - this.typeAheadPointer = 0 + this.typeAheadPointer = 0; } }, @@ -19,9 +19,9 @@ module.exports = { */ typeAheadUp() { if (this.typeAheadPointer > 0) { - this.typeAheadPointer-- - if( this.maybeAdjustScroll ) { - this.maybeAdjustScroll() + this.typeAheadPointer--; + if (this.maybeAdjustScroll) { + this.maybeAdjustScroll(); } } }, @@ -33,9 +33,9 @@ module.exports = { */ typeAheadDown() { if (this.typeAheadPointer < this.filteredOptions.length - 1) { - this.typeAheadPointer++ - if( this.maybeAdjustScroll ) { - this.maybeAdjustScroll() + this.typeAheadPointer++; + if (this.maybeAdjustScroll) { + this.maybeAdjustScroll(); } } }, @@ -46,15 +46,15 @@ module.exports = { * @return {void} */ typeAheadSelect() { - if( this.filteredOptions[ this.typeAheadPointer ] ) { - this.select( this.filteredOptions[ this.typeAheadPointer ] ); - } else if (this.taggable && this.search.length){ - this.select(this.search) + if (this.filteredOptions[this.typeAheadPointer]) { + this.select(this.filteredOptions[this.typeAheadPointer]); + } else if (this.taggable && this.search.length) { + this.select(this.search); } - if( this.clearSearchOnSelect ) { + if (this.clearSearchOnSelect) { this.search = ""; } - }, + } } -} \ No newline at end of file +};