@appbaseio/reactivesearch-vue 2.0.0-alpha.3 → 3.0.0-alpha.0

package/dist/es/ReactiveList.js

@@ -1,59 +1,48 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
-import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import _transformOn from '@vue/babel-helper-vue-transform-on';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, mergeProps, createTextVNode, isVNode } from 'vue';
+import VueTypes from 'vue-types';
 import { withClickIds } from '@appbaseio/reactivecore/lib/utils/helper';
+import { styled } from '@appbaseio/vue-emotion';
 import { css } from 'emotion';
-import styled from '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-d8bc15ea.js';
-import { t as types } from './vueTypes-b8146772.js';
-import { P as Pagination } from './Pagination-784bf143.js';
+import './Button-474510e3.js';
+import { t as types } from './vueTypes-f1923c72.js';
+import { P as Pagination } from './Pagination-72bd1d9e.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { c as connect, h as hasCustomRenderer, i as isQueryIdentical, u as updateDefaultQuery, a as isFunction, g as getComponent } from './index-7788a843.js';
-import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.js';
-import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import './Title-3342664a.js';
-import { c as container } from './ListItem-cad14c5e.js';
-import { c as container$1 } from './Card-450683f1.js';
-import { F as Flex } from './Flex-1f0795c3.js';
+import { c as connect, h as hasCustomRenderer, i as isQueryIdentical, u as updateDefaultQuery, a as isFunction, g as getComponent } from './index-4520a598.js';
+import { C as ComponentWrapper } from './ComponentWrapper-5166c76a.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-c276709c.js';
+import './Title-863dfa42.js';
+import { c as container } from './ListItem-16756c02.js';
+import { c as container$1 } from './Card-38cbe652.js';
+import { F as Flex } from './Flex-a08e22d7.js';
 
 var _templateObject;
 var PoweredByImage = styled('img')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\twidth: 110px;\n"])));
 
-var PoweredBy = {
-  functional: true,
-  render: function render(h) {
-    return h("a", {
-      "attrs": {
-        "href": "https://appbase.io/",
-        "target": "_blank",
-        "rel": "noopener noreferrer"
-      }
-    }, [h(PoweredByImage, {
-      "attrs": {
-        "src": "https://cdn.jsdelivr.net/gh/appbaseio/cdn@d2ec210045e59104ee5485841fa17b23fc83f097/appbase/logos/rbc-logo.svg"
-      }
-    })]);
-  }
+var PoweredBy = function PoweredBy() {
+  return createVNode("a", {
+    "href": "https://appbase.io/",
+    "target": "_blank",
+    "rel": "noopener noreferrer"
+  }, [createVNode(PoweredByImage, {
+    "src": "https://cdn.jsdelivr.net/gh/appbaseio/cdn@d2ec210045e59104ee5485841fa17b23fc83f097/appbase/logos/rbc-logo.svg"
+  }, null)]);
 };
 
 var ResultListWrapper = {
   name: 'ResultListWrapper',
   functional: true,
-  render: function render(_, _ref) {
-    var props = _ref.props,
-        children = _ref.children;
-    var h = arguments[0];
-    return h("div", _mergeJSXProps([{
-      "attrs": {
-        "className": container
-      }
-    }, props]), [children]);
+  render: function render(context) {
+    return createVNode("div", mergeProps({
+      "className": container
+    }, context.$props), [context.$slots["default"]()]);
   }
 };
-
 ResultListWrapper.install = function (Vue) {
   Vue.component(ResultListWrapper.name, ResultListWrapper);
 };
@@ -61,18 +50,12 @@ ResultListWrapper.install = function (Vue) {
 var ResultCardsWrapper = {
   name: 'ResultCardsWrapper',
   functional: true,
-  render: function render(_, _ref) {
-    var props = _ref.props,
-        children = _ref.children;
-    var h = arguments[0];
-    return h("div", _mergeJSXProps([{
-      "attrs": {
-        "className": container$1
-      }
-    }, props]), [children]);
+  render: function render(context) {
+    return createVNode("div", mergeProps({
+      "className": container$1
+    }, context.$props), [context.$slots["default"]()]);
   }
 };
-
 ResultCardsWrapper.install = function (Vue) {
   Vue.component(ResultCardsWrapper.name, ResultCardsWrapper);
 };
@@ -83,15 +66,13 @@ var sortOptions = css(_templateObject2 || (_templateObject2 = _taggedTemplateLit
 
 var recordImpressions = Actions.recordImpressions;
 var isEqual = helper.isEqual;
-
 var debounce = function debounce(method, delay) {
-  clearTimeout(method._tId); // eslint-disable-next-line
-
+  clearTimeout(method._tId);
+  // eslint-disable-next-line
   method._tId = setTimeout(function () {
     method();
   }, delay);
 };
-
 var ImpressionTracker = {
   name: 'ImpressionTracker',
   inject: ['$$store'],
@@ -104,16 +85,15 @@ var ImpressionTracker = {
     // An object to track the recorded impressions
     // It can have the values in following shape
     // { "hit_id": { "index": "test" }}
-
-    this.trackedIds = {}; // An object to know the the un-tracked impression i.e not recorded by BE
+    this.trackedIds = {};
+    // An object to know the the un-tracked impression i.e not recorded by BE
     // It can have the values in following shape
     // { "query_id": [{ "id": "hit_id", "index": "test"}]}
-
     this.waitingToBeTracked = {};
   },
   mounted: function mounted() {
-    this.setCurrentHits(this.hits); // Add scroll events to track the impressions
-
+    this.setCurrentHits(this.hits);
+    // Add scroll events to track the impressions
     if (window) {
       window.addEventListener('scroll', this.tracker);
     }
@@ -132,7 +112,6 @@ var ImpressionTracker = {
         var currentHitIds = newVal.map(function (hit) {
           return hit._id;
         });
-
         if (!isEqual(currentHitIds, prevHitIds)) {
           this.setCurrentHits(newVal);
         }
@@ -145,28 +124,24 @@ var ImpressionTracker = {
       return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
     },
     setCurrentHits: function setCurrentHits(hits) {
-      this.currentHits = hits; // Reset the tracked Ids for new hits
-
+      this.currentHits = hits;
+      // Reset the tracked Ids for new hits
       this.trackedIds = {};
-
       if (hits && hits.length) {
-        this.tracker(); // Run the tracker function on an interval of 1s to track the impressions for
+        this.tracker();
+        // Run the tracker function on an interval of 1s to track the impressions for
         // non-scroll views for e.g on tab change
-
         this.setTrackerInterval();
       }
     },
     recordImpression: function recordImpression() {
       var _this = this;
-
       if (Object.keys(this.waitingToBeTracked).length) {
         var unTrackedHits = _extends({}, this.waitingToBeTracked);
-
         Object.keys(unTrackedHits).forEach(function (queryId) {
           if (unTrackedHits[queryId] && unTrackedHits[queryId].length) {
-            _this.trackImpressions(queryId, unTrackedHits[queryId]); // Removed tracked impressions from waiting list
-
-
+            _this.trackImpressions(queryId, unTrackedHits[queryId]);
+            // Removed tracked impressions from waiting list
             delete _this.waitingToBeTracked[queryId];
           }
         });
@@ -174,13 +149,12 @@ var ImpressionTracker = {
     },
     addToWaitingList: function addToWaitingList(hitObject) {
       var queryId = this.getQueryId();
-
       if (hitObject && queryId) {
         var impression = {
           id: hitObject._id,
           index: hitObject._index
-        }; // Check if query id already present in waiting list
-
+        };
+        // Check if query id already present in waiting list
         if (this.waitingToBeTracked[queryId]) {
           this.waitingToBeTracked[queryId].push(impression);
         } else {
@@ -190,32 +164,27 @@ var ImpressionTracker = {
     },
     tracker: function tracker() {
       var _this2 = this;
-
       if (!this.getHitIds().length) {
         this.clearTrackerInterval();
         return;
-      } // only run at client-side
-
-
+      }
+      // only run at client-side
       if (window && document) {
         this.getHitIds().forEach(function (id) {
           var element = document.getElementById(id);
-
           if (element) {
             if (_this2.inViewPort(element)) {
               // Add the hit id in the list of tracked ids
               var hitObject = _this2.currentHits.find(function (hit) {
                 return hit._id === id;
               });
-
-              _this2.trackedIds[id] = true; // Add hit to waiting list to be recorded
-
+              _this2.trackedIds[id] = true;
+              // Add hit to waiting list to be recorded
               _this2.addToWaitingList(hitObject);
             }
           }
         });
       }
-
       debounce(this.recordImpression, 300);
     },
     setTrackerInterval: function setTrackerInterval() {
@@ -223,8 +192,8 @@ var ImpressionTracker = {
     },
     clearTrackerInterval: function clearTrackerInterval() {
       if (this.intervalID) {
-        clearInterval(this.intervalID); // Reset interval ID
-
+        clearInterval(this.intervalID);
+        // Reset interval ID
         this.intervalID = null;
       }
     },
@@ -234,7 +203,6 @@ var ImpressionTracker = {
     },
     getHitIds: function getHitIds() {
       var _this3 = this;
-
       return this.currentHits.map(function (hit) {
         return hit._id;
       }).filter(function (id) {
@@ -253,21 +221,24 @@ var ImpressionTracker$1 = connect(function () {
   return null;
 }, mapDispatchToProps)(ImpressionTracker);
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
 var setQueryOptions = Actions.setQueryOptions,
-    updateQuery = Actions.updateQuery,
-    loadMore = Actions.loadMore,
-    setValue = Actions.setValue,
-    updateComponentProps = Actions.updateComponentProps,
-    setDefaultQuery = Actions.setDefaultQuery,
-    recordResultClick = Actions.recordResultClick;
+  updateQuery = Actions.updateQuery,
+  loadMore = Actions.loadMore,
+  setValue = Actions.setValue,
+  updateComponentProps = Actions.updateComponentProps,
+  setDefaultQuery = Actions.setDefaultQuery,
+  recordResultClick = Actions.recordResultClick;
 var isEqual$1 = helper.isEqual,
-    getQueryOptions = helper.getQueryOptions,
-    getClassName = helper.getClassName,
-    parseHits = helper.parseHits,
-    getCompositeAggsQuery = helper.getCompositeAggsQuery,
-    getResultStats = helper.getResultStats,
-    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
-    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
+  getQueryOptions = helper.getQueryOptions,
+  getClassName = helper.getClassName,
+  parseHits = helper.parseHits,
+  getCompositeAggsQuery = helper.getCompositeAggsQuery,
+  getResultStats = helper.getResultStats,
+  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var ReactiveList = {
   name: 'ReactiveList',
   components: {
@@ -277,13 +248,11 @@ var ReactiveList = {
   data: function data() {
     var currentPageState = 0;
     var defaultPage = this.defaultPage || -1;
-
     if (defaultPage >= 0) {
       currentPageState = defaultPage;
     } else if (this.currentPage) {
       currentPageState = Math.max(this.currentPage - 1, 0);
     }
-
     this.__state = {
       from: currentPageState * this.size,
       currentPageState: currentPageState
@@ -292,50 +261,27 @@ var ReactiveList = {
   },
   created: function created() {
     var _this = this;
-
-    var _this$$props = this.$props,
-        distinctField = _this$$props.distinctField,
-        distinctFieldConfig = _this$$props.distinctFieldConfig,
-        index = _this$$props.index; // no support for pagination and aggregationField together
-
+    // no support for pagination and aggregationField together
     if (this.pagination && this.aggregationField) {
       console.warn('Pagination is not supported when aggregationField is present. The list will be rendered with infinite scroll');
     }
-
-    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
-      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
-    }
-
-    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
-      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-    }
-
-    if (!this.enableAppbase && index) {
-      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-    }
-
     var defaultPage = this.defaultPage || -1;
-
     if (defaultPage >= 0) {
       this.currentPageState = defaultPage;
       this.from = this.currentPageState * this.$props.size;
     }
-
     this.internalComponent = this.$props.componentId + "__internal";
     this.sortOptionIndex = 0;
-
     if (this.defaultSortOption && this.sortOptions && Array.isArray(this.sortOptions)) {
       this.sortOptionIndex = this.sortOptions.findIndex(function (s) {
         return s.label === _this.defaultSortOption;
       });
     }
-
     if (this.urlSortOption) {
       this.sortOptionIndex = this.$props.sortOptions.findIndex(function (s) {
         return s.label === _this.urlSortOption;
       }) || 0;
     }
-
     this.updateComponentProps(this.componentId, {
       from: this.from
     }, componentTypes.reactiveList);
@@ -390,10 +336,10 @@ var ReactiveList = {
       return Math.ceil(this.total / this.$props.size) || 0;
     },
     hasPageChangeListener: function hasPageChangeListener() {
-      return this.$listeners && this.$listeners.pageChange;
+      return this.$attrs && this.$attrs.pageChange;
     },
     hasResultStatsListener: function hasResultStatsListener() {
-      return this.$listeners && this.$listeners.resultStats;
+      return this.$attrs && this.$attrs.resultStats;
     },
     stats: function stats() {
       return _extends({}, getResultStats(this), {
@@ -412,21 +358,17 @@ var ReactiveList = {
       var results = parseHits(this.hits) || [];
       var parsedPromotedResults = parseHits(this.promotedResults) || [];
       var filteredResults = results;
-
       if (parsedPromotedResults.length) {
         var ids = parsedPromotedResults.map(function (item) {
           return item._id;
         }).filter(Boolean);
-
         if (ids) {
           filteredResults = filteredResults.filter(function (item) {
             return !ids.includes(item._id);
           });
         }
-
         filteredResults = [].concat(parsedPromotedResults, filteredResults);
       }
-
       return withClickIds(filteredResults);
     }
   },
@@ -468,19 +410,16 @@ var ReactiveList = {
         this.$defaultQuery = newVal(null, this.$props);
         var query = extractQueryFromCustomQuery(this.$defaultQuery);
         var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
-
         if (queryOptions) {
           options = _extends({}, options, queryOptions);
-        } // Update calculated default query in store
-
-
+        }
+        // Update calculated default query in store
         updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props);
         this.setQueryOptions(this.$props.componentId, _extends({}, options, this.getAggsQuery()), !query);
         this.updateQuery({
           componentId: this.internalComponent,
           query: query
         }, true); // reset page because of query change
-
         this.currentPageState = 0;
         this.from = 0;
       }
@@ -502,7 +441,6 @@ var ReactiveList = {
     },
     hits: function hits(newVal, oldVal) {
       this.$emit('data', this.getData());
-
       if (this.shouldRenderPagination) {
         // called when page is changed
         if (this.isLoading && (oldVal || newVal)) {
@@ -520,7 +458,6 @@ var ReactiveList = {
             if (this.scrollOnChange) {
               window.scrollTo(0, 0);
             }
-
             this.from = 0;
           }
         }
@@ -544,7 +481,6 @@ var ReactiveList = {
           window.removeEventListener('scroll', this.scrollHandler);
         }
       } // handle window url history change (on native back and forth interactions)
-
     },
     defaultPage: function defaultPage(newVal, oldVal) {
       if (this.currentPageState !== newVal && oldVal !== newVal) {
@@ -556,46 +492,39 @@ var ReactiveList = {
     if (this.defaultPage < 0 && this.currentPage > 0) {
       this.setPageURL(this.$props.componentId, this.currentPage, this.$props.componentId, false, this.URLParams);
     }
-
     var options = getQueryOptions(this.$props);
     options.from = this.$data.from;
-
     if (this.sortOptions && this.sortOptions[this.sortOptionIndex]) {
       var _ref;
-
       var sortField = this.sortOptions[this.sortOptionIndex].dataField;
       var sortBy = this.sortOptions[this.sortOptionIndex].sortBy;
       options.sort = [(_ref = {}, _ref[sortField] = {
         order: sortBy
-      }, _ref)]; // To handle sort options for RS API
-
+      }, _ref)];
+      // To handle sort options for RS API
       this.updateComponentProps(this.componentId, {
         dataField: sortField,
         sortBy: sortBy
       }, componentTypes.reactiveList);
     } else if (this.$props.sortBy) {
       var _ref2;
-
       options.sort = [(_ref2 = {}, _ref2[this.$props.dataField] = {
         order: this.$props.sortBy
       }, _ref2)];
     } // Override sort query with defaultQuery's sort if defined
 
-
     this.$defaultQuery = null;
-
     if (this.$props.defaultQuery) {
       this.$defaultQuery = this.$props.defaultQuery();
-      options = _extends({}, options, getOptionsForCustomQuery(this.$defaultQuery)); // Update calculated default query in store
+      options = _extends({}, options, getOptionsForCustomQuery(this.$defaultQuery));
 
+      // Update calculated default query in store
       updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props);
-    } // execute is set to false at the time of mount
-
-
+    }
+    // execute is set to false at the time of mount
     var query = extractQueryFromCustomQuery(this.$defaultQuery);
     var execute = false;
     this.setQueryOptions(this.$props.componentId, _extends({}, options, this.getAggsQuery()), execute);
-
     if (this.$defaultQuery) {
       this.updateQuery({
         componentId: this.internalComponent,
@@ -608,131 +537,122 @@ var ReactiveList = {
       }, execute);
     } // query will be executed here
 
-
     if (this.showInfiniteScroll) {
       window.addEventListener('scroll', this.scrollHandler);
     }
   },
-  beforeDestroy: function beforeDestroy() {
+  beforeUnmount: function beforeUnmount() {
     if (this.showInfiniteScroll) {
       window.removeEventListener('scroll', this.scrollHandler);
     }
   },
   render: function render() {
-    var h = arguments[0];
+    var _this2 = this;
     var hits = this.$data.hits;
     var results = parseHits(hits) || [];
-    return h("div", {
+    return createVNode("div", {
       "style": this.$props.style,
       "class": this.$props.className
-    }, [this.isLoading && this.shouldRenderPagination && this.showInfiniteScroll && (this.$scopedSlots.loader || this.$props.loader), this.renderErrorComponent(), h(Flex, {
-      "attrs": {
-        "labelPosition": this.sortOptions ? 'right' : 'left'
-      },
+    }, [this.isLoading && this.shouldRenderPagination && this.showInfiniteScroll && (this.$slots.loader || this.$props.loader), this.renderErrorComponent(), createVNode(Flex, {
+      "labelPosition": this.sortOptions ? 'right' : 'left',
       "class": getClassName(this.$props.innerClass, 'resultsInfo')
-    }, [this.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats && results.length ? this.renderStats() : null]), !this.isLoading && hits && hits.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? h(Pagination, {
-      "attrs": {
-        "pages": this.$props.pages,
-        "totalPages": this.totalPages,
-        "currentPage": this.currentPageState,
-        "setPage": this.setPage,
-        "innerClass": this.$props.innerClass,
-        "prevLabel": this.$props.prevLabel,
-        "nextLabel": this.$props.nextLabel
-      }
-    }) : null, this.renderResults(), this.isLoading && !this.shouldRenderPagination ? this.$scopedSlots.loader || this.$props.loader || h("div", {
+    }, {
+      "default": function _default() {
+        return [_this2.sortOptions ? _this2.renderSortOptions() : null, _this2.$props.showResultStats && results.length ? _this2.renderStats() : null];
+      }
+    }), !this.isLoading && hits && hits.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? createVNode(Pagination, {
+      "pages": this.$props.pages,
+      "totalPages": this.totalPages,
+      "currentPage": this.currentPageState,
+      "setPage": this.setPage,
+      "innerClass": this.$props.innerClass,
+      "prevLabel": this.$props.prevLabel,
+      "nextLabel": this.$props.nextLabel
+    }, null) : null, this.renderResults(), this.isLoading && !this.shouldRenderPagination ? this.$slots.loader || this.$props.loader || createVNode("div", {
       "style": {
         textAlign: 'center',
         margin: '20px 0',
         color: '#666'
       }
-    }, ["Loading..."]) : null, this.shouldRenderPagination && (this.$props.paginationAt === 'bottom' || this.$props.paginationAt === 'both') ? h(Pagination, {
-      "attrs": {
-        "pages": this.$props.pages,
-        "totalPages": Math.ceil(this.$data.total / this.$props.size),
-        "currentPage": this.currentPageState,
-        "setPage": this.setPage,
-        "showEndPage": this.$props.showEndPage,
-        "innerClass": this.$props.innerClass,
-        "prevLabel": this.$props.prevLabel,
-        "nextLabel": this.$props.nextLabel
-      }
-    }) : null, this.url.endsWith('appbase.io') && results.length ? h(Flex, {
-      "attrs": {
-        "direction": "row-reverse"
-      },
+    }, [createTextVNode("Loading...")]) : null, this.shouldRenderPagination && (this.$props.paginationAt === 'bottom' || this.$props.paginationAt === 'both') ? createVNode(Pagination, {
+      "pages": this.$props.pages,
+      "totalPages": Math.ceil(this.$data.total / this.$props.size),
+      "currentPage": this.currentPageState,
+      "setPage": this.setPage,
+      "showEndPage": this.$props.showEndPage,
+      "innerClass": this.$props.innerClass,
+      "prevLabel": this.$props.prevLabel,
+      "nextLabel": this.$props.nextLabel
+    }, null) : null, this.url.endsWith('appbase.io') && results.length ? createVNode(Flex, {
+      "direction": "row-reverse",
       "class": getClassName(this.$props.innerClass, 'poweredBy')
-    }, [h(PoweredBy)]) : null]);
+    }, {
+      "default": function _default() {
+        return [createVNode(PoweredBy, null, null)];
+      }
+    }) : null]);
   },
   methods: {
     renderErrorComponent: function renderErrorComponent() {
-      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
-
+      var renderError = this.$slots.renderError || this.$props.renderError;
       if (renderError && this.error && !this.isLoading) {
         return isFunction(renderError) ? renderError(this.error) : renderError;
       }
-
       return null;
     },
     renderResults: function renderResults() {
-      var _this2 = this;
-
-      var h = this.$createElement;
+      var _this3 = this;
       var size = this.$props.size;
-      var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
-      var element = this.hasCustomRender ? this.getComponent() : h("div", {
+      var renderItem = this.$slots.renderItem || this.$props.renderItem;
+      var element = this.hasCustomRender ? this.getComponent() : createVNode("div", {
         "class": this.$props.listClass + " " + getClassName(this.$props.innerClass, 'list')
       }, [this.data.map(function (item, index) {
         return renderItem({
           item: item,
-          count: _this2.currentPageState * size + index + 1,
+          count: _this3.currentPageState * size + index + 1,
           triggerClickAnalytics: function triggerClickAnalytics() {
-            return _this2.triggerClickAnalytics(_this2.currentPageState * size + index);
+            return _this3.triggerClickAnalytics(_this3.currentPageState * size + index);
           }
         });
-      })]); // If analytics is set to true then render with impression tracker
-
-      return this.analytics ? h(ImpressionTracker$1, {
-        "attrs": {
-          "hits": this.data
+      })]);
+      // If analytics is set to true then render with impression tracker
+      return this.analytics ? createVNode(ImpressionTracker$1, {
+        "hits": this.data
+      }, _isSlot(element) ? element : {
+        "default": function _default() {
+          return [element];
         }
-      }, [element]) : element;
+      }) : element;
     },
     updateQueryOptions: function updateQueryOptions(props) {
       var options = getQueryOptions(props);
       options.from = this.$data.from;
-
       if (props.sortOptions && Array.isArray(props.sortOptions)) {
         var sortOptionIndex = props.defaultSortOption ? props.sortOptions.findIndex(function (s) {
           return s.label === props.defaultSortOption;
         }) : 0;
-
         if (props.sortOptions[sortOptionIndex]) {
           var _ref3;
-
           options.sort = [(_ref3 = {}, _ref3[props.sortOptions[sortOptionIndex].dataField] = {
             order: props.sortOptions[sortOptionIndex].sortBy
           }, _ref3)];
         }
       } else if (props.sortBy) {
         var _ref4;
-
         options.sort = [(_ref4 = {}, _ref4[props.dataField] = {
           order: props.sortBy
         }, _ref4)];
       }
-
       this.setQueryOptions(this.$props.componentId, _extends({}, options, this.getAggsQuery()), true);
     },
     getAggsQuery: function getAggsQuery() {
-      var _this$$props2 = this.$props,
-          size = _this$$props2.size,
-          aggregationField = _this$$props2.aggregationField;
+      var _this$$props = this.$props,
+        size = _this$$props.size,
+        aggregationField = _this$$props.aggregationField;
       var afterKey = this.$data.afterKey;
       var queryOptions = {
         size: size
       };
-
       if (aggregationField) {
         queryOptions.aggs = getCompositeAggsQuery({
           props: this.$props,
@@ -740,7 +660,6 @@ var ReactiveList = {
           showTopHits: true
         }).aggs;
       }
-
       return queryOptions;
     },
     scrollHandler: function scrollHandler() {
@@ -750,9 +669,9 @@ var ReactiveList = {
     },
     loadMore: function loadMore() {
       if (this.aggregationField && !this.afterKey) return;
-
       if (this.hits && !this.shouldRenderPagination && this.total > this.hits.length) {
-        var value = this.$data.from + this.$props.size; // If current hits length is less than the current from then it means
+        var value = this.$data.from + this.$props.size;
+        // If current hits length is less than the current from then it means
         // that there are no results present.
         // It can happen because of many reasons some of them are:
         // 1. Using the `collapse` query to remove results
@@ -763,11 +682,9 @@ var ReactiveList = {
         if (this.hits.length < value) {
           return;
         }
-
         var options = _extends({}, getQueryOptions(this.$props), this.getAggsQuery());
-
-        this.from = value; // Update default query to support pagination for aggregationField
-
+        this.from = value;
+        // Update default query to support pagination for aggregationField
         updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props);
         this.loadMoreAction(this.$props.componentId, _extends({}, options, {
           from: value
@@ -791,39 +708,30 @@ var ReactiveList = {
       }
     },
     renderStats: function renderStats() {
-      var h = this.$createElement;
-      var renderResultStats = this.$scopedSlots.renderResultStats || this.$props.renderResultStats;
-
+      var renderResultStats = this.$slots.renderResultStats || this.$props.renderResultStats;
       if (renderResultStats && this.$data.total) {
         return renderResultStats(this.stats);
       }
-
       if (this.stats.numberOfResults) {
-        return h("p", {
+        return createVNode("p", {
           "class": resultStats + " " + getClassName(this.$props.innerClass, 'resultStats')
-        }, [this.stats.numberOfResults, " results found in ", this.stats.time || 0, "ms"]);
+        }, [this.stats.numberOfResults, createTextVNode(" results found in "), this.stats.time || 0, createTextVNode("ms")]);
       }
-
       return null;
     },
     renderNoResult: function renderNoResult() {
-      var h = this.$createElement;
-      var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
-
-      if (this.$scopedSlots.renderNoResults) {
+      var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
+      if (this.$slots.renderNoResults) {
         return isFunction(renderNoResults) ? renderNoResults() : renderNoResults;
       }
-
-      return h("p", {
+      return createVNode("p", {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
     },
     handleSortChange: function handleSortChange(e) {
       var index = e.target.value;
-
       if (this.sortOptions && this.sortOptions[index]) {
         var _ref5;
-
         // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
         var options = getQueryOptions(this.$props);
         options.from = 0;
@@ -832,8 +740,8 @@ var ReactiveList = {
         options.sort = [(_ref5 = {}, _ref5[sortField] = {
           order: sortBy
         }, _ref5)];
-        this.sortOptionIndex = index; // To handle sort options for RS API
-
+        this.sortOptionIndex = index;
+        // To handle sort options for RS API
         this.updateComponentProps(this.componentId, {
           dataField: sortField,
           sortBy: sortBy
@@ -848,49 +756,36 @@ var ReactiveList = {
     },
     triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
       var docId = documentId;
-
       if (!docId) {
         var _this$getData = this.getData(),
-            data = _this$getData.data;
-
+          data = _this$getData.data;
         var hitData = data.find(function (hit) {
           return hit._click_id === searchPosition;
         });
-
         if (hitData && hitData._id) {
           docId = hitData._id;
         }
       }
-
       this.recordResultClick(searchPosition, docId);
     },
     renderSortOptions: function renderSortOptions() {
-      var h = this.$createElement;
-      return h("select", {
+      return createVNode("select", mergeProps(_transformOn({
+        change: this.handleSortChange
+      }), {
         "class": sortOptions + " " + getClassName(this.$props.innerClass, 'sortOptions'),
-        "attrs": {
-          "name": "sort-options",
-          "aria-label": "Sort options"
-        },
-        "on": {
-          "change": this.handleSortChange
-        },
-        "domProps": {
-          "value": this.sortOptionIndex
-        }
-      }, [this.sortOptions.map(function (sort, index) {
-        return h("option", {
+        "name": "sort-options",
+        "aria-label": "Sort options",
+        "value": this.sortOptionIndex
+      }), [this.sortOptions.map(function (sort, index) {
+        return createVNode("option", {
           "key": sort.label,
-          "domProps": {
-            "value": index
-          }
+          "value": index
         }, [sort.label]);
       })]);
     },
     withClickIds: function withClickIds(results) {
       var _this$getAllData = this.getAllData(),
-          base = _this$getAllData.base;
-
+        base = _this$getAllData.base;
       return results.map(function (result, index) {
         return _extends({}, result, {
           _click_id: base + index
@@ -900,11 +795,11 @@ var ReactiveList = {
     // Shape of the object to be returned in onData & render
     getAllData: function getAllData() {
       var size = this.size,
-          promotedResults = this.promotedResults,
-          aggregationData = this.aggregationData,
-          customData = this.customData,
-          currentPage = this.currentPage,
-          hits = this.hits;
+        promotedResults = this.promotedResults,
+        aggregationData = this.aggregationData,
+        customData = this.customData,
+        currentPage = this.currentPage,
+        hits = this.hits;
       var results = parseHits(hits) || [];
       var parsedPromotedResults = parseHits(promotedResults) || [];
       var base = currentPage * size;
@@ -920,10 +815,9 @@ var ReactiveList = {
     },
     getData: function getData() {
       var _this$getAllData2 = this.getAllData(),
-          promotedResults = _this$getAllData2.promotedResults,
-          aggregationData = _this$getAllData2.aggregationData,
-          customData = _this$getAllData2.customData;
-
+        promotedResults = _this$getAllData2.promotedResults,
+        aggregationData = _this$getAllData2.aggregationData,
+        customData = _this$getAllData2.customData;
       return {
         data: this.data,
         aggregationData: this.withClickIds(aggregationData || []),
@@ -935,23 +829,18 @@ var ReactiveList = {
     },
     getComponent: function getComponent$1() {
       var error = this.error,
-          isLoading = this.isLoading;
-
+        isLoading = this.isLoading;
       var data = _extends({
         error: error,
         loading: isLoading || false,
         loadMore: this.loadMore,
-        // TODO: Remove in v2
-        triggerAnalytics: this.triggerClickAnalytics,
         triggerClickAnalytics: this.triggerClickAnalytics,
         setPage: this.setPage
       }, this.getData());
-
       return getComponent(data, this);
     }
   }
 };
-
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1,
@@ -965,7 +854,6 @@ var mapStateToProps = function mapStateToProps(state, props) {
     total: state.hits[props.componentId] && state.hits[props.componentId].total,
     hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
     analytics: state.config && state.config.analytics,
-    enableAppbase: state.config.enableAppbase,
     url: state.config.url,
     error: state.error[props.componentId],
     afterKey: state.aggregations[props.componentId] && state.aggregations[props.componentId][props.aggregationField] && state.aggregations[props.componentId][props.aggregationField].after_key,
@@ -973,7 +861,6 @@ var mapStateToProps = function mapStateToProps(state, props) {
     isLoading: state.isLoading[props.componentId]
   };
 };
-
 var mapDispatchtoProps = {
   loadMoreAction: loadMore,
   setPageURL: setValue,
@@ -982,71 +869,60 @@ var mapDispatchtoProps = {
   updateComponentProps: updateComponentProps,
   setDefaultQuery: setDefaultQuery,
   recordResultClick: recordResultClick
-}; // Only used for SSR
-
+};
+// Only used for SSR
 ReactiveList.generateQueryOptions = function (props) {
   var options = getQueryOptions(props);
   var size = props.size,
-      dataField = props.dataField,
-      defaultSortOption = props.defaultSortOption,
-      sortOptionsNew = props.sortOptions,
-      currentPage = props.currentPage,
-      sortBy = props.sortBy;
+    dataField = props.dataField,
+    defaultSortOption = props.defaultSortOption,
+    sortOptionsNew = props.sortOptions,
+    currentPage = props.currentPage,
+    sortBy = props.sortBy;
   options.from = currentPage ? (currentPage - 1) * (size || 10) : 0;
   options.size = size || 10;
-
   var getSortOption = function getSortOption() {
     var _ref7;
-
     if (defaultSortOption) {
       var sortOption = sortOptionsNew.find(function (option) {
         return option.label === defaultSortOption;
       });
-
       if (sortOption) {
         var _ref6;
-
         return _ref6 = {}, _ref6[sortOption.dataField] = {
           order: sortOption.sortBy
         }, _ref6;
       }
     }
-
     return _ref7 = {}, _ref7[sortOptionsNew[0].dataField] = {
       order: sortOptionsNew[0].sortBy
     }, _ref7;
   };
-
   if (sortOptionsNew) {
     options.sort = [getSortOption()];
   } else if (sortBy) {
     var _ref8;
-
     options.sort = [(_ref8 = {}, _ref8[dataField] = {
       order: sortBy
     }, _ref8)];
   }
-
   return options;
 };
-
 ReactiveList.hasInternalComponent = function () {
   return true;
 };
-
-var RLConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(ReactiveList), {
+var RLConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(ReactiveList), {
   componentType: componentTypes.reactiveList,
   internalComponent: ReactiveList.hasInternalComponent()
-});
-
-ReactiveList.install = function (Vue) {
-  Vue.component(ReactiveList.name, RLConnected);
+}));
+RLConnected.name = ReactiveList.name;
+RLConnected.install = function (Vue) {
+  Vue.component(RLConnected.name, RLConnected);
   Vue.component(ResultListWrapper.name, ResultListWrapper);
   Vue.component(ResultCardsWrapper.name, ResultCardsWrapper);
-}; // Add componentType for SSR
-
-
-ReactiveList.componentType = componentTypes.reactiveList;
+};
+// Add componentType for SSR
+RLConnected.componentType = componentTypes.reactiveList;
 
-export default ReactiveList;
+export default RLConnected;
 export { RLConnected };