@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
337 lines (332 loc) • 11.6 kB
JavaScript
import { helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import _transformOn from '@vue/babel-helper-vue-transform-on';
import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, mergeProps, createTextVNode } from 'vue';
import VueTypes from 'vue-types';
import { styled } from '@appbaseio/vue-emotion';
import '@emotion/css';
import 'polished';
import { t as types } from './vueTypes-5d575822.js';
import '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { c as connect } from './index-3af85a74.js';
import { C as ComponentWrapper } from './ComponentWrapper-90d42a29.js';
import { P as PreferencesConsumer } from './PreferencesConsumer-a2bd59db.js';
import './Title-100fe896.js';
import { F as Flex } from './Flex-5d11362e.js';
import { I as Input } from './Input-cda7f4ad.js';
import { C as Container } from './Container-e2261542.js';
import 'vue-slider-component/dist-css/vue-slider-component.umd.min.js';
import 'vue-slider-component/dist-css/vue-slider-component.css';
import 'vue-slider-component/theme/default.css';
import './ssr-40133887.js';
import { RangeConnected as RangeConnected$1 } from './RangeSlider.js';
var _templateObject;
var alert = function alert(_ref) {
var theme = _ref.theme;
return "\n\tcolor: " + theme.colors.alertColor + ";\n";
};
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;
var RangeInput = {
name: 'RangeInput',
components: {
RangeSlider: RangeConnected$1
},
inject: {
theme: {
from: 'theme_reactivesearch'
}
},
data: function data() {
var state = {
currentValue: {
start: this.$props.range ? this.$props.range.start : 0,
end: this.$props.range ? this.$props.range.end : 10
},
isStartValid: true,
isEndValid: true
};
return state;
},
props: {
className: {
types: types.string,
"default": ''
},
defaultValue: types.range,
validateRange: types.func,
value: types.range,
dataField: types.stringRequired,
innerClass: types.style,
range: {
types: types.range,
"default": function _default() {
return {
start: 0,
end: 10
};
}
},
rangeLabels: types.rangeLabels,
stepValue: types.number,
componentStyle: types.style,
componentId: types.stringRequired,
compoundClause: types.compoundClause,
includeNullValues: VueTypes.bool,
beforeValueChange: types.func,
customQuery: types.func,
data: types.data,
filterLabel: types.string,
react: types.react,
showFilter: VueTypes.bool.def(true),
showCheckbox: VueTypes.bool.def(true),
title: types.title,
URLParams: VueTypes.bool.def(false),
sliderOptions: VueTypes.object.def({}),
nestedField: types.string,
endpoint: types.endpointConfig
},
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.$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':
if (!value) {
currentValue = {
start: this.$props.range ? this.$props.range.start : 0,
end: this.$props.range ? this.$props.range.end : 10
};
}
this.currentValue = currentValue;
this.$emit('change', this.currentValue);
break;
case 'value-change':
this.$emit('valueChange', this.currentValue);
this.$emit('value-change', this.currentValue);
break;
default:
this.currentValue = _extends({}, currentValue);
break;
}
}
},
handleOnChange: function handleOnChange(value) {
this.handleChange(value || this.$props.range, 'change');
},
handleValueChange: function handleValueChange(value) {
this.handleChange(value, 'value-change');
},
handleInputChange: function handleInputChange(e) {
var _e$target = e.target,
name = _e$target.name,
value = _e$target.value;
if (Number.isNaN(value)) {
if (name === 'start') {
this.isStartValid = false;
} else {
this.isEndValid = false;
}
} else if (name === 'start' && !this.isStartValid) {
this.isStartValid = true;
} else if (name === 'end' && !this.isEndValid) {
this.isEndValid = true;
}
if (this.isStartValid && this.isEndValid) {
if (name === 'start') {
this.handleChange({
start: Number(value),
end: this.currentValue.end
}, 'change');
} else {
this.handleChange({
start: this.currentValue.start,
end: Number(value)
}, 'change');
}
}
}
},
watch: {
defaultValue: function defaultValue(newVal, oldVal) {
if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
this.handleChange(newVal);
}
},
value: function value(newVal, oldVal) {
if (!isEqual(newVal, oldVal)) {
if (this.isControlled()) {
this.handleChange(newVal, 'change');
}
}
}
},
created: function created() {
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 _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 createVNode(Container, {
"style": componentStyle,
"class": className
}, {
"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")];
}
})];
}
})];
}
})];
}
});
}
};
var mapStateToProps = function mapStateToProps(state) {
return {
themePreset: state.config.themePreset
};
};
var RangeConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, {})(RangeInput), {
componentType: componentTypes.rangeInput
}));
RangeConnected.name = RangeInput.name;
RangeConnected.install = function (Vue) {
Vue.component(RangeConnected.name, RangeConnected);
};
// Add componentType for SSR
RangeConnected.componentType = componentTypes.rangeInput;
export default RangeConnected;
export { RangeConnected };