@appbaseio/reactivesearch-vue 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/@appbaseio/reactivesearch-vue.umd.js

@@ -1486,7 +1486,8 @@
 
 	  function configReducer() {
 	    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-	      analyticsConfig: analytics.defaultAnalyticsConfig
+	      analyticsConfig: analytics.defaultAnalyticsConfig,
+	      lock: false
 	    };
 	    var action = arguments[1];
 
@@ -5207,6 +5208,11 @@
 
 	  function debounce(callback, wait) {
 	    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this;
+
+	    if (!wait) {
+	      return callback;
+	    }
+
 	    var timeout = null;
 	    var callbackArgs = null;
 
@@ -5574,7 +5580,10 @@
 	    return null;
 	  };
 
-	  function computeResultStats(hits, searchState, promotedResults) {
+	  function computeResultStats() {
+	    var hits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var searchState = arguments[1];
+	    var promotedResults = arguments[2];
 	    Object.keys(hits).forEach(function (componentId) {
 	      var _ref = hits[componentId] || {},
 	          hidden = _ref.hidden,
@@ -5618,7 +5627,7 @@
 	    };
 
 	    populateState(props);
-	    Object.keys(selectedValues).forEach(function (componentId) {
+	    Object.keys(selectedValues || {}).forEach(function (componentId) {
 	      var componentState = searchState[componentId];
 	      var selectedValue = selectedValues[componentId];
 
@@ -7798,10 +7807,6 @@
 
 	    var endpoint = void 0;
 
-	    if (store.config && store.config.endpoint instanceof Object) {
-	      endpoint = store.config.endpoint;
-	    }
-
 	    if (componentProps.endpoint instanceof Object) {
 	      endpoint = _extends({}, endpoint || {}, componentProps.endpoint);
 	    }
@@ -9419,6 +9424,10 @@
 	        settings.userId = (0, utils.isPropertyDefined)(config.analyticsConfig.userId) ? config.analyticsConfig.userId : undefined;
 	        settings.enableQueryRules = (0, utils.isPropertyDefined)(config.analyticsConfig.enableQueryRules) ? config.analyticsConfig.enableQueryRules : undefined;
 	        settings.customEvents = (0, utils.isPropertyDefined)(config.analyticsConfig.customEvents) ? config.analyticsConfig.customEvents : undefined;
+	        settings.emptyQuery = (0, utils.isPropertyDefined)(config.analyticsConfig.emptyQuery) ? config.analyticsConfig.emptyQuery : undefined;
+	        settings.enableSearchRelevancy = (0, utils.isPropertyDefined)(config.analyticsConfig.enableSearchRelevancy) ? config.analyticsConfig.enableSearchRelevancy : undefined;
+	        settings.suggestionAnalytics = (0, utils.isPropertyDefined)(config.analyticsConfig.suggestionAnalytics) ? config.analyticsConfig.suggestionAnalytics : undefined;
+	        settings.useCache = (0, utils.isPropertyDefined)(config.analyticsConfig.useCache) ? config.analyticsConfig.useCache : undefined;
 	      }
 
 	      orderOfQueries.forEach(function (component) {
@@ -9451,7 +9460,6 @@
 	  }
 
 	  var requestStack = [];
-	  var lock = false;
 
 	  function executeQuery(componentId) {
 	    var executeWatchList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -9470,7 +9478,8 @@
 	          queryOptions = _getState4.queryOptions,
 	          queryListener = _getState4.queryListener,
 	          props = _getState4.props,
-	          internalValues = _getState4.internalValues;
+	          internalValues = _getState4.internalValues,
+	          lock = _getState4.lock;
 
 	      var lockTime = config.initialQueriesSyncTime;
 	      var initialTimestamp = config.initialTimestamp;
@@ -9636,6 +9645,14 @@
 	                        newQuery.execute = true;
 	                      }
 
+	                      if (processedQueriesMap[query.id] && processedQueriesMap[query.id].type === constants$1.queryTypes.suggestion && newQuery.type !== constants$1.queryTypes.suggestion) {
+	                        processedQueriesMap[query.id + '__suggestion_type'] = _extends({}, processedQueriesMap[query.id]);
+	                        processedQueriesMap[query.id] = _extends({}, newQuery, {
+	                          execute: false
+	                        });
+	                        return;
+	                      }
+
 	                      processedQueriesMap[query.id] = newQuery;
 	                    });
 	                  }
@@ -9668,7 +9685,9 @@
 	              }, lockTime);
 	            }
 
-	            lock = true;
+	            dispatch((0, utils.updateStoreConfig)({
+	              lock: true
+	            }));
 	            requestStack.push({
 	              query: finalQuery,
 	              orderOfQueries: orderOfQueries,
@@ -9821,7 +9840,7 @@
 	      if (queryFromStore) {
 	        var query = queryFromStore.map(function (queryItem) {
 	          if (queryItem.id === componentId) {
-	            return _extends({}, queryItem, {
+	            var finalQueryItem = _extends({}, queryItem, {
 	              deepPaginationConfig: {
 	                cursor: deepPaginationCursor
 	              },
@@ -9830,6 +9849,9 @@
 	              sortField: '_id',
 	              sortBy: 'asc'
 	            });
+
+	            delete finalQueryItem.from;
+	            return finalQueryItem;
 	          }
 
 	          return queryItem;
@@ -10539,6 +10561,7 @@
 	  function configureStore(initialState) {
 	    var finalInitialState = _extends({}, initialState, {
 	      config: _extends({}, initialState.config, {
+	        lock: false,
 	        analyticsConfig: initialState.config && initialState.config.analyticsConfig ? _extends({}, analytics.defaultAnalyticsConfig, initialState.config.analyticsConfig) : analytics.defaultAnalyticsConfig
 	      })
 	    });
@@ -20952,7 +20975,11 @@
 	    },
 	    value: function value(newVal, oldVal) {
 	      if (!isEqual$4(newVal, oldVal)) {
-	        this.setValue(newVal, true, this.$props, undefined, false);
+	        if (this.isPending && this.$options.isTagsMode && Array.isArray(newVal)) {
+	          this.isPending = false;
+	        }
+
+	        this.setValue(newVal, true, this.$props, undefined, false, typeof newVal !== 'string' && this.$options.isTagsMode);
 	      }
 	    },
 	    defaultQuery: function defaultQuery(newVal, oldVal) {
@@ -21096,7 +21123,7 @@
 	        this.onValueSelectedHandler(currentValue, lib_7.SEARCH_ICON_CLICK);
 	      }
 	    },
-	    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen) {
+	    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, isTagsMode) {
 	      var _this = this;
 
 	      if (isDefaultValue === void 0) {
@@ -21111,8 +21138,12 @@
 	        toggleIsOpen = true;
 	      }
 
+	      if (isTagsMode === void 0) {
+	        isTagsMode = this.$options.isTagsMode;
+	      }
+
 	      var performUpdate = function performUpdate() {
-	        if (_this.$options.isTagsMode && isEqual$4(value, _this.selectedTags)) {
+	        if (isTagsMode && isEqual$4(value, _this.selectedTags)) {
 	          return;
 	        } // Refresh recent searches when value becomes empty
 
@@ -21123,7 +21154,7 @@
 	          _this.getRecentSearches();
 	        }
 
-	        if (_this.$options.isTagsMode && cause === lib_7.SUGGESTION_SELECT) {
+	        if (isTagsMode) {
 	          if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
 	            // check if value already present in selectedTags
 	            if (typeof value === 'string' && _this.selectedTags.includes(value)) {
@@ -21150,7 +21181,7 @@
 
 	        var queryHandlerValue = value;
 
-	        if (_this.$options.isTagsMode && cause === lib_7.SUGGESTION_SELECT) {
+	        if (isTagsMode) {
 	          queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
 	        }
 
@@ -21328,19 +21359,40 @@
 	      this.$emit('key-down', event, this.triggerQuery);
 	    },
 	    onInputChange: function onInputChange(e) {
+	      var _this2 = this;
+
 	      var inputValue = e.target.value;
 
 	      if (!this.$data.isOpen) {
 	        this.isOpen = true;
 	      }
 
-	      var value = this.$props.value;
+	      var _this$$props2 = this.$props,
+	          value = _this$$props2.value,
+	          autosuggest = _this$$props2.autosuggest;
 
 	      if (value === undefined) {
-	        this.setValue(inputValue);
+	        this.setValue(inputValue, false, this.$props, undefined, true, false);
 	      } else {
 	        this.isPending = true;
-	        this.$emit('change', inputValue, this.triggerQuery, e);
+	        this.$emit('change', inputValue, function (_temp2) {
+	          var _ref3 = _temp2 === void 0 ? {} : _temp2,
+	              _ref3$isOpen = _ref3.isOpen,
+	              isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
+
+	          if (_this2.$options.isTagsMode && autosuggest) {
+	            _this2.currentValue = value;
+	            _this2.isOpen = isOpen;
+
+	            _this2.updateDefaultQueryHandler(_this2.currentValue, _this2.$props);
+
+	            return;
+	          }
+
+	          _this2.triggerQuery({
+	            isOpen: isOpen
+	          });
+	        }, e);
 	      }
 	    },
 	    onSuggestionSelected: function onSuggestionSelected(suggestion) {
@@ -21435,9 +21487,9 @@
 	      }
 
 	      var h = this.$createElement;
-	      var _this$$props2 = this.$props,
-	          theme = _this$$props2.theme,
-	          innerClass = _this$$props2.innerClass;
+	      var _this$$props3 = this.$props,
+	          theme = _this$$props3.theme,
+	          innerClass = _this$$props3.innerClass;
 	      var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
 	      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
 	      var _this$$data = this.$data,
@@ -21473,7 +21525,7 @@
 	      return null;
 	    },
 	    renderTag: function renderTag(item) {
-	      var _this2 = this;
+	      var _this3 = this;
 
 	      var h = this.$createElement;
 	      var innerClass = this.$props.innerClass;
@@ -21487,7 +21539,7 @@
 	        "class": "close-icon",
 	        "on": {
 	          "click": function click() {
-	            return _this2.clearTag(item);
+	            return _this3.clearTag(item);
 	          }
 	        }
 	      }, [h(CancelSvg)])]);
@@ -21511,7 +21563,7 @@
 	      }
 	    },
 	    renderTags: function renderTags() {
-	      var _this3 = this;
+	      var _this4 = this;
 
 	      var h = this.$createElement;
 
@@ -21527,7 +21579,7 @@
 	        handleClear: this.clearTag,
 	        handleClearAll: this.clearAllTags
 	      }) : h(TagsContainer, [tagsList.map(function (item) {
-	        return _this3.renderTag(item);
+	        return _this4.renderTag(item);
 	      }), shouldRenderClearAllTag && h(TagItem, {
 	        "class": getClassName$3(this.$props.innerClass, 'selected-tag') || ''
 	      }, [h("span", ["Clear All"]), h("span", {
@@ -21553,13 +21605,13 @@
 	    },
 	    renderIcons: function renderIcons() {
 	      var h = this.$createElement;
-	      var _this$$props3 = this.$props,
-	          iconPosition = _this$$props3.iconPosition,
-	          showClear = _this$$props3.showClear,
-	          innerClass = _this$$props3.innerClass,
-	          getMicInstance = _this$$props3.getMicInstance,
-	          showVoiceSearch = _this$$props3.showVoiceSearch,
-	          showIcon = _this$$props3.showIcon;
+	      var _this$$props4 = this.$props,
+	          iconPosition = _this$$props4.iconPosition,
+	          showClear = _this$$props4.showClear,
+	          innerClass = _this$$props4.innerClass,
+	          getMicInstance = _this$$props4.getMicInstance,
+	          showVoiceSearch = _this$$props4.showVoiceSearch,
+	          showIcon = _this$$props4.showIcon;
 	      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
 	      var currentValue = this.$data.currentValue;
 	      return h("div", [h(IconGroup, {
@@ -21611,7 +21663,7 @@
 	      (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
 	    },
 	    listenForFocusShortcuts: function listenForFocusShortcuts() {
-	      var _this4 = this;
+	      var _this5 = this;
 
 	      var _this$$props$focusSho = this.$props.focusShortcuts,
 	          focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
@@ -21629,7 +21681,7 @@
 	        // Prevent the default refresh event under WINDOWS system
 	        event.preventDefault();
 
-	        _this4.focusSearchBox(event);
+	        _this5.focusSearchBox(event);
 	      }); // if one of modifier keys are used, they are handled below
 
 	      hotkeys('*', function (event) {
@@ -21640,7 +21692,7 @@
 	          var element = modifierKeys[index];
 
 	          if (hotkeys[element]) {
-	            _this4.focusSearchBox(event);
+	            _this5.focusSearchBox(event);
 
 	            break;
 	          }
@@ -21649,14 +21701,14 @@
 	    }
 	  },
 	  render: function render() {
-	    var _this5 = this;
+	    var _this6 = this;
 
 	    var h = arguments[0];
-	    var _this$$props4 = this.$props,
-	        theme = _this$$props4.theme,
-	        size = _this$$props4.size,
-	        expandSuggestionsContainer = _this$$props4.expandSuggestionsContainer,
-	        enableDefaultSuggestions = _this$$props4.enableDefaultSuggestions;
+	    var _this$$props5 = this.$props,
+	        theme = _this$$props5.theme,
+	        size = _this$$props5.size,
+	        expandSuggestionsContainer = _this$$props5.expandSuggestionsContainer,
+	        enableDefaultSuggestions = _this$$props5.enableDefaultSuggestions;
 	    var _this$$scopedSlots = this.$scopedSlots,
 	        recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
 	        popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
@@ -21678,24 +21730,24 @@
 	        "isOpen": this.$data.isOpen
 	      },
 	      "scopedSlots": {
-	        "default": function _default(_ref3) {
-	          var getInputEvents = _ref3.getInputEvents,
-	              getInputProps = _ref3.getInputProps,
-	              getItemProps = _ref3.getItemProps,
-	              getItemEvents = _ref3.getItemEvents,
-	              isOpen = _ref3.isOpen,
-	              highlightedIndex = _ref3.highlightedIndex,
-	              setHighlightedIndex = _ref3.setHighlightedIndex;
+	        "default": function _default(_ref4) {
+	          var getInputEvents = _ref4.getInputEvents,
+	              getInputProps = _ref4.getInputProps,
+	              getItemProps = _ref4.getItemProps,
+	              getItemEvents = _ref4.getItemEvents,
+	              isOpen = _ref4.isOpen,
+	              highlightedIndex = _ref4.highlightedIndex,
+	              setHighlightedIndex = _ref4.setHighlightedIndex;
 
 	          var renderSuggestionsContainer = function renderSuggestionsContainer() {
-	            return h("div", [_this5.hasCustomRenderer && _this5.getComponent({
+	            return h("div", [_this6.hasCustomRenderer && _this6.getComponent({
 	              isOpen: isOpen,
 	              getItemProps: getItemProps,
 	              getItemEvents: getItemEvents,
 	              highlightedIndex: highlightedIndex
-	            }), _this5.renderErrorComponent(), !_this5.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-	              "class": suggestions$1(_this5.themePreset, theme) + " " + getClassName$3(_this5.$props.innerClass, 'list')
-	            }, [_this5.suggestionsList.slice(0, size || 10).map(function (item, index) {
+	            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+	              "class": suggestions$1(_this6.themePreset, theme) + " " + getClassName$3(_this6.$props.innerClass, 'list')
+	            }, [_this6.suggestionsList.slice(0, size || 10).map(function (item, index) {
 	              return h("li", {
 	                "domProps": _extends({}, getItemProps({
 	                  item: item
@@ -21705,15 +21757,15 @@
 	                })),
 	                "key": index + 1 + "-" + item.value,
 	                "style": {
-	                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, index)
+	                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index)
 	                }
 	              }, [h(SuggestionItem, {
 	                "attrs": {
-	                  "currentValue": _this5.currentValue,
+	                  "currentValue": _this6.currentValue,
 	                  "suggestion": item
 	                }
 	              })]);
-	            }), _this5.defaultSearchSuggestions.map(function (sugg, index) {
+	            }), _this6.defaultSearchSuggestions.map(function (sugg, index) {
 	              return h("li", {
 	                "domProps": _extends({}, getItemProps({
 	                  item: sugg
@@ -21721,9 +21773,9 @@
 	                "on": _extends({}, getItemEvents({
 	                  item: sugg
 	                })),
-	                "key": _this5.suggestionsList.length + index + 1 + "-" + sugg.value,
+	                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
 	                "style": {
-	                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, _this5.suggestionsList.length + index),
+	                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
 	                  justifyContent: 'flex-start'
 	                }
 	              }, [h("div", {
@@ -21732,28 +21784,28 @@
 	                }
 	              }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
 	                "attrs": {
-	                  "className": getClassName$3(_this5.$props.innerClass, 'recent-search-icon') || null,
+	                  "className": getClassName$3(_this6.$props.innerClass, 'recent-search-icon') || null,
 	                  "icon": recentSearchesIcon,
 	                  "type": "recent-search-icon"
 	                }
 	              }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
 	                "attrs": {
-	                  "className": getClassName$3(_this5.$props.innerClass, 'popular-search-icon') || null,
+	                  "className": getClassName$3(_this6.$props.innerClass, 'popular-search-icon') || null,
 	                  "icon": popularSearchesIcon,
 	                  "type": "popular-search-icon"
 	                }
 	              })]), h(SuggestionItem, {
 	                "attrs": {
-	                  "currentValue": _this5.currentValue,
+	                  "currentValue": _this6.currentValue,
 	                  "suggestion": sugg
 	                }
 	              })]);
-	            }), hasQuerySuggestionsRenderer(_this5) ? _this5.getComponent({
+	            }), hasQuerySuggestionsRenderer(_this6) ? _this6.getComponent({
 	              isOpen: isOpen,
 	              getItemProps: getItemProps,
 	              getItemEvents: getItemEvents,
 	              highlightedIndex: highlightedIndex
-	            }, true) : _this5.topSuggestions.map(function (sugg, index) {
+	            }, true) : _this6.topSuggestions.map(function (sugg, index) {
 	              return h("li", {
 	                "domProps": _extends({}, getItemProps({
 	                  item: sugg
@@ -21761,9 +21813,9 @@
 	                "on": _extends({}, getItemEvents({
 	                  item: sugg
 	                })),
-	                "key": _this5.suggestionsList.length + index + 1 + "-" + sugg.value,
+	                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
 	                "style": {
-	                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, _this5.suggestionsList.length + index),
+	                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
 	                  justifyContent: 'flex-start'
 	                }
 	              }, [h("div", {
@@ -21772,61 +21824,61 @@
 	                }
 	              }, [h(CustomSvg, {
 	                "attrs": {
-	                  "className": getClassName$3(_this5.$props.innerClass, 'popular-search-icon') || null,
+	                  "className": getClassName$3(_this6.$props.innerClass, 'popular-search-icon') || null,
 	                  "icon": popularSearchesIcon,
 	                  "type": "popular-search-icon"
 	                }
 	              })]), h(SuggestionItem, {
 	                "attrs": {
-	                  "currentValue": _this5.currentValue,
+	                  "currentValue": _this6.currentValue,
 	                  "suggestion": sugg
 	                }
 	              })]);
-	            })]) : _this5.renderNoSuggestions(_this5.suggestionsList)]);
+	            })]) : _this6.renderNoSuggestions(_this6.suggestionsList)]);
 	          };
 
 	          return h("div", {
 	            "class": suggestionsContainer
-	          }, [h(InputGroup, [_this5.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+	          }, [h(InputGroup, [_this6.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
 	            "attrs": {
-	              "id": _this5.$props.componentId + "-input",
-	              "showIcon": _this5.$props.showIcon,
-	              "showClear": _this5.$props.showClear,
-	              "iconPosition": _this5.$props.iconPosition,
-	              "placeholder": _this5.$props.placeholder,
-	              "autoFocus": _this5.$props.autoFocus,
-	              "themePreset": _this5.themePreset,
+	              "id": _this6.$props.componentId + "-input",
+	              "showIcon": _this6.$props.showIcon,
+	              "showClear": _this6.$props.showClear,
+	              "iconPosition": _this6.$props.iconPosition,
+	              "placeholder": _this6.$props.placeholder,
+	              "autoFocus": _this6.$props.autoFocus,
+	              "themePreset": _this6.themePreset,
 	              "autocomplete": "off"
 	            },
-	            "ref": _this5.$props.innerRef,
-	            "class": getClassName$3(_this5.$props.innerClass, 'input'),
+	            "ref": _this6.$props.innerRef,
+	            "class": getClassName$3(_this6.$props.innerClass, 'input'),
 	            "on": _extends({}, getInputEvents({
-	              onInput: _this5.onInputChange,
+	              onInput: _this6.onInputChange,
 	              onBlur: function onBlur(e) {
-	                _this5.$emit('blur', e, _this5.triggerQuery);
+	                _this6.$emit('blur', e, _this6.triggerQuery);
 	              },
-	              onFocus: _this5.handleFocus,
+	              onFocus: _this6.handleFocus,
 	              onKeyPress: function onKeyPress(e) {
-	                _this5.$emit('keyPress', e, _this5.triggerQuery);
+	                _this6.$emit('keyPress', e, _this6.triggerQuery);
 
-	                _this5.$emit('key-press', e, _this5.triggerQuery);
+	                _this6.$emit('key-press', e, _this6.triggerQuery);
 	              },
 	              onKeyDown: function onKeyDown(e) {
-	                return _this5.handleKeyDown(e, highlightedIndex);
+	                return _this6.handleKeyDown(e, highlightedIndex);
 	              },
 	              onKeyUp: function onKeyUp(e) {
-	                _this5.$emit('keyUp', e, _this5.triggerQuery);
+	                _this6.$emit('keyUp', e, _this6.triggerQuery);
 
-	                _this5.$emit('key-up', e, _this5.triggerQuery);
+	                _this6.$emit('key-up', e, _this6.triggerQuery);
 	              },
 	              onClick: function onClick() {
 	                setHighlightedIndex(null);
 	              }
 	            })),
 	            "domProps": _extends({}, getInputProps({
-	              value: _this5.$data.currentValue === null ? '' : _this5.$data.currentValue
+	              value: _this6.$data.currentValue === null ? '' : _this6.$data.currentValue
 	            }))
-	          }), _this5.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this5.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this5.renderTags()]);
+	          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this6.renderTags()]);
 	        }
 	      }
 	    }) : h("div", {
@@ -21842,26 +21894,26 @@
 	      },
 	      "on": _extends({}, {
 	        blur: function blur(e) {
-	          _this5.$emit('blur', e, _this5.triggerQuery);
+	          _this6.$emit('blur', e, _this6.triggerQuery);
 	        },
 	        keypress: function keypress(e) {
-	          _this5.$emit('keyPress', e, _this5.triggerQuery);
+	          _this6.$emit('keyPress', e, _this6.triggerQuery);
 
-	          _this5.$emit('key-press', e, _this5.triggerQuery);
+	          _this6.$emit('key-press', e, _this6.triggerQuery);
 	        },
 	        input: this.onInputChange,
 	        focus: function focus(e) {
-	          _this5.$emit('focus', e, _this5.triggerQuery);
+	          _this6.$emit('focus', e, _this6.triggerQuery);
 	        },
 	        keydown: function keydown(e) {
-	          _this5.$emit('keyDown', e, _this5.triggerQuery);
+	          _this6.$emit('keyDown', e, _this6.triggerQuery);
 
-	          _this5.$emit('key-down', e, _this5.triggerQuery);
+	          _this6.$emit('key-down', e, _this6.triggerQuery);
 	        },
 	        keyup: function keyup(e) {
-	          _this5.$emit('keyUp', e, _this5.triggerQuery);
+	          _this6.$emit('keyUp', e, _this6.triggerQuery);
 
-	          _this5.$emit('key-up', e, _this5.triggerQuery);
+	          _this6.$emit('key-up', e, _this6.triggerQuery);
 	        }
 	      }),
 	      "domProps": _extends({}, {
@@ -28366,23 +28418,61 @@
 	  }
 
 	  var _props = props,
-	      componentIds = _props.componentIds;
+	      componentIds = _props.componentIds,
+	      excludeComponentIds = _props.excludeComponentIds;
 
-	  if (typeof componentIds === 'string') {
-	    var _ref;
+	  if (componentIds) {
+	    if (typeof componentIds === 'string') {
+	      var _ref;
+
+	      return _ref = {}, _ref[componentIds] = state[componentIds], _ref;
+	    }
 
-	    return _ref = {}, _ref[componentIds] = state[componentIds], _ref;
+	    if (Array.isArray(componentIds) && componentIds.length) {
+	      var _filteredState = {};
+	      componentIds.forEach(function (componentId) {
+	        _filteredState[componentId] = state[componentId];
+	      });
+	      return _filteredState;
+	    }
 	  }
 
-	  if (Array.isArray(componentIds)) {
-	    var filteredState = {};
-	    componentIds.forEach(function (componentId) {
+	  var filteredState = {};
+
+	  if (!props.includeInternalComponents) {
+	    Object.keys(state).forEach(function (componentId) {
+	      if (componentId.endsWith('internal') || componentId.endsWith('active') || componentId.endsWith('timestamp')) {
+	        return;
+	      }
+
 	      filteredState[componentId] = state[componentId];
 	    });
-	    return filteredState;
+	  } else {
+	    filteredState = state;
+	  } // Apply exclude component ids
+
+
+	  if (excludeComponentIds) {
+	    if (typeof excludeComponentIds === 'string') {
+	      Object.keys(state).forEach(function (componentId) {
+	        if (componentId === excludeComponentIds) {
+	          // Delete state
+	          delete filteredState[componentId];
+	        }
+	      });
+	    }
+
+	    if (Array.isArray(excludeComponentIds) && excludeComponentIds.length) {
+	      Object.keys(state).forEach(function (componentId) {
+	        if (excludeComponentIds.includes(componentId)) {
+	          // Delete state
+	          delete filteredState[componentId];
+	        }
+	      });
+	    }
 	  }
 
-	  return state;
+	  return filteredState;
 	};
 
 	var filterByKeys = function filterByKeys(state, allowedKeys) {
@@ -28405,7 +28495,9 @@
 	    onChange: VueTypes.func,
 	    componentIds: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
 	    includeKeys: VueTypes.arrayOf(VueTypes.string).def(defaultKeys),
-	    strict: VueTypes.bool.def(true)
+	    strict: VueTypes.bool.def(true),
+	    includeInternalComponents: VueTypes.bool.def(false),
+	    excludeComponentIds: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)])
 	  },
 	  data: function data() {
 	    this.__state = {
@@ -28420,21 +28512,21 @@
 	    searchStateProps: function searchStateProps() {
 	      return {
 	        selectedValues: this.selectedValues || {},
-	        queryLog: this.queryLog,
-	        dependencyTree: this.dependencyTree,
-	        componentProps: this.componentProps,
-	        hits: this.hits,
-	        aggregations: this.aggregations,
-	        isLoading: this.isLoading,
-	        error: this.error,
-	        promotedResults: this.promotedResults,
-	        rawData: this.rawData
+	        queryLog: this.queryLog || {},
+	        dependencyTree: this.dependencyTree || {},
+	        componentProps: this.componentProps || {},
+	        hits: this.hits || {},
+	        aggregations: this.aggregations || {},
+	        isLoading: this.isLoading || {},
+	        error: this.error || {},
+	        promotedResults: this.promotedResults || {},
+	        rawData: this.rawData || {}
 	      };
 	    }
 	  },
 	  watch: {
 	    searchState: function searchState(newVal, oldVal) {
-	      if (this.isStateChanged(newVal, oldVal)) {
+	      if (oldVal != null && this.isStateChanged(newVal, oldVal)) {
 	        this.$emit('change', oldVal, newVal);
 	      }
 	    },
@@ -28465,6 +28557,9 @@
 	    componentIds: function componentIds(newVal, oldVal) {
 	      this.calculateSearchState(newVal, oldVal);
 	    },
+	    excludeComponentIds: function excludeComponentIds(newVal, oldVal) {
+	      this.calculateSearchState(newVal, oldVal);
+	    },
 	    includeKeys: function includeKeys(newVal, oldVal) {
 	      this.calculateSearchState(newVal, oldVal);
 	    },
@@ -37460,11 +37555,14 @@
 	var _excluded$k = ["aggs", "size"],
 	    _excluded2 = ["query"],
 	    _excluded3 = ["query"];
+
+	var _componentTypeToDefau;
 	var X_SEARCH_CLIENT$1 = 'ReactiveSearch Vue';
 	var componentsWithoutFilters = [constants_1$1.numberBox, constants_1$1.ratingsFilter];
 	var resultComponents = [constants_1$1.reactiveList, constants_1$1.reactiveMap];
+	var componentTypeToDefaultValue = (_componentTypeToDefau = {}, _componentTypeToDefau[constants_1$1.singleList] = '', _componentTypeToDefau[constants_1$1.multiList] = [], _componentTypeToDefau[constants_1$1.singleDataList] = '', _componentTypeToDefau[constants_1$1.singleDropdownList] = '', _componentTypeToDefau[constants_1$1.multiDataList] = [], _componentTypeToDefau[constants_1$1.multiDropdownList] = [], _componentTypeToDefau[constants_1$1.tagCloud] = '', _componentTypeToDefau[constants_1$1.toggleButton] = '', _componentTypeToDefau[constants_1$1.singleDropdownRange] = '', _componentTypeToDefau[constants_1$1.multiDropdownRange] = [], _componentTypeToDefau[constants_1$1.singleRange] = '', _componentTypeToDefau[constants_1$1.multiRange] = [], _componentTypeToDefau);
 
-	function getValue(state, id, defaultValue) {
+	function getValue(state, id, defaultValue, componentType) {
 	  if (state && state[id]) {
 	    try {
 	      // parsing for next.js - since it uses extra set of quotes to wrap params
@@ -37483,7 +37581,7 @@
 	  }
 
 	  return {
-	    value: defaultValue,
+	    value: defaultValue || componentTypeToDefaultValue[componentType] || null,
 	    reference: 'DEFAULT'
 	  };
 	}
@@ -37622,7 +37720,7 @@
 	      var internalComponent = component.componentId + "__internal";
 	      var label = component.filterLabel || component.componentId;
 
-	      var _getValue = getValue(searchState, component.componentId, component.value || component.defaultValue),
+	      var _getValue = getValue(searchState, component.componentId, component.value || component.defaultValue, componentType),
 	          value = _getValue.value,
 	          reference = _getValue.reference; // [1] set selected values
 
@@ -37991,7 +38089,7 @@
 	  });
 	}
 
-	var version = "2.0.0-alpha.2";
+	var version = "2.0.0-alpha.4";
 
 	var _templateObject$q, _templateObject2$c;