@appbaseio/reactivesearch-vue 1.16.0-alpha.6 → 1.16.0-alpha.62

package/dist/es/ReactiveList.js

@@ -1,33 +1,26 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import { withClickIds } from '@appbaseio/reactivecore/lib/utils/helper';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-27cc8574.js';
-import { t as types } from './vueTypes-98d938a9.js';
-import { P as Pagination } from './Pagination-c2a00175.js';
+import './Button-d8bc15ea.js';
+import { t as types } from './vueTypes-9326e0be.js';
+import { P as Pagination } from './Pagination-3f350098.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-185b6266.js';
-import { C as ComponentWrapper } from './ComponentWrapper-c4c91949.js';
+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-f0217338.js';
-import { c as container } from './ListItem-d22510c9.js';
-import { c as container$1 } from './Card-1f93780d.js';
-import { F as Flex } from './Flex-16d1103a.js';
+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';
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: 110px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var PoweredByImage = styled('img')(_templateObject());
+var _templateObject;
+var PoweredByImage = styled('img')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\twidth: 110px;\n"])));
 
 var PoweredBy = {
   functional: true,
@@ -84,27 +77,9 @@ ResultCardsWrapper.install = function (Vue) {
   Vue.component(ResultCardsWrapper.name, ResultCardsWrapper);
 };
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: #424242;\n\theight: 32px;\n\tfont-size: 0.82rem;\n\tpadding: 0 25px 0 10px;\n\tbackground: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)\n\t\tno-repeat 95% 50%;\n\tbackground-color: #fff;\n\t-moz-appearance: none;\n\t-webkit-appearance: none;\n\tappearance: none;\n\t-webkit-border-radius: 0;\n\tborder-radius: 0;\n\tborder: 0;\n\toutline: 1px solid #ddd;\n\toutline-offset: -1px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\tflex-grow: 1;\n\tfont-size: 0.82rem;\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var resultStats = css(_templateObject$1());
-var sortOptions = css(_templateObject2());
+var _templateObject$1, _templateObject2;
+var resultStats = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\tflex-grow: 1;\n\tfont-size: 0.82rem;\n"])));
+var sortOptions = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tcolor: #424242;\n\theight: 32px;\n\tfont-size: 0.82rem;\n\tpadding: 0 25px 0 10px;\n\tbackground: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)\n\t\tno-repeat 95% 50%;\n\tbackground-color: #fff;\n\t-moz-appearance: none;\n\t-webkit-appearance: none;\n\tappearance: none;\n\t-webkit-border-radius: 0;\n\tborder-radius: 0;\n\tborder: 0;\n\toutline: 1px solid #ddd;\n\toutline-offset: -1px;\n"])));
 
 var recordImpressions = Actions.recordImpressions;
 var isEqual = helper.isEqual;
@@ -278,8 +253,7 @@ var ImpressionTracker$1 = connect(function () {
   return null;
 }, mapDispatchToProps)(ImpressionTracker);
 
-var setStreaming = Actions.setStreaming,
-    setQueryOptions = Actions.setQueryOptions,
+var setQueryOptions = Actions.setQueryOptions,
     updateQuery = Actions.updateQuery,
     loadMore = Actions.loadMore,
     setValue = Actions.setValue,
@@ -290,9 +264,10 @@ var isEqual$1 = helper.isEqual,
     getQueryOptions = helper.getQueryOptions,
     getClassName = helper.getClassName,
     parseHits = helper.parseHits,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
     getCompositeAggsQuery = helper.getCompositeAggsQuery,
-    getResultStats = helper.getResultStats;
+    getResultStats = helper.getResultStats,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var ReactiveList = {
   name: 'ReactiveList',
   components: {
@@ -300,16 +275,17 @@ var ReactiveList = {
     ResultCardsWrapper: ResultCardsWrapper
   },
   data: function data() {
-    var props = this.$props;
     var currentPageState = 0;
+    var defaultPage = this.defaultPage || -1;
 
-    if (props.currentPage) {
-      currentPageState = Math.max(props.currentPage - 1, 0);
+    if (defaultPage >= 0) {
+      currentPageState = defaultPage;
+    } else if (this.currentPage) {
+      currentPageState = Math.max(this.currentPage - 1, 0);
     }
 
     this.__state = {
-      from: currentPageState * props.size,
-      isLoading: true,
+      from: currentPageState * this.size,
       currentPageState: currentPageState
     };
     return this.__state;
@@ -319,29 +295,47 @@ var ReactiveList = {
 
     var _this$$props = this.$props,
         distinctField = _this$$props.distinctField,
-        distinctFieldConfig = _this$$props.distinctFieldConfig; // no support for pagination and aggregationField together
+        distinctFieldConfig = _this$$props.distinctFieldConfig,
+        index = _this$$props.index; // 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.config.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+    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.config.enableAppbase && (distinctField || distinctFieldConfig)) {
+    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.defaultPage >= 0) {
-      this.currentPageState = this.defaultPage;
+    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 = this.defaultSortOption ? this.sortOptions.findIndex(function (s) {
-      return s.label === _this.defaultSortOption;
-    }) : 0;
+    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);
@@ -351,7 +345,7 @@ var ReactiveList = {
   },
   props: {
     currentPage: VueTypes.number.def(0),
-    includeFields: types.includeFields.def(['*']),
+    includeFields: types.includeFields,
     // component props
     className: types.string,
     componentId: types.stringRequired,
@@ -360,7 +354,7 @@ var ReactiveList = {
     aggregationSize: VueTypes.number,
     defaultQuery: types.func,
     defaultSortOption: types.string,
-    excludeFields: types.excludeFields.def([]),
+    excludeFields: types.excludeFields,
     innerClass: types.style,
     listClass: VueTypes.string.def(''),
     loader: types.title,
@@ -372,7 +366,7 @@ var ReactiveList = {
     pages: VueTypes.number.def(5),
     pagination: VueTypes.bool.def(false),
     infiniteScroll: VueTypes.bool.def(true),
-    paginationAt: types.paginationAt.def('bottom'),
+    paginationAt: VueTypes.oneOf(['top', 'bottom', 'both']).def('bottom'),
     react: types.react,
     scrollOnChange: VueTypes.bool.def(true),
     showResultStats: VueTypes.bool.def(true),
@@ -380,12 +374,12 @@ var ReactiveList = {
     size: VueTypes.number.def(10),
     sortBy: types.sortBy,
     sortOptions: types.sortOptions,
-    stream: types.bool,
     URLParams: VueTypes.bool.def(false),
     prevLabel: types.string,
     nextLabel: types.string,
     distinctField: types.string,
-    distinctFieldConfig: types.props
+    distinctFieldConfig: types.props,
+    index: VueTypes.string
   },
   computed: {
     shouldRenderPagination: function shouldRenderPagination() {
@@ -401,12 +395,9 @@ var ReactiveList = {
       return this.$listeners && this.$listeners.resultStats;
     },
     stats: function stats() {
-      var _this$getAllData = this.getAllData(),
-          filteredResults = _this$getAllData.filteredResults;
-
-      return _extends(_extends({}, getResultStats(this)), {}, {
+      return _extends({}, getResultStats(this), {
         currentPage: this.currentPageState,
-        displayedResults: filteredResults.length
+        displayedResults: this.data.length
       });
     },
     hasCustomRender: function hasCustomRender() {
@@ -415,6 +406,27 @@ var ReactiveList = {
     showInfiniteScroll: function showInfiniteScroll() {
       // Pagination has higher priority then infinite scroll
       return this.infiniteScroll && !this.shouldRenderPagination;
+    },
+    data: function data() {
+      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);
     }
   },
   watch: {
@@ -453,24 +465,16 @@ var ReactiveList = {
         var options = getQueryOptions(this.$props);
         options.from = 0;
         this.$defaultQuery = newVal(null, this.$props);
-
-        var _ref = this.$defaultQuery || {},
-            sort = _ref.sort,
-            query = _ref.query;
-
-        if (sort) {
-          options.sort = this.$defaultQuery.sort;
-        }
-
-        var queryOptions = getOptionsFromQuery(this.$defaultQuery);
+        var query = extractQueryFromCustomQuery(this.$defaultQuery);
+        var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
 
         if (queryOptions) {
-          options = _extends(_extends({}, options), getOptionsFromQuery(this.$defaultQuery));
+          options = _extends({}, options, queryOptions);
         } // Update calculated default query in store
 
 
         updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props);
-        this.setQueryOptions(this.$props.componentId, _extends(_extends({}, options), this.getAggsQuery()), !query);
+        this.setQueryOptions(this.$props.componentId, _extends({}, options, this.getAggsQuery()), !query);
         this.updateQuery({
           componentId: this.internalComponent,
           query: query
@@ -480,14 +484,6 @@ var ReactiveList = {
         this.from = 0;
       }
     },
-    stream: function stream(newVal, oldVal) {
-      if (oldVal !== newVal) {
-        this.setStreaming(this.$props.componentId, newVal);
-      }
-    },
-    streamHits: function streamHits() {
-      this.$emit('data', this.getData());
-    },
     promotedResults: function promotedResults(newVal, oldVal) {
       if (!isEqual$1(newVal, oldVal)) {
         this.$emit('data', this.getData());
@@ -504,7 +500,7 @@ var ReactiveList = {
       }
     },
     hits: function hits(newVal, oldVal) {
-      this.$emit('data', this.getAllData());
+      this.$emit('data', this.getData());
 
       if (this.shouldRenderPagination) {
         // called when page is changed
@@ -549,45 +545,39 @@ var ReactiveList = {
       } // handle window url history change (on native back and forth interactions)
 
     },
-    defaultPage: function defaultPage(newVal) {
-      if (this.currentPageState !== newVal && this.defaultPage !== newVal) {
+    defaultPage: function defaultPage(newVal, oldVal) {
+      if (this.currentPageState !== newVal && oldVal !== newVal) {
         this.setPage(newVal >= 0 ? newVal : 0);
       }
     }
   },
   mounted: function mounted() {
-    if (this.$props.stream) {
-      this.setStreaming(this.$props.componentId, true);
-    }
-
     if (this.defaultPage < 0 && this.currentPage > 0) {
-      if (this.$props.URLParams) {
-        this.setPageURL(this.$props.componentId, this.currentPage, this.$props.componentId, false, true);
-      }
+      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.$props.sortOptions) {
-      var _ref2;
+    if (this.sortOptions && this.sortOptions[this.sortOptionIndex]) {
+      var _ref;
 
-      var sortField = this.$props.sortOptions[this.sortOptionIndex].dataField;
-      var sortBy = this.$props.sortOptions[this.sortOptionIndex].sortBy;
-      options.sort = [(_ref2 = {}, _ref2[sortField] = {
+      var sortField = this.sortOptions[this.sortOptionIndex].dataField;
+      var sortBy = this.sortOptions[this.sortOptionIndex].sortBy;
+      options.sort = [(_ref = {}, _ref[sortField] = {
         order: sortBy
-      }, _ref2)]; // 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 _ref3;
+      var _ref2;
 
-      options.sort = [(_ref3 = {}, _ref3[this.$props.dataField] = {
+      options.sort = [(_ref2 = {}, _ref2[this.$props.dataField] = {
         order: this.$props.sortBy
-      }, _ref3)];
+      }, _ref2)];
     } // Override sort query with defaultQuery's sort if defined
 
 
@@ -595,22 +585,15 @@ var ReactiveList = {
 
     if (this.$props.defaultQuery) {
       this.$defaultQuery = this.$props.defaultQuery();
-      options = _extends(_extends({}, options), getOptionsFromQuery(this.$defaultQuery));
-
-      if (this.$defaultQuery.sort) {
-        options.sort = this.$defaultQuery.sort;
-      } // 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
 
 
-    var _ref4 = this.$defaultQuery || {},
-        query = _ref4.query;
-
+    var query = extractQueryFromCustomQuery(this.$defaultQuery);
     var execute = false;
-    this.setQueryOptions(this.$props.componentId, _extends(_extends({}, options), this.getAggsQuery()), execute);
+    this.setQueryOptions(this.$props.componentId, _extends({}, options, this.getAggsQuery()), execute);
 
     if (this.$defaultQuery) {
       this.updateQuery({
@@ -638,16 +621,15 @@ var ReactiveList = {
     var h = arguments[0];
     var hits = this.$data.hits;
     var results = parseHits(hits) || [];
-    var streamResults = parseHits(this.$data.streamHits) || [];
     return h("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.$props.sortOptions ? 'right' : 'left'
+        "labelPosition": this.sortOptions ? 'right' : 'left'
       },
       "class": getClassName(this.$props.innerClass, 'resultsInfo')
-    }, [this.$props.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats ? this.renderStats() : null]), !this.isLoading && results.length === 0 && streamResults.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? h(Pagination, {
+    }, [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,
@@ -657,7 +639,7 @@ var ReactiveList = {
         "prevLabel": this.$props.prevLabel,
         "nextLabel": this.$props.nextLabel
       }
-    }) : null, this.renderResults(), this.isLoading && !this.shouldRenderPagination ? this.$props.loader || h("div", {
+    }) : null, this.renderResults(), this.isLoading && !this.shouldRenderPagination ? this.$scopedSlots.loader || this.$props.loader || h("div", {
       "style": {
         textAlign: 'center',
         margin: '20px 0',
@@ -674,7 +656,7 @@ var ReactiveList = {
         "prevLabel": this.$props.prevLabel,
         "nextLabel": this.$props.nextLabel
       }
-    }) : null, this.config.url.endsWith('appbase.io') && results.length ? h(Flex, {
+    }) : null, this.url.endsWith('appbase.io') && results.length ? h(Flex, {
       "attrs": {
         "direction": "row-reverse"
       },
@@ -696,26 +678,13 @@ var ReactiveList = {
 
       var h = this.$createElement;
       var size = this.$props.size;
-      var hits = this.$data.hits;
-      var results = parseHits(hits) || [];
-      var streamResults = parseHits(this.$data.streamHits) || [];
-      var filteredResults = results;
       var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
-
-      if (streamResults.length) {
-        var ids = streamResults.map(function (item) {
-          return item._id;
-        });
-        filteredResults = filteredResults.filter(function (item) {
-          return !ids.includes(item._id);
-        });
-      }
-
       var element = this.hasCustomRender ? this.getComponent() : h("div", {
         "class": this.$props.listClass + " " + getClassName(this.$props.innerClass, 'list')
-      }, [[].concat(streamResults, filteredResults).map(function (item, index) {
+      }, [this.data.map(function (item, index) {
         return renderItem({
           item: item,
+          count: _this2.currentPageState * size + index + 1,
           triggerClickAnalytics: function triggerClickAnalytics() {
             return _this2.triggerClickAnalytics(_this2.currentPageState * size + index);
           }
@@ -724,7 +693,7 @@ var ReactiveList = {
 
       return this.analytics ? h(ImpressionTracker$1, {
         "attrs": {
-          "hits": filteredResults
+          "hits": this.data
         }
       }, [element]) : element;
     },
@@ -732,24 +701,27 @@ var ReactiveList = {
       var options = getQueryOptions(props);
       options.from = this.$data.from;
 
-      if (props.sortOptions) {
-        var _ref5;
-
+      if (props.sortOptions && Array.isArray(props.sortOptions)) {
         var sortOptionIndex = props.defaultSortOption ? props.sortOptions.findIndex(function (s) {
           return s.label === props.defaultSortOption;
         }) : 0;
-        options.sort = [(_ref5 = {}, _ref5[props.sortOptions[sortOptionIndex].dataField] = {
-          order: props.sortOptions[sortOptionIndex].sortBy
-        }, _ref5)];
+
+        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 _ref6;
+        var _ref4;
 
-        options.sort = [(_ref6 = {}, _ref6[props.dataField] = {
+        options.sort = [(_ref4 = {}, _ref4[props.dataField] = {
           order: props.sortBy
-        }, _ref6)];
+        }, _ref4)];
       }
 
-      this.setQueryOptions(this.$props.componentId, _extends(_extends({}, options), this.getAggsQuery()), true);
+      this.setQueryOptions(this.$props.componentId, _extends({}, options, this.getAggsQuery()), true);
     },
     getAggsQuery: function getAggsQuery() {
       var _this$$props2 = this.$props,
@@ -791,12 +763,12 @@ var ReactiveList = {
           return;
         }
 
-        var options = _extends(_extends({}, getQueryOptions(this.$props)), this.getAggsQuery());
+        var options = _extends({}, getQueryOptions(this.$props), this.getAggsQuery());
 
         this.from = value; // Update default query to support pagination for aggregationField
 
         updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props);
-        this.loadMoreAction(this.$props.componentId, _extends(_extends({}, options), {}, {
+        this.loadMoreAction(this.$props.componentId, _extends({}, options, {
           from: value
         }), true, !!this.aggregationField);
       }
@@ -811,13 +783,10 @@ var ReactiveList = {
         options.from = this.$data.from;
         this.from = value;
         this.currentPageState = page;
-        this.loadMoreAction(this.$props.componentId, _extends(_extends({}, options), {}, {
+        this.loadMoreAction(this.$props.componentId, _extends({}, options, {
           from: value
         }), false);
-
-        if (this.$props.URLParams) {
-          this.setPageURL(this.$props.componentId, page + 1, this.$props.componentId, false, true);
-        }
+        this.setPageURL(this.$props.componentId, page + 1, this.$props.componentId, false, this.URLParams);
       }
     },
     renderStats: function renderStats() {
@@ -831,7 +800,7 @@ var ReactiveList = {
       if (this.stats.numberOfResults) {
         return h("p", {
           "class": resultStats + " " + getClassName(this.$props.innerClass, 'resultStats')
-        }, [this.stats.numberOfResults, " results found in ", this.stats.time, "ms"]);
+        }, [this.stats.numberOfResults, " results found in ", this.stats.time || 0, "ms"]);
       }
 
       return null;
@@ -839,31 +808,42 @@ var ReactiveList = {
     renderNoResult: function renderNoResult() {
       var h = this.$createElement;
       var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
+
+      if (this.$scopedSlots.renderNoResults) {
+        return isFunction(renderNoResults) ? renderNoResults() : renderNoResults;
+      }
+
       return h("p", {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
     },
     handleSortChange: function handleSortChange(e) {
-      var _ref7;
+      var index = e.target.value;
 
-      var index = e.target.value; // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
-
-      var options = getQueryOptions(this.$props);
-      options.from = 0;
-      var sortField = this.$props.sortOptions[index].dataField;
-      var sortBy = this.$props.sortOptions[index].sortBy;
-      options.sort = [(_ref7 = {}, _ref7[sortField] = {
-        order: sortBy
-      }, _ref7)];
-      this.sortOptionIndex = index; // To handle sort options for RS API
+      if (this.sortOptions && this.sortOptions[index]) {
+        var _ref5;
 
-      this.updateComponentProps(this.componentId, {
-        dataField: sortField,
-        sortBy: sortBy
-      }, componentTypes.reactiveList);
-      this.setQueryOptions(this.$props.componentId, options, true);
-      this.currentPageState = 0;
-      this.from = 0;
+        // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
+        var options = getQueryOptions(this.$props);
+        options.from = 0;
+        var sortField = this.sortOptions[index].dataField;
+        var sortBy = this.sortOptions[index].sortBy;
+        options.sort = [(_ref5 = {}, _ref5[sortField] = {
+          order: sortBy
+        }, _ref5)];
+        this.sortOptionIndex = index; // To handle sort options for RS API
+
+        this.updateComponentProps(this.componentId, {
+          dataField: sortField,
+          sortBy: sortBy
+        }, componentTypes.reactiveList);
+        this.setQueryOptions(this.$props.componentId, options, true);
+        this.setPage(0);
+        this.currentPageState = 0;
+        this.from = 0;
+        var sortOption = this.$props.sortOptions[this.sortOptionIndex] ? this.$props.sortOptions[this.sortOptionIndex].label : null;
+        this.setPageURL(this.$props.componentId + "sortOption", sortOption, this.$props.componentId + "sortOption", false, this.$props.URLParams);
+      }
     },
     triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
       var docId = documentId;
@@ -897,7 +877,7 @@ var ReactiveList = {
         "domProps": {
           "value": this.sortOptionIndex
         }
-      }, [this.$props.sortOptions.map(function (sort, index) {
+      }, [this.sortOptions.map(function (sort, index) {
         return h("option", {
           "key": sort.label,
           "domProps": {
@@ -907,11 +887,11 @@ var ReactiveList = {
       })]);
     },
     withClickIds: function withClickIds(results) {
-      var _this$getAllData2 = this.getAllData(),
-          base = _this$getAllData2.base;
+      var _this$getAllData = this.getAllData(),
+          base = _this$getAllData.base;
 
       return results.map(function (result, index) {
-        return _extends(_extends({}, result), {}, {
+        return _extends({}, result, {
           _click_id: base + index
         });
       });
@@ -923,41 +903,12 @@ var ReactiveList = {
           aggregationData = this.aggregationData,
           customData = this.customData,
           currentPage = this.currentPage,
-          hits = this.hits,
-          streamHits = this.streamHits;
+          hits = this.hits;
       var results = parseHits(hits) || [];
-      var streamResults = parseHits(streamHits) || [];
       var parsedPromotedResults = parseHits(promotedResults) || [];
-      var filteredResults = results;
       var base = currentPage * size;
-
-      if (streamResults.length) {
-        var ids = streamResults.map(function (item) {
-          return item._id;
-        });
-        filteredResults = filteredResults.filter(function (item) {
-          return !ids.includes(item._id);
-        });
-      }
-
-      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(streamResults, parsedPromotedResults, filteredResults);
-      }
-
       return {
         results: results,
-        streamResults: streamResults,
-        filteredResults: filteredResults,
         customData: customData || {},
         promotedResults: parsedPromotedResults,
         aggregationData: aggregationData,
@@ -967,18 +918,15 @@ var ReactiveList = {
       };
     },
     getData: function getData() {
-      var _this$getAllData3 = this.getAllData(),
-          streamResults = _this$getAllData3.streamResults,
-          filteredResults = _this$getAllData3.filteredResults,
-          promotedResults = _this$getAllData3.promotedResults,
-          aggregationData = _this$getAllData3.aggregationData,
-          customData = _this$getAllData3.customData;
+      var _this$getAllData2 = this.getAllData(),
+          promotedResults = _this$getAllData2.promotedResults,
+          aggregationData = _this$getAllData2.aggregationData,
+          customData = _this$getAllData2.customData;
 
       return {
-        data: this.withClickIds(filteredResults),
+        data: this.data,
         aggregationData: this.withClickIds(aggregationData || []),
-        streamData: this.withClickIds(streamResults),
-        promotedData: this.withClickIds(promotedResults),
+        promotedData: this.withClickIds(promotedResults || []),
         rawData: this.rawData,
         resultStats: this.stats,
         customData: customData
@@ -990,7 +938,7 @@ var ReactiveList = {
 
       var data = _extends({
         error: error,
-        loading: isLoading,
+        loading: isLoading || false,
         loadMore: this.loadMore,
         // TODO: Remove in v2
         triggerAnalytics: this.triggerClickAnalytics,
@@ -1005,22 +953,23 @@ var ReactiveList = {
 
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
-    defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1 || -1,
+    defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1,
+    urlSortOption: state.selectedValues[props.componentId + "sortOption"] && state.selectedValues[props.componentId + "sortOption"].value,
     hits: state.hits[props.componentId] && state.hits[props.componentId].hits,
     rawData: state.rawData[props.componentId],
-    aggregationData: state.compositeAggregations[props.componentId] || [],
-    promotedResults: state.promotedResults[props.componentId] || [],
+    aggregationData: state.compositeAggregations[props.componentId],
+    promotedResults: state.promotedResults[props.componentId],
     customData: state.customData[props.componentId],
-    streamHits: state.streamHits[props.componentId],
-    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+    time: state.hits[props.componentId] && state.hits[props.componentId].time,
     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,
-    config: state.config,
+    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,
     componentProps: state.props[props.componentId],
-    isLoading: state.isLoading[props.componentId] || false
+    isLoading: state.isLoading[props.componentId]
   };
 };
 
@@ -1028,7 +977,6 @@ var mapDispatchtoProps = {
   loadMoreAction: loadMore,
   setPageURL: setValue,
   setQueryOptions: setQueryOptions,
-  setStreaming: setStreaming,
   updateQuery: updateQuery,
   updateComponentProps: updateComponentProps,
   setDefaultQuery: setDefaultQuery,
@@ -1036,11 +984,7 @@ var mapDispatchtoProps = {
 }; // Only used for SSR
 
 ReactiveList.generateQueryOptions = function (props) {
-  // simulate default (includeFields and excludeFields) props to generate consistent query
-  var options = getQueryOptions(_extends({
-    includeFields: ['*'],
-    excludeFields: []
-  }, props));
+  var options = getQueryOptions(props);
   var size = props.size,
       dataField = props.dataField,
       defaultSortOption = props.defaultSortOption,
@@ -1051,7 +995,7 @@ ReactiveList.generateQueryOptions = function (props) {
   options.size = size || 10;
 
   var getSortOption = function getSortOption() {
-    var _ref9;
+    var _ref7;
 
     if (defaultSortOption) {
       var sortOption = sortOptionsNew.find(function (option) {
@@ -1059,35 +1003,39 @@ ReactiveList.generateQueryOptions = function (props) {
       });
 
       if (sortOption) {
-        var _ref8;
+        var _ref6;
 
-        return _ref8 = {}, _ref8[sortOption.dataField] = {
+        return _ref6 = {}, _ref6[sortOption.dataField] = {
           order: sortOption.sortBy
-        }, _ref8;
+        }, _ref6;
       }
     }
 
-    return _ref9 = {}, _ref9[sortOptionsNew[0].dataField] = {
+    return _ref7 = {}, _ref7[sortOptionsNew[0].dataField] = {
       order: sortOptionsNew[0].sortBy
-    }, _ref9;
+    }, _ref7;
   };
 
   if (sortOptionsNew) {
     options.sort = [getSortOption()];
   } else if (sortBy) {
-    var _ref10;
+    var _ref8;
 
-    options.sort = [(_ref10 = {}, _ref10[dataField] = {
+    options.sort = [(_ref8 = {}, _ref8[dataField] = {
       order: sortBy
-    }, _ref10)];
+    }, _ref8)];
   }
 
   return options;
 };
 
+ReactiveList.hasInternalComponent = function () {
+  return true;
+};
+
 var RLConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(ReactiveList), {
   componentType: componentTypes.reactiveList,
-  internalComponent: true
+  internalComponent: ReactiveList.hasInternalComponent()
 });
 
 ReactiveList.install = function (Vue) {