@appbaseio/reactivesearch-vue 2.0.0-alpha.3 → 3.0.0-alpha.0

package/dist/cjs/SingleDropdownList.js

@@ -6,40 +6,44 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
-var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
-require('emotion');
+require('@vue/babel-helper-vue-transform-on');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vue = require('vue');
+var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
+require('emotion');
 require('polished');
-var Button = require('./Button-446f819e.js');
-var vueTypes = require('./vueTypes-727b7c63.js');
+var Button = require('./Button-ad042719.js');
+var vueTypes = require('./vueTypes-1bf00978.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-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');
+var index = require('./index-d8d8f291.js');
+var ComponentWrapper = require('./ComponentWrapper-75f88599.js');
+var PreferencesConsumer = require('./PreferencesConsumer-eb265924.js');
+var Title = require('./Title-8802a218.js');
+var DropDown = require('./DropDown-6cf84c47.js');
+require('./Input-4b434436.js');
 require('compute-scroll-into-view');
-var Container = require('./Container-daf30918.js');
+var Container = require('./Container-29f049b2.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
-var utils = require('./utils-d6a52588.js');
-var DropDown = require('./DropDown-c479bbb0.js');
+var utils = require('./utils-83fd01e9.js');
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
 var updateQuery = configureStore.Actions.updateQuery,
-    setQueryOptions = configureStore.Actions.setQueryOptions,
-    setCustomQuery = configureStore.Actions.setCustomQuery,
-    setDefaultQuery = configureStore.Actions.setDefaultQuery;
+  setQueryOptions = configureStore.Actions.setQueryOptions,
+  setCustomQuery = configureStore.Actions.setCustomQuery,
+  setDefaultQuery = configureStore.Actions.setDefaultQuery;
 var getQueryOptions = configureStore.helper.getQueryOptions,
-    checkValueChange = configureStore.helper.checkValueChange,
-    checkPropChange = configureStore.helper.checkPropChange,
-    getClassName = configureStore.helper.getClassName,
-    isEqual = configureStore.helper.isEqual,
-    getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
-    extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
-    getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
+  checkValueChange = configureStore.helper.checkValueChange,
+  checkPropChange = configureStore.helper.checkPropChange,
+  getClassName = configureStore.helper.getClassName,
+  isEqual = configureStore.helper.isEqual,
+  getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
+  extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
+  getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
 var SingleDropdownList = {
   name: 'SingleDropdownList',
   data: function data() {
@@ -85,26 +89,21 @@ var SingleDropdownList = {
     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'),
+    loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.nullable]).def('Load More'),
     nestedField: vueTypes.types.string,
     index: VueTypes.string,
     searchPlaceholder: VueTypes.string.def('Type here to search...'),
     endpoint: vueTypes.types.endpointConfig
   },
   created: function created() {
-    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
-
+    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);
   },
   beforeMount: function beforeMount() {
     this.updateQueryOptions(this.$props);
-
     if (this.selectedValue) {
       this.setValue(this.selectedValue);
     } else if (this.$props.value) {
@@ -116,14 +115,12 @@ var SingleDropdownList = {
   watch: {
     options: function options(newVal, oldVal) {
       var _this = this;
-
       if (newVal) {
         checkPropChange(oldVal, newVal, function () {
           var _this$$props = _this.$props,
-              showLoadMore = _this$$props.showLoadMore,
-              dataField = _this$$props.dataField;
+            showLoadMore = _this$$props.showLoadMore,
+            dataField = _this$$props.dataField;
           var modifiedOptions = _this.$data.modifiedOptions;
-
           if (showLoadMore) {
             // append options with showLoadMore
             var buckets = newVal[dataField].buckets;
@@ -134,7 +131,6 @@ var SingleDropdownList = {
               };
             }));
             var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
-
             var isLastBucket = !buckets.length;
             _this.after = {
               after: after
@@ -182,106 +178,100 @@ var SingleDropdownList = {
     }
   },
   render: function render() {
-    var h = arguments[0];
+    var _this2 = this;
     var _this$$props2 = this.$props,
-        showLoadMore = _this$$props2.showLoadMore,
-        loadMoreLabel = _this$$props2.loadMoreLabel,
-        renderItem = _this$$props2.renderItem,
-        renderError = _this$$props2.renderError,
-        renderLabel = _this$$props2.renderLabel;
+      showLoadMore = _this$$props2.showLoadMore,
+      loadMoreLabel = _this$$props2.loadMoreLabel,
+      renderItem = _this$$props2.renderItem,
+      renderError = _this$$props2.renderError,
+      renderLabel = _this$$props2.renderLabel;
     var isLastBucket = this.$data.isLastBucket;
     var selectAll = [];
-    var renderItemCalc = this.$scopedSlots.renderItem || renderItem;
-    var renderErrorCalc = this.$scopedSlots.renderError || renderError;
-    var renderLabelCalc = this.$scopedSlots.renderLabel || renderLabel;
-    var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
-
+    var renderItemCalc = this.$slots.renderItem || renderItem;
+    var renderErrorCalc = this.$slots.renderError || renderError;
+    var renderLabelCalc = this.$slots.renderLabel || renderLabel;
+    var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
     if (renderErrorCalc && this.error) {
       return index.isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
     }
-
     if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
       if (renderNoResults && index.isFunction(renderNoResults)) {
-        return h("div", [renderNoResults()]);
+        return vue.createVNode("div", null, [renderNoResults()]);
       }
-
       if (renderNoResults && !index.isFunction(renderNoResults)) {
         return renderNoResults;
       }
-
       return null;
     }
-
     if (this.$props.selectAllLabel) {
       selectAll = [{
-        key: this.$props.selectAllLabel
+        key: this.$props.selectAllLabel,
+        doc_count: this.totalDocumentCount
       }];
     }
-
-    return h(Container.Container, {
+    return vue.createVNode(Container.Container, {
       "class": this.$props.className
-    }, [this.$props.title && h(Title.Title, {
-      "class": getClassName(this.$props.innerClass, 'title') || ''
-    }, [this.$props.title]), h(DropDown.Dropdown, {
-      "attrs": {
-        "innerClass": this.$props.innerClass,
-        "items": [].concat(selectAll, this.$data.modifiedOptions.filter(function (item) {
-          return String(item.key).trim().length;
-        }).map(function (item) {
-          return _rollupPluginBabelHelpers._extends({}, item, {
-            key: String(item.key)
-          });
-        })),
-        "handleChange": this.handleChange,
-        "selectedItem": this.$data.currentValue,
-        "placeholder": this.$props.placeholder,
-        "labelField": "key",
-        "showCount": this.$props.showCount,
-        "hasCustomRenderer": this.hasCustomRenderer,
-        "customRenderer": this.getComponent,
-        "renderItem": renderItemCalc,
-        "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
-        "themePreset": this.themePreset,
-        "showSearch": this.$props.showSearch,
-        "showClear": this.$props.showClear,
-        "searchPlaceholder": this.$props.searchPlaceholder,
-        "transformData": this.$props.transformData,
-        "footer": showLoadMore && !isLastBucket && h("div", {
-          "attrs": {
-            "css": Button.loadMoreContainer
+    }, {
+      "default": function _default() {
+        return [_this2.$props.title && vue.createVNode(Title.Title, {
+          "class": getClassName(_this2.$props.innerClass, 'title') || ''
+        }, {
+          "default": function _default() {
+            return [_this2.$props.title];
           }
-        }, [h(Button.Button, {
-          "on": {
-            "click": this.handleLoadMore
-          }
-        }, [loadMoreLabel])]),
-        "customLabelRenderer": renderLabelCalc
+        }), vue.createVNode(DropDown.Dropdown, {
+          "innerClass": _this2.$props.innerClass,
+          "items": [].concat(selectAll, _this2.$data.modifiedOptions.filter(function (item) {
+            return String(item.key).trim().length;
+          }).map(function (item) {
+            return _rollupPluginBabelHelpers._extends({}, item, {
+              key: String(item.key)
+            });
+          })),
+          "handleChange": _this2.handleChange,
+          "selectedItem": _this2.$data.currentValue,
+          "placeholder": _this2.$props.placeholder,
+          "labelField": "key",
+          "showCount": _this2.$props.showCount,
+          "hasCustomRenderer": _this2.hasCustomRenderer,
+          "customRenderer": _this2.getComponent,
+          "renderItem": renderItemCalc,
+          "renderNoResults": _this2.$slots.renderNoResults || _this2.$props.renderNoResults,
+          "themePreset": _this2.themePreset,
+          "showSearch": _this2.$props.showSearch,
+          "showClear": _this2.$props.showClear,
+          "searchPlaceholder": _this2.$props.searchPlaceholder,
+          "transformData": _this2.$props.transformData,
+          "footer": showLoadMore && !isLastBucket && vue.createVNode("div", {
+            "css": Button.loadMoreContainer
+          }, [vue.createVNode(Button.Button, {
+            "onClick": _this2.handleLoadMore
+          }, _isSlot(loadMoreLabel) ? loadMoreLabel : {
+            "default": function _default() {
+              return [loadMoreLabel];
+            }
+          })]),
+          "customLabelRenderer": renderLabelCalc
+        }, null)];
       }
-    })]);
+    });
   },
   methods: {
     setValue: function setValue(value, props) {
-      var _this2 = this;
-
+      var _this3 = this;
       if (props === void 0) {
         props = this.$props;
       }
-
       var performUpdate = function performUpdate() {
-        _this2.currentValue = value;
-
-        _this2.updateQueryHandler(value, props);
-
-        _this2.$emit('valueChange', value);
-
-        _this2.$emit('value-change', value);
+        _this3.currentValue = value;
+        _this3.updateQueryHandler(value, props);
+        _this3.$emit('valueChange', value);
+        _this3.$emit('value-change', value);
       };
-
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
     handleChange: function handleChange(item) {
       var value = this.$props.value;
-
       if (value === undefined) {
         this.setValue(item);
       } else {
@@ -290,21 +280,17 @@ var SingleDropdownList = {
     },
     updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
       var query = SingleDropdownList.defaultQuery(value, props);
-
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
         var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
-
         if (defaultQueryObj) {
           query = defaultQueryObj;
-        } // Update calculated default query in store
-
-
+        }
+        // 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.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -315,7 +301,6 @@ var SingleDropdownList = {
     updateQueryHandler: function updateQueryHandler(value, props) {
       var customQuery = props.customQuery;
       var query = SingleDropdownList.defaultQuery(value, props);
-
       if (customQuery) {
         var customQueryCalc = customQuery(value, props);
         query = extractQueryFromCustomQuery(customQueryCalc);
@@ -323,7 +308,6 @@ var SingleDropdownList = {
         var customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
         this.setQueryOptions(props.componentId, customQueryOptions, false);
       }
-
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -346,15 +330,12 @@ var SingleDropdownList = {
       if (addAfterKey === void 0) {
         addAfterKey = false;
       }
-
       // when using composite aggs flush the current options for a fresh query
       if (props.showLoadMore && !addAfterKey) {
         this.modifiedOptions = [];
       } // for a new query due to other changes don't append after to get fresh results
 
-
       var queryOptions = SingleDropdownList.generateQueryOptions(props, addAfterKey ? this.$data.after : {});
-
       if (props.defaultQuery) {
         var value = this.$data.currentValue;
         var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
@@ -370,7 +351,6 @@ var SingleDropdownList = {
       if (downshiftProps === void 0) {
         downshiftProps = {};
       }
-
       var currentValue = this.$data.currentValue;
       var data = {
         error: this.error,
@@ -390,56 +370,18 @@ var SingleDropdownList = {
     }
   }
 };
-
 SingleDropdownList.defaultQuery = function (value, props) {
-  var query = null;
-
-  if (props.selectAllLabel && props.selectAllLabel === value) {
-    if (props.showMissing) {
-      query = {
-        match_all: {}
-      };
-    }
-
-    query = {
-      exists: {
-        field: props.dataField
-      }
-    };
-  } else if (value) {
-    var _term;
-
-    if (props.showMissing && props.missingLabel === value) {
-      query = {
-        bool: {
-          must_not: {
-            exists: {
-              field: props.dataField
-            }
-          }
-        }
-      };
+  return {
+    query: {
+      queryFormat: props.queryFormat,
+      dataField: props.dataField,
+      value: value,
+      nestedField: props.nestedField,
+      selectAllLabel: props.selectAllLabel,
+      showMissing: props.showMissing
     }
-
-    query = {
-      term: (_term = {}, _term[props.dataField] = value, _term)
-    };
-  }
-
-  if (query && props.nestedField) {
-    return {
-      query: {
-        nested: {
-          path: props.nestedField,
-          query: query
-        }
-      }
-    };
-  }
-
-  return query;
+  };
 };
-
 SingleDropdownList.generateQueryOptions = function (props, after) {
   var queryOptions = getQueryOptions(props);
   return props.showLoadMore ? getCompositeAggsQuery({
@@ -448,40 +390,38 @@ SingleDropdownList.generateQueryOptions = function (props, after) {
     after: after
   }) : utils.getAggsQuery(queryOptions, props);
 };
-
 SingleDropdownList.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],
     rawData: state.rawData[props.componentId],
     isLoading: state.isLoading[props.componentId],
     selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || '',
+    totalDocumentCount: state.hits[props.componentId] && state.hits[props.componentId].total,
     themePreset: state.config.themePreset,
     error: state.error[props.componentId],
-    componentProps: state.props[props.componentId],
-    enableAppbase: state.config.enableAppbase
+    componentProps: state.props[props.componentId]
   };
 };
-
 var mapDispatchtoProps = {
   setQueryOptions: setQueryOptions,
   updateQuery: updateQuery,
   setCustomQuery: setCustomQuery,
   setDefaultQuery: setDefaultQuery
 };
-var ListConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(SingleDropdownList), {
+var ListConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(SingleDropdownList), {
   componentType: constants.componentTypes.singleDropdownList,
   internalComponent: SingleDropdownList.hasInternalComponent()
-});
-
-SingleDropdownList.install = function (Vue) {
-  Vue.component(SingleDropdownList.name, ListConnected);
-}; // Add componentType for SSR
-
+}));
+ListConnected.name = SingleDropdownList.name;
+ListConnected.install = function (Vue) {
+  Vue.component(ListConnected.name, ListConnected);
+};
 
-SingleDropdownList.componentType = constants.componentTypes.singleDropdownList;
+// Add componentType for SSR
+ListConnected.componentType = constants.componentTypes.singleDropdownList;
 
-exports.default = SingleDropdownList;
+exports.ListConnected = ListConnected;
+exports.default = ListConnected;