src/components/select/mixins/ajax.js

   1 module.exports = {
   2         props: {
   3                 /**
   4                  * Toggles the adding of a 'loading' class to the main
   5                  * .v-select wrapper. Useful to control UI state when
   6                  * results are being processed through AJAX.
   7                  */
   8                 loading: {
   9                         type: Boolean,
  10                         default: false
  11                 },
  12
  13                 /**
  14                  * Accept a callback function that will be
  15                  * run when the search text changes.
  16                  *
  17                  * loading() accepts a boolean value, and can
  18                  * be used to toggle a loading class from
  19                  * the onSearch callback.
  20                  *
  21                  * @param {search}  String          Current search text
  22                  * @param {loading} Function(bool)  Toggle loading class
  23                  */
  24                 onSearch: {
  25                         type: Function,
  26                         default: function(search, loading){}
  27                 }
  28         },
  29
  30         data() {
  31                 return {
  32       mutableLoading: false
  33     }
  34         },
  35
  36         watch: {
  37                 /**
  38                  * If a callback & search text has been provided,
  39                  * invoke the onSearch callback.
  40                  */
  41                 search() {
  42                         if (this.search.length > 0) {
  43                                 this.onSearch(this.search, this.toggleLoading)
  44         this.$emit('search', this.search, this.toggleLoading)
  45       }
  46                 },
  47     /**
  48                  * Sync the loading prop with the internal
  49                  * mutable loading value.
  50      * @param val
  51      */
  52                 loading(val) {
  53                         this.mutableLoading = val
  54                 }
  55         },
  56
  57         methods: {
  58                 /**
  59                  * Toggle this.loading. Optionally pass a boolean
  60                  * value. If no value is provided, this.loading
  61                  * will be set to the opposite of it's current value.
  62                  * @param toggle Boolean
  63                  * @returns {*}
  64                  */
  65                 toggleLoading(toggle = null) {
  66                         if (toggle == null) {
  67                                 return this.mutableLoading = !this.mutableLoading
  68                         }
  69                         return this.mutableLoading = toggle
  70                 }
  71         }
  72 }