@appbaseio/reactivesearch-vue/dist/es/SingleList.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 { a as _extends } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, createTextVNode } from 'vue';
import VueTypes from 'vue-types';
import '@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 { j as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, g as getComponent, m as isEvent, 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 { I as Input } from './Input-cda7f4ad.js';
import { C as Container } from './Container-e2261542.js';
import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
import { U as UL, R as Radio } from './FormControlList-968ff972.js';
import { g as getAggsQuery } from './utils-badbb2a8.js';

var updateQuery = Actions.updateQuery,
  setQueryOptions = Actions.setQueryOptions,
  setCustomQuery = Actions.setCustomQuery,
  setDefaultQuery = Actions.setDefaultQuery;
var getQueryOptions = helper.getQueryOptions,
  checkValueChange = helper.checkValueChange,
  getClassName = helper.getClassName,
  isEqual = helper.isEqual,
  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
var SingleList = {
  name: 'SingleList',
  props: {
    beforeValueChange: types.func,
    className: VueTypes.string.def(''),
    componentId: types.stringRequired,
    compoundClause: types.compoundClause,
    customQuery: types.func,
    dataField: types.stringRequired,
    defaultValue: types.string,
    value: types.value,
    defaultQuery: types.func,
    filterLabel: types.string,
    innerClass: types.style,
    placeholder: VueTypes.string.def('Search'),
    react: types.react,
    render: types.func,
    renderItem: types.func,
    renderNoResults: VueTypes.any,
    transformData: types.func,
    selectAllLabel: types.string,
    showCount: VueTypes.bool.def(true),
    showFilter: VueTypes.bool.def(true),
    showRadio: VueTypes.bool.def(true),
    showSearch: 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'),
    nestedField: types.string,
    index: VueTypes.string,
    enableStrictSelection: VueTypes.bool.def(false),
    endpoint: types.endpointConfig
  },
  data: function data() {
    var props = this.$props;
    this.__state = {
      currentValue: '',
      modifiedOptions: [],
      searchTerm: ''
    };
    this.internalComponent = props.componentId + "__internal";
    return this.__state;
  },
  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.updateQueryHandlerOptions(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: {
    selectedValue: function selectedValue(newVal) {
      if (this.$data.currentValue !== newVal) {
        this.setValue(newVal || '');
      }
    },
    options: function options(newVal) {
      if (newVal) {
        this.modifiedOptions = newVal[this.$props.dataField] ? newVal[this.$props.dataField].buckets : [];
      }
    },
    size: function size() {
      this.updateQueryHandlerOptions(this.$props);
    },
    sortBy: function sortBy() {
      this.updateQueryHandlerOptions(this.$props);
    },
    dataField: function dataField() {
      this.updateQueryHandlerOptions(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);
      }
    },
    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 _this = this;
    var _this$$props = this.$props,
      selectAllLabel = _this$$props.selectAllLabel,
      renderItem = _this$$props.renderItem,
      renderError = _this$$props.renderError;
    var renderItemCalc = this.$slots.renderItem || renderItem;
    var renderErrorCalc = this.$slots.renderError || renderError;
    if (renderErrorCalc && this.error) {
      return isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
    }
    if (!this.hasCustomRenderer && this.modifiedOptions.length === 0 && !this.isLoading) {
      if (this.renderNoResults) {
        this.renderNoResult();
      } else {
        return null;
      }
    }
    var itemsToRender = this.$data.modifiedOptions;
    if (this.$props.transformData) {
      itemsToRender = this.$props.transformData(itemsToRender);
    }
    var filteredItemsToRender = itemsToRender.filter(function (item) {
      if (String(item.key).length) {
        if (_this.$props.showSearch && _this.$data.searchTerm) {
          return replaceDiacritics(String(item.key)).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm.toLowerCase()));
        }
        return true;
      }
      return false;
    });
    return createVNode(Container, {
      "class": this.$props.className
    }, {
      "default": function _default() {
        return [_this.$props.title && createVNode(Title, {
          "class": getClassName(_this.$props.innerClass, 'title') || ''
        }, {
          "default": function _default() {
            return [_this.$props.title];
          }
        }), _this.renderSearch(), _this.hasCustomRenderer ? _this.getComponent() : createVNode(UL, {
          "class": getClassName(_this.$props.innerClass, 'list') || ''
        }, {
          "default": function _default() {
            return [selectAllLabel ? createVNode("li", {
              "key": selectAllLabel,
              "class": "" + (_this.$data.currentValue === selectAllLabel ? 'active' : '')
            }, [createVNode(Radio, {
              "class": getClassName(_this.$props.innerClass, 'radio'),
              "id": _this.$props.componentId + "-" + selectAllLabel,
              "name": _this.$props.componentId,
              "value": selectAllLabel,
              "onClick": _this.handleClick,
              "readOnly": true,
              "type": "radio",
              "show": _this.$props.showRadio,
              "checked": _this.$data.currentValue === selectAllLabel
            }, null), createVNode("label", {
              "class": getClassName(_this.$props.innerClass, 'label') || null,
              "for": _this.$props.componentId + "-" + selectAllLabel
            }, [createVNode("span", null, [selectAllLabel, _this.$props.showCount && createVNode("span", {
              "class": getClassName(_this.$props.innerClass, 'count') || null
            }, [createTextVNode("\xA0("), _this.totalDocumentCount, createTextVNode(")")])])])]) : null, !_this.hasCustomRenderer && filteredItemsToRender.length === 0 && !_this.isLoading ? _this.renderNoResult() : filteredItemsToRender.map(function (item) {
              return createVNode("li", {
                "key": item.key,
                "class": "" + (_this.currentValue === String(item.key) ? 'active' : '')
              }, [createVNode(Radio, {
                "class": getClassName(_this.$props.innerClass, 'radio'),
                "id": _this.$props.componentId + "-" + item.key,
                "name": _this.$props.componentId,
                "value": item.key,
                "readOnly": true,
                "onClick": _this.handleClick,
                "type": "radio",
                "show": _this.$props.showRadio,
                "checked": _this.currentValue === String(item.key)
              }, null), createVNode("label", {
                "class": getClassName(_this.$props.innerClass, 'label') || null,
                "for": _this.$props.componentId + "-" + item.key
              }, [renderItemCalc ? renderItemCalc({
                label: item.key,
                count: item.doc_count,
                isChecked: _this.currentValue === String(item.key)
              }) : createVNode("span", null, [item.key, _this.$props.showCount && createVNode("span", {
                "class": getClassName(_this.$props.innerClass, 'count') || null
              }, [createTextVNode("\xA0("), item.doc_count, createTextVNode(")")])])])]);
            })];
          }
        })];
      }
    });
  },
  methods: {
    setValue: function setValue(nextValue, props) {
      var _this2 = this;
      if (props === void 0) {
        props = this.$props;
      }
      var value = nextValue;
      if (nextValue === this.$data.currentValue) {
        value = '';
      }
      var performUpdate = function performUpdate() {
        _this2.currentValue = value;
        _this2.updateQueryHandler(value, props);
        _this2.$emit('valueChange', value);
        _this2.$emit('value-change', value);
      };
      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
    },
    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
      var query = SingleList.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.singleList
      });
    },
    updateQueryHandler: function updateQueryHandler(value, props) {
      var customQuery = props.customQuery;
      var query = SingleList.defaultQuery(value, props);
      if (customQuery) {
        var customQueryCalc = customQuery(value, props);
        query = extractQueryFromCustomQuery(customQueryCalc);
        var customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
        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.singleList
      });
    },
    generateQueryOptions: function generateQueryOptions(props) {
      var queryOptions = getQueryOptions(props);
      return getAggsQuery(queryOptions, props);
    },
    updateQueryHandlerOptions: function updateQueryHandlerOptions(props) {
      var queryOptions = SingleList.generateQueryOptions(props);
      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);
      }
    },
    handleInputChange: function handleInputChange(e) {
      var value = e.target.value;
      this.searchTerm = value;
    },
    renderSearch: function renderSearch() {
      if (this.$props.showSearch) {
        return createVNode(Input, {
          "class": getClassName(this.$props.innerClass, 'input') || '',
          "onInput": this.handleInputChange,
          "value": this.$data.searchTerm,
          "placeholder": this.$props.placeholder,
          "style": {
            margin: '0 0 8px'
          },
          "themePreset": this.$props.themePreset
        }, null);
      }
      return null;
    },
    getComponent: function getComponent$1() {
      var _this$$data = this.$data,
        currentValue = _this$$data.currentValue,
        modifiedOptions = _this$$data.modifiedOptions;
      var transformData = this.$props.transformData;
      var itemsToRender = modifiedOptions;
      if (transformData) {
        itemsToRender = transformData(itemsToRender);
      }
      var data = {
        error: this.error,
        loading: this.isLoading,
        value: currentValue,
        data: itemsToRender,
        rawData: this.rawData,
        handleChange: this.handleClick
      };
      return getComponent(data, this);
    },
    handleClick: function handleClick(e) {
      var currentValue = e;
      if (isEvent(e)) {
        currentValue = e.target.value;
      }
      if (this.enableStrictSelection && currentValue === this.currentValue) {
        return false;
      }
      var value = this.$props.value;
      if (value === undefined) {
        this.setValue(currentValue);
      } else {
        this.$emit('change', currentValue);
      }
      return true;
    },
    renderNoResult: function renderNoResult() {
      var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
      return createVNode("p", {
        "class": getClassName(this.$props.innerClass, 'noResults') || null
      }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
    }
  },
  computed: {
    hasCustomRenderer: function hasCustomRenderer$1() {
      return hasCustomRenderer(this);
    }
  }
};
SingleList.generateQueryOptions = function (props) {
  var queryOptions = getQueryOptions(props);
  return getAggsQuery(queryOptions, props);
};
SingleList.defaultQuery = function (value, props) {
  return {
    query: {
      queryFormat: props.queryFormat,
      dataField: props.dataField,
      value: value,
      nestedField: props.nestedField,
      selectAllLabel: props.selectAllLabel,
      showMissing: props.showMissing
    }
  };
};
SingleList.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)(SingleList), {
  componentType: componentTypes.singleList,
  internalComponent: SingleList.hasInternalComponent()
}));
ListConnected.name = SingleList.name;
ListConnected.defaultQuery = SingleList.defaultQuery;
ListConnected.generateQueryOptions = SingleList.generateQueryOptions;
ListConnected.hasInternalComponent = SingleList.hasInternalComponent;
// Add componentType for SSR
ListConnected.componentType = componentTypes.singleList;
ListConnected.install = function (Vue) {
  Vue.component(ListConnected.name, ListConnected);
};

export default ListConnected;
export { ListConnected };