@appbaseio/reactivesearch-vue 1.25.0 → 1.27.0-gamma.2

package/dist/cjs/{DropDown-5847d6e4.js → DropDown-0076babc.js}

@@ -9,10 +9,11 @@ var VueTypes = _interopDefault(require('vue-types'));
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
-var vueTypes = require('./vueTypes-4c19b4c8.js');
-var index = require('./index-89c39a9e.js');
-var CancelSvg = require('./CancelSvg-62d42af4.js');
-var Input = require('./Input-3cc3fa59.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
+var index = require('./index-4509aa45.js');
+var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
+var CancelSvg = require('./CancelSvg-4aa35935.js');
+var Input = require('./Input-a9ee53ed.js');
 var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -126,7 +127,8 @@ var Dropdown = {
               isOpen = _ref.isOpen,
               highlightedIndex = _ref.highlightedIndex,
               getButtonProps = _ref.getButtonProps,
-              getItemEvents = _ref.getItemEvents;
+              getItemEvents = _ref.getItemEvents,
+              getInputEvents = _ref.getInputEvents;
           return h("div", {
             "class": Input.suggestionsContainer
           }, [h(Select, {
@@ -151,7 +153,13 @@ var Dropdown = {
             getItemEvents: getItemEvents
           }) : isOpen && itemsToRender.length ? h("ul", {
             "class": Input.suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
-          }, [_this.$props.showSearch ? _this.renderSearchbox() : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
+          }, [_this.$props.showSearch ? _this.renderSearchbox({
+            on: {
+              input: getInputEvents({
+                onInput: _this.handleInputChange
+              }).input
+            }
+          }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
             var selected = _this.$props.multi // MultiDropdownList
             && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
             || Array.isArray(selectedItem) && selectedItem.find(function (value) {
@@ -272,7 +280,7 @@ var Dropdown = {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [index.isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
     },
-    renderSearchbox: function renderSearchbox() {
+    renderSearchbox: function renderSearchbox(eventObject) {
       var h = this.$createElement;
       var _this$$props2 = this.$props,
           componentId = _this$$props2.componentId,
@@ -280,7 +288,7 @@ var Dropdown = {
           showClear = _this$$props2.showClear,
           themePreset = _this$$props2.themePreset,
           innerClass = _this$$props2.innerClass;
-      var InputComponent = h(Input.Input, {
+      var InputComponent = h(Input.Input, _mergeJSXProps([{
         "attrs": {
           "id": componentId + "-input",
           "showIcon": false,
@@ -293,11 +301,8 @@ var Dropdown = {
           border: 0,
           borderBottom: '1px solid #ddd'
         },
-        "class": getClassName(innerClass, 'input'),
-        "on": {
-          "change": this.handleInputChange
-        }
-      });
+        "class": getClassName(innerClass, 'input')
+      }, eventObject]));
 
       if (showClear) {
         return h(CancelSvg.InputWrapper, [InputComponent, this.searchTerm && h(CancelSvg.IconGroup, {

package/dist/cjs/DynamicRangeSlider.js

@@ -10,13 +10,13 @@ var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('redux');
-var index = require('./index-89c39a9e.js');
+var index = require('./index-4509aa45.js');
 var Title = require('./Title-584a8cc8.js');
 var Container = require('./Container-526efa6a.js');
 var NoSSR = _interopDefault(require('vue-no-ssr'));
-var ssr = require('./ssr-08e95ede.js');
+var ssr = require('./ssr-0ee35a09.js');
 
 var addComponent = configureStore.Actions.addComponent,
     removeComponent = configureStore.Actions.removeComponent,
@@ -54,7 +54,8 @@ var DynamicRangeSlider = {
     URLParams: VueTypes.bool.def(false),
     sliderOptions: VueTypes.object.def({}),
     nestedField: vueTypes.types.string,
-    index: VueTypes.string
+    index: VueTypes.string,
+    value: vueTypes.types.range
   },
   data: function data() {
     this.internalRangeComponent = this.$props.componentId + "__range__internal";
@@ -100,6 +101,8 @@ var DynamicRangeSlider = {
       components = _this$$$store$getStat.components;
     }
 
+    var value = this.$props.value;
+
     if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
       this.addComponent(this.componentId);
       this.addComponent(this.internalRangeComponent);
@@ -108,6 +111,8 @@ var DynamicRangeSlider = {
         this.handleChange(this.selectedValue);
       } else if (this.selectedValue) {
         this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
+      } else if (value) {
+        this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
       } // get range before executing other queries
 
 
@@ -126,6 +131,13 @@ var DynamicRangeSlider = {
     }
   },
   methods: {
+    isControlled: function isControlled() {
+      if (this.$props.value && this.$listeners) {
+        return true;
+      }
+
+      return false;
+    },
     setDefaultValue: function setDefaultValue(_ref) {
       var start = _ref.start,
           end = _ref.end;
@@ -136,6 +148,8 @@ var DynamicRangeSlider = {
             defaultEnd = _this$$props$defaultV.end;
 
         this.handleChange([defaultStart, defaultEnd]);
+      } else if (this.isControlled()) {
+        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
       } else {
         this.currentValue = [start, end];
       }
@@ -183,8 +197,18 @@ var DynamicRangeSlider = {
         aggs: aggs
       });
     },
-    handleSlider: function handleSlider(values) {
-      this.handleChange(values.currentValue);
+    handleSlider: function handleSlider() {
+      var sliderValues = this.$refs.slider.getValue();
+      var value = this.$props.value;
+
+      if (value === undefined) {
+        this.handleChange(sliderValues);
+      } else {
+        this.$emit('change', {
+          start: sliderValues[0],
+          end: sliderValues[1]
+        });
+      }
     },
     handleChange: function handleChange(currentValue) {
       var _this2 = this;
@@ -236,7 +260,7 @@ var DynamicRangeSlider = {
           currentEnd = value[1]; // check if the slider is at its initial position
 
       var isInitialValue = currentStart === start && currentEnd === end;
-      this.setQueryOptions(this.$props.componentId, customQueryOptions);
+      this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: this.$props.componentId,
         query: query,
@@ -277,6 +301,7 @@ var DynamicRangeSlider = {
         start: this.range.start,
         end: this.range.end
       };
+      this.$emit('change', value);
       this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
     },
     range: function range(newValue, oldValue) {
@@ -298,6 +323,11 @@ var DynamicRangeSlider = {
       if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
         this.updateQueryHandler(this.$data.currentValue);
       }
+    },
+    value: function value(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+      }
     }
   },
   render: function render() {
@@ -317,13 +347,15 @@ var DynamicRangeSlider = {
     }, [this.$props.title]), h(NoSSR, [h(ssr.Slider, {
       "class": getClassName(this.$props.innerClass, 'slider')
     }, [h("vue-slider-component", {
+      "ref": "slider",
       "attrs": {
-        "value": [Math.max(start, this.currentValue[0]), Math.min(end, this.currentValue[1])],
-        "min": Math.min(start, this.currentValue[0]),
-        "max": Math.max(end, this.currentValue[1]),
+        "value": [Math.floor(Math.max(start, this.currentValue[0])), Math.ceil(Math.min(end, this.currentValue[1]))],
+        "min": Math.floor(Math.min(start, this.currentValue[0])),
+        "max": Math.ceil(Math.max(end, this.currentValue[1])),
         "dotSize": 20,
         "height": 4,
-        "enable-cross": false
+        "enable-cross": false,
+        "tooltip": "always"
       },
       "on": {
         "drag-end": this.handleSlider
@@ -369,7 +401,11 @@ DynamicRangeSlider.defaultQuery = function (values, props) {
 };
 
 DynamicRangeSlider.parseValue = function (value) {
-  return [value.start, value.end];
+  if (value) {
+    return Array.isArray(value) ? value : [value.start, value.end];
+  }
+
+  return [];
 };
 
 var mapStateToProps = function mapStateToProps(state, props) {

package/dist/cjs/{Input-3cc3fa59.js → Input-a9ee53ed.js}

@@ -64,7 +64,7 @@ var Input = styled__default('input')(_templateObject5 || (_templateObject5 = _ro
 });
 
 var suggestions = function suggestions(themePreset, theme) {
-  return emotion.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 395px;\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
+  return emotion.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 395px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
 };
 
 var suggestionsContainer = emotion.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));

package/dist/cjs/MultiDropdownList.js

@@ -13,19 +13,20 @@ require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
 var Button = require('./Button-11307285.js');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
+require('@vue/babel-helper-vue-jsx-merge-props');
 var Title = require('./Title-584a8cc8.js');
-require('./CancelSvg-62d42af4.js');
-require('./Input-3cc3fa59.js');
+require('./CancelSvg-4aa35935.js');
+require('./Input-a9ee53ed.js');
 require('compute-scroll-into-view');
 var Container = require('./Container-526efa6a.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 var utils = require('./utils-1219e1fe.js');
-var DropDown = require('./DropDown-5847d6e4.js');
+var DropDown = require('./DropDown-0076babc.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -349,7 +350,7 @@ var MultiDropdownList = {
       }
 
       var performUpdate = function performUpdate() {
-        _this3.currentValue = currentValue;
+        _this3.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
 
         _this3.updateQueryHandler(finalValues, props);
 
@@ -376,7 +377,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,
@@ -397,7 +398,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,

package/dist/cjs/MultiList.js

@@ -12,13 +12,13 @@ var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
 var Title = require('./Title-584a8cc8.js');
-var Input = require('./Input-3cc3fa59.js');
+var Input = require('./Input-a9ee53ed.js');
 var Container = require('./Container-526efa6a.js');
 var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
 var FormControlList = require('./FormControlList-808dbcef.js');
@@ -91,13 +91,14 @@ var MultiList = {
   },
   beforeMount: function beforeMount() {
     this.updateQueryHandlerOptions(this.$props);
+    var value = this.selectedValue || this.$props.value || this.$props.defaultValue;
+    this.setValue(value, !this.selectedValue);
+  },
+  mounted: function mounted() {
+    var currentValue = Object.keys(this.$data.currentValue);
 
-    if (this.selectedValue) {
-      this.setValue(this.selectedValue);
-    } else if (this.$props.value) {
-      this.setValue(this.$props.value, true);
-    } else if (this.$props.defaultValue) {
-      this.setValue(this.$props.defaultValue, true);
+    if (this.$props.value !== undefined && !isEqual(this.$props.value, currentValue)) {
+      this.$emit('change', currentValue);
     }
   },
   watch: {
@@ -142,7 +143,11 @@ var MultiList = {
       }
 
       if (!isEqual(selectedValue, newVal)) {
-        this.setValue(newVal || [], true);
+        if (this.value === undefined) {
+          this.setValue(newVal, true);
+        } else {
+          this.$emit('change', newVal);
+        }
       }
     },
     defaultQuery: function defaultQuery(newVal, oldVal) {
@@ -356,7 +361,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,
@@ -377,7 +382,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,
@@ -441,7 +446,7 @@ var MultiList = {
       if (value === undefined) {
         this.setValue(currentValue);
       } else {
-        var values = index.parseValueArray(value, currentValue);
+        var values = index.parseValueArray(value || [], currentValue);
         this.$emit('change', values);
       }
     },

package/dist/cjs/MultiRange.js

@@ -12,11 +12,11 @@ var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
 var Title = require('./Title-584a8cc8.js');
 var Container = require('./Container-526efa6a.js');
 var FormControlList = require('./FormControlList-808dbcef.js');
@@ -148,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,

package/dist/cjs/RangeInput.js

@@ -13,17 +13,17 @@ var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 require('polished');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
 require('./Title-584a8cc8.js');
 var Flex = require('./Flex-f146cdad.js');
-var Input = require('./Input-3cc3fa59.js');
+var Input = require('./Input-a9ee53ed.js');
 var Container = require('./Container-526efa6a.js');
 require('vue-no-ssr');
-require('./ssr-08e95ede.js');
+require('./ssr-0ee35a09.js');
 var RangeSlider = require('./RangeSlider.js');
 
 var _templateObject, _templateObject2;
@@ -146,7 +146,7 @@ var RangeInput = {
       }
     },
     handleOnChange: function handleOnChange(value) {
-      this.handleChange(value, 'change');
+      this.handleChange(value || this.$props.range, 'change');
     },
     handleValueChange: function handleValueChange(value) {
       this.handleChange(value, 'value-change');
@@ -201,6 +201,10 @@ var RangeInput = {
     if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
       this.handleChange(this.$props.defaultValue);
     }
+
+    if (this.isControlled()) {
+      this.handleChange(this.$props.value, 'change');
+    }
   },
   render: function render() {
     var h = arguments[0];

package/dist/cjs/RangeSlider.js

@@ -10,15 +10,15 @@ var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
 var Title = require('./Title-584a8cc8.js');
 var Container = require('./Container-526efa6a.js');
 var NoSSR = _interopDefault(require('vue-no-ssr'));
-var ssr = require('./ssr-08e95ede.js');
+var ssr = require('./ssr-0ee35a09.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -80,32 +80,28 @@ var RangeSlider = {
         });
       }
     },
-    handleSlider: function handleSlider(values) {
-      var _this = this;
-
-      clearTimeout(this.handleSliderChange._tId);
-      this.handleSliderChange._tId = setTimeout(function () {
-        _this.handleSliderChange(values);
-      }, 100);
+    handleSlider: function handleSlider() {
+      var sliderValues = this.$refs.slider.getValue();
+      this.handleSliderChange(sliderValues);
     },
     handleChange: function handleChange(currentValue, props) {
-      var _this2 = this;
+      var _this = this;
 
       if (props === void 0) {
         props = this.$props;
       }
 
       var performUpdate = function performUpdate() {
-        _this2.currentValue = currentValue;
+        _this.currentValue = currentValue;
 
-        _this2.updateQueryHandler([currentValue[0], currentValue[1]], props);
+        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
 
-        _this2.$emit('valueChange', {
+        _this.$emit('valueChange', {
           start: currentValue[0],
           end: currentValue[1]
         });
 
-        _this2.$emit('value-change', {
+        _this.$emit('value-change', {
           start: currentValue[0],
           end: currentValue[1]
         });
@@ -137,7 +133,7 @@ var RangeSlider = {
           currentEnd = value[1]; // check if the slider is at its initial position
 
       var isInitialValue = currentStart === start && currentEnd === end;
-      this.setQueryOptions(props.componentId, customQueryOptions);
+      this.setQueryOptions(props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -216,12 +212,13 @@ var RangeSlider = {
         "max": this.$props.range.end,
         "dotSize": 20,
         "height": 4,
-        "enable-cross": false
+        "enable-cross": false,
+        "tooltip": "always"
+      },
+      "on": {
+        "drag-end": this.handleSlider
       },
-      "props": _rollupPluginBabelHelpers._extends({}, this.$props.sliderOptions),
-      "on": _rollupPluginBabelHelpers._extends({}, {
-        input: this.handleSlider
-      })
+      "props": _rollupPluginBabelHelpers._extends({}, this.$props.sliderOptions)
     }), this.$props.rangeLabels && h("div", {
       "class": "label-container"
     }, [h("label", {

package/dist/cjs/ReactiveBase.js

@@ -12,9 +12,9 @@ require('@appbaseio/reactivecore/lib/utils/constants');
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('redux');
-var index = require('./index-89c39a9e.js');
+var index = require('./index-4509aa45.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
 var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
 var Appbase = _interopDefault(require('appbase-js'));

package/dist/cjs/ReactiveComponent.js

@@ -9,11 +9,11 @@ var configureStore__default = _interopDefault(configureStore);
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
 
 var _excluded = ["options"],
     _excluded2 = ["query"],

package/dist/cjs/ReactiveList.js

@@ -15,11 +15,11 @@ var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 require('polished');
 var Button = require('./Button-11307285.js');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
 require('./Title-584a8cc8.js');
 var ListItem = require('./ListItem-b40adb04.js');
@@ -502,6 +502,12 @@ var ReactiveList = {
       });
     }
 
+    if (this.urlSortOption) {
+      this.sortOptionIndex = this.$props.sortOptions.findIndex(function (s) {
+        return s.label === _this.urlSortOption;
+      }) || 0;
+    }
+
     this.updateComponentProps(this.componentId, {
       from: this.from
     }, constants.componentTypes.reactiveList);
@@ -810,7 +816,7 @@ var ReactiveList = {
         "labelPosition": this.sortOptions ? 'right' : 'left'
       },
       "class": getClassName$1(this.$props.innerClass, 'resultsInfo')
-    }, [this.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats && results.length ? this.renderStats() : null]), !this.isLoading && results.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,
@@ -1018,8 +1024,11 @@ var ReactiveList = {
           sortBy: sortBy
         }, constants.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) {
@@ -1131,6 +1140,7 @@ var ReactiveList = {
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     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],

package/dist/cjs/ResultCard.js

@@ -9,7 +9,7 @@ var VueTypes = _interopDefault(require('vue-types'));
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
 var Title = require('./Title-584a8cc8.js');
 var Card = require('./Card-fd94ef07.js');

package/dist/cjs/ResultList.js

@@ -9,7 +9,7 @@ var VueTypes = _interopDefault(require('vue-types'));
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-4c19b4c8.js');
+var vueTypes = require('./vueTypes-57d01f18.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
 var Title = require('./Title-584a8cc8.js');
 var ListItem = require('./ListItem-b40adb04.js');