feat(1763): Add new func prop for sorting search results

Author: mattelen

src/Multiselect.vue

@@ -327,6 +327,11 @@ export default {
       type: Number,
       default: 0
     },
+    /**
+     * Adds Required attribute to the input element when there is no value selected
+     * @default false
+     * @type {Boolean}
+     */
     required: {
       type: Boolean,
       default: false

src/multiselectMixin.js

@@ -17,14 +17,6 @@ function includes (str, query) {
   return text.indexOf(query.trim()) !== -1
 }
 
-function filterOptions (options, search, label, customLabel) {
-  return search
-    ? options
-      .filter((option) => includes(customLabel(option, label), search))
-      .sort((a, b) => customLabel(a, label).length - customLabel(b, label).length)
-    : options
-}
-
 function stripGroups (options) {
   return options.filter((option) => !option.$isLabel)
 }
@@ -44,25 +36,6 @@ function flattenOptions (values, label) {
     }, [])
 }
 
-function filterGroups (search, label, values, groupLabel, customLabel) {
-  return (groups) =>
-    groups.map((group) => {
-      /* istanbul ignore else */
-      if (!group[values]) {
-        console.warn('Options passed to vue-multiselect do not contain groups, despite the config.')
-        return []
-      }
-      const groupOptions = filterOptions(group[values], search, label, customLabel)
-
-      return groupOptions.length
-        ? {
-            [groupLabel]: group[groupLabel],
-            [values]: groupOptions
-          }
-        : []
-    })
-}
-
 const flow = (...fns) => (x) => fns.reduce((v, f) => f(v), x)
 
 export default {
@@ -314,10 +287,19 @@ export default {
      * Prevent autofocus
      * @default false
      * @type {Boolean}
-    */
+     */
     preventAutofocus: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Allows a custom function for sorting search/filtered results.
+     * @default null
+     * @type {Function}
+     */
+    filteringSortFunc: {
+      type: Function,
+      default: null
     }
   },
   mounted () {
@@ -349,7 +331,7 @@ export default {
       if (this.internalSearch) {
         options = this.groupValues
           ? this.filterAndFlat(options, normalizedSearch, this.label)
-          : filterOptions(options, normalizedSearch, this.label, this.customLabel)
+          : this.filterOptions(options, normalizedSearch, this.label, this.customLabel)
       } else {
         options = this.groupValues ? flattenOptions(this.groupValues, this.groupLabel)(options) : options
       }
@@ -423,7 +405,7 @@ export default {
      */
     filterAndFlat (options, search, label) {
       return flow(
-        filterGroups(search, label, this.groupValues, this.groupLabel, this.customLabel),
+        this.filterGroups(search, label, this.groupValues, this.groupLabel, this.customLabel),
         flattenOptions(this.groupValues, this.groupLabel)
       )(options)
     },
@@ -723,6 +705,51 @@ export default {
         this.preferredOpenDirection = 'above'
         this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight)
       }
+    },
+    /**
+     * Filters and sorts the options ready for selection
+     * @param {Array} options
+     * @param {String} search
+     * @param {String} label
+     * @param {Function} customLabel
+     * @returns {Array}
+     */
+    filterOptions (options, search, label, customLabel) {
+      return search
+        ? options
+          .filter((option) => includes(customLabel(option, label), search))
+          .sort((a, b) => {
+            if (typeof this.filteringSortFunc === 'function') {
+              return this.filteringSortFunc(a, b)
+            }
+            return customLabel(a, label).length - customLabel(b, label).length
+          })
+        : options
+    },
+    /**
+     *
+     * @param {String} search
+     * @param {String} label
+     * @param {String} values
+     * @param {String} groupLabel
+     * @param {function} customLabel
+     * @returns {function(*): *}
+     */
+    filterGroups (search, label, values, groupLabel, customLabel) {
+      return (groups) => groups.map((group) => {
+        /* istanbul ignore else */
+        if (!group[values]) {
+          console.warn('Options passed to vue-multiselect do not contain groups, despite the config.')
+          return []
+        }
+        const groupOptions = this.filterOptions(group[values], search, label, customLabel)
+
+        return groupOptions.length
+          ? {
+              [groupLabel]: group[groupLabel], [values]: groupOptions
+            }
+          : []
+      })
     }
   }
 }