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

package/dist/es/{DropDown-3d4291f1.js → DropDown-7d9a15c1.js}

@@ -1,91 +1,37 @@
 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 { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-98d938a9.js';
-import { a as isFunction } from './index-185b6266.js';
-import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-1159c4b5.js';
-import { D as Downshift } from './DownShift-92347b5e.js';
+import { t as types } from './vueTypes-9326e0be.js';
+import { a as isFunction } from './index-7788a843.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-4cfae5fd.js';
+import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-7a2a9fac.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tborder-color: ", ";\n\tcolor: ", ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var small = css(_templateObject());
+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"])));
 
 var dark = function dark(_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2(), theme.colors.backgroundColor, theme.colors.borderColor, theme.colors.textColor, theme.colors.backgroundColor);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tborder-color: ", ";\n\tcolor: ", ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor, theme.colors.borderColor, theme.colors.textColor, theme.colors.backgroundColor);
 };
 
-var Select = styled('button')(_templateObject3(), function (props) {
+var Select = styled('button')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
   return props.small ? small : null;
 }, function (_ref2) {
   var themePreset = _ref2.themePreset;
   return themePreset === 'dark' && dark;
 });
-var Tick = styled('span')(_templateObject4(), function (_ref3) {
+var Tick = styled('span')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.primaryColor;
 });
 
-function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var open = css(_templateObject$1());
-var Chevron = styled('span')(_templateObject2$1(), function (props) {
+var _templateObject$1, _templateObject2$1;
+var open = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"])));
+var Chevron = styled('span')(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
   return props.open ? open : null;
 });
 
@@ -108,23 +54,25 @@ var Dropdown = {
     items: types.data,
     keyField: VueTypes.string.def('key'),
     labelField: VueTypes.string.def('label'),
-    multi: types.bool,
+    multi: VueTypes.bool,
     // change event
     placeholder: types.string,
-    returnsObject: types.bool,
+    returnsObject: VueTypes.bool,
     customLabelRenderer: types.func,
-    hasCustomRenderer: types.bool,
+    hasCustomRenderer: VueTypes.bool,
     customRenderer: types.func,
     renderItem: types.func,
     renderNoResults: VueTypes.any,
     handleChange: types.func,
     transformData: types.func,
     selectedItem: types.selectedValue,
-    showCount: types.bool,
-    single: types.bool,
+    showCount: VueTypes.bool,
+    single: VueTypes.bool,
     small: VueTypes.bool.def(false),
     themePreset: types.themePreset,
-    showSearch: types.bool
+    showSearch: VueTypes.bool,
+    showClear: VueTypes.bool,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   render: function render() {
     var _this = this;
@@ -152,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;
@@ -173,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, {
@@ -198,26 +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]] || // MultiDropdownRange
-            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;
@@ -267,6 +206,7 @@ var Dropdown = {
 
       if (!this.$props.multi) {
         this.isOpen = false;
+        this.searchTerm = '';
       }
     },
     handleStateChange: function handleStateChange(_ref2) {
@@ -290,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;
 
@@ -330,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

@@ -1,15 +1,15 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import 'redux';
-import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-185b6266.js';
-import { T as Title } from './Title-f0217338.js';
-import { C as Container } from './Container-88c805ef.js';
+import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-7788a843.js';
+import { T as Title } from './Title-3342664a.js';
+import { C as Container } from './Container-ba826e96.js';
 import NoSSR from 'vue-no-ssr';
-import { g as getComponents, S as Slider } from './ssr-a710392b.js';
+import { g as getComponents, S as Slider } from './ssr-b2c0b401.js';
 
 var addComponent = Actions.addComponent,
     removeComponent = Actions.removeComponent,
@@ -22,9 +22,10 @@ var addComponent = Actions.addComponent,
     updateComponentProps = Actions.updateComponentProps;
 var checkValueChange = helper.checkValueChange,
     getClassName = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
     isEqual = helper.isEqual,
-    checkSomePropChange = helper.checkSomePropChange;
+    checkSomePropChange = helper.checkSomePropChange,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var DynamicRangeSlider = {
   name: 'DynamicRangeSlider',
   components: getComponents(),
@@ -41,11 +42,14 @@ var DynamicRangeSlider = {
     innerClass: types.style,
     react: types.react,
     showFilter: VueTypes.bool.def(true),
+    destroyOnUnmount: VueTypes.bool,
     showCheckbox: VueTypes.bool.def(true),
     title: types.title,
     URLParams: VueTypes.bool.def(false),
     sliderOptions: VueTypes.object.def({}),
-    nestedField: types.string
+    nestedField: types.string,
+    index: VueTypes.string,
+    value: types.range
   },
   data: function data() {
     this.internalRangeComponent = this.$props.componentId + "__range__internal";
@@ -70,7 +74,12 @@ var DynamicRangeSlider = {
     this.setQueryListener(this.$props.componentId, onQueryChange, null); // Update props in store
 
     this.setComponentProps(this.componentId, this.$props, componentTypes.dynamicRangeSlider);
-    this.setComponentProps(this.internalRangeComponent, this.$props, componentTypes.dynamicRangeSlider); // Set custom query in store
+    this.setComponentProps(this.internalRangeComponent, this.$props, componentTypes.dynamicRangeSlider);
+
+    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);
   },
@@ -78,17 +87,31 @@ var DynamicRangeSlider = {
     this.setReact();
   },
   beforeMount: function beforeMount() {
-    this.addComponent(this.$props.componentId);
-    this.addComponent(this.internalRangeComponent);
+    var components = [];
+
+    if (this.$$store) {
+      var _this$$$store$getStat = this.$$store.getState();
+
+      components = _this$$$store$getStat.components;
+    }
+
+    var value = this.$props.value;
 
-    if (Array.isArray(this.selectedValue)) {
-      this.handleChange(this.selectedValue);
-    } else if (this.selectedValue) {
-      this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
-    } // get range before executing other queries
+    if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
+      this.addComponent(this.componentId);
+      this.addComponent(this.internalRangeComponent);
 
+      if (Array.isArray(this.selectedValue)) {
+        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
 
-    this.updateRangeQueryOptions();
+
+      this.updateRangeQueryOptions();
+    }
   },
   beforeUpdate: function beforeUpdate() {
     if (!this.currentValue) {
@@ -96,10 +119,19 @@ var DynamicRangeSlider = {
     }
   },
   beforeDestroy: function beforeDestroy() {
-    this.removeComponent(this.$props.componentId);
-    this.removeComponent(this.internalRangeComponent);
+    if (this.destroyOnUnmount) {
+      this.removeComponent(this.$props.componentId);
+      this.removeComponent(this.internalRangeComponent);
+    }
   },
   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;
@@ -110,6 +142,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];
       }
@@ -157,8 +191,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;
@@ -189,28 +233,31 @@ var DynamicRangeSlider = {
     },
     updateQueryHandler: function updateQueryHandler(value) {
       var query = DynamicRangeSlider.defaultQuery(value, this.$props);
-      var customQueryOptions;
 
       if (this.$props.customQuery) {
-        var _ref2 = this.$props.customQuery(value, this.$props) || {};
+        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
+        var queryTobeSet = extractQueryFromCustomQuery(customQueryTobeSet);
+
+        if (queryTobeSet) {
+          query = queryTobeSet;
+        }
 
-        query = _ref2.query;
-        customQueryOptions = getOptionsFromQuery(this.$props.customQuery(value, this.$props));
+        var customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
         updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
+        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
       }
 
-      var _ref3 = this.range || {
+      var _ref2 = this.range || {
         start: value[0],
         end: value[1]
       },
-          start = _ref3.start,
-          end = _ref3.end;
+          start = _ref2.start,
+          end = _ref2.end;
 
       var currentStart = value[0],
           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.updateQuery({
         componentId: this.$props.componentId,
         query: query,
@@ -251,18 +298,19 @@ 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) {
       if (isEqual(newValue, oldValue) || !this.currentValue) return;
 
-      var _ref4 = this.currentValue || [],
-          currentStart = _ref4[0],
-          currentEnd = _ref4[1];
+      var _ref3 = this.currentValue || [],
+          currentStart = _ref3[0],
+          currentEnd = _ref3[1];
 
-      var _ref5 = oldValue || {},
-          oldStart = _ref5.start,
-          oldEnd = _ref5.end;
+      var _ref4 = oldValue || {},
+          oldStart = _ref4.start,
+          oldEnd = _ref4.end;
 
       var newStart = currentStart === oldStart ? newValue.start : currentStart;
       var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
@@ -272,12 +320,17 @@ 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() {
     var h = arguments[0];
 
-    if (!this.range) {
+    if (!this.range || !this.currentValue) {
       return null;
     }
 
@@ -291,13 +344,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
@@ -343,7 +398,15 @@ 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 [];
+};
+
+DynamicRangeSlider.hasInternalComponent = function () {
+  return true;
 };
 
 var mapStateToProps = function mapStateToProps(state, props) {
@@ -370,7 +433,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
     options: options,
     range: range,
     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/Flex-1f0795c3.js

@@ -0,0 +1,47 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
+import { css } from 'emotion';
+import styled from '@appbaseio/vue-emotion';
+import { lighten } from 'polished';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var leftLabel = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tflex-direction: row;\n\talign-items: center;\n"])));
+var rightLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tflex-direction: row-reverse;\n\talign-items: center;\n"])));
+var topLabel = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tflex-direction: column;\n"])));
+var bottomLabel = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\tflex-direction: column-reverse;\n"])));
+
+var border = function border(_ref) {
+  var colors = _ref.theme.colors;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\tborder: 1px solid ", ";\n"])), colors.borderColor || '#ccc');
+};
+
+var Flex = styled('div')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\tsvg.cancel-icon {\n\t\tcursor: pointer;\n\t\tfill: ", ";\n\t\tflex-basis: 30px;\n\n\t\t&:hover {\n\t\t\tfill: ", ";\n\t\t}\n\t}\n"])), function (props) {
+  return props.inline ? 'inline-flex' : 'flex';
+}, function (props) {
+  return (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel;
+}, function (props) {
+  return (props.labelPosition === 'right' || props.iconPosition === 'left') && rightLabel;
+}, function (props) {
+  return props.labelPosition === 'top' && topLabel;
+}, function (props) {
+  return props.labelPosition === 'bottom' && bottomLabel;
+}, function (props) {
+  return props.showBorder && border;
+}, function (props) {
+  return props.justifyContent && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\t\t\tjustify-content: ", ";\n\t\t"])), props.justifyContent);
+}, function (props) {
+  return props.alignItems && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n\t\t\talign-items: ", ";\n\t\t"])), props.alignItems);
+}, function (props) {
+  return props.flex && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n\t\t\tflex: ", ";\n\t\t"])), props.flex);
+}, function (props) {
+  return props.direction && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n\t\t\tflex-direction: ", ";\n\t\t"])), props.direction);
+}, function (props) {
+  return props.basis && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\t\t\tflex-basis: ", ";\n\t\t"])), props.basis);
+}, function (_ref2) {
+  var colors = _ref2.theme.colors;
+  return colors.borderColor || lighten(0.3, colors.textColor);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.textColor;
+});
+
+export { Flex as F };

package/dist/es/FormControlList-c22d64f6.js

@@ -0,0 +1,40 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
+import { css } from 'emotion';
+import styled from '@appbaseio/vue-emotion';
+import { lighten } from 'polished';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var item = {
+  width: '15px',
+  height: '15px',
+  scale: '4px'
+};
+var vh = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tborder: 0;\n\tclip: rect(1px, 1px, 1px, 1px);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twidth: 1px;\n\twhite-space: nowrap;\n"])));
+var hideInputControl = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t+ label {\n\t\tpadding-left: 0;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder: 0;\n\t\t\tmargin: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n"])));
+
+var formItem = function formItem(_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t", ";\n\n\t&:focus {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tbox-shadow: 0 0 0 2px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:hover {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:active {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\ttransition-duration: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t+ label {\n\t\tposition: relative;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t&::before {\n\t\t\tbackground-color: #fff;\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tcolor: ", ";\n\t\t\tmargin-right: calc(", " * 0.5);\n\t\t\ttop: 50%;\n\t\t\tleft: 0;\n\t\t\twidth: ", ";\n\t\t\theight: ", ";\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\n\t\t&::after {\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 2);\n\t\t\twidth: calc(", " - ", ");\n\t\t\theight: calc(", " - ", ");\n\t\t\tmargin-top: calc(", " / -2 - ", " / -2);\n\t\t\ttransform: scale(0);\n\t\t\ttransform-origin: 50%;\n\t\t\ttransition: transform 200ms ease-out;\n\t\t}\n\t}\n"])), vh, lighten(0.4, theme.colors.primaryColor), theme.colors.primaryColor, theme.colors.borderColor || lighten(0.1, theme.colors.textColor), theme.colors.primaryColor, item.width, item.width, item.height, theme.colors.primaryColor, item.scale, item.width, item.scale, item.height, item.scale, item.height, item.scale);
+};
+
+var Radio = styled('input')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 50%;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t&:active,\n\t\t&:focus {\n\t\t\t+ label {\n\t\t\t\tcolor: ", ";\n\n\t\t\t\t&::before {\n\t\t\t\t\tanimation: none;\n\t\t\t\t\tfilter: none;\n\t\t\t\t\ttransition: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tanimation: none;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n"])), formItem, function (props) {
+  return props.show ? null : hideInputControl;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.primaryColor;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.primaryColor;
+});
+var Checkbox = styled('input')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 5);\n\t\t\twidth: calc(", " / 2);\n\t\t\theight: calc(", " / 5);\n\t\t\tmargin-top: calc(", " / -2 / 2 * 0.8);\n\t\t\tborder-style: solid;\n\t\t\tborder-color: ", ";\n\t\t\tborder-width: 0 0 2px 2px;\n\t\t\tborder-radius: 0;\n\t\t\tborder-image: none;\n\t\t\ttransform: rotate(-45deg) scale(0);\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\ttransform: rotate(-45deg) scale(1);\n\t\t\t\ttransition: transform 200ms ease-out;\n\t\t\t}\n\t\t}\n\t}\n"])), formItem, function (props) {
+  return props.show ? null : hideInputControl;
+}, item.width, item.width, item.width, item.height, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.primaryColor;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.primaryColor;
+});
+var UL = styled('ul')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 240px;\n\tposition: relative;\n\toverflow-y: auto;\n\tpadding-bottom: 12px;\n\n\tli {\n\t\theight 30px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding-left: 2px;\n\t}\n"])));
+
+export { Checkbox as C, Radio as R, UL as U };