@appbaseio/reactivesearch-vue 1.16.0-alpha.30 → 1.16.0-alpha.31

package/dist/@appbaseio/reactivesearch-vue.umd.js

@@ -13295,10 +13295,16 @@
 	}; // parses current array (i.e. this.$props.value) for `onChange` callback for multi-* components
 
 	function parseValueArray(objectValues, currentValue) {
-	  var keys = Object.keys(objectValues);
-	  var selectedValues = keys.map(function (key) {
-	    return objectValues[key] ? key : null;
-	  });
+	  var selectedValues;
+
+	  if (Array.isArray(objectValues)) {
+	    selectedValues = [].concat(objectValues);
+	  } else {
+	    var keys = Object.keys(objectValues);
+	    selectedValues = keys.map(function (key) {
+	      return objectValues[key] ? key : null;
+	    });
+	  }
 
 	  if (selectedValues.includes(currentValue)) {
 	    return selectedValues.filter(function (item) {
@@ -21689,13 +21695,14 @@
 	  },
 	  beforeMount: function beforeMount() {
 	    this.updateQueryHandlerOptions(this.$props);
+	    var value = this.selectedValue || this.$props.value || this.$props.defaultValue;
+	    this.setValue(value, !this.selectedValue);
+	  },
+	  mounted: function mounted() {
+	    var currentValue = Object.keys(this.$data.currentValue);
 
-	    if (this.selectedValue) {
-	      this.setValue(this.selectedValue);
-	    } else if (this.$props.value) {
-	      this.setValue(this.$props.value, true);
-	    } else if (this.$props.defaultValue) {
-	      this.setValue(this.$props.defaultValue, true);
+	    if (this.$props.value !== undefined && !isEqual$6(this.$props.value, currentValue)) {
+	      this.$emit('change', currentValue);
 	    }
 	  },
 	  watch: {
@@ -21740,7 +21747,11 @@
 	      }
 
 	      if (!isEqual$6(selectedValue, newVal)) {
-	        this.setValue(newVal || [], true);
+	        if (this.value === undefined) {
+	          this.setValue(newVal, true);
+	        } else {
+	          this.$emit('change', newVal);
+	        }
 	      }
 	    },
 	    defaultQuery: function defaultQuery(newVal, oldVal) {
@@ -22039,7 +22050,7 @@
 	      if (value === undefined) {
 	        this.setValue(currentValue);
 	      } else {
-	        var values = parseValueArray(value, currentValue);
+	        var values = parseValueArray(value || [], currentValue);
 	        this.$emit('change', values);
 	      }
 	    },
@@ -22311,7 +22322,8 @@
 	              isOpen = _ref.isOpen,
 	              highlightedIndex = _ref.highlightedIndex,
 	              getButtonProps = _ref.getButtonProps,
-	              getItemEvents = _ref.getItemEvents;
+	              getItemEvents = _ref.getItemEvents,
+	              getInputEvents = _ref.getInputEvents;
 	          return h("div", {
 	            "class": suggestionsContainer
 	          }, [h(Select, {
@@ -22336,7 +22348,13 @@
 	            getItemEvents: getItemEvents
 	          }) : isOpen && itemsToRender.length ? h("ul", {
 	            "class": suggestions$1(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName$6(_this.$props.innerClass, 'list')
-	          }, [_this.$props.showSearch ? _this.renderSearchbox() : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
+	          }, [_this.$props.showSearch ? _this.renderSearchbox({
+	            on: {
+	              input: getInputEvents({
+	                onInput: _this.handleInputChange
+	              }).input
+	            }
+	          }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
 	            var selected = _this.$props.multi // MultiDropdownList
 	            && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
 	            || Array.isArray(selectedItem) && selectedItem.find(function (value) {
@@ -22457,7 +22475,7 @@
 	        "class": getClassName$6(this.$props.innerClass, 'noResults') || null
 	      }, [isFunction$1(renderNoResults) ? renderNoResults() : renderNoResults]);
 	    },
-	    renderSearchbox: function renderSearchbox() {
+	    renderSearchbox: function renderSearchbox(eventObject) {
 	      var h = this.$createElement;
 	      var _this$$props2 = this.$props,
 	          componentId = _this$$props2.componentId,
@@ -22465,7 +22483,7 @@
 	          showClear = _this$$props2.showClear,
 	          themePreset = _this$$props2.themePreset,
 	          innerClass = _this$$props2.innerClass;
-	      var InputComponent = h(Input, {
+	      var InputComponent = h(Input, helper$1([{
 	        "attrs": {
 	          "id": componentId + "-input",
 	          "showIcon": false,
@@ -22478,11 +22496,8 @@
 	          border: 0,
 	          borderBottom: '1px solid #ddd'
 	        },
-	        "class": getClassName$6(innerClass, 'input'),
-	        "on": {
-	          "change": this.handleInputChange
-	        }
-	      });
+	        "class": getClassName$6(innerClass, 'input')
+	      }, eventObject]));
 
 	      if (showClear) {
 	        return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
@@ -23279,7 +23294,7 @@
 	      }
 
 	      var performUpdate = function performUpdate() {
-	        _this3.currentValue = currentValue;
+	        _this3.currentValue = _extends({}, currentValue);
 
 	        _this3.updateQueryHandler(finalValues, props);
 
@@ -25526,7 +25541,8 @@
 	    URLParams: VueTypes.bool.def(false),
 	    sliderOptions: VueTypes.object.def({}),
 	    nestedField: types.string,
-	    index: VueTypes.string
+	    index: VueTypes.string,
+	    value: types.range
 	  },
 	  data: function data() {
 	    this.internalRangeComponent = this.$props.componentId + "__range__internal";
@@ -25572,6 +25588,8 @@
 	      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);
@@ -25580,6 +25598,8 @@
 	        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
 
 
@@ -25598,6 +25618,13 @@
 	    }
 	  },
 	  methods: {
+	    isControlled: function isControlled() {
+	      if (this.$props.value && this.$listeners) {
+	        return true;
+	      }
+
+	      return false;
+	    },
 	    setDefaultValue: function setDefaultValue(_ref) {
 	      var start = _ref.start,
 	          end = _ref.end;
@@ -25608,6 +25635,8 @@
 	            defaultEnd = _this$$props$defaultV.end;
 
 	        this.handleChange([defaultStart, defaultEnd]);
+	      } else if (this.isControlled()) {
+	        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
 	      } else {
 	        this.currentValue = [start, end];
 	      }
@@ -25657,7 +25686,16 @@
 	    },
 	    handleSlider: function handleSlider() {
 	      var sliderValues = this.$refs.slider.getValue();
-	      this.handleChange(sliderValues);
+	      var value = this.$props.value;
+
+	      if (value === undefined) {
+	        this.handleChange(sliderValues);
+	      } else {
+	        this.$emit('change', {
+	          start: sliderValues[0],
+	          end: sliderValues[1]
+	        });
+	      }
 	    },
 	    handleChange: function handleChange(currentValue) {
 	      var _this2 = this;
@@ -25750,6 +25788,7 @@
 	        start: this.range.start,
 	        end: this.range.end
 	      };
+	      this.$emit('change', value);
 	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
 	    },
 	    range: function range(newValue, oldValue) {
@@ -25771,6 +25810,11 @@
 	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
 	        this.updateQueryHandler(this.$data.currentValue);
 	      }
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$e(newVal, oldVal)) {
+	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+	      }
 	    }
 	  },
 	  render: function render() {
@@ -25844,7 +25888,11 @@
 	};
 
 	DynamicRangeSlider.parseValue = function (value) {
-	  return [value.start, value.end];
+	  if (value) {
+	    return Array.isArray(value) ? value : [value.start, value.end];
+	  }
+
+	  return [];
 	};
 
 	var mapStateToProps$e = function mapStateToProps(state, props) {
@@ -33328,7 +33376,7 @@
 	  });
 	}
 
-	var version = "1.16.0-alpha.30";
+	var version = "1.16.0-alpha.31";
 
 	var _templateObject$o, _templateObject2$b;
 
@@ -33505,6 +33553,10 @@
 	    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];