@appbaseio/reactivesearch-vue 1.29.0 → 1.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/dist/@appbaseio/reactivesearch-vue.umd.js +1238 -545
  2. package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
  3. package/dist/@appbaseio/reactivesearch-vue.umd.min.js +5 -5
  4. package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
  5. package/dist/cjs/{Button-e0b7c1f6.js → Button-0e2e2c02.js} +1 -1
  6. package/dist/cjs/{CancelSvg-4aa35935.js → CancelSvg-c48c1085.js} +1 -1
  7. package/dist/cjs/{Card-fd94ef07.js → Card-4fa0f769.js} +2 -2
  8. package/dist/cjs/{ComponentWrapper-10bad289.js → ComponentWrapper-5cb08414.js} +2 -2
  9. package/dist/cjs/{Container-526efa6a.js → Container-cfd69a34.js} +1 -1
  10. package/dist/cjs/{DataSearch-eec21890.js → DataSearch-e550096e.js} +234 -83
  11. package/dist/cjs/DataSearch.js +9 -9
  12. package/dist/cjs/{DropDown-e4381fcc.js → DropDown-fc59f1ee.js} +4 -4
  13. package/dist/cjs/DynamicRangeSlider.js +5 -5
  14. package/dist/cjs/{Flex-f146cdad.js → Flex-63774e4d.js} +1 -1
  15. package/dist/cjs/{FormControlList-808dbcef.js → FormControlList-a9c64bb8.js} +1 -1
  16. package/dist/cjs/{Input-0d7b25ad.js → Input-43868594.js} +1 -1
  17. package/dist/cjs/{ListItem-b40adb04.js → ListItem-38962297.js} +2 -2
  18. package/dist/cjs/MultiDropdownList.js +10 -10
  19. package/dist/cjs/MultiList.js +8 -8
  20. package/dist/cjs/MultiRange.js +6 -6
  21. package/dist/cjs/RangeInput.js +8 -8
  22. package/dist/cjs/RangeSlider.js +6 -6
  23. package/dist/cjs/ReactiveBase.js +34 -24
  24. package/dist/cjs/ReactiveComponent.js +3 -3
  25. package/dist/cjs/ReactiveList.js +9 -8
  26. package/dist/cjs/ResultCard.js +3 -3
  27. package/dist/cjs/ResultList.js +3 -3
  28. package/dist/cjs/SelectedFilters.js +44 -27
  29. package/dist/cjs/SingleDropdownList.js +10 -10
  30. package/dist/cjs/SingleList.js +8 -8
  31. package/dist/cjs/SingleRange.js +7 -7
  32. package/dist/cjs/StateProvider.js +30 -5
  33. package/dist/cjs/{Title-584a8cc8.js → Title-26661936.js} +1 -1
  34. package/dist/cjs/ToggleButton.js +7 -6
  35. package/dist/cjs/{_rollupPluginBabelHelpers-f127c8b7.js → _rollupPluginBabelHelpers-91d4b5a6.js} +1 -2
  36. package/dist/cjs/{index-4509aa45.js → index-2cd3650b.js} +1 -1
  37. package/dist/cjs/index.js +18 -17
  38. package/dist/cjs/initReactivesearch.js +2 -2
  39. package/dist/cjs/{install-4886582d.js → install-250a14f1.js} +246 -83
  40. package/dist/cjs/install.js +18 -17
  41. package/dist/cjs/{ssr-0ee35a09.js → ssr-949cafb5.js} +1 -1
  42. package/dist/cjs/{utils-1219e1fe.js → utils-0df3cb93.js} +1 -1
  43. package/dist/cjs/version.js +1 -1
  44. package/dist/es/{Button-33de88e6.js → Button-e18ad90f.js} +1 -1
  45. package/dist/es/{CancelSvg-c2c03a35.js → CancelSvg-e3b33cdd.js} +1 -1
  46. package/dist/es/{Card-6446f1b7.js → Card-ad6ba09f.js} +2 -2
  47. package/dist/es/{ComponentWrapper-0f3431d1.js → ComponentWrapper-dc92772a.js} +2 -2
  48. package/dist/es/{Container-18b03fde.js → Container-421450dc.js} +1 -1
  49. package/dist/es/{DataSearch-42f547cd.js → DataSearch-8e5d0972.js} +234 -85
  50. package/dist/es/DataSearch.js +9 -9
  51. package/dist/es/{DropDown-ff6ad982.js → DropDown-565fad6f.js} +4 -4
  52. package/dist/es/DynamicRangeSlider.js +5 -5
  53. package/dist/es/{Flex-8770345d.js → Flex-09d40927.js} +1 -1
  54. package/dist/es/{FormControlList-704f8dee.js → FormControlList-38ffe3d3.js} +1 -1
  55. package/dist/es/{Input-e339e63a.js → Input-c9d757bc.js} +1 -1
  56. package/dist/es/{ListItem-8e8fb535.js → ListItem-41d6ddd7.js} +2 -2
  57. package/dist/es/MultiDropdownList.js +10 -10
  58. package/dist/es/MultiList.js +8 -8
  59. package/dist/es/MultiRange.js +6 -6
  60. package/dist/es/RangeInput.js +8 -8
  61. package/dist/es/RangeSlider.js +6 -6
  62. package/dist/es/ReactiveBase.js +34 -24
  63. package/dist/es/ReactiveComponent.js +3 -3
  64. package/dist/es/ReactiveList.js +9 -8
  65. package/dist/es/ResultCard.js +3 -3
  66. package/dist/es/ResultList.js +3 -3
  67. package/dist/es/SelectedFilters.js +44 -27
  68. package/dist/es/SingleDropdownList.js +10 -10
  69. package/dist/es/SingleList.js +8 -8
  70. package/dist/es/SingleRange.js +7 -7
  71. package/dist/es/StateProvider.js +30 -5
  72. package/dist/es/{Title-3522ff56.js → Title-35edd732.js} +1 -1
  73. package/dist/es/ToggleButton.js +7 -6
  74. package/dist/es/{_rollupPluginBabelHelpers-0f24d612.js → _rollupPluginBabelHelpers-51ce1182.js} +1 -2
  75. package/dist/es/{index-78920565.js → index-5371a13f.js} +1 -1
  76. package/dist/es/index.js +19 -18
  77. package/dist/es/initReactivesearch.js +2 -2
  78. package/dist/es/{install-54ebd72e.js → install-9faa87f1.js} +247 -84
  79. package/dist/es/install.js +18 -17
  80. package/dist/es/{ssr-a41dfea9.js → ssr-ad57b0ad.js} +1 -1
  81. package/dist/es/{utils-64a2e5f0.js → utils-9b45e0ab.js} +1 -1
  82. package/dist/es/version.js +1 -1
  83. package/package.json +3 -3
@@ -4,24 +4,24 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
4
4
 
5
5
  var configureStore = require('@appbaseio/reactivecore');
6
6
  var configureStore__default = _interopDefault(configureStore);
7
- var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
7
+ var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
8
8
  var VueTypes = _interopDefault(require('vue-types'));
9
9
  var constants = require('@appbaseio/reactivecore/lib/utils/constants');
10
10
  var helper = require('@appbaseio/reactivecore/lib/utils/helper');
11
11
  var styled = require('@appbaseio/vue-emotion');
12
12
  var styled__default = _interopDefault(styled);
13
- var Button = require('./Button-e0b7c1f6.js');
13
+ var Button = require('./Button-0e2e2c02.js');
14
14
  var vueTypes = require('./vueTypes-57d01f18.js');
15
15
  var ReactiveList = require('./ReactiveList.js');
16
- var index = require('./index-4509aa45.js');
17
- var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
18
- var Title = require('./Title-584a8cc8.js');
16
+ var index = require('./index-2cd3650b.js');
17
+ var ComponentWrapper = require('./ComponentWrapper-5cb08414.js');
18
+ var Title = require('./Title-26661936.js');
19
19
  var ReactiveBase = require('./ReactiveBase.js');
20
20
  var hotkeys = _interopDefault(require('hotkeys-js'));
21
- var DataSearch = require('./DataSearch-eec21890.js');
22
- var CancelSvg = require('./CancelSvg-4aa35935.js');
23
- var Input = require('./Input-0d7b25ad.js');
24
- var Container = require('./Container-526efa6a.js');
21
+ var DataSearch = require('./DataSearch-e550096e.js');
22
+ var CancelSvg = require('./CancelSvg-c48c1085.js');
23
+ var Input = require('./Input-43868594.js');
24
+ var Container = require('./Container-cfd69a34.js');
25
25
  var SingleList = require('./SingleList.js');
26
26
  var MultiList = require('./MultiList.js');
27
27
  var SingleDropdownList = require('./SingleDropdownList.js');
@@ -80,10 +80,12 @@ var _debounce = configureStore.helper.debounce,
80
80
  normalizeDataField = configureStore.helper.normalizeDataField;
81
81
  var SearchBox = {
82
82
  name: 'SearchBox',
83
+ isTagsMode: false,
83
84
  data: function data() {
84
85
  var props = this.$props;
85
86
  this.__state = {
86
87
  currentValue: '',
88
+ selectedTags: [],
87
89
  isOpen: false,
88
90
  normalizedSuggestions: []
89
91
  };
@@ -99,7 +101,16 @@ var SearchBox = {
99
101
  var _this$$props = this.$props,
100
102
  distinctField = _this$$props.distinctField,
101
103
  distinctFieldConfig = _this$$props.distinctFieldConfig,
102
- index = _this$$props.index;
104
+ index = _this$$props.index,
105
+ mode = _this$$props.mode;
106
+
107
+ if (mode === constants.SEARCH_COMPONENTS_MODES.TAG) {
108
+ this.$options.isTagsMode = true;
109
+ }
110
+
111
+ if (this.$options.isTagsMode) {
112
+ console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
113
+ }
103
114
 
104
115
  if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
105
116
  console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
@@ -114,8 +125,12 @@ var SearchBox = {
114
125
  }
115
126
 
116
127
  this.currentValue = this.selectedValue || this.value || this.defaultValue || '';
117
- this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
118
- this.setValue(this.currentValue, true, this.$props, undefined, false, this.selectedCategory); // Set custom and default queries in store
128
+
129
+ if (this.$options.isTagsMode) {
130
+ this.currentValue = '';
131
+ }
132
+
133
+ this.handleTextChange = _debounce(this.handleText, this.$props.debounce); // Set custom and default queries in store
119
134
 
120
135
  this.triggerCustomQuery(this.currentValue, this.selectedCategory);
121
136
  this.triggerDefaultQuery(this.currentValue);
@@ -151,7 +166,7 @@ var SearchBox = {
151
166
  debounce: VueTypes.number.def(0),
152
167
  defaultValue: vueTypes.types.string,
153
168
  excludeFields: vueTypes.types.excludeFields,
154
- value: vueTypes.types.value,
169
+ value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), vueTypes.types.value]),
155
170
  defaultSuggestions: vueTypes.types.suggestions,
156
171
  enableSynonyms: VueTypes.bool.def(true),
157
172
  enableQuerySuggestions: VueTypes.bool.def(false),
@@ -204,7 +219,18 @@ var SearchBox = {
204
219
  onData: vueTypes.types.func,
205
220
  renderItem: vueTypes.types.func,
206
221
  enterButton: VueTypes.bool.def(false),
207
- renderEnterButton: VueTypes.any
222
+ renderEnterButton: VueTypes.any,
223
+ mode: VueTypes.oneOf(['select', 'tag']).def('select'),
224
+ renderSelectedTags: VueTypes.any
225
+ },
226
+ beforeMount: function beforeMount() {
227
+ if (this.selectedValue) {
228
+ this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
229
+ } else if (this.$props.value) {
230
+ this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
231
+ } else if (this.$props.defaultValue) {
232
+ this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
233
+ }
208
234
  },
209
235
  mounted: function mounted() {
210
236
  this.listenForFocusShortcuts();
@@ -254,15 +280,25 @@ var SearchBox = {
254
280
  this.normalizedSuggestions = suggestionsList;
255
281
  },
256
282
  selectedValue: function selectedValue(newVal, oldVal) {
257
- if (oldVal !== newVal && this.$data.currentValue !== newVal) {
283
+ if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
258
284
  if (!newVal && this.$data.currentValue) {
259
285
  // selected value is cleared, call onValueSelected
260
286
  this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
287
+ } // if (this.$props.value === undefined) {
288
+
289
+
290
+ if (this.$options.isTagsMode) {
291
+ // handling reset of tags through SelectedFilters or URL
292
+ this.selectedTags = [];
261
293
  }
262
294
 
263
- if (this.$props.value === undefined) {
264
- this.setValue(newVal || '', true, this.$props);
295
+ var cause = !newVal ? configureStore.causes.CLEAR_VALUE : undefined;
296
+
297
+ if (this.$options.isTagsMode) {
298
+ cause = configureStore.causes.SUGGESTION_SELECT;
265
299
  }
300
+
301
+ this.setValue(newVal || '', true, this.$props, cause); // }
266
302
  }
267
303
  },
268
304
  focusShortcuts: function focusShortcuts() {
@@ -403,7 +439,40 @@ var SearchBox = {
403
439
  }
404
440
 
405
441
  var performUpdate = function performUpdate() {
406
- _this.currentValue = value;
442
+ if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
443
+ return;
444
+ }
445
+
446
+ if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
447
+ if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
448
+ // check if value already present in selectedTags
449
+ if (typeof value === 'string' && _this.selectedTags.includes(value)) {
450
+ _this.isOpen = false;
451
+ return;
452
+ }
453
+
454
+ _this.selectedTags = [].concat(_this.selectedTags);
455
+
456
+ if (typeof value === 'string' && !!value) {
457
+ _this.selectedTags.push(value);
458
+ } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
459
+ var mergedArray = Array.from(new Set([].concat(_this.selectedTags, value)));
460
+ _this.selectedTags = mergedArray;
461
+ }
462
+ } else if (value) {
463
+ _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
464
+ }
465
+
466
+ _this.currentValue = '';
467
+ } else {
468
+ _this.currentValue = value;
469
+ }
470
+
471
+ var queryHandlerValue = value;
472
+
473
+ if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
474
+ queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
475
+ }
407
476
 
408
477
  if (isDefaultValue) {
409
478
  if (_this.$props.autosuggest) {
@@ -411,19 +480,19 @@ var SearchBox = {
411
480
  _this.isOpen = false;
412
481
  }
413
482
 
414
- _this.triggerDefaultQuery(value);
483
+ if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
415
484
  } // in case of strict selection only SUGGESTION_SELECT should be able
416
485
  // to set the query otherwise the value should reset
417
486
 
418
487
 
419
488
  if (props.strictSelection) {
420
- if (cause === configureStore.causes.SUGGESTION_SELECT || value === '') {
421
- _this.triggerCustomQuery(value, categoryValue);
489
+ if (cause === configureStore.causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
490
+ _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
422
491
  } else {
423
492
  _this.setValue('', true);
424
493
  }
425
- } else if (props.value === undefined) {
426
- _this.triggerCustomQuery(value, categoryValue);
494
+ } else if (props.value === undefined || cause === configureStore.causes.SUGGESTION_SELECT || cause === configureStore.causes.CLEAR_VALUE) {
495
+ _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
427
496
  }
428
497
  } else {
429
498
  // debounce for handling text while typing
@@ -474,6 +543,11 @@ var SearchBox = {
474
543
  showFilter = _this$$props2.showFilter,
475
544
  URLParams = _this$$props2.URLParams;
476
545
  var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
546
+
547
+ if (this.$options.isTagsMode) {
548
+ value = paramValue;
549
+ }
550
+
477
551
  var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
478
552
  var query = defaultQueryTobeSet;
479
553
 
@@ -558,10 +632,19 @@ var SearchBox = {
558
632
  this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
559
633
  },
560
634
  handleKeyDown: function handleKeyDown(event, highlightedIndex) {
635
+ if (highlightedIndex === void 0) {
636
+ highlightedIndex = null;
637
+ }
638
+
561
639
  // if a suggestion was selected, delegate the handling to suggestion handler
562
- if (event.key === 'Enter' && highlightedIndex === null) {
563
- this.setValue(event.target.value, true);
564
- this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
640
+ if (event.key === 'Enter') {
641
+ if (this.$props.autosuggest === false) {
642
+ this.enterButtonOnClick();
643
+ } else if (highlightedIndex === null) {
644
+ this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined // to handle tags
645
+ );
646
+ this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
647
+ }
565
648
  } // Need to review
566
649
 
567
650
 
@@ -604,13 +687,29 @@ var SearchBox = {
604
687
  if (value === undefined) {
605
688
  this.setValue(suggestion.value, true, this.$props, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
606
689
  } else {
607
- this.$emit('change', suggestion.value, function (_ref4) {
690
+ var emitValue = suggestion.value;
691
+
692
+ if (this.$options.isTagsMode) {
693
+ emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
694
+
695
+ if (this.selectedTags.includes(suggestion.value)) {
696
+ // avoid duplicates in tags array
697
+ this.isOpen = false;
698
+ return;
699
+ }
700
+
701
+ emitValue.push(suggestion.value);
702
+ }
703
+
704
+ this.setValue(emitValue, true, this.$props, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
705
+ this.$emit('change', emitValue, function (_ref4) {
608
706
  var isOpen = _ref4.isOpen;
609
- return _this3.triggerQuery({
707
+ return _this3.triggerQuery(_rollupPluginBabelHelpers._extends({
610
708
  isOpen: isOpen,
611
- value: suggestion.value,
709
+ value: emitValue
710
+ }, !_this3.$options.isTagsMode && {
612
711
  categoryValue: suggestion._category
613
- });
712
+ }));
614
713
  });
615
714
  }
616
715
 
@@ -733,6 +832,13 @@ var SearchBox = {
733
832
 
734
833
  return null;
735
834
  },
835
+ enterButtonOnClick: function enterButtonOnClick() {
836
+ this.triggerQuery({
837
+ isOpen: false,
838
+ value: this.currentValue,
839
+ customQuery: true
840
+ });
841
+ },
736
842
  renderEnterButtonElement: function renderEnterButtonElement() {
737
843
  var _this4 = this;
738
844
 
@@ -742,27 +848,19 @@ var SearchBox = {
742
848
  innerClass = _this$$props4.innerClass;
743
849
  var renderEnterButton = this.$scopedSlots.renderEnterButton;
744
850
 
745
- var enterButtonOnClick = function enterButtonOnClick() {
746
- return _this4.triggerQuery({
747
- isOpen: false,
748
- value: _this4.currentValue,
749
- customQuery: true
750
- });
751
- };
752
-
753
851
  if (enterButton) {
754
852
  var getEnterButtonMarkup = function getEnterButtonMarkup() {
755
853
  if (renderEnterButton) {
756
- return renderEnterButton(enterButtonOnClick);
854
+ return renderEnterButton(_this4.enterButtonOnClick);
757
855
  }
758
856
 
759
857
  return h(Button.Button, {
760
- "class": "enter-btn " + getClassName(innerClass, 'enterButton'),
858
+ "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
761
859
  "attrs": {
762
860
  "primary": true
763
861
  },
764
862
  "on": {
765
- "click": enterButtonOnClick
863
+ "click": _this4.enterButtonOnClick
766
864
  }
767
865
  }, ["Search"]);
768
866
  };
@@ -894,10 +992,79 @@ var SearchBox = {
894
992
  "click": handleAutoFillClick
895
993
  }
896
994
  });
995
+ },
996
+ renderTag: function renderTag(item) {
997
+ var _this7 = this;
998
+
999
+ var h = this.$createElement;
1000
+ var innerClass = this.$props.innerClass;
1001
+ return h(DataSearch.TagItem, {
1002
+ "class": getClassName(innerClass, 'selected-tag') || ''
1003
+ }, [h("span", [item]), h("span", {
1004
+ "attrs": {
1005
+ "role": "img",
1006
+ "aria-label": "delete-tag"
1007
+ },
1008
+ "class": "close-icon",
1009
+ "on": {
1010
+ "click": function click() {
1011
+ return _this7.clearTag(item);
1012
+ }
1013
+ }
1014
+ }, [h(CancelSvg.CancelSvg)])]);
1015
+ },
1016
+ clearAllTags: function clearAllTags() {
1017
+ this.selectedTags = [];
1018
+ this.setValue('', true, this.$props, configureStore.causes.SUGGESTION_SELECT);
1019
+
1020
+ if (this.$props.value !== undefined) {
1021
+ this.$emit('change', this.selectedTags, this.triggerQuery);
1022
+ }
1023
+ },
1024
+ clearTag: function clearTag(tagValue) {
1025
+ this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
1026
+ return tag !== tagValue;
1027
+ }));
1028
+ this.setValue('', true, this.$props, configureStore.causes.SUGGESTION_SELECT);
1029
+
1030
+ if (this.$props.value !== undefined) {
1031
+ this.$emit('change', this.selectedTags, this.triggerQuery);
1032
+ }
1033
+ },
1034
+ renderTags: function renderTags() {
1035
+ var _this8 = this;
1036
+
1037
+ var h = this.$createElement;
1038
+
1039
+ if (!Array.isArray(this.selectedTags)) {
1040
+ return null;
1041
+ }
1042
+
1043
+ var tagsList = [].concat(this.selectedTags);
1044
+ var shouldRenderClearAllTag = tagsList.length > 1;
1045
+ var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
1046
+ return renderSelectedTags ? renderSelectedTags({
1047
+ values: this.selectedTags,
1048
+ handleClear: this.clearTag,
1049
+ handleClearAll: this.clearAllTags
1050
+ }) : h(DataSearch.TagsContainer, [tagsList.map(function (item) {
1051
+ return _this8.renderTag(item);
1052
+ }), shouldRenderClearAllTag && h(DataSearch.TagItem, {
1053
+ "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
1054
+ }, [h("span", ["Clear All"]), h("span", {
1055
+ "attrs": {
1056
+ "role": "img",
1057
+ "aria-label": "delete-tag"
1058
+ },
1059
+ "class": "close-icon",
1060
+ "on": {
1061
+ "click": this.clearAllTags
1062
+ }
1063
+ }, [h(CancelSvg.CancelSvg)])])]);
897
1064
  }
898
1065
  },
899
1066
  render: function render() {
900
- var _this7 = this;
1067
+ var _this9 = this;
901
1068
 
902
1069
  var h = arguments[0];
903
1070
  var _this$$props6 = this.$props,
@@ -943,14 +1110,14 @@ var SearchBox = {
943
1110
  }
944
1111
  };
945
1112
 
946
- return h("div", [_this7.hasCustomRenderer && _this7.getComponent({
1113
+ return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
947
1114
  isOpen: isOpen,
948
1115
  getItemProps: getItemProps,
949
1116
  getItemEvents: getItemEvents,
950
1117
  highlightedIndex: highlightedIndex
951
- }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
952
- "class": Input.suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
953
- }, [_this7.normalizedSuggestions.map(function (item, index) {
1118
+ }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
1119
+ "class": Input.suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
1120
+ }, [_this9.normalizedSuggestions.map(function (item, index) {
954
1121
  return renderItem ? h("li", {
955
1122
  "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
956
1123
  item: item
@@ -960,7 +1127,7 @@ var SearchBox = {
960
1127
  })),
961
1128
  "key": index + 1 + "-" + item.value,
962
1129
  "style": {
963
- backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
1130
+ backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
964
1131
  justifyContent: 'flex-start',
965
1132
  alignItems: 'center'
966
1133
  }
@@ -973,7 +1140,7 @@ var SearchBox = {
973
1140
  })),
974
1141
  "key": index + 1 + "-" + item.value,
975
1142
  "style": {
976
- backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
1143
+ backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
977
1144
  justifyContent: 'flex-start',
978
1145
  alignItems: 'center'
979
1146
  }
@@ -984,61 +1151,61 @@ var SearchBox = {
984
1151
  }
985
1152
  }, [h(DataSearch.CustomSvg, {
986
1153
  "attrs": {
987
- "className": getClassName(_this7.$props.innerClass, item._suggestion_type + "-search-icon") || null,
1154
+ "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
988
1155
  "icon": getIcon(item._suggestion_type),
989
1156
  "type": item._suggestion_type + "-search-icon"
990
1157
  }
991
1158
  })]), h(DataSearch.SuggestionItem, {
992
1159
  "attrs": {
993
- "currentValue": _this7.currentValue,
1160
+ "currentValue": _this9.currentValue,
994
1161
  "suggestion": item
995
1162
  }
996
- }), _this7.renderAutoFill(item)]);
997
- })]) : _this7.renderNoSuggestions(_this7.normalizedSuggestions)]);
1163
+ }), _this9.renderAutoFill(item)]);
1164
+ })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
998
1165
  };
999
1166
 
1000
1167
  return h("div", {
1001
1168
  "class": Input.suggestionsContainer
1002
- }, [h(DataSearch.InputGroup, [_this7.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
1169
+ }, [h(DataSearch.InputGroup, [_this9.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
1003
1170
  "attrs": {
1004
- "id": _this7.$props.componentId + "-input",
1005
- "showIcon": _this7.$props.showIcon,
1006
- "showClear": _this7.$props.showClear,
1007
- "iconPosition": _this7.$props.iconPosition,
1008
- "placeholder": _this7.$props.placeholder,
1009
- "autoFocus": _this7.$props.autoFocus,
1010
- "themePreset": _this7.themePreset,
1171
+ "id": _this9.$props.componentId + "-input",
1172
+ "showIcon": _this9.$props.showIcon,
1173
+ "showClear": _this9.$props.showClear,
1174
+ "iconPosition": _this9.$props.iconPosition,
1175
+ "placeholder": _this9.$props.placeholder,
1176
+ "autoFocus": _this9.$props.autoFocus,
1177
+ "themePreset": _this9.themePreset,
1011
1178
  "autocomplete": "off"
1012
1179
  },
1013
- "ref": _this7.$props.innerRef,
1014
- "class": getClassName(_this7.$props.innerClass, 'input'),
1180
+ "ref": _this9.$props.innerRef,
1181
+ "class": getClassName(_this9.$props.innerClass, 'input'),
1015
1182
  "on": _rollupPluginBabelHelpers._extends({}, getInputEvents({
1016
- onInput: _this7.onInputChange,
1183
+ onInput: _this9.onInputChange,
1017
1184
  onBlur: function onBlur(e) {
1018
- _this7.$emit('blur', e, _this7.triggerQuery);
1185
+ _this9.$emit('blur', e, _this9.triggerQuery);
1019
1186
  },
1020
- onFocus: _this7.handleFocus,
1187
+ onFocus: _this9.handleFocus,
1021
1188
  onKeyPress: function onKeyPress(e) {
1022
- _this7.$emit('keyPress', e, _this7.triggerQuery);
1189
+ _this9.$emit('keyPress', e, _this9.triggerQuery);
1023
1190
 
1024
- _this7.$emit('key-press', e, _this7.triggerQuery);
1191
+ _this9.$emit('key-press', e, _this9.triggerQuery);
1025
1192
  },
1026
1193
  onKeyDown: function onKeyDown(e) {
1027
- return _this7.handleKeyDown(e, highlightedIndex);
1194
+ return _this9.handleKeyDown(e, highlightedIndex);
1028
1195
  },
1029
1196
  onKeyUp: function onKeyUp(e) {
1030
- _this7.$emit('keyUp', e, _this7.triggerQuery);
1197
+ _this9.$emit('keyUp', e, _this9.triggerQuery);
1031
1198
 
1032
- _this7.$emit('key-up', e, _this7.triggerQuery);
1199
+ _this9.$emit('key-up', e, _this9.triggerQuery);
1033
1200
  },
1034
1201
  onClick: function onClick() {
1035
1202
  setHighlightedIndex(null);
1036
1203
  }
1037
1204
  })),
1038
1205
  "domProps": _rollupPluginBabelHelpers._extends({}, getInputProps({
1039
- value: _this7.$data.currentValue === null ? '' : _this7.$data.currentValue
1206
+ value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
1040
1207
  }))
1041
- }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this7.renderInputAddonAfter(), _this7.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
1208
+ }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
1042
1209
  }
1043
1210
  }
1044
1211
  }) : h("div", {
@@ -1054,26 +1221,22 @@ var SearchBox = {
1054
1221
  },
1055
1222
  "on": _rollupPluginBabelHelpers._extends({}, {
1056
1223
  blur: function blur(e) {
1057
- _this7.$emit('blur', e, _this7.triggerQuery);
1224
+ _this9.$emit('blur', e, _this9.triggerQuery);
1058
1225
  },
1059
1226
  keypress: function keypress(e) {
1060
- _this7.$emit('keyPress', e, _this7.triggerQuery);
1227
+ _this9.$emit('keyPress', e, _this9.triggerQuery);
1061
1228
 
1062
- _this7.$emit('key-press', e, _this7.triggerQuery);
1229
+ _this9.$emit('key-press', e, _this9.triggerQuery);
1063
1230
  },
1064
1231
  input: this.onInputChange,
1065
1232
  focus: function focus(e) {
1066
- _this7.$emit('focus', e, _this7.triggerQuery);
1067
- },
1068
- keydown: function keydown(e) {
1069
- _this7.$emit('keyDown', e, _this7.triggerQuery);
1070
-
1071
- _this7.$emit('key-down', e, _this7.triggerQuery);
1233
+ _this9.$emit('focus', e, _this9.triggerQuery);
1072
1234
  },
1235
+ keydown: this.handleKeyDown,
1073
1236
  keyup: function keyup(e) {
1074
- _this7.$emit('keyUp', e, _this7.triggerQuery);
1237
+ _this9.$emit('keyUp', e, _this9.triggerQuery);
1075
1238
 
1076
- _this7.$emit('key-up', e, _this7.triggerQuery);
1239
+ _this9.$emit('key-up', e, _this9.triggerQuery);
1077
1240
  }
1078
1241
  }),
1079
1242
  "domProps": _rollupPluginBabelHelpers._extends({}, {
@@ -3,43 +3,43 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  require('@appbaseio/reactivecore');
6
- require('./_rollupPluginBabelHelpers-f127c8b7.js');
6
+ require('./_rollupPluginBabelHelpers-91d4b5a6.js');
7
7
  require('vue-types');
8
8
  require('@appbaseio/reactivecore/lib/utils/constants');
9
9
  require('@appbaseio/reactivecore/lib/utils/helper');
10
10
  require('emotion');
11
11
  require('@appbaseio/vue-emotion');
12
12
  require('polished');
13
- require('./Button-e0b7c1f6.js');
13
+ require('./Button-0e2e2c02.js');
14
14
  require('./vueTypes-57d01f18.js');
15
15
  require('./ReactiveList.js');
16
16
  require('@appbaseio/reactivecore/lib/utils/transform');
17
17
  require('redux');
18
- require('./index-4509aa45.js');
19
- require('./ComponentWrapper-10bad289.js');
18
+ require('./index-2cd3650b.js');
19
+ require('./ComponentWrapper-5cb08414.js');
20
20
  require('@vue/babel-helper-vue-jsx-merge-props');
21
- require('./Title-584a8cc8.js');
22
- require('./ListItem-b40adb04.js');
23
- require('./Card-fd94ef07.js');
24
- require('./Flex-f146cdad.js');
21
+ require('./Title-26661936.js');
22
+ require('./ListItem-38962297.js');
23
+ require('./Card-4fa0f769.js');
24
+ require('./Flex-63774e4d.js');
25
25
  require('@appbaseio/reactivecore/lib/actions/analytics');
26
26
  require('appbase-js');
27
27
  require('url-search-params-polyfill');
28
28
  require('./ReactiveBase.js');
29
29
  require('hotkeys-js');
30
- require('./DataSearch-eec21890.js');
31
- require('./CancelSvg-4aa35935.js');
32
- require('./Input-0d7b25ad.js');
30
+ require('./DataSearch-e550096e.js');
31
+ require('./CancelSvg-c48c1085.js');
32
+ require('./Input-43868594.js');
33
33
  require('compute-scroll-into-view');
34
- require('./Container-526efa6a.js');
34
+ require('./Container-cfd69a34.js');
35
35
  require('vue-highlight-words');
36
- var install = require('./install-4886582d.js');
36
+ var install = require('./install-250a14f1.js');
37
37
  require('@appbaseio/reactivecore/lib/utils/suggestions');
38
- require('./FormControlList-808dbcef.js');
39
- require('./utils-1219e1fe.js');
38
+ require('./FormControlList-a9c64bb8.js');
39
+ require('./utils-0df3cb93.js');
40
40
  require('./SingleList.js');
41
41
  require('./MultiList.js');
42
- require('./DropDown-e4381fcc.js');
42
+ require('./DropDown-fc59f1ee.js');
43
43
  require('./SingleDropdownList.js');
44
44
  require('./MultiDropdownList.js');
45
45
  require('./ToggleButton.js');
@@ -50,9 +50,10 @@ require('./MultiRange.js');
50
50
  require('./ResultCard.js');
51
51
  require('./ResultList.js');
52
52
  require('vue-no-ssr');
53
- require('./ssr-0ee35a09.js');
53
+ require('./ssr-949cafb5.js');
54
54
  require('./RangeSlider.js');
55
55
  require('./DynamicRangeSlider.js');
56
+ require('@appbaseio/reactivecore/lib/actions/value');
56
57
  require('./StateProvider.js');
57
58
  require('./RangeInput.js');
58
59
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
4
 
5
- var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
5
+ var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
6
6
  var styled = require('@appbaseio/vue-emotion');
7
7
  var styled__default = _interopDefault(styled);
8
8
  var NoSSR = _interopDefault(require('vue-no-ssr'));
@@ -4,7 +4,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
4
4
 
5
5
  var configureStore = require('@appbaseio/reactivecore');
6
6
  var configureStore__default = _interopDefault(configureStore);
7
- var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
7
+ var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
8
8
 
9
9
  var getAggsOrder = configureStore.helper.getAggsOrder;
10
10
 
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var version = "1.29.0";
5
+ var version = "1.30.0";
6
6
 
7
7
  exports.default = version;
@@ -1,4 +1,4 @@
1
- import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
1
+ import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-51ce1182.js';
2
2
  import { css } from 'emotion';
3
3
  import styled from '@appbaseio/vue-emotion';
4
4
  import { darken, rgba, lighten } from 'polished';
@@ -1,4 +1,4 @@
1
- import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
1
+ import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-51ce1182.js';
2
2
  import styled, { css } from '@appbaseio/vue-emotion';
3
3
  import computeScrollIntoView from 'compute-scroll-into-view';
4
4