@appbaseio/reactivesearch-vue 3.0.0-alpha.7 → 3.0.0-rc.1

package/dist/es/{ReactiveComponent-f78ff2cd.js → install-0c7962bc.js}

@@ -1,35 +1,47 @@
 import { helper, Actions, causes } from '@appbaseio/reactivecore';
-import { SEARCH_COMPONENTS_MODES, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import { SEARCH_COMPONENTS_MODES, componentTypes, TREELIST_VALUES_PATH_SEPARATOR } from '@appbaseio/reactivecore/lib/utils/constants';
 import _transformOn from '@vue/babel-helper-vue-transform-on';
-import { _ as _taggedTemplateLiteralLoose, a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
 import { createVNode, createTextVNode, defineComponent, isVNode, mergeProps, h } from 'vue';
 import VueTypes from 'vue-types';
-import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
+import { getQueryOptions, suggestionTypes, recLookup, getClassName as getClassName$2, updateCustomQuery as updateCustomQuery$1, updateDefaultQuery as updateDefaultQuery$1, transformTreeListLocalStateIntoQueryComptaibleFormat, isEqual as isEqual$1, transformRawTreeListData, setDeep, getComponent as getComponent$1, getOptionsFromQuery, checkValueChange as checkValueChange$1, getAggsQuery, updateInternalQuery, isFunction as isFunction$1 } from '@appbaseio/reactivecore/lib/utils/helper';
 import { styled, createGlobalStyle } from '@appbaseio/vue-emotion';
 import { css } from '@emotion/css';
 import { B as Button } from './Button-fd869491.js';
 import { t as types } from './vueTypes-f1923c72.js';
-import { RLConnected } from './ReactiveList.js';
-import { g as getComponent, h as hasCustomRenderer, f as decodeHtml, i as isQueryIdentical, u as updateDefaultQuery, j as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-4520a598.js';
-import { C as ComponentWrapper } from './ComponentWrapper-3a215eed.js';
-import { P as PreferencesConsumer } from './PreferencesConsumer-24e88f3b.js';
+import { RLConnected as ReactiveList } from './ReactiveList.js';
+import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
+import { g as getComponent, h as hasCustomRenderer, f as decodeHtml, i as isQueryIdentical, u as updateDefaultQuery, j as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-882489e1.js';
+import { C as ComponentWrapper } from './ComponentWrapper-8a3c388d.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-b058d14e.js';
 import { T as Title } from './Title-863dfa42.js';
-import { F as Flex } from './Flex-a08e22d7.js';
+import { L as ListItem } from './ListItem-e3c6acf4.js';
+import { F as Flex } from './Flex-25792bc3.js';
+import ReactiveBase from './ReactiveBase.js';
 import hotkeys from 'hotkeys-js';
-import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './DropDown-7174661a.js';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './DropDown-fc1fef02.js';
 import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-f7499ef8.js';
 import { C as Container } from './Container-d00219f7.js';
 import Highlight from 'vue-highlight-words';
-import { ListConnected as ListConnected$3 } from './SingleList.js';
-import { ListConnected as ListConnected$2 } from './MultiList.js';
-import { ListConnected as ListConnected$1 } from './SingleDropdownList.js';
-import { ListConnected } from './MultiDropdownList.js';
-import { TBConnected } from './ToggleButton.js';
-import { RangeConnected as RangeConnected$4 } from './DynamicRangeSlider.js';
-import { RangeConnected as RangeConnected$3 } from './SingleRange.js';
-import { RangeConnected as RangeConnected$2 } from './MultiRange.js';
-import { RangeConnected as RangeConnected$1 } from './RangeSlider.js';
-import { RangeConnected } from './RangeInput.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
+import { C as Checkbox, R as Radio } from './FormControlList-fe6eaee4.js';
+import { s as sanitizeObject } from './utils-d7dd4f4e.js';
+import { ListConnected as SingleList } from './SingleList.js';
+import { ListConnected as MultiList } from './MultiList.js';
+import types$1 from '@appbaseio/reactivecore/lib/utils/types';
+import { ListConnected as SingleDropdownList } from './SingleDropdownList.js';
+import { ListConnected as MultiDropdownList } from './MultiDropdownList.js';
+import { TBConnected as ToggleButton } from './ToggleButton.js';
+import ReactiveComponent from './ReactiveComponent.js';
+import { RangeConnected as DynamicRangeSlider } from './DynamicRangeSlider.js';
+import { RangeConnected as SingleRange } from './SingleRange.js';
+import { RangeConnected as MultiRange } from './MultiRange.js';
+import { RangeConnected as RangeSlider } from './RangeSlider.js';
+import { RangeConnected as RangeInput } from './RangeInput.js';
+import SelectedFilters from './SelectedFilters.js';
+import ResultCard from './ResultCard.js';
+import ResultList from './ResultList.js';
+import StateProvider from './StateProvider.js';
 
 var _templateObject;
 var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n"])));
@@ -1850,322 +1862,812 @@ SBConnected.install = function (Vue) {
 // Add componentType for SSR
 SBConnected.componentType = componentTypes.searchBox;
 
-var _excluded = ["options"];
-var updateQuery$1 = Actions.updateQuery,
-  setQueryOptions = Actions.setQueryOptions,
-  setCustomQuery$1 = Actions.setCustomQuery,
-  setDefaultQuery$1 = Actions.setDefaultQuery;
-var parseHits = helper.parseHits,
-  isEqual$1 = helper.isEqual,
-  getCompositeAggsQuery$1 = helper.getCompositeAggsQuery,
-  getResultStats$1 = helper.getResultStats,
-  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
-  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
-var ReactiveComponent = {
-  name: 'ReactiveComponent',
+var _templateObject$8, _templateObject2$1;
+var HierarchicalMenuList = styled('ul')(_templateObject$8 || (_templateObject$8 = _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"])));
+var HierarchicalMenuListItem = styled('li')(_templateObject2$1 || (_templateObject2$1 = _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) {
+  return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
+});
+
+var HierarchicalMenuListItemComponent = {
+  name: 'HierarchicalMenuListItemComponent',
+  data: function data() {
+    return {
+      isExpanded: false,
+      newParentPath: ''
+    };
+  },
+  created: function created() {
+    var listItemLabel = this.listItem.key;
+    var newParentPath = listItemLabel;
+    if (this.parentPath) {
+      newParentPath = "" + this.parentPath + TREELIST_VALUES_PATH_SEPARATOR + listItemLabel;
+    }
+    this.newParentPath = newParentPath;
+    this.isExpanded = !!recLookup(this.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+  },
+  watch: {
+    listItem: function listItem(newVal) {
+      if (newVal.initiallyExpanded) {
+        this.isExpanded = newVal.initiallyExpanded;
+      }
+    },
+    selectedValues: function selectedValues(newVal) {
+      this.isExpanded = !!recLookup(newVal, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+    }
+  },
   props: {
-    componentId: types.stringRequired,
-    aggregationField: types.string,
-    aggregationSize: VueTypes.number,
-    size: VueTypes.number,
-    defaultQuery: types.func,
+    parentPath: types$1.string,
+    selectedValues: types$1.rawData,
+    mode: types$1.string,
+    searchTerm: types$1.string,
+    listItem: types$1.rawData,
+    showLine: types$1.bool,
+    renderItem: types$1.func,
+    handleListItemClick: types$1.func,
+    renderSwitcherIcon: types$1.func,
+    showCheckbox: VueTypes.bool,
+    innerClass: types$1.style,
+    showRadio: VueTypes.bool,
+    renderIcon: types$1.func,
+    showCount: VueTypes.bool,
+    showSwitcherIcon: types$1.bool,
+    switcherIcon: types$1.children
+  },
+  render: function render() {
+    var _this = this;
+    var _this$$props = this.$props,
+      selectedValues = _this$$props.selectedValues,
+      mode = _this$$props.mode,
+      searchTerm = _this$$props.searchTerm,
+      listItem = _this$$props.listItem,
+      parentPath = _this$$props.parentPath,
+      showLine = _this$$props.showLine,
+      renderItem = _this$$props.renderItem,
+      handleListItemClick = _this$$props.handleListItemClick,
+      showCheckbox = _this$$props.showCheckbox,
+      innerClass = _this$$props.innerClass,
+      showRadio = _this$$props.showRadio,
+      renderIcon = _this$$props.renderIcon,
+      showCount = _this$$props.showCount,
+      showSwitcherIcon = _this$$props.showSwitcherIcon;
+    if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
+      return null;
+    }
+    var listItemLabel = listItem.key;
+    var listItemCount = listItem.count;
+    var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
+    var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
+      if (showSwitcherIcon === false) {
+        return null;
+      }
+      var switcherIcon = _this.$props.switcherIcon;
+      if (switcherIcon) return switcherIcon(isExpandedProp);
+      return (
+        /* eslint-disable jsx-a11y/click-events-have-key-events
+        , jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
+        createVNode("span", {
+          "tabIndex": "0",
+          "onClick": function onClick(e) {
+            e.stopPropagation();
+            _this.isExpanded = !_this.isExpanded;
+          },
+          "class": "--switcher-icon"
+        }, [createTextVNode("\u27A4")])
+      );
+    };
+    var isSelected = false;
+    if (mode === 'single') {
+      if (recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR) === true) {
+        isSelected = true;
+      }
+    } else {
+      isSelected = !!recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+    }
+    return createVNode(HierarchicalMenuListItem, {
+      "class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
+      "key": this.newParentPath,
+      "showLine": showLine
+    }, {
+      "default": function _default() {
+        return [createVNode(ListItem, {
+          "isTreeListItem": true,
+          "onClick": function onClick() {
+            handleListItemClick(listItemLabel, parentPath);
+          },
+          "style": {
+            textDecoration: 'none'
+          }
+        }, {
+          "default": function _default() {
+            return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : createVNode(Flex, {
+              "alignItems": "center",
+              "gap": "5px"
+            }, {
+              "default": function _default() {
+                return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && createVNode(Flex, {
+                  "alignItems": "center",
+                  "gap": "5px"
+                }, {
+                  "default": function _default() {
+                    return [createVNode(Checkbox, {
+                      "type": "checkbox",
+                      "class": getClassName$2(innerClass, 'checkbox') || null,
+                      "checked": isSelected,
+                      "id": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "name": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "show": true,
+                      "readOnly": true
+                    }, null), createVNode("label", {
+                      "style": {
+                        width: '26px',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        marginRight: '-9px',
+                        left: '-3px'
+                      },
+                      "htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "onClick": function onClick(e) {
+                        e.stopPropagation();
+                      }
+                    }, null)];
+                  }
+                }), mode === 'single' && showRadio && createVNode(Flex, {
+                  "alignItems": "center",
+                  "gap": "5px"
+                }, {
+                  "default": function _default() {
+                    return [createVNode(Radio, {
+                      "checked": isSelected,
+                      "class": getClassName$2(innerClass, 'radio') || null,
+                      "id": listItemLabel + "-radio-" + _this.newParentPath,
+                      "name": listItemLabel + "-radio-" + _this.newParentPath,
+                      "show": true,
+                      "readOnly": true,
+                      "type": "radio"
+                    }, null), createVNode("label", {
+                      "style": {
+                        width: '26px',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        marginRight: '-9px',
+                        left: '-3px'
+                      },
+                      "htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
+                      "onClick": function onClick(e) {
+                        e.stopPropagation();
+                      }
+                    }, null)];
+                  }
+                }), ' ', renderIcon(isLeafNode), createVNode("div", {
+                  "class": "--list-item-label-count-wrapper"
+                }, [createVNode("span", {
+                  "class": "--list-item-label " + (getClassName$2(innerClass, 'label') || '')
+                }, [listItemLabel]), showCount && createVNode("span", {
+                  "class": "--list-item-count " + (getClassName$2(innerClass, 'count') || '')
+                }, [listItemCount])])];
+              }
+            })];
+          }
+        }), isLeafNode === false && createVNode("div", {
+          "class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
+        }, [createVNode(HierarchicalMenuComponent, {
+          "key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
+          "listArray": listItem.list,
+          "parentPath": _this.newParentPath,
+          "isExpanded": _this.isExpanded,
+          "listItemProps": {
+            mode: mode,
+            selectedValues: selectedValues,
+            searchTerm: searchTerm,
+            showLine: showLine,
+            renderItem: renderItem,
+            handleListItemClick: handleListItemClick,
+            renderSwitcherIcon: renderSwitcherIcon,
+            showCheckbox: showCheckbox,
+            innerClass: innerClass,
+            showRadio: showRadio,
+            renderIcon: renderIcon,
+            showCount: showCount,
+            showSwitcherIcon: showSwitcherIcon,
+            switcherIcon: _this.$props.switcherIcon
+          }
+        }, null)])];
+      }
+    });
+  }
+};
+
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var HierarchicalMenuComponent = {
+  name: 'HierarchicalMenuComponent',
+  props: {
+    listArray: VueTypes.arrayOf(VueTypes.object),
+    // array of objects
+    parentPath: VueTypes.string.def(''),
+    isExpanded: VueTypes.bool.def(false),
+    listItemProps: types$1.rawData
+  },
+  render: function render() {
+    var _slot;
+    var _this$$props = this.$props,
+      listArray = _this$$props.listArray,
+      isExpanded = _this$$props.isExpanded,
+      parentPath = _this$$props.parentPath,
+      listItemProps = _this$$props.listItemProps;
+    if (!Array.isArray(listArray) || listArray.length === 0) {
+      return null;
+    }
+    return createVNode(HierarchicalMenuList, {
+      "class": "" + (isExpanded ? '--open' : ''),
+      "isSelected": isExpanded
+    }, _isSlot$1(_slot = listArray.map(function (listItem) {
+      return createVNode(HierarchicalMenuListItemComponent, mergeProps({
+        "key": parentPath + "__" + JSON.stringify(listItem),
+        "parentPath": parentPath,
+        "listItem": listItem
+      }, listItemProps), null);
+    })) ? _slot : {
+      "default": function _default() {
+        return [_slot];
+      }
+    });
+  }
+};
+
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var updateQueryAction = Actions.updateQuery,
+  setQueryOptions = Actions.setQueryOptions;
+var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
+  var valueToSet = {};
+  if (valueArray.length) {
+    var newSelectedValues = {};
+    valueArray.forEach(function (valueItem) {
+      setDeep(newSelectedValues, valueItem.split(' > '), !recLookup(newSelectedValues, valueItem.split(' > '), TREELIST_VALUES_PATH_SEPARATOR), true);
+    });
+    valueToSet = newSelectedValues;
+  }
+  return valueToSet;
+};
+var TreeList = {
+  name: 'TreeList',
+  props: {
+    selectedValue: types.selectedValue,
+    error: types.title,
+    rawData: types.rawData,
+    aggregationData: types.rawData,
+    themePreset: types.themePreset,
+    updateQueryAction: types.funcRequired,
+    setQueryOptions: types.funcRequired,
+    // component props
+    componentId: types.string.isRequired,
+    className: types.string,
+    style: types.style,
+    showRadio: VueTypes.bool.def(false),
+    showCheckbox: types.bool.def(false),
+    mode: VueTypes.oneOf(['single', 'multiple']).def('multiple'),
+    showCount: VueTypes.bool.def(false),
+    showSearch: VueTypes.bool.def(false),
+    showIcon: VueTypes.bool.def(false),
+    icon: types.children,
+    showLeafIcon: VueTypes.bool.def(false),
+    leafIcon: types.children,
+    showLine: VueTypes.bool.def(false),
+    switcherIcon: types.func,
+    render: types.func,
+    renderItem: types.func,
+    innerClass: types.style,
+    placeholder: types.string,
+    title: types.title,
+    isLoading: types.bool,
+    dataField: types.stringArray.isRequired,
+    onQueryChange: types.func,
+    defaultValue: types.stringArray,
+    value: types.stringArray,
     customQuery: types.func,
+    defaultQuery: types.func,
+    enableAppbase: types.bool,
+    index: types.string,
+    showFilter: types.bool,
+    URLParams: types.bool,
     filterLabel: types.string,
+    onChange: types.func,
+    onValueChange: types.func,
+    beforeValueChange: types.func,
+    sortBy: types.sortByWithCount.def('count'),
+    onError: types.func,
+    showSwitcherIcon: types.bool.def(true),
+    renderError: types.title,
+    renderNoResults: types.func,
+    loader: types.title,
+    aggergationSize: types.number,
+    endpoint: types.endpoint,
+    queryFormat: types.queryFormatSearch.def('or'),
+    size: types.number.def(100),
+    nestedField: types.string,
     react: types.react,
-    showFilter: VueTypes.bool.def(true),
-    URLParams: VueTypes.bool.def(false),
-    distinctField: types.string,
-    distinctFieldConfig: types.props,
-    index: VueTypes.string,
-    endpoint: types.endpointConfig
+    transformData: types.func,
+    selectAllLabel: types.string,
+    showMissing: VueTypes.bool.def(false),
+    missingLabel: VueTypes.string.def('N/A')
+  },
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      selectedValues: {},
+      searchTerm: '',
+      aggregationData: []
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
   },
   created: function created() {
-    var _this = this;
     var props = this.$props;
-    this.internalComponent = null;
-    this.$defaultQuery = null;
-    // Set custom query in store
-    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-    var customQuery = props.customQuery,
-      componentId = props.componentId,
-      filterLabel = props.filterLabel,
-      showFilter = props.showFilter,
-      URLParams = props.URLParams;
-    if (customQuery) {
-      var calcCustomQuery = customQuery(this.selectedValue, props);
-      var query = extractQueryFromCustomQuery(calcCustomQuery);
-      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery(calcCustomQuery) : null;
-      if (customQueryOptions) {
-        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
-      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-      this.updateQuery({
-        componentId: componentId,
-        query: query,
-        value: this.selectedValue || null,
-        label: filterLabel,
-        showFilter: showFilter,
-        URLParams: URLParams
-      });
+    var componentId = props.componentId;
+    var defaultValue = this.defaultValue || this.value;
+    var currentValueArray = this.selectedValue || defaultValue || [];
+    // update local state for selected values
+    if (currentValueArray.length) {
+      var newSelectedValues = transformValueIntoLocalState(currentValueArray);
+      this.setValue(newSelectedValues, true);
     }
-    this.setQuery = function (_ref) {
-      var options = _ref.options,
-        obj = _objectWithoutPropertiesLoose(_ref, _excluded);
-      var queryToBeSet = obj.query;
 
-      // when enableAppbase is true, Backend throws error because of repeated query in request body
-      if (queryToBeSet && queryToBeSet.query) {
-        queryToBeSet = queryToBeSet.query;
-      }
-      var customQueryCalc = _extends({}, options, {
-        query: queryToBeSet
-      });
-      var rsAPIQuery = customQueryCalc;
-      // handle stored queries
-      if (queryToBeSet && queryToBeSet.id) {
-        rsAPIQuery = queryToBeSet;
-      }
-      // Update customQuery field for RS API
-      _this.setCustomQuery(props.componentId, rsAPIQuery);
-      if (options) {
-        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
-      }
-      _this.updateQuery(_extends({}, obj, {
-        query: customQueryCalc.query,
-        componentId: props.componentId,
-        label: props.filterLabel,
-        showFilter: props.showFilter,
-        URLParams: props.URLParams
-      }));
-    };
-    if (props.defaultQuery) {
-      this.internalComponent = props.componentId + "__internal";
-    }
-    if (this.internalComponent && this.$props.defaultQuery) {
-      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
-      var _query = extractQueryFromCustomQuery(this.$defaultQuery);
-      var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
-      if (queryOptions) {
-        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-      this.updateQuery({
-        componentId: this.internalComponent,
-        query: _query
-      });
+    // Set custom and default queries in store
+    updateCustomQuery$1(componentId, props, currentValueArray);
+    updateDefaultQuery$1(componentId, props, currentValueArray);
+    this.updateQueryOptions();
+  },
+  mounted: function mounted() {
+    var _this$$props = this.$props,
+      enableAppbase = _this$$props.enableAppbase,
+      index = _this$$props.index;
+    if (!enableAppbase && index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     }
   },
   watch: {
-    hits: function hits(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
+    defaultQuery: function defaultQuery() {
+      this.updateDefaultQuery();
+      this.updateQuery([]);
+    },
+    customQuery: function customQuery() {
+      var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
+      this.updateQuery(valueArray);
+    },
+    sortBy: function sortBy() {
+      this.updateQueryOptions();
     },
-    rawData: function rawData(newVal, oldVal) {
+    dataField: function dataField() {
+      var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
+      this.updateQueryOptions();
+      this.updateQuery(valueArray);
+    },
+    value: function value(newVal, oldVal) {
       if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+        this.setValue(newVal);
       }
     },
-    aggregations: function aggregations(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    selectedValue: function selectedValue(newVal) {
+      if (!isEqual$1(transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues), newVal)) {
+        var _this$$props2 = this.$props,
+          value = _this$$props2.value,
+          onChange = _this$$props2.onChange;
+        var valueToSet = [];
+        if (Array.isArray(newVal) && newVal.length) {
+          valueToSet = newVal;
+        }
+        if (value === undefined) {
+          this.setValue(valueToSet);
+        } else if (onChange && !isEqual$1(value, valueToSet)) {
+          onChange(valueToSet);
+        }
       }
     },
     aggregationData: function aggregationData(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+      if (newVal && !isEqual$1(newVal, oldVal)) {
+        this.$data.aggregationData = newVal;
       }
+    }
+  },
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer$1() {
+      return hasCustomRenderer(this);
+    }
+  },
+  methods: {
+    renderIcon: function renderIcon(isLeafNode) {
+      var _this$$props3 = this.$props,
+        showIcon = _this$$props3.showIcon,
+        showLeafIcon = _this$$props3.showLeafIcon,
+        icon = _this$$props3.icon;
+      if (isLeafNode) {
+        if (!showLeafIcon) return null;
+        var _ref = this.$slots || this.$props,
+          leafIcon = _ref.leafIcon;
+        if (leafIcon) return leafIcon();
+        return createVNode("span", {
+          "role": "img",
+          "aria-label": "file",
+          "class": "--leaf-icon"
+        }, [createVNode("svg", {
+          "viewBox": "64 64 896 896",
+          "focusable": "false",
+          "data-icon": "file",
+          "width": "1em",
+          "height": "1em",
+          "fill": "currentColor",
+          "aria-hidden": "true"
+        }, [createVNode("path", {
+          "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"
+        }, null)])]);
+      }
+      if (!showIcon) return null;
+      if (icon) {
+        return icon;
+      }
+      if (this.$slots.icon) {
+        return this.$slots.icon();
+      }
+      return createVNode("span", {
+        "role": "img",
+        "aria-label": "folder-open",
+        "class": "--folder-icon"
+      }, [createVNode("svg", {
+        "viewBox": "64 64 896 896",
+        "focusable": "false",
+        "data-icon": "folder-open",
+        "width": "1em",
+        "height": "1em",
+        "fill": "currentColor",
+        "aria-hidden": "true"
+      }, [createVNode("path", {
+        "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"
+      }, null)])]);
     },
-    promotedResults: function promotedResults(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
+    getTransformedData: function getTransformedData() {
+      var _this$$props4 = this.$props,
+        dataField = _this$$props4.dataField,
+        showSearch = _this$$props4.showSearch;
+      var transformedData = transformRawTreeListData(this.$data.aggregationData, dataField);
+      var filteredData = [];
+      if (showSearch && this.searchTerm) {
+        filteredData = this.filterDataBasedOnSearchTerm(transformedData, '');
+      }
+      return filteredData.length ? filteredData : transformedData;
     },
-    hidden: function hidden(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
+    handleInputChange: function handleInputChange(e) {
+      var value = e.target.value;
+      this.searchTerm = value;
     },
-    total: function total(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    renderSearch: function renderSearch() {
+      var _this$$props5 = this.$props,
+        showSearch = _this$$props5.showSearch,
+        innerClass = _this$$props5.innerClass,
+        placeholder = _this$$props5.placeholder,
+        componentId = _this$$props5.componentId,
+        themePreset = _this$$props5.themePreset;
+      if (showSearch) {
+        return createVNode(Input, {
+          "class": getClassName$2(innerClass, 'input') || null,
+          "onInput": this.handleInputChange,
+          "value": this.searchTerm,
+          "placeholder": placeholder || 'Search',
+          "style": {
+            margin: '0 0 8px'
+          },
+          "aria-label": componentId + "-search",
+          "themePreset": themePreset
+        }, null);
       }
+      return null;
     },
-    time: function time(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    handleListItemClick: function handleListItemClick(key, parentPath) {
+      var path = key;
+      if (parentPath) {
+        path = "" + parentPath + TREELIST_VALUES_PATH_SEPARATOR + key;
+      }
+      var newSelectedValues = _extends({}, this.selectedValues);
+      if (this.$props.mode === 'single') {
+        newSelectedValues = {};
+        setDeep(newSelectedValues, path.split(TREELIST_VALUES_PATH_SEPARATOR), true, true);
+      } else {
+        var newValue = !recLookup(newSelectedValues, path, TREELIST_VALUES_PATH_SEPARATOR);
+        setDeep(newSelectedValues, path.split(TREELIST_VALUES_PATH_SEPARATOR), newValue, true);
+      }
+      newSelectedValues = sanitizeObject(_extends({}, newSelectedValues));
+      if (this.$props.value === undefined) {
+        this.setValue(newSelectedValues);
+      } else if (this.$props.onChange) {
+        var valueToSet = transformTreeListLocalStateIntoQueryComptaibleFormat(newSelectedValues);
+        this.$props.onChange(valueToSet);
       }
     },
-    defaultQuery: function defaultQuery(newVal, oldVal) {
-      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-        this.$defaultQuery = newVal(this.selectedValue, this.$props);
-        var query = extractQueryFromCustomQuery(this.$defaultQuery);
-        var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
-        if (queryOptions) {
-          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-        // Update default query for RS API
-        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-        this.updateQuery({
-          componentId: this.internalComponent,
-          query: query
-        });
+    filterDataBasedOnSearchTerm: function filterDataBasedOnSearchTerm(listArray, parentPath) {
+      var _this = this;
+      if (!(listArray && Array.isArray(listArray) && listArray.length)) {
+        return null;
       }
+      var result = [];
+      listArray.forEach(function (ele) {
+        var isLeafItem = !ele.list;
+        var newParentPath = ele.key;
+        if (parentPath) {
+          newParentPath = parentPath + "." + ele.key;
+        }
+        var keyHasSearchTerm = replaceDiacritics(ele.key).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm).toLowerCase()) || recLookup(_this.$data.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+        if (isLeafItem && keyHasSearchTerm) {
+          result.push(_extends({}, ele, {
+            initiallyExpanded: keyHasSearchTerm
+          }));
+        } else if (!isLeafItem) {
+          var filteredChildrenItems = _this.filterDataBasedOnSearchTerm(ele.list, newParentPath);
+          if (keyHasSearchTerm || !!filteredChildrenItems.length) {
+            result.push(_extends({}, ele, {
+              initiallyExpanded: keyHasSearchTerm || !!filteredChildrenItems.length,
+              list: filteredChildrenItems
+            }));
+          }
+        }
+      });
+      return result;
     },
-    customQuery: function customQuery(newVal, oldVal) {
-      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-        var componentId = this.$props.componentId;
-        this.$customQuery = newVal(this.selectedValue, this.$props);
-        var query = extractQueryFromCustomQuery(this.$customQuery);
-        var queryOptions = getOptionsForCustomQuery(this.$customQuery);
-        if (queryOptions) {
-          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
-        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-
-        // Update custom query for RS API
-        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-        this.updateQuery({
-          componentId: componentId,
-          query: query
+    getComponent: function getComponent() {
+      var _this$$props6 = this.$props,
+        rawData = _this$$props6.rawData,
+        error = _this$$props6.error,
+        isLoading = _this$$props6.isLoading;
+      var data = {
+        data: this.getTransformedData(),
+        rawData: rawData,
+        error: error,
+        handleClick: this.handleListItemClick,
+        value: this.$data.selectedValues,
+        loading: isLoading,
+        PATH_SEPARATOR: TREELIST_VALUES_PATH_SEPARATOR
+      };
+      return this.$slots.render(data) || getComponent$1(data, this.$props);
+    },
+    getDefaultQuery: function getDefaultQuery(value) {
+      var _this2 = this;
+      var query = null;
+      var type = 'term';
+      var booleanAggregator = this.$props.queryFormat === 'or' ? 'should' : 'must';
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+      if (value) {
+        var _bool;
+        // adds a sub-query with must as an array of objects for each term/value
+        var queryArray = value.map(function (item) {
+          return {
+            bool: {
+              must: item.split(' > ').map(function (subItem, i) {
+                var _type, _ref2;
+                return _ref2 = {}, _ref2[type] = (_type = {}, _type[_this2.$props.dataField[i]] = subItem, _type), _ref2;
+              })
+            }
+          };
         });
+        var listQuery = {
+          bool: (_bool = {}, _bool[booleanAggregator] = queryArray, _bool)
+        };
+        query = value.length ? listQuery : null;
       }
-    }
-  },
-  render: function render() {
-    try {
-      var dom = this.$slots["default"];
-      var error = this.error,
-        isLoading = this.isLoading,
-        selectedValue = this.selectedValue;
-      var propsToBePassed = _extends({
-        error: error,
-        loading: isLoading
-      }, this.getData(), {
-        value: selectedValue,
-        setQuery: this.setQuery
-      });
-      return createVNode("div", null, [dom(propsToBePassed)]);
-    } catch (e) {
-      return null;
-    }
-  },
-  methods: {
-    getAggsQuery: function getAggsQuery() {
-      if (this.aggregationField) {
+      if (query && this.$props.nestedField) {
         return {
-          aggs: getCompositeAggsQuery$1({
-            props: this.$props,
-            showTopHits: true,
-            value: this.selectedValue
-          }).aggs
+          nested: {
+            path: this.$props.nestedField,
+            query: query
+          }
         };
       }
-      return {};
-    },
-    getData: function getData() {
-      var hits = this.hits,
-        aggregations = this.aggregations,
-        aggregationData = this.aggregationData,
-        promotedResults = this.promotedResults,
-        rawData = this.rawData;
-      var filteredResults = parseHits(hits);
-      if (promotedResults.length) {
-        var ids = promotedResults.map(function (item) {
-          return item._id;
-        }).filter(Boolean);
-        if (ids) {
-          filteredResults = filteredResults.filter(function (item) {
-            return !ids.includes(item._id);
-          });
-        }
-        filteredResults = [].concat(promotedResults, filteredResults);
+      return query;
+    },
+    updateQuery: function updateQuery(value) {
+      var customQuery = this.$props.customQuery;
+      var query = this.getDefaultQuery(value);
+      var customQueryOptions;
+      if (customQuery) {
+        var _ref3 = customQuery(value, this.$props) || {};
+        query = _ref3.query;
+        customQueryOptions = getOptionsFromQuery(customQuery(value, this.$props));
+        updateCustomQuery$1(this.$props.componentId, this.$props, value);
       }
-      return {
-        data: filteredResults,
-        aggregationData: aggregationData,
-        rawData: rawData,
-        aggregations: aggregations,
-        promotedData: promotedResults,
-        resultStats: this.stats
+      this.setQueryOptions(this.$props.componentId, _extends({}, this.generateQueryOptions(), customQueryOptions));
+      this.updateQueryAction({
+        componentId: this.$props.componentId,
+        query: query,
+        value: value,
+        label: this.$props.filterLabel,
+        showFilter: this.$props.showFilter,
+        URLParams: this.$props.URLParams,
+        componentType: componentTypes.treeList
+      });
+    },
+    setValue: function setValue(value, hasMountedParam) {
+      var _this3 = this;
+      if (hasMountedParam === void 0) {
+        hasMountedParam = true;
+      }
+      var finalValues = Array.isArray(value) === false ? transformTreeListLocalStateIntoQueryComptaibleFormat(value) : value;
+      var performUpdate = function performUpdate() {
+        var handleUpdates = function handleUpdates() {
+          _this3.updateQuery(finalValues);
+          if (_this3.$props.onValueChange) _this3.$props.onValueChange(finalValues);
+        };
+        if (hasMountedParam) {
+          _this3.selectedValues = Array.isArray(value) ? transformValueIntoLocalState(value) : value;
+          handleUpdates();
+        } else {
+          handleUpdates();
+        }
       };
+      checkValueChange$1(this.$props.componentId, finalValues, this.$props.beforeValueChange, performUpdate);
+    },
+    generateQueryOptions: function generateQueryOptions() {
+      var queryOptions = getQueryOptions(this.$props);
+      var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
+      return getAggsQuery(valueArray, queryOptions, this.$props);
+    },
+    updateDefaultQuery: function updateDefaultQuery(queryOptions) {
+      var value = transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
+      // Update default query for RS API
+      updateDefaultQuery$1(this.$props.componentId, this.$props, value);
+      updateInternalQuery(getInternalComponentID(this.$props.componentId), queryOptions, value, this.$props, this.generateQueryOptions(), null);
+    },
+    updateQueryOptions: function updateQueryOptions() {
+      // for a new query due to other changes don't append after to get fresh results
+      var queryOptions = this.generateQueryOptions(this.$props, {}, transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues));
+      if (this.$props.defaultQuery) {
+        // eslint-disable-next-line no-use-before-define
+        this.updateDefaultQuery(queryOptions);
+      } else {
+        this.setQueryOptions(getInternalComponentID(this.$props.componentId), queryOptions);
+      }
     }
   },
-  computed: {
-    stats: function stats() {
-      return getResultStats$1(this);
+  render: function render() {
+    var _this4 = this;
+    var props = this.$props;
+    var style = props.style,
+      className = props.className,
+      mode = props.mode,
+      showLine = props.showLine,
+      renderItem = props.renderItem,
+      showCheckbox = props.showCheckbox,
+      innerClass = props.innerClass,
+      showRadio = props.showRadio,
+      showCount = props.showCount,
+      showSwitcherIcon = props.showSwitcherIcon,
+      switcherIcon = props.switcherIcon,
+      title = props.title,
+      loader = props.loader,
+      renderError = props.renderError;
+    if (this.isLoading) {
+      return (this.$slots.loader ? this.$slots.loader() : loader) || null;
     }
+    if (this.error) {
+      if (this.$slots.renderError) {
+        return this.$slots.renderError(this.error);
+      }
+      return isFunction$1(renderError) ? renderError(this.error) : renderError;
+    }
+    var transformedData = this.getTransformedData();
+    if (!transformedData || transformedData.length === 0) {
+      return this.$slots.renderNoResults ? this.$slots.renderNoResults() : null;
+    }
+    return createVNode(Container, {
+      "style": style,
+      "class": className
+    }, {
+      "default": function _default() {
+        return [props.title && createVNode(Title, {
+          "class": getClassName$2(innerClass, 'title') || null
+        }, _isSlot$2(title) ? title : {
+          "default": function _default() {
+            return [title];
+          }
+        }), _this4.renderSearch(), _this4.hasCustomRenderer ? _this4.getComponent() : createVNode(HierarchicalMenuComponent, {
+          "key": "initial-node",
+          "listArray": transformedData,
+          "parentPath": "",
+          "isExpanded": true,
+          "listItemProps": {
+            mode: mode,
+            selectedValues: _this4.selectedValues,
+            searchTerm: _this4.searchTerm,
+            showLine: showLine,
+            renderItem: renderItem != null ? renderItem : _this4.$slots.renderItem,
+            handleListItemClick: _this4.handleListItemClick,
+            showCheckbox: showCheckbox,
+            innerClass: innerClass,
+            showRadio: showRadio,
+            renderIcon: _this4.renderIcon,
+            showCount: showCount,
+            showSwitcherIcon: showSwitcherIcon,
+            switcherIcon: switcherIcon != null ? switcherIcon : _this4.$slots.switcherIcon
+          }
+        }, null)];
+      }
+    });
   }
 };
-ReactiveComponent.hasInternalComponent = function (props) {
-  return !!props.defaultQuery;
-};
 var mapStateToProps$1 = function mapStateToProps(state, props) {
   return {
-    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
-    aggregationData: state.compositeAggregations[props.componentId] || [],
-    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
-    rawData: state.rawData[props.componentId],
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    rawData: state.rawData[props.componentId] || {},
+    aggregationData: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId] || {},
+    themePreset: state.config.themePreset,
     error: state.error[props.componentId],
     isLoading: state.isLoading[props.componentId],
-    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-    promotedResults: state.promotedResults[props.componentId] || [],
-    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
-    total: state.hits[props.componentId] && state.hits[props.componentId].total,
-    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
-    componentProps: state.props[props.componentId]
+    enableAppbase: state.config.enableAppbase
   };
 };
 var mapDispatchtoProps = {
   setQueryOptions: setQueryOptions,
-  updateQuery: updateQuery$1,
-  setCustomQuery: setCustomQuery$1,
-  setDefaultQuery: setDefaultQuery$1
+  updateQueryAction: updateQueryAction
 };
-var ConnectedComponent = ComponentWrapper(connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveComponent), {
-  componentType: componentTypes.reactiveComponent
-});
+TreeList.hasInternalComponent = function () {
+  return true;
+};
+var TreeListConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps$1, mapDispatchtoProps)(TreeList), {
+  componentType: componentTypes.treeList,
+  internalComponent: TreeList.hasInternalComponent()
+}));
+TreeListConnected.name = TreeList.name;
+TreeListConnected.install = function (Vue) {
+  Vue.component(TreeListConnected.name, TreeListConnected);
+};
+
+// Add componentType for SSR
+TreeListConnected.componentType = componentTypes.treeList;
+
 var RcConnected = PreferencesConsumer({
   name: 'RcConnected',
   render: function render() {
-    var component = ConnectedComponent;
+    var component = ReactiveComponent;
     switch (this.$attrs.componentType) {
       case componentTypes.reactiveList:
-        component = RLConnected;
+        component = ReactiveList;
         break;
       case componentTypes.searchBox:
         component = SBConnected;
         break;
       // list components
       case componentTypes.singleList:
-        component = ListConnected$3;
+        component = SingleList;
         break;
       case componentTypes.multiList:
-        component = ListConnected$2;
+        component = MultiList;
         break;
       case componentTypes.singleDropdownList:
-        component = ListConnected$1;
+        component = SingleDropdownList;
         break;
       case componentTypes.multiDropdownList:
-        component = ListConnected;
+        component = MultiDropdownList;
         break;
       // basic components
       case componentTypes.toggleButton:
-        component = TBConnected;
+        component = ToggleButton;
         break;
       // range components
       case componentTypes.dynamicRangeSlider:
-        component = RangeConnected$4;
+        component = DynamicRangeSlider;
         break;
       case componentTypes.singleRange:
-        component = RangeConnected$3;
+        component = SingleRange;
         break;
       case componentTypes.multiRange:
-        component = RangeConnected$2;
+        component = MultiRange;
         break;
       case componentTypes.rangeSlider:
-        component = RangeConnected$1;
+        component = RangeSlider;
         break;
       case componentTypes.rangeInput:
-        component = RangeConnected;
+        component = RangeInput;
         break;
     }
     return h(component, null, this.$slots);
@@ -2179,4 +2681,12 @@ RcConnected.install = function (Vue) {
   Vue.component(RcConnected.name, RcConnected);
 };
 
-export { RcConnected as R, SBConnected as S };
+var components = [ReactiveList, ResultCard, ResultList, ReactiveBase, SBConnected, SingleList, MultiList, SingleRange, MultiRange, RangeSlider, DynamicRangeSlider, ReactiveComponent, RcConnected, SelectedFilters, ToggleButton, SingleDropdownList, MultiDropdownList, StateProvider, RangeInput, TreeListConnected];
+function install (Vue) {
+  components.map(function (component) {
+    Vue.use(component);
+    return null;
+  });
+}
+
+export { RcConnected as R, SBConnected as S, TreeListConnected as T, install as i };