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

package/dist/es/RangeInput.js

@@ -1,36 +1,36 @@
 import { helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
-import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import { css } from 'emotion';
-import styled from '@appbaseio/vue-emotion';
+import _transformOn from '@vue/babel-helper-vue-transform-on';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, mergeProps, createTextVNode } from 'vue';
+import VueTypes from 'vue-types';
+import { styled } from '@appbaseio/vue-emotion';
+import 'emotion';
 import 'polished';
-import { t as types } from './vueTypes-b8146772.js';
+import { t as types } from './vueTypes-f1923c72.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { c as connect } from './index-7788a843.js';
-import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.js';
-import './Title-3342664a.js';
-import { F as Flex } from './Flex-1f0795c3.js';
-import { I as Input } from './Input-7a2a9fac.js';
-import { C as Container } from './Container-ba826e96.js';
-import 'vue-no-ssr';
-import './ssr-b2c0b401.js';
+import { c as connect } from './index-4520a598.js';
+import { C as ComponentWrapper } from './ComponentWrapper-5166c76a.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-c276709c.js';
+import './Title-863dfa42.js';
+import { F as Flex } from './Flex-a08e22d7.js';
+import { I as Input } from './Input-4a8ef1f3.js';
+import { C as Container } from './Container-d00219f7.js';
+import './ssr-af398f0c.js';
 import { RangeConnected as RangeConnected$1 } from './RangeSlider.js';
 
-var _templateObject, _templateObject2;
-
+var _templateObject;
 var alert = function alert(_ref) {
   var theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
+  return "\n\tcolor: " + theme.colors.alertColor + ";\n";
 };
-
-var Content = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
+var Content = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
   return props.alert && alert;
 });
 
 var getClassName = helper.getClassName,
-    isEqual = helper.isEqual;
+  isEqual = helper.isEqual;
 var RangeInput = {
   name: 'RangeInput',
   components: {
@@ -92,27 +92,22 @@ var RangeInput = {
   methods: {
     shouldUpdate: function shouldUpdate(value) {
       var validateRange = this.$props.validateRange;
-
       if (validateRange && value) {
         return validateRange([value.start, value.end]);
       }
-
       if (value) {
         return value.start <= value.end;
       }
-
       return false;
     },
     isControlled: function isControlled() {
-      if (this.$props.value && this.$listeners) {
+      if (this.$props.value && this.$attrs) {
         return true;
       }
-
       return false;
     },
     handleChange: function handleChange(value, event) {
       var currentValue = value;
-
       if (this.shouldUpdate(value) && !isEqual(value, this.currentValue)) {
         switch (event) {
           case 'change':
@@ -122,18 +117,15 @@ var RangeInput = {
                 end: this.$props.range ? this.$props.range.end : 10
               };
             }
-
-            this.$data.currentValue = _extends({}, currentValue);
-            this.$emit('change', this.$data.currentValue);
+            this.currentValue = currentValue;
+            this.$emit('change', this.currentValue);
             break;
-
           case 'value-change':
-            this.$emit('valueChange', this.$data.currentValue);
-            this.$emit('value-change', this.$data.currentValue);
+            this.$emit('valueChange', this.currentValue);
+            this.$emit('value-change', this.currentValue);
             break;
-
           default:
-            this.$data.currentValue = _extends({}, currentValue);
+            this.currentValue = _extends({}, currentValue);
             break;
         }
       }
@@ -146,30 +138,28 @@ var RangeInput = {
     },
     handleInputChange: function handleInputChange(e) {
       var _e$target = e.target,
-          name = _e$target.name,
-          value = _e$target.value;
-
+        name = _e$target.name,
+        value = _e$target.value;
       if (Number.isNaN(value)) {
         if (name === 'start') {
-          this.$data.isStartValid = false;
+          this.isStartValid = false;
         } else {
-          this.$data.isEndValid = false;
+          this.isEndValid = false;
         }
-      } else if (name === 'start' && !this.$data.isStartValid) {
-        this.$data.isStartValid = true;
-      } else if (name === 'end' && !this.$data.isEndValid) {
-        this.$data.isEndValid = true;
+      } else if (name === 'start' && !this.isStartValid) {
+        this.isStartValid = true;
+      } else if (name === 'end' && !this.isEndValid) {
+        this.isEndValid = true;
       }
-
-      if (this.$data.isStartValid && this.$data.isEndValid) {
+      if (this.isStartValid && this.isEndValid) {
         if (name === 'start') {
           this.handleChange({
             start: Number(value),
-            end: this.$data.currentValue.end
+            end: this.currentValue.end
           }, 'change');
         } else {
           this.handleChange({
-            start: this.$data.currentValue.start,
+            start: this.currentValue.start,
             end: Number(value)
           }, 'change');
         }
@@ -194,146 +184,149 @@ var RangeInput = {
     if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
       this.handleChange(this.$props.defaultValue);
     }
-
     if (this.isControlled()) {
       this.handleChange(this.$props.value, 'change');
     }
   },
   render: function render() {
-    var h = arguments[0];
+    var _this = this;
     var _this$$props = this.$props,
-        className = _this$$props.className,
-        dataField = _this$$props.dataField,
-        range = _this$$props.range,
-        rangeLabels = _this$$props.rangeLabels,
-        componentId = _this$$props.componentId,
-        innerClass = _this$$props.innerClass,
-        stepValue = _this$$props.stepValue,
-        componentStyle = _this$$props.componentStyle,
-        themePreset = _this$$props.themePreset,
-        includeNullValues = _this$$props.includeNullValues,
-        beforeValueChange = _this$$props.beforeValueChange,
-        customQuery = _this$$props.customQuery,
-        data = _this$$props.data,
-        filterLabel = _this$$props.filterLabel,
-        react = _this$$props.react,
-        showFilter = _this$$props.showFilter,
-        showCheckbox = _this$$props.showCheckbox,
-        title = _this$$props.title,
-        URLParams = _this$$props.URLParams,
-        sliderOptions = _this$$props.sliderOptions,
-        nestedField = _this$$props.nestedField;
-    return h(Container, {
+      className = _this$$props.className,
+      dataField = _this$$props.dataField,
+      range = _this$$props.range,
+      rangeLabels = _this$$props.rangeLabels,
+      componentId = _this$$props.componentId,
+      innerClass = _this$$props.innerClass,
+      stepValue = _this$$props.stepValue,
+      componentStyle = _this$$props.componentStyle,
+      themePreset = _this$$props.themePreset,
+      includeNullValues = _this$$props.includeNullValues,
+      beforeValueChange = _this$$props.beforeValueChange,
+      customQuery = _this$$props.customQuery,
+      data = _this$$props.data,
+      filterLabel = _this$$props.filterLabel,
+      react = _this$$props.react,
+      showFilter = _this$$props.showFilter,
+      showCheckbox = _this$$props.showCheckbox,
+      title = _this$$props.title,
+      URLParams = _this$$props.URLParams,
+      sliderOptions = _this$$props.sliderOptions,
+      nestedField = _this$$props.nestedField;
+    return createVNode(Container, {
       "style": componentStyle,
       "class": className
-    }, [h(RangeConnected$1, {
-      "attrs": {
-        "componentId": componentId,
-        "value": {
-          start: this.currentValue.start,
-          end: this.currentValue.end
-        },
-        "range": range,
-        "dataField": dataField,
-        "rangeLabels": rangeLabels,
-        "includeNullValues": includeNullValues,
-        "beforeValueChange": beforeValueChange,
-        "customQuery": customQuery,
-        "data": data,
-        "filterLabel": filterLabel,
-        "react": react,
-        "showFilter": showFilter,
-        "showCheckbox": showCheckbox,
-        "title": title,
-        "uRLParams": URLParams,
-        "sliderOptions": sliderOptions,
-        "nestedField": nestedField
-      },
-      "on": {
-        "change": this.handleOnChange,
-        "value-change": this.handleValueChange
-      }
-    }), h(Flex, {
-      "class": getClassName(innerClass, 'input-container') || ''
-    }, [h(Flex, {
-      "attrs": {
-        "direction": "column",
-        "flex": 2
-      }
-    }, [h(Input, {
-      "key": componentId + "-start-value",
-      "attrs": {
-        "name": "start",
-        "type": "number",
-        "step": stepValue,
-        "themePreset": themePreset,
-        "aria-label": componentId + "-start-input",
-        "min": this.$props.range ? this.$props.range.start : 0,
-        "alert": !this.isStartValid
-      },
-      "on": {
-        "change": this.handleInputChange
-      },
-      "class": getClassName(innerClass, 'input') || '',
-      "domProps": _extends({}, {
-        value: this.currentValue.start
-      })
-    }), !this.isStartValid && h(Content, {
-      "attrs": {
-        "alert": true
-      }
-    }, ["Input range is invalid"])]), h(Flex, {
-      "attrs": {
-        "justifyContent": "center",
-        "alignItems": "center",
-        "flex": 1
-      }
-    }, ["-"]), h(Flex, {
-      "attrs": {
-        "direction": "column",
-        "flex": 2
-      }
-    }, [h(Input, {
-      "key": componentId + "-end-value",
-      "attrs": {
-        "name": "end",
-        "type": "number",
-        "step": stepValue,
-        "themePreset": themePreset,
-        "aria-label": componentId + "-end-input",
-        "max": this.$props.range ? this.$props.range.end : 10,
-        "alert": !this.isEndValid
-      },
-      "on": {
-        "change": this.handleInputChange
-      },
-      "class": getClassName(innerClass, 'input') || '',
-      "domProps": _extends({}, {
-        value: this.currentValue.end
-      })
-    }), !this.isEndValid && h(Content, {
-      "attrs": {
-        "alert": true
+    }, {
+      "default": function _default() {
+        return [createVNode(RangeConnected$1, mergeProps(_transformOn({
+          change: _this.handleOnChange,
+          'value-change': _this.handleValueChange
+        }), {
+          "componentId": componentId,
+          "value": {
+            start: _this.currentValue.start,
+            end: _this.currentValue.end
+          },
+          "range": range,
+          "dataField": dataField,
+          "rangeLabels": rangeLabels,
+          "includeNullValues": includeNullValues,
+          "beforeValueChange": beforeValueChange,
+          "customQuery": customQuery,
+          "data": data,
+          "filterLabel": filterLabel,
+          "react": react,
+          "showFilter": showFilter,
+          "showCheckbox": showCheckbox,
+          "title": title,
+          "URLParams": URLParams,
+          "sliderOptions": sliderOptions,
+          "nestedField": nestedField
+        }), null), createVNode(Flex, {
+          "class": getClassName(innerClass, 'input-container') || ''
+        }, {
+          "default": function _default() {
+            return [createVNode(Flex, {
+              "direction": "column",
+              "flex": 2
+            }, {
+              "default": function _default() {
+                return [createVNode(Input, mergeProps(_transformOn({
+                  change: _this.handleInputChange
+                }), {
+                  "key": componentId + "-start-value",
+                  "name": "start",
+                  "type": "number",
+                  "step": stepValue,
+                  "themePreset": themePreset,
+                  "aria-label": componentId + "-start-input",
+                  "min": _this.$props.range ? _this.$props.range.start : 0,
+                  "class": getClassName(innerClass, 'input') || '',
+                  "alert": !_this.isStartValid,
+                  "value": _this.currentValue.start || 0
+                }), null), !_this.isStartValid && createVNode(Content, {
+                  "alert": true
+                }, {
+                  "default": function _default() {
+                    return [createTextVNode("Input range is invalid")];
+                  }
+                })];
+              }
+            }), createVNode(Flex, {
+              "justifyContent": "center",
+              "alignItems": "center",
+              "flex": 1
+            }, {
+              "default": function _default() {
+                return [createTextVNode("-")];
+              }
+            }), createVNode(Flex, {
+              "direction": "column",
+              "flex": 2
+            }, {
+              "default": function _default() {
+                return [createVNode(Input, mergeProps(_transformOn({
+                  change: _this.handleInputChange
+                }), {
+                  "key": componentId + "-end-value",
+                  "name": "end",
+                  "type": "number",
+                  "step": stepValue,
+                  "themePreset": themePreset,
+                  "aria-label": componentId + "-end-input",
+                  "max": _this.$props.range ? _this.$props.range.end : 10,
+                  "class": getClassName(innerClass, 'input') || '',
+                  "alert": !_this.isEndValid,
+                  "value": _this.currentValue.end || 0
+                }), null), !_this.isEndValid && createVNode(Content, {
+                  "alert": true
+                }, {
+                  "default": function _default() {
+                    return [createTextVNode("Input range is invalid")];
+                  }
+                })];
+              }
+            })];
+          }
+        })];
       }
-    }, ["Input range is invalid"])])])]);
+    });
   }
 };
-
 var mapStateToProps = function mapStateToProps(state) {
   return {
     themePreset: state.config.themePreset
   };
 };
-
-var RangeConnected = ComponentWrapper(connect(mapStateToProps, {})(RangeInput), {
+var RangeConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, {})(RangeInput), {
   componentType: componentTypes.rangeInput
-});
-
-RangeInput.install = function (Vue) {
-  Vue.component(RangeInput.name, RangeConnected);
-}; // Add componentType for SSR
-
+}));
+RangeConnected.name = RangeInput.name;
+RangeConnected.install = function (Vue) {
+  Vue.component(RangeConnected.name, RangeConnected);
+};
 
-RangeInput.componentType = componentTypes.rangeInput;
+// Add componentType for SSR
+RangeConnected.componentType = componentTypes.rangeInput;
 
-export default RangeInput;
+export default RangeConnected;
+export { RangeConnected };