@appbaseio/reactivesearch-vue 1.16.0-alpha.56 → 1.16.0-alpha.57

package/dist/es/ToggleButton.js

@@ -1,18 +1,18 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import './_rollupPluginBabelHelpers-ecf6c03c.js';
+import './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import { B as Button, t as toggleButtons } from './Button-8b211174.js';
+import { B as Button, t as toggleButtons } from './Button-d8bc15ea.js';
 import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-5daa8276.js';
-import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
-import { T as Title } from './Title-579f8d6c.js';
-import { C as Container } from './Container-4383c6f0.js';
+import { f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-3d98f51b.js';
+import { C as ComponentWrapper } from './ComponentWrapper-6ad0997b.js';
+import { T as Title } from './Title-3342664a.js';
+import { C as Container } from './Container-ba826e96.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,

package/dist/es/{_rollupPluginBabelHelpers-ecf6c03c.js → _rollupPluginBabelHelpers-76660dab.js}

@@ -1,5 +1,5 @@
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -12,7 +12,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -24,11 +23,10 @@ function _inheritsLoose(subClass, superClass) {
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 

package/dist/es/{index-5daa8276.js → index-3d98f51b.js}

@@ -1,5 +1,5 @@
 import { helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 import { validProps } from '@appbaseio/reactivecore/lib/utils/constants';
 import { bindActionCreators } from 'redux';
 

package/dist/es/index.js

@@ -1,43 +1,44 @@
 import '@appbaseio/reactivecore';
-import './_rollupPluginBabelHelpers-ecf6c03c.js';
+import './_rollupPluginBabelHelpers-76660dab.js';
 import 'vue-types';
 import '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/reactivecore/lib/utils/helper';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-8b211174.js';
+import './Button-d8bc15ea.js';
 import './vueTypes-9326e0be.js';
-import './Pagination-3c50d4ba.js';
+import './Pagination-491c44ee.js';
 export { default as ReactiveList } from './ReactiveList.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import './index-5daa8276.js';
-import './ComponentWrapper-bbb717bc.js';
+import './index-3d98f51b.js';
+import './ComponentWrapper-6ad0997b.js';
 import '@vue/babel-helper-vue-jsx-merge-props';
-import './Title-579f8d6c.js';
-import './ListItem-bdb6d53d.js';
-import './Card-04b3c33e.js';
-import './Flex-aac91505.js';
+import './Title-3342664a.js';
+import './ListItem-cad14c5e.js';
+import './Card-450683f1.js';
+import './Flex-1f0795c3.js';
 import '@appbaseio/reactivecore/lib/actions/analytics';
 import 'appbase-js';
 import 'url-search-params-polyfill';
 export { default as ReactiveBase } from './ReactiveBase.js';
 import 'hotkeys-js';
-export { D as DataSearch } from './DataSearch-a5aaa29e.js';
-import './CancelSvg-4d9e0857.js';
-import './Input-d1bb4868.js';
+import '@appbaseio/reactivecore/src/utils/constants';
+export { D as DataSearch } from './DataSearch-1259f2fd.js';
+import './CancelSvg-4cfae5fd.js';
+import './Input-7a2a9fac.js';
 import 'compute-scroll-into-view';
-import './Container-4383c6f0.js';
+import './Container-ba826e96.js';
 import 'vue-highlight-words';
-import { i as install } from './install-cdccc63e.js';
-export { S as SearchBox, i as install } from './install-cdccc63e.js';
+import { i as install } from './install-4391877a.js';
+export { S as SearchBox, i as install } from './install-4391877a.js';
 import '@appbaseio/reactivecore/lib/utils/suggestions';
-import './FormControlList-fe389a2e.js';
-import './utils-3a32e13f.js';
+import './FormControlList-c22d64f6.js';
+import './utils-9e68acee.js';
 export { default as SingleList } from './SingleList.js';
 export { default as MultiList } from './MultiList.js';
-import './DropDown-7639f223.js';
+import './DropDown-2ddad7ae.js';
 export { default as SingleDropdownList } from './SingleDropdownList.js';
 export { default as MultiDropdownList } from './MultiDropdownList.js';
 export { default as ToggleButton } from './ToggleButton.js';
@@ -48,7 +49,7 @@ export { default as MultiRange } from './MultiRange.js';
 export { default as ResultCard } from './ResultCard.js';
 export { default as ResultList } from './ResultList.js';
 import 'vue-no-ssr';
-import './ssr-e3196de1.js';
+import './ssr-b2c0b401.js';
 export { default as RangeSlider } from './RangeSlider.js';
 export { default as DynamicRangeSlider } from './DynamicRangeSlider.js';
 export { default as StateProvider } from './StateProvider.js';

package/dist/es/initReactivesearch.js

@@ -1,4 +1,4 @@
-import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-76660dab.js';
 import { validProps, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { pushToAndClause, buildQuery, extractQueryFromCustomQuery, getOptionsForCustomQuery } from '@appbaseio/reactivecore/lib/utils/helper';
 import { isSearchComponent, getRSQuery, extractPropsFromState, getDependentQueries } from '@appbaseio/reactivecore/lib/utils/transform';

package/dist/es/{install-cdccc63e.js → install-4391877a.js}

@@ -1,21 +1,22 @@
 import { Actions, helper, causes } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
 import styled from '@appbaseio/vue-emotion';
-import { B as Button } from './Button-8b211174.js';
+import { B as Button } from './Button-d8bc15ea.js';
 import { t as types } from './vueTypes-9326e0be.js';
 import ReactiveList from './ReactiveList.js';
-import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-5daa8276.js';
-import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
-import { T as Title } from './Title-579f8d6c.js';
+import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-3d98f51b.js';
+import { C as ComponentWrapper } from './ComponentWrapper-6ad0997b.js';
+import { T as Title } from './Title-3342664a.js';
 import ReactiveBase from './ReactiveBase.js';
 import hotkeys from 'hotkeys-js';
-import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, b as InputGroup, C as CustomSvg, c as SuggestionItem, D as DataSearch } from './DataSearch-a5aaa29e.js';
-import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-4d9e0857.js';
-import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-d1bb4868.js';
-import { C as Container } from './Container-4383c6f0.js';
+import { SEARCH_COMPONENTS_MODES } from '@appbaseio/reactivecore/src/utils/constants';
+import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, T as TagItem, b as TagsContainer, c as InputGroup, C as CustomSvg, d as SuggestionItem, D as DataSearch } from './DataSearch-1259f2fd.js';
+import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-4cfae5fd.js';
+import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-7a2a9fac.js';
+import { C as Container } from './Container-ba826e96.js';
 import SingleList from './SingleList.js';
 import MultiList from './MultiList.js';
 import SingleDropdownList from './SingleDropdownList.js';
@@ -74,10 +75,12 @@ var _debounce = helper.debounce,
     normalizeDataField = helper.normalizeDataField;
 var SearchBox = {
   name: 'SearchBox',
+  isTagsMode: false,
   data: function data() {
     var props = this.$props;
     this.__state = {
       currentValue: '',
+      selectedTags: [],
       isOpen: false,
       normalizedSuggestions: []
     };
@@ -93,7 +96,16 @@ var SearchBox = {
     var _this$$props = this.$props,
         distinctField = _this$$props.distinctField,
         distinctFieldConfig = _this$$props.distinctFieldConfig,
-        index = _this$$props.index;
+        index = _this$$props.index,
+        mode = _this$$props.mode;
+
+    if (mode === SEARCH_COMPONENTS_MODES.TAG) {
+      this.$options.isTagsMode = true;
+    }
+
+    if (this.$options.isTagsMode) {
+      console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
+    }
 
     if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
       console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
@@ -108,8 +120,12 @@ var SearchBox = {
     }
 
     this.currentValue = this.selectedValue || this.value || this.defaultValue || '';
-    this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
-    this.setValue(this.currentValue, true, this.$props, undefined, false, this.selectedCategory); // Set custom and default queries in store
+
+    if (this.$options.isTagsMode) {
+      this.currentValue = '';
+    }
+
+    this.handleTextChange = _debounce(this.handleText, this.$props.debounce); // Set custom and default queries in store
 
     this.triggerCustomQuery(this.currentValue, this.selectedCategory);
     this.triggerDefaultQuery(this.currentValue);
@@ -145,7 +161,7 @@ var SearchBox = {
     debounce: VueTypes.number.def(0),
     defaultValue: types.string,
     excludeFields: types.excludeFields,
-    value: types.value,
+    value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), types.value]),
     defaultSuggestions: types.suggestions,
     enableSynonyms: VueTypes.bool.def(true),
     enableQuerySuggestions: VueTypes.bool.def(false),
@@ -198,7 +214,18 @@ var SearchBox = {
     onData: types.func,
     renderItem: types.func,
     enterButton: VueTypes.bool.def(false),
-    renderEnterButton: VueTypes.any
+    renderEnterButton: VueTypes.any,
+    mode: VueTypes.oneOf(['select', 'tag']).def('select'),
+    renderSelectedTags: VueTypes.any
+  },
+  beforeMount: function beforeMount() {
+    if (this.selectedValue) {
+      this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.value) {
+      this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.defaultValue) {
+      this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    }
   },
   mounted: function mounted() {
     this.listenForFocusShortcuts();
@@ -248,15 +275,25 @@ var SearchBox = {
       this.normalizedSuggestions = suggestionsList;
     },
     selectedValue: function selectedValue(newVal, oldVal) {
-      if (oldVal !== newVal && this.$data.currentValue !== newVal) {
+      if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
         if (!newVal && this.$data.currentValue) {
           // selected value is cleared, call onValueSelected
           this.onValueSelectedHandler('', causes.CLEAR_VALUE);
+        } // if (this.$props.value === undefined) {
+
+
+        if (this.$options.isTagsMode) {
+          // handling reset of tags through SelectedFilters or URL
+          this.selectedTags = [];
         }
 
-        if (this.$props.value === undefined) {
-          this.setValue(newVal || '', true, this.$props);
+        var cause = !newVal ? causes.CLEAR_VALUE : undefined;
+
+        if (this.$options.isTagsMode) {
+          cause = causes.SUGGESTION_SELECT;
         }
+
+        this.setValue(newVal || '', true, this.$props, cause); // }
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -397,7 +434,40 @@ var SearchBox = {
       }
 
       var performUpdate = function performUpdate() {
-        _this.currentValue = value;
+        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
+          return;
+        }
+
+        if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
+            // check if value already present in selectedTags
+            if (typeof value === 'string' && _this.selectedTags.includes(value)) {
+              _this.isOpen = false;
+              return;
+            }
+
+            _this.selectedTags = [].concat(_this.selectedTags);
+
+            if (typeof value === 'string' && !!value) {
+              _this.selectedTags.push(value);
+            } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
+              var mergedArray = Array.from(new Set([].concat(_this.selectedTags, value)));
+              _this.selectedTags = mergedArray;
+            }
+          } else if (value) {
+            _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+          }
+
+          _this.currentValue = '';
+        } else {
+          _this.currentValue = value;
+        }
+
+        var queryHandlerValue = value;
+
+        if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
+        }
 
         if (isDefaultValue) {
           if (_this.$props.autosuggest) {
@@ -405,19 +475,19 @@ var SearchBox = {
               _this.isOpen = false;
             }
 
-            _this.triggerDefaultQuery(value);
+            if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
           } // in case of strict selection only SUGGESTION_SELECT should be able
           // to set the query otherwise the value should reset
 
 
           if (props.strictSelection) {
-            if (cause === causes.SUGGESTION_SELECT || value === '') {
-              _this.triggerCustomQuery(value, categoryValue);
+            if (cause === causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
+              _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
             } else {
               _this.setValue('', true);
             }
-          } else if (props.value === undefined) {
-            _this.triggerCustomQuery(value, categoryValue);
+          } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
+            _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
           }
         } else {
           // debounce for handling text while typing
@@ -468,6 +538,11 @@ var SearchBox = {
           showFilter = _this$$props2.showFilter,
           URLParams = _this$$props2.URLParams;
       var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
+
+      if (this.$options.isTagsMode) {
+        value = paramValue;
+      }
+
       var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
       var query = defaultQueryTobeSet;
 
@@ -561,7 +636,8 @@ var SearchBox = {
         if (this.$props.autosuggest === false) {
           this.enterButtonOnClick();
         } else if (highlightedIndex === null) {
-          this.setValue(event.target.value, true);
+          this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined // to handle tags
+          );
           this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
         }
       } // Need to review
@@ -606,13 +682,29 @@ var SearchBox = {
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
       } else {
-        this.$emit('change', suggestion.value, function (_ref4) {
+        var emitValue = suggestion.value;
+
+        if (this.$options.isTagsMode) {
+          emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
+
+          if (this.selectedTags.includes(suggestion.value)) {
+            // avoid duplicates in tags array
+            this.isOpen = false;
+            return;
+          }
+
+          emitValue.push(suggestion.value);
+        }
+
+        this.setValue(emitValue, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
+        this.$emit('change', emitValue, function (_ref4) {
           var isOpen = _ref4.isOpen;
-          return _this3.triggerQuery({
+          return _this3.triggerQuery(_extends({
             isOpen: isOpen,
-            value: suggestion.value,
+            value: emitValue
+          }, !_this3.$options.isTagsMode && {
             categoryValue: suggestion._category
-          });
+          }));
         });
       }
 
@@ -895,10 +987,79 @@ var SearchBox = {
           "click": handleAutoFillClick
         }
       });
+    },
+    renderTag: function renderTag(item) {
+      var _this7 = this;
+
+      var h = this.$createElement;
+      var innerClass = this.$props.innerClass;
+      return h(TagItem, {
+        "class": getClassName(innerClass, 'selected-tag') || ''
+      }, [h("span", [item]), h("span", {
+        "attrs": {
+          "role": "img",
+          "aria-label": "delete-tag"
+        },
+        "class": "close-icon",
+        "on": {
+          "click": function click() {
+            return _this7.clearTag(item);
+          }
+        }
+      }, [h(CancelSvg)])]);
+    },
+    clearAllTags: function clearAllTags() {
+      this.selectedTags = [];
+      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
+
+      if (this.$props.value !== undefined) {
+        this.$emit('change', this.selectedTags, this.triggerQuery);
+      }
+    },
+    clearTag: function clearTag(tagValue) {
+      this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
+        return tag !== tagValue;
+      }));
+      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
+
+      if (this.$props.value !== undefined) {
+        this.$emit('change', this.selectedTags, this.triggerQuery);
+      }
+    },
+    renderTags: function renderTags() {
+      var _this8 = this;
+
+      var h = this.$createElement;
+
+      if (!Array.isArray(this.selectedTags)) {
+        return null;
+      }
+
+      var tagsList = [].concat(this.selectedTags);
+      var shouldRenderClearAllTag = tagsList.length > 1;
+      var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
+      return renderSelectedTags ? renderSelectedTags({
+        values: this.selectedTags,
+        handleClear: this.clearTag,
+        handleClearAll: this.clearAllTags
+      }) : h(TagsContainer, [tagsList.map(function (item) {
+        return _this8.renderTag(item);
+      }), shouldRenderClearAllTag && h(TagItem, {
+        "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
+      }, [h("span", ["Clear All"]), h("span", {
+        "attrs": {
+          "role": "img",
+          "aria-label": "delete-tag"
+        },
+        "class": "close-icon",
+        "on": {
+          "click": this.clearAllTags
+        }
+      }, [h(CancelSvg)])])]);
     }
   },
   render: function render() {
-    var _this7 = this;
+    var _this9 = this;
 
     var h = arguments[0];
     var _this$$props6 = this.$props,
@@ -944,14 +1105,14 @@ var SearchBox = {
               }
             };
 
-            return h("div", [_this7.hasCustomRenderer && _this7.getComponent({
+            return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-              "class": suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
-            }, [_this7.normalizedSuggestions.map(function (item, index) {
+            }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
+            }, [_this9.normalizedSuggestions.map(function (item, index) {
               return renderItem ? h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item
@@ -961,7 +1122,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -974,7 +1135,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -985,61 +1146,61 @@ var SearchBox = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this7.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
                   "icon": getIcon(item._suggestion_type),
                   "type": item._suggestion_type + "-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this7.currentValue,
+                  "currentValue": _this9.currentValue,
                   "suggestion": item
                 }
-              }), _this7.renderAutoFill(item)]);
-            })]) : _this7.renderNoSuggestions(_this7.normalizedSuggestions)]);
+              }), _this9.renderAutoFill(item)]);
+            })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
           };
 
           return h("div", {
             "class": suggestionsContainer
-          }, [h(InputGroup, [_this7.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+          }, [h(InputGroup, [_this9.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
             "attrs": {
-              "id": _this7.$props.componentId + "-input",
-              "showIcon": _this7.$props.showIcon,
-              "showClear": _this7.$props.showClear,
-              "iconPosition": _this7.$props.iconPosition,
-              "placeholder": _this7.$props.placeholder,
-              "autoFocus": _this7.$props.autoFocus,
-              "themePreset": _this7.themePreset,
+              "id": _this9.$props.componentId + "-input",
+              "showIcon": _this9.$props.showIcon,
+              "showClear": _this9.$props.showClear,
+              "iconPosition": _this9.$props.iconPosition,
+              "placeholder": _this9.$props.placeholder,
+              "autoFocus": _this9.$props.autoFocus,
+              "themePreset": _this9.themePreset,
               "autocomplete": "off"
             },
-            "ref": _this7.$props.innerRef,
-            "class": getClassName(_this7.$props.innerClass, 'input'),
+            "ref": _this9.$props.innerRef,
+            "class": getClassName(_this9.$props.innerClass, 'input'),
             "on": _extends({}, getInputEvents({
-              onInput: _this7.onInputChange,
+              onInput: _this9.onInputChange,
               onBlur: function onBlur(e) {
-                _this7.$emit('blur', e, _this7.triggerQuery);
+                _this9.$emit('blur', e, _this9.triggerQuery);
               },
-              onFocus: _this7.handleFocus,
+              onFocus: _this9.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this7.$emit('keyPress', e, _this7.triggerQuery);
+                _this9.$emit('keyPress', e, _this9.triggerQuery);
 
-                _this7.$emit('key-press', e, _this7.triggerQuery);
+                _this9.$emit('key-press', e, _this9.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this7.handleKeyDown(e, highlightedIndex);
+                return _this9.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this7.$emit('keyUp', e, _this7.triggerQuery);
+                _this9.$emit('keyUp', e, _this9.triggerQuery);
 
-                _this7.$emit('key-up', e, _this7.triggerQuery);
+                _this9.$emit('key-up', e, _this9.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _extends({}, getInputProps({
-              value: _this7.$data.currentValue === null ? '' : _this7.$data.currentValue
+              value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
             }))
-          }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this7.renderInputAddonAfter(), _this7.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
+          }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
         }
       }
     }) : h("div", {
@@ -1055,22 +1216,22 @@ var SearchBox = {
       },
       "on": _extends({}, {
         blur: function blur(e) {
-          _this7.$emit('blur', e, _this7.triggerQuery);
+          _this9.$emit('blur', e, _this9.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this7.$emit('keyPress', e, _this7.triggerQuery);
+          _this9.$emit('keyPress', e, _this9.triggerQuery);
 
-          _this7.$emit('key-press', e, _this7.triggerQuery);
+          _this9.$emit('key-press', e, _this9.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this7.$emit('focus', e, _this7.triggerQuery);
+          _this9.$emit('focus', e, _this9.triggerQuery);
         },
         keydown: this.handleKeyDown,
         keyup: function keyup(e) {
-          _this7.$emit('keyUp', e, _this7.triggerQuery);
+          _this9.$emit('keyUp', e, _this9.triggerQuery);
 
-          _this7.$emit('key-up', e, _this7.triggerQuery);
+          _this9.$emit('key-up', e, _this9.triggerQuery);
         }
       }),
       "domProps": _extends({}, {