@appbaseio/reactivesearch-vue 1.16.0-alpha.34 → 1.16.0-alpha.37

package/dist/es/{DropDown-c8da0a2c.js → DropDown-4edaa621.js}

@@ -1,12 +1,13 @@
 import { helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-687b2304.js';
-import { a as isFunction } from './index-cb1950b6.js';
-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-08bb1bcf.js';
+import { t as types } from './vueTypes-9326e0be.js';
+import { a as isFunction } from './index-5daa8276.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-4d9e0857.js';
+import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-d8519224.js';
 import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -120,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, {
@@ -145,7 +147,13 @@ 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 ? _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) {
@@ -266,7 +274,7 @@ var Dropdown = {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
     },
-    renderSearchbox: function renderSearchbox() {
+    renderSearchbox: function renderSearchbox(eventObject) {
       var h = this.$createElement;
       var _this$$props2 = this.$props,
           componentId = _this$$props2.componentId,
@@ -274,7 +282,7 @@ var Dropdown = {
           showClear = _this$$props2.showClear,
           themePreset = _this$$props2.themePreset,
           innerClass = _this$$props2.innerClass;
-      var InputComponent = h(Input, {
+      var InputComponent = h(Input, _mergeJSXProps([{
         "attrs": {
           "id": componentId + "-input",
           "showIcon": false,
@@ -287,11 +295,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(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {

package/dist/es/DynamicRangeSlider.js

@@ -1,15 +1,15 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-687b2304.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-cb1950b6.js';
-import { T as Title } from './Title-3522ff56.js';
-import { C as Container } from './Container-18b03fde.js';
+import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-5daa8276.js';
+import { T as Title } from './Title-579f8d6c.js';
+import { C as Container } from './Container-4383c6f0.js';
 import NoSSR from 'vue-no-ssr';
-import { g as getComponents, S as Slider } from './ssr-a41dfea9.js';
+import { g as getComponents, S as Slider } from './ssr-e3196de1.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(),
@@ -47,7 +48,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 +95,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 +105,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 +125,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 +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];
       }
@@ -178,7 +193,16 @@ var DynamicRangeSlider = {
     },
     handleSlider: function handleSlider() {
       var sliderValues = this.$refs.slider.getValue();
-      this.handleChange(sliderValues);
+      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;
@@ -212,19 +236,23 @@ var DynamicRangeSlider = {
       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);
 
-        query = _ref2.query;
-        customQueryOptions = getOptionsFromQuery(this.$props.customQuery(value, this.$props));
+        if (queryTobeSet) {
+          query = queryTobeSet;
+        }
+
+        customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
         updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
       }
 
-      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
@@ -271,18 +299,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;
@@ -292,6 +321,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() {
@@ -313,9 +347,9 @@ var DynamicRangeSlider = {
     }, [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,
@@ -365,7 +399,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) {

package/dist/es/{Flex-8770345d.js → Flex-aac91505.js}

@@ -1,4 +1,4 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import { lighten } from 'polished';

package/dist/es/{FormControlList-704f8dee.js → FormControlList-fe389a2e.js}

@@ -1,4 +1,4 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import { lighten } from 'polished';

package/dist/es/{Input-08bb1bcf.js → Input-d8519224.js}

@@ -1,4 +1,4 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 

package/dist/es/{ListItem-8e8fb535.js → ListItem-bdb6d53d.js}

@@ -1,8 +1,8 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import { lighten } from 'polished';
-import './Title-3522ff56.js';
+import './Title-579f8d6c.js';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var container = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tborder-radius: 0.25rem;\n\toverflow: hidden;\n"])));

package/dist/es/MultiDropdownList.js

@@ -1,24 +1,25 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 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-687b2304.js';
+import { l as loadMoreContainer, B as Button } from './Button-799185e2.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, 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 { T as Title } from './Title-3522ff56.js';
-import './CancelSvg-c2c03a35.js';
-import './Input-08bb1bcf.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-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
+import '@vue/babel-helper-vue-jsx-merge-props';
+import { T as Title } from './Title-579f8d6c.js';
+import './CancelSvg-4d9e0857.js';
+import './Input-d8519224.js';
 import 'compute-scroll-into-view';
-import { C as Container } from './Container-18b03fde.js';
+import { C as Container } from './Container-4383c6f0.js';
 import '@appbaseio/reactivecore/lib/utils/suggestions';
-import { g as getAggsQuery } from './utils-64a2e5f0.js';
-import { D as Dropdown } from './DropDown-c8da0a2c.js';
+import { g as getAggsQuery } from './utils-3a32e13f.js';
+import { D as Dropdown } from './DropDown-4edaa621.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -29,8 +30,9 @@ var isEqual = helper.isEqual,
     checkValueChange = helper.checkValueChange,
     checkPropChange = helper.checkPropChange,
     getClassName = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
-    getCompositeAggsQuery = helper.getCompositeAggsQuery;
+    getCompositeAggsQuery = helper.getCompositeAggsQuery,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var MultiDropdownList = {
   name: 'MultiDropdownList',
   data: function data() {
@@ -342,7 +344,7 @@ var MultiDropdownList = {
       }
 
       var performUpdate = function performUpdate() {
-        _this3.currentValue = currentValue;
+        _this3.currentValue = _extends({}, currentValue);
 
         _this3.updateQueryHandler(finalValues, props);
 
@@ -359,12 +361,13 @@ var MultiDropdownList = {
 
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
 
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
         }
 
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
+        defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet); // Update calculated default query in store
 
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
@@ -383,10 +386,9 @@ var MultiDropdownList = {
       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);
+        customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
         updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
       }
 
@@ -424,7 +426,7 @@ var MultiDropdownList = {
 
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
-        var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
+        var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
         this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
@@ -483,12 +485,12 @@ MultiDropdownList.defaultQuery = function (value, props) {
 
     if (props.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({
@@ -515,9 +517,9 @@ MultiDropdownList.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: {
@@ -552,6 +554,10 @@ MultiDropdownList.generateQueryOptions = function (props, after) {
   }) : getAggsQuery(queryOptions, props);
 };
 
+MultiDropdownList.hasInternalComponent = function () {
+  return true;
+};
+
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
@@ -573,7 +579,7 @@ var mapDispatchtoProps = {
 };
 var ListConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(MultiDropdownList), {
   componentType: componentTypes.multiDropdownList,
-  internalComponent: true
+  internalComponent: MultiDropdownList.hasInternalComponent()
 });
 
 MultiDropdownList.install = function (Vue) {

package/dist/es/MultiList.js

@@ -1,21 +1,21 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.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-687b2304.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, 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 { T as Title } from './Title-3522ff56.js';
-import { I as Input } from './Input-08bb1bcf.js';
-import { C as Container } from './Container-18b03fde.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-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
+import { T as Title } from './Title-579f8d6c.js';
+import { I as Input } from './Input-d8519224.js';
+import { C as Container } from './Container-4383c6f0.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';
+import { U as UL, C as Checkbox } from './FormControlList-fe389a2e.js';
+import { g as getAggsQuery } from './utils-3a32e13f.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -25,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: {
@@ -84,13 +85,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: {
@@ -135,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) {
@@ -339,12 +345,13 @@ var MultiList = {
 
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
 
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
         }
 
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
+        defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet); // Update calculated default query in store
 
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
@@ -363,10 +370,9 @@ var MultiList = {
       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);
+        customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
         updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
       }
 
@@ -390,7 +396,7 @@ var MultiList = {
 
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
-        var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
+        var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
         this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
@@ -434,7 +440,7 @@ var MultiList = {
       if (value === undefined) {
         this.setValue(currentValue);
       } else {
-        var values = parseValueArray(value, currentValue);
+        var values = parseValueArray(value || [], currentValue);
         this.$emit('change', values);
       }
     },
@@ -499,12 +505,12 @@ MultiList.defaultQuery = function (value, props) {
 
     if (props.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({
@@ -531,9 +537,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: {
@@ -583,9 +589,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-0f24d612.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.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-687b2304.js';
+import { t as types } from './vueTypes-9326e0be.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 { 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';
+import { o as parseValueArray, f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
+import { T as Title } from './Title-579f8d6c.js';
+import { C as Container } from './Container-4383c6f0.js';
+import { U as UL, C as Checkbox } from './FormControlList-fe389a2e.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,