@appbaseio/reactivesearch-vue 3.0.0-rc.5.alpha.4 → 3.0.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/@appbaseio/reactivesearch-vue.umd.js +39803 -35283
  2. package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
  3. package/dist/@appbaseio/reactivesearch-vue.umd.min.js +32 -32
  4. package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
  5. package/dist/cjs/{Button-d4da7470.js → Button-9e179864.js} +13 -6
  6. package/dist/cjs/{ComponentWrapper-9146d811.js → ComponentWrapper-0b9ffb1a.js} +3 -0
  7. package/dist/cjs/DropDown-aef75c14.js +702 -0
  8. package/dist/cjs/DynamicRangeSlider.js +1 -1
  9. package/dist/cjs/{Input-497be42a.js → Input-56eba499.js} +71 -1
  10. package/dist/cjs/MultiDropdownList.js +6 -6
  11. package/dist/cjs/MultiList.js +3 -3
  12. package/dist/cjs/MultiRange.js +2 -2
  13. package/dist/cjs/{Pagination-b953a80a.js → Pagination-58a0cf3f.js} +2 -2
  14. package/dist/cjs/RangeInput.js +3 -3
  15. package/dist/cjs/RangeSlider.js +2 -2
  16. package/dist/cjs/ReactiveBase.js +4 -4
  17. package/dist/cjs/ReactiveComponent.js +2 -2
  18. package/dist/cjs/ReactiveGoogleMap.js +6 -5
  19. package/dist/cjs/ReactiveList.js +4 -4
  20. package/dist/cjs/ResultCard.js +1 -1
  21. package/dist/cjs/ResultList.js +1 -1
  22. package/dist/cjs/SelectedFilters.js +3 -2
  23. package/dist/cjs/SingleDropdownList.js +6 -6
  24. package/dist/cjs/SingleList.js +3 -3
  25. package/dist/cjs/SingleRange.js +2 -2
  26. package/dist/cjs/ToggleButton.js +4 -3
  27. package/dist/cjs/index.js +14 -13
  28. package/dist/cjs/install-70991c13.js +3820 -0
  29. package/dist/cjs/install.js +9 -9
  30. package/dist/cjs/version.js +1 -1
  31. package/dist/cjs/{vueTypes-1bf00978.js → vueTypes-a5f1745e.js} +18 -0
  32. package/dist/es/{Button-fd869491.js → Button-c2ff5178.js} +13 -6
  33. package/dist/es/{ComponentWrapper-8a3c388d.js → ComponentWrapper-a2635cfc.js} +3 -0
  34. package/dist/es/DropDown-39fedff8.js +693 -0
  35. package/dist/es/DynamicRangeSlider.js +1 -1
  36. package/dist/es/{Input-f7499ef8.js → Input-11d211d2.js} +71 -2
  37. package/dist/es/MultiDropdownList.js +6 -6
  38. package/dist/es/MultiList.js +3 -3
  39. package/dist/es/MultiRange.js +2 -2
  40. package/dist/es/{Pagination-c2745bec.js → Pagination-ae401c33.js} +2 -2
  41. package/dist/es/RangeInput.js +3 -3
  42. package/dist/es/RangeSlider.js +2 -2
  43. package/dist/es/ReactiveBase.js +4 -4
  44. package/dist/es/ReactiveComponent.js +2 -2
  45. package/dist/es/ReactiveGoogleMap.js +6 -5
  46. package/dist/es/ReactiveList.js +4 -4
  47. package/dist/es/ResultCard.js +1 -1
  48. package/dist/es/ResultList.js +1 -1
  49. package/dist/es/SelectedFilters.js +3 -2
  50. package/dist/es/SingleDropdownList.js +6 -6
  51. package/dist/es/SingleList.js +3 -3
  52. package/dist/es/SingleRange.js +2 -2
  53. package/dist/es/ToggleButton.js +4 -3
  54. package/dist/es/index.js +11 -11
  55. package/dist/es/install-8296e8da.js +3812 -0
  56. package/dist/es/install.js +9 -9
  57. package/dist/es/version.js +1 -1
  58. package/dist/es/{vueTypes-f1923c72.js → vueTypes-09cab4d3.js} +18 -0
  59. package/package.json +7 -5
  60. package/dist/cjs/CancelSvg-ab0f8b23.js +0 -409
  61. package/dist/cjs/DropDown-e7125b72.js +0 -299
  62. package/dist/cjs/SearchBox.js +0 -1853
  63. package/dist/cjs/install-3c4520bf.js +0 -874
  64. package/dist/es/CancelSvg-e7ae49e9.js +0 -401
  65. package/dist/es/DropDown-13afb4d2.js +0 -295
  66. package/dist/es/SearchBox.js +0 -1847
  67. package/dist/es/install-ff8b0750.js +0 -868
@@ -1,868 +0,0 @@
1
- import { Actions } from '@appbaseio/reactivecore';
2
- import { TREELIST_VALUES_PATH_SEPARATOR, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
3
- import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
4
- import { createVNode, createTextVNode, mergeProps, isVNode, h } from 'vue';
5
- import VueTypes from 'vue-types';
6
- import { recLookup, getClassName, updateCustomQuery, updateDefaultQuery, transformTreeListLocalStateIntoQueryComptaibleFormat, isEqual, transformRawTreeListData, setDeep, getComponent, getOptionsFromQuery, checkValueChange, getQueryOptions, getAggsQuery, updateInternalQuery, isFunction } from '@appbaseio/reactivecore/lib/utils/helper';
7
- import { styled } from '@appbaseio/vue-emotion';
8
- import { t as types$1 } from './vueTypes-f1923c72.js';
9
- import { RLConnected as ReactiveList } from './ReactiveList.js';
10
- import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
11
- import { h as hasCustomRenderer, c as connect } from './index-882489e1.js';
12
- import { C as ComponentWrapper } from './ComponentWrapper-8a3c388d.js';
13
- import { P as PreferencesConsumer } from './PreferencesConsumer-b058d14e.js';
14
- import { T as Title } from './Title-863dfa42.js';
15
- import { L as ListItem } from './ListItem-e3c6acf4.js';
16
- import { F as Flex } from './Flex-25792bc3.js';
17
- import ReactiveBase from './ReactiveBase.js';
18
- import { SBConnected as SearchBox } from './SearchBox.js';
19
- import { I as Input } from './Input-f7499ef8.js';
20
- import { C as Container } from './Container-d00219f7.js';
21
- import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
22
- import { C as Checkbox, R as Radio } from './FormControlList-fe6eaee4.js';
23
- import { s as sanitizeObject } from './utils-d7dd4f4e.js';
24
- import { ListConnected as SingleList } from './SingleList.js';
25
- import { ListConnected as MultiList } from './MultiList.js';
26
- import types from '@appbaseio/reactivecore/lib/utils/types';
27
- import { ListConnected as SingleDropdownList } from './SingleDropdownList.js';
28
- import { ListConnected as MultiDropdownList } from './MultiDropdownList.js';
29
- import { TBConnected as ToggleButton } from './ToggleButton.js';
30
- import ReactiveComponent from './ReactiveComponent.js';
31
- import { RangeConnected as DynamicRangeSlider } from './DynamicRangeSlider.js';
32
- import { RangeConnected as SingleRange } from './SingleRange.js';
33
- import { RangeConnected as MultiRange } from './MultiRange.js';
34
- import { RangeConnected as RangeSlider } from './RangeSlider.js';
35
- import { RangeConnected as RangeInput } from './RangeInput.js';
36
- import SelectedFilters from './SelectedFilters.js';
37
- import ResultCard from './ResultCard.js';
38
- import ResultList from './ResultList.js';
39
- import StateProvider from './StateProvider.js';
40
-
41
- var _templateObject, _templateObject2;
42
- var HierarchicalMenuList = styled('ul')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
43
- var HierarchicalMenuListItem = styled('li')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
44
- return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
45
- });
46
-
47
- var HierarchicalMenuListItemComponent = {
48
- name: 'HierarchicalMenuListItemComponent',
49
- data: function data() {
50
- return {
51
- isExpanded: false,
52
- newParentPath: ''
53
- };
54
- },
55
- created: function created() {
56
- var listItemLabel = this.listItem.key;
57
- var newParentPath = listItemLabel;
58
- if (this.parentPath) {
59
- newParentPath = "" + this.parentPath + TREELIST_VALUES_PATH_SEPARATOR + listItemLabel;
60
- }
61
- this.newParentPath = newParentPath;
62
- this.isExpanded = !!recLookup(this.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
63
- },
64
- watch: {
65
- listItem: function listItem(newVal) {
66
- if (newVal.initiallyExpanded) {
67
- this.isExpanded = newVal.initiallyExpanded;
68
- }
69
- },
70
- selectedValues: function selectedValues(newVal) {
71
- this.isExpanded = !!recLookup(newVal, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
72
- }
73
- },
74
- props: {
75
- parentPath: types.string,
76
- selectedValues: types.rawData,
77
- mode: types.string,
78
- searchTerm: types.string,
79
- listItem: types.rawData,
80
- showLine: types.bool,
81
- renderItem: types.func,
82
- handleListItemClick: types.func,
83
- renderSwitcherIcon: types.func,
84
- showCheckbox: VueTypes.bool,
85
- innerClass: types.style,
86
- showRadio: VueTypes.bool,
87
- renderIcon: types.func,
88
- showCount: VueTypes.bool,
89
- showSwitcherIcon: types.bool,
90
- switcherIcon: types.children
91
- },
92
- render: function render() {
93
- var _this = this;
94
- var _this$$props = this.$props,
95
- selectedValues = _this$$props.selectedValues,
96
- mode = _this$$props.mode,
97
- searchTerm = _this$$props.searchTerm,
98
- listItem = _this$$props.listItem,
99
- parentPath = _this$$props.parentPath,
100
- showLine = _this$$props.showLine,
101
- renderItem = _this$$props.renderItem,
102
- handleListItemClick = _this$$props.handleListItemClick,
103
- showCheckbox = _this$$props.showCheckbox,
104
- innerClass = _this$$props.innerClass,
105
- showRadio = _this$$props.showRadio,
106
- renderIcon = _this$$props.renderIcon,
107
- showCount = _this$$props.showCount,
108
- showSwitcherIcon = _this$$props.showSwitcherIcon;
109
- if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
110
- return null;
111
- }
112
- var listItemLabel = listItem.key;
113
- var listItemCount = listItem.count;
114
- var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
115
- var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
116
- if (showSwitcherIcon === false) {
117
- return null;
118
- }
119
- var switcherIcon = _this.$props.switcherIcon;
120
- if (switcherIcon) return switcherIcon(isExpandedProp);
121
- return (
122
- /* eslint-disable jsx-a11y/click-events-have-key-events
123
- , jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
124
- createVNode("span", {
125
- "tabIndex": "0",
126
- "onClick": function onClick(e) {
127
- e.stopPropagation();
128
- _this.isExpanded = !_this.isExpanded;
129
- },
130
- "class": "--switcher-icon"
131
- }, [createTextVNode("\u27A4")])
132
- );
133
- };
134
- var isSelected = false;
135
- if (mode === 'single') {
136
- if (recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR) === true) {
137
- isSelected = true;
138
- }
139
- } else {
140
- isSelected = !!recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
141
- }
142
- return createVNode(HierarchicalMenuListItem, {
143
- "class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
144
- "key": this.newParentPath,
145
- "showLine": showLine
146
- }, {
147
- "default": function _default() {
148
- return [createVNode(ListItem, {
149
- "isTreeListItem": true,
150
- "onClick": function onClick() {
151
- handleListItemClick(listItemLabel, parentPath);
152
- },
153
- "style": {
154
- textDecoration: 'none'
155
- }
156
- }, {
157
- "default": function _default() {
158
- return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : createVNode(Flex, {
159
- "alignItems": "center",
160
- "gap": "5px"
161
- }, {
162
- "default": function _default() {
163
- return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && createVNode(Flex, {
164
- "alignItems": "center",
165
- "gap": "5px"
166
- }, {
167
- "default": function _default() {
168
- return [createVNode(Checkbox, {
169
- "type": "checkbox",
170
- "class": getClassName(innerClass, 'checkbox') || null,
171
- "checked": isSelected,
172
- "id": listItemLabel + "-checkbox-" + _this.newParentPath,
173
- "name": listItemLabel + "-checkbox-" + _this.newParentPath,
174
- "show": true,
175
- "readOnly": true
176
- }, null), createVNode("label", {
177
- "style": {
178
- width: '26px',
179
- marginTop: 0,
180
- marginBottom: 0,
181
- marginRight: '-9px',
182
- left: '-3px'
183
- },
184
- "htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
185
- "onClick": function onClick(e) {
186
- e.stopPropagation();
187
- }
188
- }, null)];
189
- }
190
- }), mode === 'single' && showRadio && createVNode(Flex, {
191
- "alignItems": "center",
192
- "gap": "5px"
193
- }, {
194
- "default": function _default() {
195
- return [createVNode(Radio, {
196
- "checked": isSelected,
197
- "class": getClassName(innerClass, 'radio') || null,
198
- "id": listItemLabel + "-radio-" + _this.newParentPath,
199
- "name": listItemLabel + "-radio-" + _this.newParentPath,
200
- "show": true,
201
- "readOnly": true,
202
- "type": "radio"
203
- }, null), createVNode("label", {
204
- "style": {
205
- width: '26px',
206
- marginTop: 0,
207
- marginBottom: 0,
208
- marginRight: '-9px',
209
- left: '-3px'
210
- },
211
- "htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
212
- "onClick": function onClick(e) {
213
- e.stopPropagation();
214
- }
215
- }, null)];
216
- }
217
- }), ' ', renderIcon(isLeafNode), createVNode("div", {
218
- "class": "--list-item-label-count-wrapper"
219
- }, [createVNode("span", {
220
- "class": "--list-item-label " + (getClassName(innerClass, 'label') || '')
221
- }, [listItemLabel]), showCount && createVNode("span", {
222
- "class": "--list-item-count " + (getClassName(innerClass, 'count') || '')
223
- }, [listItemCount])])];
224
- }
225
- })];
226
- }
227
- }), isLeafNode === false && createVNode("div", {
228
- "class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
229
- }, [createVNode(HierarchicalMenuComponent, {
230
- "key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
231
- "listArray": listItem.list,
232
- "parentPath": _this.newParentPath,
233
- "isExpanded": _this.isExpanded,
234
- "listItemProps": {
235
- mode: mode,
236
- selectedValues: selectedValues,
237
- searchTerm: searchTerm,
238
- showLine: showLine,
239
- renderItem: renderItem,
240
- handleListItemClick: handleListItemClick,
241
- renderSwitcherIcon: renderSwitcherIcon,
242
- showCheckbox: showCheckbox,
243
- innerClass: innerClass,
244
- showRadio: showRadio,
245
- renderIcon: renderIcon,
246
- showCount: showCount,
247
- showSwitcherIcon: showSwitcherIcon,
248
- switcherIcon: _this.$props.switcherIcon
249
- }
250
- }, null)])];
251
- }
252
- });
253
- }
254
- };
255
-
256
- function _isSlot(s) {
257
- return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
258
- }
259
- var HierarchicalMenuComponent = {
260
- name: 'HierarchicalMenuComponent',
261
- props: {
262
- listArray: VueTypes.arrayOf(VueTypes.object),
263
- // array of objects
264
- parentPath: VueTypes.string.def(''),
265
- isExpanded: VueTypes.bool.def(false),
266
- listItemProps: types.rawData
267
- },
268
- render: function render() {
269
- var _slot;
270
- var _this$$props = this.$props,
271
- listArray = _this$$props.listArray,
272
- isExpanded = _this$$props.isExpanded,
273
- parentPath = _this$$props.parentPath,
274
- listItemProps = _this$$props.listItemProps;
275
- if (!Array.isArray(listArray) || listArray.length === 0) {
276
- return null;
277
- }
278
- return createVNode(HierarchicalMenuList, {
279
- "class": "" + (isExpanded ? '--open' : ''),
280
- "isSelected": isExpanded
281
- }, _isSlot(_slot = listArray.map(function (listItem) {
282
- return createVNode(HierarchicalMenuListItemComponent, mergeProps({
283
- "key": parentPath + "__" + JSON.stringify(listItem),
284
- "parentPath": parentPath,
285
- "listItem": listItem
286
- }, listItemProps), null);
287
- })) ? _slot : {
288
- "default": function _default() {
289
- return [_slot];
290
- }
291
- });
292
- }
293
- };
294
-
295
- function _isSlot$1(s) {
296
- return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
297
- }
298
- var updateQueryAction = Actions.updateQuery,
299
- setQueryOptions = Actions.setQueryOptions;
300
- var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
301
- var valueToSet = {};
302
- if (valueArray.length) {
303
- var newSelectedValues = {};
304
- valueArray.forEach(function (valueItem) {
305
- setDeep(newSelectedValues, valueItem.split(' > '), !recLookup(newSelectedValues, valueItem.split(' > '), TREELIST_VALUES_PATH_SEPARATOR), true);
306
- });
307
- valueToSet = newSelectedValues;
308
- }
309
- return valueToSet;
310
- };
311
- var TreeList = {
312
- name: 'TreeList',
313
- props: {
314
- selectedValue: types$1.selectedValue,
315
- error: types$1.title,
316
- rawData: types$1.rawData,
317
- aggregationData: types$1.rawData,
318
- themePreset: types$1.themePreset,
319
- updateQueryAction: types$1.funcRequired,
320
- setQueryOptions: types$1.funcRequired,
321
- // component props
322
- componentId: types$1.string.isRequired,
323
- className: types$1.string,
324
- style: types$1.style,
325
- showRadio: VueTypes.bool.def(false),
326
- showCheckbox: types$1.bool.def(false),
327
- mode: VueTypes.oneOf(['single', 'multiple']).def('multiple'),
328
- showCount: VueTypes.bool.def(false),
329
- showSearch: VueTypes.bool.def(false),
330
- showIcon: VueTypes.bool.def(false),
331
- icon: types$1.children,
332
- showLeafIcon: VueTypes.bool.def(false),
333
- leafIcon: types$1.children,
334
- showLine: VueTypes.bool.def(false),
335
- switcherIcon: types$1.func,
336
- render: types$1.func,
337
- renderItem: types$1.func,
338
- innerClass: types$1.style,
339
- placeholder: types$1.string,
340
- title: types$1.title,
341
- isLoading: types$1.bool,
342
- dataField: types$1.stringArray.isRequired,
343
- onQueryChange: types$1.func,
344
- defaultValue: types$1.stringArray,
345
- value: types$1.stringArray,
346
- customQuery: types$1.func,
347
- defaultQuery: types$1.func,
348
- enableAppbase: types$1.bool,
349
- index: types$1.string,
350
- showFilter: types$1.bool,
351
- URLParams: types$1.bool,
352
- filterLabel: types$1.string,
353
- onChange: types$1.func,
354
- onValueChange: types$1.func,
355
- beforeValueChange: types$1.func,
356
- sortBy: types$1.sortByWithCount.def('count'),
357
- onError: types$1.func,
358
- showSwitcherIcon: types$1.bool.def(true),
359
- renderError: types$1.title,
360
- renderNoResults: types$1.func,
361
- loader: types$1.title,
362
- aggergationSize: types$1.number,
363
- endpoint: types$1.endpoint,
364
- queryFormat: types$1.queryFormatSearch.def('or'),
365
- size: types$1.number.def(100),
366
- nestedField: types$1.string,
367
- react: types$1.react,
368
- transformData: types$1.func,
369
- selectAllLabel: types$1.string,
370
- showMissing: VueTypes.bool.def(false),
371
- missingLabel: VueTypes.string.def('N/A')
372
- },
373
- data: function data() {
374
- var props = this.$props;
375
- this.__state = {
376
- selectedValues: {},
377
- searchTerm: '',
378
- aggregationData: []
379
- };
380
- this.internalComponent = props.componentId + "__internal";
381
- return this.__state;
382
- },
383
- created: function created() {
384
- var props = this.$props;
385
- var componentId = props.componentId;
386
- var defaultValue = this.defaultValue || this.value;
387
- var currentValueArray = this.selectedValue || defaultValue || [];
388
- // update local state for selected values
389
- if (currentValueArray.length) {
390
- var newSelectedValues = transformValueIntoLocalState(currentValueArray);
391
- this.setValue(newSelectedValues, true);
392
- }
393
-
394
- // Set custom and default queries in store
395
- updateCustomQuery(componentId, props, currentValueArray);
396
- updateDefaultQuery(componentId, props, currentValueArray);
397
- this.updateQueryOptions();
398
- },
399
- mounted: function mounted() {
400
- var _this$$props = this.$props,
401
- enableAppbase = _this$$props.enableAppbase,
402
- index = _this$$props.index;
403
- if (!enableAppbase && index) {
404
- console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
405
- }
406
- },
407
- watch: {
408
- defaultQuery: function defaultQuery() {
409
- this.updateDefaultQuery();
410
- this.updateQuery([]);
411
- },
412
- customQuery: function customQuery() {
413
- var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
414
- this.updateQuery(valueArray);
415
- },
416
- sortBy: function sortBy() {
417
- this.updateQueryOptions();
418
- },
419
- dataField: function dataField() {
420
- var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
421
- this.updateQueryOptions();
422
- this.updateQuery(valueArray);
423
- },
424
- value: function value(newVal, oldVal) {
425
- if (!isEqual(newVal, oldVal)) {
426
- this.setValue(newVal);
427
- }
428
- },
429
- selectedValue: function selectedValue(newVal) {
430
- if (!isEqual(transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues), newVal)) {
431
- var _this$$props2 = this.$props,
432
- value = _this$$props2.value,
433
- onChange = _this$$props2.onChange;
434
- var valueToSet = [];
435
- if (Array.isArray(newVal) && newVal.length) {
436
- valueToSet = newVal;
437
- }
438
- if (value === undefined) {
439
- this.setValue(valueToSet);
440
- } else if (onChange && !isEqual(value, valueToSet)) {
441
- onChange(valueToSet);
442
- }
443
- }
444
- },
445
- aggregationData: function aggregationData(newVal, oldVal) {
446
- if (newVal && !isEqual(newVal, oldVal)) {
447
- this.$data.aggregationData = newVal;
448
- }
449
- }
450
- },
451
- computed: {
452
- hasCustomRenderer: function hasCustomRenderer$1() {
453
- return hasCustomRenderer(this);
454
- }
455
- },
456
- methods: {
457
- renderIcon: function renderIcon(isLeafNode) {
458
- var _this$$props3 = this.$props,
459
- showIcon = _this$$props3.showIcon,
460
- showLeafIcon = _this$$props3.showLeafIcon,
461
- icon = _this$$props3.icon;
462
- if (isLeafNode) {
463
- if (!showLeafIcon) return null;
464
- var _ref = this.$slots || this.$props,
465
- leafIcon = _ref.leafIcon;
466
- if (leafIcon) return leafIcon();
467
- return createVNode("span", {
468
- "role": "img",
469
- "aria-label": "file",
470
- "class": "--leaf-icon"
471
- }, [createVNode("svg", {
472
- "viewBox": "64 64 896 896",
473
- "focusable": "false",
474
- "data-icon": "file",
475
- "width": "1em",
476
- "height": "1em",
477
- "fill": "currentColor",
478
- "aria-hidden": "true"
479
- }, [createVNode("path", {
480
- "d": "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
481
- }, null)])]);
482
- }
483
- if (!showIcon) return null;
484
- if (icon) {
485
- return icon;
486
- }
487
- if (this.$slots.icon) {
488
- return this.$slots.icon();
489
- }
490
- return createVNode("span", {
491
- "role": "img",
492
- "aria-label": "folder-open",
493
- "class": "--folder-icon"
494
- }, [createVNode("svg", {
495
- "viewBox": "64 64 896 896",
496
- "focusable": "false",
497
- "data-icon": "folder-open",
498
- "width": "1em",
499
- "height": "1em",
500
- "fill": "currentColor",
501
- "aria-hidden": "true"
502
- }, [createVNode("path", {
503
- "d": "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 00-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"
504
- }, null)])]);
505
- },
506
- getTransformedData: function getTransformedData() {
507
- var _this$$props4 = this.$props,
508
- dataField = _this$$props4.dataField,
509
- showSearch = _this$$props4.showSearch;
510
- var transformedData = transformRawTreeListData(this.$data.aggregationData, dataField);
511
- var filteredData = [];
512
- if (showSearch && this.searchTerm) {
513
- filteredData = this.filterDataBasedOnSearchTerm(transformedData, '');
514
- }
515
- return filteredData.length ? filteredData : transformedData;
516
- },
517
- handleInputChange: function handleInputChange(e) {
518
- var value = e.target.value;
519
- this.searchTerm = value;
520
- },
521
- renderSearch: function renderSearch() {
522
- var _this$$props5 = this.$props,
523
- showSearch = _this$$props5.showSearch,
524
- innerClass = _this$$props5.innerClass,
525
- placeholder = _this$$props5.placeholder,
526
- componentId = _this$$props5.componentId,
527
- themePreset = _this$$props5.themePreset;
528
- if (showSearch) {
529
- return createVNode(Input, {
530
- "class": getClassName(innerClass, 'input') || null,
531
- "onInput": this.handleInputChange,
532
- "value": this.searchTerm,
533
- "placeholder": placeholder || 'Search',
534
- "style": {
535
- margin: '0 0 8px'
536
- },
537
- "aria-label": componentId + "-search",
538
- "themePreset": themePreset
539
- }, null);
540
- }
541
- return null;
542
- },
543
- handleListItemClick: function handleListItemClick(key, parentPath) {
544
- var path = key;
545
- if (parentPath) {
546
- path = "" + parentPath + TREELIST_VALUES_PATH_SEPARATOR + key;
547
- }
548
- var newSelectedValues = _extends({}, this.selectedValues);
549
- if (this.$props.mode === 'single') {
550
- newSelectedValues = {};
551
- setDeep(newSelectedValues, path.split(TREELIST_VALUES_PATH_SEPARATOR), true, true);
552
- } else {
553
- var newValue = !recLookup(newSelectedValues, path, TREELIST_VALUES_PATH_SEPARATOR);
554
- setDeep(newSelectedValues, path.split(TREELIST_VALUES_PATH_SEPARATOR), newValue, true);
555
- }
556
- newSelectedValues = sanitizeObject(_extends({}, newSelectedValues));
557
- if (this.$props.value === undefined) {
558
- this.setValue(newSelectedValues);
559
- } else if (this.$props.onChange) {
560
- var valueToSet = transformTreeListLocalStateIntoQueryComptaibleFormat(newSelectedValues);
561
- this.$props.onChange(valueToSet);
562
- }
563
- },
564
- filterDataBasedOnSearchTerm: function filterDataBasedOnSearchTerm(listArray, parentPath) {
565
- var _this = this;
566
- if (!(listArray && Array.isArray(listArray) && listArray.length)) {
567
- return null;
568
- }
569
- var result = [];
570
- listArray.forEach(function (ele) {
571
- var isLeafItem = !ele.list;
572
- var newParentPath = ele.key;
573
- if (parentPath) {
574
- newParentPath = parentPath + "." + ele.key;
575
- }
576
- var keyHasSearchTerm = replaceDiacritics(ele.key).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm).toLowerCase()) || recLookup(_this.$data.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
577
- if (isLeafItem && keyHasSearchTerm) {
578
- result.push(_extends({}, ele, {
579
- initiallyExpanded: keyHasSearchTerm
580
- }));
581
- } else if (!isLeafItem) {
582
- var filteredChildrenItems = _this.filterDataBasedOnSearchTerm(ele.list, newParentPath);
583
- if (keyHasSearchTerm || !!filteredChildrenItems.length) {
584
- result.push(_extends({}, ele, {
585
- initiallyExpanded: keyHasSearchTerm || !!filteredChildrenItems.length,
586
- list: filteredChildrenItems
587
- }));
588
- }
589
- }
590
- });
591
- return result;
592
- },
593
- getComponent: function getComponent$1() {
594
- var _this$$props6 = this.$props,
595
- rawData = _this$$props6.rawData,
596
- error = _this$$props6.error,
597
- isLoading = _this$$props6.isLoading;
598
- var data = {
599
- data: this.getTransformedData(),
600
- rawData: rawData,
601
- error: error,
602
- handleClick: this.handleListItemClick,
603
- value: this.$data.selectedValues,
604
- loading: isLoading,
605
- PATH_SEPARATOR: TREELIST_VALUES_PATH_SEPARATOR
606
- };
607
- return this.$slots.render(data) || getComponent(data, this.$props);
608
- },
609
- getDefaultQuery: function getDefaultQuery(value) {
610
- var _this2 = this;
611
- var query = null;
612
- var type = 'term';
613
- var booleanAggregator = this.$props.queryFormat === 'or' ? 'should' : 'must';
614
- if (!Array.isArray(value) || value.length === 0) {
615
- return null;
616
- }
617
- if (value) {
618
- var _bool;
619
- // adds a sub-query with must as an array of objects for each term/value
620
- var queryArray = value.map(function (item) {
621
- return {
622
- bool: {
623
- must: item.split(' > ').map(function (subItem, i) {
624
- var _type, _ref2;
625
- return _ref2 = {}, _ref2[type] = (_type = {}, _type[_this2.$props.dataField[i]] = subItem, _type), _ref2;
626
- })
627
- }
628
- };
629
- });
630
- var listQuery = {
631
- bool: (_bool = {}, _bool[booleanAggregator] = queryArray, _bool)
632
- };
633
- query = value.length ? listQuery : null;
634
- }
635
- if (query && this.$props.nestedField) {
636
- return {
637
- nested: {
638
- path: this.$props.nestedField,
639
- query: query
640
- }
641
- };
642
- }
643
- return query;
644
- },
645
- updateQuery: function updateQuery(value) {
646
- var customQuery = this.$props.customQuery;
647
- var query = this.getDefaultQuery(value);
648
- var customQueryOptions;
649
- if (customQuery) {
650
- var _ref3 = customQuery(value, this.$props) || {};
651
- query = _ref3.query;
652
- customQueryOptions = getOptionsFromQuery(customQuery(value, this.$props));
653
- updateCustomQuery(this.$props.componentId, this.$props, value);
654
- }
655
- this.setQueryOptions(this.$props.componentId, _extends({}, this.generateQueryOptions(), customQueryOptions));
656
- this.updateQueryAction({
657
- componentId: this.$props.componentId,
658
- query: query,
659
- value: value,
660
- label: this.$props.filterLabel,
661
- showFilter: this.$props.showFilter,
662
- URLParams: this.$props.URLParams,
663
- componentType: componentTypes.treeList
664
- });
665
- },
666
- setValue: function setValue(value, hasMountedParam) {
667
- var _this3 = this;
668
- if (hasMountedParam === void 0) {
669
- hasMountedParam = true;
670
- }
671
- var finalValues = Array.isArray(value) === false ? transformTreeListLocalStateIntoQueryComptaibleFormat(value) : value;
672
- var performUpdate = function performUpdate() {
673
- var handleUpdates = function handleUpdates() {
674
- _this3.updateQuery(finalValues);
675
- if (_this3.$props.onValueChange) _this3.$props.onValueChange(finalValues);
676
- };
677
- if (hasMountedParam) {
678
- _this3.selectedValues = Array.isArray(value) ? transformValueIntoLocalState(value) : value;
679
- handleUpdates();
680
- } else {
681
- handleUpdates();
682
- }
683
- };
684
- checkValueChange(this.$props.componentId, finalValues, this.$props.beforeValueChange, performUpdate);
685
- },
686
- generateQueryOptions: function generateQueryOptions() {
687
- var queryOptions = getQueryOptions(this.$props);
688
- var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
689
- return getAggsQuery(valueArray, queryOptions, this.$props);
690
- },
691
- updateDefaultQuery: function updateDefaultQuery$1(queryOptions) {
692
- var value = transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
693
- // Update default query for RS API
694
- updateDefaultQuery(this.$props.componentId, this.$props, value);
695
- updateInternalQuery(getInternalComponentID(this.$props.componentId), queryOptions, value, this.$props, this.generateQueryOptions(), null);
696
- },
697
- updateQueryOptions: function updateQueryOptions() {
698
- // for a new query due to other changes don't append after to get fresh results
699
- var queryOptions = this.generateQueryOptions(this.$props, {}, transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues));
700
- if (this.$props.defaultQuery) {
701
- // eslint-disable-next-line no-use-before-define
702
- this.updateDefaultQuery(queryOptions);
703
- } else {
704
- this.setQueryOptions(getInternalComponentID(this.$props.componentId), queryOptions);
705
- }
706
- }
707
- },
708
- render: function render() {
709
- var _this4 = this;
710
- var props = this.$props;
711
- var style = props.style,
712
- className = props.className,
713
- mode = props.mode,
714
- showLine = props.showLine,
715
- renderItem = props.renderItem,
716
- showCheckbox = props.showCheckbox,
717
- innerClass = props.innerClass,
718
- showRadio = props.showRadio,
719
- showCount = props.showCount,
720
- showSwitcherIcon = props.showSwitcherIcon,
721
- switcherIcon = props.switcherIcon,
722
- title = props.title,
723
- loader = props.loader,
724
- renderError = props.renderError;
725
- if (this.isLoading) {
726
- return (this.$slots.loader ? this.$slots.loader() : loader) || null;
727
- }
728
- if (this.error) {
729
- if (this.$slots.renderError) {
730
- return this.$slots.renderError(this.error);
731
- }
732
- return isFunction(renderError) ? renderError(this.error) : renderError;
733
- }
734
- var transformedData = this.getTransformedData();
735
- if (!transformedData || transformedData.length === 0) {
736
- return this.$slots.renderNoResults ? this.$slots.renderNoResults() : null;
737
- }
738
- return createVNode(Container, {
739
- "style": style,
740
- "class": className
741
- }, {
742
- "default": function _default() {
743
- return [props.title && createVNode(Title, {
744
- "class": getClassName(innerClass, 'title') || null
745
- }, _isSlot$1(title) ? title : {
746
- "default": function _default() {
747
- return [title];
748
- }
749
- }), _this4.renderSearch(), _this4.hasCustomRenderer ? _this4.getComponent() : createVNode(HierarchicalMenuComponent, {
750
- "key": "initial-node",
751
- "listArray": transformedData,
752
- "parentPath": "",
753
- "isExpanded": true,
754
- "listItemProps": {
755
- mode: mode,
756
- selectedValues: _this4.selectedValues,
757
- searchTerm: _this4.searchTerm,
758
- showLine: showLine,
759
- renderItem: renderItem != null ? renderItem : _this4.$slots.renderItem,
760
- handleListItemClick: _this4.handleListItemClick,
761
- showCheckbox: showCheckbox,
762
- innerClass: innerClass,
763
- showRadio: showRadio,
764
- renderIcon: _this4.renderIcon,
765
- showCount: showCount,
766
- showSwitcherIcon: showSwitcherIcon,
767
- switcherIcon: switcherIcon != null ? switcherIcon : _this4.$slots.switcherIcon
768
- }
769
- }, null)];
770
- }
771
- });
772
- }
773
- };
774
- var mapStateToProps = function mapStateToProps(state, props) {
775
- return {
776
- selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
777
- rawData: state.rawData[props.componentId] || {},
778
- aggregationData: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId] || {},
779
- themePreset: state.config.themePreset,
780
- error: state.error[props.componentId],
781
- isLoading: state.isLoading[props.componentId],
782
- enableAppbase: state.config.enableAppbase
783
- };
784
- };
785
- var mapDispatchtoProps = {
786
- setQueryOptions: setQueryOptions,
787
- updateQueryAction: updateQueryAction
788
- };
789
- TreeList.hasInternalComponent = function () {
790
- return true;
791
- };
792
- var TreeListConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(TreeList), {
793
- componentType: componentTypes.treeList,
794
- internalComponent: TreeList.hasInternalComponent()
795
- }));
796
- TreeListConnected.name = TreeList.name;
797
- TreeListConnected.install = function (Vue) {
798
- Vue.component(TreeListConnected.name, TreeListConnected);
799
- };
800
-
801
- // Add componentType for SSR
802
- TreeListConnected.componentType = componentTypes.treeList;
803
-
804
- var RcConnected = PreferencesConsumer({
805
- name: 'RcConnected',
806
- render: function render() {
807
- var component = ReactiveComponent;
808
- switch (this.$attrs.componentType) {
809
- case componentTypes.reactiveList:
810
- component = ReactiveList;
811
- break;
812
- case componentTypes.searchBox:
813
- component = SearchBox;
814
- break;
815
- // list components
816
- case componentTypes.singleList:
817
- component = SingleList;
818
- break;
819
- case componentTypes.multiList:
820
- component = MultiList;
821
- break;
822
- case componentTypes.singleDropdownList:
823
- component = SingleDropdownList;
824
- break;
825
- case componentTypes.multiDropdownList:
826
- component = MultiDropdownList;
827
- break;
828
- // basic components
829
- case componentTypes.toggleButton:
830
- component = ToggleButton;
831
- break;
832
- // range components
833
- case componentTypes.dynamicRangeSlider:
834
- component = DynamicRangeSlider;
835
- break;
836
- case componentTypes.singleRange:
837
- component = SingleRange;
838
- break;
839
- case componentTypes.multiRange:
840
- component = MultiRange;
841
- break;
842
- case componentTypes.rangeSlider:
843
- component = RangeSlider;
844
- break;
845
- case componentTypes.rangeInput:
846
- component = RangeInput;
847
- break;
848
- }
849
- return h(component, null, this.$slots);
850
- }
851
- });
852
- RcConnected.name = ReactiveComponent.name;
853
- RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
854
- // Add componentType for SSR
855
- RcConnected.componentType = componentTypes.reactiveComponent;
856
- RcConnected.install = function (Vue) {
857
- Vue.component(RcConnected.name, RcConnected);
858
- };
859
-
860
- var components = [ReactiveList, ResultCard, ResultList, ReactiveBase, SearchBox, SingleList, MultiList, SingleRange, MultiRange, RangeSlider, DynamicRangeSlider, ReactiveComponent, RcConnected, SelectedFilters, ToggleButton, SingleDropdownList, MultiDropdownList, StateProvider, RangeInput, TreeListConnected];
861
- function install (Vue) {
862
- components.map(function (component) {
863
- Vue.use(component);
864
- return null;
865
- });
866
- }
867
-
868
- export { RcConnected as R, TreeListConnected as T, install as i };