@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
424 lines (420 loc) • 16.8 kB
JavaScript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import '@vue/babel-helper-vue-transform-on';
import { a as _extends } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, isVNode } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/reactivecore/lib/utils/helper';
import '@appbaseio/vue-emotion';
import '@emotion/css';
import 'polished';
import { l as loadMoreContainer, B as Button } from './Button-8178e39a.js';
import { t as types } from './vueTypes-5d575822.js';
import '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { j as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, g as getComponent, h as hasCustomRenderer, 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 './CancelSvg-5b82ad4f.js';
import './Input-cda7f4ad.js';
import 'compute-scroll-into-view';
import { C as Container } from './Container-e2261542.js';
import '@appbaseio/reactivecore/lib/utils/suggestions';
import { g as getAggsQuery } from './utils-badbb2a8.js';
import { D as Dropdown } from './DropDown-0a5b7036.js';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var updateQuery = Actions.updateQuery,
setQueryOptions = Actions.setQueryOptions,
setCustomQuery = Actions.setCustomQuery,
setDefaultQuery = Actions.setDefaultQuery;
var getQueryOptions = helper.getQueryOptions,
checkValueChange = helper.checkValueChange,
checkPropChange = helper.checkPropChange,
getClassName = helper.getClassName,
isEqual = helper.isEqual,
getCompositeAggsQuery = helper.getCompositeAggsQuery,
extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
var SingleDropdownList = {
name: 'SingleDropdownList',
data: function data() {
var props = this.$props;
this.__state = {
currentValue: '',
modifiedOptions: [],
after: {},
// for composite aggs
isLastBucket: false
};
this.internalComponent = props.componentId + "__internal";
return this.__state;
},
props: {
beforeValueChange: types.func,
className: VueTypes.string.def(''),
componentId: types.stringRequired,
compoundClause: types.compoundClause,
customQuery: types.func,
dataField: types.stringRequired,
defaultQuery: types.func,
defaultValue: types.string,
value: types.value,
filterLabel: types.string,
innerClass: types.style,
placeholder: VueTypes.string.def('Select a value'),
react: types.react,
renderLabel: types.func,
render: types.func,
renderItem: types.func,
renderError: types.title,
renderNoResults: VueTypes.any,
transformData: types.func,
selectAllLabel: types.string,
showCount: VueTypes.bool.def(true),
showFilter: VueTypes.bool.def(true),
size: VueTypes.number,
sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
title: types.title,
URLParams: VueTypes.bool.def(false),
showMissing: VueTypes.bool.def(false),
missingLabel: VueTypes.string.def('N/A'),
showSearch: VueTypes.bool.def(false),
showClear: VueTypes.bool.def(false),
showLoadMore: VueTypes.bool.def(false),
loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.nullable]).def('Load More'),
nestedField: types.string,
index: VueTypes.string,
searchPlaceholder: VueTypes.string.def('Type here to search...'),
endpoint: types.endpointConfig
},
created: function created() {
var props = this.$props;
this.modifiedOptions = this.options && this.options[props.dataField] ? this.options[props.dataField].buckets : [];
// Set custom and default queries in store
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
this.updateQueryOptions(this.$props);
if (this.selectedValue) {
this.setValue(this.selectedValue);
} else if (this.$props.value) {
this.setValue(this.$props.value);
} else if (this.$props.defaultValue) {
this.setValue(this.$props.defaultValue);
}
},
watch: {
options: function options(newVal, oldVal) {
var _this = this;
if (newVal) {
checkPropChange(oldVal, newVal, function () {
var _this$$props = _this.$props,
showLoadMore = _this$$props.showLoadMore,
dataField = _this$$props.dataField;
var modifiedOptions = _this.$data.modifiedOptions;
if (showLoadMore) {
// append options with showLoadMore
var buckets = newVal[dataField].buckets;
var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
return {
key: bucket.key[dataField],
doc_count: bucket.doc_count
};
}));
var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
var isLastBucket = !buckets.length;
_this.after = {
after: after
};
_this.isLastBucket = isLastBucket;
_this.modifiedOptions = nextOptions;
} else {
_this.modifiedOptions = newVal[_this.$props.dataField] ? newVal[_this.$props.dataField].buckets : [];
}
});
}
},
size: function size() {
this.updateQueryOptions(this.$props);
},
sortBy: function sortBy() {
this.updateQueryOptions(this.$props);
},
dataField: function dataField() {
this.updateQueryOptions(this.$props);
this.updateQueryHandler(this.$data.currentValue, this.$props);
},
defaultValue: function defaultValue(newVal) {
this.setValue(newVal);
},
value: function value(newVal, oldVal) {
if (!isEqual(newVal, oldVal)) {
this.setValue(newVal);
}
},
selectedValue: function selectedValue(newVal) {
if (this.$data.currentValue !== newVal) {
this.setValue(newVal || '');
}
},
defaultQuery: function defaultQuery(newVal, oldVal) {
if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
this.updateDefaultQueryHandler(this.$data.currentValue, this.$props);
}
},
customQuery: function customQuery(newVal, oldVal) {
if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
this.updateQueryHandler(this.componentId, this.$data.currentValue, this.$props);
}
}
},
render: function render() {
var _this2 = this;
var _this$$props2 = this.$props,
showLoadMore = _this$$props2.showLoadMore,
loadMoreLabel = _this$$props2.loadMoreLabel,
renderItem = _this$$props2.renderItem,
renderError = _this$$props2.renderError,
renderLabel = _this$$props2.renderLabel;
var isLastBucket = this.$data.isLastBucket;
var selectAll = [];
var renderItemCalc = this.$slots.renderItem || renderItem;
var renderErrorCalc = this.$slots.renderError || renderError;
var renderLabelCalc = this.$slots.renderLabel || renderLabel;
var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
if (renderErrorCalc && this.error) {
return isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
}
if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
if (renderNoResults && isFunction(renderNoResults)) {
return createVNode("div", null, [renderNoResults()]);
}
if (renderNoResults && !isFunction(renderNoResults)) {
return renderNoResults;
}
return null;
}
if (this.$props.selectAllLabel) {
selectAll = [{
key: this.$props.selectAllLabel,
doc_count: this.totalDocumentCount
}];
}
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];
}
}), createVNode(Dropdown, {
"innerClass": _this2.$props.innerClass,
"items": [].concat(selectAll, _this2.$data.modifiedOptions.filter(function (item) {
return String(item.key).trim().length;
}).map(function (item) {
return _extends({}, item, {
key: String(item.key)
});
})),
"handleChange": _this2.handleChange,
"selectedItem": _this2.$data.currentValue,
"placeholder": _this2.$props.placeholder,
"labelField": "key",
"showCount": _this2.$props.showCount,
"hasCustomRenderer": _this2.hasCustomRenderer,
"customRenderer": _this2.getComponent,
"renderItem": renderItemCalc,
"renderNoResults": _this2.$slots.renderNoResults || _this2.$props.renderNoResults,
"themePreset": _this2.themePreset,
"showSearch": _this2.$props.showSearch,
"showClear": _this2.$props.showClear,
"searchPlaceholder": _this2.$props.searchPlaceholder,
"transformData": _this2.$props.transformData,
"footer": showLoadMore && !isLastBucket && createVNode("div", {
"css": loadMoreContainer
}, [createVNode(Button, {
"onClick": _this2.handleLoadMore
}, _isSlot(loadMoreLabel) ? loadMoreLabel : {
"default": function _default() {
return [loadMoreLabel];
}
})]),
"customLabelRenderer": renderLabelCalc
}, null)];
}
});
},
methods: {
setValue: function setValue(value, props) {
var _this3 = this;
if (props === void 0) {
props = this.$props;
}
var performUpdate = function performUpdate() {
_this3.currentValue = value;
_this3.updateQueryHandler(value, props);
_this3.$emit('valueChange', value);
_this3.$emit('value-change', value);
};
checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
},
handleChange: function handleChange(item) {
var value = this.$props.value;
if (value === undefined) {
this.setValue(item);
} else {
this.$emit('change', item);
}
},
updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
var query = SingleDropdownList.defaultQuery(value, props);
if (this.defaultQuery) {
var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
if (defaultQueryObj) {
query = defaultQueryObj;
}
// Update calculated default query in store
updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
var defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet);
this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
}
this.updateQuery({
componentId: this.internalComponent,
query: query,
value: value,
componentType: componentTypes.singleDropdownList
});
},
updateQueryHandler: function updateQueryHandler(value, props) {
var customQuery = props.customQuery;
var query = SingleDropdownList.defaultQuery(value, props);
if (customQuery) {
var customQueryCalc = customQuery(value, props);
query = extractQueryFromCustomQuery(customQueryCalc);
updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
var customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
this.setQueryOptions(props.componentId, customQueryOptions, false);
}
this.updateQuery({
componentId: props.componentId,
query: query,
value: value,
label: props.filterLabel,
showFilter: props.showFilter,
URLParams: props.URLParams,
componentType: componentTypes.singleDropdownList
});
},
generateQueryOptions: function generateQueryOptions(props, after) {
var queryOptions = getQueryOptions(props);
return props.showLoadMore ? getCompositeAggsQuery({
query: queryOptions,
props: props,
after: after
}) : getAggsQuery(queryOptions, props);
},
updateQueryOptions: function updateQueryOptions(props, addAfterKey) {
if (addAfterKey === void 0) {
addAfterKey = false;
}
// when using composite aggs flush the current options for a fresh query
if (props.showLoadMore && !addAfterKey) {
this.modifiedOptions = [];
} // for a new query due to other changes don't append after to get fresh results
var queryOptions = SingleDropdownList.generateQueryOptions(props, addAfterKey ? this.$data.after : {});
if (props.defaultQuery) {
var value = this.$data.currentValue;
var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, defaultQueryOptions));
} else {
this.setQueryOptions(this.internalComponent, queryOptions);
}
},
handleLoadMore: function handleLoadMore() {
this.updateQueryOptions(this.$props, true);
},
getComponent: function getComponent$1(items, downshiftProps) {
if (downshiftProps === void 0) {
downshiftProps = {};
}
var currentValue = this.$data.currentValue;
var data = {
error: this.error,
loading: this.isLoading,
value: currentValue,
data: items || [],
rawData: this.rawData,
handleChange: this.handleChange,
downshiftProps: downshiftProps
};
return getComponent(data, this);
}
},
computed: {
hasCustomRenderer: function hasCustomRenderer$1() {
return hasCustomRenderer(this);
}
}
};
SingleDropdownList.defaultQuery = function (value, props) {
return {
query: {
queryFormat: props.queryFormat,
dataField: props.dataField,
value: value,
nestedField: props.nestedField,
selectAllLabel: props.selectAllLabel,
showMissing: props.showMissing
}
};
};
SingleDropdownList.generateQueryOptions = function (props, after) {
var queryOptions = getQueryOptions(props);
return props.showLoadMore ? getCompositeAggsQuery({
query: queryOptions,
props: props,
after: after
}) : getAggsQuery(queryOptions, props);
};
SingleDropdownList.hasInternalComponent = function () {
return true;
};
var mapStateToProps = function mapStateToProps(state, props) {
return {
options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
rawData: state.rawData[props.componentId],
isLoading: state.isLoading[props.componentId],
selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || '',
totalDocumentCount: state.hits[props.componentId] && state.hits[props.componentId].total,
themePreset: state.config.themePreset,
error: state.error[props.componentId],
componentProps: state.props[props.componentId]
};
};
var mapDispatchtoProps = {
setQueryOptions: setQueryOptions,
updateQuery: updateQuery,
setCustomQuery: setCustomQuery,
setDefaultQuery: setDefaultQuery
};
var ListConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(SingleDropdownList), {
componentType: componentTypes.singleDropdownList,
internalComponent: SingleDropdownList.hasInternalComponent()
}));
ListConnected.defaultQuery = SingleDropdownList.defaultQuery;
ListConnected.generateQueryOptions = SingleDropdownList.generateQueryOptions;
ListConnected.hasInternalComponent = SingleDropdownList.hasInternalComponent;
ListConnected.name = SingleDropdownList.name;
// Add componentType for SSR
ListConnected.componentType = componentTypes.singleDropdownList;
ListConnected.install = function (Vue) {
Vue.component(ListConnected.name, ListConnected);
};
export default ListConnected;
export { ListConnected };