@appbaseio/reactivesearch-vue/dist/es/MultiDropdownList.js

A Vue UI components library for building search experiences

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, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } 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, n as parseValueArray, 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 isEqual = helper.isEqual,
  getQueryOptions = helper.getQueryOptions,
  checkValueChange = helper.checkValueChange,
  checkPropChange = helper.checkPropChange,
  getClassName = helper.getClassName,
  getCompositeAggsQuery = helper.getCompositeAggsQuery,
  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
var MultiDropdownList = {
  name: 'MultiDropdownList',
  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,
    defaultValue: types.stringArray,
    value: types.stringArray,
    defaultQuery: types.func,
    filterLabel: types.string,
    innerClass: types.style,
    placeholder: VueTypes.string.def('Select values'),
    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
    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, true);
    } else if (this.$props.value) {
      this.setValue(this.$props.value, true);
    } else if (this.$props.defaultValue) {
      this.setValue(this.$props.defaultValue, true);
    }
  },
  watch: {
    selectedValue: function selectedValue(newVal) {
      var _this = this;
      var selectedValue = Object.keys(this.$data.currentValue);
      if (this.$props.selectAllLabel) {
        selectedValue = selectedValue.filter(function (val) {
          return val !== _this.$props.selectAllLabel;
        });
        if (this.$data.currentValue[this.$props.selectAllLabel]) {
          selectedValue = [this.$props.selectAllLabel];
        }
      }
      if (!isEqual(selectedValue, newVal)) {
        this.setValue(newVal || [], true);
      }
    },
    options: function options(newVal, oldVal) {
      var _this2 = this;
      if (newVal) {
        checkPropChange(oldVal, newVal, function () {
          var _this2$$props = _this2.$props,
            showLoadMore = _this2$$props.showLoadMore,
            dataField = _this2$$props.dataField;
          var modifiedOptions = _this2.$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;
            _this2.after = {
              after: after
            };
            _this2.isLastBucket = isLastBucket;
            _this2.modifiedOptions = nextOptions;
          } else {
            _this2.modifiedOptions = newVal[_this2.$props.dataField] ? newVal[_this2.$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, true);
    },
    value: function value(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.setValue(newVal, true);
      }
    },
    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 _this3 = this;
    var _this$$props = this.$props,
      showLoadMore = _this$$props.showLoadMore,
      loadMoreLabel = _this$$props.loadMoreLabel,
      renderItem = _this$$props.renderItem,
      renderError = _this$$props.renderError,
      renderLabel = _this$$props.renderLabel;
    var renderItemCalc = this.$slots.renderItem || renderItem;
    var renderErrorCalc = this.$slots.renderError || renderError;
    var renderLabelCalc = this.$slots.renderLabel || renderLabel;
    var isLastBucket = this.$data.isLastBucket;
    var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
    var selectAll = [];
    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 [_this3.$props.title && createVNode(Title, {
          "class": getClassName(_this3.$props.innerClass, 'title') || ''
        }, {
          "default": function _default() {
            return [_this3.$props.title];
          }
        }), createVNode(Dropdown, {
          "innerClass": _this3.$props.innerClass,
          "items": [].concat(selectAll, _this3.$data.modifiedOptions.filter(function (item) {
            return String(item.key).trim().length;
          }).map(function (item) {
            return _extends({}, item, {
              key: String(item.key)
            });
          })),
          "hasCustomRenderer": _this3.hasCustomRenderer,
          "customRenderer": _this3.getComponent,
          "handleChange": _this3.handleChange,
          "selectedItem": _this3.$data.currentValue,
          "placeholder": _this3.$props.placeholder,
          "labelField": "key",
          "multi": true,
          "showCount": _this3.$props.showCount,
          "themePreset": _this3.themePreset,
          "renderItem": renderItemCalc,
          "renderNoResults": _this3.$slots.renderNoResults || _this3.$props.renderNoResults,
          "showSearch": _this3.$props.showSearch,
          "showClear": _this3.$props.showClear,
          "searchPlaceholder": _this3.$props.searchPlaceholder,
          "transformData": _this3.$props.transformData,
          "footer": showLoadMore && !isLastBucket && createVNode("div", {
            "css": loadMoreContainer
          }, [createVNode(Button, {
            "onClick": _this3.handleLoadMore
          }, _isSlot(loadMoreLabel) ? loadMoreLabel : {
            "default": function _default() {
              return [loadMoreLabel];
            }
          })]),
          "customLabelRenderer": renderLabelCalc
        }, null)];
      }
    });
  },
  methods: {
    handleChange: function handleChange(item) {
      var value = this.$props.value;
      if (value === undefined) {
        this.setValue(item);
      } else {
        var values = parseValueArray(this.currentValue, item);
        this.$emit('change', values);
      }
    },
    setValue: function setValue(value, isDefaultValue, props) {
      var _this4 = this;
      if (isDefaultValue === void 0) {
        isDefaultValue = false;
      }
      if (props === void 0) {
        props = this.$props;
      }
      var selectAllLabel = this.$props.selectAllLabel;
      var currentValue = this.$data.currentValue;
      var finalValues = null;
      if (selectAllLabel && value.includes(selectAllLabel)) {
        if (currentValue[selectAllLabel]) {
          currentValue = {};
          finalValues = [];
        } else {
          this.$data.modifiedOptions.forEach(function (item) {
            currentValue[item.key] = true;
          });
          currentValue[selectAllLabel] = true;
          finalValues = [selectAllLabel];
        }
      } else if (isDefaultValue) {
        finalValues = value;
        currentValue = {};
        if (Array.isArray(value)) {
          value.forEach(function (item) {
            currentValue[item] = true;
          });
        }
        if (selectAllLabel && selectAllLabel in currentValue) {
          var _currentValue = currentValue,
            del = _currentValue[selectAllLabel],
            obj = _objectWithoutPropertiesLoose(_currentValue, [selectAllLabel].map(_toPropertyKey));
          currentValue = _extends({}, obj);
        }
      } else {
        if (currentValue[value]) {
          var _currentValue2 = currentValue,
            _del = _currentValue2[value],
            rest = _objectWithoutPropertiesLoose(_currentValue2, [value].map(_toPropertyKey));
          currentValue = _extends({}, rest);
        } else {
          currentValue[value] = true;
        }
        if (selectAllLabel && selectAllLabel in currentValue) {
          var _currentValue3 = currentValue,
            _del2 = _currentValue3[selectAllLabel],
            _obj = _objectWithoutPropertiesLoose(_currentValue3, [selectAllLabel].map(_toPropertyKey));
          currentValue = _extends({}, _obj);
        }
        finalValues = Object.keys(currentValue);
      }
      var performUpdate = function performUpdate() {
        _this4.currentValue = _extends({}, currentValue);
        _this4.updateQueryHandler(finalValues, props);
        _this4.$emit('valueChange', finalValues);
        _this4.$emit('value-change', finalValues);
      };
      checkValueChange(props.componentId, finalValues, props.beforeValueChange, performUpdate);
    },
    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
      var query = MultiDropdownList.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.multiDropdownList
      });
    },
    updateQueryHandler: function updateQueryHandler(value, props) {
      var customQuery = props.customQuery;
      var query = MultiDropdownList.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.multiDropdownList
      });
    },
    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 = MultiDropdownList.generateQueryOptions(props, addAfterKey ? this.$data.after : {});
      if (props.defaultQuery) {
        var value = Object.keys(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);
    }
  }
};
MultiDropdownList.defaultQuery = function (value, props) {
  return {
    query: {
      queryFormat: props.queryFormat,
      dataField: props.dataField,
      value: value,
      nestedField: props.nestedField,
      selectAllLabel: props.selectAllLabel,
      showMissing: props.showMissing
    }
  };
};
MultiDropdownList.generateQueryOptions = function (props, after) {
  var queryOptions = getQueryOptions(props);
  return props.showLoadMore ? getCompositeAggsQuery({
    query: queryOptions,
    props: props,
    after: after
  }) : getAggsQuery(queryOptions, props);
};
MultiDropdownList.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 || null,
    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)(MultiDropdownList), {
  componentType: componentTypes.multiDropdownList,
  internalComponent: MultiDropdownList.hasInternalComponent()
}));
ListConnected.name = MultiDropdownList.name;

// Add componentType for SSR
ListConnected.componentType = componentTypes.multiDropdownList;
ListConnected.defaultQuery = MultiDropdownList.defaultQuery;
ListConnected.generateQueryOptions = MultiDropdownList.generateQueryOptions;
ListConnected.hasInternalComponent = MultiDropdownList.hasInternalComponent;
ListConnected.install = function (Vue) {
  Vue.component(ListConnected.name, ListConnected);
};

export default ListConnected;
export { ListConnected };