@appbaseio/reactivesearch-vue 1.16.0-alpha.3 → 1.16.0-alpha.30

package/dist/cjs/ListItem-933c27e4.js

@@ -0,0 +1,46 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
+var emotion = require('emotion');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
+var polished = require('polished');
+require('./Title-39765ee6.js');
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var container = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tborder-radius: 0.25rem;\n\toverflow: hidden;\n"])));
+var smallImage = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100px;\n\theight: 100px;\n"])));
+var Image = styled__default('div')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 160px;\n\theight: 160px;\n\t", ";\n\tmargin: 0;\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-image: ", ";\n"])), function (props) {
+  return props.small ? smallImage : null;
+}, function (props) {
+  return "url(" + props.src + ")";
+});
+var ListItem = styled__default('a')(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\n\t\tline-height: 1.2rem;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmargin: 0;\n\t\tpadding: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tborder: 1px solid #eee;\n\n\t\t&:hover, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fff';
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.3, theme.colors.backgroundColor) : polished.lighten(0.68, theme.colors.textColor);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.textColor;
+}, function (props) {
+  return props.href ? 'cursor: pointer' : null;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.2, theme.colors.backgroundColor) : '#fdfefd';
+}, function (props) {
+  if (props.image) {
+    return props.small ? 'calc(100% - 100px)' : 'calc(100% - 160px)';
+  }
+
+  return '100%';
+}, function (props) {
+  return props.image ? '10px' : 0;
+});
+
+exports.Image = Image;
+exports.ListItem = ListItem;
+exports.container = container;

package/dist/cjs/MultiDropdownList.js

@@ -6,25 +6,26 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-280a574c.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var Button = require('./Button-78d8bc26.js');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var Button = require('./Button-d2f1aeda.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-e0583d76.js');
-var ComponentWrapper = require('./ComponentWrapper-5a0a8849.js');
-var Title = require('./Title-e9beb554.js');
-require('./Input-643d02a7.js');
+var index = require('./index-2a8358cd.js');
+var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
+var Title = require('./Title-39765ee6.js');
+require('./CancelSvg-82021d23.js');
+require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-require('./DownShift-b09da079.js');
-var Container = require('./Container-f84e72fc.js');
-var utils = require('./utils-d1ea9f95.js');
-var DropDown = require('./DropDown-c66be1a8.js');
+var Container = require('./Container-8a08d663.js');
+require('@appbaseio/reactivecore/lib/utils/suggestions');
+var utils = require('./utils-23afb20b.js');
+var DropDown = require('./DropDown-0359da33.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -81,12 +82,21 @@ var MultiDropdownList = {
     showMissing: VueTypes.bool.def(false),
     missingLabel: VueTypes.string.def('N/A'),
     showSearch: VueTypes.bool.def(false),
+    showClear: VueTypes.bool.def(false),
     showLoadMore: VueTypes.bool.def(false),
     loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
-    nestedField: vueTypes.types.string
+    nestedField: vueTypes.types.string,
+    index: VueTypes.string,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   created: function created() {
-    // Set custom and default queries in store
+    if (!this.enableAppbase && this.$props.index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+
+    var props = this.$props;
+    this.modifiedOptions = this.options && this.options[props.dataField] ? this.options[props.dataField].buckets : []; // Set custom and default queries in store
+
     index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
     index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
   },
@@ -124,33 +134,35 @@ var MultiDropdownList = {
     options: function options(newVal, oldVal) {
       var _this2 = this;
 
-      checkPropChange(oldVal, newVal, function () {
-        var _this2$$props = _this2.$props,
-            showLoadMore = _this2$$props.showLoadMore,
-            dataField = _this2$$props.dataField;
-        var modifiedOptions = _this2.$data.modifiedOptions;
-
-        if (showLoadMore) {
-          // append options with showLoadMore
-          var buckets = newVal[dataField].buckets;
-          var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
-            return {
-              key: bucket.key[dataField],
-              doc_count: bucket.doc_count
+      if (newVal) {
+        checkPropChange(oldVal, newVal, function () {
+          var _this2$$props = _this2.$props,
+              showLoadMore = _this2$$props.showLoadMore,
+              dataField = _this2$$props.dataField;
+          var modifiedOptions = _this2.$data.modifiedOptions;
+
+          if (showLoadMore) {
+            // append options with showLoadMore
+            var buckets = newVal[dataField].buckets;
+            var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
+              return {
+                key: bucket.key[dataField],
+                doc_count: bucket.doc_count
+              };
+            }));
+            var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
+
+            var isLastBucket = !buckets.length;
+            _this2.after = {
+              after: after
             };
-          }));
-          var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
-
-          var isLastBucket = !buckets.length;
-          _this2.after = {
-            after: after
-          };
-          _this2.isLastBucket = isLastBucket;
-          _this2.modifiedOptions = nextOptions;
-        } else {
-          _this2.modifiedOptions = newVal[_this2.$props.dataField] ? newVal[_this2.$props.dataField].buckets : [];
-        }
-      });
+            _this2.isLastBucket = isLastBucket;
+            _this2.modifiedOptions = nextOptions;
+          } else {
+            _this2.modifiedOptions = newVal[_this2.$props.dataField] ? newVal[_this2.$props.dataField].buckets : [];
+          }
+        });
+      }
     },
     size: function size() {
       this.updateQueryOptions(this.$props);
@@ -193,13 +205,22 @@ var MultiDropdownList = {
     var renderErrorCalc = this.$scopedSlots.renderError || renderError;
     var renderLabelCalc = this.$scopedSlots.renderLabel || renderLabel;
     var isLastBucket = this.$data.isLastBucket;
+    var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
     var selectAll = [];
 
     if (renderErrorCalc && this.error) {
       return index.isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
     }
 
-    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0) {
+    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
+      if (renderNoResults && index.isFunction(renderNoResults)) {
+        return h("div", [renderNoResults()]);
+      }
+
+      if (renderNoResults && !index.isFunction(renderNoResults)) {
+        return renderNoResults;
+      }
+
       return null;
     }
 
@@ -219,7 +240,7 @@ var MultiDropdownList = {
         "items": [].concat(selectAll, this.$data.modifiedOptions.filter(function (item) {
           return String(item.key).trim().length;
         }).map(function (item) {
-          return _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, item), {}, {
+          return _rollupPluginBabelHelpers._extends({}, item, {
             key: String(item.key)
           });
         })),
@@ -235,6 +256,8 @@ var MultiDropdownList = {
         "renderItem": renderItemCalc,
         "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
         "showSearch": this.$props.showSearch,
+        "showClear": this.$props.showClear,
+        "searchPlaceholder": this.$props.searchPlaceholder,
         "transformData": this.$props.transformData,
         "footer": showLoadMore && !isLastBucket && h("div", {
           "attrs": {
@@ -353,7 +376,7 @@ var MultiDropdownList = {
         index.updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
 
-      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
+      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
       this.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -374,7 +397,7 @@ var MultiDropdownList = {
         index.updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions);
+      this.setQueryOptions(props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -409,7 +432,7 @@ var MultiDropdownList = {
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
         var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
-        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, queryOptions), defaultQueryOptions));
+        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
       }
@@ -544,7 +567,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
     selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
     themePreset: state.config.themePreset,
     error: state.error[props.componentId],
-    componentProps: state.props[props.componentId]
+    componentProps: state.props[props.componentId],
+    enableAppbase: state.config.enableAppbase
   };
 };
 

package/dist/cjs/MultiList.js

@@ -6,22 +6,23 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-280a574c.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-e0583d76.js');
-var ComponentWrapper = require('./ComponentWrapper-5a0a8849.js');
-var Title = require('./Title-e9beb554.js');
-var Input = require('./Input-643d02a7.js');
-var Container = require('./Container-f84e72fc.js');
-var FormControlList = require('./FormControlList-08dfb28e.js');
-var utils = require('./utils-d1ea9f95.js');
+var index = require('./index-2a8358cd.js');
+var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
+var Title = require('./Title-39765ee6.js');
+var Input = require('./Input-c6f181d5.js');
+var Container = require('./Container-8a08d663.js');
+var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
+var FormControlList = require('./FormControlList-73497794.js');
+var utils = require('./utils-23afb20b.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -40,7 +41,7 @@ var MultiList = {
     queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
     showCheckbox: VueTypes.bool.def(true),
     beforeValueChange: vueTypes.types.func,
-    className: vueTypes.types.string.def(''),
+    className: VueTypes.string.def(''),
     componentId: vueTypes.types.stringRequired,
     customQuery: vueTypes.types.func,
     dataField: vueTypes.types.stringRequired,
@@ -64,20 +65,27 @@ var MultiList = {
     URLParams: VueTypes.bool.def(false),
     showMissing: VueTypes.bool.def(false),
     missingLabel: VueTypes.string.def('N/A'),
-    nestedField: vueTypes.types.string
+    nestedField: vueTypes.types.string,
+    index: VueTypes.string
   },
   data: function data() {
     var props = this.$props;
     this.__state = {
       currentValue: {},
-      modifiedOptions: props.options && props.options[props.dataField] ? props.options[props.dataField].buckets : [],
+      modifiedOptions: [],
       searchTerm: ''
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
   },
   created: function created() {
-    // Set custom and default queries in store
+    if (!this.enableAppbase && this.$props.index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+
+    var props = this.$props;
+    this.modifiedOptions = this.options && this.options[props.dataField] ? this.options[props.dataField].buckets : []; // Set custom and default queries in store
+
     index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
     index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
   },
@@ -94,7 +102,9 @@ var MultiList = {
   },
   watch: {
     options: function options(newVal) {
-      this.modifiedOptions = newVal[this.$props.dataField] ? newVal[this.$props.dataField].buckets : [];
+      if (newVal) {
+        this.modifiedOptions = newVal[this.$props.dataField] ? newVal[this.$props.dataField].buckets : [];
+      }
     },
     size: function size() {
       this.updateQueryHandlerOptions(this.$props);
@@ -161,8 +171,12 @@ var MultiList = {
       return index.isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
     }
 
-    if (!this.hasCustomRenderer && this.modifiedOptions.length === 0) {
-      return null;
+    if (!this.hasCustomRenderer && this.modifiedOptions.length === 0 && !this.isLoading) {
+      if (this.renderNoResult) {
+        this.renderNoResult();
+      } else {
+        return null;
+      }
     }
 
     var itemsToRender = this.$data.modifiedOptions;
@@ -174,7 +188,7 @@ var MultiList = {
     var filteredItemsToRender = itemsToRender.filter(function (item) {
       if (String(item.key).length) {
         if (_this2.$props.showSearch && _this2.$data.searchTerm) {
-          return String(item.key).toLowerCase().includes(_this2.$data.searchTerm.toLowerCase());
+          return suggestions.replaceDiacritics(String(item.key)).toLowerCase().includes(suggestions.replaceDiacritics(_this2.$data.searchTerm).toLowerCase());
         }
 
         return true;
@@ -342,7 +356,7 @@ var MultiList = {
         index.updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
 
-      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
+      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
       this.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -363,7 +377,7 @@ var MultiList = {
         index.updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions);
+      this.setQueryOptions(props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -384,7 +398,7 @@ var MultiList = {
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
         var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
-        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, queryOptions), defaultQueryOptions));
+        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
       }
@@ -565,7 +579,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
     selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
     themePreset: state.config.themePreset,
     error: state.error[props.componentId],
-    componentProps: state.props[props.componentId]
+    componentProps: state.props[props.componentId],
+    enableAppbase: state.config.enableAppbase
   };
 };
 

package/dist/cjs/MultiRange.js

@@ -6,20 +6,20 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-280a574c.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-e0583d76.js');
-var ComponentWrapper = require('./ComponentWrapper-5a0a8849.js');
-var Title = require('./Title-e9beb554.js');
-var Container = require('./Container-f84e72fc.js');
-var FormControlList = require('./FormControlList-08dfb28e.js');
+var index = require('./index-2a8358cd.js');
+var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
+var Title = require('./Title-39765ee6.js');
+var Container = require('./Container-8a08d663.js');
+var FormControlList = require('./FormControlList-73497794.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -55,7 +55,8 @@ var MultiRange = {
     showCheckbox: VueTypes.bool.def(true),
     title: vueTypes.types.title,
     URLParams: VueTypes.bool.def(false),
-    nestedField: vueTypes.types.string
+    nestedField: vueTypes.types.string,
+    index: VueTypes.string
   },
   methods: {
     handleClick: function handleClick(e) {
@@ -99,7 +100,7 @@ var MultiRange = {
         if (reset) {
           selectedValues = values;
         } else {
-          selectedValues = _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, selectedValues), values);
+          selectedValues = _rollupPluginBabelHelpers._extends({}, selectedValues, values);
         }
       } else if (selectedValues[item]) {
         currentValue = currentValue.filter(function (value) {
@@ -118,7 +119,7 @@ var MultiRange = {
           return item.indexOf(value.label) !== -1;
         });
         currentValue = [].concat(currentValue, currentItems);
-        selectedValues = _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, selectedValues), {}, (_extends2 = {}, _extends2[item] = true, _extends2));
+        selectedValues = _rollupPluginBabelHelpers._extends({}, selectedValues, (_extends2 = {}, _extends2[typeof item === 'object' ? item.label : item] = true, _extends2));
       }
 
       var performUpdate = function performUpdate() {
@@ -147,7 +148,7 @@ var MultiRange = {
         index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions);
+      this.setQueryOptions(props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -173,7 +174,7 @@ var MultiRange = {
     },
     selectedValue: function selectedValue(newVal) {
       if (!isEqual(this.$data.currentValue, newVal)) {
-        this.selectItem(newVal);
+        this.selectItem(newVal, true, undefined, true);
       }
     },
     customQuery: function customQuery(newVal, oldVal) {
@@ -183,7 +184,11 @@ var MultiRange = {
     }
   },
   created: function created() {
-    // Set custom query in store
+    if (!this.enableAppbase && this.$props.index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    } // Set custom query in store
+
+
     index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
   },
   beforeMount: function beforeMount() {
@@ -289,7 +294,8 @@ MultiRange.defaultQuery = function (values, props) {
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-    componentProps: state.props[props.componentId]
+    componentProps: state.props[props.componentId],
+    enableAppbase: state.config.enableAppbase
   };
 };
 

package/dist/cjs/{Pagination-91df3b77.js → Pagination-1b2320a7.js}

@@ -4,8 +4,9 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var Button = require('./Button-78d8bc26.js');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var VueTypes = _interopDefault(require('vue-types'));
+var Button = require('./Button-d2f1aeda.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 
 var getClassName = configureStore.helper.getClassName,
     handleA11yAction = configureStore.helper.handleA11yAction;
@@ -25,7 +26,7 @@ var Pagination = {
     pages: vueTypes.types.number,
     setPage: vueTypes.types.func,
     totalPages: vueTypes.types.number,
-    showEndPage: vueTypes.types.bool,
+    showEndPage: VueTypes.bool,
     prevLabel: vueTypes.types.string,
     nextLabel: vueTypes.types.string
   },

package/dist/cjs/RangeInput.js

@@ -6,58 +6,38 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-280a574c.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 require('polished');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-e0583d76.js');
-var ComponentWrapper = require('./ComponentWrapper-5a0a8849.js');
-require('./Title-e9beb554.js');
-var Flex = require('./Flex-737c55be.js');
-var Input = require('./Input-643d02a7.js');
-var Container = require('./Container-f84e72fc.js');
+var index = require('./index-2a8358cd.js');
+var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
+require('./Title-39765ee6.js');
+var Flex = require('./Flex-699639d2.js');
+var Input = require('./Input-c6f181d5.js');
+var Container = require('./Container-8a08d663.js');
 require('vue-no-ssr');
-require('./ssr-b7a729f9.js');
+require('./ssr-c333c82c.js');
 var RangeSlider = require('./RangeSlider.js');
 
-function _templateObject2() {
-  var data = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 var alert = function alert(_ref) {
   var theme = _ref.theme;
-  return emotion.css(_templateObject(), theme.colors.alertColor);
+  return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
 };
 
-var Content = styled__default('div')(_templateObject2(), function (props) {
+var Content = styled__default('div')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
   return props.alert && alert;
 });
 
-var checkValueChange = configureStore.helper.checkValueChange,
-    getClassName = configureStore.helper.getClassName,
-    getOptionsFromQuery = configureStore.helper.getOptionsFromQuery,
+var getClassName = configureStore.helper.getClassName,
     isEqual = configureStore.helper.isEqual;
 var RangeInput = {
   name: 'RangeInput',
@@ -103,7 +83,7 @@ var RangeInput = {
     stepValue: vueTypes.types.number,
     componentStyle: vueTypes.types.style,
     componentId: vueTypes.types.stringRequired,
-    includeNullValues: vueTypes.types.bool,
+    includeNullValues: VueTypes.bool,
     beforeValueChange: vueTypes.types.func,
     customQuery: vueTypes.types.func,
     data: vueTypes.types.data,
@@ -138,17 +118,19 @@ var RangeInput = {
       return false;
     },
     handleChange: function handleChange(value, event) {
+      var currentValue = value;
+
       if (this.shouldUpdate(value) && !isEqual(value, this.currentValue)) {
         switch (event) {
           case 'change':
             if (!value) {
-              value = {
+              currentValue = {
                 start: this.$props.range ? this.$props.range.start : 0,
                 end: this.$props.range ? this.$props.range.end : 10
               };
             }
 
-            this.$data.currentValue = _rollupPluginBabelHelpers._extends({}, value);
+            this.$data.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
             this.$emit('change', this.$data.currentValue);
             break;
 
@@ -158,13 +140,13 @@ var RangeInput = {
             break;
 
           default:
-            this.$data.currentValue = _rollupPluginBabelHelpers._extends({}, value);
+            this.$data.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
             break;
         }
       }
     },
     handleOnChange: function handleOnChange(value) {
-      this.handleChange(value, 'change');
+      this.handleChange(value || this.$props.range, 'change');
     },
     handleValueChange: function handleValueChange(value) {
       this.handleChange(value, 'value-change');
@@ -180,12 +162,10 @@ var RangeInput = {
         } else {
           this.$data.isEndValid = false;
         }
-      } else {
-        if (name === 'start' && !this.$data.isStartValid) {
-          this.$data.isStartValid = true;
-        } else if (name === 'end' && !this.$data.isEndValid) {
-          this.$data.isEndValid = true;
-        }
+      } else if (name === 'start' && !this.$data.isStartValid) {
+        this.$data.isStartValid = true;
+      } else if (name === 'end' && !this.$data.isEndValid) {
+        this.$data.isEndValid = true;
       }
 
       if (this.$data.isStartValid && this.$data.isEndValid) {
@@ -342,7 +322,7 @@ var RangeInput = {
   }
 };
 
-var mapStateToProps = function mapStateToProps(state, props) {
+var mapStateToProps = function mapStateToProps(state) {
   return {
     themePreset: state.config.themePreset
   };