@appbaseio/reactivesearch-vue 1.32.3 → 1.33.0

package/dist/cjs/{install-3ebc879c.js → ReactiveComponent-5ff98cce.js}

@@ -4,21 +4,21 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
+var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
-var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var Button = require('./Button-0673191e.js');
 var vueTypes = require('./vueTypes-727b7c63.js');
 var ReactiveList = require('./ReactiveList.js');
-var index = require('./index-6a167fe0.js');
-var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
+var index = require('./index-08f8dfa3.js');
+var ComponentWrapper = require('./ComponentWrapper-981ab977.js');
+var PreferencesConsumer = require('./PreferencesConsumer-7be03476.js');
 var Title = require('./Title-1de7d0f4.js');
-var ReactiveBase = require('./ReactiveBase.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var DataSearch = require('./DataSearch-b51a5d0f.js');
+var DataSearch = require('./DataSearch-708b183d.js');
 var CancelSvg = require('./CancelSvg-9f258f4f.js');
 var Input = require('./Input-e6603a7e.js');
 var Container = require('./Container-daf30918.js');
@@ -27,15 +27,10 @@ var MultiList = require('./MultiList.js');
 var SingleDropdownList = require('./SingleDropdownList.js');
 var MultiDropdownList = require('./MultiDropdownList.js');
 var ToggleButton = require('./ToggleButton.js');
-var ReactiveComponent = require('./ReactiveComponent.js');
-var SelectedFilters = require('./SelectedFilters.js');
+var DynamicRangeSlider = require('./DynamicRangeSlider.js');
 var SingleRange = require('./SingleRange.js');
 var MultiRange = require('./MultiRange.js');
-var ResultCard = require('./ResultCard.js');
-var ResultList = require('./ResultList.js');
 var RangeSlider = require('./RangeSlider.js');
-var DynamicRangeSlider = require('./DynamicRangeSlider.js');
-var StateProvider = require('./StateProvider.js');
 var RangeInput = require('./RangeInput.js');
 
 var _templateObject;
@@ -1385,25 +1380,415 @@ var mapDispatchToProps = {
   setDefaultQuery: setDefaultQuery,
   recordSuggestionClick: recordSuggestionClick
 };
-var DSConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
+var SBConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
   componentType: constants.componentTypes.searchBox,
   internalComponent: true
-});
+}));
 
 SearchBox.install = function (Vue) {
-  Vue.component(SearchBox.name, DSConnected);
+  Vue.component(SearchBox.name, SBConnected);
 }; // Add componentType for SSR
 
 
 SearchBox.componentType = constants.componentTypes.searchBox;
 
-var components = [ReactiveList.default, ResultCard.default, ResultList.default, ReactiveBase.default, DataSearch.DataSearch, SearchBox, SingleList.default, MultiList.default, SingleRange.default, MultiRange.default, RangeSlider.default, DynamicRangeSlider.default, ReactiveComponent.default, SelectedFilters.default, ToggleButton.default, SingleDropdownList.default, MultiDropdownList.default, StateProvider.default, RangeInput.default];
-function install (Vue) {
-  components.map(function (component) {
-    Vue.use(component);
-    return null;
-  });
-}
+var _excluded = ["options"];
+var updateQuery$1 = configureStore.Actions.updateQuery,
+    setQueryOptions = configureStore.Actions.setQueryOptions,
+    setCustomQuery$1 = configureStore.Actions.setCustomQuery,
+    setDefaultQuery$1 = configureStore.Actions.setDefaultQuery;
+var parseHits = configureStore.helper.parseHits,
+    isEqual$1 = configureStore.helper.isEqual,
+    getCompositeAggsQuery$1 = configureStore.helper.getCompositeAggsQuery,
+    getResultStats$1 = 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$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    rawData: function rawData(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    aggregations: function aggregations(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    aggregationData: function aggregationData(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    promotedResults: function promotedResults(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    hidden: function hidden(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    total: function total(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    time: function time(newVal, oldVal) {
+      if (!isEqual$1(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$1({
+            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$1(this);
+    }
+  }
+};
+
+ReactiveComponent.hasInternalComponent = function (props) {
+  return !!props.defaultQuery;
+};
+
+var mapStateToProps$1 = 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$1,
+  setCustomQuery: setCustomQuery$1,
+  setDefaultQuery: setDefaultQuery$1
+};
+var ConnectedComponent = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveComponent), {
+  componentType: constants.componentTypes.reactiveComponent
+});
+var RcConnected = PreferencesConsumer.PreferencesConsumer({
+  name: 'RcConnected',
+  render: function render(h) {
+    var component = ConnectedComponent;
+
+    switch (this.$attrs.componentType) {
+      case constants.componentTypes.reactiveList:
+        component = ReactiveList.RLConnected;
+        break;
+
+      case constants.componentTypes.dataSearch:
+        component = DataSearch.DSConnected;
+        break;
+
+      case constants.componentTypes.searchBox:
+        component = SBConnected;
+        break;
+      // list components
+
+      case constants.componentTypes.singleList:
+        component = SingleList.ListConnected;
+        break;
+
+      case constants.componentTypes.multiList:
+        component = MultiList.ListConnected;
+        break;
+
+      case constants.componentTypes.singleDropdownList:
+        component = SingleDropdownList.ListConnected;
+        break;
+
+      case constants.componentTypes.multiDropdownList:
+        component = MultiDropdownList.ListConnected;
+        break;
+      // basic components
+
+      case constants.componentTypes.toggleButton:
+        component = ToggleButton.ListConnected;
+        break;
+      // range components
+
+      case constants.componentTypes.dynamicRangeSlider:
+        component = DynamicRangeSlider.RangeConnected;
+        break;
+
+      case constants.componentTypes.singleRange:
+        component = SingleRange.RangeConnected;
+        break;
+
+      case constants.componentTypes.multiRange:
+        component = MultiRange.RangeConnected;
+        break;
+
+      case constants.componentTypes.rangeSlider:
+        component = RangeSlider.RangeConnected;
+        break;
+
+      case constants.componentTypes.rangeInput:
+        component = RangeInput.RangeConnected;
+        break;
+    }
+
+    return h(component, {
+      attrs: this.$attrs,
+      on: this.$listeners,
+      scopedSlots: this.$scopedSlots,
+      slots: this.$slots
+    });
+  }
+});
+
+ReactiveComponent.install = function (Vue) {
+  Vue.component(ReactiveComponent.name, RcConnected);
+}; // Add componentType for SSR
+
+
+ReactiveComponent.componentType = constants.componentTypes.reactiveComponent;
 
+exports.ReactiveComponent = ReactiveComponent;
 exports.SearchBox = SearchBox;
-exports.install = install;