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

package/dist/cjs/RangeInput.js

@@ -6,39 +6,38 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
-var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
-var emotion = require('emotion');
-var styled = require('@appbaseio/vue-emotion');
-var styled__default = _interopDefault(styled);
+var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vue = require('vue');
+var VueTypes = _interopDefault(require('vue-types'));
+var vueEmotion = require('@appbaseio/vue-emotion');
+require('emotion');
 require('polished');
-var vueTypes = require('./vueTypes-727b7c63.js');
+var vueTypes = require('./vueTypes-1bf00978.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-6a167fe0.js');
-var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
-require('./Title-1de7d0f4.js');
-var Flex = require('./Flex-aa517a13.js');
-var Input = require('./Input-e6603a7e.js');
-var Container = require('./Container-daf30918.js');
-require('vue-no-ssr');
-require('./ssr-3027b848.js');
+var index = require('./index-d8d8f291.js');
+var ComponentWrapper = require('./ComponentWrapper-75f88599.js');
+var PreferencesConsumer = require('./PreferencesConsumer-eb265924.js');
+require('./Title-8802a218.js');
+var Flex = require('./Flex-d5675ea6.js');
+var Input = require('./Input-4b434436.js');
+var Container = require('./Container-29f049b2.js');
+require('./ssr-6907ada3.js');
 var RangeSlider = require('./RangeSlider.js');
 
-var _templateObject, _templateObject2;
-
+var _templateObject;
 var alert = function alert(_ref) {
   var theme = _ref.theme;
-  return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
+  return "\n\tcolor: " + theme.colors.alertColor + ";\n";
 };
-
-var Content = styled__default('div')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
+var Content = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
   return props.alert && alert;
 });
 
 var getClassName = configureStore.helper.getClassName,
-    isEqual = configureStore.helper.isEqual;
+  isEqual = configureStore.helper.isEqual;
 var RangeInput = {
   name: 'RangeInput',
   components: {
@@ -100,27 +99,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':
@@ -130,18 +124,15 @@ var RangeInput = {
                 end: this.$props.range ? this.$props.range.end : 10
               };
             }
-
-            this.$data.currentValue = _rollupPluginBabelHelpers._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 = _rollupPluginBabelHelpers._extends({}, currentValue);
+            this.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
             break;
         }
       }
@@ -154,30 +145,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');
         }
@@ -202,146 +191,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.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 vue.createVNode(Container.Container, {
       "style": componentStyle,
       "class": className
-    }, [h(RangeSlider.RangeConnected, {
-      "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.Flex, {
-      "class": getClassName(innerClass, 'input-container') || ''
-    }, [h(Flex.Flex, {
-      "attrs": {
-        "direction": "column",
-        "flex": 2
-      }
-    }, [h(Input.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": _rollupPluginBabelHelpers._extends({}, {
-        value: this.currentValue.start
-      })
-    }), !this.isStartValid && h(Content, {
-      "attrs": {
-        "alert": true
-      }
-    }, ["Input range is invalid"])]), h(Flex.Flex, {
-      "attrs": {
-        "justifyContent": "center",
-        "alignItems": "center",
-        "flex": 1
-      }
-    }, ["-"]), h(Flex.Flex, {
-      "attrs": {
-        "direction": "column",
-        "flex": 2
-      }
-    }, [h(Input.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": _rollupPluginBabelHelpers._extends({}, {
-        value: this.currentValue.end
-      })
-    }), !this.isEndValid && h(Content, {
-      "attrs": {
-        "alert": true
+    }, {
+      "default": function _default() {
+        return [vue.createVNode(RangeSlider.RangeConnected, vue.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), vue.createVNode(Flex.Flex, {
+          "class": getClassName(innerClass, 'input-container') || ''
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(Flex.Flex, {
+              "direction": "column",
+              "flex": 2
+            }, {
+              "default": function _default() {
+                return [vue.createVNode(Input.Input, vue.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 && vue.createVNode(Content, {
+                  "alert": true
+                }, {
+                  "default": function _default() {
+                    return [vue.createTextVNode("Input range is invalid")];
+                  }
+                })];
+              }
+            }), vue.createVNode(Flex.Flex, {
+              "justifyContent": "center",
+              "alignItems": "center",
+              "flex": 1
+            }, {
+              "default": function _default() {
+                return [vue.createTextVNode("-")];
+              }
+            }), vue.createVNode(Flex.Flex, {
+              "direction": "column",
+              "flex": 2
+            }, {
+              "default": function _default() {
+                return [vue.createVNode(Input.Input, vue.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 && vue.createVNode(Content, {
+                  "alert": true
+                }, {
+                  "default": function _default() {
+                    return [vue.createTextVNode("Input range is invalid")];
+                  }
+                })];
+              }
+            })];
+          }
+        })];
       }
-    }, ["Input range is invalid"])])])]);
+    });
   }
 };
-
 var mapStateToProps = function mapStateToProps(state) {
   return {
     themePreset: state.config.themePreset
   };
 };
-
-var RangeConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, {})(RangeInput), {
+var RangeConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, {})(RangeInput), {
   componentType: constants.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 = constants.componentTypes.rangeInput;
+// Add componentType for SSR
+RangeConnected.componentType = constants.componentTypes.rangeInput;
 
-exports.default = RangeInput;
+exports.RangeConnected = RangeConnected;
+exports.default = RangeConnected;