@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
@@ -1,21 +1,21 @@
1
1
  import { Actions, helper, causes } from '@appbaseio/reactivecore';
2
- import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
2
+ import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-51ce1182.js';
3
3
  import VueTypes from 'vue-types';
4
- import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
4
+ import { SEARCH_COMPONENTS_MODES, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
5
5
  import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
6
6
  import styled from '@appbaseio/vue-emotion';
7
- import { B as Button } from './Button-33de88e6.js';
7
+ import { B as Button } from './Button-e18ad90f.js';
8
8
  import { t as types } from './vueTypes-687b2304.js';
9
9
  import ReactiveList from './ReactiveList.js';
10
- import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-78920565.js';
11
- import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
12
- import { T as Title } from './Title-3522ff56.js';
10
+ import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-5371a13f.js';
11
+ import { C as ComponentWrapper } from './ComponentWrapper-dc92772a.js';
12
+ import { T as Title } from './Title-35edd732.js';
13
13
  import ReactiveBase from './ReactiveBase.js';
14
14
  import hotkeys from 'hotkeys-js';
15
- import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, b as InputGroup, C as CustomSvg, c as SuggestionItem, D as DataSearch } from './DataSearch-42f547cd.js';
16
- import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-c2c03a35.js';
17
- import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-e339e63a.js';
18
- import { C as Container } from './Container-18b03fde.js';
15
+ import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, T as TagItem, b as TagsContainer, c as InputGroup, C as CustomSvg, d as SuggestionItem, D as DataSearch } from './DataSearch-8e5d0972.js';
16
+ import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-e3b33cdd.js';
17
+ import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-c9d757bc.js';
18
+ import { C as Container } from './Container-421450dc.js';
19
19
  import SingleList from './SingleList.js';
20
20
  import MultiList from './MultiList.js';
21
21
  import SingleDropdownList from './SingleDropdownList.js';
@@ -74,10 +74,12 @@ var _debounce = helper.debounce,
74
74
  normalizeDataField = helper.normalizeDataField;
75
75
  var SearchBox = {
76
76
  name: 'SearchBox',
77
+ isTagsMode: false,
77
78
  data: function data() {
78
79
  var props = this.$props;
79
80
  this.__state = {
80
81
  currentValue: '',
82
+ selectedTags: [],
81
83
  isOpen: false,
82
84
  normalizedSuggestions: []
83
85
  };
@@ -93,7 +95,16 @@ var SearchBox = {
93
95
  var _this$$props = this.$props,
94
96
  distinctField = _this$$props.distinctField,
95
97
  distinctFieldConfig = _this$$props.distinctFieldConfig,
96
- index = _this$$props.index;
98
+ index = _this$$props.index,
99
+ mode = _this$$props.mode;
100
+
101
+ if (mode === SEARCH_COMPONENTS_MODES.TAG) {
102
+ this.$options.isTagsMode = true;
103
+ }
104
+
105
+ if (this.$options.isTagsMode) {
106
+ console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
107
+ }
97
108
 
98
109
  if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
99
110
  console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
@@ -108,8 +119,12 @@ var SearchBox = {
108
119
  }
109
120
 
110
121
  this.currentValue = this.selectedValue || this.value || this.defaultValue || '';
111
- this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
112
- this.setValue(this.currentValue, true, this.$props, undefined, false, this.selectedCategory); // Set custom and default queries in store
122
+
123
+ if (this.$options.isTagsMode) {
124
+ this.currentValue = '';
125
+ }
126
+
127
+ this.handleTextChange = _debounce(this.handleText, this.$props.debounce); // Set custom and default queries in store
113
128
 
114
129
  this.triggerCustomQuery(this.currentValue, this.selectedCategory);
115
130
  this.triggerDefaultQuery(this.currentValue);
@@ -145,7 +160,7 @@ var SearchBox = {
145
160
  debounce: VueTypes.number.def(0),
146
161
  defaultValue: types.string,
147
162
  excludeFields: types.excludeFields,
148
- value: types.value,
163
+ value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), types.value]),
149
164
  defaultSuggestions: types.suggestions,
150
165
  enableSynonyms: VueTypes.bool.def(true),
151
166
  enableQuerySuggestions: VueTypes.bool.def(false),
@@ -198,7 +213,18 @@ var SearchBox = {
198
213
  onData: types.func,
199
214
  renderItem: types.func,
200
215
  enterButton: VueTypes.bool.def(false),
201
- renderEnterButton: VueTypes.any
216
+ renderEnterButton: VueTypes.any,
217
+ mode: VueTypes.oneOf(['select', 'tag']).def('select'),
218
+ renderSelectedTags: VueTypes.any
219
+ },
220
+ beforeMount: function beforeMount() {
221
+ if (this.selectedValue) {
222
+ this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
223
+ } else if (this.$props.value) {
224
+ this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
225
+ } else if (this.$props.defaultValue) {
226
+ this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
227
+ }
202
228
  },
203
229
  mounted: function mounted() {
204
230
  this.listenForFocusShortcuts();
@@ -248,15 +274,25 @@ var SearchBox = {
248
274
  this.normalizedSuggestions = suggestionsList;
249
275
  },
250
276
  selectedValue: function selectedValue(newVal, oldVal) {
251
- if (oldVal !== newVal && this.$data.currentValue !== newVal) {
277
+ if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
252
278
  if (!newVal && this.$data.currentValue) {
253
279
  // selected value is cleared, call onValueSelected
254
280
  this.onValueSelectedHandler('', causes.CLEAR_VALUE);
281
+ } // if (this.$props.value === undefined) {
282
+
283
+
284
+ if (this.$options.isTagsMode) {
285
+ // handling reset of tags through SelectedFilters or URL
286
+ this.selectedTags = [];
255
287
  }
256
288
 
257
- if (this.$props.value === undefined) {
258
- this.setValue(newVal || '', true, this.$props);
289
+ var cause = !newVal ? causes.CLEAR_VALUE : undefined;
290
+
291
+ if (this.$options.isTagsMode) {
292
+ cause = causes.SUGGESTION_SELECT;
259
293
  }
294
+
295
+ this.setValue(newVal || '', true, this.$props, cause); // }
260
296
  }
261
297
  },
262
298
  focusShortcuts: function focusShortcuts() {
@@ -397,7 +433,40 @@ var SearchBox = {
397
433
  }
398
434
 
399
435
  var performUpdate = function performUpdate() {
400
- _this.currentValue = value;
436
+ if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
437
+ return;
438
+ }
439
+
440
+ if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
441
+ if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
442
+ // check if value already present in selectedTags
443
+ if (typeof value === 'string' && _this.selectedTags.includes(value)) {
444
+ _this.isOpen = false;
445
+ return;
446
+ }
447
+
448
+ _this.selectedTags = [].concat(_this.selectedTags);
449
+
450
+ if (typeof value === 'string' && !!value) {
451
+ _this.selectedTags.push(value);
452
+ } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
453
+ var mergedArray = Array.from(new Set([].concat(_this.selectedTags, value)));
454
+ _this.selectedTags = mergedArray;
455
+ }
456
+ } else if (value) {
457
+ _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
458
+ }
459
+
460
+ _this.currentValue = '';
461
+ } else {
462
+ _this.currentValue = value;
463
+ }
464
+
465
+ var queryHandlerValue = value;
466
+
467
+ if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
468
+ queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
469
+ }
401
470
 
402
471
  if (isDefaultValue) {
403
472
  if (_this.$props.autosuggest) {
@@ -405,19 +474,19 @@ var SearchBox = {
405
474
  _this.isOpen = false;
406
475
  }
407
476
 
408
- _this.triggerDefaultQuery(value);
477
+ if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
409
478
  } // in case of strict selection only SUGGESTION_SELECT should be able
410
479
  // to set the query otherwise the value should reset
411
480
 
412
481
 
413
482
  if (props.strictSelection) {
414
- if (cause === causes.SUGGESTION_SELECT || value === '') {
415
- _this.triggerCustomQuery(value, categoryValue);
483
+ if (cause === causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
484
+ _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
416
485
  } else {
417
486
  _this.setValue('', true);
418
487
  }
419
- } else if (props.value === undefined) {
420
- _this.triggerCustomQuery(value, categoryValue);
488
+ } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
489
+ _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
421
490
  }
422
491
  } else {
423
492
  // debounce for handling text while typing
@@ -468,6 +537,11 @@ var SearchBox = {
468
537
  showFilter = _this$$props2.showFilter,
469
538
  URLParams = _this$$props2.URLParams;
470
539
  var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
540
+
541
+ if (this.$options.isTagsMode) {
542
+ value = paramValue;
543
+ }
544
+
471
545
  var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
472
546
  var query = defaultQueryTobeSet;
473
547
 
@@ -552,10 +626,19 @@ var SearchBox = {
552
626
  this.onValueSelectedHandler('', causes.CLEAR_VALUE);
553
627
  },
554
628
  handleKeyDown: function handleKeyDown(event, highlightedIndex) {
629
+ if (highlightedIndex === void 0) {
630
+ highlightedIndex = null;
631
+ }
632
+
555
633
  // if a suggestion was selected, delegate the handling to suggestion handler
556
- if (event.key === 'Enter' && highlightedIndex === null) {
557
- this.setValue(event.target.value, true);
558
- this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
634
+ if (event.key === 'Enter') {
635
+ if (this.$props.autosuggest === false) {
636
+ this.enterButtonOnClick();
637
+ } else if (highlightedIndex === null) {
638
+ this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined // to handle tags
639
+ );
640
+ this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
641
+ }
559
642
  } // Need to review
560
643
 
561
644
 
@@ -598,13 +681,29 @@ var SearchBox = {
598
681
  if (value === undefined) {
599
682
  this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
600
683
  } else {
601
- this.$emit('change', suggestion.value, function (_ref4) {
684
+ var emitValue = suggestion.value;
685
+
686
+ if (this.$options.isTagsMode) {
687
+ emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
688
+
689
+ if (this.selectedTags.includes(suggestion.value)) {
690
+ // avoid duplicates in tags array
691
+ this.isOpen = false;
692
+ return;
693
+ }
694
+
695
+ emitValue.push(suggestion.value);
696
+ }
697
+
698
+ this.setValue(emitValue, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
699
+ this.$emit('change', emitValue, function (_ref4) {
602
700
  var isOpen = _ref4.isOpen;
603
- return _this3.triggerQuery({
701
+ return _this3.triggerQuery(_extends({
604
702
  isOpen: isOpen,
605
- value: suggestion.value,
703
+ value: emitValue
704
+ }, !_this3.$options.isTagsMode && {
606
705
  categoryValue: suggestion._category
607
- });
706
+ }));
608
707
  });
609
708
  }
610
709
 
@@ -727,6 +826,13 @@ var SearchBox = {
727
826
 
728
827
  return null;
729
828
  },
829
+ enterButtonOnClick: function enterButtonOnClick() {
830
+ this.triggerQuery({
831
+ isOpen: false,
832
+ value: this.currentValue,
833
+ customQuery: true
834
+ });
835
+ },
730
836
  renderEnterButtonElement: function renderEnterButtonElement() {
731
837
  var _this4 = this;
732
838
 
@@ -736,27 +842,19 @@ var SearchBox = {
736
842
  innerClass = _this$$props4.innerClass;
737
843
  var renderEnterButton = this.$scopedSlots.renderEnterButton;
738
844
 
739
- var enterButtonOnClick = function enterButtonOnClick() {
740
- return _this4.triggerQuery({
741
- isOpen: false,
742
- value: _this4.currentValue,
743
- customQuery: true
744
- });
745
- };
746
-
747
845
  if (enterButton) {
748
846
  var getEnterButtonMarkup = function getEnterButtonMarkup() {
749
847
  if (renderEnterButton) {
750
- return renderEnterButton(enterButtonOnClick);
848
+ return renderEnterButton(_this4.enterButtonOnClick);
751
849
  }
752
850
 
753
851
  return h(Button, {
754
- "class": "enter-btn " + getClassName(innerClass, 'enterButton'),
852
+ "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
755
853
  "attrs": {
756
854
  "primary": true
757
855
  },
758
856
  "on": {
759
- "click": enterButtonOnClick
857
+ "click": _this4.enterButtonOnClick
760
858
  }
761
859
  }, ["Search"]);
762
860
  };
@@ -888,10 +986,79 @@ var SearchBox = {
888
986
  "click": handleAutoFillClick
889
987
  }
890
988
  });
989
+ },
990
+ renderTag: function renderTag(item) {
991
+ var _this7 = this;
992
+
993
+ var h = this.$createElement;
994
+ var innerClass = this.$props.innerClass;
995
+ return h(TagItem, {
996
+ "class": getClassName(innerClass, 'selected-tag') || ''
997
+ }, [h("span", [item]), h("span", {
998
+ "attrs": {
999
+ "role": "img",
1000
+ "aria-label": "delete-tag"
1001
+ },
1002
+ "class": "close-icon",
1003
+ "on": {
1004
+ "click": function click() {
1005
+ return _this7.clearTag(item);
1006
+ }
1007
+ }
1008
+ }, [h(CancelSvg)])]);
1009
+ },
1010
+ clearAllTags: function clearAllTags() {
1011
+ this.selectedTags = [];
1012
+ this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
1013
+
1014
+ if (this.$props.value !== undefined) {
1015
+ this.$emit('change', this.selectedTags, this.triggerQuery);
1016
+ }
1017
+ },
1018
+ clearTag: function clearTag(tagValue) {
1019
+ this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
1020
+ return tag !== tagValue;
1021
+ }));
1022
+ this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
1023
+
1024
+ if (this.$props.value !== undefined) {
1025
+ this.$emit('change', this.selectedTags, this.triggerQuery);
1026
+ }
1027
+ },
1028
+ renderTags: function renderTags() {
1029
+ var _this8 = this;
1030
+
1031
+ var h = this.$createElement;
1032
+
1033
+ if (!Array.isArray(this.selectedTags)) {
1034
+ return null;
1035
+ }
1036
+
1037
+ var tagsList = [].concat(this.selectedTags);
1038
+ var shouldRenderClearAllTag = tagsList.length > 1;
1039
+ var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
1040
+ return renderSelectedTags ? renderSelectedTags({
1041
+ values: this.selectedTags,
1042
+ handleClear: this.clearTag,
1043
+ handleClearAll: this.clearAllTags
1044
+ }) : h(TagsContainer, [tagsList.map(function (item) {
1045
+ return _this8.renderTag(item);
1046
+ }), shouldRenderClearAllTag && h(TagItem, {
1047
+ "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
1048
+ }, [h("span", ["Clear All"]), h("span", {
1049
+ "attrs": {
1050
+ "role": "img",
1051
+ "aria-label": "delete-tag"
1052
+ },
1053
+ "class": "close-icon",
1054
+ "on": {
1055
+ "click": this.clearAllTags
1056
+ }
1057
+ }, [h(CancelSvg)])])]);
891
1058
  }
892
1059
  },
893
1060
  render: function render() {
894
- var _this7 = this;
1061
+ var _this9 = this;
895
1062
 
896
1063
  var h = arguments[0];
897
1064
  var _this$$props6 = this.$props,
@@ -937,14 +1104,14 @@ var SearchBox = {
937
1104
  }
938
1105
  };
939
1106
 
940
- return h("div", [_this7.hasCustomRenderer && _this7.getComponent({
1107
+ return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
941
1108
  isOpen: isOpen,
942
1109
  getItemProps: getItemProps,
943
1110
  getItemEvents: getItemEvents,
944
1111
  highlightedIndex: highlightedIndex
945
- }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
946
- "class": suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
947
- }, [_this7.normalizedSuggestions.map(function (item, index) {
1112
+ }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
1113
+ "class": suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
1114
+ }, [_this9.normalizedSuggestions.map(function (item, index) {
948
1115
  return renderItem ? h("li", {
949
1116
  "domProps": _extends({}, getItemProps({
950
1117
  item: item
@@ -954,7 +1121,7 @@ var SearchBox = {
954
1121
  })),
955
1122
  "key": index + 1 + "-" + item.value,
956
1123
  "style": {
957
- backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
1124
+ backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
958
1125
  justifyContent: 'flex-start',
959
1126
  alignItems: 'center'
960
1127
  }
@@ -967,7 +1134,7 @@ var SearchBox = {
967
1134
  })),
968
1135
  "key": index + 1 + "-" + item.value,
969
1136
  "style": {
970
- backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
1137
+ backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
971
1138
  justifyContent: 'flex-start',
972
1139
  alignItems: 'center'
973
1140
  }
@@ -978,61 +1145,61 @@ var SearchBox = {
978
1145
  }
979
1146
  }, [h(CustomSvg, {
980
1147
  "attrs": {
981
- "className": getClassName(_this7.$props.innerClass, item._suggestion_type + "-search-icon") || null,
1148
+ "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
982
1149
  "icon": getIcon(item._suggestion_type),
983
1150
  "type": item._suggestion_type + "-search-icon"
984
1151
  }
985
1152
  })]), h(SuggestionItem, {
986
1153
  "attrs": {
987
- "currentValue": _this7.currentValue,
1154
+ "currentValue": _this9.currentValue,
988
1155
  "suggestion": item
989
1156
  }
990
- }), _this7.renderAutoFill(item)]);
991
- })]) : _this7.renderNoSuggestions(_this7.normalizedSuggestions)]);
1157
+ }), _this9.renderAutoFill(item)]);
1158
+ })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
992
1159
  };
993
1160
 
994
1161
  return h("div", {
995
1162
  "class": suggestionsContainer
996
- }, [h(InputGroup, [_this7.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
1163
+ }, [h(InputGroup, [_this9.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
997
1164
  "attrs": {
998
- "id": _this7.$props.componentId + "-input",
999
- "showIcon": _this7.$props.showIcon,
1000
- "showClear": _this7.$props.showClear,
1001
- "iconPosition": _this7.$props.iconPosition,
1002
- "placeholder": _this7.$props.placeholder,
1003
- "autoFocus": _this7.$props.autoFocus,
1004
- "themePreset": _this7.themePreset,
1165
+ "id": _this9.$props.componentId + "-input",
1166
+ "showIcon": _this9.$props.showIcon,
1167
+ "showClear": _this9.$props.showClear,
1168
+ "iconPosition": _this9.$props.iconPosition,
1169
+ "placeholder": _this9.$props.placeholder,
1170
+ "autoFocus": _this9.$props.autoFocus,
1171
+ "themePreset": _this9.themePreset,
1005
1172
  "autocomplete": "off"
1006
1173
  },
1007
- "ref": _this7.$props.innerRef,
1008
- "class": getClassName(_this7.$props.innerClass, 'input'),
1174
+ "ref": _this9.$props.innerRef,
1175
+ "class": getClassName(_this9.$props.innerClass, 'input'),
1009
1176
  "on": _extends({}, getInputEvents({
1010
- onInput: _this7.onInputChange,
1177
+ onInput: _this9.onInputChange,
1011
1178
  onBlur: function onBlur(e) {
1012
- _this7.$emit('blur', e, _this7.triggerQuery);
1179
+ _this9.$emit('blur', e, _this9.triggerQuery);
1013
1180
  },
1014
- onFocus: _this7.handleFocus,
1181
+ onFocus: _this9.handleFocus,
1015
1182
  onKeyPress: function onKeyPress(e) {
1016
- _this7.$emit('keyPress', e, _this7.triggerQuery);
1183
+ _this9.$emit('keyPress', e, _this9.triggerQuery);
1017
1184
 
1018
- _this7.$emit('key-press', e, _this7.triggerQuery);
1185
+ _this9.$emit('key-press', e, _this9.triggerQuery);
1019
1186
  },
1020
1187
  onKeyDown: function onKeyDown(e) {
1021
- return _this7.handleKeyDown(e, highlightedIndex);
1188
+ return _this9.handleKeyDown(e, highlightedIndex);
1022
1189
  },
1023
1190
  onKeyUp: function onKeyUp(e) {
1024
- _this7.$emit('keyUp', e, _this7.triggerQuery);
1191
+ _this9.$emit('keyUp', e, _this9.triggerQuery);
1025
1192
 
1026
- _this7.$emit('key-up', e, _this7.triggerQuery);
1193
+ _this9.$emit('key-up', e, _this9.triggerQuery);
1027
1194
  },
1028
1195
  onClick: function onClick() {
1029
1196
  setHighlightedIndex(null);
1030
1197
  }
1031
1198
  })),
1032
1199
  "domProps": _extends({}, getInputProps({
1033
- value: _this7.$data.currentValue === null ? '' : _this7.$data.currentValue
1200
+ value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
1034
1201
  }))
1035
- }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this7.renderInputAddonAfter(), _this7.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
1202
+ }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
1036
1203
  }
1037
1204
  }
1038
1205
  }) : h("div", {
@@ -1048,26 +1215,22 @@ var SearchBox = {
1048
1215
  },
1049
1216
  "on": _extends({}, {
1050
1217
  blur: function blur(e) {
1051
- _this7.$emit('blur', e, _this7.triggerQuery);
1218
+ _this9.$emit('blur', e, _this9.triggerQuery);
1052
1219
  },
1053
1220
  keypress: function keypress(e) {
1054
- _this7.$emit('keyPress', e, _this7.triggerQuery);
1221
+ _this9.$emit('keyPress', e, _this9.triggerQuery);
1055
1222
 
1056
- _this7.$emit('key-press', e, _this7.triggerQuery);
1223
+ _this9.$emit('key-press', e, _this9.triggerQuery);
1057
1224
  },
1058
1225
  input: this.onInputChange,
1059
1226
  focus: function focus(e) {
1060
- _this7.$emit('focus', e, _this7.triggerQuery);
1061
- },
1062
- keydown: function keydown(e) {
1063
- _this7.$emit('keyDown', e, _this7.triggerQuery);
1064
-
1065
- _this7.$emit('key-down', e, _this7.triggerQuery);
1227
+ _this9.$emit('focus', e, _this9.triggerQuery);
1066
1228
  },
1229
+ keydown: this.handleKeyDown,
1067
1230
  keyup: function keyup(e) {
1068
- _this7.$emit('keyUp', e, _this7.triggerQuery);
1231
+ _this9.$emit('keyUp', e, _this9.triggerQuery);
1069
1232
 
1070
- _this7.$emit('key-up', e, _this7.triggerQuery);
1233
+ _this9.$emit('key-up', e, _this9.triggerQuery);
1071
1234
  }
1072
1235
  }),
1073
1236
  "domProps": _extends({}, {
@@ -1,41 +1,41 @@
1
1
  import '@appbaseio/reactivecore';
2
- import './_rollupPluginBabelHelpers-0f24d612.js';
2
+ import './_rollupPluginBabelHelpers-51ce1182.js';
3
3
  import 'vue-types';
4
4
  import '@appbaseio/reactivecore/lib/utils/constants';
5
5
  import '@appbaseio/reactivecore/lib/utils/helper';
6
6
  import 'emotion';
7
7
  import '@appbaseio/vue-emotion';
8
8
  import 'polished';
9
- import './Button-33de88e6.js';
9
+ import './Button-e18ad90f.js';
10
10
  import './vueTypes-687b2304.js';
11
11
  import './ReactiveList.js';
12
12
  import '@appbaseio/reactivecore/lib/utils/transform';
13
13
  import 'redux';
14
- import './index-78920565.js';
15
- import './ComponentWrapper-0f3431d1.js';
14
+ import './index-5371a13f.js';
15
+ import './ComponentWrapper-dc92772a.js';
16
16
  import '@vue/babel-helper-vue-jsx-merge-props';
17
- import './Title-3522ff56.js';
18
- import './ListItem-8e8fb535.js';
19
- import './Card-6446f1b7.js';
20
- import './Flex-8770345d.js';
17
+ import './Title-35edd732.js';
18
+ import './ListItem-41d6ddd7.js';
19
+ import './Card-ad6ba09f.js';
20
+ import './Flex-09d40927.js';
21
21
  import '@appbaseio/reactivecore/lib/actions/analytics';
22
22
  import 'appbase-js';
23
23
  import 'url-search-params-polyfill';
24
24
  import './ReactiveBase.js';
25
25
  import 'hotkeys-js';
26
- import './DataSearch-42f547cd.js';
27
- import './CancelSvg-c2c03a35.js';
28
- import './Input-e339e63a.js';
26
+ import './DataSearch-8e5d0972.js';
27
+ import './CancelSvg-e3b33cdd.js';
28
+ import './Input-c9d757bc.js';
29
29
  import 'compute-scroll-into-view';
30
- import './Container-18b03fde.js';
30
+ import './Container-421450dc.js';
31
31
  import 'vue-highlight-words';
32
- export { i as default } from './install-54ebd72e.js';
32
+ export { i as default } from './install-9faa87f1.js';
33
33
  import '@appbaseio/reactivecore/lib/utils/suggestions';
34
- import './FormControlList-704f8dee.js';
35
- import './utils-64a2e5f0.js';
34
+ import './FormControlList-38ffe3d3.js';
35
+ import './utils-9b45e0ab.js';
36
36
  import './SingleList.js';
37
37
  import './MultiList.js';
38
- import './DropDown-ff6ad982.js';
38
+ import './DropDown-565fad6f.js';
39
39
  import './SingleDropdownList.js';
40
40
  import './MultiDropdownList.js';
41
41
  import './ToggleButton.js';
@@ -46,8 +46,9 @@ import './MultiRange.js';
46
46
  import './ResultCard.js';
47
47
  import './ResultList.js';
48
48
  import 'vue-no-ssr';
49
- import './ssr-a41dfea9.js';
49
+ import './ssr-ad57b0ad.js';
50
50
  import './RangeSlider.js';
51
51
  import './DynamicRangeSlider.js';
52
+ import '@appbaseio/reactivecore/lib/actions/value';
52
53
  import './StateProvider.js';
53
54
  import './RangeInput.js';
@@ -1,4 +1,4 @@
1
- import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
1
+ import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-51ce1182.js';
2
2
  import styled from '@appbaseio/vue-emotion';
3
3
  import NoSSR from 'vue-no-ssr';
4
4
 
@@ -1,5 +1,5 @@
1
1
  import { helper } from '@appbaseio/reactivecore';
2
- import { a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
2
+ import { a as _extends } from './_rollupPluginBabelHelpers-51ce1182.js';
3
3
 
4
4
  var getAggsOrder = helper.getAggsOrder;
5
5
 
@@ -1,3 +1,3 @@
1
- var version = "1.29.0";
1
+ var version = "1.30.0";
2
2
 
3
3
  export default version;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appbaseio/reactivesearch-vue",
3
- "version": "1.29.0",
3
+ "version": "1.30.0",
4
4
  "private": false,
5
5
  "main": "dist/cjs/index.js",
6
6
  "jsnext:main": "dist/es/index.js",
@@ -34,7 +34,7 @@
34
34
  ],
35
35
  "sideEffects": false,
36
36
  "dependencies": {
37
- "@appbaseio/reactivecore": "9.14.5",
37
+ "@appbaseio/reactivecore": "9.14.17",
38
38
  "@appbaseio/vue-emotion": "0.4.4",
39
39
  "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
40
40
  "appbase-js": "^5.0.0",
@@ -62,10 +62,10 @@
62
62
  "@babel/preset-env": "^7.5.5",
63
63
  "@babel/preset-stage-2": "^7.0.0",
64
64
  "@vue/babel-preset-jsx": "^1.1.0",
65
+ "eslint": "^4.12.0",
65
66
  "eslint-config-airbnb-base": "^13.1.0",
66
67
  "eslint-config-prettier": "^3.1.0",
67
68
  "eslint-plugin-vue": "^4.7.1",
68
- "eslint": "^4.12.0",
69
69
  "nps": "^5.9.3",
70
70
  "nps-utils": "^1.7.0",
71
71
  "rollup": "^1.20.3",