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

package/dist/es/DynamicRangeSlider.js

@@ -1,31 +1,32 @@
 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 './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, resolveComponent, mergeProps } from 'vue';
+import VueTypes from 'vue-types';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-b8146772.js';
+import { t as types } from './vueTypes-f1923c72.js';
 import 'redux';
-import { f as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-7788a843.js';
-import { T as Title } from './Title-3342664a.js';
-import { C as Container } from './Container-ba826e96.js';
-import NoSSR from 'vue-no-ssr';
-import { g as getComponents, S as Slider } from './ssr-b2c0b401.js';
+import { j as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-4520a598.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-24e88f3b.js';
+import { T as Title } from './Title-863dfa42.js';
+import { C as Container } from './Container-d00219f7.js';
+import { g as getComponents, N as NoSSR, S as Slider } from './ssr-584c278d.js';
 
 var addComponent = Actions.addComponent,
-    removeComponent = Actions.removeComponent,
-    watchComponent = Actions.watchComponent,
-    updateQuery = Actions.updateQuery,
-    setQueryListener = Actions.setQueryListener,
-    setQueryOptions = Actions.setQueryOptions,
-    setComponentProps = Actions.setComponentProps,
-    setCustomQuery = Actions.setCustomQuery,
-    updateComponentProps = Actions.updateComponentProps;
+  removeComponent = Actions.removeComponent,
+  watchComponent = Actions.watchComponent,
+  updateQuery = Actions.updateQuery,
+  setQueryListener = Actions.setQueryListener,
+  setQueryOptions = Actions.setQueryOptions,
+  setComponentProps = Actions.setComponentProps,
+  setCustomQuery = Actions.setCustomQuery,
+  updateComponentProps = Actions.updateComponentProps;
 var checkValueChange = helper.checkValueChange,
-    getClassName = helper.getClassName,
-    isEqual = helper.isEqual,
-    checkSomePropChange = helper.checkSomePropChange,
-    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
-    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
+  getClassName = helper.getClassName,
+  isEqual = helper.isEqual,
+  checkSomePropChange = helper.checkSomePropChange,
+  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var DynamicRangeSlider = {
   name: 'DynamicRangeSlider',
   components: getComponents(),
@@ -61,27 +62,20 @@ var DynamicRangeSlider = {
   },
   created: function created() {
     var _this = this;
-
+    this.$timestamp = new Date().getTime();
     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));
     };
-
-    this.setQueryListener(this.$props.componentId, onQueryChange, null); // Update props in store
-
+    this.setQueryListener(this.$props.componentId, onQueryChange, null);
+    // Update props in store
     this.setComponentProps(this.componentId, this.$props, componentTypes.dynamicRangeSlider);
     this.setComponentProps(this.internalRangeComponent, this.$props, componentTypes.dynamicRangeSlider);
 
-    if (!this.enableAppbase && this.$props.index) {
-      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-    } // Set custom query in store
-
-
+    // Set custom query in store
     updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
   },
   mounted: function mounted() {
@@ -89,28 +83,23 @@ var DynamicRangeSlider = {
   },
   beforeMount: function beforeMount() {
     var components = [];
-
     if (this.$$store) {
       var _this$$$store$getStat = this.$$store.getState();
-
       components = _this$$$store$getStat.components;
     }
-
     var value = this.$props.value;
-
     if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
-      this.addComponent(this.componentId);
-      this.addComponent(this.internalRangeComponent);
-
+      this.addComponent(this.componentId, this.$timestamp);
+      this.addComponent(this.internalRangeComponent, this.$timestamp);
       if (Array.isArray(this.selectedValue)) {
         this.handleChange(this.selectedValue);
       } else if (this.selectedValue) {
         this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
       } else if (value) {
         this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
-      } // get range before executing other queries
-
+      }
 
+      // get range before executing other queries
       this.updateRangeQueryOptions();
     }
   },
@@ -119,7 +108,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);
@@ -127,21 +116,18 @@ var DynamicRangeSlider = {
   },
   methods: {
     isControlled: function isControlled() {
-      if (this.$props.value && this.$listeners) {
+      if (this.$props.value && this.$attrs) {
         return true;
       }
-
       return false;
     },
     setDefaultValue: function setDefaultValue(_ref) {
       var start = _ref.start,
-          end = _ref.end;
-
+        end = _ref.end;
       if (this.$props.defaultValue) {
         var _this$$props$defaultV = this.$props.defaultValue(start, end),
-            defaultStart = _this$$props$defaultV.start,
-            defaultEnd = _this$$props$defaultV.end;
-
+          defaultStart = _this$$props$defaultV.start,
+          defaultEnd = _this$$props$defaultV.end;
         this.handleChange([defaultStart, defaultEnd]);
       } else if (this.isControlled()) {
         this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
@@ -174,10 +160,8 @@ var DynamicRangeSlider = {
     },
     updateRangeQueryOptions: function updateRangeQueryOptions() {
       var aggs = {};
-
       if (this.$props.nestedField) {
         var _aggs;
-
         aggs = (_aggs = {}, _aggs[this.$props.nestedField] = {
           nested: {
             path: this.$props.nestedField
@@ -187,7 +171,6 @@ var DynamicRangeSlider = {
       } else {
         aggs = this.rangeQuery();
       }
-
       this.setQueryOptions(this.internalRangeComponent, {
         aggs: aggs
       });
@@ -195,7 +178,6 @@ var DynamicRangeSlider = {
     handleSlider: function handleSlider() {
       var sliderValues = this.$refs.slider.getValue();
       var value = this.$props.value;
-
       if (value === undefined) {
         this.handleChange(sliderValues);
       } else {
@@ -207,26 +189,20 @@ var DynamicRangeSlider = {
     },
     handleChange: function handleChange(currentValue) {
       var _this2 = this;
-
       // Always keep the values within range
       var normalizedValue = [this.range ? Math.max(this.range.start, currentValue[0]) : currentValue[0], this.range ? Math.min(this.range.end, currentValue[1]) : currentValue[1]];
-
       var performUpdate = function performUpdate() {
         _this2.currentValue = normalizedValue;
-
         _this2.updateQueryHandler(normalizedValue, _this2.$props);
-
         _this2.$emit('valueChange', {
           start: normalizedValue[0],
           end: normalizedValue[1]
         });
-
         _this2.$emit('value-change', {
           start: normalizedValue[0],
           end: normalizedValue[1]
         });
       };
-
       checkValueChange(this.$props.componentId, {
         start: normalizedValue[0],
         end: normalizedValue[1]
@@ -234,30 +210,25 @@ var DynamicRangeSlider = {
     },
     updateQueryHandler: function updateQueryHandler(value) {
       var query = DynamicRangeSlider.defaultQuery(value, this.$props);
-
       if (this.$props.customQuery) {
         var customQueryTobeSet = this.$props.customQuery(value, this.$props);
         var queryTobeSet = extractQueryFromCustomQuery(customQueryTobeSet);
-
         if (queryTobeSet) {
           query = queryTobeSet;
         }
-
         var customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
         updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
         this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
       }
-
       var _ref2 = this.range || {
-        start: value[0],
-        end: value[1]
-      },
-          start = _ref2.start,
-          end = _ref2.end;
-
+          start: value[0],
+          end: value[1]
+        },
+        start = _ref2.start,
+        end = _ref2.end;
       var currentStart = value[0],
-          currentEnd = value[1]; // check if the slider is at its initial position
-
+        currentEnd = value[1];
+      // check if the slider is at its initial position
       var isInitialValue = currentStart === start && currentEnd === end;
       this.updateQuery({
         componentId: this.$props.componentId,
@@ -281,11 +252,9 @@ var DynamicRangeSlider = {
       deep: true,
       handler: function handler(newVal) {
         var _this3 = this;
-
         var propsKeys = getValidPropsKeys(newVal);
         checkSomePropChange(newVal, this.componentProps, propsKeys, function () {
           _this3.updateComponentProps(_this3.componentId, newVal, componentTypes.dynamicRangeSlider);
-
           _this3.updateComponentProps(_this3.internalRangeComponent, newVal, componentTypes.dynamicRangeSlider);
         });
       }
@@ -304,15 +273,12 @@ var DynamicRangeSlider = {
     },
     range: function range(newValue, oldValue) {
       if (isEqual(newValue, oldValue) || !this.currentValue) return;
-
       var _ref3 = this.currentValue || [],
-          currentStart = _ref3[0],
-          currentEnd = _ref3[1];
-
+        currentStart = _ref3[0],
+        currentEnd = _ref3[1];
       var _ref4 = oldValue || {},
-          oldStart = _ref4.start,
-          oldEnd = _ref4.end;
-
+        oldStart = _ref4.start,
+        oldEnd = _ref4.end;
       var newStart = currentStart === oldStart ? newValue.start : currentStart;
       var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
       this.handleChange([newStart, newEnd]);
@@ -329,93 +295,78 @@ 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, {
+      start = _this$range.start,
+      end = _this$range.end;
+    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])])]);
-  }
-};
-
-DynamicRangeSlider.defaultQuery = function (values, props) {
-  var query = null;
-
-  if (Array.isArray(values) && values.length) {
-    var _range;
-
-    query = {
-      range: (_range = {}, _range[props.dataField] = {
-        gte: values[0],
-        lte: values[1],
-        boost: 2.0
-      }, _range)
-    };
-  }
-
-  if (query && props.nestedField) {
-    return {
-      query: {
-        nested: {
-          path: props.nestedField,
-          query: query
-        }
+    }, {
+      "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",
+                  "modelValue": [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"
+                }, _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];
+              }
+            })];
+          }
+        })];
       }
-    };
+    });
   }
-
-  return query;
 };
-
+DynamicRangeSlider.defaultQuery = function (value, props) {
+  return {
+    query: {
+      queryFormat: props.queryFormat,
+      dataField: props.dataField,
+      value: value,
+      showMissing: props.showMissing
+    }
+  };
+};
 DynamicRangeSlider.parseValue = function (value) {
   if (value) {
     return Array.isArray(value) ? value : [value.start, value.end];
   }
-
   return [];
 };
-
 DynamicRangeSlider.hasInternalComponent = function () {
   return true;
 };
-
 var mapStateToProps = function mapStateToProps(state, props) {
   var componentId = state.aggregations[props.componentId];
   var internalRange = state.aggregations[props.componentId + "__range__internal"];
   var options = componentId && componentId[props.dataField];
   var range = state.aggregations[props.componentId + "__range__internal"];
-
   if (props.nestedField) {
     options = options && componentId[props.dataField][props.nestedField] && componentId[props.dataField][props.nestedField].buckets ? componentId[props.dataField][props.nestedField].buckets : [];
     range = range && internalRange[props.nestedField].min ? {
@@ -429,16 +380,13 @@ var mapStateToProps = function mapStateToProps(state, props) {
       end: internalRange.max.value
     } : null;
   }
-
   return {
     options: options,
     range: range,
     selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
-    componentProps: state.props[props.componentId],
-    enableAppbase: state.config.enableAppbase
+    componentProps: state.props[props.componentId]
   };
 };
-
 var mapDispatchtoProps = {
   addComponent: addComponent,
   removeComponent: removeComponent,
@@ -450,13 +398,14 @@ var mapDispatchtoProps = {
   setCustomQuery: setCustomQuery,
   updateComponentProps: updateComponentProps
 };
-var RangeConnected = connect(mapStateToProps, mapDispatchtoProps)(DynamicRangeSlider);
-
-DynamicRangeSlider.install = function (Vue) {
-  Vue.component(DynamicRangeSlider.name, RangeConnected);
-}; // Add componentType for SSR
-
+var RangeConnected = PreferencesConsumer(connect(mapStateToProps, mapDispatchtoProps)(DynamicRangeSlider));
+RangeConnected.name = DynamicRangeSlider.name;
+RangeConnected.install = function (Vue) {
+  Vue.component(RangeConnected.name, RangeConnected);
+};
 
-DynamicRangeSlider.componentType = componentTypes.dynamicRangeSlider;
+// Add componentType for SSR
+RangeConnected.componentType = componentTypes.dynamicRangeSlider;
 
-export default DynamicRangeSlider;
+export default RangeConnected;
+export { RangeConnected };

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-fe6eaee4.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-ad474a55.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, _templateObject4;
+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: flex;\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 css(_templateObject4 || (_templateObject4 = _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: 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", "\n"])), themePreset === 'dark' && theme && dark(theme));
+};
+
+export { Input as I, suggestions as a, noSuggestions as n, suggestionsContainer as s };

package/dist/es/{ListItem-cad14c5e.js → ListItem-16756c02.js}

@@ -1,18 +1,18 @@
-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, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 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 smallImage = "\n\twidth: 100px;\n\theight: 100px;\n";
+var Image = styled('div')(_templateObject2 || (_templateObject2 = _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')(_templateObject3 || (_templateObject3 = _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) {
@@ -30,7 +30,6 @@ var ListItem = styled('a')(_templateObject4 || (_templateObject4 = _taggedTempla
   if (props.image) {
     return props.small ? 'calc(100% - 100px)' : 'calc(100% - 160px)';
   }
-
   return '100%';
 }, function (props) {
   return props.image ? '10px' : 0;