@appbaseio/reactivesearch-vue 1.29.0 → 2.0.0-alpha

package/dist/es/{install-54ebd72e.js → install-87984085.js}

@@ -1,21 +1,21 @@
 import { Actions, helper, causes } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-0f24d612.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 { SEARCH_COMPONENTS_MODES, 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-33de88e6.js';
-import { t as types } from './vueTypes-687b2304.js';
+import { B as Button } from './Button-d8bc15ea.js';
+import { t as types } from './vueTypes-b8146772.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-78920565.js';
-import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
-import { T as Title } from './Title-3522ff56.js';
+import { n as decodeHtml, 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-7788a843.js';
+import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.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-42f547cd.js';
-import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-c2c03a35.js';
-import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-e339e63a.js';
-import { C as Container } from './Container-18b03fde.js';
+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-4888aa43.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 +74,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 +95,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.');
@@ -107,9 +118,13 @@ var SearchBox = {
       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 = 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);
@@ -145,7 +160,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 +213,20 @@ 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,
+    searchboxId: VueTypes.string,
+    endpoint: types.endpointConfig
+  },
+  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 +276,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 +435,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 = decodeHtml(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 +476,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 +539,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;
 
@@ -552,10 +628,19 @@ var SearchBox = {
       this.onValueSelectedHandler('', 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, 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 ? causes.SUGGESTION_SELECT : undefined // to handle tags
+          );
+          this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
+        }
       } // Need to review
 
 
@@ -598,13 +683,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
-          });
+          }));
         });
       }
 
@@ -727,6 +828,13 @@ var SearchBox = {
 
       return null;
     },
+    enterButtonOnClick: function enterButtonOnClick() {
+      this.triggerQuery({
+        isOpen: false,
+        value: this.currentValue,
+        customQuery: true
+      });
+    },
     renderEnterButtonElement: function renderEnterButtonElement() {
       var _this4 = this;
 
@@ -736,27 +844,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, {
-            "class": "enter-btn " + getClassName(innerClass, 'enterButton'),
+            "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
             "attrs": {
               "primary": true
             },
             "on": {
-              "click": enterButtonOnClick
+              "click": _this4.enterButtonOnClick
             }
           }, ["Search"]);
         };
@@ -867,7 +967,7 @@ var SearchBox = {
     onAutofillClick: function onAutofillClick(suggestion) {
       var value = suggestion.value;
       this.isOpen = true;
-      this.currentValue = value;
+      this.currentValue = decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
@@ -888,10 +988,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,
@@ -937,14 +1106,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
@@ -954,7 +1123,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -967,7 +1136,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -978,61 +1147,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", {
@@ -1048,26 +1217,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);
-        },
-        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": _extends({}, {

package/dist/es/install.js

@@ -1,41 +1,42 @@
 import '@appbaseio/reactivecore';
-import './_rollupPluginBabelHelpers-0f24d612.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-33de88e6.js';
-import './vueTypes-687b2304.js';
+import './Button-d8bc15ea.js';
+import './vueTypes-b8146772.js';
+import './Pagination-784bf143.js';
 import './ReactiveList.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import './index-78920565.js';
-import './ComponentWrapper-0f3431d1.js';
+import './index-7788a843.js';
+import './ComponentWrapper-424e86fd.js';
 import '@vue/babel-helper-vue-jsx-merge-props';
-import './Title-3522ff56.js';
-import './ListItem-8e8fb535.js';
-import './Card-6446f1b7.js';
-import './Flex-8770345d.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';
 import './ReactiveBase.js';
 import 'hotkeys-js';
-import './DataSearch-42f547cd.js';
-import './CancelSvg-c2c03a35.js';
-import './Input-e339e63a.js';
+import './DataSearch-4888aa43.js';
+import './CancelSvg-4cfae5fd.js';
+import './Input-7a2a9fac.js';
 import 'compute-scroll-into-view';
-import './Container-18b03fde.js';
+import './Container-ba826e96.js';
 import 'vue-highlight-words';
-export { i as default } from './install-54ebd72e.js';
+export { i as default } from './install-87984085.js';
 import '@appbaseio/reactivecore/lib/utils/suggestions';
-import './FormControlList-704f8dee.js';
-import './utils-64a2e5f0.js';
+import './FormControlList-c22d64f6.js';
+import './utils-9e68acee.js';
 import './SingleList.js';
 import './MultiList.js';
-import './DropDown-ff6ad982.js';
+import './DropDown-05a644a5.js';
 import './SingleDropdownList.js';
 import './MultiDropdownList.js';
 import './ToggleButton.js';
@@ -46,8 +47,9 @@ import './MultiRange.js';
 import './ResultCard.js';
 import './ResultList.js';
 import 'vue-no-ssr';
-import './ssr-a41dfea9.js';
+import './ssr-b2c0b401.js';
 import './RangeSlider.js';
 import './DynamicRangeSlider.js';
+import '@appbaseio/reactivecore/lib/actions/value';
 import './StateProvider.js';
 import './RangeInput.js';

package/dist/es/{ssr-a41dfea9.js → ssr-b2c0b401.js}

@@ -1,4 +1,4 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
 import styled from '@appbaseio/vue-emotion';
 import NoSSR from 'vue-no-ssr';
 

package/dist/es/{utils-64a2e5f0.js → utils-9e68acee.js}

@@ -1,5 +1,5 @@
 import { helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 
 var getAggsOrder = helper.getAggsOrder;
 

package/dist/es/version.js

@@ -1,3 +1,3 @@
-var version = "1.29.0";
+var version = "2.0.0-alpha";
 
 export default version;