@appbaseio/reactivesearch-vue 1.24.3 → 1.27.0-gamma.1

package/dist/es/{DropDown-035c804f.js → DropDown-0dd8f2a3.js}

@@ -3,10 +3,12 @@ import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPlugin
 import VueTypes from 'vue-types';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-fb61bb7b.js';
-import { a as isFunction } from './index-cb1950b6.js';
-import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-08bb1bcf.js';
-import { D as Downshift } from './DownShift-3558d402.js';
+import { t as types } from './vueTypes-687b2304.js';
+import { a as isFunction } from './index-78920565.js';
+import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
+import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-c2c03a35.js';
+import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-10b1d62d.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var small = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n"])));
@@ -68,7 +70,9 @@ var Dropdown = {
     single: VueTypes.bool,
     small: VueTypes.bool.def(false),
     themePreset: types.themePreset,
-    showSearch: VueTypes.bool
+    showSearch: VueTypes.bool,
+    showClear: VueTypes.bool,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   render: function render() {
     var _this = this;
@@ -96,7 +100,7 @@ var Dropdown = {
     var filteredItemsToRender = itemsToRender.filter(function (item) {
       if (String(item[labelField]).length) {
         if (_this.$props.showSearch && _this.$data.searchTerm) {
-          return String(item[labelField]).toLowerCase().includes(_this.$data.searchTerm.toLowerCase());
+          return replaceDiacritics(String(item[labelField])).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm.toLowerCase()));
         }
 
         return true;
@@ -117,7 +121,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": suggestionsContainer
           }, [h(Select, {
@@ -142,25 +147,16 @@ var Dropdown = {
             getItemEvents: getItemEvents
           }) : isOpen && itemsToRender.length ? h("ul", {
             "class": suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
-          }, [_this.$props.showSearch ? h(Input, {
-            "attrs": {
-              "id": _this.$props.componentId + "-input",
-              "showIcon": false,
-              "placeholder": "Type here to search...",
-              "value": _this.$data.searchTerm,
-              "themePreset": themePreset
-            },
-            "style": {
-              border: 0,
-              borderBottom: '1px solid #ddd'
-            },
-            "class": getClassName(_this.$props.innerClass, 'input'),
-            "on": {
-              "change": _this.handleInputChange
+          }, [_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]] || Array.isArray(selectedItem) && selectedItem.find(function (value) {
+            && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
+            || Array.isArray(selectedItem) && selectedItem.find(function (value) {
               return value[labelField] === item[labelField];
             }));
             if (!_this.$props.multi) selected = item.key === selectedItem;
@@ -210,6 +206,7 @@ var Dropdown = {
 
       if (!this.$props.multi) {
         this.isOpen = false;
+        this.searchTerm = '';
       }
     },
     handleStateChange: function handleStateChange(_ref2) {
@@ -233,6 +230,9 @@ var Dropdown = {
       var value = e.target.value;
       this.searchTerm = value;
     },
+    clearSearchTerm: function clearSearchTerm() {
+      this.searchTerm = '';
+    },
     renderToString: function renderToString(value) {
       var _this2 = this;
 
@@ -273,6 +273,48 @@ var Dropdown = {
       return h("p", {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
+    },
+    renderSearchbox: function renderSearchbox(eventObject) {
+      var h = this.$createElement;
+      var _this$$props2 = this.$props,
+          componentId = _this$$props2.componentId,
+          searchPlaceholder = _this$$props2.searchPlaceholder,
+          showClear = _this$$props2.showClear,
+          themePreset = _this$$props2.themePreset,
+          innerClass = _this$$props2.innerClass;
+      var InputComponent = h(Input, _mergeJSXProps([{
+        "attrs": {
+          "id": componentId + "-input",
+          "showIcon": false,
+          "showClear": showClear,
+          "placeholder": searchPlaceholder,
+          "value": this.$data.searchTerm,
+          "themePreset": themePreset
+        },
+        "style": {
+          border: 0,
+          borderBottom: '1px solid #ddd'
+        },
+        "class": getClassName(innerClass, 'input')
+      }, eventObject]));
+
+      if (showClear) {
+        return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
+          "attrs": {
+            "groupPosition": "right",
+            "positionType": "absolute"
+          }
+        }, [h(IconWrapper, {
+          "on": {
+            "click": this.clearSearchTerm
+          },
+          "attrs": {
+            "isClearIcon": true
+          }
+        }, [h(CancelSvg)])])]);
+      }
+
+      return InputComponent;
     }
   }
 };

package/dist/es/DynamicRangeSlider.js

@@ -3,13 +3,13 @@ import { a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-fb61bb7b.js';
+import { t as types } from './vueTypes-687b2304.js';
 import 'redux';
-import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-cb1950b6.js';
+import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-78920565.js';
 import { T as Title } from './Title-3522ff56.js';
 import { C as Container } from './Container-18b03fde.js';
 import NoSSR from 'vue-no-ssr';
-import { g as getComponents, S as Slider } from './ssr-5d255b08.js';
+import { g as getComponents, S as Slider } from './ssr-a41dfea9.js';
 
 var addComponent = Actions.addComponent,
     removeComponent = Actions.removeComponent,
@@ -47,7 +47,8 @@ var DynamicRangeSlider = {
     URLParams: VueTypes.bool.def(false),
     sliderOptions: VueTypes.object.def({}),
     nestedField: types.string,
-    index: VueTypes.string
+    index: VueTypes.string,
+    value: types.range
   },
   data: function data() {
     this.internalRangeComponent = this.$props.componentId + "__range__internal";
@@ -93,6 +94,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);
@@ -101,6 +104,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
 
 
@@ -119,6 +124,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;
@@ -129,6 +141,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];
       }
@@ -176,8 +190,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;
@@ -229,7 +253,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,
@@ -270,6 +294,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) {
@@ -291,6 +316,11 @@ var DynamicRangeSlider = {
       if (!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() {
@@ -310,13 +340,15 @@ var DynamicRangeSlider = {
     }, [this.$props.title]), h(NoSSR, [h(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
@@ -362,7 +394,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/es/{Input-08bb1bcf.js → Input-10b1d62d.js}

@@ -59,7 +59,7 @@ var Input = styled('input')(_templateObject5 || (_templateObject5 = _taggedTempl
 });
 
 var suggestions = function suggestions(themePreset, theme) {
-  return css(_templateObject14 || (_templateObject14 = _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 css(_templateObject14 || (_templateObject14 = _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 = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));

package/dist/es/MultiDropdownList.js

@@ -6,18 +6,20 @@ import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
 import { l as loadMoreContainer, B as Button } from './Button-91561391.js';
-import { t as types } from './vueTypes-fb61bb7b.js';
+import { t as types } from './vueTypes-687b2304.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, o as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-cb1950b6.js';
-import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
+import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, o as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-78920565.js';
+import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
+import '@vue/babel-helper-vue-jsx-merge-props';
 import { T as Title } from './Title-3522ff56.js';
-import './Input-08bb1bcf.js';
+import './CancelSvg-c2c03a35.js';
+import './Input-10b1d62d.js';
 import 'compute-scroll-into-view';
-import './DownShift-3558d402.js';
 import { C as Container } from './Container-18b03fde.js';
+import '@appbaseio/reactivecore/lib/utils/suggestions';
 import { g as getAggsQuery } from './utils-64a2e5f0.js';
-import { D as Dropdown } from './DropDown-035c804f.js';
+import { D as Dropdown } from './DropDown-0dd8f2a3.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -74,10 +76,12 @@ 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: types.string,
-    index: VueTypes.string
+    index: VueTypes.string,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   created: function created() {
     if (!this.enableAppbase && this.$props.index) {
@@ -205,7 +209,9 @@ var MultiDropdownList = {
     if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
       if (renderNoResults && isFunction(renderNoResults)) {
         return h("div", [renderNoResults()]);
-      } else if (renderNoResults && !isFunction(renderNoResults)) {
+      }
+
+      if (renderNoResults && !isFunction(renderNoResults)) {
         return renderNoResults;
       }
 
@@ -244,6 +250,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": {
@@ -335,7 +343,7 @@ var MultiDropdownList = {
       }
 
       var performUpdate = function performUpdate() {
-        _this3.currentValue = currentValue;
+        _this3.currentValue = _extends({}, currentValue);
 
         _this3.updateQueryHandler(finalValues, props);
 
@@ -362,7 +370,7 @@ var MultiDropdownList = {
         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,
@@ -383,7 +391,7 @@ var MultiDropdownList = {
         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/es/MultiList.js

@@ -5,14 +5,15 @@ import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-fb61bb7b.js';
+import { t as types } from './vueTypes-687b2304.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, n as isEvent, o as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-cb1950b6.js';
-import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
+import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, n as isEvent, o as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-78920565.js';
+import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
 import { T as Title } from './Title-3522ff56.js';
-import { I as Input } from './Input-08bb1bcf.js';
+import { I as Input } from './Input-10b1d62d.js';
 import { C as Container } from './Container-18b03fde.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 import { U as UL, C as Checkbox } from './FormControlList-704f8dee.js';
 import { g as getAggsQuery } from './utils-64a2e5f0.js';
 
@@ -33,7 +34,7 @@ var MultiList = {
     queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
     showCheckbox: VueTypes.bool.def(true),
     beforeValueChange: types.func,
-    className: types.string.def(''),
+    className: VueTypes.string.def(''),
     componentId: types.stringRequired,
     customQuery: types.func,
     dataField: types.stringRequired,
@@ -83,13 +84,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: {
@@ -134,7 +136,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) {
@@ -180,7 +186,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 replaceDiacritics(String(item.key)).toLowerCase().includes(replaceDiacritics(_this2.$data.searchTerm).toLowerCase());
         }
 
         return true;
@@ -348,7 +354,7 @@ var MultiList = {
         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,
@@ -369,7 +375,7 @@ var MultiList = {
         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,
@@ -433,7 +439,7 @@ var MultiList = {
       if (value === undefined) {
         this.setValue(currentValue);
       } else {
-        var values = parseValueArray(value, currentValue);
+        var values = parseValueArray(value || [], currentValue);
         this.$emit('change', values);
       }
     },

package/dist/es/MultiRange.js

@@ -5,11 +5,11 @@ import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-fb61bb7b.js';
+import { t as types } from './vueTypes-687b2304.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { o as parseValueArray, f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-cb1950b6.js';
-import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
+import { o as parseValueArray, f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-78920565.js';
+import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
 import { T as Title } from './Title-3522ff56.js';
 import { C as Container } from './Container-18b03fde.js';
 import { U as UL, C as Checkbox } from './FormControlList-704f8dee.js';
@@ -141,7 +141,7 @@ var MultiRange = {
         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/es/RangeInput.js

@@ -5,17 +5,17 @@ import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-fb61bb7b.js';
+import { t as types } from './vueTypes-687b2304.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { c as connect } from './index-cb1950b6.js';
-import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
+import { c as connect } from './index-78920565.js';
+import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
 import './Title-3522ff56.js';
 import { F as Flex } from './Flex-8770345d.js';
-import { I as Input } from './Input-08bb1bcf.js';
+import { I as Input } from './Input-10b1d62d.js';
 import { C as Container } from './Container-18b03fde.js';
 import 'vue-no-ssr';
-import './ssr-5d255b08.js';
+import './ssr-a41dfea9.js';
 import { RangeConnected as RangeConnected$1 } from './RangeSlider.js';
 
 var _templateObject, _templateObject2;
@@ -138,7 +138,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');
@@ -193,6 +193,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/es/RangeSlider.js

@@ -3,15 +3,15 @@ import { a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-fb61bb7b.js';
+import { t as types } from './vueTypes-687b2304.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-cb1950b6.js';
-import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
+import { f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-78920565.js';
+import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
 import { T as Title } from './Title-3522ff56.js';
 import { C as Container } from './Container-18b03fde.js';
 import NoSSR from 'vue-no-ssr';
-import { g as getComponents, S as Slider } from './ssr-5d255b08.js';
+import { g as getComponents, S as Slider } from './ssr-a41dfea9.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -73,32 +73,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]
         });
@@ -130,7 +126,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,
@@ -209,12 +205,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": _extends({}, this.$props.sliderOptions),
-      "on": _extends({}, {
-        input: this.handleSlider
-      })
+      "props": _extends({}, this.$props.sliderOptions)
     }), this.$props.rangeLabels && h("div", {
       "class": "label-container"
     }, [h("label", {