@appbaseio/reactivesearch-vue 1.34.0-alpha.2 → 1.35.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 +10892 -8633
- package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js +12 -11
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
- package/dist/cjs/Button-841fd06d.js +62 -0
- package/dist/cjs/{CancelSvg-062a42f0.js → CancelSvg-220a7cc3.js} +40 -32
- package/dist/cjs/Card-240f283d.js +30 -0
- package/dist/cjs/{ComponentWrapper-db45cc6d.js → ComponentWrapper-94c50228.js} +7 -7
- package/dist/cjs/Container-e699ea95.js +15 -0
- package/dist/cjs/DataSearch.js +1313 -20
- package/dist/cjs/{DropDown-3b899b20.js → DropDown-c6b79b05.js} +79 -78
- package/dist/cjs/DynamicRangeSlider.js +47 -56
- package/dist/cjs/Flex-ddd7cb6b.js +50 -0
- package/dist/cjs/FormControlList-bbb5cd24.js +45 -0
- package/dist/cjs/Input-ead4cd84.js +77 -0
- package/dist/cjs/ListItem-5088bd6a.js +45 -0
- package/dist/cjs/MultiDropdownList.js +69 -74
- package/dist/cjs/MultiList.js +95 -89
- package/dist/cjs/MultiRange.js +45 -54
- package/dist/cjs/{Pagination-a468f960.js → Pagination-6d184d4a.js} +53 -56
- package/dist/cjs/{PreferencesConsumer-034c55e3.js → PreferencesConsumer-5e6e84a2.js} +5 -6
- package/dist/cjs/RangeInput.js +108 -115
- package/dist/cjs/RangeSlider.js +40 -50
- package/dist/cjs/ReactiveBase.js +55 -69
- package/dist/cjs/ReactiveComponent.js +317 -46
- package/dist/cjs/{ReactiveComponent-f0f486ca.js → ReactiveComponentPrivate-6f03f300.js} +322 -618
- package/dist/cjs/ReactiveComponentPrivate.js +55 -0
- package/dist/cjs/ReactiveGoogleMap.js +442 -384
- package/dist/cjs/ReactiveList.js +129 -100
- package/dist/cjs/ResultCard.js +19 -26
- package/dist/cjs/ResultList.js +27 -31
- package/dist/cjs/SelectedFilters.js +34 -49
- package/dist/cjs/SingleDropdownList.js +67 -73
- package/dist/cjs/SingleList.js +97 -90
- package/dist/cjs/SingleRange.js +43 -48
- package/dist/cjs/StateProvider.js +2 -2
- package/dist/cjs/Tags-d464c22e.js +883 -0
- package/dist/cjs/Title-16042ea0.js +15 -0
- package/dist/cjs/ToggleButton.js +35 -39
- package/dist/cjs/{index-dc25b706.js → index-de136c17.js} +8 -6
- package/dist/cjs/index.js +27 -25
- package/dist/cjs/initReactivesearch.js +0 -3
- package/dist/cjs/install.js +23 -22
- package/dist/cjs/ssr-f2fc1bf6.js +36 -0
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/{vueTypes-621a8143.js → vueTypes-568ce5e6.js} +4 -2
- package/dist/es/Button-153cd885.js +53 -0
- package/dist/es/{CancelSvg-14ebc9a1.js → CancelSvg-e40552a5.js} +37 -30
- package/dist/es/{Card-1951569e.js → Card-19ad6d90.js} +6 -5
- package/dist/es/{ComponentWrapper-bf443c0b.js → ComponentWrapper-edaeaceb.js} +6 -6
- package/dist/es/Container-d00219f7.js +1 -1
- package/dist/es/DataSearch.js +1313 -18
- package/dist/es/{DropDown-35e232b7.js → DropDown-c685912c.js} +78 -78
- package/dist/es/DynamicRangeSlider.js +44 -53
- package/dist/es/Flex-7c177a10.js +45 -0
- package/dist/es/FormControlList-99797d0a.js +38 -0
- package/dist/es/Input-c09c0b56.js +69 -0
- package/dist/es/{ListItem-47a6345a.js → ListItem-07888a65.js} +7 -6
- package/dist/es/MultiDropdownList.js +67 -72
- package/dist/es/MultiList.js +94 -88
- package/dist/es/MultiRange.js +43 -52
- package/dist/es/{Pagination-145b4ff2.js → Pagination-f477f92f.js} +53 -56
- package/dist/es/{PreferencesConsumer-7ea7313a.js → PreferencesConsumer-86a676c8.js} +4 -5
- package/dist/es/RangeInput.js +104 -112
- package/dist/es/RangeSlider.js +37 -47
- package/dist/es/ReactiveBase.js +53 -68
- package/dist/es/ReactiveComponent.js +317 -45
- package/dist/es/{ReactiveComponent-e2fb9eb4.js → ReactiveComponentPrivate-4467524a.js} +317 -614
- package/dist/es/ReactiveComponentPrivate.js +47 -0
- package/dist/es/ReactiveGoogleMap.js +437 -380
- package/dist/es/ReactiveList.js +126 -98
- package/dist/es/ResultCard.js +18 -25
- package/dist/es/ResultList.js +26 -30
- package/dist/es/SelectedFilters.js +32 -47
- package/dist/es/SingleDropdownList.js +65 -71
- package/dist/es/SingleList.js +95 -88
- package/dist/es/SingleRange.js +41 -46
- package/dist/es/StateProvider.js +2 -2
- package/dist/es/Tags-ebf363ec.js +869 -0
- package/dist/es/Title-863dfa42.js +1 -1
- package/dist/es/ToggleButton.js +33 -37
- package/dist/es/{index-285a43a6.js → index-5509c0bc.js} +8 -6
- package/dist/es/index.js +20 -19
- package/dist/es/initReactivesearch.js +0 -3
- package/dist/es/install.js +20 -19
- package/dist/es/ssr-03607d84.js +1 -1
- package/dist/es/version.js +1 -1
- package/dist/es/{vueTypes-e4af6fe2.js → vueTypes-7f572665.js} +4 -2
- package/package.json +87 -87
- package/dist/cjs/Button-626c5e8e.js +0 -58
- package/dist/cjs/Card-c381ded3.js +0 -26
- package/dist/cjs/Container-29f049b2.js +0 -12
- package/dist/cjs/DataSearch-7c71ec9f.js +0 -2043
- package/dist/cjs/Flex-d5675ea6.js +0 -48
- package/dist/cjs/FormControlList-cf1ff2ca.js +0 -42
- package/dist/cjs/Input-4d278ca0.js +0 -74
- package/dist/cjs/ListItem-c067bc07.js +0 -41
- package/dist/cjs/Title-8802a218.js +0 -12
- package/dist/cjs/ssr-eb901d09.js +0 -35
- package/dist/es/Button-ebafa3d6.js +0 -52
- package/dist/es/DataSearch-4f9a4e46.js +0 -2028
- package/dist/es/Flex-a08e22d7.js +0 -46
- package/dist/es/FormControlList-fa5cf78b.js +0 -38
- package/dist/es/Input-3b8408a6.js +0 -69
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
import { Actions, helper, causes } from '@appbaseio/reactivecore';
|
|
2
2
|
import { SEARCH_COMPONENTS_MODES, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
|
|
3
|
-
import { _ as _taggedTemplateLiteralLoose, a as _extends
|
|
4
|
-
import { createVNode, defineComponent, isVNode, createTextVNode, mergeProps, h } from 'vue';
|
|
3
|
+
import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
|
|
5
4
|
import VueTypes from 'vue-types';
|
|
6
5
|
import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
|
|
7
|
-
import
|
|
8
|
-
import { B as Button } from './Button-
|
|
9
|
-
import { t as types } from './vueTypes-
|
|
6
|
+
import styled from '@appbaseio/vue-emotion';
|
|
7
|
+
import { B as Button } from './Button-153cd885.js';
|
|
8
|
+
import { t as types } from './vueTypes-7f572665.js';
|
|
10
9
|
import { RLConnected } from './ReactiveList.js';
|
|
11
|
-
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-
|
|
12
|
-
import { C as ComponentWrapper } from './ComponentWrapper-
|
|
13
|
-
import { P as PreferencesConsumer } from './PreferencesConsumer-
|
|
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-5509c0bc.js';
|
|
11
|
+
import { C as ComponentWrapper } from './ComponentWrapper-edaeaceb.js';
|
|
12
|
+
import { P as PreferencesConsumer } from './PreferencesConsumer-86a676c8.js';
|
|
14
13
|
import { T as Title } from './Title-863dfa42.js';
|
|
15
14
|
import hotkeys from 'hotkeys-js';
|
|
16
|
-
import { S as SearchSvg,
|
|
17
|
-
import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-
|
|
18
|
-
import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-
|
|
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 } from './Tags-ebf363ec.js';
|
|
16
|
+
import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-e40552a5.js';
|
|
17
|
+
import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-c09c0b56.js';
|
|
19
18
|
import { C as Container } from './Container-d00219f7.js';
|
|
20
|
-
import _transformOn from '@vue/babel-helper-vue-transform-on';
|
|
21
19
|
import { ListConnected as ListConnected$3 } from './SingleList.js';
|
|
22
20
|
import { ListConnected as ListConnected$2 } from './MultiList.js';
|
|
23
21
|
import { ListConnected as ListConnected$1 } from './SingleDropdownList.js';
|
|
24
22
|
import { ListConnected } from './MultiDropdownList.js';
|
|
25
23
|
import { TBConnected } from './ToggleButton.js';
|
|
24
|
+
import ReactiveComponent from './ReactiveComponent.js';
|
|
26
25
|
import { RangeConnected as RangeConnected$4 } from './DynamicRangeSlider.js';
|
|
27
26
|
import { RangeConnected as RangeConnected$3 } from './SingleRange.js';
|
|
28
27
|
import { RangeConnected as RangeConnected$2 } from './MultiRange.js';
|
|
@@ -34,17 +33,20 @@ var AutofillSvgIcon = styled('button')(_templateObject || (_templateObject = _ta
|
|
|
34
33
|
var AutoFillSvg = {
|
|
35
34
|
name: 'AutoFillSvg',
|
|
36
35
|
render: function render() {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return [createVNode("svg", {
|
|
42
|
-
"viewBox": "0 0 24 24"
|
|
43
|
-
}, [createVNode("path", {
|
|
44
|
-
"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"
|
|
45
|
-
}, null)])];
|
|
36
|
+
var h = arguments[0];
|
|
37
|
+
return h(AutofillSvgIcon, {
|
|
38
|
+
"on": {
|
|
39
|
+
"click": this.$listeners.click
|
|
46
40
|
}
|
|
47
|
-
}
|
|
41
|
+
}, [h("svg", {
|
|
42
|
+
"attrs": {
|
|
43
|
+
"viewBox": "0 0 24 24"
|
|
44
|
+
}
|
|
45
|
+
}, [h("path", {
|
|
46
|
+
"attrs": {
|
|
47
|
+
"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"
|
|
48
|
+
}
|
|
49
|
+
})])]);
|
|
48
50
|
},
|
|
49
51
|
methods: {
|
|
50
52
|
clicked: function clicked(e) {
|
|
@@ -54,9 +56,6 @@ var AutoFillSvg = {
|
|
|
54
56
|
}
|
|
55
57
|
};
|
|
56
58
|
|
|
57
|
-
function _isSlot(s) {
|
|
58
|
-
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
|
|
59
|
-
}
|
|
60
59
|
var updateQuery = Actions.updateQuery,
|
|
61
60
|
setCustomQuery = Actions.setCustomQuery,
|
|
62
61
|
setDefaultQuery = Actions.setDefaultQuery,
|
|
@@ -69,7 +68,7 @@ var _debounce = helper.debounce,
|
|
|
69
68
|
withClickIds = helper.withClickIds,
|
|
70
69
|
getResultStats = helper.getResultStats,
|
|
71
70
|
normalizeDataField = helper.normalizeDataField;
|
|
72
|
-
var SearchBox =
|
|
71
|
+
var SearchBox = {
|
|
73
72
|
name: 'SearchBox',
|
|
74
73
|
isTagsMode: false,
|
|
75
74
|
data: function data() {
|
|
@@ -134,6 +133,7 @@ var SearchBox = defineComponent({
|
|
|
134
133
|
className: VueTypes.string.def(''),
|
|
135
134
|
clearIcon: types.children,
|
|
136
135
|
componentId: types.stringRequired,
|
|
136
|
+
compoundClause: types.compoundClause,
|
|
137
137
|
customHighlight: types.func,
|
|
138
138
|
customQuery: types.func,
|
|
139
139
|
defaultQuery: types.func,
|
|
@@ -660,31 +660,31 @@ var SearchBox = defineComponent({
|
|
|
660
660
|
return highlightedIndex === index ? '#eee' : '#fff';
|
|
661
661
|
},
|
|
662
662
|
renderIcon: function renderIcon() {
|
|
663
|
+
var h = this.$createElement;
|
|
663
664
|
if (this.$props.showIcon) {
|
|
664
|
-
return this.$props.icon ||
|
|
665
|
+
return this.$props.icon || h(SearchSvg);
|
|
665
666
|
}
|
|
666
667
|
return null;
|
|
667
668
|
},
|
|
668
669
|
renderErrorComponent: function renderErrorComponent() {
|
|
669
|
-
var
|
|
670
|
-
var renderError = this.$
|
|
670
|
+
var h = this.$createElement;
|
|
671
|
+
var renderError = this.$scopedSlots.renderError || this.$props.renderError;
|
|
671
672
|
if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
|
|
672
|
-
return
|
|
673
|
-
"
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
"default": function _default() {
|
|
679
|
-
return [isFunction(renderError) ? renderError(_this4.error) : renderError];
|
|
673
|
+
return h(SuggestionWrapper, {
|
|
674
|
+
"attrs": {
|
|
675
|
+
"innerClass": this.$props.innerClass,
|
|
676
|
+
"innerClassName": "error",
|
|
677
|
+
"theme": this.theme,
|
|
678
|
+
"themePreset": this.themePreset
|
|
680
679
|
}
|
|
681
|
-
});
|
|
680
|
+
}, [isFunction(renderError) ? renderError(this.error) : renderError]);
|
|
682
681
|
}
|
|
683
682
|
return null;
|
|
684
683
|
},
|
|
685
684
|
renderCancelIcon: function renderCancelIcon() {
|
|
685
|
+
var h = this.$createElement;
|
|
686
686
|
if (this.$props.showClear) {
|
|
687
|
-
return this.$props.clearIcon ||
|
|
687
|
+
return this.$props.clearIcon || h(CancelSvg);
|
|
688
688
|
}
|
|
689
689
|
return null;
|
|
690
690
|
},
|
|
@@ -692,54 +692,49 @@ var SearchBox = defineComponent({
|
|
|
692
692
|
if (finalSuggestionsList === void 0) {
|
|
693
693
|
finalSuggestionsList = [];
|
|
694
694
|
}
|
|
695
|
+
var h = this.$createElement;
|
|
695
696
|
var _this$$props3 = this.$props,
|
|
696
697
|
theme = _this$$props3.theme,
|
|
697
698
|
innerClass = _this$$props3.innerClass;
|
|
698
|
-
var renderNoSuggestion = this.$
|
|
699
|
-
var renderError = this.$
|
|
699
|
+
var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
|
|
700
|
+
var renderError = this.$scopedSlots.renderError || this.$props.renderError;
|
|
700
701
|
var _this$$data = this.$data,
|
|
701
702
|
isOpen = _this$$data.isOpen,
|
|
702
703
|
currentValue = _this$$data.currentValue;
|
|
703
704
|
if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
|
|
704
|
-
return
|
|
705
|
-
"
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
705
|
+
return h(SuggestionWrapper, {
|
|
706
|
+
"attrs": {
|
|
707
|
+
"innerClass": innerClass,
|
|
708
|
+
"themePreset": this.themePreset,
|
|
709
|
+
"theme": theme,
|
|
710
|
+
"innerClassName": "noSuggestion"
|
|
711
|
+
},
|
|
709
712
|
"scopedSlots": {
|
|
710
713
|
"default": function _default() {
|
|
711
714
|
return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
|
|
712
715
|
}
|
|
713
716
|
}
|
|
714
|
-
}
|
|
717
|
+
});
|
|
715
718
|
}
|
|
716
719
|
return null;
|
|
717
720
|
},
|
|
718
721
|
renderInputAddonBefore: function renderInputAddonBefore() {
|
|
719
|
-
var
|
|
722
|
+
var h = this.$createElement;
|
|
723
|
+
var addonBefore = this.$scopedSlots.addonBefore;
|
|
720
724
|
if (addonBefore) {
|
|
721
|
-
|
|
722
|
-
return createVNode(InputAddon, {
|
|
725
|
+
return h(InputAddon, {
|
|
723
726
|
"class": "addon-before"
|
|
724
|
-
},
|
|
725
|
-
"default": function _default() {
|
|
726
|
-
return [_slot];
|
|
727
|
-
}
|
|
728
|
-
});
|
|
727
|
+
}, [addonBefore()]);
|
|
729
728
|
}
|
|
730
729
|
return null;
|
|
731
730
|
},
|
|
732
731
|
renderInputAddonAfter: function renderInputAddonAfter() {
|
|
733
|
-
var
|
|
732
|
+
var h = this.$createElement;
|
|
733
|
+
var addonAfter = this.$scopedSlots.addonAfter;
|
|
734
734
|
if (addonAfter) {
|
|
735
|
-
|
|
736
|
-
return createVNode(InputAddon, {
|
|
735
|
+
return h(InputAddon, {
|
|
737
736
|
"class": "addon-after"
|
|
738
|
-
},
|
|
739
|
-
"default": function _default() {
|
|
740
|
-
return [_slot2];
|
|
741
|
-
}
|
|
742
|
-
});
|
|
737
|
+
}, [addonAfter()]);
|
|
743
738
|
}
|
|
744
739
|
return null;
|
|
745
740
|
},
|
|
@@ -751,35 +746,35 @@ var SearchBox = defineComponent({
|
|
|
751
746
|
});
|
|
752
747
|
},
|
|
753
748
|
renderEnterButtonElement: function renderEnterButtonElement() {
|
|
754
|
-
var
|
|
749
|
+
var _this4 = this;
|
|
750
|
+
var h = this.$createElement;
|
|
755
751
|
var _this$$props4 = this.$props,
|
|
756
752
|
enterButton = _this$$props4.enterButton,
|
|
757
753
|
innerClass = _this$$props4.innerClass;
|
|
758
|
-
var renderEnterButton = this.$
|
|
754
|
+
var renderEnterButton = this.$scopedSlots.renderEnterButton;
|
|
759
755
|
if (enterButton) {
|
|
760
756
|
var getEnterButtonMarkup = function getEnterButtonMarkup() {
|
|
761
757
|
if (renderEnterButton) {
|
|
762
|
-
return renderEnterButton(
|
|
758
|
+
return renderEnterButton(_this4.enterButtonOnClick);
|
|
763
759
|
}
|
|
764
|
-
return
|
|
760
|
+
return h(Button, {
|
|
765
761
|
"class": "enter-btn " + getClassName(innerClass, 'enter-button'),
|
|
766
|
-
"
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
"
|
|
770
|
-
|
|
762
|
+
"attrs": {
|
|
763
|
+
"primary": true
|
|
764
|
+
},
|
|
765
|
+
"on": {
|
|
766
|
+
"click": _this4.enterButtonOnClick
|
|
771
767
|
}
|
|
772
|
-
});
|
|
768
|
+
}, ["Search"]);
|
|
773
769
|
};
|
|
774
|
-
return
|
|
770
|
+
return h("div", {
|
|
775
771
|
"class": "enter-button-wrapper"
|
|
776
772
|
}, [getEnterButtonMarkup()]);
|
|
777
773
|
}
|
|
778
774
|
return null;
|
|
779
775
|
},
|
|
780
776
|
renderIcons: function renderIcons() {
|
|
781
|
-
var
|
|
782
|
-
var _slot3, _slot4, _slot5;
|
|
777
|
+
var h = this.$createElement;
|
|
783
778
|
var _this$$props5 = this.$props,
|
|
784
779
|
iconPosition = _this$$props5.iconPosition,
|
|
785
780
|
showClear = _this$$props5.showClear,
|
|
@@ -787,48 +782,42 @@ var SearchBox = defineComponent({
|
|
|
787
782
|
getMicInstance = _this$$props5.getMicInstance,
|
|
788
783
|
showVoiceSearch = _this$$props5.showVoiceSearch,
|
|
789
784
|
showIcon = _this$$props5.showIcon;
|
|
790
|
-
var renderMic = this.$
|
|
785
|
+
var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
|
|
791
786
|
var currentValue = this.$data.currentValue;
|
|
792
|
-
return
|
|
793
|
-
"
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
"default": function _default() {
|
|
797
|
-
return [currentValue && showClear && createVNode(IconWrapper, {
|
|
798
|
-
"onClick": _this6.clearValue,
|
|
799
|
-
"showIcon": showIcon,
|
|
800
|
-
"isClearIcon": true
|
|
801
|
-
}, _isSlot(_slot3 = _this6.renderCancelIcon()) ? _slot3 : {
|
|
802
|
-
"default": function _default() {
|
|
803
|
-
return [_slot3];
|
|
804
|
-
}
|
|
805
|
-
}), showVoiceSearch && createVNode(Mic, {
|
|
806
|
-
"getInstance": getMicInstance,
|
|
807
|
-
"render": renderMic,
|
|
808
|
-
"handleResult": _this6.handleVoiceResults,
|
|
809
|
-
"className": getClassName(innerClass, 'mic') || null
|
|
810
|
-
}, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
|
|
811
|
-
"onClick": _this6.handleSearchIconClick
|
|
812
|
-
}, _isSlot(_slot4 = _this6.renderIcon()) ? _slot4 : {
|
|
813
|
-
"default": function _default() {
|
|
814
|
-
return [_slot4];
|
|
815
|
-
}
|
|
816
|
-
})];
|
|
787
|
+
return h("div", [h(IconGroup, {
|
|
788
|
+
"attrs": {
|
|
789
|
+
"groupPosition": "right",
|
|
790
|
+
"positionType": "absolute"
|
|
817
791
|
}
|
|
818
|
-
}
|
|
819
|
-
"
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
"
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
792
|
+
}, [currentValue && showClear && h(IconWrapper, {
|
|
793
|
+
"on": {
|
|
794
|
+
"click": this.clearValue
|
|
795
|
+
},
|
|
796
|
+
"attrs": {
|
|
797
|
+
"showIcon": showIcon,
|
|
798
|
+
"isClearIcon": true
|
|
799
|
+
}
|
|
800
|
+
}, [this.renderCancelIcon()]), showVoiceSearch && h(Mic, {
|
|
801
|
+
"attrs": {
|
|
802
|
+
"getInstance": getMicInstance,
|
|
803
|
+
"render": renderMic,
|
|
804
|
+
"handleResult": this.handleVoiceResults,
|
|
805
|
+
"className": getClassName(innerClass, 'mic') || null
|
|
830
806
|
}
|
|
831
|
-
})
|
|
807
|
+
}), iconPosition === 'right' && showIcon && h(IconWrapper, {
|
|
808
|
+
"on": {
|
|
809
|
+
"click": this.handleSearchIconClick
|
|
810
|
+
}
|
|
811
|
+
}, [this.renderIcon()])]), h(IconGroup, {
|
|
812
|
+
"attrs": {
|
|
813
|
+
"groupPosition": "left",
|
|
814
|
+
"positionType": "absolute"
|
|
815
|
+
}
|
|
816
|
+
}, [iconPosition === 'left' && showIcon && h(IconWrapper, {
|
|
817
|
+
"on": {
|
|
818
|
+
"click": this.handleSearchIconClick
|
|
819
|
+
}
|
|
820
|
+
}, [this.renderIcon()])])]);
|
|
832
821
|
},
|
|
833
822
|
focusSearchBox: function focusSearchBox(event) {
|
|
834
823
|
var _this$$refs, _this$$refs$this$$pro;
|
|
@@ -841,7 +830,7 @@ var SearchBox = defineComponent({
|
|
|
841
830
|
(_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
|
|
842
831
|
},
|
|
843
832
|
listenForFocusShortcuts: function listenForFocusShortcuts() {
|
|
844
|
-
var
|
|
833
|
+
var _this5 = this;
|
|
845
834
|
var _this$$props$focusSho = this.$props.focusShortcuts,
|
|
846
835
|
focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
|
|
847
836
|
if (isEmpty(focusShortcuts)) {
|
|
@@ -856,7 +845,7 @@ var SearchBox = defineComponent({
|
|
|
856
845
|
function (event, handler) {
|
|
857
846
|
// Prevent the default refresh event under WINDOWS system
|
|
858
847
|
event.preventDefault();
|
|
859
|
-
|
|
848
|
+
_this5.focusSearchBox(event);
|
|
860
849
|
});
|
|
861
850
|
|
|
862
851
|
// if one of modifier keys are used, they are handled below
|
|
@@ -866,7 +855,7 @@ var SearchBox = defineComponent({
|
|
|
866
855
|
for (var index = 0; index < modifierKeys.length; index += 1) {
|
|
867
856
|
var element = modifierKeys[index];
|
|
868
857
|
if (hotkeys[element]) {
|
|
869
|
-
|
|
858
|
+
_this5.focusSearchBox(event);
|
|
870
859
|
break;
|
|
871
860
|
}
|
|
872
861
|
}
|
|
@@ -879,33 +868,37 @@ var SearchBox = defineComponent({
|
|
|
879
868
|
this.triggerDefaultQuery(value);
|
|
880
869
|
},
|
|
881
870
|
renderAutoFill: function renderAutoFill(suggestion) {
|
|
882
|
-
var
|
|
871
|
+
var _this6 = this;
|
|
872
|
+
var h = this.$createElement;
|
|
883
873
|
var handleAutoFillClick = function handleAutoFillClick(e) {
|
|
884
874
|
e.stopPropagation();
|
|
885
|
-
|
|
875
|
+
_this6.onAutofillClick(suggestion);
|
|
886
876
|
};
|
|
887
877
|
/* 👇 avoid showing autofill for category suggestions👇 */
|
|
888
|
-
return suggestion._category ? null :
|
|
889
|
-
"
|
|
890
|
-
|
|
878
|
+
return suggestion._category ? null : h(AutoFillSvg, {
|
|
879
|
+
"on": {
|
|
880
|
+
"click": handleAutoFillClick
|
|
881
|
+
}
|
|
882
|
+
});
|
|
891
883
|
},
|
|
892
884
|
renderTag: function renderTag(item) {
|
|
893
|
-
var
|
|
885
|
+
var _this7 = this;
|
|
886
|
+
var h = this.$createElement;
|
|
894
887
|
var innerClass = this.$props.innerClass;
|
|
895
|
-
return
|
|
888
|
+
return h(TagItem, {
|
|
896
889
|
"class": getClassName(innerClass, 'selected-tag') || ''
|
|
897
|
-
}, {
|
|
898
|
-
"
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
}
|
|
890
|
+
}, [h("span", [item]), h("span", {
|
|
891
|
+
"attrs": {
|
|
892
|
+
"role": "img",
|
|
893
|
+
"aria-label": "delete-tag"
|
|
894
|
+
},
|
|
895
|
+
"class": "close-icon",
|
|
896
|
+
"on": {
|
|
897
|
+
"click": function click() {
|
|
898
|
+
return _this7.clearTag(item);
|
|
899
|
+
}
|
|
907
900
|
}
|
|
908
|
-
});
|
|
901
|
+
}, [h(CancelSvg)])]);
|
|
909
902
|
},
|
|
910
903
|
clearAllTags: function clearAllTags() {
|
|
911
904
|
this.selectedTags = [];
|
|
@@ -924,218 +917,214 @@ var SearchBox = defineComponent({
|
|
|
924
917
|
}
|
|
925
918
|
},
|
|
926
919
|
renderTags: function renderTags() {
|
|
927
|
-
var
|
|
920
|
+
var _this8 = this;
|
|
921
|
+
var h = this.$createElement;
|
|
928
922
|
if (!Array.isArray(this.selectedTags)) {
|
|
929
923
|
return null;
|
|
930
924
|
}
|
|
931
925
|
var tagsList = [].concat(this.selectedTags);
|
|
932
926
|
var shouldRenderClearAllTag = tagsList.length > 1;
|
|
933
|
-
var renderSelectedTags = this.$
|
|
927
|
+
var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
|
|
934
928
|
return renderSelectedTags ? renderSelectedTags({
|
|
935
929
|
values: this.selectedTags,
|
|
936
930
|
handleClear: this.clearTag,
|
|
937
931
|
handleClearAll: this.clearAllTags
|
|
938
|
-
}) :
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
"onClick": _this10.clearAllTags
|
|
951
|
-
}, [createVNode(CancelSvg, null, null)])];
|
|
952
|
-
}
|
|
953
|
-
})];
|
|
932
|
+
}) : h(TagsContainer, [tagsList.map(function (item) {
|
|
933
|
+
return _this8.renderTag(item);
|
|
934
|
+
}), shouldRenderClearAllTag && h(TagItem, {
|
|
935
|
+
"class": getClassName(this.$props.innerClass, 'selected-tag') || ''
|
|
936
|
+
}, [h("span", ["Clear All"]), h("span", {
|
|
937
|
+
"attrs": {
|
|
938
|
+
"role": "img",
|
|
939
|
+
"aria-label": "delete-tag"
|
|
940
|
+
},
|
|
941
|
+
"class": "close-icon",
|
|
942
|
+
"on": {
|
|
943
|
+
"click": this.clearAllTags
|
|
954
944
|
}
|
|
955
|
-
});
|
|
945
|
+
}, [h(CancelSvg)])])]);
|
|
956
946
|
}
|
|
957
947
|
},
|
|
958
948
|
render: function render() {
|
|
959
|
-
var
|
|
949
|
+
var _this9 = this;
|
|
950
|
+
var h = arguments[0];
|
|
960
951
|
var _this$$props6 = this.$props,
|
|
961
952
|
theme = _this$$props6.theme,
|
|
962
953
|
expandSuggestionsContainer = _this$$props6.expandSuggestionsContainer;
|
|
963
|
-
var _this$$
|
|
964
|
-
recentSearchesIcon = _this$$
|
|
965
|
-
popularSearchesIcon = _this$$
|
|
954
|
+
var _this$$scopedSlots = this.$scopedSlots,
|
|
955
|
+
recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
|
|
956
|
+
popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
|
|
966
957
|
var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
|
|
967
|
-
var renderItem = this.$
|
|
968
|
-
return
|
|
958
|
+
var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
|
|
959
|
+
return h(Container, {
|
|
969
960
|
"class": this.$props.className
|
|
970
|
-
}, {
|
|
971
|
-
"
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
"class": suggestions(_this11.themePreset, theme) + " " + getClassName(_this11.$props.innerClass, 'list')
|
|
1010
|
-
}, [_this11.normalizedSuggestions.map(function (item, index) {
|
|
1011
|
-
return renderItem ? createVNode("li", mergeProps(getItemProps({
|
|
961
|
+
}, [this.$props.title && h(Title, {
|
|
962
|
+
"class": getClassName(this.$props.innerClass, 'title') || ''
|
|
963
|
+
}, [this.$props.title]), this.$props.autosuggest ? h(Downshift, {
|
|
964
|
+
"attrs": {
|
|
965
|
+
"id": this.$props.componentId + "-downshift",
|
|
966
|
+
"handleChange": this.onSuggestionSelected,
|
|
967
|
+
"handleMouseup": this.handleStateChange,
|
|
968
|
+
"isOpen": this.$data.isOpen
|
|
969
|
+
},
|
|
970
|
+
"scopedSlots": {
|
|
971
|
+
"default": function _default(_ref5) {
|
|
972
|
+
var getInputEvents = _ref5.getInputEvents,
|
|
973
|
+
getInputProps = _ref5.getInputProps,
|
|
974
|
+
getItemProps = _ref5.getItemProps,
|
|
975
|
+
getItemEvents = _ref5.getItemEvents,
|
|
976
|
+
isOpen = _ref5.isOpen,
|
|
977
|
+
highlightedIndex = _ref5.highlightedIndex,
|
|
978
|
+
setHighlightedIndex = _ref5.setHighlightedIndex;
|
|
979
|
+
var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
|
|
980
|
+
var getIcon = function getIcon(iconType) {
|
|
981
|
+
switch (iconType) {
|
|
982
|
+
case suggestionTypes.Recent:
|
|
983
|
+
return recentSearchesIcon;
|
|
984
|
+
case suggestionTypes.Popular:
|
|
985
|
+
return popularSearchesIcon;
|
|
986
|
+
default:
|
|
987
|
+
return null;
|
|
988
|
+
}
|
|
989
|
+
};
|
|
990
|
+
return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
|
|
991
|
+
isOpen: isOpen,
|
|
992
|
+
getItemProps: getItemProps,
|
|
993
|
+
getItemEvents: getItemEvents,
|
|
994
|
+
highlightedIndex: highlightedIndex
|
|
995
|
+
}), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
|
|
996
|
+
"class": suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
|
|
997
|
+
}, [_this9.normalizedSuggestions.map(function (item, index) {
|
|
998
|
+
return renderItem ? h("li", {
|
|
999
|
+
"domProps": _extends({}, getItemProps({
|
|
1012
1000
|
item: item
|
|
1013
|
-
}),
|
|
1001
|
+
})),
|
|
1002
|
+
"on": _extends({}, getItemEvents({
|
|
1014
1003
|
item: item
|
|
1015
|
-
}),
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1004
|
+
})),
|
|
1005
|
+
"key": index + 1 + "-" + item.value,
|
|
1006
|
+
"style": {
|
|
1007
|
+
backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
|
|
1008
|
+
justifyContent: 'flex-start',
|
|
1009
|
+
alignItems: 'center'
|
|
1010
|
+
}
|
|
1011
|
+
}, [renderItem(item)]) : h("li", {
|
|
1012
|
+
"domProps": _extends({}, getItemProps({
|
|
1023
1013
|
item: item
|
|
1024
|
-
}),
|
|
1014
|
+
})),
|
|
1015
|
+
"on": _extends({}, getItemEvents({
|
|
1025
1016
|
item: item
|
|
1026
|
-
})),
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1017
|
+
})),
|
|
1018
|
+
"key": index + 1 + "-" + item.value,
|
|
1019
|
+
"style": {
|
|
1020
|
+
backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
|
|
1021
|
+
justifyContent: 'flex-start',
|
|
1022
|
+
alignItems: 'center'
|
|
1023
|
+
}
|
|
1024
|
+
}, [h("div", {
|
|
1025
|
+
"style": {
|
|
1026
|
+
padding: '0 10px 0 0',
|
|
1027
|
+
display: 'flex'
|
|
1028
|
+
}
|
|
1029
|
+
}, [h(CustomSvg, {
|
|
1030
|
+
"attrs": {
|
|
1031
|
+
"className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
|
|
1040
1032
|
"icon": getIcon(item._suggestion_type),
|
|
1041
1033
|
"type": item._suggestion_type + "-search-icon"
|
|
1042
|
-
}
|
|
1043
|
-
|
|
1034
|
+
}
|
|
1035
|
+
})]), h(SuggestionItem, {
|
|
1036
|
+
"attrs": {
|
|
1037
|
+
"currentValue": _this9.currentValue,
|
|
1044
1038
|
"suggestion": item
|
|
1045
|
-
}
|
|
1046
|
-
})
|
|
1047
|
-
};
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
}, getInputProps({
|
|
1084
|
-
value: _this11.$data.currentValue === null ? '' : _this11.$data.currentValue
|
|
1085
|
-
}), {
|
|
1086
|
-
"themePreset": _this11.themePreset,
|
|
1087
|
-
"autocomplete": "off"
|
|
1088
|
-
}), null), _this11.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
|
|
1089
|
-
}
|
|
1090
|
-
}), _this11.renderInputAddonAfter(), _this11.renderEnterButtonElement()];
|
|
1091
|
-
}
|
|
1092
|
-
}), expandSuggestionsContainer && renderSuggestionsDropdown(), _this11.renderTags()]);
|
|
1093
|
-
}
|
|
1094
|
-
}) : createVNode("div", {
|
|
1095
|
-
"class": suggestionsContainer
|
|
1096
|
-
}, [createVNode(InputGroup, null, {
|
|
1097
|
-
"default": function _default() {
|
|
1098
|
-
return [_this11.renderInputAddonBefore(), createVNode(InputWrapper, null, {
|
|
1099
|
-
"default": function _default() {
|
|
1100
|
-
return [createVNode(Input, mergeProps(_transformOn({
|
|
1101
|
-
blur: function blur(e) {
|
|
1102
|
-
_this11.$emit('blur', e, _this11.triggerQuery);
|
|
1103
|
-
},
|
|
1104
|
-
keypress: function keypress(e) {
|
|
1105
|
-
_this11.$emit('keyPress', e, _this11.triggerQuery);
|
|
1106
|
-
_this11.$emit('key-press', e, _this11.triggerQuery);
|
|
1107
|
-
},
|
|
1108
|
-
input: _this11.onInputChange,
|
|
1109
|
-
focus: function focus(e) {
|
|
1110
|
-
_this11.$emit('focus', e, _this11.triggerQuery);
|
|
1111
|
-
},
|
|
1112
|
-
keydown: _this11.handleKeyDown,
|
|
1113
|
-
keyup: function keyup(e) {
|
|
1114
|
-
_this11.$emit('keyUp', e, _this11.triggerQuery);
|
|
1115
|
-
_this11.$emit('key-up', e, _this11.triggerQuery);
|
|
1116
|
-
}
|
|
1117
|
-
}), {
|
|
1118
|
-
"class": getClassName(_this11.$props.innerClass, 'input') || '',
|
|
1119
|
-
"placeholder": _this11.$props.placeholder,
|
|
1120
|
-
"autofocus": _this11.$props.autoFocus,
|
|
1121
|
-
"value": _this11.$data.currentValue ? _this11.$data.currentValue : '',
|
|
1122
|
-
"iconPosition": _this11.$props.iconPosition,
|
|
1123
|
-
"showIcon": _this11.$props.showIcon,
|
|
1124
|
-
"showClear": _this11.$props.showClear,
|
|
1125
|
-
"ref": _this11.$props.innerRef,
|
|
1126
|
-
"themePreset": _this11.themePreset
|
|
1127
|
-
}), null), _this11.renderIcons()];
|
|
1039
|
+
}
|
|
1040
|
+
}), _this9.renderAutoFill(item)]);
|
|
1041
|
+
})]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
|
|
1042
|
+
};
|
|
1043
|
+
return h("div", {
|
|
1044
|
+
"class": suggestionsContainer
|
|
1045
|
+
}, [h(InputGroup, [_this9.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
|
|
1046
|
+
"attrs": {
|
|
1047
|
+
"id": _this9.$props.componentId + "-input",
|
|
1048
|
+
"showIcon": _this9.$props.showIcon,
|
|
1049
|
+
"showClear": _this9.$props.showClear,
|
|
1050
|
+
"iconPosition": _this9.$props.iconPosition,
|
|
1051
|
+
"placeholder": _this9.$props.placeholder,
|
|
1052
|
+
"autoFocus": _this9.$props.autoFocus,
|
|
1053
|
+
"themePreset": _this9.themePreset,
|
|
1054
|
+
"autocomplete": "off"
|
|
1055
|
+
},
|
|
1056
|
+
"ref": _this9.$props.innerRef,
|
|
1057
|
+
"class": getClassName(_this9.$props.innerClass, 'input'),
|
|
1058
|
+
"on": _extends({}, getInputEvents({
|
|
1059
|
+
onInput: _this9.onInputChange,
|
|
1060
|
+
onBlur: function onBlur(e) {
|
|
1061
|
+
_this9.$emit('blur', e, _this9.triggerQuery);
|
|
1062
|
+
},
|
|
1063
|
+
onFocus: _this9.handleFocus,
|
|
1064
|
+
onKeyPress: function onKeyPress(e) {
|
|
1065
|
+
_this9.$emit('keyPress', e, _this9.triggerQuery);
|
|
1066
|
+
_this9.$emit('key-press', e, _this9.triggerQuery);
|
|
1067
|
+
},
|
|
1068
|
+
onKeyDown: function onKeyDown(e) {
|
|
1069
|
+
return _this9.handleKeyDown(e, highlightedIndex);
|
|
1070
|
+
},
|
|
1071
|
+
onKeyUp: function onKeyUp(e) {
|
|
1072
|
+
_this9.$emit('keyUp', e, _this9.triggerQuery);
|
|
1073
|
+
_this9.$emit('key-up', e, _this9.triggerQuery);
|
|
1074
|
+
},
|
|
1075
|
+
onClick: function onClick() {
|
|
1076
|
+
setHighlightedIndex(null);
|
|
1128
1077
|
}
|
|
1129
|
-
})
|
|
1130
|
-
|
|
1131
|
-
|
|
1078
|
+
})),
|
|
1079
|
+
"domProps": _extends({}, getInputProps({
|
|
1080
|
+
value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
|
|
1081
|
+
}))
|
|
1082
|
+
}), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
|
|
1083
|
+
}
|
|
1132
1084
|
}
|
|
1133
|
-
})
|
|
1085
|
+
}) : h("div", {
|
|
1086
|
+
"class": suggestionsContainer
|
|
1087
|
+
}, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
|
|
1088
|
+
"class": getClassName(this.$props.innerClass, 'input') || '',
|
|
1089
|
+
"attrs": {
|
|
1090
|
+
"placeholder": this.$props.placeholder,
|
|
1091
|
+
"iconPosition": this.$props.iconPosition,
|
|
1092
|
+
"showIcon": this.$props.showIcon,
|
|
1093
|
+
"showClear": this.$props.showClear,
|
|
1094
|
+
"themePreset": this.themePreset
|
|
1095
|
+
},
|
|
1096
|
+
"on": _extends({}, {
|
|
1097
|
+
blur: function blur(e) {
|
|
1098
|
+
_this9.$emit('blur', e, _this9.triggerQuery);
|
|
1099
|
+
},
|
|
1100
|
+
keypress: function keypress(e) {
|
|
1101
|
+
_this9.$emit('keyPress', e, _this9.triggerQuery);
|
|
1102
|
+
_this9.$emit('key-press', e, _this9.triggerQuery);
|
|
1103
|
+
},
|
|
1104
|
+
input: this.onInputChange,
|
|
1105
|
+
focus: function focus(e) {
|
|
1106
|
+
_this9.$emit('focus', e, _this9.triggerQuery);
|
|
1107
|
+
},
|
|
1108
|
+
keydown: this.handleKeyDown,
|
|
1109
|
+
keyup: function keyup(e) {
|
|
1110
|
+
_this9.$emit('keyUp', e, _this9.triggerQuery);
|
|
1111
|
+
_this9.$emit('key-up', e, _this9.triggerQuery);
|
|
1112
|
+
}
|
|
1113
|
+
}),
|
|
1114
|
+
"domProps": _extends({}, {
|
|
1115
|
+
autofocus: this.$props.autoFocus,
|
|
1116
|
+
value: this.$data.currentValue ? this.$data.currentValue : ''
|
|
1117
|
+
}),
|
|
1118
|
+
"ref": this.$props.innerRef
|
|
1119
|
+
}), this.renderIcons()]), this.renderInputAddonAfter(), this.renderEnterButtonElement()])])]);
|
|
1134
1120
|
},
|
|
1135
1121
|
destroyed: function destroyed() {
|
|
1136
1122
|
document.removeEventListener('keydown', this.onKeyDown);
|
|
1137
1123
|
}
|
|
1138
|
-
}
|
|
1124
|
+
};
|
|
1125
|
+
SearchBox.hasInternalComponent = function () {
|
|
1126
|
+
return true;
|
|
1127
|
+
};
|
|
1139
1128
|
SearchBox.defaultQuery = function (value, props) {
|
|
1140
1129
|
var finalQuery = null;
|
|
1141
1130
|
var fields = normalizeDataField(props.dataField, props.fieldWeights);
|
|
@@ -1259,309 +1248,23 @@ var SBConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps,
|
|
|
1259
1248
|
internalComponent: true
|
|
1260
1249
|
}));
|
|
1261
1250
|
SBConnected.name = SearchBox.name;
|
|
1251
|
+
SBConnected.defaultQuery = SearchBox.defaultQuery;
|
|
1252
|
+
SBConnected.shouldQuery = SearchBox.shouldQuery;
|
|
1253
|
+
SBConnected.hasInternalComponent = SearchBox.hasInternalComponent;
|
|
1262
1254
|
SBConnected.install = function (Vue) {
|
|
1263
1255
|
Vue.component(SBConnected.name, SBConnected);
|
|
1264
1256
|
};
|
|
1265
1257
|
// Add componentType for SSR
|
|
1266
1258
|
SBConnected.componentType = componentTypes.searchBox;
|
|
1267
1259
|
|
|
1268
|
-
var _excluded = ["options"];
|
|
1269
|
-
var updateQuery$1 = Actions.updateQuery,
|
|
1270
|
-
setQueryOptions = Actions.setQueryOptions,
|
|
1271
|
-
setCustomQuery$1 = Actions.setCustomQuery,
|
|
1272
|
-
setDefaultQuery$1 = Actions.setDefaultQuery;
|
|
1273
|
-
var parseHits = helper.parseHits,
|
|
1274
|
-
isEqual$1 = helper.isEqual,
|
|
1275
|
-
getCompositeAggsQuery$1 = helper.getCompositeAggsQuery,
|
|
1276
|
-
getResultStats$1 = helper.getResultStats,
|
|
1277
|
-
extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
|
|
1278
|
-
getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
|
|
1279
|
-
var ReactiveComponent = {
|
|
1280
|
-
name: 'ReactiveComponent',
|
|
1281
|
-
props: {
|
|
1282
|
-
componentId: types.stringRequired,
|
|
1283
|
-
aggregationField: types.string,
|
|
1284
|
-
aggregationSize: VueTypes.number,
|
|
1285
|
-
size: VueTypes.number,
|
|
1286
|
-
defaultQuery: types.func,
|
|
1287
|
-
customQuery: types.func,
|
|
1288
|
-
filterLabel: types.string,
|
|
1289
|
-
react: types.react,
|
|
1290
|
-
showFilter: VueTypes.bool.def(true),
|
|
1291
|
-
URLParams: VueTypes.bool.def(false),
|
|
1292
|
-
distinctField: types.string,
|
|
1293
|
-
distinctFieldConfig: types.props,
|
|
1294
|
-
index: VueTypes.string,
|
|
1295
|
-
endpoint: types.endpointConfig
|
|
1296
|
-
},
|
|
1297
|
-
created: function created() {
|
|
1298
|
-
var _this = this;
|
|
1299
|
-
var props = this.$props;
|
|
1300
|
-
this.internalComponent = null;
|
|
1301
|
-
this.$defaultQuery = null;
|
|
1302
|
-
// Set custom query in store
|
|
1303
|
-
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
|
|
1304
|
-
var customQuery = props.customQuery,
|
|
1305
|
-
componentId = props.componentId,
|
|
1306
|
-
filterLabel = props.filterLabel,
|
|
1307
|
-
showFilter = props.showFilter,
|
|
1308
|
-
URLParams = props.URLParams,
|
|
1309
|
-
distinctField = props.distinctField,
|
|
1310
|
-
distinctFieldConfig = props.distinctFieldConfig,
|
|
1311
|
-
index = props.index;
|
|
1312
|
-
if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
|
|
1313
|
-
console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
|
|
1314
|
-
}
|
|
1315
|
-
if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
|
|
1316
|
-
console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
|
|
1317
|
-
}
|
|
1318
|
-
if (!this.enableAppbase && index) {
|
|
1319
|
-
console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
|
|
1320
|
-
}
|
|
1321
|
-
if (customQuery) {
|
|
1322
|
-
var calcCustomQuery = customQuery(this.selectedValue, props);
|
|
1323
|
-
var query = extractQueryFromCustomQuery(calcCustomQuery);
|
|
1324
|
-
var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery(calcCustomQuery) : null;
|
|
1325
|
-
if (customQueryOptions) {
|
|
1326
|
-
this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
|
|
1327
|
-
} else this.setQueryOptions(componentId, this.getAggsQuery(), false);
|
|
1328
|
-
this.updateQuery({
|
|
1329
|
-
componentId: componentId,
|
|
1330
|
-
query: query,
|
|
1331
|
-
value: this.selectedValue || null,
|
|
1332
|
-
label: filterLabel,
|
|
1333
|
-
showFilter: showFilter,
|
|
1334
|
-
URLParams: URLParams
|
|
1335
|
-
});
|
|
1336
|
-
}
|
|
1337
|
-
this.setQuery = function (_ref) {
|
|
1338
|
-
var options = _ref.options,
|
|
1339
|
-
obj = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
1340
|
-
var queryToBeSet = obj.query;
|
|
1341
|
-
|
|
1342
|
-
// when enableAppbase is true, Backend throws error because of repeated query in request body
|
|
1343
|
-
if (queryToBeSet && queryToBeSet.query) {
|
|
1344
|
-
queryToBeSet = queryToBeSet.query;
|
|
1345
|
-
}
|
|
1346
|
-
var customQueryCalc = _extends({}, options, {
|
|
1347
|
-
query: queryToBeSet
|
|
1348
|
-
});
|
|
1349
|
-
var rsAPIQuery = customQueryCalc;
|
|
1350
|
-
// handle stored queries
|
|
1351
|
-
if (queryToBeSet && queryToBeSet.id) {
|
|
1352
|
-
rsAPIQuery = queryToBeSet;
|
|
1353
|
-
}
|
|
1354
|
-
// Update customQuery field for RS API
|
|
1355
|
-
_this.setCustomQuery(props.componentId, rsAPIQuery);
|
|
1356
|
-
if (options) {
|
|
1357
|
-
_this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
|
|
1358
|
-
}
|
|
1359
|
-
_this.updateQuery(_extends({}, obj, {
|
|
1360
|
-
query: customQueryCalc.query,
|
|
1361
|
-
componentId: props.componentId,
|
|
1362
|
-
label: props.filterLabel,
|
|
1363
|
-
showFilter: props.showFilter,
|
|
1364
|
-
URLParams: props.URLParams
|
|
1365
|
-
}));
|
|
1366
|
-
};
|
|
1367
|
-
if (props.defaultQuery) {
|
|
1368
|
-
this.internalComponent = props.componentId + "__internal";
|
|
1369
|
-
}
|
|
1370
|
-
if (this.internalComponent && this.$props.defaultQuery) {
|
|
1371
|
-
updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
|
|
1372
|
-
this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
|
|
1373
|
-
var _query = extractQueryFromCustomQuery(this.$defaultQuery);
|
|
1374
|
-
var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
|
|
1375
|
-
if (queryOptions) {
|
|
1376
|
-
this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
|
|
1377
|
-
} else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
|
|
1378
|
-
this.updateQuery({
|
|
1379
|
-
componentId: this.internalComponent,
|
|
1380
|
-
query: _query
|
|
1381
|
-
});
|
|
1382
|
-
}
|
|
1383
|
-
},
|
|
1384
|
-
watch: {
|
|
1385
|
-
hits: function hits(newVal, oldVal) {
|
|
1386
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1387
|
-
this.$emit('data', this.getData());
|
|
1388
|
-
}
|
|
1389
|
-
},
|
|
1390
|
-
rawData: function rawData(newVal, oldVal) {
|
|
1391
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1392
|
-
this.$emit('data', this.getData());
|
|
1393
|
-
}
|
|
1394
|
-
},
|
|
1395
|
-
aggregations: function aggregations(newVal, oldVal) {
|
|
1396
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1397
|
-
this.$emit('data', this.getData());
|
|
1398
|
-
}
|
|
1399
|
-
},
|
|
1400
|
-
aggregationData: function aggregationData(newVal, oldVal) {
|
|
1401
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1402
|
-
this.$emit('data', this.getData());
|
|
1403
|
-
}
|
|
1404
|
-
},
|
|
1405
|
-
promotedResults: function promotedResults(newVal, oldVal) {
|
|
1406
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1407
|
-
this.$emit('data', this.getData());
|
|
1408
|
-
}
|
|
1409
|
-
},
|
|
1410
|
-
hidden: function hidden(newVal, oldVal) {
|
|
1411
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1412
|
-
this.$emit('data', this.getData());
|
|
1413
|
-
}
|
|
1414
|
-
},
|
|
1415
|
-
total: function total(newVal, oldVal) {
|
|
1416
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1417
|
-
this.$emit('data', this.getData());
|
|
1418
|
-
}
|
|
1419
|
-
},
|
|
1420
|
-
time: function time(newVal, oldVal) {
|
|
1421
|
-
if (!isEqual$1(newVal, oldVal)) {
|
|
1422
|
-
this.$emit('data', this.getData());
|
|
1423
|
-
}
|
|
1424
|
-
},
|
|
1425
|
-
defaultQuery: function defaultQuery(newVal, oldVal) {
|
|
1426
|
-
if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
|
|
1427
|
-
this.$defaultQuery = newVal(this.selectedValue, this.$props);
|
|
1428
|
-
var query = extractQueryFromCustomQuery(this.$defaultQuery);
|
|
1429
|
-
var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
|
|
1430
|
-
if (queryOptions) {
|
|
1431
|
-
this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
|
|
1432
|
-
} else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
|
|
1433
|
-
// Update default query for RS API
|
|
1434
|
-
updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
|
|
1435
|
-
this.updateQuery({
|
|
1436
|
-
componentId: this.internalComponent,
|
|
1437
|
-
query: query
|
|
1438
|
-
});
|
|
1439
|
-
}
|
|
1440
|
-
},
|
|
1441
|
-
customQuery: function customQuery(newVal, oldVal) {
|
|
1442
|
-
if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
|
|
1443
|
-
var componentId = this.$props.componentId;
|
|
1444
|
-
this.$customQuery = newVal(this.selectedValue, this.$props);
|
|
1445
|
-
var query = extractQueryFromCustomQuery(this.$customQuery);
|
|
1446
|
-
var queryOptions = getOptionsForCustomQuery(this.$customQuery);
|
|
1447
|
-
if (queryOptions) {
|
|
1448
|
-
this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
|
|
1449
|
-
} else this.setQueryOptions(componentId, this.getAggsQuery(), false);
|
|
1450
|
-
|
|
1451
|
-
// Update custom query for RS API
|
|
1452
|
-
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
|
|
1453
|
-
this.updateQuery({
|
|
1454
|
-
componentId: componentId,
|
|
1455
|
-
query: query
|
|
1456
|
-
});
|
|
1457
|
-
}
|
|
1458
|
-
}
|
|
1459
|
-
},
|
|
1460
|
-
render: function render() {
|
|
1461
|
-
try {
|
|
1462
|
-
var dom = this.$slots["default"];
|
|
1463
|
-
var error = this.error,
|
|
1464
|
-
isLoading = this.isLoading,
|
|
1465
|
-
selectedValue = this.selectedValue;
|
|
1466
|
-
var propsToBePassed = _extends({
|
|
1467
|
-
error: error,
|
|
1468
|
-
loading: isLoading
|
|
1469
|
-
}, this.getData(), {
|
|
1470
|
-
value: selectedValue,
|
|
1471
|
-
setQuery: this.setQuery
|
|
1472
|
-
});
|
|
1473
|
-
return createVNode("div", null, [dom(propsToBePassed)]);
|
|
1474
|
-
} catch (e) {
|
|
1475
|
-
return null;
|
|
1476
|
-
}
|
|
1477
|
-
},
|
|
1478
|
-
methods: {
|
|
1479
|
-
getAggsQuery: function getAggsQuery() {
|
|
1480
|
-
if (this.aggregationField) {
|
|
1481
|
-
return {
|
|
1482
|
-
aggs: getCompositeAggsQuery$1({
|
|
1483
|
-
props: this.$props,
|
|
1484
|
-
showTopHits: true,
|
|
1485
|
-
value: this.selectedValue
|
|
1486
|
-
}).aggs
|
|
1487
|
-
};
|
|
1488
|
-
}
|
|
1489
|
-
return {};
|
|
1490
|
-
},
|
|
1491
|
-
getData: function getData() {
|
|
1492
|
-
var hits = this.hits,
|
|
1493
|
-
aggregations = this.aggregations,
|
|
1494
|
-
aggregationData = this.aggregationData,
|
|
1495
|
-
promotedResults = this.promotedResults,
|
|
1496
|
-
rawData = this.rawData;
|
|
1497
|
-
var filteredResults = parseHits(hits);
|
|
1498
|
-
if (promotedResults.length) {
|
|
1499
|
-
var ids = promotedResults.map(function (item) {
|
|
1500
|
-
return item._id;
|
|
1501
|
-
}).filter(Boolean);
|
|
1502
|
-
if (ids) {
|
|
1503
|
-
filteredResults = filteredResults.filter(function (item) {
|
|
1504
|
-
return !ids.includes(item._id);
|
|
1505
|
-
});
|
|
1506
|
-
}
|
|
1507
|
-
filteredResults = [].concat(promotedResults, filteredResults);
|
|
1508
|
-
}
|
|
1509
|
-
return {
|
|
1510
|
-
data: filteredResults,
|
|
1511
|
-
aggregationData: aggregationData,
|
|
1512
|
-
rawData: rawData,
|
|
1513
|
-
aggregations: aggregations,
|
|
1514
|
-
promotedData: promotedResults,
|
|
1515
|
-
resultStats: this.stats
|
|
1516
|
-
};
|
|
1517
|
-
}
|
|
1518
|
-
},
|
|
1519
|
-
computed: {
|
|
1520
|
-
stats: function stats() {
|
|
1521
|
-
return getResultStats$1(this);
|
|
1522
|
-
}
|
|
1523
|
-
}
|
|
1524
|
-
};
|
|
1525
|
-
ReactiveComponent.hasInternalComponent = function (props) {
|
|
1526
|
-
return !!props.defaultQuery;
|
|
1527
|
-
};
|
|
1528
|
-
var mapStateToProps$1 = function mapStateToProps(state, props) {
|
|
1529
|
-
return {
|
|
1530
|
-
aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
|
|
1531
|
-
aggregationData: state.compositeAggregations[props.componentId] || [],
|
|
1532
|
-
hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
|
|
1533
|
-
rawData: state.rawData[props.componentId],
|
|
1534
|
-
error: state.error[props.componentId],
|
|
1535
|
-
isLoading: state.isLoading[props.componentId],
|
|
1536
|
-
selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
|
|
1537
|
-
promotedResults: state.promotedResults[props.componentId] || [],
|
|
1538
|
-
time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
|
|
1539
|
-
total: state.hits[props.componentId] && state.hits[props.componentId].total,
|
|
1540
|
-
hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
|
|
1541
|
-
componentProps: state.props[props.componentId],
|
|
1542
|
-
enableAppbase: state.config.enableAppbase
|
|
1543
|
-
};
|
|
1544
|
-
};
|
|
1545
|
-
var mapDispatchtoProps = {
|
|
1546
|
-
setQueryOptions: setQueryOptions,
|
|
1547
|
-
updateQuery: updateQuery$1,
|
|
1548
|
-
setCustomQuery: setCustomQuery$1,
|
|
1549
|
-
setDefaultQuery: setDefaultQuery$1
|
|
1550
|
-
};
|
|
1551
|
-
var ConnectedComponent = ComponentWrapper(connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveComponent), {
|
|
1552
|
-
componentType: componentTypes.reactiveComponent
|
|
1553
|
-
});
|
|
1554
1260
|
var RcConnected = PreferencesConsumer({
|
|
1555
1261
|
name: 'RcConnected',
|
|
1556
|
-
render: function render() {
|
|
1557
|
-
var component =
|
|
1262
|
+
render: function render(h) {
|
|
1263
|
+
var component = ReactiveComponent;
|
|
1558
1264
|
switch (this.$attrs.componentType) {
|
|
1559
1265
|
case componentTypes.reactiveList:
|
|
1560
1266
|
component = RLConnected;
|
|
1561
1267
|
break;
|
|
1562
|
-
case componentTypes.dataSearch:
|
|
1563
|
-
component = DSConnected;
|
|
1564
|
-
break;
|
|
1565
1268
|
case componentTypes.searchBox:
|
|
1566
1269
|
component = SBConnected;
|
|
1567
1270
|
break;
|
|
@@ -1601,18 +1304,18 @@ var RcConnected = PreferencesConsumer({
|
|
|
1601
1304
|
}
|
|
1602
1305
|
return h(component, {
|
|
1603
1306
|
attrs: this.$attrs,
|
|
1604
|
-
on: this.$
|
|
1605
|
-
scopedSlots: this.$
|
|
1307
|
+
on: this.$listeners,
|
|
1308
|
+
scopedSlots: this.$scopedSlots,
|
|
1606
1309
|
slots: this.$slots
|
|
1607
1310
|
});
|
|
1608
1311
|
}
|
|
1609
1312
|
});
|
|
1610
|
-
RcConnected.name =
|
|
1313
|
+
RcConnected.name = 'ReactiveComponentPrivate';
|
|
1314
|
+
RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
|
|
1315
|
+
// Add componentType for SSR
|
|
1316
|
+
RcConnected.componentType = componentTypes.reactiveComponent;
|
|
1611
1317
|
RcConnected.install = function (Vue) {
|
|
1612
1318
|
Vue.component(RcConnected.name, RcConnected);
|
|
1613
1319
|
};
|
|
1614
1320
|
|
|
1615
|
-
// Add componentType for SSR
|
|
1616
|
-
RcConnected.componentType = componentTypes.reactiveComponent;
|
|
1617
|
-
|
|
1618
1321
|
export { RcConnected as R, SBConnected as S };
|