@appbaseio/reactivesearch-vue 1.29.0 → 2.0.0-alpha

package/dist/cjs/{install-4886582d.js → install-99716d95.js}

@@ -4,24 +4,24 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
-var Button = require('./Button-e0b7c1f6.js');
-var vueTypes = require('./vueTypes-57d01f18.js');
+var Button = require('./Button-446f819e.js');
+var vueTypes = require('./vueTypes-727b7c63.js');
 var ReactiveList = require('./ReactiveList.js');
-var index = require('./index-4509aa45.js');
-var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
-var Title = require('./Title-584a8cc8.js');
+var index = require('./index-6a167fe0.js');
+var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
+var Title = require('./Title-1de7d0f4.js');
 var ReactiveBase = require('./ReactiveBase.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var DataSearch = require('./DataSearch-eec21890.js');
-var CancelSvg = require('./CancelSvg-4aa35935.js');
-var Input = require('./Input-0d7b25ad.js');
-var Container = require('./Container-526efa6a.js');
+var DataSearch = require('./DataSearch-6cf29cf0.js');
+var CancelSvg = require('./CancelSvg-9f258f4f.js');
+var Input = require('./Input-e6603a7e.js');
+var Container = require('./Container-daf30918.js');
 var SingleList = require('./SingleList.js');
 var MultiList = require('./MultiList.js');
 var SingleDropdownList = require('./SingleDropdownList.js');
@@ -80,10 +80,12 @@ var _debounce = configureStore.helper.debounce,
     normalizeDataField = configureStore.helper.normalizeDataField;
 var SearchBox = {
   name: 'SearchBox',
+  isTagsMode: false,
   data: function data() {
     var props = this.$props;
     this.__state = {
       currentValue: '',
+      selectedTags: [],
       isOpen: false,
       normalizedSuggestions: []
     };
@@ -99,7 +101,16 @@ var SearchBox = {
     var _this$$props = this.$props,
         distinctField = _this$$props.distinctField,
         distinctFieldConfig = _this$$props.distinctFieldConfig,
-        index = _this$$props.index;
+        index$1 = _this$$props.index,
+        mode = _this$$props.mode;
+
+    if (mode === constants.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.');
@@ -109,13 +120,17 @@ var SearchBox = {
       console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     }
 
-    if (!this.enableAppbase && index) {
+    if (!this.enableAppbase && index$1) {
       console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     }
 
-    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
+    this.currentValue = index.decodeHtml(this.selectedValue || this.value || this.defaultValue || '');
+
+    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);
@@ -151,7 +166,7 @@ var SearchBox = {
     debounce: VueTypes.number.def(0),
     defaultValue: vueTypes.types.string,
     excludeFields: vueTypes.types.excludeFields,
-    value: vueTypes.types.value,
+    value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), vueTypes.types.value]),
     defaultSuggestions: vueTypes.types.suggestions,
     enableSynonyms: VueTypes.bool.def(true),
     enableQuerySuggestions: VueTypes.bool.def(false),
@@ -204,7 +219,20 @@ var SearchBox = {
     onData: vueTypes.types.func,
     renderItem: vueTypes.types.func,
     enterButton: VueTypes.bool.def(false),
-    renderEnterButton: VueTypes.any
+    renderEnterButton: VueTypes.any,
+    mode: VueTypes.oneOf(['select', 'tag']).def('select'),
+    renderSelectedTags: VueTypes.any,
+    searchboxId: VueTypes.string,
+    endpoint: vueTypes.types.endpointConfig
+  },
+  beforeMount: function beforeMount() {
+    if (this.selectedValue) {
+      this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.value) {
+      this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.defaultValue) {
+      this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
+    }
   },
   mounted: function mounted() {
     this.listenForFocusShortcuts();
@@ -254,15 +282,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('', configureStore.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 ? configureStore.causes.CLEAR_VALUE : undefined;
+
+        if (this.$options.isTagsMode) {
+          cause = configureStore.causes.SUGGESTION_SELECT;
         }
+
+        this.setValue(newVal || '', true, this.$props, cause); // }
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -403,7 +441,40 @@ var SearchBox = {
       }
 
       var performUpdate = function performUpdate() {
-        _this.currentValue = value;
+        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
+          return;
+        }
+
+        if (_this.$options.isTagsMode && cause === configureStore.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 = index.decodeHtml(value);
+        }
+
+        var queryHandlerValue = value;
+
+        if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
+          queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
+        }
 
         if (isDefaultValue) {
           if (_this.$props.autosuggest) {
@@ -411,19 +482,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 === configureStore.causes.SUGGESTION_SELECT || value === '') {
-              _this.triggerCustomQuery(value, categoryValue);
+            if (cause === configureStore.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 === configureStore.causes.SUGGESTION_SELECT || cause === configureStore.causes.CLEAR_VALUE) {
+            _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
           }
         } else {
           // debounce for handling text while typing
@@ -474,6 +545,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;
 
@@ -558,10 +634,19 @@ var SearchBox = {
       this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
     },
     handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+      if (highlightedIndex === void 0) {
+        highlightedIndex = null;
+      }
+
       // if a suggestion was selected, delegate the handling to suggestion handler
-      if (event.key === 'Enter' && highlightedIndex === null) {
-        this.setValue(event.target.value, true);
-        this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
+      if (event.key === 'Enter') {
+        if (this.$props.autosuggest === false) {
+          this.enterButtonOnClick();
+        } else if (highlightedIndex === null) {
+          this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined // to handle tags
+          );
+          this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
+        }
       } // Need to review
 
 
@@ -604,13 +689,29 @@ var SearchBox = {
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, configureStore.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, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
+        this.$emit('change', emitValue, function (_ref4) {
           var isOpen = _ref4.isOpen;
-          return _this3.triggerQuery({
+          return _this3.triggerQuery(_rollupPluginBabelHelpers._extends({
             isOpen: isOpen,
-            value: suggestion.value,
+            value: emitValue
+          }, !_this3.$options.isTagsMode && {
             categoryValue: suggestion._category
-          });
+          }));
         });
       }
 
@@ -733,6 +834,13 @@ var SearchBox = {
 
       return null;
     },
+    enterButtonOnClick: function enterButtonOnClick() {
+      this.triggerQuery({
+        isOpen: false,
+        value: this.currentValue,
+        customQuery: true
+      });
+    },
     renderEnterButtonElement: function renderEnterButtonElement() {
       var _this4 = this;
 
@@ -742,27 +850,19 @@ var SearchBox = {
           innerClass = _this$$props4.innerClass;
       var renderEnterButton = this.$scopedSlots.renderEnterButton;
 
-      var enterButtonOnClick = function enterButtonOnClick() {
-        return _this4.triggerQuery({
-          isOpen: false,
-          value: _this4.currentValue,
-          customQuery: true
-        });
-      };
-
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(enterButtonOnClick);
+            return renderEnterButton(_this4.enterButtonOnClick);
           }
 
           return h(Button.Button, {
-            "class": "enter-btn " + getClassName(innerClass, 'enterButton'),
+            "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
             "attrs": {
               "primary": true
             },
             "on": {
-              "click": enterButtonOnClick
+              "click": _this4.enterButtonOnClick
             }
           }, ["Search"]);
         };
@@ -873,7 +973,7 @@ var SearchBox = {
     onAutofillClick: function onAutofillClick(suggestion) {
       var value = suggestion.value;
       this.isOpen = true;
-      this.currentValue = value;
+      this.currentValue = index.decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
@@ -894,10 +994,79 @@ var SearchBox = {
           "click": handleAutoFillClick
         }
       });
+    },
+    renderTag: function renderTag(item) {
+      var _this7 = this;
+
+      var h = this.$createElement;
+      var innerClass = this.$props.innerClass;
+      return h(DataSearch.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.CancelSvg)])]);
+    },
+    clearAllTags: function clearAllTags() {
+      this.selectedTags = [];
+      this.setValue('', true, this.$props, configureStore.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, configureStore.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(DataSearch.TagsContainer, [tagsList.map(function (item) {
+        return _this8.renderTag(item);
+      }), shouldRenderClearAllTag && h(DataSearch.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.CancelSvg)])])]);
     }
   },
   render: function render() {
-    var _this7 = this;
+    var _this9 = this;
 
     var h = arguments[0];
     var _this$$props6 = this.$props,
@@ -943,14 +1112,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": Input.suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
-            }, [_this7.normalizedSuggestions.map(function (item, index) {
+            }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": Input.suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
+            }, [_this9.normalizedSuggestions.map(function (item, index) {
               return renderItem ? h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
@@ -960,7 +1129,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -973,7 +1142,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -984,61 +1153,61 @@ var SearchBox = {
                 }
               }, [h(DataSearch.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(DataSearch.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": Input.suggestionsContainer
-          }, [h(DataSearch.InputGroup, [_this7.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+          }, [h(DataSearch.InputGroup, [_this9.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.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": _rollupPluginBabelHelpers._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": _rollupPluginBabelHelpers._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", {
@@ -1054,26 +1223,22 @@ var SearchBox = {
       },
       "on": _rollupPluginBabelHelpers._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);
-        },
-        keydown: function keydown(e) {
-          _this7.$emit('keyDown', e, _this7.triggerQuery);
-
-          _this7.$emit('key-down', 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": _rollupPluginBabelHelpers._extends({}, {

package/dist/cjs/install.js

@@ -3,43 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('@appbaseio/reactivecore');
-require('./_rollupPluginBabelHelpers-f127c8b7.js');
+require('./_rollupPluginBabelHelpers-c705cbe6.js');
 require('vue-types');
 require('@appbaseio/reactivecore/lib/utils/constants');
 require('@appbaseio/reactivecore/lib/utils/helper');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-require('./Button-e0b7c1f6.js');
-require('./vueTypes-57d01f18.js');
+require('./Button-446f819e.js');
+require('./vueTypes-727b7c63.js');
+require('./Pagination-71e85fa9.js');
 require('./ReactiveList.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-require('./index-4509aa45.js');
-require('./ComponentWrapper-10bad289.js');
+require('./index-6a167fe0.js');
+require('./ComponentWrapper-ad3dad02.js');
 require('@vue/babel-helper-vue-jsx-merge-props');
-require('./Title-584a8cc8.js');
-require('./ListItem-b40adb04.js');
-require('./Card-fd94ef07.js');
-require('./Flex-f146cdad.js');
+require('./Title-1de7d0f4.js');
+require('./ListItem-8c9e0d68.js');
+require('./Card-642547a8.js');
+require('./Flex-aa517a13.js');
 require('@appbaseio/reactivecore/lib/actions/analytics');
 require('appbase-js');
 require('url-search-params-polyfill');
 require('./ReactiveBase.js');
 require('hotkeys-js');
-require('./DataSearch-eec21890.js');
-require('./CancelSvg-4aa35935.js');
-require('./Input-0d7b25ad.js');
+require('./DataSearch-6cf29cf0.js');
+require('./CancelSvg-9f258f4f.js');
+require('./Input-e6603a7e.js');
 require('compute-scroll-into-view');
-require('./Container-526efa6a.js');
+require('./Container-daf30918.js');
 require('vue-highlight-words');
-var install = require('./install-4886582d.js');
+var install = require('./install-99716d95.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
-require('./FormControlList-808dbcef.js');
-require('./utils-1219e1fe.js');
+require('./FormControlList-c195a592.js');
+require('./utils-d6a52588.js');
 require('./SingleList.js');
 require('./MultiList.js');
-require('./DropDown-e4381fcc.js');
+require('./DropDown-c479bbb0.js');
 require('./SingleDropdownList.js');
 require('./MultiDropdownList.js');
 require('./ToggleButton.js');
@@ -50,9 +51,10 @@ require('./MultiRange.js');
 require('./ResultCard.js');
 require('./ResultList.js');
 require('vue-no-ssr');
-require('./ssr-0ee35a09.js');
+require('./ssr-3027b848.js');
 require('./RangeSlider.js');
 require('./DynamicRangeSlider.js');
+require('@appbaseio/reactivecore/lib/actions/value');
 require('./StateProvider.js');
 require('./RangeInput.js');
 

package/dist/cjs/{ssr-0ee35a09.js → ssr-3027b848.js}

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var NoSSR = _interopDefault(require('vue-no-ssr'));

package/dist/cjs/{utils-1219e1fe.js → utils-d6a52588.js}

@@ -4,7 +4,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 
 var getAggsOrder = configureStore.helper.getAggsOrder;