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