@appbaseio/reactivesearch-vue/dist/es/SingleRange.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 _transformOn from '@vue/babel-helper-vue-transform-on';
import './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, mergeProps, isVNode } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/vue-emotion';
import 'polished';
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 { U as UL, R as Radio } from './FormControlList-968ff972.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;
var isEqual = helper.isEqual,
  checkValueChange = helper.checkValueChange,
  getClassName = helper.getClassName,
  getOptionsFromQuery = helper.getOptionsFromQuery;
var SingleRange = {
  name: 'SingleRange',
  data: function data() {
    this.__state = {
      currentValue: null
    };
    this.type = 'range';
    return this.__state;
  },
  props: {
    beforeValueChange: types.func,
    className: VueTypes.string.def(''),
    componentId: types.stringRequired,
    compoundClause: types.compoundClause,
    customQuery: types.func,
    data: types.data,
    dataField: types.stringRequired,
    defaultValue: types.string,
    value: types.value,
    filterLabel: types.string,
    innerClass: types.style,
    react: types.react,
    showFilter: VueTypes.bool.def(true),
    showRadio: VueTypes.bool.def(true),
    title: types.title,
    URLParams: VueTypes.bool.def(false),
    nestedField: types.string,
    index: VueTypes.string,
    endpoint: types.endpointConfig
  },
  created: function created() {
    // Set custom query in store
    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
    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: {
    dataField: function dataField() {
      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 (!isEqual(this.$data.currentValue, newVal)) {
        this.setValue(newVal);
      }
    },
    customQuery: function customQuery(newVal, oldVal) {
      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
        this.updateQueryHandler(this.$data.currentValue, this.$props);
      }
    }
  },
  render: function render() {
    var _slot;
    var _this = this;
    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];
          }
        }), createVNode(UL, {
          "class": getClassName(_this.$props.innerClass, 'list')
        }, _isSlot(_slot = _this.$props.data.map(function (item) {
          var selected = !!_this.$data.currentValue && _this.$data.currentValue.label === item.label;
          return createVNode("li", {
            "key": item.label,
            "class": "" + (selected ? 'active' : '')
          }, [createVNode(Radio, mergeProps(_transformOn({
            change: _this.handleChange
          }), {
            "class": getClassName(_this.$props.innerClass, 'radio'),
            "id": _this.$props.componentId + "-" + item.label,
            "name": _this.$props.componentId,
            "value": item.label,
            "type": "radio",
            "checked": selected,
            "show": _this.$props.showRadio
          }), null), createVNode("label", {
            "class": getClassName(_this.$props.innerClass, 'label'),
            "for": _this.$props.componentId + "-" + item.label
          }, [item.label])]);
        })) ? _slot : {
          "default": function _default() {
            return [_slot];
          }
        })];
      }
    });
  },
  methods: {
    setValue: function setValue(value, props) {
      var _this2 = this;
      if (props === void 0) {
        props = this.$props;
      }
      var currentValue = typeof value === 'string' ? SingleRange.parseValue(value, props) : value;
      var performUpdate = function performUpdate() {
        _this2.currentValue = currentValue;
        _this2.updateQueryHandler(currentValue, props);
        _this2.$emit('valueChange', currentValue);
        _this2.$emit('value-change', currentValue);
      };
      checkValueChange(props.componentId, currentValue, props.beforeValueChange, performUpdate);
    },
    updateQueryHandler: function updateQueryHandler(value, props) {
      var customQuery = props.customQuery;
      var query = SingleRange.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);
      }
      this.updateQuery({
        componentId: props.componentId,
        query: query,
        value: value,
        label: props.filterLabel,
        showFilter: props.showFilter,
        URLParams: props.URLParams,
        componentType: componentTypes.singleRange
      });
    },
    handleChange: function handleChange(e) {
      var value = this.$props.value;
      if (value === undefined) {
        this.setValue(e.target.value);
      } else {
        this.$emit('change', e.target.value);
      }
    }
  }
};
SingleRange.parseValue = function (value, props) {
  return props.data.find(function (item) {
    return item.label === value;
  }) || null;
};
SingleRange.defaultQuery = function (value, props) {
  return {
    query: {
      queryFormat: props.queryFormat,
      dataField: props.dataField,
      value: value,
      showMissing: props.showMissing
    }
  };
};
var mapStateToProps = function mapStateToProps(state, props) {
  return {
    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)(SingleRange), {
  componentType: componentTypes.singleRange
}));
RangeConnected.name = SingleRange.name;
RangeConnected.defaultQuery = SingleRange.defaultQuery;
RangeConnected.parseValue = SingleRange.parseValue;
RangeConnected.hasInternalComponent = SingleRange.hasInternalComponent;
RangeConnected.install = function (Vue) {
  Vue.component(RangeConnected.name, RangeConnected);
};
// Add componentType for SSR
RangeConnected.componentType = componentTypes.singleRange;

export default RangeConnected;
export { RangeConnected };