@appbaseio/reactivesearch-vue 1.16.0-alpha.4 → 1.16.0-alpha.40

package/dist/cjs/{vueTypes-c21f265b.js → vueTypes-6de9d2a9.js}

@@ -110,20 +110,25 @@ var types = {
   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({
-    searchStateHeader: VueTypes.bool,
     emptyQuery: VueTypes.bool,
     suggestionAnalytics: VueTypes.bool,
     userId: VueTypes.string,
     customEvents: VueTypes.object
   }),
   appbaseConfig: VueTypes.shape({
-    enableQueryRules: VueTypes.bool,
     recordAnalytics: VueTypes.bool,
-    searchStateHeader: VueTypes.bool,
     emptyQuery: VueTypes.bool,
     suggestionAnalytics: VueTypes.bool,
+    enableQueryRules: VueTypes.bool,
+    enableSearchRelevancy: VueTypes.bool,
     userId: VueTypes.string,
-    customEvents: VueTypes.object
+    useCache: VueTypes.bool,
+    customEvents: VueTypes.object,
+    enableTelemetry: VueTypes.bool.def(true)
+  }).def({}),
+  mongodb: VueTypes.shape({
+    db: VueTypes.string,
+    collection: VueTypes.string
   })
 };
 

package/dist/es/Button-799185e2.js

@@ -0,0 +1,59 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { css } from 'emotion';
+import styled from '@appbaseio/vue-emotion';
+import { darken, rgba, lighten } from 'polished';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+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\ta {\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\ta {\n\t\tmargin: 0 3px;\n\t}\n"])));
+var toggleButtons = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\ta {\n\t\tmargin: 3px 3px;\n\t}\n"])));
+var numberBoxContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -5px;\n\ta {\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 css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.primaryColor, theme.colors.primaryTextColor, darken(0.1, theme.colors.primaryColor));
+};
+
+var large = function large() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n\tmin-height: 40px;\n\tpadding: 10px 20px;\n"])));
+};
+
+var disabled = function disabled(_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: #ccc;\n\tcursor: not-allowed;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor ? lighten(0.1, theme.colors.backgroundColor) : '#fafafa', theme.colors.backgroundColor ? lighten(0.2, theme.colors.backgroundColor) : '#fafafa');
+};
+
+var Button = styled('a')(_templateObject8 || (_templateObject8 = _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"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.backgroundColor || '#eee';
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.textColor;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colors.backgroundColor ? darken(0.1, theme.colors.backgroundColor) : '#ccc';
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return rgba(theme.colors.primaryColor, 0.6);
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return "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/{DownShift-d8f2500f.js → CancelSvg-4d9e0857.js}

@@ -1,6 +1,33 @@
-import { a as _extends } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import styled, { css } from '@appbaseio/vue-emotion';
 import computeScrollIntoView from 'compute-scroll-into-view';
 
+var _templateObject;
+var InputWrapper = styled('span')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
+var IconGroup = styled('div')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n"])), function (_ref) {
+  var positionType = _ref.positionType;
+
+  if (positionType === 'absolute') {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t"])));
+  }
+
+  return null;
+}, function (_ref2) {
+  var groupPosition = _ref2.groupPosition;
+  return groupPosition === 'right' ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t  "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t  "])));
+});
+
+var _templateObject$2;
+var IconWrapper = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;min-width:20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform:scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.primaryColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.borderColor || '#000';
+});
+
 /**
  * Scroll node into view if necessary
  * @param {HTMLElement} node the element that should scroll into view
@@ -36,8 +63,7 @@ var Downshift = {
       internal_isOpen: false,
       internal_inputValue: '',
       internal_selectedItem: null,
-      internal_highlightedIndex: null,
-      internal_eventsCalled: {}
+      internal_highlightedIndex: null
     };
   },
   computed: {
@@ -47,7 +73,7 @@ var Downshift = {
       return Object.keys(this.$props).reduce(function (state, key) {
         var _extends2;
 
-        return _extends(_extends({}, state), {}, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
+        return _extends({}, state, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
       }, {});
     },
     internalItemCount: function internalItemCount() {
@@ -222,23 +248,11 @@ var Downshift = {
       }
 
       var vm = this;
-      setTimeout(function () {
-        vm.internal_eventsCalled[index] = false;
-      }, 0);
       return {
         mouseenter: function mouseenter() {
           vm.setHighlightedIndex(newIndex);
         },
-        // for browsers not supporting click event (e.g. firefox android)
-        mousedown: function mousedown(event) {
-          if (vm.internal_eventsCalled[index]) return;
-          vm.internal_eventsCalled[index] = true;
-          event.stopPropagation();
-          vm.selectItemAtIndex(newIndex);
-        },
         click: function click(event) {
-          if (vm.internal_eventsCalled[index]) return;
-          vm.internal_eventsCalled[index] = true;
           event.stopPropagation();
           vm.selectItemAtIndex(newIndex);
         }
@@ -398,4 +412,29 @@ var Downshift = {
   }
 };
 
-export { Downshift as D };
+var CancelSvg = {
+  functional: true,
+  render: function render(h) {
+    return h("svg", {
+      "attrs": {
+        "alt": "Clear",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "20px",
+        "viewBox": "0 0 24 24",
+        "width": "20px"
+      },
+      "class": "cancel-icon"
+    }, [h("title", ["Clear"]), h("path", {
+      "attrs": {
+        "d": "M0 0h24v24H0V0z",
+        "fill": "none"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+      }
+    })]);
+  }
+};
+
+export { CancelSvg as C, Downshift as D, IconWrapper as I, IconGroup as a, InputWrapper as b };

package/dist/es/Card-04b3c33e.js

@@ -0,0 +1,23 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { css } from 'emotion';
+import styled from '@appbaseio/vue-emotion';
+import { lighten } from 'polished';
+import './Title-579f8d6c.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"])));
+var Image = styled('div')(_templateObject2 || (_templateObject2 = _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 = styled('a')(_templateObject3 || (_templateObject3 = _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 ? 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;
+});
+
+export { Card as C, Image as I, container as c };

package/dist/es/{ComponentWrapper-d0b21b95.js → ComponentWrapper-bbb717bc.js}

@@ -1,8 +1,9 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
-import { c as connect, b as getCamelCase, d as getValidPropsKeys } from './index-1fe91a0a.js';
+import { c as connect, b as getCamelCase, d as getValidPropsKeys } from './index-5daa8276.js';
 
 var addComponent = Actions.addComponent,
     removeComponent = Actions.removeComponent,
@@ -35,6 +36,9 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
 
   return {
     name: 'ComponentWrapper',
+    props: {
+      destroyOnUnmount: VueTypes.bool.def(false)
+    },
     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
@@ -51,33 +55,46 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
     beforeMount: function beforeMount() {
       var _this = this;
 
-      // Register  component
-      this.addComponent(this.componentId);
+      var components = [];
 
-      var onQueryChange = function onQueryChange() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      if (this.$$store) {
+        var _this$$$store$getStat = this.$$store.getState();
+
+        components = _this$$$store$getStat.components;
+      } // 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);
+
+        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, ['queryChange'].concat(args));
+          _this.$emit.apply(_this, ['query-change'].concat(args));
+        };
 
-        _this.$emit.apply(_this, ['query-change'].concat(args));
-      };
+        var onError = function onError(e) {
+          _this.$emit('error', e);
+        };
 
-      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
 
-      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 (options.internalComponent || this.componentProps.defaultQuery && options.componentType === componentTypes.reactiveComponent) {
         this.internalComponent = getInternalComponentID(this.componentId);
       } // Register internal component
 
 
-      if (this.internalComponent) {
+      if (this.internalComponent && (this.destroyOnUnmount || components.indexOf(this.internalComponent) === -1)) {
         this.addComponent(this.internalComponent);
         this.setComponentProps(this.internalComponent, this.componentProps, options.componentType);
       }
@@ -89,11 +106,13 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
       }
     },
     beforeDestroy: function beforeDestroy() {
-      // Unregister components
-      this.removeComponent(this.componentId);
+      if (this.destroyOnUnmount) {
+        // Unregister components
+        this.removeComponent(this.componentId);
 
-      if (this.internalComponent) {
-        this.removeComponent(this.internalComponent);
+        if (this.internalComponent) {
+          this.removeComponent(this.internalComponent);
+        }
       }
     },
     watch: {

package/dist/es/Container-4383c6f0.js

@@ -0,0 +1,10 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import styled from '@appbaseio/vue-emotion';
+
+var _templateObject;
+var Container = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.component;
+});
+
+export { Container as C };