@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
271 lines (266 loc) • 10.1 kB
JavaScript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, mergeProps } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/vue-emotion';
import { t as types } from './vueTypes-5d575822.js';
import '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { j as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-3af85a74.js';
import { C as ComponentWrapper } from './ComponentWrapper-90d42a29.js';
import { P as PreferencesConsumer } from './PreferencesConsumer-a2bd59db.js';
import { T as Title } from './Title-100fe896.js';
import { C as Container } from './Container-e2261542.js';
import VueSlider from '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 { g as getComponents, N as NoSSR, S as Slider } from './ssr-40133887.js';
var updateQuery = Actions.updateQuery,
setQueryOptions = Actions.setQueryOptions,
setCustomQuery = Actions.setCustomQuery;
var checkValueChange = helper.checkValueChange,
getClassName = helper.getClassName,
getOptionsFromQuery = helper.getOptionsFromQuery,
isEqual = helper.isEqual;
var RangeSlider = {
name: 'RangeSlider',
components: getComponents(),
inject: {
theme: {
from: 'theme_reactivesearch'
}
},
data: function data() {
var state = {
currentValue: this.$props.range ? [this.$props.range.start, this.$props.range.end] : [],
stats: []
};
return state;
},
props: {
beforeValueChange: types.func,
className: VueTypes.string.def(''),
range: VueTypes.shape({
start: VueTypes.integer.def(0),
end: VueTypes.integer.def(10)
}),
rangeLabels: types.rangeLabels,
componentId: types.stringRequired,
compoundClause: types.compoundClause,
customQuery: types.func,
data: types.data,
dataField: types.stringRequired,
defaultValue: types.range,
value: types.range,
filterLabel: types.string,
innerClass: types.style,
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,
index: VueTypes.string,
endpoint: types.endpointConfig
},
methods: {
handleSliderChange: function handleSliderChange(values) {
var value = this.$props.value;
if (value === undefined) {
this.handleChange(values);
} else {
this.$emit('change', {
start: values[0],
end: values[1]
});
}
},
handleSlider: function handleSlider() {
var sliderValues = this.$refs.slider.getValue();
this.handleSliderChange(sliderValues);
},
handleChange: function handleChange(currentValue, props) {
var _this = this;
if (props === void 0) {
props = this.$props;
}
var performUpdate = function performUpdate() {
_this.currentValue = currentValue;
_this.updateQueryHandler([currentValue[0], currentValue[1]], props);
_this.$emit('valueChange', {
start: currentValue[0],
end: currentValue[1]
});
_this.$emit('value-change', {
start: currentValue[0],
end: currentValue[1]
});
};
checkValueChange(props.componentId, {
start: currentValue[0],
end: currentValue[1]
}, props.beforeValueChange, performUpdate);
},
updateQueryHandler: function updateQueryHandler(value, props) {
var customQuery = props.customQuery;
var query = RangeSlider.defaultQuery(value, props);
if (customQuery) {
var _ref = customQuery(value, props) || {};
query = _ref.query;
var customQueryOptions = getOptionsFromQuery(customQuery(value, props));
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
this.setQueryOptions(props.componentId, customQueryOptions, false);
}
var showFilter = props.showFilter,
_props$range = props.range,
start = _props$range.start,
end = _props$range.end;
var currentStart = value[0],
currentEnd = value[1];
// check if the slider is at its initial position
var isInitialValue = currentStart === start && currentEnd === end;
this.updateQuery({
componentId: props.componentId,
query: query,
value: value,
label: props.filterLabel,
showFilter: showFilter && !isInitialValue,
URLParams: props.URLParams,
componentType: componentTypes.rangeSlider
});
}
},
watch: {
defaultValue: function defaultValue(newVal) {
this.handleChange(RangeSlider.parseValue(newVal, this.$props));
},
value: function value(newVal, oldVal) {
if (!isEqual(newVal, oldVal)) {
this.handleChange(RangeSlider.parseValue(newVal, this.$props));
}
},
selectedValue: function selectedValue(newVal) {
if (!isEqual(this.$data.currentValue, newVal)) {
this.handleChange(RangeSlider.parseValue(newVal, this.$props));
this.$emit('change', newVal);
}
},
customQuery: function customQuery(newVal, oldVal) {
if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
this.updateQueryHandler(this.$data.currentValue, this.$props);
}
}
},
created: function created() {
if (!this.$props.range) {
console.error('%crange is not defined. Read more about this at https://opensource.appbase.io/reactive-manual/vue/range-components/rangeslider.html#props', 'font-size: 12.5px;');
}
// Set custom query in store
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
var _this$$props = this.$props,
value = _this$$props.value,
defaultValue = _this$$props.defaultValue;
var selectedValue = this.selectedValue;
if (this.$props.range) {
if (Array.isArray(selectedValue)) {
this.handleChange(selectedValue);
} else if (selectedValue) {
this.handleChange(RangeSlider.parseValue(selectedValue, this.$props));
} else if (value) {
this.handleChange(RangeSlider.parseValue(value, this.$props));
} else if (defaultValue) {
this.handleChange(RangeSlider.parseValue(defaultValue, this.$props));
}
}
},
render: function render() {
var _this2 = this;
return createVNode(Container, {
"class": this.$props.className
}, {
"default": function _default() {
return [_this2.$props.title && createVNode(Title, {
"class": getClassName(_this2.$props.innerClass, 'title')
}, {
"default": function _default() {
return [_this2.$props.title];
}
}), _this2.$props.range ? createVNode(NoSSR, null, {
"default": function _default() {
return [createVNode(Slider, {
"class": getClassName(_this2.$props.innerClass, 'slider')
}, {
"default": function _default() {
return [createVNode(VueSlider, mergeProps({
"ref": "slider",
"modelValue": _this2.currentValue,
"min": _this2.$props.range.start,
"max": _this2.$props.range.end,
"dotSize": 20,
"height": 4,
"enable-cross": false,
"onDrag-end": _this2.handleSlider,
"tooltip": "always"
}, _this2.$props.sliderOptions), null), _this2.$props.rangeLabels && createVNode("div", {
"class": "label-container"
}, [createVNode("label", {
"class": getClassName(_this2.$props.innerClass, 'label') || 'range-label-left'
}, [_this2.$props.rangeLabels.start]), createVNode("label", {
"class": getClassName(_this2.$props.innerClass, 'label') || 'range-label-right'
}, [_this2.$props.rangeLabels.end])])];
}
})];
}
}) : null];
}
});
}
};
RangeSlider.defaultQuery = function (value, props) {
return {
query: {
queryFormat: props.queryFormat,
dataField: props.dataField,
value: value,
showMissing: props.showMissing
}
};
};
RangeSlider.parseValue = function (value, props) {
if (value) {
return Array.isArray(value) ? value : [value.start, value.end];
}
if (props.range) {
return [props.range.start, props.range.end];
}
return [];
};
var mapStateToProps = function mapStateToProps(state, props) {
return {
options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
: [],
selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
componentProps: state.props[props.componentId]
};
};
var mapDispatchtoProps = {
updateQuery: updateQuery,
setQueryOptions: setQueryOptions,
setCustomQuery: setCustomQuery
};
var RangeConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(RangeSlider), {
componentType: componentTypes.rangeSlider
}));
RangeConnected.name = RangeSlider.name;
RangeConnected.defaultQuery = RangeSlider.defaultQuery;
RangeConnected.parseValue = RangeSlider.parseValue;
RangeConnected.hasInternalComponent = RangeSlider.hasInternalComponent;
RangeConnected.install = function (Vue) {
Vue.component(RangeConnected.name, RangeConnected);
};
// Add componentType for SSR
RangeConnected.componentType = componentTypes.rangeSlider;
export default RangeConnected;
export { RangeConnected };