mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-10 07:52:23 +03:00
Merge branch 'ft/vuepress-no-cli' into release/v3.0
# Conflicts: # src/mixins/typeAheadPointer.js
This commit is contained in:
+68
-68
@@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
+28
-22
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
module.exports = {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
typeAheadPointer: -1
|
||||
|
||||
Reference in New Issue
Block a user