@appbaseio/reactivesearch-vue 1.16.0-alpha.35 → 1.16.0-alpha.38

package/dist/cjs/{DropDown-cf9bfffc.js → DropDown-c46d8b0c.js}

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

package/dist/cjs/DynamicRangeSlider.js

@@ -6,17 +6,17 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-57d01f18.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var Title = require('./Title-584a8cc8.js');
-var Container = require('./Container-526efa6a.js');
+var index = require('./index-d44a0a21.js');
+var Title = require('./Title-39765ee6.js');
+var Container = require('./Container-8a08d663.js');
 var NoSSR = _interopDefault(require('vue-no-ssr'));
-var ssr = require('./ssr-0ee35a09.js');
+var ssr = require('./ssr-c333c82c.js');
 
 var addComponent = configureStore.Actions.addComponent,
     removeComponent = configureStore.Actions.removeComponent,
@@ -29,9 +29,10 @@ var addComponent = configureStore.Actions.addComponent,
     updateComponentProps = configureStore.Actions.updateComponentProps;
 var checkValueChange = configureStore.helper.checkValueChange,
     getClassName = configureStore.helper.getClassName,
-    getOptionsFromQuery = configureStore.helper.getOptionsFromQuery,
     isEqual = configureStore.helper.isEqual,
-    checkSomePropChange = configureStore.helper.checkSomePropChange;
+    checkSomePropChange = configureStore.helper.checkSomePropChange,
+    extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
 var DynamicRangeSlider = {
   name: 'DynamicRangeSlider',
   components: ssr.getComponents(),
@@ -54,7 +55,8 @@ var DynamicRangeSlider = {
     URLParams: VueTypes.bool.def(false),
     sliderOptions: VueTypes.object.def({}),
     nestedField: vueTypes.types.string,
-    index: VueTypes.string
+    index: VueTypes.string,
+    value: vueTypes.types.range
   },
   data: function data() {
     this.internalRangeComponent = this.$props.componentId + "__range__internal";
@@ -100,6 +102,8 @@ var DynamicRangeSlider = {
       components = _this$$$store$getStat.components;
     }
 
+    var value = this.$props.value;
+
     if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
       this.addComponent(this.componentId);
       this.addComponent(this.internalRangeComponent);
@@ -108,6 +112,8 @@ var DynamicRangeSlider = {
         this.handleChange(this.selectedValue);
       } else if (this.selectedValue) {
         this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
+      } else if (value) {
+        this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
       } // get range before executing other queries
 
 
@@ -126,6 +132,13 @@ var DynamicRangeSlider = {
     }
   },
   methods: {
+    isControlled: function isControlled() {
+      if (this.$props.value && this.$listeners) {
+        return true;
+      }
+
+      return false;
+    },
     setDefaultValue: function setDefaultValue(_ref) {
       var start = _ref.start,
           end = _ref.end;
@@ -136,6 +149,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];
       }
@@ -185,7 +200,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;
@@ -219,19 +243,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);
         index.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
@@ -278,18 +306,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;
@@ -299,6 +328,11 @@ var DynamicRangeSlider = {
       if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
         this.updateQueryHandler(this.$data.currentValue);
       }
+    },
+    value: function value(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+      }
     }
   },
   render: function render() {
@@ -320,9 +354,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,
@@ -372,7 +406,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/cjs/{Flex-f146cdad.js → Flex-699639d2.js}

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);

package/dist/cjs/{FormControlList-808dbcef.js → FormControlList-73497794.js}

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);

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

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);

package/dist/cjs/{ListItem-b40adb04.js → ListItem-933c27e4.js}

@@ -2,12 +2,12 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var polished = require('polished');
-require('./Title-584a8cc8.js');
+require('./Title-39765ee6.js');
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var container = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tborder-radius: 0.25rem;\n\toverflow: hidden;\n"])));

package/dist/cjs/MultiDropdownList.js

@@ -6,26 +6,27 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var Button = require('./Button-11307285.js');
-var vueTypes = require('./vueTypes-57d01f18.js');
+var Button = require('./Button-d2f1aeda.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
-var Title = require('./Title-584a8cc8.js');
-require('./CancelSvg-4aa35935.js');
-require('./Input-3cc3fa59.js');
+var index = require('./index-d44a0a21.js');
+var ComponentWrapper = require('./ComponentWrapper-7302fe1a.js');
+require('@vue/babel-helper-vue-jsx-merge-props');
+var Title = require('./Title-39765ee6.js');
+require('./CancelSvg-82021d23.js');
+require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-var Container = require('./Container-526efa6a.js');
+var Container = require('./Container-8a08d663.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
-var utils = require('./utils-1219e1fe.js');
-var DropDown = require('./DropDown-cf9bfffc.js');
+var utils = require('./utils-23afb20b.js');
+var DropDown = require('./DropDown-c46d8b0c.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -36,8 +37,9 @@ var isEqual = configureStore.helper.isEqual,
     checkValueChange = configureStore.helper.checkValueChange,
     checkPropChange = configureStore.helper.checkPropChange,
     getClassName = configureStore.helper.getClassName,
-    getOptionsFromQuery = configureStore.helper.getOptionsFromQuery,
-    getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery;
+    getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
+    extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
 var MultiDropdownList = {
   name: 'MultiDropdownList',
   data: function data() {
@@ -349,7 +351,7 @@ var MultiDropdownList = {
       }
 
       var performUpdate = function performUpdate() {
-        _this3.currentValue = currentValue;
+        _this3.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
 
         _this3.updateQueryHandler(finalValues, props);
 
@@ -366,12 +368,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
 
         index.updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
@@ -390,10 +393,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);
         index.updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
       }
 
@@ -431,7 +433,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, _rollupPluginBabelHelpers._extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
@@ -490,12 +492,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({
@@ -522,9 +524,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: {
@@ -559,6 +561,10 @@ MultiDropdownList.generateQueryOptions = function (props, after) {
   }) : utils.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],
@@ -580,7 +586,7 @@ var mapDispatchtoProps = {
 };
 var ListConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(MultiDropdownList), {
   componentType: constants.componentTypes.multiDropdownList,
-  internalComponent: true
+  internalComponent: MultiDropdownList.hasInternalComponent()
 });
 
 MultiDropdownList.install = function (Vue) {

package/dist/cjs/MultiList.js

@@ -6,23 +6,23 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-57d01f18.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-89c39a9e.js');
-var ComponentWrapper = require('./ComponentWrapper-32481890.js');
-var Title = require('./Title-584a8cc8.js');
-var Input = require('./Input-3cc3fa59.js');
-var Container = require('./Container-526efa6a.js');
+var index = require('./index-d44a0a21.js');
+var ComponentWrapper = require('./ComponentWrapper-7302fe1a.js');
+var Title = require('./Title-39765ee6.js');
+var Input = require('./Input-c6f181d5.js');
+var Container = require('./Container-8a08d663.js');
 var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
-var FormControlList = require('./FormControlList-808dbcef.js');
-var utils = require('./utils-1219e1fe.js');
+var FormControlList = require('./FormControlList-73497794.js');
+var utils = require('./utils-23afb20b.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -32,7 +32,8 @@ var isEqual = configureStore.helper.isEqual,
     getQueryOptions = configureStore.helper.getQueryOptions,
     checkValueChange = configureStore.helper.checkValueChange,
     getClassName = configureStore.helper.getClassName,
-    getOptionsFromQuery = configureStore.helper.getOptionsFromQuery;
+    extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
 var MultiList = {
   name: 'MultiList',
   props: {
@@ -91,13 +92,14 @@ var MultiList = {
   },
   beforeMount: function beforeMount() {
     this.updateQueryHandlerOptions(this.$props);
+    var value = this.selectedValue || this.$props.value || this.$props.defaultValue;
+    this.setValue(value, !this.selectedValue);
+  },
+  mounted: function mounted() {
+    var currentValue = Object.keys(this.$data.currentValue);
 
-    if (this.selectedValue) {
-      this.setValue(this.selectedValue);
-    } else if (this.$props.value) {
-      this.setValue(this.$props.value, true);
-    } else if (this.$props.defaultValue) {
-      this.setValue(this.$props.defaultValue, true);
+    if (this.$props.value !== undefined && !isEqual(this.$props.value, currentValue)) {
+      this.$emit('change', currentValue);
     }
   },
   watch: {
@@ -142,7 +144,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) {
@@ -346,12 +352,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
 
         index.updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
@@ -370,10 +377,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);
         index.updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
       }
 
@@ -397,7 +403,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, _rollupPluginBabelHelpers._extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
@@ -441,7 +447,7 @@ var MultiList = {
       if (value === undefined) {
         this.setValue(currentValue);
       } else {
-        var values = index.parseValueArray(value, currentValue);
+        var values = index.parseValueArray(value || [], currentValue);
         this.$emit('change', values);
       }
     },
@@ -506,12 +512,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({
@@ -538,9 +544,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: {
@@ -590,9 +596,14 @@ var mapDispatchtoProps = {
   setCustomQuery: setCustomQuery,
   setDefaultQuery: setDefaultQuery
 };
+
+MultiList.hasInternalComponent = function () {
+  return true;
+};
+
 var ListConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(MultiList), {
   componentType: constants.componentTypes.multiList,
-  internalComponent: true
+  internalComponent: MultiList.hasInternalComponent()
 });
 
 MultiList.install = function (Vue) {