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

package/dist/cjs/Input-e6603a7e.js

@@ -0,0 +1,79 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
+var emotion = require('emotion');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+
+var alertBorder = function alertBorder(_ref) {
+  var theme = _ref.theme;
+  return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder: 1px solid ", ";\n"])), theme.colors.alertColor);
+};
+
+var input = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tline-height: 1.5;\n\tmin-height: 42px;\n\tpadding: 8px 12px;\n\tborder: 1px solid #ccc;\n\tbackground-color: #fafafa;\n\tfont-size: 0.9rem;\n\toutline: none;\n\theight: 100%;\n\n\t&:focus {\n\t\tbackground-color: #fff;\n\t}\n"])));
+
+var dark = function dark(theme) {
+  return emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder-color: ", ";\n"])), theme.colors.borderColor);
+};
+
+var darkInput = function darkInput(_ref2) {
+  var theme = _ref2.theme;
+  return emotion.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\t", ";\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor, theme.colors.textColor, dark(theme), theme.colors.backgroundColor);
+};
+
+var Input = styled__default('input')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n"])), input, function (_ref3) {
+  var themePreset = _ref3.themePreset,
+      theme = _ref3.theme;
+  return themePreset === 'dark' && darkInput({
+    theme: theme
+  });
+}, function (props) {
+  return props.showIcon && props.iconPosition === 'left' && emotion.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-left: 36px;\n\t\t"])));
+}, function (props) {
+  return props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])));
+}, function (props) {
+  return (// for clear icon
+    props.showClear && emotion.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])))
+  );
+}, function (props) {
+  return (// for voice search icon
+    props.showVoiceSearch && emotion.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])))
+  );
+}, function (props) {
+  return (// for clear icon with search icon
+    props.showClear && props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
+  );
+}, function (props) {
+  return (// for voice search icon with search icon
+    props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
+  );
+}, function (props) {
+  return (// for voice search icon with clear icon
+    props.showVoiceSearch && props.showIcon && emotion.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
+  );
+}, function (props) {
+  return (// for clear icon with search icon and voice search
+    props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && emotion.css(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 90px;\n\t\t"])))
+  );
+}, function (props) {
+  return props.alert && alertBorder;
+});
+
+var suggestions = function suggestions(themePreset, theme) {
+  return emotion.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 402px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
+};
+
+var suggestionsContainer = emotion.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
+
+var noSuggestions = function noSuggestions(themePreset, theme) {
+  return emotion.css(_templateObject16 || (_templateObject16 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t", "\n"])), themePreset === 'dark' && theme && dark(theme));
+};
+
+exports.Input = Input;
+exports.noSuggestions = noSuggestions;
+exports.suggestions = suggestions;
+exports.suggestionsContainer = suggestionsContainer;

package/dist/cjs/ListItem-8c9e0d68.js

@@ -0,0 +1,46 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
+var emotion = require('emotion');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
+var polished = require('polished');
+require('./Title-1de7d0f4.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"])));
+var smallImage = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100px;\n\theight: 100px;\n"])));
+var Image = styled__default('div')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 160px;\n\theight: 160px;\n\t", ";\n\tmargin: 0;\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-image: ", ";\n"])), function (props) {
+  return props.small ? smallImage : null;
+}, function (props) {
+  return "url(" + props.src + ")";
+});
+var ListItem = styled__default('a')(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\n\t\tline-height: 1.2rem;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmargin: 0;\n\t\tpadding: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tborder: 1px solid #eee;\n\n\t\t&:hover, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fff';
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.3, theme.colors.backgroundColor) : polished.lighten(0.68, theme.colors.textColor);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.textColor;
+}, function (props) {
+  return props.href ? 'cursor: pointer' : null;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.2, theme.colors.backgroundColor) : '#fdfefd';
+}, function (props) {
+  if (props.image) {
+    return props.small ? 'calc(100% - 100px)' : 'calc(100% - 160px)';
+  }
+
+  return '100%';
+}, function (props) {
+  return props.image ? '10px' : 0;
+});
+
+exports.Image = Image;
+exports.ListItem = ListItem;
+exports.container = container;

package/dist/cjs/MultiDropdownList.js

@@ -6,25 +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-4abdbfff.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.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-d48d4365.js');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var Button = require('./Button-446f819e.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-baca18c4.js');
-var ComponentWrapper = require('./ComponentWrapper-603848ed.js');
-var Title = require('./Title-65d39104.js');
-require('./Input-95cb19f8.js');
+var index = require('./index-6a167fe0.js');
+var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
+require('@vue/babel-helper-vue-jsx-merge-props');
+var Title = require('./Title-1de7d0f4.js');
+require('./CancelSvg-9f258f4f.js');
+require('./Input-e6603a7e.js');
 require('compute-scroll-into-view');
-require('./DownShift-966a58cb.js');
-var Container = require('./Container-6cdd3864.js');
-var utils = require('./utils-ea846a20.js');
-var DropDown = require('./DropDown-f6224ac8.js');
+var Container = require('./Container-daf30918.js');
+require('@appbaseio/reactivecore/lib/utils/suggestions');
+var utils = require('./utils-d6a52588.js');
+var DropDown = require('./DropDown-5513ea77.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -35,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() {
@@ -74,19 +77,28 @@ var MultiDropdownList = {
     selectAllLabel: vueTypes.types.string,
     showCount: VueTypes.bool.def(true),
     showFilter: VueTypes.bool.def(true),
-    size: VueTypes.number.def(100),
+    size: VueTypes.number,
     sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
     title: vueTypes.types.title,
     URLParams: VueTypes.bool.def(false),
     showMissing: VueTypes.bool.def(false),
     missingLabel: VueTypes.string.def('N/A'),
     showSearch: VueTypes.bool.def(false),
+    showClear: VueTypes.bool.def(false),
     showLoadMore: VueTypes.bool.def(false),
     loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
-    nestedField: vueTypes.types.string
+    nestedField: vueTypes.types.string,
+    index: VueTypes.string,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   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
+
     index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
     index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
   },
@@ -124,33 +136,35 @@ var MultiDropdownList = {
     options: function options(newVal, oldVal) {
       var _this2 = this;
 
-      checkPropChange(oldVal, newVal, function () {
-        var _this2$$props = _this2.$props,
-            showLoadMore = _this2$$props.showLoadMore,
-            dataField = _this2$$props.dataField;
-        var modifiedOptions = _this2.$data.modifiedOptions;
-
-        if (showLoadMore) {
-          // append options with showLoadMore
-          var buckets = newVal[dataField].buckets;
-          var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
-            return {
-              key: bucket.key[dataField],
-              doc_count: bucket.doc_count
+      if (newVal) {
+        checkPropChange(oldVal, newVal, function () {
+          var _this2$$props = _this2.$props,
+              showLoadMore = _this2$$props.showLoadMore,
+              dataField = _this2$$props.dataField;
+          var modifiedOptions = _this2.$data.modifiedOptions;
+
+          if (showLoadMore) {
+            // append options with showLoadMore
+            var buckets = newVal[dataField].buckets;
+            var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
+              return {
+                key: bucket.key[dataField],
+                doc_count: bucket.doc_count
+              };
+            }));
+            var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
+
+            var isLastBucket = !buckets.length;
+            _this2.after = {
+              after: after
             };
-          }));
-          var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
-
-          var isLastBucket = !buckets.length;
-          _this2.after = {
-            after: after
-          };
-          _this2.isLastBucket = isLastBucket;
-          _this2.modifiedOptions = nextOptions;
-        } else {
-          _this2.modifiedOptions = newVal[_this2.$props.dataField] ? newVal[_this2.$props.dataField].buckets : [];
-        }
-      });
+            _this2.isLastBucket = isLastBucket;
+            _this2.modifiedOptions = nextOptions;
+          } else {
+            _this2.modifiedOptions = newVal[_this2.$props.dataField] ? newVal[_this2.$props.dataField].buckets : [];
+          }
+        });
+      }
     },
     size: function size() {
       this.updateQueryOptions(this.$props);
@@ -193,13 +207,22 @@ var MultiDropdownList = {
     var renderErrorCalc = this.$scopedSlots.renderError || renderError;
     var renderLabelCalc = this.$scopedSlots.renderLabel || renderLabel;
     var isLastBucket = this.$data.isLastBucket;
+    var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
     var selectAll = [];
 
     if (renderErrorCalc && this.error) {
       return index.isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
     }
 
-    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0) {
+    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
+      if (renderNoResults && index.isFunction(renderNoResults)) {
+        return h("div", [renderNoResults()]);
+      }
+
+      if (renderNoResults && !index.isFunction(renderNoResults)) {
+        return renderNoResults;
+      }
+
       return null;
     }
 
@@ -219,7 +242,7 @@ var MultiDropdownList = {
         "items": [].concat(selectAll, this.$data.modifiedOptions.filter(function (item) {
           return String(item.key).trim().length;
         }).map(function (item) {
-          return _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, item), {}, {
+          return _rollupPluginBabelHelpers._extends({}, item, {
             key: String(item.key)
           });
         })),
@@ -235,6 +258,8 @@ var MultiDropdownList = {
         "renderItem": renderItemCalc,
         "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
         "showSearch": this.$props.showSearch,
+        "showClear": this.$props.showClear,
+        "searchPlaceholder": this.$props.searchPlaceholder,
         "transformData": this.$props.transformData,
         "footer": showLoadMore && !isLastBucket && h("div", {
           "attrs": {
@@ -326,7 +351,7 @@ var MultiDropdownList = {
       }
 
       var performUpdate = function performUpdate() {
-        _this3.currentValue = currentValue;
+        _this3.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
 
         _this3.updateQueryHandler(finalValues, props);
 
@@ -338,22 +363,22 @@ var MultiDropdownList = {
       checkValueChange(props.componentId, finalValues, props.beforeValueChange, performUpdate);
     },
     updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
-      var defaultQueryOptions;
       var query = MultiDropdownList.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
 
         index.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,
@@ -364,17 +389,15 @@ var MultiDropdownList = {
     updateQueryHandler: function updateQueryHandler(value, props) {
       var customQuery = props.customQuery;
       var query = MultiDropdownList.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);
         index.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,
@@ -408,8 +431,8 @@ var MultiDropdownList = {
 
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
-        var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
-        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, queryOptions), defaultQueryOptions));
+        var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
+        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
       }
@@ -444,7 +467,13 @@ var MultiDropdownList = {
 
 MultiDropdownList.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;
@@ -465,14 +494,14 @@ MultiDropdownList.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({
@@ -499,9 +528,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: {
@@ -536,6 +565,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],
@@ -544,7 +577,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
   };
 };
 
@@ -556,7 +590,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) {