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

package/dist/cjs/Button-ad042719.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vueEmotion = require('@appbaseio/vue-emotion');
+var emotion = require('emotion');
+var polished = require('polished');
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var filters = function filters(_ref) {
+  var borderColor = _ref.colors.borderColor;
+  return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._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 = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._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 = emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 3px 3px;\n\t}\n"])));
+var numberBoxContainer = emotion.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._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: " + polished.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 ? polished.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 ? polished.lighten(0.2, theme.colors.backgroundColor) : '#fafafa') + ";\n\t}\n";
+};
+var Button = vueEmotion.styled('button')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._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 ? polished.darken(0.1, theme.colors.backgroundColor) : '#ccc';
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.colors && theme.colors.primaryColor ? polished.rgba(theme.colors.primaryColor, 0.6) : 'unset';
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors && theme.colors.primaryColor ? "0 0 0 2px " + polished.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 = emotion.css({
+  margin: '5px 0',
+  display: 'flex',
+  justifyContent: 'center'
+});
+
+exports.Button = Button;
+exports.filters = filters;
+exports.loadMoreContainer = loadMoreContainer;
+exports.pagination = pagination;
+exports.toggleButtons = toggleButtons;

package/dist/cjs/Card-f5ab024a.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vueEmotion = require('@appbaseio/vue-emotion');
+var emotion = require('emotion');
+var polished = require('polished');
+require('./Title-8802a218.js');
+
+var _templateObject, _templateObject2, _templateObject3;
+var container = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._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"])));
+var Image = vueEmotion.styled('div')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: calc(100% + 20px);\n\theight: 220px;\n\tmargin: -10px -10px 0;\n\tbackground-color: ", ";\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n"])), function (_ref) {
+  var colors = _ref.theme.colors;
+  return colors.backgroundColor || '#fcfcfc';
+});
+var Card = vueEmotion.styled('a')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: auto;\n\tflex-grow: 1;\n\toutline: none;\n\ttext-decoration: none;\n\tmin-width: 240px;\n\tmax-width: 250px;\n\tborder-radius: 0.25rem;\n\tbackground-color: ", ";\n\theight: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tmargin: 8px;\n\tpadding: 10px;\n\toverflow: hidden;\n\tbox-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);\n\tcolor: ", ";\n\t", ";\n\ttransition: all 0.3s ease;\n\n\th2 {\n\t\twidth: 100%;\n\t\tfont-size: 0.9rem;\n\t\tline-height: 1.2rem;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmargin: 0;\n\t\tpadding: 10px 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\tflex-grow: 1;\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbox-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);\n\t}\n\n\t@media (max-width: 420px) {\n\t\twidth: 50%;\n\t\tmin-width: 0;\n\t\theight: 210px;\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tborder: 1px solid #eee;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fff';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.textColor;
+}, function (props) {
+  return props.href ? 'cursor: pointer' : null;
+});
+
+exports.Card = Card;
+exports.Image = Image;
+exports.container = container;

package/dist/cjs/{ComponentWrapper-ad3dad02.js → ComponentWrapper-611cf7f9.js}

@@ -4,21 +4,23 @@ 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');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vue = require('vue');
+var VueTypes = _interopDefault(require('vue-types'));
 var transform = require('@appbaseio/reactivecore/lib/utils/transform');
-var index = require('./index-6a167fe0.js');
+var index = require('./index-d8d8f291.js');
 
 var addComponent = configureStore.Actions.addComponent,
-    removeComponent = configureStore.Actions.removeComponent,
-    watchComponent = configureStore.Actions.watchComponent,
-    setQueryListener = configureStore.Actions.setQueryListener,
-    setComponentProps = configureStore.Actions.setComponentProps,
-    updateComponentProps = configureStore.Actions.updateComponentProps;
+  removeComponent = configureStore.Actions.removeComponent,
+  watchComponent = configureStore.Actions.watchComponent,
+  setQueryListener = configureStore.Actions.setQueryListener,
+  setComponentProps = configureStore.Actions.setComponentProps,
+  updateComponentProps = configureStore.Actions.updateComponentProps;
 var pushToAndClause = configureStore.helper.pushToAndClause,
-    checkPropChange = configureStore.helper.checkPropChange,
-    checkSomePropChange = configureStore.helper.checkSomePropChange;
+  checkPropChange = configureStore.helper.checkPropChange,
+  checkSomePropChange = configureStore.helper.checkSomePropChange;
+
 /**
  * ComponentWrapper component is a wrapper component for each ReactiveSearch component
  * which is responsible for following tasks:
@@ -30,7 +32,6 @@ var pushToAndClause = configureStore.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 = {
@@ -38,17 +39,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 = _rollupPluginBabelHelpers._extends({}, this.$attrs); // handle kebab case for props
-
-
+      var componentProps = _rollupPluginBabelHelpers._extends({}, this.$attrs);
+      // handle kebab case for props
       var parsedProps = {};
       Object.keys(componentProps).forEach(function (key) {
         parsedProps[index.getCamelCase(key)] = componentProps[key];
@@ -56,51 +56,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 === constants.componentTypes.reactiveComponent) {
         this.internalComponent = transform.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);
       }
     },
@@ -112,11 +103,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);
+          }
         }
       }
     },
@@ -125,18 +122,15 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
         deep: true,
         handler: function handler(newVal) {
           var _this2 = this;
-
           var propsKeys = index.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);
         });
@@ -144,39 +138,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 vue.h(component, null, this.$slots);
     }
   };
 };
-
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     savedComponentProps: state.props[props.componentId]
   };
 };
-
 var mapDispatchToProps = {
   addComponent: addComponent,
   removeComponent: removeComponent,
@@ -189,7 +176,6 @@ var ComponentWrapper$1 = (function (component, options) {
   if (options === void 0) {
     options = {};
   }
-
   return index.connect(mapStateToProps, mapDispatchToProps)(ComponentWrapper(component, options));
 });
 

package/dist/cjs/Container-29f049b2.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vueEmotion = require('@appbaseio/vue-emotion');
+
+var _templateObject;
+var Container = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.component;
+});
+
+exports.Container = Container;