@appbaseio/reactivesearch-vue 1.34.0-alpha.2 → 1.34.0

package/dist/cjs/ReactiveBase.js

@@ -8,13 +8,14 @@ var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
 require('@appbaseio/reactivecore/lib/utils/constants');
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
-var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
-var vueEmotion = require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-621a8143.js');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
+var vueTypes = require('./vueTypes-b7007f5f.js');
 require('redux');
-var index = require('./index-dc25b706.js');
+var index = require('./index-de136c17.js');
+var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
 var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
 var Appbase = _interopDefault(require('appbase-js'));
 var AppbaseAnalytics = _interopDefault(require('@appbaseio/analytics'));
@@ -44,48 +45,40 @@ var Provider = {
       $analytics: this.analyticsRef
     };
   },
-  render: function render() {
-    if (this.$slots["default"]().length > 1) {
-      return vue.h('div', this.$slots["default"]());
+  render: function render(h) {
+    if (this.$slots["default"].length > 1) {
+      return h('div', this.$slots["default"]);
     }
-    return this.$slots["default"]()[0];
+    return this.$slots["default"][0];
   }
 };
 
 var _templateObject;
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
-}
-var Base = function Base(_ref) {
-  var _ref$data$attrs$as = _ref.data.attrs.as,
-    T = _ref$data$attrs$as === void 0 ? 'div' : _ref$data$attrs$as,
-    props = _ref.data,
-    children = _ref.children;
-  var propsVar = props;
-  delete propsVar.attrs.as;
-  return vue.createVNode(T, props, _isSlot(children) ? children : {
-    "default": function _default() {
-      return [children];
-    }
-  });
+var Base = {
+  functional: true,
+  render: function render(h, _ref) {
+    var _ref$data$attrs$as = _ref.data.attrs.as,
+      T = _ref$data$attrs$as === void 0 ? 'div' : _ref$data$attrs$as,
+      props = _ref.data,
+      children = _ref.children;
+    delete props.attrs.as;
+    return h(T, _mergeJSXProps([{}, props]), [children]);
+  }
 };
-var Base$1 = vueEmotion.styled(Base)(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tcolor: ", ";\n\twidth: 100%;\n\n\tinput,\n\tbutton,\n\ttextarea,\n\tselect {\n\t\tfont-family: ", ";\n\t}\n\n\t*,\n\t*:before,\n\t*:after {\n\t\tbox-sizing: border-box;\n\t}\n"])), function (_ref2) {
+var Base$1 = styled__default(Base)(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tcolor: ", ";\n\twidth: 100%;\n\n\tinput,\n\tbutton,\n\ttextarea,\n\tselect {\n\t\tfont-family: ", ";\n\t}\n\n\t*,\n\t*:before,\n\t*:after {\n\t\tbox-sizing: border-box;\n\t}\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return theme && theme.typography ? theme.typography.fontFamily : 'unset';
+  return theme.typography.fontFamily;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme && theme.typography ? theme.typography.fontSize : 'unset';
+  return theme.typography.fontSize;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme && theme.typography ? theme.typography.textColor : 'unset';
+  return theme.colors.textColor;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme && theme.typography ? theme.typography.fontFamily : 'unset';
+  return theme.typography.fontFamily;
 });
 
-function _isSlot$1(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
-}
 var setHeaders = configureStore.Actions.setHeaders,
   setValue = configureStore.Actions.setValue;
 var isEqual = configureStore.helper.isEqual;
@@ -274,15 +267,14 @@ var URLParamsProvider = {
     }
   },
   render: function render() {
-    var children = this.$slots["default"]();
-    return vue.createVNode(Base$1, {
-      "as": this.$props.as,
+    var h = arguments[0];
+    var children = this.$slots["default"];
+    return h(Base$1, {
+      "attrs": {
+        "as": this.$props.as
+      },
       "class": this.$props.className
-    }, _isSlot$1(children) ? children : {
-      "default": function _default() {
-        return [children];
-      }
-    });
+    }, [children]);
   }
 };
 var mapStateToProps = function mapStateToProps(state) {
@@ -334,9 +326,6 @@ function getTheme(preset) {
   return dark;
 }
 
-function _isSlot$2(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
-}
 var ReactiveBase = {
   name: 'ReactiveBase',
   data: function data() {
@@ -362,7 +351,6 @@ var ReactiveBase = {
     enableAppbase: VueTypes.bool.def(false),
     credentials: vueTypes.types.string,
     headers: vueTypes.types.headers,
-    queryParams: vueTypes.types.string,
     theme: VueTypes.object.def({}),
     themePreset: VueTypes.string.def('light'),
     type: vueTypes.types.string,
@@ -378,16 +366,14 @@ var ReactiveBase = {
     setSearchParams: vueTypes.types.func,
     mongodb: vueTypes.types.mongodb,
     endpoint: vueTypes.types.endpointConfig,
-    preferences: VueTypes.object
+    preferences: VueTypes.object,
+    httpRequestTimeout: VueTypes.number.def(30)
   },
   provide: function provide() {
     return {
       theme_reactivesearch: index.composeThemeObject(getTheme(this.$props.themePreset), this.$props.theme),
       store: this.store,
-      $searchPreferences: this.preferences,
-      $emotionCache: this.$parent && this.$parent.$emotionCache || vueEmotion.createCache({
-        key: 'css'
-      })
+      $searchPreferences: this.preferences
     };
   },
   watch: {
@@ -418,6 +404,9 @@ var ReactiveBase = {
     },
     mongodb: function mongodb() {
       this.updateState(this.$props);
+    },
+    httpRequestTimeout: function httpRequestTimeout() {
+      this.updateState(this.$props);
     }
   },
   computed: {
@@ -464,7 +453,8 @@ var ReactiveBase = {
         analytics: props.appbaseConfig ? props.appbaseConfig.recordAnalytics : props.analytics,
         analyticsConfig: props.appbaseConfig,
         mongodb: props.mongodb,
-        endpoint: props.endpoint
+        endpoint: props.endpoint,
+        httpRequestTimeout: (props.httpRequestTimeout || 0) * 1000 || 30000
       };
       var queryParams = '';
       if (typeof window !== 'undefined') {
@@ -547,30 +537,26 @@ var ReactiveBase = {
     }
   },
   render: function render() {
-    var _this = this;
-    var children = this.$slots["default"]();
+    var h = arguments[0];
+    var children = this.$slots["default"];
     var _this$$props2 = this.$props,
       style = _this$$props2.style,
       className = _this$$props2.className;
-    return vue.createVNode(Provider, {
-      "store": this.store,
-      "analyticsRef": this.analyticsRef
-    }, {
-      "default": function _default() {
-        return [vue.createVNode(URLParamsProvider$1, {
-          "as": _this.$props.as,
-          "headers": _this.getHeaders,
-          "style": style,
-          "className": className,
-          "getSearchParams": _this.getSearchParams,
-          "setSearchParams": _this.setSearchParams
-        }, _isSlot$2(children) ? children : {
-          "default": function _default() {
-            return [children];
-          }
-        })];
+    return h(Provider, {
+      "attrs": {
+        "store": this.store,
+        "analyticsRef": this.analyticsRef
       }
-    });
+    }, [h(URLParamsProvider$1, {
+      "attrs": {
+        "as": this.$props.as,
+        "headers": this.getHeaders,
+        "className": className,
+        "getSearchParams": this.getSearchParams,
+        "setSearchParams": this.setSearchParams
+      },
+      "style": style
+    }, [children])]);
   }
 };
 ReactiveBase.install = function (Vue) {

package/dist/cjs/ReactiveComponent.js

@@ -2,54 +2,324 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('@appbaseio/reactivecore');
-require('@appbaseio/reactivecore/lib/utils/constants');
-require('./_rollupPluginBabelHelpers-f8b843f8.js');
-require('vue');
-require('vue-types');
-require('@appbaseio/reactivecore/lib/utils/helper');
-require('@appbaseio/vue-emotion');
-require('emotion');
-require('polished');
-require('./Button-626c5e8e.js');
-require('./vueTypes-621a8143.js');
-require('./Pagination-a468f960.js');
-require('./ReactiveList.js');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var configureStore = require('@appbaseio/reactivecore');
+var configureStore__default = _interopDefault(configureStore);
+var constants = require('@appbaseio/reactivecore/lib/utils/constants');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var VueTypes = _interopDefault(require('vue-types'));
+var vueTypes = require('./vueTypes-b7007f5f.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-require('./index-dc25b706.js');
-require('./ComponentWrapper-db45cc6d.js');
-require('./PreferencesConsumer-034c55e3.js');
-require('./Title-8802a218.js');
-require('./ListItem-c067bc07.js');
-require('./Card-c381ded3.js');
-require('./Flex-d5675ea6.js');
-require('hotkeys-js');
-require('./DataSearch-7c71ec9f.js');
-require('./CancelSvg-062a42f0.js');
-require('./Input-4d278ca0.js');
-require('compute-scroll-into-view');
-require('./Container-29f049b2.js');
-require('vue-highlight-words');
-require('@vue/babel-helper-vue-transform-on');
-var ReactiveComponent = require('./ReactiveComponent-f0f486ca.js');
-require('@appbaseio/reactivecore/lib/utils/suggestions');
-require('./FormControlList-cf1ff2ca.js');
-require('./utils-83fd01e9.js');
-require('./SingleList.js');
-require('./MultiList.js');
-require('./DropDown-3b899b20.js');
-require('./SingleDropdownList.js');
-require('./MultiDropdownList.js');
-require('./ToggleButton.js');
-require('vue-no-ssr');
-require('./ssr-eb901d09.js');
-require('./DynamicRangeSlider.js');
-require('./SingleRange.js');
-require('./MultiRange.js');
-require('./RangeSlider.js');
-require('./RangeInput.js');
+var index = require('./index-de136c17.js');
+var ComponentWrapper = require('./ComponentWrapper-94c50228.js');
+var PreferencesConsumer = require('./PreferencesConsumer-5e6e84a2.js');
+
+var _excluded = ["options"];
+var updateQuery = configureStore.Actions.updateQuery,
+  setQueryOptions = configureStore.Actions.setQueryOptions,
+  setCustomQuery = configureStore.Actions.setCustomQuery,
+  setDefaultQuery = configureStore.Actions.setDefaultQuery;
+var parseHits = configureStore.helper.parseHits,
+  isEqual = configureStore.helper.isEqual,
+  getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
+  getResultStats = configureStore.helper.getResultStats,
+  extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
+  getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
+var ReactiveComponent = {
+  name: 'ReactiveComponent',
+  props: {
+    componentId: vueTypes.types.stringRequired,
+    aggregationField: vueTypes.types.string,
+    aggregationSize: VueTypes.number,
+    size: VueTypes.number,
+    defaultQuery: vueTypes.types.func,
+    customQuery: vueTypes.types.func,
+    filterLabel: vueTypes.types.string,
+    react: vueTypes.types.react,
+    showFilter: VueTypes.bool.def(true),
+    URLParams: VueTypes.bool.def(false),
+    distinctField: vueTypes.types.string,
+    distinctFieldConfig: vueTypes.types.props,
+    index: VueTypes.string,
+    endpoint: vueTypes.types.endpointConfig
+  },
+  created: function created() {
+    var _this = this;
+    var props = this.$props;
+    this.internalComponent = null;
+    this.$defaultQuery = null;
+    // Set custom query in store
+    index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+    var customQuery = props.customQuery,
+      componentId = props.componentId,
+      filterLabel = props.filterLabel,
+      showFilter = props.showFilter,
+      URLParams = props.URLParams,
+      distinctField = props.distinctField,
+      distinctFieldConfig = props.distinctFieldConfig,
+      index$1 = props.index;
+    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
+    }
+    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
+      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+    if (!this.enableAppbase && index$1) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+    if (customQuery) {
+      var calcCustomQuery = customQuery(this.selectedValue, props);
+      var query = extractQueryFromCustomQuery(calcCustomQuery);
+      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery(calcCustomQuery) : null;
+      if (customQueryOptions) {
+        this.setQueryOptions(componentId, _rollupPluginBabelHelpers._extends({}, customQueryOptions, this.getAggsQuery()), false);
+      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+      this.updateQuery({
+        componentId: componentId,
+        query: query,
+        value: this.selectedValue || null,
+        label: filterLabel,
+        showFilter: showFilter,
+        URLParams: URLParams
+      });
+    }
+    this.setQuery = function (_ref) {
+      var options = _ref.options,
+        obj = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_ref, _excluded);
+      var queryToBeSet = obj.query;
 
+      // when enableAppbase is true, Backend throws error because of repeated query in request body
+      if (queryToBeSet && queryToBeSet.query) {
+        queryToBeSet = queryToBeSet.query;
+      }
+      var customQueryCalc = _rollupPluginBabelHelpers._extends({}, options, {
+        query: queryToBeSet
+      });
+      var rsAPIQuery = customQueryCalc;
+      // handle stored queries
+      if (queryToBeSet && queryToBeSet.id) {
+        rsAPIQuery = queryToBeSet;
+      }
+      // Update customQuery field for RS API
+      _this.setCustomQuery(props.componentId, rsAPIQuery);
+      if (options) {
+        _this.setQueryOptions(props.componentId, _rollupPluginBabelHelpers._extends({}, _this.getAggsQuery(), options), false);
+      }
+      _this.updateQuery(_rollupPluginBabelHelpers._extends({}, obj, {
+        query: customQueryCalc.query,
+        componentId: props.componentId,
+        label: props.filterLabel,
+        showFilter: props.showFilter,
+        URLParams: props.URLParams
+      }));
+    };
+    if (props.defaultQuery) {
+      this.internalComponent = props.componentId + "__internal";
+    }
+    if (this.internalComponent && this.$props.defaultQuery) {
+      index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
+      var _query = extractQueryFromCustomQuery(this.$defaultQuery);
+      var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
+      if (queryOptions) {
+        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
+      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+      this.updateQuery({
+        componentId: this.internalComponent,
+        query: _query
+      });
+    }
+  },
+  watch: {
+    hits: function hits(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    rawData: function rawData(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    aggregations: function aggregations(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    aggregationData: function aggregationData(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    promotedResults: function promotedResults(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    hidden: function hidden(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    total: function total(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    time: function time(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    defaultQuery: function defaultQuery(newVal, oldVal) {
+      if (newVal && !index.isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+        this.$defaultQuery = newVal(this.selectedValue, this.$props);
+        var query = extractQueryFromCustomQuery(this.$defaultQuery);
+        var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
+        if (queryOptions) {
+          this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
+        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+        // Update default query for RS API
+        index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+        this.updateQuery({
+          componentId: this.internalComponent,
+          query: query
+        });
+      }
+    },
+    customQuery: function customQuery(newVal, oldVal) {
+      if (newVal && !index.isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+        var componentId = this.$props.componentId;
+        this.$customQuery = newVal(this.selectedValue, this.$props);
+        var query = extractQueryFromCustomQuery(this.$customQuery);
+        var queryOptions = getOptionsForCustomQuery(this.$customQuery);
+        if (queryOptions) {
+          this.setQueryOptions(componentId, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
+        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
 
+        // Update custom query for RS API
+        index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+        this.updateQuery({
+          componentId: componentId,
+          query: query
+        });
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    try {
+      var dom = this.$scopedSlots["default"];
+      var error = this.error,
+        isLoading = this.isLoading,
+        selectedValue = this.selectedValue;
+      var propsToBePassed = _rollupPluginBabelHelpers._extends({
+        error: error,
+        loading: isLoading
+      }, this.getData(), {
+        value: selectedValue,
+        setQuery: this.setQuery
+      });
+      return h("div", [dom(propsToBePassed)]);
+    } catch (e) {
+      return null;
+    }
+  },
+  methods: {
+    getAggsQuery: function getAggsQuery() {
+      if (this.aggregationField) {
+        return {
+          aggs: getCompositeAggsQuery({
+            props: this.$props,
+            showTopHits: true,
+            value: this.selectedValue
+          }).aggs
+        };
+      }
+      return {};
+    },
+    getData: function getData() {
+      var hits = this.hits,
+        aggregations = this.aggregations,
+        aggregationData = this.aggregationData,
+        promotedResults = this.promotedResults,
+        rawData = this.rawData;
+      var filteredResults = parseHits(hits);
+      if (promotedResults.length) {
+        var ids = promotedResults.map(function (item) {
+          return item._id;
+        }).filter(Boolean);
+        if (ids) {
+          filteredResults = filteredResults.filter(function (item) {
+            return !ids.includes(item._id);
+          });
+        }
+        filteredResults = [].concat(promotedResults, filteredResults);
+      }
+      return {
+        data: filteredResults,
+        aggregationData: aggregationData,
+        rawData: rawData,
+        aggregations: aggregations,
+        promotedData: promotedResults,
+        resultStats: this.stats
+      };
+    }
+  },
+  computed: {
+    stats: function stats() {
+      return getResultStats(this);
+    }
+  }
+};
+ReactiveComponent.hasInternalComponent = function (props) {
+  return !!props.defaultQuery;
+};
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
+    aggregationData: state.compositeAggregations[props.componentId] || [],
+    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
+    rawData: state.rawData[props.componentId],
+    error: state.error[props.componentId],
+    isLoading: state.isLoading[props.componentId],
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    promotedResults: state.promotedResults[props.componentId] || [],
+    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
+    componentProps: state.props[props.componentId],
+    enableAppbase: state.config.enableAppbase
+  };
+};
+var mapDispatchtoProps = {
+  setQueryOptions: setQueryOptions,
+  updateQuery: updateQuery,
+  setCustomQuery: setCustomQuery,
+  setDefaultQuery: setDefaultQuery
+};
+var ConnectedComponent = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(ReactiveComponent), {
+  componentType: constants.componentTypes.reactiveComponent
+});
+var RcConnected = PreferencesConsumer.PreferencesConsumer({
+  name: 'RcConnected',
+  render: function render(h) {
+    return h(ConnectedComponent, {
+      attrs: this.$attrs,
+      on: this.$listeners,
+      scopedSlots: this.$scopedSlots,
+      slots: this.$slots
+    });
+  }
+});
+RcConnected.name = ReactiveComponent.name;
+RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
+// Add componentType for SSR
+RcConnected.componentType = constants.componentTypes.reactiveComponent;
+RcConnected.install = function (Vue) {
+  Vue.component(RcConnected.name, RcConnected);
+};
 
-exports.default = ReactiveComponent.ReactiveComponent;
+exports.default = RcConnected;