@appbaseio/reactivesearch-vue 1.33.1 → 1.33.3

package/dist/es/ReactiveBase.js

@@ -1,15 +1,16 @@
 import configureStore, { Actions, helper } from '@appbaseio/reactivecore';
 import '@appbaseio/reactivecore/lib/utils/constants';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
 import VueTypes from 'vue-types';
 import { isEqual as isEqual$1, transformRequestUsingEndpoint } from '@appbaseio/reactivecore/lib/utils/helper';
 import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-b8146772.js';
+import { t as types } from './vueTypes-8986b709.js';
 import 'redux';
-import { c as connect, e as composeThemeObject, X as X_SEARCH_CLIENT } from './index-99c5f9c9.js';
+import { c as connect, e as composeThemeObject, X as X_SEARCH_CLIENT } from './index-0444a498.js';
 import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
 import { updateAnalyticsConfig } from '@appbaseio/reactivecore/lib/actions/analytics';
 import Appbase from 'appbase-js';
+import AppbaseAnalytics from '@appbaseio/analytics';
 import 'url-search-params-polyfill';
 
 var Provider = {
@@ -22,21 +23,24 @@ var Provider = {
         if (!store.dispatch && !store.subscribe && !store.getState) {
           throw new Error('[reactivesearch-vue] - store provided is not a valid redux store');
         }
-
         return true;
       }
+    },
+    analyticsRef: {
+      type: Object,
+      required: true
     }
   },
   provide: function provide() {
     return {
-      $$store: this.store
+      $$store: this.store,
+      $analytics: this.analyticsRef
     };
   },
   render: function render(h) {
     if (this.$slots["default"].length > 1) {
       return h('div', this.$slots["default"]);
     }
-
     return this.$slots["default"][0];
   }
 };
@@ -46,9 +50,9 @@ 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;
+      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]);
   }
@@ -68,7 +72,7 @@ var Base$1 = styled(Base)(_templateObject || (_templateObject = _taggedTemplateL
 });
 
 var setHeaders = Actions.setHeaders,
-    setValue = Actions.setValue;
+  setValue = Actions.setValue;
 var isEqual = helper.isEqual;
 var URLParamsProvider = {
   name: 'URLParamsProvider',
@@ -81,32 +85,27 @@ var URLParamsProvider = {
   },
   mounted: function mounted() {
     var _this = this;
-
     this.init();
-
     window.onpopstate = function () {
       _this.init();
-
-      var activeComponents = Array.from(_this.params.keys()); // remove inactive components from selectedValues
-
+      var activeComponents = Array.from(_this.params.keys());
+      // remove inactive components from selectedValues
       Object.keys(_this.currentSelectedState).filter(function (item) {
         return !activeComponents.includes(item);
       }).forEach(function (component) {
         _this.setValue(component, null, undefined, undefined, undefined, undefined, undefined, undefined, 'URL');
-      }); // update active components in selectedValues
-
+      });
+      // update active components in selectedValues
       Array.from(_this.params.entries()).forEach(function (item) {
         try {
           var component = item[0],
-              value = item[1];
-
+            value = item[1];
           var _ref = _this.selectedValues[component] || {
-            label: component
-          },
-              label = _ref.label,
-              showFilter = _ref.showFilter,
-              URLParams = _ref.URLParams;
-
+              label: component
+            },
+            label = _ref.label,
+            showFilter = _ref.showFilter,
+            URLParams = _ref.URLParams;
           _this.setValue(component, JSON.parse(value), label, showFilter, URLParams, undefined, undefined, undefined, 'URL');
         } catch (e) {
           // Do not set value if JSON parsing fails.
@@ -124,7 +123,6 @@ var URLParamsProvider = {
     },
     selectedValues: function selectedValues(newVal, oldVal) {
       var _this2 = this;
-
       if (!isEqual(newVal, oldVal)) {
         this.searchString = this.$props.getSearchParams ? this.$props.getSearchParams() : window.location.search;
         this.params = new URLSearchParams(this.searchString);
@@ -134,8 +132,8 @@ var URLParamsProvider = {
         currentComponents.filter(function (component) {
           return newVal[component].URLParams;
         }).forEach(function (component) {
-          var selectedValues = newVal[component]; // prevents empty history pollution on initial load
-
+          var selectedValues = newVal[component];
+          // prevents empty history pollution on initial load
           if (_this2.hasValidValue(newVal[component]) || _this2.hasValidValue(oldVal[component])) {
             if (selectedValues.URLParams) {
               if (selectedValues.category) {
@@ -143,48 +141,41 @@ var URLParamsProvider = {
                   category: selectedValues.category,
                   value: selectedValues.value
                 }));
-
                 if (shouldUpdateHistory) {
                   shouldPushHistory = true;
                 }
               } else {
                 var _shouldUpdateHistory = _this2.setURL(component, _this2.getValue(selectedValues.value));
-
                 if (_shouldUpdateHistory) {
                   shouldPushHistory = true;
                 }
               }
             } else {
               _this2.params["delete"](component);
-
               shouldPushHistory = true;
             }
           } else if (!_this2.hasValidValue(newVal[component]) && urlComponents.includes(component)) {
             // doesn't have a valid value, but the url has a (stale) valid value set
             _this2.params["delete"](component);
-
             shouldPushHistory = true;
           }
-        }); // remove unmounted components
+        });
 
+        // remove unmounted components
         Object.keys(newVal).filter(function (component) {
           return !currentComponents.includes(component);
         }).forEach(function (component) {
           _this2.params["delete"](component);
-
           shouldPushHistory = true;
         });
-
         if (!currentComponents.length) {
           Array.from(this.params.keys()).forEach(function (item) {
             if (_this2.searchComponents && _this2.searchComponents.includes(item)) {
               _this2.params["delete"](item);
-
               shouldPushHistory = true;
             }
           });
         }
-
         if (shouldPushHistory) {
           this.pushToHistory();
         }
@@ -208,10 +199,8 @@ var URLParamsProvider = {
       // search on homepage -> route changes -> search results page with same search query
       if (window) {
         var searchString = this.$props.getSearchParams ? this.$props.getSearchParams() : window.location.search;
-
         if (searchString !== this.searchString) {
           var event;
-
           if (typeof Event === 'function') {
             event = new Event('popstate');
           } else {
@@ -219,7 +208,6 @@ var URLParamsProvider = {
             event = document.createEvent('Event');
             event.initEvent('popstate', true, true);
           }
-
           window.dispatchEvent(event);
         }
       }
@@ -231,20 +219,17 @@ var URLParamsProvider = {
     },
     getValue: function getValue(value) {
       var _this3 = this;
-
       if (Array.isArray(value) && value.length) {
         return value.map(function (item) {
           return _this3.getValue(item);
         });
       }
-
       if (value && typeof value === 'object') {
         // TODO: support for NestedList
         if (value.location) return value;
         if (value.category) return value;
         return value.label || value.key || null;
       }
-
       return value;
     },
     setURL: function setURL(component, value) {
@@ -252,21 +237,17 @@ var URLParamsProvider = {
         this.params["delete"](component);
         return true;
       }
-
       var data = JSON.stringify(value);
-
       if (data !== this.params.get(component)) {
         this.params.set(component, data);
         return true;
       }
-
       return false;
     },
     pushToHistory: function pushToHistory() {
       var paramsSting = this.params.toString() ? "?" + this.params.toString() : '';
       var base = window.location.href.split('?')[0];
       var newURL = "" + base + paramsSting;
-
       if (this.$props.setSearchParams) {
         this.$props.setSearchParams(newURL);
       } else if (window.history.pushState) {
@@ -274,7 +255,6 @@ var URLParamsProvider = {
           path: newURL
         }, '', newURL);
       }
-
       this.init();
     }
   },
@@ -289,23 +269,19 @@ var URLParamsProvider = {
     }, [children]);
   }
 };
-
 var mapStateToProps = function mapStateToProps(state) {
   return {
     selectedValues: state.selectedValues,
     searchComponents: state.components
   };
 };
-
 var mapDispatchtoProps = {
   setHeaders: setHeaders,
   setValue: setValue
 };
-
 URLParamsProvider.install = function (Vue) {
   Vue.component(URLParamsProvider.name, URLParamsProvider);
 };
-
 var URLParamsProvider$1 = connect(mapStateToProps, mapDispatchtoProps)(URLParamsProvider);
 
 var typography = {
@@ -339,7 +315,6 @@ function getTheme(preset) {
   if (preset === 'light') {
     return light;
   }
-
   return dark;
 }
 
@@ -356,8 +331,7 @@ var ReactiveBase = {
   },
   mounted: function mounted() {
     var enableAppbase = this.enableAppbase,
-        endpoint = this.endpoint;
-
+      endpoint = this.endpoint;
     if (!enableAppbase && endpoint) {
       console.warn('Warning(ReactiveSearch): The `endpoint` prop works only when `enableAppbase` prop is set to true.');
     }
@@ -427,15 +401,13 @@ var ReactiveBase = {
   computed: {
     getHeaders: function getHeaders() {
       var _this$$props = this.$props,
-          enableAppbase = _this$$props.enableAppbase,
-          headers = _this$$props.headers,
-          appbaseConfig = _this$$props.appbaseConfig,
-          mongodb = _this$$props.mongodb,
-          endpoint = _this$$props.endpoint;
-
+        enableAppbase = _this$$props.enableAppbase,
+        headers = _this$$props.headers,
+        appbaseConfig = _this$$props.appbaseConfig,
+        mongodb = _this$$props.mongodb,
+        endpoint = _this$$props.endpoint;
       var _ref = appbaseConfig || {},
-          enableTelemetry = _ref.enableTelemetry;
-
+        enableTelemetry = _ref.enableTelemetry;
       return _extends({}, enableAppbase && !mongodb && _extends({
         'X-Search-Client': X_SEARCH_CLIENT
       }, enableTelemetry === false && {
@@ -451,7 +423,6 @@ var ReactiveBase = {
     setStore: function setStore(props) {
       var credentials = props.url && props.url.trim() !== '' && !props.credentials ? null : props.credentials;
       var url = props.url && props.url.trim() !== '' ? props.url : '';
-
       if (props.enableAppbase && props.endpoint) {
         if (props.endpoint.url) {
           // eslint-disable-next-line prefer-destructuring
@@ -460,7 +431,6 @@ var ReactiveBase = {
           throw Error('Error(ReactiveSearch): The `endpoint` prop object requires `url` property.');
         }
       }
-
       var config = {
         url: url,
         app: props.app,
@@ -475,51 +445,65 @@ var ReactiveBase = {
         endpoint: props.endpoint
       };
       var queryParams = '';
-
       if (typeof window !== 'undefined') {
         queryParams = window.location.search;
       } else {
         queryParams = props.queryParams || '';
       }
-
       var params = new URLSearchParams(queryParams);
       var selectedValues = {};
       var urlValues = {};
       Array.from(params.keys()).forEach(function (key) {
         try {
           var _extends2, _extends3;
-
           var parsedParams = JSON.parse(params.get(key));
           var selectedValue = {};
-
           if (parsedParams.value) {
             selectedValue.value = parsedParams.value;
           } else {
             selectedValue.value = parsedParams;
           }
-
           if (parsedParams.category) selectedValue.category = parsedParams.category;
           selectedValue.reference = 'URL';
           selectedValues = _extends({}, selectedValues, (_extends2 = {}, _extends2[key] = selectedValue, _extends2));
           urlValues = _extends({}, urlValues, (_extends3 = {}, _extends3[key] = selectedValue.value, _extends3));
-        } catch (e) {// Do not add to selectedValues if JSON parsing fails.
+        } catch (e) {
+          // Do not add to selectedValues if JSON parsing fails.
         }
       });
       var themePreset = props.themePreset,
-          enableAppbase = props.enableAppbase,
-          endpoint = props.endpoint;
+        enableAppbase = props.enableAppbase,
+        endpoint = props.endpoint;
       var appbaseRef = Appbase(config);
-
       appbaseRef.transformRequest = function (request) {
         var modifiedRequest = enableAppbase ? transformRequestUsingEndpoint(request, endpoint) : request;
         if (props.transformRequest) return props.transformRequest(modifiedRequest);
         return modifiedRequest;
       };
-
       if (this.$props.transformResponse) {
         appbaseRef.transformResponse = this.$props.transformResponse;
       }
-
+      var analyticsInitConfig = {
+        url: url && url.replace(/\/\/.*@/, '//'),
+        credentials: appbaseRef.credentials,
+        // When endpoint prop is used index is not defined, so we use _default
+        index: appbaseRef.app || '_default',
+        globalCustomEvents: this.$props.appbaseConfig && this.$props.appbaseConfig.customEvents
+      };
+      try {
+        if (this.$props.endpoint && this.$props.endpoint.url) {
+          // Remove parts between '//' and first '/' in the url
+          analyticsInitConfig.url = this.$props.endpoint.url.replace(/\/\/(.*?)\/.*/, '//$1');
+          var headerCredentials = this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
+          analyticsInitConfig.credentials = headerCredentials && headerCredentials.replace('Basic ', '');
+          // Decode the credentials
+          analyticsInitConfig.credentials = analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
+        }
+      } catch (e) {
+        console.error('Endpoint not set correctly for analytics');
+        console.error(e);
+      }
+      var analyticsRef = AppbaseAnalytics.init(analyticsInitConfig);
       var initialState = _extends({
         config: _extends({}, config, {
           initialQueriesSyncTime: props.initialQueriesSyncTime,
@@ -528,23 +512,25 @@ var ReactiveBase = {
           themePreset: themePreset
         }),
         appbaseRef: appbaseRef,
+        analyticsRef: analyticsRef,
         selectedValues: selectedValues,
         urlValues: urlValues,
         headers: this.getHeaders
       }, this.$props.initialState);
-
       this.store = configureStore(initialState);
+      this.analyticsRef = analyticsRef;
     }
   },
   render: function render() {
     var h = arguments[0];
     var children = this.$slots["default"];
     var _this$$props2 = this.$props,
-        style = _this$$props2.style,
-        className = _this$$props2.className;
+      style = _this$$props2.style,
+      className = _this$$props2.className;
     return h(Provider, {
       "attrs": {
-        "store": this.store
+        "store": this.store,
+        "analyticsRef": this.analyticsRef
       }
     }, [h(URLParamsProvider$1, {
       "attrs": {
@@ -558,7 +544,6 @@ var ReactiveBase = {
     }, [children])]);
   }
 };
-
 ReactiveBase.install = function (Vue) {
   Vue.component(ReactiveBase.name, ReactiveBase);
 };