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

package/dist/cjs/{DataSearch-6cf29cf0.js → DataSearch-aa04dc6e.js}

@@ -1188,7 +1188,11 @@ var DataSearch = {
     },
     value: function value(newVal, oldVal) {
       if (!isEqual(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) {
@@ -1332,7 +1336,7 @@ var DataSearch = {
         this.onValueSelectedHandler(currentValue, configureStore.causes.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) {
@@ -1347,8 +1351,12 @@ var DataSearch = {
         toggleIsOpen = true;
       }
 
+      if (isTagsMode === void 0) {
+        isTagsMode = this.$options.isTagsMode;
+      }
+
       var performUpdate = function performUpdate() {
-        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
+        if (isTagsMode && isEqual(value, _this.selectedTags)) {
           return;
         } // Refresh recent searches when value becomes empty
 
@@ -1359,7 +1367,7 @@ var DataSearch = {
           _this.getRecentSearches();
         }
 
-        if (_this.$options.isTagsMode && cause === configureStore.causes.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)) {
@@ -1386,7 +1394,7 @@ var DataSearch = {
 
         var queryHandlerValue = value;
 
-        if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
+        if (isTagsMode) {
           queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
         }
 
@@ -1564,19 +1572,40 @@ var DataSearch = {
       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) {
@@ -1671,9 +1700,9 @@ var DataSearch = {
       }
 
       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,
@@ -1709,7 +1738,7 @@ var DataSearch = {
       return null;
     },
     renderTag: function renderTag(item) {
-      var _this2 = this;
+      var _this3 = this;
 
       var h = this.$createElement;
       var innerClass = this.$props.innerClass;
@@ -1723,7 +1752,7 @@ var DataSearch = {
         "class": "close-icon",
         "on": {
           "click": function click() {
-            return _this2.clearTag(item);
+            return _this3.clearTag(item);
           }
         }
       }, [h(CancelSvg.CancelSvg)])]);
@@ -1747,7 +1776,7 @@ var DataSearch = {
       }
     },
     renderTags: function renderTags() {
-      var _this3 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
 
@@ -1763,7 +1792,7 @@ var DataSearch = {
         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$1(this.$props.innerClass, 'selected-tag') || ''
       }, [h("span", ["Clear All"]), h("span", {
@@ -1789,13 +1818,13 @@ var DataSearch = {
     },
     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(CancelSvg.IconGroup, {
@@ -1847,7 +1876,7 @@ var DataSearch = {
       (_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;
@@ -1865,7 +1894,7 @@ var DataSearch = {
         // 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) {
@@ -1876,7 +1905,7 @@ var DataSearch = {
           var element = modifierKeys[index$1];
 
           if (hotkeys[element]) {
-            _this4.focusSearchBox(event);
+            _this5.focusSearchBox(event);
 
             break;
           }
@@ -1885,14 +1914,14 @@ var DataSearch = {
     }
   },
   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;
@@ -1914,24 +1943,24 @@ var DataSearch = {
         "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": Input.suggestions(_this5.themePreset, theme) + " " + getClassName$1(_this5.$props.innerClass, 'list')
-            }, [_this5.suggestionsList.slice(0, size || 10).map(function (item, index) {
+            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": Input.suggestions(_this6.themePreset, theme) + " " + getClassName$1(_this6.$props.innerClass, 'list')
+            }, [_this6.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
@@ -1941,15 +1970,15 @@ var DataSearch = {
                 })),
                 "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": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: sugg
@@ -1957,9 +1986,9 @@ var DataSearch = {
                 "on": _rollupPluginBabelHelpers._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", {
@@ -1968,28 +1997,28 @@ var DataSearch = {
                 }
               }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this5.$props.innerClass, 'recent-search-icon') || null,
+                  "className": getClassName$1(_this6.$props.innerClass, 'recent-search-icon') || null,
                   "icon": recentSearchesIcon,
                   "type": "recent-search-icon"
                 }
               }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this5.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName$1(_this6.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this5.currentValue,
+                  "currentValue": _this6.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            }), index.hasQuerySuggestionsRenderer(_this5) ? _this5.getComponent({
+            }), index.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": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: sugg
@@ -1997,9 +2026,9 @@ var DataSearch = {
                 "on": _rollupPluginBabelHelpers._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", {
@@ -2008,61 +2037,61 @@ var DataSearch = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this5.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName$1(_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": Input.suggestionsContainer
-          }, [h(InputGroup, [_this5.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+          }, [h(InputGroup, [_this6.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.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$1(_this5.$props.innerClass, 'input'),
+            "ref": _this6.$props.innerRef,
+            "class": getClassName$1(_this6.$props.innerClass, 'input'),
             "on": _rollupPluginBabelHelpers._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": _rollupPluginBabelHelpers._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", {
@@ -2078,26 +2107,26 @@ var DataSearch = {
       },
       "on": _rollupPluginBabelHelpers._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": _rollupPluginBabelHelpers._extends({}, {

package/dist/cjs/DataSearch.js

@@ -18,7 +18,7 @@ require('./ComponentWrapper-ad3dad02.js');
 require('./Title-1de7d0f4.js');
 require('./Flex-aa517a13.js');
 require('hotkeys-js');
-var DataSearch = require('./DataSearch-6cf29cf0.js');
+var DataSearch = require('./DataSearch-aa04dc6e.js');
 require('./CancelSvg-9f258f4f.js');
 require('./Input-e6603a7e.js');
 require('compute-scroll-into-view');

package/dist/cjs/StateProvider.js

@@ -33,23 +33,61 @@ var filterByComponentIds = function filterByComponentIds(state, props) {
   }
 
   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) {
@@ -72,7 +110,9 @@ var StateProvider = {
     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 = {
@@ -87,21 +127,21 @@ var StateProvider = {
     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);
       }
     },
@@ -132,6 +172,9 @@ var StateProvider = {
     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);
     },

package/dist/cjs/index.js

@@ -28,13 +28,13 @@ require('appbase-js');
 require('url-search-params-polyfill');
 var ReactiveBase = require('./ReactiveBase.js');
 require('hotkeys-js');
-var DataSearch = require('./DataSearch-6cf29cf0.js');
+var DataSearch = require('./DataSearch-aa04dc6e.js');
 require('./CancelSvg-9f258f4f.js');
 require('./Input-e6603a7e.js');
 require('compute-scroll-into-view');
 require('./Container-daf30918.js');
 require('vue-highlight-words');
-var install = require('./install-99716d95.js');
+var install = require('./install-b97dbac4.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 require('./FormControlList-c195a592.js');
 require('./utils-d6a52588.js');

package/dist/cjs/initReactivesearch.js

@@ -21,11 +21,14 @@ var utils = require('@appbaseio/reactivecore/lib/actions/utils');
 var _excluded = ["aggs", "size"],
     _excluded2 = ["query"],
     _excluded3 = ["query"];
+
+var _componentTypeToDefau;
 var X_SEARCH_CLIENT = 'ReactiveSearch Vue';
 var componentsWithoutFilters = [constants.componentTypes.numberBox, constants.componentTypes.ratingsFilter];
 var resultComponents = [constants.componentTypes.reactiveList, constants.componentTypes.reactiveMap];
+var componentTypeToDefaultValue = (_componentTypeToDefau = {}, _componentTypeToDefau[constants.componentTypes.singleList] = '', _componentTypeToDefau[constants.componentTypes.multiList] = [], _componentTypeToDefau[constants.componentTypes.singleDataList] = '', _componentTypeToDefau[constants.componentTypes.singleDropdownList] = '', _componentTypeToDefau[constants.componentTypes.multiDataList] = [], _componentTypeToDefau[constants.componentTypes.multiDropdownList] = [], _componentTypeToDefau[constants.componentTypes.tagCloud] = '', _componentTypeToDefau[constants.componentTypes.toggleButton] = '', _componentTypeToDefau[constants.componentTypes.singleDropdownRange] = '', _componentTypeToDefau[constants.componentTypes.multiDropdownRange] = [], _componentTypeToDefau[constants.componentTypes.singleRange] = '', _componentTypeToDefau[constants.componentTypes.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
@@ -44,7 +47,7 @@ function getValue(state, id, defaultValue) {
   }
 
   return {
-    value: defaultValue,
+    value: defaultValue || componentTypeToDefaultValue[componentType] || null,
     reference: 'DEFAULT'
   };
 }
@@ -183,7 +186,7 @@ function initReactivesearch(componentCollection, searchState, settings) {
       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
 
@@ -552,4 +555,5 @@ function initReactivesearch(componentCollection, searchState, settings) {
   });
 }
 
+exports.componentTypeToDefaultValue = componentTypeToDefaultValue;
 exports.default = initReactivesearch;

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

@@ -18,7 +18,7 @@ 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-6cf29cf0.js');
+var DataSearch = require('./DataSearch-aa04dc6e.js');
 var CancelSvg = require('./CancelSvg-9f258f4f.js');
 var Input = require('./Input-e6603a7e.js');
 var Container = require('./Container-daf30918.js');

package/dist/cjs/install.js

@@ -28,13 +28,13 @@ require('appbase-js');
 require('url-search-params-polyfill');
 require('./ReactiveBase.js');
 require('hotkeys-js');
-require('./DataSearch-6cf29cf0.js');
+require('./DataSearch-aa04dc6e.js');
 require('./CancelSvg-9f258f4f.js');
 require('./Input-e6603a7e.js');
 require('compute-scroll-into-view');
 require('./Container-daf30918.js');
 require('vue-highlight-words');
-var install = require('./install-99716d95.js');
+var install = require('./install-b97dbac4.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 require('./FormControlList-c195a592.js');
 require('./utils-d6a52588.js');