@appbaseio/reactivesearch-vue 1.33.5 → 1.34.0-alpha.2

package/dist/es/DataSearch.js

@@ -1,23 +1,24 @@
 import '@appbaseio/reactivecore';
 import '@appbaseio/reactivecore/lib/utils/constants';
 import './_rollupPluginBabelHelpers-ded08042.js';
+import 'vue';
 import 'vue-types';
 import '@appbaseio/reactivecore/lib/utils/helper';
-import 'emotion';
 import '@appbaseio/vue-emotion';
+import 'emotion';
 import 'polished';
-import './vueTypes-8986b709.js';
+import './vueTypes-e4af6fe2.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import './index-0444a498.js';
-import './ComponentWrapper-8042aa35.js';
-import './PreferencesConsumer-bc097ebb.js';
+import './index-285a43a6.js';
+import './ComponentWrapper-bf443c0b.js';
+import './PreferencesConsumer-7ea7313a.js';
 import './Title-863dfa42.js';
-import './Flex-7c177a10.js';
+import './Flex-a08e22d7.js';
 import 'hotkeys-js';
-export { D as DSConnected, a as default } from './DataSearch-5bb904c5.js';
-import './CancelSvg-e40552a5.js';
-import './Input-c09c0b56.js';
+export { D as DSConnected, a as default } from './DataSearch-4f9a4e46.js';
+import './CancelSvg-14ebc9a1.js';
+import './Input-3b8408a6.js';
 import 'compute-scroll-into-view';
 import './Container-d00219f7.js';
 import 'vue-highlight-words';

package/dist/es/{DropDown-28ddce07.js → DropDown-35e232b7.js}

@@ -1,35 +1,34 @@
 import { helper } from '@appbaseio/reactivecore';
 import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, mergeProps, createTextVNode } from 'vue';
 import VueTypes from 'vue-types';
-import { css } from 'emotion';
-import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-8986b709.js';
-import { a as isFunction } from './index-0444a498.js';
-import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-e40552a5.js';
-import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-c09c0b56.js';
+import { styled } from '@appbaseio/vue-emotion';
+import { t as types } from './vueTypes-e4af6fe2.js';
+import { a as isFunction } from './index-285a43a6.js';
+import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-14ebc9a1.js';
+import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-3b8408a6.js';
 import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var small = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n"])));
+var _templateObject, _templateObject2;
+var small = "\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n";
 var dark = function dark(_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tborder-color: ", ";\n\tcolor: ", ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor, theme.colors.borderColor, theme.colors.textColor, theme.colors.backgroundColor);
+  return "\n\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\tborder-color: " + (theme.colors ? theme.colors.borderColor : '') + ";\n\tcolor: " + (theme.colors ? theme.colors.textColor : '') + ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\t}\n";
 };
-var Select = styled('button')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
+var Select = styled('button')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
   return props.small ? small : null;
 }, function (_ref2) {
   var themePreset = _ref2.themePreset;
   return themePreset === 'dark' && dark;
 });
-var Tick = styled('span')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
+var Tick = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.primaryColor;
 });
 
-var _templateObject$1, _templateObject2$1;
-var open = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"])));
-var Chevron = styled('span')(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
+var _templateObject$1;
+var open = "\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n";
+var Chevron = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
   return props.open ? open : null;
 });
 
@@ -74,7 +73,6 @@ var Dropdown = {
   },
   render: function render() {
     var _this = this;
-    var h = arguments[0];
     var _this$$props = this.$props,
       items = _this$$props.items,
       selectedItem = _this$$props.selectedItem,
@@ -101,13 +99,11 @@ var Dropdown = {
       }
       return false;
     });
-    return h(Downshift, {
-      "attrs": {
-        "isOpen": this.$data.isOpen,
-        "selectedItem": selectedItem,
-        "handleChange": this.onChange,
-        "handleMouseup": this.handleStateChange
-      },
+    return createVNode(Downshift, {
+      "isOpen": this.$data.isOpen,
+      "selectedItem": selectedItem,
+      "handleChange": this.onChange,
+      "handleMouseup": this.handleStateChange,
       "scopedSlots": {
         "default": function _default(_ref) {
           var getItemProps = _ref.getItemProps,
@@ -116,29 +112,30 @@ var Dropdown = {
             getButtonProps = _ref.getButtonProps,
             getItemEvents = _ref.getItemEvents,
             getInputEvents = _ref.getInputEvents;
-          return h("div", {
+          return createVNode("div", {
             "class": suggestionsContainer
-          }, [h(Select, {
-            "on": _extends({}, _extends({}, getButtonProps({
+          }, [createVNode(Select, mergeProps({
+            on: _extends({}, getButtonProps({
               onClick: _this.toggle
-            }))),
+            }))
+          }, {
             "class": getClassName(_this.$props.innerClass, 'select') || '',
-            "attrs": {
-              "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
-              "small": _this.$props.small,
-              "themePreset": _this.$props.themePreset
+            "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
+            "small": _this.$props.small,
+            "themePreset": _this.$props.themePreset
+          }), {
+            "default": function _default() {
+              return [customLabelRenderer ? customLabelRenderer(selectedItem) : createVNode("div", null, [selectedItem ? _this.renderToString(selectedItem) : placeholder]), createVNode(Chevron, {
+                "open": isOpen
+              }, null)];
             }
-          }, [customLabelRenderer ? customLabelRenderer(selectedItem) : h("div", [selectedItem ? _this.renderToString(selectedItem) : placeholder]), h(Chevron, {
-            "attrs": {
-              "open": isOpen
-            }
-          })]), hasCustomRenderer ? customRenderer(itemsToRender, {
+          }), hasCustomRenderer ? customRenderer(itemsToRender, {
             getItemProps: getItemProps,
             isOpen: isOpen,
             highlightedIndex: highlightedIndex,
             getButtonProps: getButtonProps,
             getItemEvents: getItemEvents
-          }) : isOpen && itemsToRender.length ? h("ul", {
+          }) : isOpen && itemsToRender.length ? createVNode("ul", {
             "class": suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
           }, [_this.$props.showSearch ? _this.renderSearchbox({
             on: {
@@ -153,35 +150,35 @@ var Dropdown = {
               return value[labelField] === item[labelField];
             }));
             if (!_this.$props.multi) selected = item.key === selectedItem;
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
+            return createVNode("li", mergeProps({
+              domProps: getItemProps({
                 item: item
-              })),
-              "on": _extends({}, getItemEvents({
+              })
+            }, {
+              on: getItemEvents({
                 item: item
-              })),
+              })
+            }, {
               "key": item[keyField],
               "class": "" + (selected ? 'active' : ''),
               "style": {
                 backgroundColor: _this.getBackgroundColor(highlightedIndex === index, selected)
               }
-            }, [renderItem ? renderItem({
+            }), [renderItem ? renderItem({
               label: item[labelField],
               count: item.doc_count,
               isChecked: selected && _this.$props.multi
-            }) : h("div", [typeof item[labelField] === 'string' ? h("span", {
-              "domProps": {
-                "innerHTML": item[labelField]
-              }
-            }) : item[labelField], _this.$props.showCount && item.doc_count && h("span", {
+            }) : createVNode("div", null, [typeof item[labelField] === 'string' ? createVNode("span", {
+              "domPropsInnerHTML": item[labelField]
+            }, null) : item[labelField], _this.$props.showCount && item.doc_count && createVNode("span", {
               "class": getClassName(_this.$props.innerClass, 'count') || ''
-            }, ["\xA0(", item.doc_count, ")"])]), selected && _this.$props.multi ? h(Tick, {
+            }, [createTextVNode("\xA0("), item.doc_count, createTextVNode(")")])]), selected && _this.$props.multi ? createVNode(Tick, {
               "class": getClassName(_this.$props.innerClass, 'icon') || ''
-            }) : null]);
+            }, null) : null]);
           }), footer]) : null]);
         }
       }
-    });
+    }, null);
   },
   methods: {
     toggle: function toggle() {
@@ -249,49 +246,52 @@ var Dropdown = {
       return value;
     },
     renderNoResult: function renderNoResult() {
-      var h = this.$createElement;
-      var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
-      return h("p", {
+      var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
+      return createVNode("p", {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
     },
     renderSearchbox: function renderSearchbox(eventObject) {
-      var h = this.$createElement;
+      var _this3 = this;
       var _this$$props2 = this.$props,
         componentId = _this$$props2.componentId,
         searchPlaceholder = _this$$props2.searchPlaceholder,
         showClear = _this$$props2.showClear,
         themePreset = _this$$props2.themePreset,
         innerClass = _this$$props2.innerClass;
-      var InputComponent = h(Input, _mergeJSXProps([{
-        "attrs": {
-          "id": componentId + "-input",
-          "showIcon": false,
-          "showClear": showClear,
-          "placeholder": searchPlaceholder,
-          "value": this.$data.searchTerm,
-          "themePreset": themePreset
-        },
+      var InputComponent = createVNode(Input, mergeProps({
+        "id": componentId + "-input",
         "style": {
           border: 0,
           borderBottom: '1px solid #ddd'
         },
-        "class": getClassName(innerClass, 'input')
-      }, eventObject]));
+        "showIcon": false,
+        "showClear": showClear,
+        "class": getClassName(innerClass, 'input'),
+        "placeholder": searchPlaceholder,
+        "value": this.$data.searchTerm,
+        "themePreset": themePreset
+      }, eventObject), null);
       if (showClear) {
-        return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
-          "attrs": {
-            "groupPosition": "right",
-            "positionType": "absolute"
-          }
-        }, [h(IconWrapper, {
-          "on": {
-            "click": this.clearSearchTerm
-          },
-          "attrs": {
-            "isClearIcon": true
+        return createVNode(InputWrapper, null, {
+          "default": function _default() {
+            return [InputComponent, _this3.searchTerm && createVNode(IconGroup, {
+              "groupPosition": "right",
+              "positionType": "absolute"
+            }, {
+              "default": function _default() {
+                return [createVNode(IconWrapper, {
+                  "onClick": _this3.clearSearchTerm,
+                  "isClearIcon": true
+                }, {
+                  "default": function _default() {
+                    return [createVNode(CancelSvg, null, null)];
+                  }
+                })];
+              }
+            })];
           }
-        }, [h(CancelSvg)])])]);
+        });
       }
       return InputComponent;
     }

package/dist/es/DynamicRangeSlider.js

@@ -1,12 +1,13 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import { a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, resolveComponent, mergeProps } from 'vue';
 import VueTypes from 'vue-types';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-8986b709.js';
+import { t as types } from './vueTypes-e4af6fe2.js';
 import 'redux';
-import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-0444a498.js';
-import { P as PreferencesConsumer } from './PreferencesConsumer-bc097ebb.js';
+import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-285a43a6.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-7ea7313a.js';
 import { T as Title } from './Title-863dfa42.js';
 import { C as Container } from './Container-d00219f7.js';
 import NoSSR from 'vue-no-ssr';
@@ -109,7 +110,7 @@ var DynamicRangeSlider = {
       this.setDefaultValue(this.range);
     }
   },
-  beforeDestroy: function beforeDestroy() {
+  beforeUnmount: function beforeUnmount() {
     if (this.destroyOnUnmount) {
       this.removeComponent(this.$props.componentId);
       this.removeComponent(this.internalRangeComponent);
@@ -117,7 +118,7 @@ var DynamicRangeSlider = {
   },
   methods: {
     isControlled: function isControlled() {
-      if (this.$props.value && this.$listeners) {
+      if (this.$props.value && this.$attrs) {
         return true;
       }
       return false;
@@ -296,41 +297,54 @@ var DynamicRangeSlider = {
     }
   },
   render: function render() {
-    var h = arguments[0];
+    var _this4 = this;
     if (!this.range || !this.currentValue) {
       return null;
     }
     var _this$range = this.range,
       start = _this$range.start,
       end = _this$range.end;
-    return h(Container, {
+    return createVNode(Container, {
       "class": this.$props.className
-    }, [this.$props.title && h(Title, {
-      "class": getClassName(this.$props.innerClass, 'title')
-    }, [this.$props.title]), h(NoSSR, [h(Slider, {
-      "class": getClassName(this.$props.innerClass, 'slider')
-    }, [h("vue-slider-component", {
-      "ref": "slider",
-      "attrs": {
-        "value": [Math.floor(Math.max(start, this.currentValue[0])), Math.ceil(Math.min(end, this.currentValue[1]))],
-        "min": Math.floor(Math.min(start, this.currentValue[0])),
-        "max": Math.ceil(Math.max(end, this.currentValue[1])),
-        "dotSize": 20,
-        "height": 4,
-        "enable-cross": false,
-        "tooltip": "always"
-      },
-      "on": {
-        "drag-end": this.handleSlider
-      },
-      "props": _extends({}, this.$props.sliderOptions)
-    }), this.labels ? h("div", {
-      "class": "label-container"
-    }, [h("label", {
-      "class": getClassName(this.$props.innerClass, 'label') || 'range-label-left'
-    }, [this.labels.start]), h("label", {
-      "class": getClassName(this.$props.innerClass, 'label') || 'range-label-right'
-    }, [this.labels.end])]) : null])])]);
+    }, {
+      "default": function _default() {
+        return [_this4.$props.title && createVNode(Title, {
+          "class": getClassName(_this4.$props.innerClass, 'title')
+        }, {
+          "default": function _default() {
+            return [_this4.$props.title];
+          }
+        }), createVNode(NoSSR, null, {
+          "default": function _default() {
+            return [createVNode(Slider, {
+              "class": getClassName(_this4.$props.innerClass, 'slider')
+            }, {
+              "default": function _default() {
+                return [createVNode(resolveComponent("vue-slider-component"), mergeProps({
+                  "ref": "slider",
+                  "value": [Math.floor(Math.max(start, _this4.currentValue[0])), Math.ceil(Math.min(end, _this4.currentValue[1]))],
+                  "min": Math.floor(Math.min(start, _this4.currentValue[0])),
+                  "max": Math.ceil(Math.max(end, _this4.currentValue[1])),
+                  "onDrag-end": _this4.handleSlider,
+                  "dotSize": 20,
+                  "height": 4,
+                  "enable-cross": false,
+                  "tooltip": "always"
+                }, {
+                  props: _this4.$props.sliderOptions
+                }), null), _this4.labels ? createVNode("div", {
+                  "class": "label-container"
+                }, [createVNode("label", {
+                  "class": getClassName(_this4.$props.innerClass, 'label') || 'range-label-left'
+                }, [_this4.labels.start]), createVNode("label", {
+                  "class": getClassName(_this4.$props.innerClass, 'label') || 'range-label-right'
+                }, [_this4.labels.end])]) : null];
+              }
+            })];
+          }
+        })];
+      }
+    });
   }
 };
 DynamicRangeSlider.defaultQuery = function (values, props) {

package/dist/es/Flex-a08e22d7.js

@@ -0,0 +1,46 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { styled } from '@appbaseio/vue-emotion';
+import { lighten } from 'polished';
+
+var _templateObject;
+var leftLabel = "\n\tflex-direction: row;\n\talign-items: center;\n";
+var rightLabel = "\n\tflex-direction: row-reverse;\n\talign-items: center;\n";
+var topLabel = "\n\tflex-direction: column;\n";
+var bottomLabel = "\n\tflex-direction: column-reverse;\n";
+var border = function border(_ref) {
+  var _ref$theme$colors = _ref.theme.colors,
+    colors = _ref$theme$colors === void 0 ? {} : _ref$theme$colors;
+  return "\n\tborder: 1px solid " + (colors.borderColor || '#ccc') + ";\n";
+};
+var Flex = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\tsvg.cancel-icon {\n\t\tcursor: pointer;\n\t\tfill: ", ";\n\t\tflex-basis: 30px;\n\n\t\t&:hover {\n\t\t\tfill: ", ";\n\t\t}\n\t}\n"])), function (props) {
+  return props.inline ? 'inline-flex' : 'flex';
+}, function (props) {
+  return (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel;
+}, function (props) {
+  return (props.labelPosition === 'right' || props.iconPosition === 'left') && rightLabel;
+}, function (props) {
+  return props.labelPosition === 'top' && topLabel;
+}, function (props) {
+  return props.labelPosition === 'bottom' && bottomLabel;
+}, function (props) {
+  return props.showBorder && border;
+}, function (props) {
+  return props.justifyContent && "\n\t\t\tjustify-content: " + props.justifyContent + ";\n\t\t";
+}, function (props) {
+  return props.alignItems && "\n\t\t\talign-items: " + props.alignItems + ";\n\t\t";
+}, function (props) {
+  return props.flex && "\n\t\t\tflex: " + props.flex + ";\n\t\t";
+}, function (props) {
+  return props.direction && "\n\t\t\tflex-direction: " + props.direction + ";\n\t\t";
+}, function (props) {
+  return props.basis && "\n\t\t\tflex-basis: " + props.basis + ";\n\t\t";
+}, function (_ref2) {
+  var _ref2$theme$colors = _ref2.theme.colors,
+    colors = _ref2$theme$colors === void 0 ? {} : _ref2$theme$colors;
+  return colors.borderColor || lighten(0.3, colors.textColor || '#fff');
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors ? theme.colors.textColor : '';
+});
+
+export { Flex as F };

package/dist/es/FormControlList-fa5cf78b.js

@@ -0,0 +1,38 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { styled } from '@appbaseio/vue-emotion';
+import { lighten } from 'polished';
+
+var _templateObject, _templateObject2, _templateObject3;
+var item = {
+  width: '15px',
+  height: '15px',
+  scale: '4px'
+};
+var vh = "\n\tborder: 0;\n\tclip: rect(1px, 1px, 1px, 1px);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twidth: 1px;\n\twhite-space: nowrap;\n";
+var hideInputControl = "\n\t+ label {\n\t\tpadding-left: 0;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder: 0;\n\t\t\tmargin: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n";
+var formItem = function formItem(_ref) {
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme;
+  return "\n\t" + vh + ";\n\n\t&:focus {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tbox-shadow: 0 0 0 2px " + lighten(0.4, theme.colors.primaryColor) + ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:hover {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: " + theme.colors.primaryColor + ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:active {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\ttransition-duration: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t+ label {\n\t\tposition: relative;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t&::before {\n\t\t\tbackground-color: #fff;\n\t\t\tborder: 1px solid " + (theme.colors.borderColor || lighten(0.1, theme.colors.textColor)) + ";\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tcolor: " + theme.colors.primaryColor + ";\n\t\t\tmargin-right: calc(" + item.width + " * 0.5);\n\t\t\ttop: 50%;\n\t\t\tleft: 0;\n\t\t\twidth: " + item.width + ";\n\t\t\theight: " + item.height + ";\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\n\t\t&::after {\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tbackground-color: " + theme.colors.primaryColor + ";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + " + item.scale + " / 2);\n\t\t\twidth: calc(" + item.width + " - " + item.scale + ");\n\t\t\theight: calc(" + item.height + " - " + item.scale + ");\n\t\t\tmargin-top: calc(" + item.height + " / -2 - " + item.scale + " / -2);\n\t\t\ttransform: scale(0);\n\t\t\ttransform-origin: 50%;\n\t\t\ttransition: transform 200ms ease-out;\n\t\t}\n\t}\n";
+};
+var Radio = styled('input')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 50%;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t&:active,\n\t\t&:focus {\n\t\t\t+ label {\n\t\t\t\tcolor: ", ";\n\n\t\t\t\t&::before {\n\t\t\t\t\tanimation: none;\n\t\t\t\t\tfilter: none;\n\t\t\t\t\ttransition: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tanimation: none;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n"])), formItem, function (props) {
+  return props.show ? null : hideInputControl;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.primaryColor;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.primaryColor;
+});
+var Checkbox = styled('input')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 5);\n\t\t\twidth: calc(", " / 2);\n\t\t\theight: calc(", " / 5);\n\t\t\tmargin-top: calc(", " / -2 / 2 * 0.8);\n\t\t\tborder-style: solid;\n\t\t\tborder-color: ", ";\n\t\t\tborder-width: 0 0 2px 2px;\n\t\t\tborder-radius: 0;\n\t\t\tborder-image: none;\n\t\t\ttransform: rotate(-45deg) scale(0);\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\ttransform: rotate(-45deg) scale(1);\n\t\t\t\ttransition: transform 200ms ease-out;\n\t\t\t}\n\t\t}\n\t}\n"])), formItem, function (props) {
+  return props.show ? null : hideInputControl;
+}, item.width, item.width, item.width, item.height, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.primaryColor;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.primaryColor;
+});
+var UL = styled('ul')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 240px;\n\tposition: relative;\n\toverflow-y: auto;\n\tpadding-bottom: 12px;\n\n\tli {\n\t\theight 30px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding-left: 2px;\n\t}\n"])));
+
+export { Checkbox as C, Radio as R, UL as U };

package/dist/es/Input-3b8408a6.js

@@ -0,0 +1,69 @@
+import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { styled } from '@appbaseio/vue-emotion';
+import { css } from 'emotion';
+
+var _templateObject, _templateObject2, _templateObject3;
+var alertBorder = function alertBorder(_ref) {
+  var theme = _ref.theme;
+  return "\n\tborder: 1px solid " + theme.colors.alertColor + ";\n";
+};
+var input = "\n\twidth: 100%;\n\tline-height: 1.5;\n\tmin-height: 42px;\n\tpadding: 8px 12px;\n\tborder: 1px solid #ccc;\n\tbackground-color: #fafafa;\n\tfont-size: 0.9rem;\n\toutline: none;\n\theight: 100%;\n\n\t&:focus {\n\t\tbackground-color: #fff;\n\t}\n";
+var dark = function dark(theme) {
+  return "\n\tborder-color: " + theme.colors.borderColor + ";\n";
+};
+var darkInput = function darkInput(_ref2) {
+  var theme = _ref2.theme;
+  return "\n\tbackground-color: " + theme.colors.backgroundColor + ";\n\tcolor: " + theme.colors.textColor + ";\n\t" + dark(theme) + ";\n\n\t&:focus {\n\t\tbackground-color: " + theme.colors.backgroundColor + ";\n\t}\n";
+};
+var Input = styled('input')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", ";\n\n\t&:focus {\n\t\tbackground-color: #fff;\n\t}\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n"])), input, function (_ref3) {
+  var themePreset = _ref3.themePreset,
+    theme = _ref3.theme;
+  return themePreset === 'dark' && darkInput({
+    theme: theme
+  });
+}, function (props) {
+  return props.showIcon && props.iconPosition === 'left' && "\n\t\t\tpadding-left: 36px;\n\t\t";
+}, function (props) {
+  return props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 36px;\n\t\t";
+}, function (props) {
+  return (
+    // for clear icon
+    props.showClear && "\n\t\t\tpadding-right: 36px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for voice search icon
+    props.showVoiceSearch && "\n\t\t\tpadding-right: 36px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for clear icon with search icon
+    props.showClear && props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 66px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for voice search icon with search icon
+    props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 66px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for voice search icon with clear icon
+    props.showVoiceSearch && props.showIcon && "\n\t\t\tpadding-right: 66px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for clear icon with search icon and voice search
+    props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 90px;\n\t\t"
+  );
+}, function (props) {
+  return props.alert && alertBorder;
+});
+var suggestions = function suggestions(themePreset, theme) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 402px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
+};
+var suggestionsContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
+var noSuggestions = function noSuggestions(themePreset, theme) {
+  return "\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t" + (themePreset === 'dark' && theme && dark(theme)) + "\n";
+};
+
+export { Input as I, suggestions as a, noSuggestions as n, suggestionsContainer as s };

package/dist/es/{ListItem-07888a65.js → ListItem-47a6345a.js}

@@ -1,18 +1,17 @@
 import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
-import { css } from 'emotion';
-import styled from '@appbaseio/vue-emotion';
+import { styled } from '@appbaseio/vue-emotion';
 import { lighten } from 'polished';
 import './Title-863dfa42.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var container = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tborder-radius: 0.25rem;\n\toverflow: hidden;\n"])));
-var smallImage = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\twidth: 100px;\n\theight: 100px;\n"])));
-var Image = styled('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\twidth: 160px;\n\theight: 160px;\n\t", ";\n\tmargin: 0;\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-image: ", ";\n"])), function (props) {
+var _templateObject, _templateObject2;
+var container = "\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tborder-radius: 0.25rem;\n\toverflow: hidden;\n";
+var smallImage = "\n\twidth: 100px;\n\theight: 100px;\n";
+var Image = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\twidth: 160px;\n\theight: 160px;\n\t", ";\n\tmargin: 0;\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-image: ", ";\n"])), function (props) {
   return props.small ? smallImage : null;
 }, function (props) {
   return "url(" + props.src + ")";
 });
-var ListItem = styled('a')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\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: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\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, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref) {
+var ListItem = styled('a')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\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: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\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, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.backgroundColor ? lighten(0.1, theme.colors.backgroundColor) : '#fff';
 }, function (_ref2) {