@appbaseio/reactivesearch-vue 2.0.0-alpha.4 → 3.0.0-alpha.1

package/dist/cjs/ssr-6c8a72e1.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vue = require('vue');
+var vueEmotion = require('@appbaseio/vue-emotion');
+
+// client only component
+// render the placeholder slot on SSR
+// you can manually control exactly when to show the component by the isShow prop
+var NoSSR = vue.defineComponent({
+  props: {
+    isShow: {
+      type: Boolean,
+      "default": undefined
+    }
+  },
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
+    var isMounted = vue.ref(false);
+    var isShowDefaultSlot = vue.computed(function () {
+      if (props.isShow === undefined) return isMounted.value;
+      return !!props.isShow && isMounted.value;
+    });
+    vue.onMounted(function () {
+      isMounted.value = true;
+    });
+    var defaultVnode = slots["default"] ? vue.h(function () {
+      return slots["default"] && slots["default"]();
+    }) : vue.createCommentVNode('Client only rendering with empty default slot');
+    var placeholderVNode = slots.placeholder ? vue.h(function () {
+      return slots.placeholder && slots.placeholder();
+    }) : vue.createCommentVNode('Client only rendering component placeholder');
+    return function () {
+      return isShowDefaultSlot.value ? defaultVnode : placeholderVNode;
+    };
+  }
+});
+
+var _templateObject;
+var Slider = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
+
+/**
+ * Caution: Please do not change this file without having a discussion with the Team.
+ * Any change may break the umd build, we're directly replacing the line no: 14
+ * `components['vue-slider-component'] = require('vue-slider-component');` in rollup umd build process with some script.
+ */
+// eslint-disable-next-line
+var getComponents = function getComponents() {
+  var components = {
+    NoSSR: NoSSR
+  };
+  if (process && process.browser) {
+    try {
+      // in older versions of nuxt, it's process.BROWSER_BUILD
+      // eslint-disable-next-line
+      components['vue-slider-component'] = require('vue-slider-component');
+    } catch (e) {
+      console.error('Unable to load vue-slider', e);
+    }
+  }
+  return components;
+};
+
+exports.NoSSR = NoSSR;
+exports.Slider = Slider;
+exports.getComponents = getComponents;

package/dist/cjs/{utils-d6a52588.js → utils-83fd01e9.js}

@@ -4,40 +4,33 @@ 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 _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
 
 var getAggsOrder = configureStore.helper.getAggsOrder;
-
 var extractQuery = function extractQuery(props) {
   var queryToBeReturned = {};
-
   if (props.defaultQuery) {
     var evaluateQuery = props.defaultQuery([], props);
-
     if (evaluateQuery) {
       if (evaluateQuery.query) {
         queryToBeReturned.query = evaluateQuery.query;
       }
-
       if (evaluateQuery.aggs) {
         queryToBeReturned.aggs = evaluateQuery.aggs;
       }
     }
   }
-
   return queryToBeReturned;
-}; // eslint-disable-next-line import/prefer-default-export
-
-
+};
+// eslint-disable-next-line import/prefer-default-export
 var getAggsQuery = function getAggsQuery(query, props) {
   var _clonedQuery$aggs;
-
   var clonedQuery = query;
   var dataField = props.dataField,
-      size = props.size,
-      sortBy = props.sortBy,
-      showMissing = props.showMissing,
-      missingLabel = props.missingLabel;
+    size = props.size,
+    sortBy = props.sortBy,
+    showMissing = props.showMissing,
+    missingLabel = props.missingLabel;
   clonedQuery.size = 0;
   clonedQuery.aggs = (_clonedQuery$aggs = {}, _clonedQuery$aggs[dataField] = {
     terms: _rollupPluginBabelHelpers._extends({
@@ -48,7 +41,6 @@ var getAggsQuery = function getAggsQuery(query, props) {
       missing: missingLabel
     } : {})
   }, _clonedQuery$aggs);
-
   if (props.nestedField) {
     clonedQuery.aggs = {
       reactivesearch_nested: {
@@ -59,7 +51,6 @@ var getAggsQuery = function getAggsQuery(query, props) {
       }
     };
   }
-
   return _rollupPluginBabelHelpers._extends({}, clonedQuery, extractQuery(props));
 };
 

package/dist/cjs/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "2.0.0-alpha.4";
+var version = "3.0.0-alpha.1";
 
 exports.default = version;

package/dist/cjs/{vueTypes-727b7c63.js → vueTypes-1bf00978.js}

@@ -4,40 +4,35 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var VueTypes = _interopDefault(require('vue-types'));
 
+// import dateFormats from './dateFormats';
+
 VueTypes.sensibleDefaults = false;
 var reactKeyType = VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string), VueTypes.object, VueTypes.arrayOf(VueTypes.object)]);
-
 function validateLocation(value) {
   if (!value || !value.lat || !value.lng) {
     console.error(new Error('location must be an object with lat and lng keys defined'));
     return false;
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   if (isNaN(value.lat)) {
     console.error(new Error('lat value must be a number'));
     return false;
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   if (isNaN(value.lat)) {
     console.error(new Error('lng value must be a number'));
     return false;
   }
-
   if (value.lat < -90 || value.lat > 90) {
     console.error(new Error('lat value should be between -90 and 90.'));
     return false;
   }
-
   if (value.lat < -180 || value.lat > 180) {
     console.error(new Error('lng value should be between -180 and 180.'));
     return false;
   }
-
   return true;
 }
-
 var types = {
   any: VueTypes.any,
   bool: VueTypes.bool,
@@ -104,18 +99,12 @@ var types = {
   params: VueTypes.object.isRequired,
   props: VueTypes.object,
   rangeLabelsAlign: VueTypes.oneOf(['left', 'right']),
-  title: VueTypes.oneOfType([VueTypes.string, VueTypes.any]),
+  title: VueTypes.oneOfType([VueTypes.string, VueTypes.nullable]),
   tooltipTrigger: VueTypes.oneOf(['always', 'none', 'hover']),
   location: VueTypes.custom(validateLocation),
   unit: VueTypes.oneOf(['mi', 'miles', 'yd', 'yards', 'ft', 'feet', 'in', 'inch', 'km', 'kilometers', 'm', 'meters', 'cm', 'centimeters', 'mm', 'millimeters', 'NM', 'nmi', 'nauticalmiles']),
   value: VueTypes.string.def(undefined),
-  analyticsConfig: VueTypes.shape({
-    emptyQuery: VueTypes.bool,
-    suggestionAnalytics: VueTypes.bool,
-    userId: VueTypes.string,
-    customEvents: VueTypes.object
-  }),
-  appbaseConfig: VueTypes.shape({
+  reactivesearchAPIConfig: VueTypes.shape({
     recordAnalytics: VueTypes.bool,
     emptyQuery: VueTypes.bool,
     suggestionAnalytics: VueTypes.bool,

package/dist/es/Button-474510e3.js

@@ -0,0 +1,53 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { styled } from '@appbaseio/vue-emotion';
+import { css } from 'emotion';
+import { darken, rgba, lighten } from 'polished';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var filters = function filters(_ref) {
+  var borderColor = _ref.colors.borderColor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 2px 3px;\n\t\tpadding: 5px 8px;\n\t\tfont-size: 0.85rem;\n\t\tposition: relative;\n\n\t\tspan:first-child {\n\t\t\tmax-width: 260px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmargin-right: 26px;\n\t\t}\n\n\t\tspan:last-child {\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 8px;\n\t\t\tposition: absolute;\n\t\t\talign-items: center;\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tpadding-left: 8px;\n\t\t\tmargin-left: 8px;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tspan:first-child {\n\t\t\t\ttext-decoration: line-through;\n\t\t\t}\n\t\t}\n\t}\n"])), borderColor || '#fff');
+};
+var pagination = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tmargin: 10px -3px;\n\tmax-width: 100%;\n\ttext-align: center;\n\n\tbutton {\n\t\tmargin: 0 3px;\n\t}\n"])));
+var toggleButtons = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 3px 3px;\n\t}\n"])));
+var numberBoxContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -5px;\n\tbutton {\n\t\tmargin: 5px;\n\t}\n\tspan {\n\t\tmargin: 0 5px;\n\t}\n"])));
+var primary = function primary(_ref2) {
+  var theme = _ref2.theme;
+  return "\n\tbackground-color: " + theme.colors.primaryColor + ";\n\tcolor: " + theme.colors.primaryTextColor + ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + darken(0.1, theme.colors.primaryColor) + ";\n\t}\n";
+};
+var large = function large() {
+  return "\n\tmin-height: 40px;\n\tpadding: 10px 20px;\n";
+};
+var disabled = function disabled(_ref3) {
+  var theme = _ref3.theme;
+  return "\n\tbackground-color: " + (theme.colors.backgroundColor ? lighten(0.1, theme.colors.backgroundColor) : '#fafafa') + ";\n\tcolor: #ccc;\n\tcursor: not-allowed;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors.backgroundColor ? lighten(0.2, theme.colors.backgroundColor) : '#fafafa') + ";\n\t}\n";
+};
+var Button = styled('button')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors ? theme.colors.backgroundColor : '#eee';
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors ? theme.colors.textColor : '';
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colors && theme.colors.backgroundColor ? darken(0.1, theme.colors.backgroundColor) : '#ccc';
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.colors && theme.colors.primaryColor ? rgba(theme.colors.primaryColor, 0.6) : 'unset';
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors && theme.colors.primaryColor ? "0 0 0 2px " + rgba(theme.colors.primaryColor, 0.3) : '';
+}, function (props) {
+  return props.primary ? primary : null;
+}, function (props) {
+  return props.disabled ? disabled : null;
+}, function (props) {
+  return props.large && large;
+});
+var loadMoreContainer = css({
+  margin: '5px 0',
+  display: 'flex',
+  justifyContent: 'center'
+});
+
+export { Button as B, filters as f, loadMoreContainer as l, pagination as p, toggleButtons as t };

package/dist/es/{Card-450683f1.js → Card-38cbe652.js}

@@ -1,8 +1,8 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { styled } from '@appbaseio/vue-emotion';
 import { css } from 'emotion';
-import styled from '@appbaseio/vue-emotion';
 import { lighten } from 'polished';
-import './Title-3342664a.js';
+import './Title-863dfa42.js';
 
 var _templateObject, _templateObject2, _templateObject3;
 var container = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\tflex-wrap: wrap;\n\tmargin: 0 -8px;\n\n\t@media (max-width: 420px) {\n\t\tmargin: 0;\n\t}\n"])));

package/dist/es/{ComponentWrapper-424e86fd.js → ComponentWrapper-3dfe6931.js}

@@ -1,19 +1,21 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
-import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import { a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import { h } from 'vue';
+import VueTypes from 'vue-types';
 import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
-import { c as connect, b as getCamelCase, d as getValidPropsKeys } from './index-7788a843.js';
+import { c as connect, b as getCamelCase, d as getValidPropsKeys } from './index-4520a598.js';
 
 var addComponent = Actions.addComponent,
-    removeComponent = Actions.removeComponent,
-    watchComponent = Actions.watchComponent,
-    setQueryListener = Actions.setQueryListener,
-    setComponentProps = Actions.setComponentProps,
-    updateComponentProps = Actions.updateComponentProps;
+  removeComponent = Actions.removeComponent,
+  watchComponent = Actions.watchComponent,
+  setQueryListener = Actions.setQueryListener,
+  setComponentProps = Actions.setComponentProps,
+  updateComponentProps = Actions.updateComponentProps;
 var pushToAndClause = helper.pushToAndClause,
-    checkPropChange = helper.checkPropChange,
-    checkSomePropChange = helper.checkSomePropChange;
+  checkPropChange = helper.checkPropChange,
+  checkSomePropChange = helper.checkSomePropChange;
+
 /**
  * ComponentWrapper component is a wrapper component for each ReactiveSearch component
  * which is responsible for following tasks:
@@ -25,7 +27,6 @@ var pushToAndClause = helper.pushToAndClause,
  * 6. Unregister the component on un-mount
  * Note: All components are using that except the DynamicRangeSlider
  */
-
 var ComponentWrapper = function ComponentWrapper(component, options) {
   if (options === void 0) {
     options = {
@@ -33,17 +34,16 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
       internalComponent: false
     };
   }
-
   return {
     name: 'ComponentWrapper',
+    $timestamp: null,
     props: {
-      destroyOnUnmount: VueTypes.bool.def(false)
+      destroyOnUnmount: VueTypes.bool.def(true)
     },
     created: function created() {
       // clone the props for component it is needed because attrs gets changed on time
-      var componentProps = _extends({}, this.$attrs); // handle kebab case for props
-
-
+      var componentProps = _extends({}, this.$attrs);
+      // handle kebab case for props
       var parsedProps = {};
       Object.keys(componentProps).forEach(function (key) {
         parsedProps[getCamelCase(key)] = componentProps[key];
@@ -51,51 +51,42 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
       this.componentProps = parsedProps;
       this.componentId = this.componentProps.componentId;
       this.react = this.componentProps.react;
+      this.$timestamp = new Date().getTime();
     },
     beforeMount: function beforeMount() {
       var _this = this;
-
       var components = [];
-
       if (this.$$store) {
         var _this$$$store$getStat = this.$$store.getState();
-
         components = _this$$$store$getStat.components;
-      } // Register a component only when `destroyOnUnmount` is `true`
+      }
+      // Register a component only when `destroyOnUnmount` is `true`
       // or component is not present in store
-
-
       if (this.destroyOnUnmount || components.indexOf(this.componentProps.componentId) === -1) {
         // Register  component
-        this.addComponent(this.componentId);
-
+        this.addComponent(this.componentId, this.$timestamp);
         var onQueryChange = function onQueryChange() {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-
           _this.$emit.apply(_this, ['queryChange'].concat(args));
-
           _this.$emit.apply(_this, ['query-change'].concat(args));
         };
-
         var onError = function onError(e) {
           _this.$emit('error', e);
         };
-
-        this.setQueryListener(this.componentId, onQueryChange, onError); // Update props in store
-
+        this.setQueryListener(this.componentId, onQueryChange, onError);
+        // Update props in store
         this.setComponentProps(this.componentId, this.componentProps, options.componentType);
-      } // if default query prop is defined and component is reactive component then register the internal component
-
+      }
 
+      // if default query prop is defined and component is reactive component then register the internal component
       if (options.internalComponent || this.componentProps.defaultQuery && options.componentType === componentTypes.reactiveComponent) {
         this.internalComponent = getInternalComponentID(this.componentId);
-      } // Register internal component
-
-
+      }
+      // Register internal component
       if (this.internalComponent && (this.destroyOnUnmount || components.indexOf(this.internalComponent) === -1)) {
-        this.addComponent(this.internalComponent);
+        this.addComponent(this.internalComponent, this.$timestamp);
         this.setComponentProps(this.internalComponent, this.componentProps, options.componentType);
       }
     },
@@ -107,11 +98,17 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
     },
     beforeDestroy: function beforeDestroy() {
       if (this.destroyOnUnmount) {
+        var registeredComponentsTimestamps = {};
+        if (this.$$store) {
+          var _this$$$store$getStat2 = this.$$store.getState();
+          registeredComponentsTimestamps = _this$$$store$getStat2.registeredComponentsTimestamps;
+        }
         // Unregister components
-        this.removeComponent(this.componentId);
-
-        if (this.internalComponent) {
-          this.removeComponent(this.internalComponent);
+        if (registeredComponentsTimestamps[this.componentId] === this.$timestamp) {
+          this.removeComponent(this.componentId);
+          if (this.internalComponent) {
+            this.removeComponent(this.internalComponent);
+          }
         }
       }
     },
@@ -120,18 +117,15 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
         deep: true,
         handler: function handler(newVal) {
           var _this2 = this;
-
           var propsKeys = getValidPropsKeys(newVal);
           checkSomePropChange(newVal, this.savedComponentProps, propsKeys, function () {
             _this2.updateComponentProps(_this2.componentId, newVal, options.componentType);
-
             _this2.updateComponentProps(_this2.internalComponent, newVal, options.componentType);
           });
         }
       },
       react: function react(newVal, oldVal) {
         var _this3 = this;
-
         checkPropChange(newVal, oldVal, function () {
           return _this3.setReact(_this3.componentProps);
         });
@@ -139,39 +133,32 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
     },
     methods: {
       setReact: function setReact(props) {
-        var react = props.react;
-
+        var react = props.react,
+          executeInitialQuery = props.executeInitialQuery;
         if (this.internalComponent) {
           if (react) {
             var newReact = pushToAndClause(react, this.internalComponent);
-            this.watchComponent(props.componentId, newReact);
+            this.watchComponent(props.componentId, newReact, executeInitialQuery);
           } else {
             this.watchComponent(props.componentId, {
               and: this.internalComponent
-            });
+            }, executeInitialQuery);
           }
         } else {
-          this.watchComponent(props.componentId, react);
+          this.watchComponent(props.componentId, react, executeInitialQuery);
         }
       }
     },
-    render: function render(h) {
-      return h(component, {
-        attrs: this.$attrs,
-        on: this.$listeners,
-        scopedSlots: this.$scopedSlots,
-        slots: this.$slots
-      });
+    render: function render() {
+      return h(component, null, this.$slots);
     }
   };
 };
-
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     savedComponentProps: state.props[props.componentId]
   };
 };
-
 var mapDispatchToProps = {
   addComponent: addComponent,
   removeComponent: removeComponent,
@@ -184,7 +171,6 @@ var ComponentWrapper$1 = (function (component, options) {
   if (options === void 0) {
     options = {};
   }
-
   return connect(mapStateToProps, mapDispatchToProps)(ComponentWrapper(component, options));
 });
 

package/dist/es/{Container-ba826e96.js → Container-d00219f7.js}

@@ -1,5 +1,5 @@
-import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
-import styled from '@appbaseio/vue-emotion';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { styled } from '@appbaseio/vue-emotion';
 
 var _templateObject;
 var Container = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", ";\n"])), function (_ref) {