@appbaseio/reactivesearch-vue 2.0.0-alpha.4 → 3.0.0-alpha.1

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 (109) hide show
  1. package/README.md +9 -9
  2. package/dist/@appbaseio/reactivesearch-vue.umd.js +21316 -29369
  3. package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
  4. package/dist/@appbaseio/reactivesearch-vue.umd.min.js +5 -19
  5. package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
  6. package/dist/cjs/Button-ad042719.js +59 -0
  7. package/dist/cjs/Card-f5ab024a.js +27 -0
  8. package/dist/cjs/{ComponentWrapper-ad3dad02.js → ComponentWrapper-611cf7f9.js} +44 -58
  9. package/dist/cjs/Container-29f049b2.js +12 -0
  10. package/dist/cjs/DropDown-dc184468.js +700 -0
  11. package/dist/cjs/DynamicRangeSlider.js +106 -157
  12. package/dist/cjs/Flex-d5675ea6.js +48 -0
  13. package/dist/cjs/FormControlList-fadd792f.js +42 -0
  14. package/dist/cjs/Input-088dfcb4.js +74 -0
  15. package/dist/cjs/ListItem-d57d648d.js +42 -0
  16. package/dist/cjs/MultiDropdownList.js +124 -240
  17. package/dist/cjs/MultiList.js +124 -262
  18. package/dist/cjs/MultiRange.js +87 -133
  19. package/dist/cjs/{Pagination-71e85fa9.js → Pagination-b5ddc906.js} +70 -83
  20. package/dist/cjs/PreferencesConsumer-22d1b49f.js +73 -0
  21. package/dist/cjs/RangeInput.js +163 -171
  22. package/dist/cjs/RangeSlider.js +81 -109
  23. package/dist/cjs/ReactiveBase.js +139 -156
  24. package/dist/cjs/ReactiveComponent-a6108189.js +2184 -0
  25. package/dist/cjs/ReactiveComponent.js +46 -340
  26. package/dist/cjs/ReactiveGoogleMap.js +451 -660
  27. package/dist/cjs/ReactiveList.js +180 -305
  28. package/dist/cjs/ResultCard.js +36 -36
  29. package/dist/cjs/ResultList.js +48 -56
  30. package/dist/cjs/SelectedFilters.js +62 -69
  31. package/dist/cjs/SingleDropdownList.js +117 -177
  32. package/dist/cjs/SingleList.js +122 -206
  33. package/dist/cjs/SingleRange.js +78 -105
  34. package/dist/cjs/StateProvider.js +35 -38
  35. package/dist/cjs/Title-8802a218.js +12 -0
  36. package/dist/cjs/ToggleButton.js +72 -119
  37. package/dist/cjs/{_rollupPluginBabelHelpers-c705cbe6.js → _rollupPluginBabelHelpers-f8b843f8.js} +0 -15
  38. package/dist/cjs/{index-6a167fe0.js → index-d8d8f291.js} +38 -108
  39. package/dist/cjs/index.js +44 -41
  40. package/dist/cjs/initReactivesearch.js +63 -150
  41. package/dist/cjs/install.js +47 -43
  42. package/dist/cjs/ssr-6c8a72e1.js +66 -0
  43. package/dist/cjs/{utils-d6a52588.js → utils-83fd01e9.js} +7 -16
  44. package/dist/cjs/version.js +1 -1
  45. package/dist/cjs/{vueTypes-727b7c63.js → vueTypes-1bf00978.js} +8 -19
  46. package/dist/es/Button-474510e3.js +53 -0
  47. package/dist/es/{Card-450683f1.js → Card-38cbe652.js} +3 -3
  48. package/dist/es/{ComponentWrapper-424e86fd.js → ComponentWrapper-3dfe6931.js} +44 -58
  49. package/dist/es/{Container-ba826e96.js → Container-d00219f7.js} +2 -2
  50. package/dist/es/DropDown-029ffd42.js +690 -0
  51. package/dist/es/DynamicRangeSlider.js +106 -157
  52. package/dist/es/Flex-a08e22d7.js +46 -0
  53. package/dist/es/FormControlList-fe6eaee4.js +38 -0
  54. package/dist/es/Input-ad474a55.js +69 -0
  55. package/dist/es/{ListItem-cad14c5e.js → ListItem-16756c02.js} +7 -8
  56. package/dist/es/MultiDropdownList.js +124 -240
  57. package/dist/es/MultiList.js +124 -262
  58. package/dist/es/MultiRange.js +87 -133
  59. package/dist/es/{Pagination-784bf143.js → Pagination-72bd1d9e.js} +70 -83
  60. package/dist/es/PreferencesConsumer-24e88f3b.js +71 -0
  61. package/dist/es/RangeInput.js +163 -170
  62. package/dist/es/RangeSlider.js +81 -109
  63. package/dist/es/ReactiveBase.js +138 -154
  64. package/dist/es/ReactiveComponent-0a97eb1e.js +2178 -0
  65. package/dist/es/ReactiveComponent.js +42 -337
  66. package/dist/es/ReactiveGoogleMap.js +446 -654
  67. package/dist/es/ReactiveList.js +178 -302
  68. package/dist/es/ResultCard.js +36 -36
  69. package/dist/es/ResultList.js +48 -56
  70. package/dist/es/SelectedFilters.js +62 -69
  71. package/dist/es/SingleDropdownList.js +117 -177
  72. package/dist/es/SingleList.js +122 -206
  73. package/dist/es/SingleRange.js +78 -105
  74. package/dist/es/StateProvider.js +36 -39
  75. package/dist/es/{Title-3342664a.js → Title-863dfa42.js} +2 -2
  76. package/dist/es/ToggleButton.js +72 -119
  77. package/dist/es/{_rollupPluginBabelHelpers-76660dab.js → _rollupPluginBabelHelpers-ded08042.js} +0 -15
  78. package/dist/es/{index-7788a843.js → index-4520a598.js} +39 -107
  79. package/dist/es/index.js +30 -32
  80. package/dist/es/initReactivesearch.js +63 -150
  81. package/dist/es/install.js +49 -41
  82. package/dist/es/{ssr-b2c0b401.js → ssr-584c278d.js} +37 -8
  83. package/dist/es/{utils-9e68acee.js → utils-9e5a16a1.js} +7 -16
  84. package/dist/es/version.js +1 -1
  85. package/dist/es/{vueTypes-b8146772.js → vueTypes-f1923c72.js} +8 -19
  86. package/package.json +10 -9
  87. package/dist/cjs/Button-446f819e.js +0 -68
  88. package/dist/cjs/CancelSvg-9f258f4f.js +0 -449
  89. package/dist/cjs/Card-642547a8.js +0 -30
  90. package/dist/cjs/Container-daf30918.js +0 -15
  91. package/dist/cjs/DataSearch-aa04dc6e.js +0 -2352
  92. package/dist/cjs/DataSearch.js +0 -30
  93. package/dist/cjs/DropDown-c479bbb0.js +0 -328
  94. package/dist/cjs/Flex-aa517a13.js +0 -52
  95. package/dist/cjs/FormControlList-c195a592.js +0 -47
  96. package/dist/cjs/Input-e6603a7e.js +0 -79
  97. package/dist/cjs/ListItem-8c9e0d68.js +0 -46
  98. package/dist/cjs/Title-1de7d0f4.js +0 -15
  99. package/dist/cjs/install-b97dbac4.js +0 -1409
  100. package/dist/cjs/ssr-3027b848.js +0 -39
  101. package/dist/es/Button-d8bc15ea.js +0 -59
  102. package/dist/es/CancelSvg-4cfae5fd.js +0 -440
  103. package/dist/es/DataSearch-b86a6675.js +0 -2337
  104. package/dist/es/DataSearch.js +0 -22
  105. package/dist/es/DropDown-05a644a5.js +0 -322
  106. package/dist/es/Flex-1f0795c3.js +0 -47
  107. package/dist/es/FormControlList-c22d64f6.js +0 -40
  108. package/dist/es/Input-7a2a9fac.js +0 -71
  109. package/dist/es/install-ac8a1edb.js +0 -1402
@@ -1,1409 +0,0 @@
1
- 'use strict';
2
-
3
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
-
5
- var configureStore = require('@appbaseio/reactivecore');
6
- var configureStore__default = _interopDefault(configureStore);
7
- var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
8
- var VueTypes = _interopDefault(require('vue-types'));
9
- var constants = require('@appbaseio/reactivecore/lib/utils/constants');
10
- var helper = require('@appbaseio/reactivecore/lib/utils/helper');
11
- var styled = require('@appbaseio/vue-emotion');
12
- var styled__default = _interopDefault(styled);
13
- var Button = require('./Button-446f819e.js');
14
- var vueTypes = require('./vueTypes-727b7c63.js');
15
- var ReactiveList = require('./ReactiveList.js');
16
- var index = require('./index-6a167fe0.js');
17
- var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
18
- var Title = require('./Title-1de7d0f4.js');
19
- var ReactiveBase = require('./ReactiveBase.js');
20
- var hotkeys = _interopDefault(require('hotkeys-js'));
21
- var DataSearch = require('./DataSearch-aa04dc6e.js');
22
- var CancelSvg = require('./CancelSvg-9f258f4f.js');
23
- var Input = require('./Input-e6603a7e.js');
24
- var Container = require('./Container-daf30918.js');
25
- var SingleList = require('./SingleList.js');
26
- var MultiList = require('./MultiList.js');
27
- var SingleDropdownList = require('./SingleDropdownList.js');
28
- var MultiDropdownList = require('./MultiDropdownList.js');
29
- var ToggleButton = require('./ToggleButton.js');
30
- var ReactiveComponent = require('./ReactiveComponent.js');
31
- var SelectedFilters = require('./SelectedFilters.js');
32
- var SingleRange = require('./SingleRange.js');
33
- var MultiRange = require('./MultiRange.js');
34
- var ResultCard = require('./ResultCard.js');
35
- var ResultList = require('./ResultList.js');
36
- var RangeSlider = require('./RangeSlider.js');
37
- var DynamicRangeSlider = require('./DynamicRangeSlider.js');
38
- var StateProvider = require('./StateProvider.js');
39
- var RangeInput = require('./RangeInput.js');
40
-
41
- var _templateObject;
42
- var AutofillSvgIcon = styled__default('button')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
43
- var AutoFillSvg = {
44
- name: 'AutoFillSvg',
45
- render: function render() {
46
- var h = arguments[0];
47
- return h(AutofillSvgIcon, {
48
- "on": {
49
- "click": this.$listeners.click
50
- }
51
- }, [h("svg", {
52
- "attrs": {
53
- "viewBox": "0 0 24 24"
54
- }
55
- }, [h("path", {
56
- "attrs": {
57
- "d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
58
- }
59
- })])]);
60
- },
61
- methods: {
62
- clicked: function clicked(e) {
63
- e.stopPropagation();
64
- window.console.log('hey', e);
65
- }
66
- }
67
- };
68
-
69
- var updateQuery = configureStore.Actions.updateQuery,
70
- setCustomQuery = configureStore.Actions.setCustomQuery,
71
- setDefaultQuery = configureStore.Actions.setDefaultQuery,
72
- recordSuggestionClick = configureStore.Actions.recordSuggestionClick;
73
- var _debounce = configureStore.helper.debounce,
74
- checkValueChange = configureStore.helper.checkValueChange,
75
- getClassName = configureStore.helper.getClassName,
76
- isEqual = configureStore.helper.isEqual,
77
- getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
78
- withClickIds = configureStore.helper.withClickIds,
79
- getResultStats = configureStore.helper.getResultStats,
80
- normalizeDataField = configureStore.helper.normalizeDataField;
81
- var SearchBox = {
82
- name: 'SearchBox',
83
- isTagsMode: false,
84
- data: function data() {
85
- var props = this.$props;
86
- this.__state = {
87
- currentValue: '',
88
- selectedTags: [],
89
- isOpen: false,
90
- normalizedSuggestions: []
91
- };
92
- this.internalComponent = props.componentId + "__internal";
93
- return this.__state;
94
- },
95
- inject: {
96
- theme: {
97
- from: 'theme_reactivesearch'
98
- }
99
- },
100
- created: function created() {
101
- var _this$$props = this.$props,
102
- distinctField = _this$$props.distinctField,
103
- distinctFieldConfig = _this$$props.distinctFieldConfig,
104
- index$1 = _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
- }
114
-
115
- if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
116
- console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
117
- }
118
-
119
- if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
120
- console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
121
- }
122
-
123
- if (!this.enableAppbase && index$1) {
124
- console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
125
- }
126
-
127
- this.currentValue = index.decodeHtml(this.selectedValue || this.value || this.defaultValue || '');
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
134
-
135
- this.triggerCustomQuery(this.currentValue, this.selectedCategory);
136
- this.triggerDefaultQuery(this.currentValue);
137
- },
138
- computed: {
139
- hasCustomRenderer: function hasCustomRenderer() {
140
- return index.hasCustomRenderer(this);
141
- },
142
- stats: function stats() {
143
- return getResultStats(this);
144
- }
145
- },
146
- props: {
147
- autoFocus: VueTypes.bool,
148
- autosuggest: VueTypes.bool.def(true),
149
- beforeValueChange: vueTypes.types.func,
150
- className: VueTypes.string.def(''),
151
- clearIcon: vueTypes.types.children,
152
- componentId: vueTypes.types.stringRequired,
153
- customHighlight: vueTypes.types.func,
154
- customQuery: vueTypes.types.func,
155
- defaultQuery: vueTypes.types.func,
156
- dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
157
- field: VueTypes.string,
158
- weight: VueTypes.number
159
- }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
160
- field: VueTypes.string,
161
- weight: VueTypes.number
162
- })]),
163
- aggregationField: vueTypes.types.string,
164
- aggregationSize: VueTypes.number,
165
- size: VueTypes.number,
166
- debounce: VueTypes.number.def(0),
167
- defaultValue: vueTypes.types.string,
168
- excludeFields: vueTypes.types.excludeFields,
169
- value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), vueTypes.types.value]),
170
- defaultSuggestions: vueTypes.types.suggestions,
171
- enableSynonyms: VueTypes.bool.def(true),
172
- enableQuerySuggestions: VueTypes.bool.def(false),
173
- enablePopularSuggestions: VueTypes.bool.def(false),
174
- enableRecentSuggestions: VueTypes.bool.def(false),
175
- fieldWeights: vueTypes.types.fieldWeights,
176
- filterLabel: vueTypes.types.string,
177
- fuzziness: vueTypes.types.fuzziness,
178
- highlight: VueTypes.bool,
179
- highlightField: vueTypes.types.stringOrArray,
180
- icon: vueTypes.types.children,
181
- iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
182
- includeFields: vueTypes.types.includeFields,
183
- innerClass: vueTypes.types.style,
184
- innerRef: VueTypes.string.def('searchInputField'),
185
- render: vueTypes.types.func,
186
- renderNoSuggestion: vueTypes.types.title,
187
- renderError: vueTypes.types.title,
188
- placeholder: VueTypes.string.def('Search'),
189
- queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
190
- react: vueTypes.types.react,
191
- showClear: VueTypes.bool.def(true),
192
- showDistinctSuggestions: VueTypes.bool.def(true),
193
- showFilter: VueTypes.bool.def(true),
194
- showIcon: VueTypes.bool.def(true),
195
- title: vueTypes.types.title,
196
- theme: vueTypes.types.style,
197
- URLParams: VueTypes.bool.def(false),
198
- strictSelection: VueTypes.bool.def(false),
199
- nestedField: vueTypes.types.string,
200
- enablePredictiveSuggestions: VueTypes.bool.def(false),
201
- recentSearchesIcon: VueTypes.any,
202
- popularSearchesIcon: VueTypes.any,
203
- // mic props
204
- showVoiceSearch: VueTypes.bool.def(false),
205
- getMicInstance: vueTypes.types.func,
206
- renderMic: vueTypes.types.func,
207
- distinctField: vueTypes.types.string,
208
- distinctFieldConfig: vueTypes.types.props,
209
- //
210
- focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
211
- addonBefore: VueTypes.any,
212
- addonAfter: VueTypes.any,
213
- expandSuggestionsContainer: VueTypes.bool.def(true),
214
- index: VueTypes.string,
215
- popularSuggestionsConfig: VueTypes.object,
216
- recentSuggestionsConfig: VueTypes.object,
217
- applyStopwords: VueTypes.bool,
218
- customStopwords: vueTypes.types.stringArray,
219
- onData: vueTypes.types.func,
220
- renderItem: vueTypes.types.func,
221
- enterButton: VueTypes.bool.def(false),
222
- renderEnterButton: VueTypes.any,
223
- mode: VueTypes.oneOf(['select', 'tag']).def('select'),
224
- renderSelectedTags: VueTypes.any,
225
- searchboxId: VueTypes.string,
226
- endpoint: vueTypes.types.endpointConfig
227
- },
228
- beforeMount: function beforeMount() {
229
- if (this.selectedValue) {
230
- this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
231
- } else if (this.$props.value) {
232
- this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
233
- } else if (this.$props.defaultValue) {
234
- this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined);
235
- }
236
- },
237
- mounted: function mounted() {
238
- this.listenForFocusShortcuts();
239
- },
240
- watch: {
241
- dataField: function dataField(newVal, oldVal) {
242
- if (!isEqual(newVal, oldVal)) {
243
- this.triggerCustomQuery(this.$data.currentValue);
244
- }
245
- },
246
- fieldWeights: function fieldWeights() {
247
- this.triggerCustomQuery(this.$data.currentValue);
248
- },
249
- fuzziness: function fuzziness() {
250
- this.triggerCustomQuery(this.$data.currentValue);
251
- },
252
- queryFormat: function queryFormat() {
253
- this.triggerCustomQuery(this.$data.currentValue);
254
- },
255
- defaultValue: function defaultValue(newVal) {
256
- this.setValue(newVal, true, this.$props);
257
- },
258
- value: function value(newVal, oldVal) {
259
- if (!isEqual(newVal, oldVal)) {
260
- this.setValue(newVal, true, this.$props, newVal === '' ? configureStore.causes.CLEAR_VALUE : undefined, false);
261
- }
262
- },
263
- defaultQuery: function defaultQuery(newVal, oldVal) {
264
- if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
265
- this.triggerDefaultQuery(this.$data.currentValue);
266
- }
267
- },
268
- customQuery: function customQuery(newVal, oldVal) {
269
- if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
270
- this.triggerCustomQuery(this.$data.currentValue);
271
- }
272
- },
273
- suggestions: function suggestions(newVal) {
274
- var suggestionsList = [];
275
-
276
- if (Array.isArray(newVal) && newVal.length) {
277
- suggestionsList = [].concat(withClickIds(newVal));
278
- } else if (Array.isArray(this.$props.defaultSuggestions) && this.$props.defaultSuggestions.length) {
279
- suggestionsList = [].concat(withClickIds(this.$props.defaultSuggestions));
280
- }
281
-
282
- this.normalizedSuggestions = suggestionsList;
283
- },
284
- selectedValue: function selectedValue(newVal, oldVal) {
285
- if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
286
- if (!newVal && this.$data.currentValue) {
287
- // selected value is cleared, call onValueSelected
288
- this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
289
- } // if (this.$props.value === undefined) {
290
-
291
-
292
- if (this.$options.isTagsMode) {
293
- // handling reset of tags through SelectedFilters or URL
294
- this.selectedTags = [];
295
- }
296
-
297
- var cause = !newVal ? configureStore.causes.CLEAR_VALUE : undefined;
298
-
299
- if (this.$options.isTagsMode) {
300
- cause = configureStore.causes.SUGGESTION_SELECT;
301
- }
302
-
303
- this.setValue(newVal || '', true, this.$props, cause); // }
304
- }
305
- },
306
- focusShortcuts: function focusShortcuts() {
307
- this.listenForFocusShortcuts();
308
- },
309
- rawData: function rawData(newVal) {
310
- this.$emit('on-data', {
311
- data: this.normalizedSuggestions,
312
- rawData: newVal,
313
- aggregationData: this.aggregationData,
314
- loading: this.isLoading,
315
- error: this.isError
316
- });
317
- },
318
- aggregationData: function aggregationData(newVal) {
319
- this.$emit('on-data', {
320
- data: this.normalizedSuggestions,
321
- rawData: this.rawData,
322
- aggregationData: newVal,
323
- loading: this.isLoading,
324
- error: this.isError
325
- });
326
- },
327
- loading: function loading(newVal) {
328
- this.$emit('on-data', {
329
- data: this.normalizedSuggestions,
330
- rawData: this.rawData,
331
- aggregationData: this.aggregationData,
332
- loading: newVal,
333
- error: this.isError
334
- });
335
- },
336
- error: function error(newVal) {
337
- this.$emit('on-data', {
338
- data: this.normalizedSuggestions,
339
- rawData: this.rawData,
340
- aggregationData: this.aggregationData,
341
- loading: this.isLoading,
342
- error: newVal
343
- });
344
- },
345
- debounce: function debounce(newVal, oldVal) {
346
- if (!isEqual(newVal, oldVal)) {
347
- this.handleTextChange = _debounce(this.handleText, newVal);
348
- }
349
- }
350
- },
351
- methods: {
352
- handleText: function handleText(value, cause) {
353
- if (cause === configureStore.causes.CLEAR_VALUE) {
354
- this.triggerCustomQuery(value);
355
- this.triggerDefaultQuery(value);
356
- } else if (this.$props.autosuggest) {
357
- this.triggerDefaultQuery(value);
358
- } else if (!this.$props.enterButton) {
359
- this.triggerCustomQuery(value);
360
- }
361
- },
362
- validateDataField: function validateDataField() {
363
- var propName = 'dataField';
364
- var componentName = SearchBox.name;
365
- var props = this.$props;
366
- var requiredError = propName + " supplied to " + componentName + " is required. Validation failed.";
367
- var propValue = props[propName];
368
-
369
- if (!this.enableAppbase) {
370
- if (!propValue) {
371
- console.error(requiredError);
372
- return;
373
- }
374
-
375
- if (typeof propValue !== 'string' && typeof propValue !== 'object' && !Array.isArray(propValue)) {
376
- console.error("Invalid " + propName + " supplied to " + componentName + ". Validation failed.");
377
- return;
378
- }
379
-
380
- if (Array.isArray(propValue) && propValue.length === 0) {
381
- console.error(requiredError);
382
- }
383
- }
384
- },
385
- getComponent: function getComponent(downshiftProps) {
386
- if (downshiftProps === void 0) {
387
- downshiftProps = {};
388
- }
389
-
390
- var currentValue = this.$data.currentValue;
391
- var data = {
392
- error: this.error,
393
- loading: this.isLoading,
394
- downshiftProps: downshiftProps,
395
- data: this.normalizedSuggestions,
396
- rawData: this.rawData,
397
- value: currentValue,
398
- resultStats: this.stats
399
- };
400
- return index.getComponent(data, this);
401
- },
402
- // returns size and aggs property
403
- getBasicQueryOptions: function getBasicQueryOptions() {
404
- var aggregationField = this.$props.aggregationField;
405
- var queryOptions = helper.getQueryOptions(this.$props);
406
-
407
- if (aggregationField) {
408
- queryOptions.aggs = getCompositeAggsQuery({
409
- props: this.$props,
410
- showTopHits: true
411
- }).aggs;
412
- }
413
-
414
- return queryOptions;
415
- },
416
- handleSearchIconClick: function handleSearchIconClick() {
417
- var currentValue = this.currentValue;
418
-
419
- if (currentValue.trim()) {
420
- this.setValue(currentValue, true);
421
- this.onValueSelectedHandler(currentValue, configureStore.causes.SEARCH_ICON_CLICK);
422
- }
423
- },
424
- setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
425
- var _this = this;
426
-
427
- if (isDefaultValue === void 0) {
428
- isDefaultValue = false;
429
- }
430
-
431
- if (props === void 0) {
432
- props = this.$props;
433
- }
434
-
435
- if (toggleIsOpen === void 0) {
436
- toggleIsOpen = true;
437
- }
438
-
439
- if (categoryValue === void 0) {
440
- categoryValue = undefined;
441
- }
442
-
443
- var performUpdate = function performUpdate() {
444
- if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
445
- return;
446
- }
447
-
448
- if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
449
- if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
450
- // check if value already present in selectedTags
451
- if (typeof value === 'string' && _this.selectedTags.includes(value)) {
452
- _this.isOpen = false;
453
- return;
454
- }
455
-
456
- _this.selectedTags = [].concat(_this.selectedTags);
457
-
458
- if (typeof value === 'string' && !!value) {
459
- _this.selectedTags.push(value);
460
- } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
461
- var mergedArray = Array.from(new Set([].concat(_this.selectedTags, value)));
462
- _this.selectedTags = mergedArray;
463
- }
464
- } else if (value) {
465
- _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
466
- }
467
-
468
- _this.currentValue = '';
469
- } else {
470
- _this.currentValue = index.decodeHtml(value);
471
- }
472
-
473
- var queryHandlerValue = value;
474
-
475
- if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
476
- queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
477
- }
478
-
479
- if (isDefaultValue) {
480
- if (_this.$props.autosuggest) {
481
- if (toggleIsOpen) {
482
- _this.isOpen = false;
483
- }
484
-
485
- if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
486
- } // in case of strict selection only SUGGESTION_SELECT should be able
487
- // to set the query otherwise the value should reset
488
-
489
-
490
- if (props.strictSelection) {
491
- if (cause === configureStore.causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
492
- _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
493
- } else {
494
- _this.setValue('', true);
495
- }
496
- } else if (props.value === undefined || cause === configureStore.causes.SUGGESTION_SELECT || cause === configureStore.causes.CLEAR_VALUE) {
497
- _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
498
- }
499
- } else {
500
- // debounce for handling text while typing
501
- _this.handleTextChange(value, cause);
502
- }
503
-
504
- _this.$emit('valueChange', value);
505
-
506
- _this.$emit('value-change', value);
507
- };
508
-
509
- checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
510
- },
511
- triggerDefaultQuery: function triggerDefaultQuery(paramValue) {
512
- if (!this.$props.autosuggest) {
513
- return;
514
- }
515
-
516
- var value = typeof paramValue !== 'string' ? this.currentValue : paramValue;
517
- var query = SearchBox.defaultQuery(value, this.$props);
518
-
519
- if (this.defaultQuery) {
520
- var defaultQueryToBeSet = this.defaultQuery(value, this.$props) || {};
521
-
522
- if (defaultQueryToBeSet.query) {
523
- query = defaultQueryToBeSet.query;
524
- } // Update calculated default query in store
525
-
526
-
527
- index.updateDefaultQuery(this.$props.componentId, this.setDefaultQuery, this.$props, value);
528
- }
529
-
530
- this.updateQuery({
531
- componentId: this.internalComponent,
532
- query: query,
533
- value: value,
534
- componentType: constants.componentTypes.searchBox
535
- });
536
- },
537
- triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
538
- if (categoryValue === void 0) {
539
- categoryValue = undefined;
540
- }
541
-
542
- var _this$$props2 = this.$props,
543
- customQuery = _this$$props2.customQuery,
544
- filterLabel = _this$$props2.filterLabel,
545
- showFilter = _this$$props2.showFilter,
546
- URLParams = _this$$props2.URLParams;
547
- var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
548
-
549
- if (this.$options.isTagsMode) {
550
- value = paramValue;
551
- }
552
-
553
- var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
554
- var query = defaultQueryTobeSet;
555
-
556
- if (customQuery) {
557
- var customQueryTobeSet = customQuery(value, this.$props);
558
- var queryTobeSet = customQueryTobeSet.query;
559
-
560
- if (queryTobeSet) {
561
- query = queryTobeSet;
562
- }
563
-
564
- index.updateCustomQuery(this.$props.componentId, this.setCustomQuery, this.$props, value);
565
- }
566
-
567
- this.updateQuery({
568
- componentId: this.$props.componentId,
569
- query: query,
570
- value: value,
571
- label: filterLabel,
572
- showFilter: showFilter,
573
- URLParams: URLParams,
574
- componentType: constants.componentTypes.searchBox,
575
- category: categoryValue
576
- });
577
- },
578
- handleFocus: function handleFocus(event) {
579
- if (this.$props.autosuggest) {
580
- this.isOpen = true;
581
- }
582
-
583
- this.$emit('focus', event);
584
- },
585
- handleVoiceResults: function handleVoiceResults(_ref) {
586
- var results = _ref.results;
587
-
588
- if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
589
- this.setValue(results[0][0].transcript.trim(), true);
590
- }
591
- },
592
- triggerQuery: function triggerQuery(_ref2) {
593
- var _ref2$isOpen = _ref2.isOpen,
594
- isOpen = _ref2$isOpen === void 0 ? undefined : _ref2$isOpen,
595
- _ref2$customQuery = _ref2.customQuery,
596
- customQuery = _ref2$customQuery === void 0 ? true : _ref2$customQuery,
597
- _ref2$defaultQuery = _ref2.defaultQuery,
598
- defaultQuery = _ref2$defaultQuery === void 0 ? true : _ref2$defaultQuery,
599
- _ref2$value = _ref2.value,
600
- value = _ref2$value === void 0 ? undefined : _ref2$value,
601
- _ref2$categoryValue = _ref2.categoryValue,
602
- categoryValue = _ref2$categoryValue === void 0 ? undefined : _ref2$categoryValue;
603
-
604
- if (typeof isOpen === 'boolean') {
605
- this.isOpen = isOpen;
606
- }
607
-
608
- if (customQuery) {
609
- this.triggerCustomQuery(value, categoryValue);
610
- }
611
-
612
- if (defaultQuery) {
613
- this.triggerDefaultQuery(value);
614
- }
615
- },
616
- triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
617
- // click analytics would only work client side and after javascript loads
618
- var docId = documentId;
619
-
620
- if (!docId) {
621
- var hitData = this.normalizedSuggestions.find(function (hit) {
622
- return hit._click_id === searchPosition;
623
- });
624
-
625
- if (hitData && hitData.source && hitData.source._id) {
626
- docId = hitData.source._id;
627
- }
628
- }
629
-
630
- this.recordSuggestionClick(searchPosition, docId);
631
- },
632
- clearValue: function clearValue() {
633
- this.setValue('', false, this.$props, configureStore.causes.CLEAR_VALUE, false);
634
- this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
635
- },
636
- handleKeyDown: function handleKeyDown(event, highlightedIndex) {
637
- if (highlightedIndex === void 0) {
638
- highlightedIndex = null;
639
- }
640
-
641
- // if a suggestion was selected, delegate the handling to suggestion handler
642
- if (event.key === 'Enter') {
643
- if (this.$props.autosuggest === false) {
644
- this.enterButtonOnClick();
645
- } else if (highlightedIndex === null) {
646
- this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined // to handle tags
647
- );
648
- this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
649
- }
650
- } // Need to review
651
-
652
-
653
- this.$emit('keyDown', event, this.triggerQuery);
654
- this.$emit('key-down', event, this.triggerQuery);
655
- },
656
- onInputChange: function onInputChange(e) {
657
- var _this2 = this;
658
-
659
- var inputValue = e.target.value;
660
-
661
- if (!this.$data.isOpen && this.$props.autosuggest) {
662
- this.isOpen = true;
663
- }
664
-
665
- var value = this.$props.value;
666
-
667
- if (value === undefined) {
668
- this.setValue(inputValue, false, this.$props, inputValue === '' ? configureStore.causes.CLEAR_VALUE : undefined);
669
- } else {
670
- this.$emit('change', inputValue, function (_ref3) {
671
- var isOpen = _ref3.isOpen;
672
- return _this2.triggerQuery({
673
- defaultQuery: true,
674
- customQuery: true,
675
- value: inputValue,
676
- isOpen: isOpen
677
- });
678
- }, e);
679
- }
680
- },
681
- onSuggestionSelected: function onSuggestionSelected(suggestion) {
682
- var _this3 = this;
683
-
684
- this.isOpen = false;
685
- var value = this.$props.value; // Record analytics for selected suggestions
686
-
687
- this.triggerClickAnalytics(suggestion._click_id);
688
-
689
- if (value === undefined) {
690
- this.setValue(suggestion.value, true, this.$props, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
691
- } else {
692
- var emitValue = suggestion.value;
693
-
694
- if (this.$options.isTagsMode) {
695
- emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
696
-
697
- if (this.selectedTags.includes(suggestion.value)) {
698
- // avoid duplicates in tags array
699
- this.isOpen = false;
700
- return;
701
- }
702
-
703
- emitValue.push(suggestion.value);
704
- }
705
-
706
- this.setValue(emitValue, true, this.$props, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
707
- this.$emit('change', emitValue, function (_ref4) {
708
- var isOpen = _ref4.isOpen;
709
- return _this3.triggerQuery(_rollupPluginBabelHelpers._extends({
710
- isOpen: isOpen,
711
- value: emitValue
712
- }, !_this3.$options.isTagsMode && {
713
- categoryValue: suggestion._category
714
- }));
715
- });
716
- }
717
-
718
- this.onValueSelectedHandler(suggestion.value, configureStore.causes.SUGGESTION_SELECT, suggestion.source);
719
- },
720
- onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
721
- if (currentValue === void 0) {
722
- currentValue = this.$data.currentValue;
723
- }
724
-
725
- for (var _len = arguments.length, cause = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
726
- cause[_key - 1] = arguments[_key];
727
- }
728
-
729
- this.$emit.apply(this, ['valueSelected', currentValue].concat(cause));
730
- this.$emit.apply(this, ['value-selected', currentValue].concat(cause));
731
- },
732
- handleStateChange: function handleStateChange(changes) {
733
- var isOpen = changes.isOpen;
734
- this.isOpen = isOpen;
735
- },
736
- getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
737
- var isDark = this.themePreset === 'dark';
738
-
739
- if (isDark) {
740
- return highlightedIndex === index ? '#555' : '#424242';
741
- }
742
-
743
- return highlightedIndex === index ? '#eee' : '#fff';
744
- },
745
- renderIcon: function renderIcon() {
746
- var h = this.$createElement;
747
-
748
- if (this.$props.showIcon) {
749
- return this.$props.icon || h(DataSearch.SearchSvg);
750
- }
751
-
752
- return null;
753
- },
754
- renderErrorComponent: function renderErrorComponent() {
755
- var h = this.$createElement;
756
- var renderError = this.$scopedSlots.renderError || this.$props.renderError;
757
-
758
- if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
759
- return h(DataSearch.SuggestionWrapper, {
760
- "attrs": {
761
- "innerClass": this.$props.innerClass,
762
- "innerClassName": "error",
763
- "theme": this.theme,
764
- "themePreset": this.themePreset
765
- }
766
- }, [index.isFunction(renderError) ? renderError(this.error) : renderError]);
767
- }
768
-
769
- return null;
770
- },
771
- renderCancelIcon: function renderCancelIcon() {
772
- var h = this.$createElement;
773
-
774
- if (this.$props.showClear) {
775
- return this.$props.clearIcon || h(CancelSvg.CancelSvg);
776
- }
777
-
778
- return null;
779
- },
780
- renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
781
- if (finalSuggestionsList === void 0) {
782
- finalSuggestionsList = [];
783
- }
784
-
785
- var h = this.$createElement;
786
- var _this$$props3 = this.$props,
787
- theme = _this$$props3.theme,
788
- innerClass = _this$$props3.innerClass;
789
- var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
790
- var renderError = this.$scopedSlots.renderError || this.$props.renderError;
791
- var _this$$data = this.$data,
792
- isOpen = _this$$data.isOpen,
793
- currentValue = _this$$data.currentValue;
794
-
795
- if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
796
- return h(DataSearch.SuggestionWrapper, {
797
- "attrs": {
798
- "innerClass": innerClass,
799
- "themePreset": this.themePreset,
800
- "theme": theme,
801
- "innerClassName": "noSuggestion"
802
- },
803
- "scopedSlots": {
804
- "default": function _default() {
805
- return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
806
- }
807
- }
808
- });
809
- }
810
-
811
- return null;
812
- },
813
- renderInputAddonBefore: function renderInputAddonBefore() {
814
- var h = this.$createElement;
815
- var addonBefore = this.$scopedSlots.addonBefore;
816
-
817
- if (addonBefore) {
818
- return h(DataSearch.InputAddon, {
819
- "class": "addon-before"
820
- }, [addonBefore()]);
821
- }
822
-
823
- return null;
824
- },
825
- renderInputAddonAfter: function renderInputAddonAfter() {
826
- var h = this.$createElement;
827
- var addonAfter = this.$scopedSlots.addonAfter;
828
-
829
- if (addonAfter) {
830
- return h(DataSearch.InputAddon, {
831
- "class": "addon-after"
832
- }, [addonAfter()]);
833
- }
834
-
835
- return null;
836
- },
837
- enterButtonOnClick: function enterButtonOnClick() {
838
- this.triggerQuery({
839
- isOpen: false,
840
- value: this.currentValue,
841
- customQuery: true
842
- });
843
- },
844
- renderEnterButtonElement: function renderEnterButtonElement() {
845
- var _this4 = this;
846
-
847
- var h = this.$createElement;
848
- var _this$$props4 = this.$props,
849
- enterButton = _this$$props4.enterButton,
850
- innerClass = _this$$props4.innerClass;
851
- var renderEnterButton = this.$scopedSlots.renderEnterButton;
852
-
853
- if (enterButton) {
854
- var getEnterButtonMarkup = function getEnterButtonMarkup() {
855
- if (renderEnterButton) {
856
- return renderEnterButton(_this4.enterButtonOnClick);
857
- }
858
-
859
- return h(Button.Button, {
860
- "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
861
- "attrs": {
862
- "primary": true
863
- },
864
- "on": {
865
- "click": _this4.enterButtonOnClick
866
- }
867
- }, ["Search"]);
868
- };
869
-
870
- return h("div", {
871
- "class": "enter-button-wrapper"
872
- }, [getEnterButtonMarkup()]);
873
- }
874
-
875
- return null;
876
- },
877
- renderIcons: function renderIcons() {
878
- var h = this.$createElement;
879
- var _this$$props5 = this.$props,
880
- iconPosition = _this$$props5.iconPosition,
881
- showClear = _this$$props5.showClear,
882
- innerClass = _this$$props5.innerClass,
883
- getMicInstance = _this$$props5.getMicInstance,
884
- showVoiceSearch = _this$$props5.showVoiceSearch,
885
- showIcon = _this$$props5.showIcon;
886
- var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
887
- var currentValue = this.$data.currentValue;
888
- return h("div", [h(CancelSvg.IconGroup, {
889
- "attrs": {
890
- "groupPosition": "right",
891
- "positionType": "absolute"
892
- }
893
- }, [currentValue && showClear && h(CancelSvg.IconWrapper, {
894
- "on": {
895
- "click": this.clearValue
896
- },
897
- "attrs": {
898
- "showIcon": showIcon,
899
- "isClearIcon": true
900
- }
901
- }, [this.renderCancelIcon()]), showVoiceSearch && h(DataSearch.Mic, {
902
- "attrs": {
903
- "getInstance": getMicInstance,
904
- "render": renderMic,
905
- "handleResult": this.handleVoiceResults,
906
- "className": getClassName(innerClass, 'mic') || null
907
- }
908
- }), iconPosition === 'right' && showIcon && h(CancelSvg.IconWrapper, {
909
- "on": {
910
- "click": this.handleSearchIconClick
911
- }
912
- }, [this.renderIcon()])]), h(CancelSvg.IconGroup, {
913
- "attrs": {
914
- "groupPosition": "left",
915
- "positionType": "absolute"
916
- }
917
- }, [iconPosition === 'left' && showIcon && h(CancelSvg.IconWrapper, {
918
- "on": {
919
- "click": this.handleSearchIconClick
920
- }
921
- }, [this.renderIcon()])])]);
922
- },
923
- focusSearchBox: function focusSearchBox(event) {
924
- var _this$$refs, _this$$refs$this$$pro;
925
-
926
- var elt = event.target || event.srcElement;
927
- var tagName = elt.tagName;
928
-
929
- if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
930
- // already in an input
931
- return;
932
- }
933
-
934
- (_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
935
- },
936
- listenForFocusShortcuts: function listenForFocusShortcuts() {
937
- var _this5 = this;
938
-
939
- var _this$$props$focusSho = this.$props.focusShortcuts,
940
- focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
941
-
942
- if (index.isEmpty(focusShortcuts)) {
943
- return;
944
- }
945
-
946
- var shortcutsString = index.parseFocusShortcuts(focusShortcuts).join(','); // handler for alphabets and other key combinations
947
-
948
- hotkeys(shortcutsString, // eslint-disable-next-line no-unused-vars
949
-
950
- /* eslint-disable no-shadow */
951
- function (event, handler) {
952
- // Prevent the default refresh event under WINDOWS system
953
- event.preventDefault();
954
-
955
- _this5.focusSearchBox(event);
956
- }); // if one of modifier keys are used, they are handled below
957
-
958
- hotkeys('*', function (event) {
959
- var modifierKeys = index.extractModifierKeysFromFocusShortcuts(focusShortcuts);
960
- if (modifierKeys.length === 0) return;
961
-
962
- for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
963
- var element = modifierKeys[index$1];
964
-
965
- if (hotkeys[element]) {
966
- _this5.focusSearchBox(event);
967
-
968
- break;
969
- }
970
- }
971
- });
972
- },
973
- onAutofillClick: function onAutofillClick(suggestion) {
974
- var value = suggestion.value;
975
- this.isOpen = true;
976
- this.currentValue = index.decodeHtml(value);
977
- this.triggerDefaultQuery(value);
978
- },
979
- renderAutoFill: function renderAutoFill(suggestion) {
980
- var _this6 = this;
981
-
982
- var h = this.$createElement;
983
-
984
- var handleAutoFillClick = function handleAutoFillClick(e) {
985
- e.stopPropagation();
986
-
987
- _this6.onAutofillClick(suggestion);
988
- };
989
- /* 👇 avoid showing autofill for category suggestions👇 */
990
-
991
-
992
- return suggestion._category ? null : h(AutoFillSvg, {
993
- "on": {
994
- "click": handleAutoFillClick
995
- }
996
- });
997
- },
998
- renderTag: function renderTag(item) {
999
- var _this7 = this;
1000
-
1001
- var h = this.$createElement;
1002
- var innerClass = this.$props.innerClass;
1003
- return h(DataSearch.TagItem, {
1004
- "class": getClassName(innerClass, 'selected-tag') || ''
1005
- }, [h("span", [item]), h("span", {
1006
- "attrs": {
1007
- "role": "img",
1008
- "aria-label": "delete-tag"
1009
- },
1010
- "class": "close-icon",
1011
- "on": {
1012
- "click": function click() {
1013
- return _this7.clearTag(item);
1014
- }
1015
- }
1016
- }, [h(CancelSvg.CancelSvg)])]);
1017
- },
1018
- clearAllTags: function clearAllTags() {
1019
- this.selectedTags = [];
1020
- this.setValue('', true, this.$props, configureStore.causes.SUGGESTION_SELECT);
1021
-
1022
- if (this.$props.value !== undefined) {
1023
- this.$emit('change', this.selectedTags, this.triggerQuery);
1024
- }
1025
- },
1026
- clearTag: function clearTag(tagValue) {
1027
- this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
1028
- return tag !== tagValue;
1029
- }));
1030
- this.setValue('', true, this.$props, configureStore.causes.SUGGESTION_SELECT);
1031
-
1032
- if (this.$props.value !== undefined) {
1033
- this.$emit('change', this.selectedTags, this.triggerQuery);
1034
- }
1035
- },
1036
- renderTags: function renderTags() {
1037
- var _this8 = this;
1038
-
1039
- var h = this.$createElement;
1040
-
1041
- if (!Array.isArray(this.selectedTags)) {
1042
- return null;
1043
- }
1044
-
1045
- var tagsList = [].concat(this.selectedTags);
1046
- var shouldRenderClearAllTag = tagsList.length > 1;
1047
- var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
1048
- return renderSelectedTags ? renderSelectedTags({
1049
- values: this.selectedTags,
1050
- handleClear: this.clearTag,
1051
- handleClearAll: this.clearAllTags
1052
- }) : h(DataSearch.TagsContainer, [tagsList.map(function (item) {
1053
- return _this8.renderTag(item);
1054
- }), shouldRenderClearAllTag && h(DataSearch.TagItem, {
1055
- "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
1056
- }, [h("span", ["Clear All"]), h("span", {
1057
- "attrs": {
1058
- "role": "img",
1059
- "aria-label": "delete-tag"
1060
- },
1061
- "class": "close-icon",
1062
- "on": {
1063
- "click": this.clearAllTags
1064
- }
1065
- }, [h(CancelSvg.CancelSvg)])])]);
1066
- }
1067
- },
1068
- render: function render() {
1069
- var _this9 = this;
1070
-
1071
- var h = arguments[0];
1072
- var _this$$props6 = this.$props,
1073
- theme = _this$$props6.theme,
1074
- expandSuggestionsContainer = _this$$props6.expandSuggestionsContainer;
1075
- var _this$$scopedSlots = this.$scopedSlots,
1076
- recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
1077
- popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
1078
- var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
1079
- var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
1080
- return h(Container.Container, {
1081
- "class": this.$props.className
1082
- }, [this.$props.title && h(Title.Title, {
1083
- "class": getClassName(this.$props.innerClass, 'title') || ''
1084
- }, [this.$props.title]), this.$props.autosuggest ? h(CancelSvg.Downshift, {
1085
- "attrs": {
1086
- "id": this.$props.componentId + "-downshift",
1087
- "handleChange": this.onSuggestionSelected,
1088
- "handleMouseup": this.handleStateChange,
1089
- "isOpen": this.$data.isOpen
1090
- },
1091
- "scopedSlots": {
1092
- "default": function _default(_ref5) {
1093
- var getInputEvents = _ref5.getInputEvents,
1094
- getInputProps = _ref5.getInputProps,
1095
- getItemProps = _ref5.getItemProps,
1096
- getItemEvents = _ref5.getItemEvents,
1097
- isOpen = _ref5.isOpen,
1098
- highlightedIndex = _ref5.highlightedIndex,
1099
- setHighlightedIndex = _ref5.setHighlightedIndex;
1100
-
1101
- var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
1102
- var getIcon = function getIcon(iconType) {
1103
- switch (iconType) {
1104
- case helper.suggestionTypes.Recent:
1105
- return recentSearchesIcon;
1106
-
1107
- case helper.suggestionTypes.Popular:
1108
- return popularSearchesIcon;
1109
-
1110
- default:
1111
- return null;
1112
- }
1113
- };
1114
-
1115
- return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
1116
- isOpen: isOpen,
1117
- getItemProps: getItemProps,
1118
- getItemEvents: getItemEvents,
1119
- highlightedIndex: highlightedIndex
1120
- }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
1121
- "class": Input.suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
1122
- }, [_this9.normalizedSuggestions.map(function (item, index) {
1123
- return renderItem ? h("li", {
1124
- "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
1125
- item: item
1126
- })),
1127
- "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
1128
- item: item
1129
- })),
1130
- "key": index + 1 + "-" + item.value,
1131
- "style": {
1132
- backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
1133
- justifyContent: 'flex-start',
1134
- alignItems: 'center'
1135
- }
1136
- }, [renderItem(item)]) : h("li", {
1137
- "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
1138
- item: item
1139
- })),
1140
- "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
1141
- item: item
1142
- })),
1143
- "key": index + 1 + "-" + item.value,
1144
- "style": {
1145
- backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
1146
- justifyContent: 'flex-start',
1147
- alignItems: 'center'
1148
- }
1149
- }, [h("div", {
1150
- "style": {
1151
- padding: '0 10px 0 0',
1152
- display: 'flex'
1153
- }
1154
- }, [h(DataSearch.CustomSvg, {
1155
- "attrs": {
1156
- "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
1157
- "icon": getIcon(item._suggestion_type),
1158
- "type": item._suggestion_type + "-search-icon"
1159
- }
1160
- })]), h(DataSearch.SuggestionItem, {
1161
- "attrs": {
1162
- "currentValue": _this9.currentValue,
1163
- "suggestion": item
1164
- }
1165
- }), _this9.renderAutoFill(item)]);
1166
- })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
1167
- };
1168
-
1169
- return h("div", {
1170
- "class": Input.suggestionsContainer
1171
- }, [h(DataSearch.InputGroup, [_this9.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
1172
- "attrs": {
1173
- "id": _this9.$props.componentId + "-input",
1174
- "showIcon": _this9.$props.showIcon,
1175
- "showClear": _this9.$props.showClear,
1176
- "iconPosition": _this9.$props.iconPosition,
1177
- "placeholder": _this9.$props.placeholder,
1178
- "autoFocus": _this9.$props.autoFocus,
1179
- "themePreset": _this9.themePreset,
1180
- "autocomplete": "off"
1181
- },
1182
- "ref": _this9.$props.innerRef,
1183
- "class": getClassName(_this9.$props.innerClass, 'input'),
1184
- "on": _rollupPluginBabelHelpers._extends({}, getInputEvents({
1185
- onInput: _this9.onInputChange,
1186
- onBlur: function onBlur(e) {
1187
- _this9.$emit('blur', e, _this9.triggerQuery);
1188
- },
1189
- onFocus: _this9.handleFocus,
1190
- onKeyPress: function onKeyPress(e) {
1191
- _this9.$emit('keyPress', e, _this9.triggerQuery);
1192
-
1193
- _this9.$emit('key-press', e, _this9.triggerQuery);
1194
- },
1195
- onKeyDown: function onKeyDown(e) {
1196
- return _this9.handleKeyDown(e, highlightedIndex);
1197
- },
1198
- onKeyUp: function onKeyUp(e) {
1199
- _this9.$emit('keyUp', e, _this9.triggerQuery);
1200
-
1201
- _this9.$emit('key-up', e, _this9.triggerQuery);
1202
- },
1203
- onClick: function onClick() {
1204
- setHighlightedIndex(null);
1205
- }
1206
- })),
1207
- "domProps": _rollupPluginBabelHelpers._extends({}, getInputProps({
1208
- value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
1209
- }))
1210
- }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
1211
- }
1212
- }
1213
- }) : h("div", {
1214
- "class": Input.suggestionsContainer
1215
- }, [h(DataSearch.InputGroup, [this.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
1216
- "class": getClassName(this.$props.innerClass, 'input') || '',
1217
- "attrs": {
1218
- "placeholder": this.$props.placeholder,
1219
- "iconPosition": this.$props.iconPosition,
1220
- "showIcon": this.$props.showIcon,
1221
- "showClear": this.$props.showClear,
1222
- "themePreset": this.themePreset
1223
- },
1224
- "on": _rollupPluginBabelHelpers._extends({}, {
1225
- blur: function blur(e) {
1226
- _this9.$emit('blur', e, _this9.triggerQuery);
1227
- },
1228
- keypress: function keypress(e) {
1229
- _this9.$emit('keyPress', e, _this9.triggerQuery);
1230
-
1231
- _this9.$emit('key-press', e, _this9.triggerQuery);
1232
- },
1233
- input: this.onInputChange,
1234
- focus: function focus(e) {
1235
- _this9.$emit('focus', e, _this9.triggerQuery);
1236
- },
1237
- keydown: this.handleKeyDown,
1238
- keyup: function keyup(e) {
1239
- _this9.$emit('keyUp', e, _this9.triggerQuery);
1240
-
1241
- _this9.$emit('key-up', e, _this9.triggerQuery);
1242
- }
1243
- }),
1244
- "domProps": _rollupPluginBabelHelpers._extends({}, {
1245
- autofocus: this.$props.autoFocus,
1246
- value: this.$data.currentValue ? this.$data.currentValue : ''
1247
- }),
1248
- "ref": this.$props.innerRef
1249
- }), this.renderIcons()]), this.renderInputAddonAfter(), this.renderEnterButtonElement()])])]);
1250
- },
1251
- destroyed: function destroyed() {
1252
- document.removeEventListener('keydown', this.onKeyDown);
1253
- }
1254
- };
1255
-
1256
- SearchBox.defaultQuery = function (value, props) {
1257
- var finalQuery = null;
1258
- var fields = normalizeDataField(props.dataField, props.fieldWeights);
1259
- finalQuery = {
1260
- bool: {
1261
- should: SearchBox.shouldQuery(value, fields, props),
1262
- minimum_should_match: '1'
1263
- }
1264
- };
1265
-
1266
- if (finalQuery && props.nestedField) {
1267
- return {
1268
- query: {
1269
- nested: {
1270
- path: props.nestedField,
1271
- query: finalQuery
1272
- }
1273
- }
1274
- };
1275
- }
1276
-
1277
- return finalQuery;
1278
- };
1279
-
1280
- SearchBox.shouldQuery = function (value, dataFields, props) {
1281
- var finalQuery = [];
1282
- var phrasePrefixFields = [];
1283
- var fields = dataFields.map(function (dataField) {
1284
- var queryField = "" + dataField.field + (dataField.weight ? "^" + dataField.weight : '');
1285
-
1286
- if (!(dataField.field.endsWith('.keyword') || dataField.field.endsWith('.autosuggest') || dataField.field.endsWith('.search'))) {
1287
- phrasePrefixFields.push(queryField);
1288
- }
1289
-
1290
- return queryField;
1291
- });
1292
-
1293
- if (props.searchOperators || props.queryString) {
1294
- return {
1295
- query: value,
1296
- fields: fields,
1297
- default_operator: props.queryFormat
1298
- };
1299
- }
1300
-
1301
- if (props.queryFormat === 'and') {
1302
- finalQuery.push({
1303
- multi_match: {
1304
- query: value,
1305
- fields: fields,
1306
- type: 'cross_fields',
1307
- operator: 'and'
1308
- }
1309
- });
1310
- finalQuery.push({
1311
- multi_match: {
1312
- query: value,
1313
- fields: fields,
1314
- type: 'phrase',
1315
- operator: 'and'
1316
- }
1317
- });
1318
-
1319
- if (phrasePrefixFields.length > 0) {
1320
- finalQuery.push({
1321
- multi_match: {
1322
- query: value,
1323
- fields: phrasePrefixFields,
1324
- type: 'phrase_prefix',
1325
- operator: 'and'
1326
- }
1327
- });
1328
- }
1329
-
1330
- return finalQuery;
1331
- }
1332
-
1333
- finalQuery.push({
1334
- multi_match: {
1335
- query: value,
1336
- fields: fields,
1337
- type: 'best_fields',
1338
- operator: 'or',
1339
- fuzziness: props.fuzziness ? props.fuzziness : 0
1340
- }
1341
- });
1342
- finalQuery.push({
1343
- multi_match: {
1344
- query: value,
1345
- fields: fields,
1346
- type: 'phrase',
1347
- operator: 'or'
1348
- }
1349
- });
1350
-
1351
- if (phrasePrefixFields.length > 0) {
1352
- finalQuery.push({
1353
- multi_match: {
1354
- query: value,
1355
- fields: phrasePrefixFields,
1356
- type: 'phrase_prefix',
1357
- operator: 'or'
1358
- }
1359
- });
1360
- }
1361
-
1362
- return finalQuery;
1363
- };
1364
-
1365
- var mapStateToProps = function mapStateToProps(state, props) {
1366
- return {
1367
- selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
1368
- selectedCategory: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].category || null,
1369
- suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
1370
- rawData: state.rawData[props.componentId],
1371
- aggregationData: state.compositeAggregations[props.componentId] || [],
1372
- themePreset: state.config.themePreset,
1373
- isLoading: !!state.isLoading[props.componentId + "_active"],
1374
- error: state.error[props.componentId],
1375
- enableAppbase: state.config.enableAppbase,
1376
- time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
1377
- total: state.hits[props.componentId] && state.hits[props.componentId].total,
1378
- hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden
1379
- };
1380
- };
1381
-
1382
- var mapDispatchToProps = {
1383
- updateQuery: updateQuery,
1384
- setCustomQuery: setCustomQuery,
1385
- setDefaultQuery: setDefaultQuery,
1386
- recordSuggestionClick: recordSuggestionClick
1387
- };
1388
- var DSConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
1389
- componentType: constants.componentTypes.searchBox,
1390
- internalComponent: true
1391
- });
1392
-
1393
- SearchBox.install = function (Vue) {
1394
- Vue.component(SearchBox.name, DSConnected);
1395
- }; // Add componentType for SSR
1396
-
1397
-
1398
- SearchBox.componentType = constants.componentTypes.searchBox;
1399
-
1400
- var components = [ReactiveList.default, ResultCard.default, ResultList.default, ReactiveBase.default, DataSearch.DataSearch, SearchBox, SingleList.default, MultiList.default, SingleRange.default, MultiRange.default, RangeSlider.default, DynamicRangeSlider.default, ReactiveComponent.default, SelectedFilters.default, ToggleButton.default, SingleDropdownList.default, MultiDropdownList.default, StateProvider.default, RangeInput.default];
1401
- function install (Vue) {
1402
- components.map(function (component) {
1403
- Vue.use(component);
1404
- return null;
1405
- });
1406
- }
1407
-
1408
- exports.SearchBox = SearchBox;
1409
- exports.install = install;