@appbaseio/reactivesearch-vue 1.36.6 → 1.36.7

package/dist/es/DataSearch.js

@@ -53,7 +53,8 @@ var DataSearch = {
       selectedTags: [],
       isOpen: false,
       normalizedSuggestions: [],
-      isPending: false
+      isPending: false,
+      isSuggestionSelected: false
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -123,7 +124,7 @@ var DataSearch = {
     normalizedPopularSuggestions: function normalizedPopularSuggestions() {
       return getTopSuggestions(
       // use default popular suggestions if value is empty
-      this.currentValue ? this.popularSuggestions : this.defaultPopularSuggestions || [], this.currentValue, this.showDistinctSuggestions);
+      this.currentValue ? this.popularSuggestions : this.defaultPopularSuggestions || [], this.currentValue || '', this.showDistinctSuggestions);
     },
     defaultSearchSuggestions: function defaultSearchSuggestions() {
       var isPopularSuggestionsEnabled = this.enablePopularSuggestions;
@@ -143,7 +144,7 @@ var DataSearch = {
       var defaultSuggestions = isPopularSuggestionsEnabled ? [].concat(customNormalizedRecentSearches, customDefaultPopularSuggestions || []) : customNormalizedRecentSearches;
       return getTopSuggestions(
       // use default popular suggestions if value is empty
-      defaultSuggestions, this.currentValue, this.showDistinctSuggestions);
+      defaultSuggestions, this.currentValue || '', this.showDistinctSuggestions);
     },
     hasCustomRenderer: function hasCustomRenderer$1() {
       return hasCustomRenderer(this);
@@ -293,23 +294,12 @@ var DataSearch = {
         this.updateQueryHandler(this.componentId, this.$data.currentValue, this.$props);
       }
     },
-    isLoading: function isLoading(newVal) {
-      if (newVal) {
-        this.suggestions = [];
-      }
-    },
     suggestions: function suggestions(newVal) {
-      if (this.isLoading) {
-        this.normalizedSuggestions = [];
-        return;
-      }
       if (Array.isArray(newVal) && this.$data.currentValue.trim().length) {
         // shallow check allows us to set suggestions even if the next set
         // of suggestions are same as the current one
         this.$emit('suggestions', newVal);
-        if (!isEqual(this.normalizedSuggestions, newVal)) {
-          this.normalizedSuggestions = this.onSuggestions(newVal);
-        }
+        this.normalizedSuggestions = this.onSuggestions(newVal);
       }
     },
     selectedValue: function selectedValue(newVal, oldVal) {
@@ -414,7 +404,7 @@ var DataSearch = {
       return queryOptions;
     },
     onSuggestions: function onSuggestions(results) {
-      return handleOnSuggestions(results, this.$data.currentValue, this);
+      return handleOnSuggestions(results, this.$data.currentValue || '', this);
     },
     handleSearchIconClick: function handleSearchIconClick() {
       var currentValue = this.currentValue;
@@ -442,11 +432,13 @@ var DataSearch = {
         if (isTagsMode && isEqual(value, _this.selectedTags)) {
           return;
         }
-        // Refresh recent searches when value becomes empty
-        if (props.enableDefaultSuggestions && !value && _this.currentValue && _this.enableRecentSearches) {
+        if (!value && props.enableDefaultSuggestions === false) {
+          _this.resetStoreForComponent(props.componentId);
+        } else if (!value && _this.currentValue && _this.enableRecentSearches) {
           _this.getRecentSearches();
         }
         if (isTagsMode) {
+          var isTagAdded = false;
           if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
             // check if value already present in selectedTags
             if (typeof value === 'string' && _this.selectedTags.includes(value)) {
@@ -455,14 +447,36 @@ var DataSearch = {
             }
             _this.selectedTags = [].concat(_this.selectedTags);
             if (typeof value === 'string' && !!value) {
-              _this.selectedTags.push(value);
+              if (props.strictSelection && cause === causes.SUGGESTION_SELECT) {
+                _this.selectedTags.push(value);
+                isTagAdded = true;
+              } else if (!props.strictSelection) {
+                _this.selectedTags.push(value);
+                isTagAdded = true;
+              }
             } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
-              _this.selectedTags = value;
+              if (props.strictSelection && cause === causes.SUGGESTION_SELECT) {
+                _this.selectedTags = value;
+                isTagAdded = true;
+              } else if (!props.strictSelection) {
+                _this.selectedTags.push(value);
+                isTagAdded = true;
+              }
             }
           } else if (value) {
-            _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+            if (props.strictSelection && cause === causes.SUGGESTION_SELECT) {
+              _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+              isTagAdded = true;
+            } else if (!props.strictSelection) {
+              _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+              isTagAdded = true;
+            }
+          }
+          if (props.strictSelection && !isTagAdded && typeof value === 'string') {
+            _this.currentValue = value;
+          } else {
+            _this.currentValue = '';
           }
-          _this.currentValue = '';
         } else {
           _this.currentValue = value;
         }
@@ -482,7 +496,7 @@ var DataSearch = {
           if (props.strictSelection && props.autosuggest) {
             if (cause === causes.SUGGESTION_SELECT || props.value !== undefined) {
               _this.updateQueryHandler(props.componentId, queryHandlerValue, props);
-            } else if (_this.currentValue !== '') {
+            } else if (_this.currentValue !== '' && !props.strictSelection) {
               _this.setValue('', true);
             }
           } else {
@@ -496,7 +510,7 @@ var DataSearch = {
         _this.$emit('value-change', value);
         // Set the already fetched suggestions if query is same as used last to fetch the hits
         if (value === _this.lastUsedQuery) {
-          _this.suggestions = _this.onSuggestions(_this.suggestions);
+          _this.normalizedSuggestions = _this.onSuggestions(_this.suggestions);
           // invoke on suggestions
           _this.$emit('suggestions', _this.suggestions);
         } else if (!value) {
@@ -524,13 +538,18 @@ var DataSearch = {
         // Update calculated default query in store
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
-      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), execute);
-      this.updateQuery({
-        componentId: this.internalComponent,
-        query: query,
-        value: value,
-        componentType: componentTypes.dataSearch
-      }, execute);
+      if (!value && props.enableDefaultSuggestions === false) {
+        // clear Component data from store
+        this.resetStoreForComponent(props.componentId);
+      } else {
+        this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), execute);
+        this.updateQuery({
+          componentId: this.internalComponent,
+          query: query,
+          value: value,
+          componentType: componentTypes.dataSearch
+        }, execute);
+      }
     },
     updateQueryHandler: function updateQueryHandler(componentId, value, props) {
       var customQuery = props.customQuery,
@@ -599,24 +618,27 @@ var DataSearch = {
     },
     clearValue: function clearValue() {
       this.isPending = false;
-      this.setValue('', true);
+      if (!this.$props.enableDefaultSuggestions) {
+        this.isOpen = false;
+      }
+      this.setValue('', false);
       this.onValueSelectedHandler('', causes.CLEAR_VALUE);
     },
     handleKeyDown: function handleKeyDown(event, highlightedIndex) {
       var targetValue = event.target.value;
       var _this$$props2 = this.$props,
         value = _this$$props2.value,
-        strictSelection = _this$$props2.strictSelection,
-        size = _this$$props2.size,
-        autosuggest = _this$$props2.autosuggest;
+        size = _this$$props2.size;
       if (value !== undefined) {
         this.isPending = true;
       }
       // if a suggestion was selected, delegate the handling to suggestion handler
       if (event.key === 'Enter' && (highlightedIndex === null || highlightedIndex < 0 || highlightedIndex === [].concat([].concat(this.suggestionsList).slice(0, size || 10), this.defaultSearchSuggestions, this.topSuggestions).length)) {
         this.isPending = false;
-        this.setValue(this.$options.isTagsMode && autosuggest && strictSelection ? '' : targetValue, true, this.$props, undefined, false);
-        this.onValueSelectedHandler(targetValue, causes.ENTER_PRESS);
+        if (!this.isSuggestionSelected) {
+          this.setValue(targetValue, true, this.$props, undefined, false);
+          this.onValueSelectedHandler(targetValue, causes.ENTER_PRESS);
+        }
       }
       // Need to review
       this.$emit('keyDown', event, this.triggerQuery);
@@ -652,11 +674,16 @@ var DataSearch = {
       }
     },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
+      var _this3 = this;
       var value = this.$props.value;
       // Record analytics for selected suggestions
       this.triggerClickAnalytics(suggestion._click_id);
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT);
+        this.isSuggestionSelected = true;
+        setTimeout(function () {
+          _this3.isSuggestionSelected = false;
+        }, 50);
       } else if (this.$options.isTagsMode) {
         var emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
         if (this.selectedTags.includes(suggestion.value)) {
@@ -762,7 +789,7 @@ var DataSearch = {
       return null;
     },
     renderTag: function renderTag(item) {
-      var _this3 = this;
+      var _this4 = this;
       var h = this.$createElement;
       var innerClass = this.$props.innerClass;
       return h(TagItem, {
@@ -775,7 +802,7 @@ var DataSearch = {
         "class": "close-icon",
         "on": {
           "click": function click() {
-            return _this3.clearTag(item);
+            return _this4.clearTag(item);
           }
         }
       }, [h(CancelSvg)])]);
@@ -797,7 +824,7 @@ var DataSearch = {
       }
     },
     renderTags: function renderTags() {
-      var _this4 = this;
+      var _this5 = this;
       var h = this.$createElement;
       if (!Array.isArray(this.selectedTags)) {
         return null;
@@ -810,7 +837,7 @@ var DataSearch = {
         handleClear: this.clearTag,
         handleClearAll: this.clearAllTags
       }) : h(TagsContainer, [tagsList.map(function (item) {
-        return _this4.renderTag(item);
+        return _this5.renderTag(item);
       }), shouldRenderClearAllTag && h(TagItem, {
         "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
       }, [h("span", ["Clear All"]), h("span", {
@@ -889,7 +916,7 @@ var DataSearch = {
       (_this$$refs = this.$refs) == null || (_this$$refs = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this5 = this;
+      var _this6 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (isEmpty(focusShortcuts)) {
@@ -904,7 +931,7 @@ var DataSearch = {
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this5.focusSearchBox(event);
+        _this6.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -914,7 +941,7 @@ var DataSearch = {
         for (var index = 0; index < modifierKeys.length; index += 1) {
           var element = modifierKeys[index];
           if (hotkeys[element]) {
-            _this5.focusSearchBox(event);
+            _this6.focusSearchBox(event);
             break;
           }
         }
@@ -922,7 +949,7 @@ var DataSearch = {
     }
   },
   render: function render() {
-    var _this6 = this;
+    var _this7 = this;
     var h = arguments[0];
     var _this$$props6 = this.$props,
       theme = _this$$props6.theme,
@@ -957,14 +984,14 @@ var DataSearch = {
             highlightedIndex = _ref4.highlightedIndex,
             setHighlightedIndex = _ref4.setHighlightedIndex;
           var renderSuggestionsContainer = function renderSuggestionsContainer() {
-            return h("div", [_this6.hasCustomRenderer && _this6.getComponent({
+            return h("div", [_this7.hasCustomRenderer && _this7.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-              "class": suggestions(_this6.themePreset, theme) + " " + getClassName(_this6.$props.innerClass, 'list')
-            }, [_this6.suggestionsList.slice(0, size || 10).map(function (item, index) {
+            }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
+            }, [_this7.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item
@@ -974,15 +1001,15 @@ var DataSearch = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index)
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index)
                 }
               }, [h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": item
                 }
               })]);
-            }), _this6.defaultSearchSuggestions.map(function (sugg, index) {
+            }), _this7.defaultSearchSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: sugg
@@ -990,9 +1017,9 @@ var DataSearch = {
                 "on": _extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this7.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, _this7.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -1001,28 +1028,28 @@ var DataSearch = {
                 }
               }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, 'recent-search-icon') || null,
+                  "className": getClassName(_this7.$props.innerClass, 'recent-search-icon') || null,
                   "icon": recentSearchesIcon,
                   "type": "recent-search-icon"
                 }
               }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName(_this7.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            }), hasQuerySuggestionsRenderer(_this6) ? _this6.getComponent({
+            }), hasQuerySuggestionsRenderer(_this7) ? _this7.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }, true) : _this6.topSuggestions.map(function (sugg, index) {
+            }, true) : _this7.topSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: sugg
@@ -1030,9 +1057,9 @@ var DataSearch = {
                 "on": _extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this7.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, _this7.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -1041,58 +1068,58 @@ var DataSearch = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName(_this7.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            })]) : _this6.renderNoSuggestions(_this6.suggestionsList)]);
+            })]) : _this7.renderNoSuggestions(_this7.suggestionsList)]);
           };
           return h("div", {
             "class": suggestionsContainer
-          }, [h(InputGroup, [_this6.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+          }, [h(InputGroup, [_this7.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
             "attrs": {
-              "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,
+              "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,
               "autocomplete": "off"
             },
-            "ref": _this6.$props.innerRef,
-            "class": getClassName(_this6.$props.innerClass, 'input'),
+            "ref": _this7.$props.innerRef,
+            "class": getClassName(_this7.$props.innerClass, 'input'),
             "on": _extends({}, getInputEvents({
-              onInput: _this6.onInputChange,
+              onInput: _this7.onInputChange,
               onBlur: function onBlur(e) {
-                _this6.$emit('blur', e, _this6.triggerQuery);
+                _this7.$emit('blur', e, _this7.triggerQuery);
               },
-              onFocus: _this6.handleFocus,
+              onFocus: _this7.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this6.$emit('keyPress', e, _this6.triggerQuery);
-                _this6.$emit('key-press', e, _this6.triggerQuery);
+                _this7.$emit('keyPress', e, _this7.triggerQuery);
+                _this7.$emit('key-press', e, _this7.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this6.handleKeyDown(e, highlightedIndex);
+                return _this7.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this6.$emit('keyUp', e, _this6.triggerQuery);
-                _this6.$emit('key-up', e, _this6.triggerQuery);
+                _this7.$emit('keyUp', e, _this7.triggerQuery);
+                _this7.$emit('key-up', e, _this7.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _extends({}, getInputProps({
-              value: _this6.$data.currentValue === null || typeof _this6.$data.currentValue !== 'string' ? '' : _this6.$data.currentValue
+              value: _this7.$data.currentValue === null || typeof _this7.$data.currentValue !== 'string' ? '' : _this7.$data.currentValue
             }))
-          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this6.renderTags()]);
+          }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this7.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this7.renderTags()]);
         }
       }
     }) : h("div", {
@@ -1108,22 +1135,22 @@ var DataSearch = {
       },
       "on": _extends({}, {
         blur: function blur(e) {
-          _this6.$emit('blur', e, _this6.triggerQuery);
+          _this7.$emit('blur', e, _this7.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this6.$emit('keyPress', e, _this6.triggerQuery);
-          _this6.$emit('key-press', e, _this6.triggerQuery);
+          _this7.$emit('keyPress', e, _this7.triggerQuery);
+          _this7.$emit('key-press', e, _this7.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this6.$emit('focus', e, _this6.triggerQuery);
+          _this7.$emit('focus', e, _this7.triggerQuery);
         },
         keydown: function keydown(e) {
-          _this6.handleKeyDown(e, null);
+          _this7.handleKeyDown(e, null);
         },
         keyup: function keyup(e) {
-          _this6.$emit('keyUp', e, _this6.triggerQuery);
-          _this6.$emit('key-up', e, _this6.triggerQuery);
+          _this7.$emit('keyUp', e, _this7.triggerQuery);
+          _this7.$emit('key-up', e, _this7.triggerQuery);
         }
       }),
       "domProps": _extends({}, {