@appbaseio/reactivesearch-vue 3.0.0-rc.5.alpha.2 → 3.0.0-rc.5.alpha.4

package/dist/cjs/install.js

@@ -32,8 +32,8 @@ require('@appbaseio/analytics');
 require('url-search-params-polyfill');
 require('./ReactiveBase.js');
 require('hotkeys-js');
-var install = require('./install-7cdf6798.js');
-require('./DropDown-b16418e9.js');
+require('./SearchBox.js');
+require('./CancelSvg-ab0f8b23.js');
 require('./Input-497be42a.js');
 require('compute-scroll-into-view');
 require('./Container-29f049b2.js');
@@ -44,6 +44,8 @@ require('./utils-c9bd5628.js');
 require('./SingleList.js');
 require('./MultiList.js');
 require('@appbaseio/reactivecore/lib/utils/types');
+var install = require('./install-3c4520bf.js');
+require('./DropDown-e7125b72.js');
 require('./SingleDropdownList.js');
 require('./MultiDropdownList.js');
 require('./ToggleButton.js');

package/dist/cjs/version.js

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

package/dist/es/{Button-a376dd9b.js → Button-fd869491.js}

@@ -1,4 +1,4 @@
-import { a as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-dac426db.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
 import { styled } from '@appbaseio/vue-emotion';
 import { css } from '@emotion/css';
 import { darken, rgba, lighten } from 'polished';

package/dist/es/CancelSvg-e7ae49e9.js

@@ -0,0 +1,401 @@
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, createTextVNode } from 'vue';
+import { styled } 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;
+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 "\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' ? "\n\t\t\t\t\tright: 0;\n\t\t\t  " : "\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%;\n\tmin-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 _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme;
+  return theme.colors ? theme.colors.primaryColor : 'unset';
+}, function (_ref2) {
+  var _ref2$theme = _ref2.theme,
+    theme = _ref2$theme === void 0 ? {} : _ref2$theme;
+  return theme.colors ? theme.colors.borderColor : '#000';
+});
+
+/**
+ * Scroll node into view if necessary
+ * @param {HTMLElement} node the element that should scroll into view
+ * @param {HTMLElement} rootNode the root element of the component
+ */
+// eslint-disable-next-line
+var scrollIntoView = function scrollIntoView(node, rootNode) {
+  if (node === null) {
+    return;
+  }
+  var actions = computeScrollIntoView(node, {
+    boundary: rootNode,
+    block: 'nearest',
+    scrollMode: 'if-needed'
+  });
+  actions.forEach(function (_ref) {
+    var el = _ref.el,
+      top = _ref.top,
+      left = _ref.left;
+    el.scrollTop = top;
+    el.scrollLeft = left;
+  });
+};
+
+var Downshift = {
+  // eslint-disable-next-line
+  props: ['isOpen', 'inputValue', 'selectedItem', 'highlightedIndex', 'handleChange',
+  // 'itemToString',
+  'handleMouseup'],
+  data: function data() {
+    return {
+      isMouseDown: false,
+      internal_isOpen: false,
+      internal_inputValue: '',
+      internal_selectedItem: null,
+      internal_highlightedIndex: null
+    };
+  },
+  computed: {
+    mergedState: function mergedState() {
+      var _this = this;
+      return Object.keys(this.$props).reduce(function (state, key) {
+        var _extends2;
+        return _extends({}, state, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
+      }, {});
+    },
+    internalItemCount: function internalItemCount() {
+      return this.items.length;
+    }
+  },
+  mounted: function mounted() {
+    window.addEventListener('mousedown', this.handleWindowMousedown);
+    window.addEventListener('mouseup', this.handleWindowMouseup);
+  },
+  beforeUnmount: function beforeUnmount() {
+    window.removeEventListener('mousedown', this.handleWindowMousedown);
+    window.removeEventListener('mouseup', this.handleWindowMouseup);
+  },
+  methods: {
+    handleWindowMousedown: function handleWindowMousedown() {
+      this.isMouseDown = true;
+    },
+    handleWindowMouseup: function handleWindowMouseup(event) {
+      this.isMouseDown = false;
+      if ((event.target === this.$refs.rootNode || !this.$refs.rootNode.contains(event.target)) && this.mergedState.isOpen) {
+        // TODO: handle on outer click here
+        if (!this.isMouseDown) {
+          this.reset();
+          if (this.$props.handleMouseup) {
+            this.$props.handleMouseup({
+              isOpen: false
+            });
+          }
+        }
+      }
+    },
+    keyDownArrowDown: function keyDownArrowDown(event) {
+      event.preventDefault();
+      var amount = event.shiftKey ? 5 : 1;
+      if (this.mergedState.isOpen) {
+        this.changeHighlightedIndex(amount);
+      } else {
+        this.setState({
+          isOpen: true
+        });
+        this.setHighlightedIndex();
+      }
+    },
+    keyDownArrowUp: function keyDownArrowUp(event) {
+      event.preventDefault();
+      var amount = event.shiftKey ? -5 : -1;
+      if (this.mergedState.isOpen) {
+        this.changeHighlightedIndex(amount);
+      } else {
+        this.setState({
+          isOpen: true
+        });
+        this.setHighlightedIndex();
+      }
+    },
+    keyDownEnter: function keyDownEnter(event) {
+      if (this.mergedState.isOpen) {
+        event.preventDefault();
+        this.selectHighlightedItem();
+      }
+    },
+    keyDownEscape: function keyDownEscape(event) {
+      event.preventDefault();
+      this.reset();
+    },
+    selectHighlightedItem: function selectHighlightedItem() {
+      return this.selectItemAtIndex(this.mergedState.highlightedIndex);
+    },
+    selectItemAtIndex: function selectItemAtIndex(itemIndex) {
+      var item = this.items[itemIndex];
+      if (item == null) {
+        return;
+      }
+      this.selectItem(item);
+    },
+    selectItem: function selectItem(item) {
+      if (this.$props.handleChange) {
+        this.$props.handleChange(item);
+      }
+      function getInputValue() {
+        if (this.isControlledProp('selectedItem')) {
+          return '';
+        }
+        return typeof item === 'object' ? item.label || '' : item;
+      }
+      this.setState({
+        isOpen: false,
+        highlightedIndex: null,
+        selectedItem: item,
+        inputValue: getInputValue.call(this)
+      });
+    },
+    changeHighlightedIndex: function changeHighlightedIndex(moveAmount) {
+      if (this.internalItemCount < 0) {
+        return;
+      }
+      var highlightedIndex = this.mergedState.highlightedIndex;
+      var baseIndex = highlightedIndex;
+      if (baseIndex === null) {
+        baseIndex = moveAmount > 0 ? -1 : this.internalItemCount + 1;
+      }
+      var newIndex = baseIndex + moveAmount;
+      if (newIndex < 0) {
+        newIndex = this.internalItemCount;
+      } else if (newIndex > this.internalItemCount) {
+        newIndex = 0;
+      }
+      this.setHighlightedIndex(newIndex);
+    },
+    setHighlightedIndex: function setHighlightedIndex(highlightedIndex) {
+      if (highlightedIndex === void 0) {
+        highlightedIndex = null;
+      }
+      this.setState({
+        highlightedIndex: highlightedIndex
+      });
+      var element = document.getElementById("Downshift" + highlightedIndex);
+      scrollIntoView(element, this.rootNode);
+      // Implement scrollIntroView thingy
+    },
+    reset: function reset() {
+      var selectedItem = this.mergedState.selectedItem;
+      this.setState({
+        isOpen: false,
+        highlightedIndex: null,
+        inputValue: selectedItem
+      });
+    },
+    getItemProps: function getItemProps(_ref) {
+      var index = _ref.index,
+        item = _ref.item;
+      var newIndex = index;
+      if (index === undefined) {
+        if (this.$props.itemToString) {
+          this.items.push(this.$props.itemToString(item));
+        } else {
+          this.items.push(item);
+        }
+        newIndex = this.items.indexOf(item);
+      } else {
+        this.items[newIndex] = item;
+      }
+      return {
+        id: "Downshift" + newIndex
+      };
+    },
+    getItemEvents: function getItemEvents(_ref2) {
+      var index = _ref2.index,
+        item = _ref2.item;
+      var newIndex = index;
+      if (index === undefined) {
+        newIndex = this.items.indexOf(item);
+      }
+      var vm = this;
+      return {
+        mouseenter: function mouseenter() {
+          vm.setHighlightedIndex(newIndex);
+        },
+        click: function click(event) {
+          event.stopPropagation();
+          vm.selectItemAtIndex(newIndex);
+        }
+      };
+    },
+    getInputProps: function getInputProps(_ref3) {
+      var value = _ref3.value;
+      var inputValue = this.mergedState.inputValue;
+      if (value !== inputValue) {
+        this.setState({
+          inputValue: value
+        });
+      }
+      return {
+        value: inputValue
+      };
+    },
+    getButtonProps: function getButtonProps(_ref4) {
+      var _this2 = this;
+      var onClick = _ref4.onClick,
+        onKeyDown = _ref4.onKeyDown,
+        onKeyUp = _ref4.onKeyUp,
+        onBlur = _ref4.onBlur;
+      return {
+        click: function click(event) {
+          _this2.setState({
+            isOpen: true,
+            inputValue: event.target.value
+          });
+          if (onClick) {
+            onClick(event);
+          }
+        },
+        keydown: function keydown(event) {
+          if (event.key && _this2["keyDown" + event.key]) {
+            _this2["keyDown" + event.key].call(_this2, event);
+          }
+          if (onKeyDown) {
+            onKeyDown(event);
+          }
+        },
+        keyup: function keyup(event) {
+          if (onKeyUp) {
+            onKeyUp(event);
+          }
+        },
+        blur: function blur(event) {
+          if (onBlur) {
+            onBlur(event);
+          }
+        }
+      };
+    },
+    getInputEvents: function getInputEvents(_ref5) {
+      var _this3 = this;
+      var onInput = _ref5.onInput,
+        onBlur = _ref5.onBlur,
+        onFocus = _ref5.onFocus,
+        onKeyPress = _ref5.onKeyPress,
+        onKeyDown = _ref5.onKeyDown,
+        onKeyUp = _ref5.onKeyUp,
+        onClick = _ref5.onClick;
+      return {
+        input: function input(event) {
+          _this3.setState({
+            isOpen: true,
+            inputValue: event.target.value
+          });
+          if (onInput) {
+            onInput(event);
+          }
+        },
+        focus: function focus(event) {
+          if (onFocus) {
+            onFocus(event);
+          }
+        },
+        keydown: function keydown(event) {
+          if (event.key && _this3["keyDown" + event.key]) {
+            _this3["keyDown" + event.key].call(_this3, event);
+          }
+          if (onKeyDown) {
+            onKeyDown(event);
+          }
+        },
+        keypress: function keypress(event) {
+          if (onKeyPress) {
+            onKeyPress(event);
+          }
+        },
+        keyup: function keyup(event) {
+          if (onKeyUp) {
+            onKeyUp(event);
+          }
+        },
+        blur: function blur(event) {
+          if (onBlur) {
+            onBlur(event);
+          }
+          // TODO: implement isMouseDown
+          // this.reset()
+        },
+
+        click: onClick
+      };
+    },
+    getHelpersAndState: function getHelpersAndState() {
+      var getItemProps = this.getItemProps,
+        getItemEvents = this.getItemEvents,
+        getInputProps = this.getInputProps,
+        getInputEvents = this.getInputEvents,
+        getButtonProps = this.getButtonProps,
+        setHighlightedIndex = this.setHighlightedIndex;
+      return _extends({
+        getItemProps: getItemProps,
+        getItemEvents: getItemEvents,
+        getInputProps: getInputProps,
+        getInputEvents: getInputEvents,
+        getButtonProps: getButtonProps,
+        setHighlightedIndex: setHighlightedIndex
+      }, this.mergedState);
+    },
+    isControlledProp: function isControlledProp(prop) {
+      return this.$props[prop] !== undefined;
+    },
+    setState: function setState(stateToSet) {
+      var _this4 = this;
+      // eslint-disable-next-line
+      Object.keys(stateToSet).forEach(function (key) {
+        // eslint-disable-next-line
+        if (_this4.isControlledProp(key)) {
+          _this4.$emit(key + "Change", stateToSet[key]);
+          _this4.$emit(key + "-change", stateToSet[key]);
+        } else {
+          _this4["internal_" + key] = stateToSet[key];
+        }
+      });
+      this.$emit('stateChange', this.mergedState);
+      this.$emit('state-change', this.mergedState);
+    }
+  },
+  render: function render() {
+    this.items = [];
+    return createVNode("div", {
+      "ref": "rootNode"
+    }, [this.$slots["default"] && this.$slots["default"](_extends({}, this.getHelpersAndState()))]);
+  }
+};
+
+var CancelSvg = (function () {
+  return createVNode("svg", {
+    "alt": "Clear",
+    "class": "cancel-icon",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "height": "20px",
+    "viewBox": "0 0 24 24",
+    "width": "20px"
+  }, [createVNode("title", null, [createTextVNode("Clear")]), createVNode("path", {
+    "d": "M0 0h24v24H0V0z",
+    "fill": "none"
+  }, null), createVNode("path", {
+    "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"
+  }, null)]);
+});
+
+export { CancelSvg as C, Downshift as D, IconWrapper as I, IconGroup as a, InputWrapper as b };

package/dist/es/{Card-56bd984e.js → Card-54b9e7a0.js}

@@ -1,8 +1,8 @@
-import { a as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-dac426db.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
 import { styled } from '@appbaseio/vue-emotion';
 import { css } from '@emotion/css';
 import { lighten } from 'polished';
-import './Title-4b7614be.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-b43a546e.js → ComponentWrapper-8a3c388d.js}

@@ -1,9 +1,10 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { c as connect, d as getCamelCase, a as componentTypes, e as getValidPropsKeys } from './index-b2212b15.js';
-import { _ as _extends } from './_rollupPluginBabelHelpers-dac426db.js';
+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 { g as getInternalComponentID } from './transform-e41c9e5c.js';
+import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
+import { c as connect, b as getCamelCase, d as getValidPropsKeys } from './index-882489e1.js';
 
 var addComponent = Actions.addComponent,
   removeComponent = Actions.removeComponent,

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

@@ -1,4 +1,4 @@
-import { a as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-dac426db.js';
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
 import { styled } from '@appbaseio/vue-emotion';
 
 var _templateObject;