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