Groups slightly refactored and tests

Damian Dulisz · Damian Dulisz · commit d2e12ef39457 · 2016-11-19T15:33:00.000+01:00
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ Probably the most complete *selecting* solution for Vue.js 2.0, without jQuery.
 * Support for `v-model`
 * `@update` has changed to `@input` to also work with v-model
 * `:selected` has changed to `:value` for the same reason
+* Browserify users: if you wish to import `.vue` files, please add `vueify` transform.
 
 ## Install & basic usage
 
diff --git a/docs/main.js b/docs/main.js
@@ -40,7 +40,25 @@ new Vue({
         },
         {
           groupLabel: 'grupa 2',
-          values: ['2', '2a', '2b', 'bc', 'aa', 'ee2', 'ee3']
+          values: ['2', '2a', '2b', 'bcc', 'aa', 'ee2', 'ee33']
+        }
+      ],
+      groups2: [
+        {
+          groupLabel: 'grupa 1',
+          values: [
+            { label: 'aa1', id: '1' },
+            { label: 'aa2', id: '2' },
+            { label: 'ab', id: '3' }
+          ]
+        },
+        {
+          groupLabel: 'grupa 2',
+          values: [
+            { label: 'bb1', id: '4' },
+            { label: 'bb2', id: '5' },
+            { label: 'ab', id: '6' }
+          ]
         }
       ],
       groupsSelected: [],
diff --git a/docs/partials/examples/_groups.jade b/docs/partials/examples/_groups.jade
@@ -6,11 +6,15 @@ p.typo__p
     label.typo__label Groups
     multiselect(
       v-model="groupsSelected",
-      :options="groups",
+      :options="groups2",
       :multiple="true",
       :searchable="true",
+      :close-on-select="false",
       group-key="values",
-      placeholder="Type to search"
+      group-label="groupLabel",
+      placeholder="Type to search",
+      track-by="id",
+      label="label",
     )
       span(slot="noResult").
         Oops! No elements found. Consider changing the search query.
diff --git a/package.json b/package.json
@@ -24,19 +24,6 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "bundle": "webpack --config build/webpack.bundle.conf.js"
   },
-  "browserify": {
-    "transform": [
-      "vueify",
-      [
-        "babelify",
-        {
-          "presets": [
-            "es2015"
-          ]
-        }
-      ]
-    ]
-  },
   "devDependencies": {
     "babel-core": "^6.7.7",
     "babel-helper-vue-jsx-merge-props": "^2.0.1",
@@ -91,10 +78,10 @@
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue": "^2.0.0-rc.6",
+    "vue": "^2.0.0",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",
-    "vue-loader": "^9.3.2",
+    "vue-loader": "^9.7.0",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.13.0",
     "webpack-dev-middleware": "^1.4.0",
diff --git a/src/Multiselect.vue b/src/Multiselect.vue
@@ -50,11 +50,11 @@
           @keydown.tab.stop.prevent.self="addPointerElement()"
           @keydown.delete="removeLastElement()"
           class="multiselect__input"/>
-          <span
-            v-if="!searchable && !multiple"
-            class="multiselect__single"
-            v-text="currentOptionLabel || placeholder">
-          </span>
+        <span
+          v-if="!searchable"
+          class="multiselect__single"
+          v-text="currentOptionLabel || placeholder">
+        </span>
       </div>
       <transition name="multiselect">
         <ul
@@ -72,7 +72,7 @@
             <li v-for="(option, index) of filteredOptions" :key="index">
               <span
                 tabindex="0"
-                v-if="!option.isLabel"
+                v-if="!option.$isLabel"
                 :class="optionHighlight(index, option)"
                 @mousedown.prevent="select(option)"
                 @mouseenter="pointerSet(index)"
@@ -87,10 +87,10 @@
                   </multiselect-option>
               </span>
               <span
-                v-if="option.isLabel"
+                v-if="option.$isLabel"
                 :class="optionHighlight(index, option)"
                 class="multiselect__option multiselect__option--disabled">
-                {{ option.label }}
+                {{ option.$groupLabel }}
               </span>
             </li>
           </template>
@@ -336,7 +336,8 @@ fieldset[disabled] .multiselect {
   margin-bottom: 8px;
 }
 
-.multiselect__tag ~ .multiselect__input {
+.multiselect__tag ~ .multiselect__input,
+.multiselect__tag ~ .multiselect__single {
   width: auto;
 }
 
diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js
@@ -12,6 +12,40 @@ function filterOptions (options, search, label) {
     : options.filter(option => includes(option, search))
 }
 
+function stripGroups (options) {
+  return options.filter(option => !option.$isLabel)
+}
+
+function flattenOptions (values, label) {
+  return (options) =>
+    options.reduce((prev, curr) => {
+      if (curr[values] && curr[values].length) {
+        prev.push({
+          $groupLabel: curr[label],
+          $isLabel: true
+        })
+        return prev.concat(curr[values])
+      }
+      return prev.concat(curr)
+    }, [])
+}
+
+function filterGroups (search, label, values, groupLabel) {
+  return (groups) =>
+    groups.map(group => {
+      const groupOptions = filterOptions(group[values], search, label)
+
+      return groupOptions.length
+        ? {
+          [groupLabel]: group[groupLabel],
+          [values]: groupOptions
+        }
+        : []
+    })
+}
+
+const flow = (...fns) => x => fns.reduce((v, f) => f(v), x)
+
 module.exports = {
   data () {
     return {
@@ -206,6 +240,9 @@ module.exports = {
     },
     groupKey: {
       type: String
+    },
+    groupLabel: {
+      type: String
     }
   },
   created () {
@@ -219,7 +256,7 @@ module.exports = {
 
       if (this.localSearch) {
         options = this.groupKey
-          ? this.filterAndFlat(options)
+          ? this.filterAndFlat(options, search, this.label)
           : filterOptions(options, search, this.label)
 
         options = this.hideSelected
@@ -243,12 +280,13 @@ module.exports = {
       }
     },
     optionKeys () {
+      const options = this.groupKey ? this.flatAndStrip(this.options) : this.options
       return this.label
-        ? this.options.map(element => element[this.label].toString().toLowerCase())
-        : this.options.map(element => element.toString().toLowerCase())
+        ? options.map(element => element[this.label].toString().toLowerCase())
+        : options.map(element => element.toString().toLowerCase())
     },
     currentOptionLabel () {
-      return this.getOptionLabel(this.internalValue)
+      return this.getOptionLabel(this.internalValue) + ''
     }
   },
   watch: {
@@ -271,30 +309,16 @@ module.exports = {
   },
   methods: {
     filterAndFlat (options) {
-      return this.flattenOptions(
-        this.filterGroups(options)
-      )
+      return flow(
+        filterGroups(this.search, this.label, this.groupKey, this.groupLabel),
+        flattenOptions(this.groupKey, this.groupLabel)
+      )(options)
     },
-    filterGroups (groups) {
-      return groups.map(group => {
-        const groupOptions = filterOptions(group[this.groupKey], this.search, this.label)
-
-        return groupOptions.length
-          ? { groupLabel: group.groupLabel, groupOptions }
-          : []
-      })
-    },
-    flattenOptions (options) {
-      return options.reduce((prev, curr) => {
-        if (curr.groupOptions && curr.groupOptions.length) {
-          prev.push({
-            label: curr.groupLabel,
-            isLabel: true
-          })
-          return prev.concat(curr.groupOptions)
-        }
-        return prev.concat(curr)
-      }, [])
+    flatAndStrip (options) {
+      return flow(
+        flattenOptions(this.groupKey, this.groupLabel),
+        stripGroups
+      )(options)
     },
     updateSearch (query) {
       this.search = query.trim().toLowerCase().toString()
@@ -349,7 +373,7 @@ module.exports = {
     getOptionLabel (option) {
       if (!option && option !== 0) return ''
       if (option.isTag) return option.label
-      return this.customLabel(option, this.label) + ''
+      return this.customLabel(option, this.label) || ''
     },
     /**
      * Add the given option to the list of selected options
diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js
