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

package/dist/es/MultiList.js

@@ -1,20 +1,21 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, l as isEvent, p as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-185b6266.js';
-import { C as ComponentWrapper } from './ComponentWrapper-c4c91949.js';
-import { T as Title } from './Title-f0217338.js';
-import { I as Input } from './Input-1159c4b5.js';
-import { C as Container } from './Container-88c805ef.js';
-import { U as UL, C as Checkbox } from './FormControlList-96d44e7b.js';
-import { g as getAggsQuery } from './utils-57cc8789.js';
+import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, o as isEvent, q as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-7788a843.js';
+import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.js';
+import { T as Title } from './Title-3342664a.js';
+import { I as Input } from './Input-7a2a9fac.js';
+import { C as Container } from './Container-ba826e96.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
+import { U as UL, C as Checkbox } from './FormControlList-c22d64f6.js';
+import { g as getAggsQuery } from './utils-9e68acee.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -24,7 +25,8 @@ var isEqual = helper.isEqual,
     getQueryOptions = helper.getQueryOptions,
     checkValueChange = helper.checkValueChange,
     getClassName = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery;
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var MultiList = {
   name: 'MultiList',
   props: {
@@ -33,7 +35,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,
@@ -51,43 +53,53 @@ var MultiList = {
     showCount: VueTypes.bool.def(true),
     showFilter: VueTypes.bool.def(true),
     showSearch: VueTypes.bool.def(true),
-    size: VueTypes.number.def(100),
+    size: VueTypes.number,
     sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
     title: types.title,
     URLParams: VueTypes.bool.def(false),
     showMissing: VueTypes.bool.def(false),
     missingLabel: VueTypes.string.def('N/A'),
-    nestedField: types.string
+    nestedField: 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
+
     updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
     updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
   },
   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: {
     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);
@@ -125,7 +137,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) {
@@ -154,8 +170,12 @@ var MultiList = {
       return 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;
@@ -167,7 +187,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;
@@ -320,22 +340,22 @@ var MultiList = {
       checkValueChange(props.componentId, finalValues, props.beforeValueChange, performUpdate);
     },
     updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
-      var defaultQueryOptions;
       var query = MultiList.defaultQuery(value, props);
 
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
 
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
-        }
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
+        } // Update calculated default query in store
 
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
 
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
+        var defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet);
+        this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
       }
 
-      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
       this.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -346,17 +366,15 @@ var MultiList = {
     updateQueryHandler: function updateQueryHandler(value, props) {
       var customQuery = props.customQuery;
       var query = MultiList.defaultQuery(value, props);
-      var customQueryOptions;
 
       if (customQuery) {
-        var _ref = customQuery(value, props) || {};
-
-        query = _ref.query;
-        customQueryOptions = getOptionsFromQuery(customQuery(value, props));
+        var customQueryCalc = customQuery(value, props);
+        query = extractQueryFromCustomQuery(customQueryCalc);
         updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
+        var customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
+        this.setQueryOptions(props.componentId, customQueryOptions, false);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -376,8 +394,8 @@ var MultiList = {
 
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
-        var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
-        this.setQueryOptions(this.internalComponent, _extends(_extends({}, queryOptions), defaultQueryOptions));
+        var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
+        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
       }
@@ -420,7 +438,7 @@ var MultiList = {
       if (value === undefined) {
         this.setValue(currentValue);
       } else {
-        var values = parseValueArray(value, currentValue);
+        var values = parseValueArray(value || [], currentValue);
         this.$emit('change', values);
       }
     },
@@ -462,7 +480,13 @@ var MultiList = {
 
 MultiList.defaultQuery = function (value, props) {
   var query = null;
-  var type = props.queryFormat === 'or' ? 'terms' : 'term';
+  var queryFormat = props.queryFormat;
+
+  if (queryFormat === undefined) {
+    queryFormat = 'or';
+  }
+
+  var type = queryFormat === 'or' ? 'terms' : 'term';
 
   if (!Array.isArray(value) || value.length === 0) {
     return null;
@@ -483,14 +507,14 @@ MultiList.defaultQuery = function (value, props) {
   } else if (value) {
     var listQuery;
 
-    if (props.queryFormat === 'or') {
+    if (queryFormat === 'or') {
       if (props.showMissing) {
-        var _type, _ref2;
+        var _type, _ref;
 
         var hasMissingTerm = value.includes(props.missingLabel);
-        var should = [(_ref2 = {}, _ref2[type] = (_type = {}, _type[props.dataField] = value.filter(function (item) {
+        var should = [(_ref = {}, _ref[type] = (_type = {}, _type[props.dataField] = value.filter(function (item) {
           return item !== props.missingLabel;
-        }), _type), _ref2)];
+        }), _type), _ref)];
 
         if (hasMissingTerm) {
           should = should.concat({
@@ -517,9 +541,9 @@ MultiList.defaultQuery = function (value, props) {
     } else {
       // adds a sub-query with must as an array of objects for each term/value
       var queryArray = value.map(function (item) {
-        var _type3, _ref3;
+        var _type3, _ref2;
 
-        return _ref3 = {}, _ref3[type] = (_type3 = {}, _type3[props.dataField] = item, _type3), _ref3;
+        return _ref2 = {}, _ref2[type] = (_type3 = {}, _type3[props.dataField] = item, _type3), _ref2;
       });
       listQuery = {
         bool: {
@@ -558,7 +582,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
   };
 };
 
@@ -568,9 +593,14 @@ var mapDispatchtoProps = {
   setCustomQuery: setCustomQuery,
   setDefaultQuery: setDefaultQuery
 };
+
+MultiList.hasInternalComponent = function () {
+  return true;
+};
+
 var ListConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(MultiList), {
   componentType: componentTypes.multiList,
-  internalComponent: true
+  internalComponent: MultiList.hasInternalComponent()
 });
 
 MultiList.install = function (Vue) {

package/dist/es/MultiRange.js

@@ -1,18 +1,18 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { p as parseValueArray, f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-185b6266.js';
-import { C as ComponentWrapper } from './ComponentWrapper-c4c91949.js';
-import { T as Title } from './Title-f0217338.js';
-import { C as Container } from './Container-88c805ef.js';
-import { U as UL, C as Checkbox } from './FormControlList-96d44e7b.js';
+import { q as parseValueArray, f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-7788a843.js';
+import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.js';
+import { T as Title } from './Title-3342664a.js';
+import { C as Container } from './Container-ba826e96.js';
+import { U as UL, C as Checkbox } from './FormControlList-c22d64f6.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -48,7 +48,8 @@ var MultiRange = {
     showCheckbox: VueTypes.bool.def(true),
     title: types.title,
     URLParams: VueTypes.bool.def(false),
-    nestedField: types.string
+    nestedField: types.string,
+    index: VueTypes.string
   },
   methods: {
     handleClick: function handleClick(e) {
@@ -92,7 +93,7 @@ var MultiRange = {
         if (reset) {
           selectedValues = values;
         } else {
-          selectedValues = _extends(_extends({}, selectedValues), values);
+          selectedValues = _extends({}, selectedValues, values);
         }
       } else if (selectedValues[item]) {
         currentValue = currentValue.filter(function (value) {
@@ -111,7 +112,7 @@ var MultiRange = {
           return item.indexOf(value.label) !== -1;
         });
         currentValue = [].concat(currentValue, currentItems);
-        selectedValues = _extends(_extends({}, selectedValues), {}, (_extends2 = {}, _extends2[item] = true, _extends2));
+        selectedValues = _extends({}, selectedValues, (_extends2 = {}, _extends2[typeof item === 'object' ? item.label : item] = true, _extends2));
       }
 
       var performUpdate = function performUpdate() {
@@ -130,17 +131,16 @@ var MultiRange = {
     updateQueryHandler: function updateQueryHandler(value, props) {
       var customQuery = props.customQuery;
       var query = MultiRange.defaultQuery(value, props);
-      var customQueryOptions;
 
       if (customQuery) {
         var _ref = customQuery(value, props) || {};
 
         query = _ref.query;
-        customQueryOptions = getOptionsFromQuery(customQuery(value, props));
+        var customQueryOptions = getOptionsFromQuery(customQuery(value, props));
         updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+        this.setQueryOptions(props.componentId, customQueryOptions, false);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -166,7 +166,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) {
@@ -176,7 +176,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
+
+
     updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
   },
   beforeMount: function beforeMount() {
@@ -282,7 +286,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/es/{Pagination-c2a00175.js → Pagination-3f350098.js}

@@ -1,6 +1,7 @@
 import { helper } from '@appbaseio/reactivecore';
-import { p as pagination, B as Button } from './Button-27cc8574.js';
-import { t as types } from './vueTypes-98d938a9.js';
+import VueTypes from 'vue-types';
+import { p as pagination, B as Button } from './Button-d8bc15ea.js';
+import { t as types } from './vueTypes-9326e0be.js';
 
 var getClassName = helper.getClassName,
     handleA11yAction = helper.handleA11yAction;
@@ -20,7 +21,7 @@ var Pagination = {
     pages: types.number,
     setPage: types.func,
     totalPages: types.number,
-    showEndPage: types.bool,
+    showEndPage: VueTypes.bool,
     prevLabel: types.string,
     nextLabel: types.string
   },
@@ -56,6 +57,7 @@ var Pagination = {
           showEndPage = props.showEndPage;
       var start = position === 'start' ? getStartPage(pages, currentPage, showEndPage) : Math.max(2, Math.ceil(totalPages - (pages - 1) / 2 + 1));
       var paginationButtons = [];
+      var endPage = start;
 
       if (start <= totalPages) {
         var totalPagesToShow = pages < totalPages ? start + (pages - 1) : totalPages + 1;
@@ -93,6 +95,10 @@ var Pagination = {
 
           if (i <= totalPages + 1) {
             paginationButtons.push(pageBtn);
+
+            if (i === Math.min(totalPages + 1, totalPagesToShow) - 1) {
+              endPage = i;
+            }
           }
         };
 
@@ -101,7 +107,7 @@ var Pagination = {
         }
       }
 
-      return paginationButtons;
+      return [paginationButtons, start, endPage];
     };
 
     var buildIntermediatePaginationDom = function buildIntermediatePaginationDom() {
@@ -109,10 +115,10 @@ var Pagination = {
           currentPage = props.currentPage,
           totalPages = props.totalPages,
           pages = props.pages;
-      if (!showEndPage) return buildPaginationDOM('start');
+      if (!showEndPage) return buildPaginationDOM('start')[0];
 
-      if (currentPage <= totalPages - pages + 2 || totalPages <= pages) {
-        return buildPaginationDOM('start');
+      if (currentPage <= totalPages - pages + 2 || totalPages < pages) {
+        return buildPaginationDOM('start')[0];
       }
 
       return null;
@@ -148,7 +154,7 @@ var Pagination = {
           return props.setPage(0);
         }
       }
-    }, ["1"]), props.showEndPage && props.currentPage >= Math.floor(props.pages / 2) + !!(props.pages % 2) ? h("span", ["..."]) : null, buildIntermediatePaginationDom(), props.showEndPage && props.pages > 2 && props.currentPage <= props.totalPages - Math.ceil(props.pages * 0.75) ? h("span", ["..."]) : null, props.showEndPage && props.totalPages >= props.pages && buildPaginationDOM('end'), h(Button, {
+    }, ["1"]), props.showEndPage && props.currentPage >= Math.floor(props.pages / 2) + !!(props.pages % 2) && buildPaginationDOM('start')[1] !== 2 ? h("span", ["..."]) : null, buildIntermediatePaginationDom(), props.showEndPage && props.pages > 2 && props.currentPage <= props.totalPages - Math.ceil(props.pages * 0.75) && buildPaginationDOM('start')[2] !== buildPaginationDOM('end')[1] - 1 ? h("span", ["..."]) : null, props.showEndPage && props.totalPages >= props.pages && buildPaginationDOM('end')[0], h(Button, {
       "class": getClassName(props.innerClass, 'button') || '',
       "attrs": {
         "disabled": props.currentPage >= props.totalPages - 1,

package/dist/es/RangeInput.js

@@ -1,55 +1,35 @@
 import { 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 { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { c as connect } from './index-185b6266.js';
-import { C as ComponentWrapper } from './ComponentWrapper-c4c91949.js';
-import './Title-f0217338.js';
-import { F as Flex } from './Flex-16d1103a.js';
-import { I as Input } from './Input-1159c4b5.js';
-import { C as Container } from './Container-88c805ef.js';
+import { c as connect } from './index-7788a843.js';
+import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.js';
+import './Title-3342664a.js';
+import { F as Flex } from './Flex-1f0795c3.js';
+import { I as Input } from './Input-7a2a9fac.js';
+import { C as Container } from './Container-ba826e96.js';
 import 'vue-no-ssr';
-import './ssr-a710392b.js';
+import './ssr-b2c0b401.js';
 import { RangeConnected as RangeConnected$1 } from './RangeSlider.js';
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 var alert = function alert(_ref) {
   var theme = _ref.theme;
-  return css(_templateObject(), theme.colors.alertColor);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
 };
 
-var Content = styled('div')(_templateObject2(), function (props) {
+var Content = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
   return props.alert && alert;
 });
 
-var checkValueChange = helper.checkValueChange,
-    getClassName = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
+var getClassName = helper.getClassName,
     isEqual = helper.isEqual;
 var RangeInput = {
   name: 'RangeInput',
@@ -95,7 +75,7 @@ var RangeInput = {
     stepValue: types.number,
     componentStyle: types.style,
     componentId: types.stringRequired,
-    includeNullValues: types.bool,
+    includeNullValues: VueTypes.bool,
     beforeValueChange: types.func,
     customQuery: types.func,
     data: types.data,
@@ -130,17 +110,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 = _extends({}, value);
+            this.$data.currentValue = _extends({}, currentValue);
             this.$emit('change', this.$data.currentValue);
             break;
 
@@ -150,13 +132,13 @@ var RangeInput = {
             break;
 
           default:
-            this.$data.currentValue = _extends({}, value);
+            this.$data.currentValue = _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');
@@ -172,12 +154,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) {
@@ -213,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];
@@ -334,7 +318,7 @@ var RangeInput = {
   }
 };
 
-var mapStateToProps = function mapStateToProps(state, props) {
+var mapStateToProps = function mapStateToProps(state) {
   return {
     themePreset: state.config.themePreset
   };