@appbaseio/reactivesearch-vue/dist/cjs/SelectedFilters.js

A Vue UI components library for building search experiences

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var reactivecore = require('@appbaseio/reactivecore');
require('@appbaseio/reactivecore/lib/utils/constants');
var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
require('@appbaseio/reactivecore/lib/utils/helper');
require('@appbaseio/vue-emotion');
require('@emotion/css');
require('polished');
var Button = require('./Button-7aee17e3.js');
var vueTypes = require('./vueTypes-adf43075.js');
require('redux');
var index = require('./index-7ca9570e.js');
var Title = require('./Title-d513ac26.js');
var Container = require('./Container-1c05785a.js');

var setValue = reactivecore.Actions.setValue,
  clearValues = reactivecore.Actions.clearValues,
  resetValuesToDefault = reactivecore.Actions.resetValuesToDefault;
var getClassName = reactivecore.helper.getClassName,
  handleA11yAction = reactivecore.helper.handleA11yAction;
var SelectedFilters = {
  name: 'SelectedFilters',
  props: {
    className: VueTypes.string.def(''),
    clearAllLabel: VueTypes.string.def('Clear All'),
    innerClass: vueTypes.types.style,
    showClearAll: VueTypes.bool.def(true),
    title: vueTypes.types.title,
    resetToDefault: VueTypes.bool.def(false),
    clearAllBlacklistComponents: VueTypes.array,
    resetToValues: VueTypes.object
  },
  inject: {
    theme: {
      from: 'theme_reactivesearch'
    }
  },
  render: function render() {
    var _this = this;
    if (this.$slots["default"]) {
      return this.$slots["default"]({
        components: this.components,
        selectedValues: this.selectedValues,
        clearValues: this.clearValues,
        clearValue: this.clearValue,
        setValue: this.setValue,
        resetValuesToDefault: this.resetValuesToDefault
      });
    }
    var filtersToRender = this.renderFilters();
    var hasValues = !!filtersToRender.length;
    return vue.createVNode(Container.Container, {
      "class": Button.filters(this.theme) + " " + (this.$props.className || '')
    }, {
      "default": function _default() {
        return [_this.$props.title && hasValues && vue.createVNode(Title.Title, {
          "class": getClassName(_this.$props.innerClass, 'title') || ''
        }, {
          "default": function _default() {
            return [_this.$props.title];
          }
        }), filtersToRender, _this.$props.showClearAll && hasValues && filtersToRender.length > 1 ? vue.createVNode(Button.Button, vue.mergeProps(_transformOn({
          click: _this.clearValues,
          keypress: function keypress(event) {
            return handleA11yAction(event, function () {
              return _this.clearValues();
            });
          }
        }), {
          "class": getClassName(_this.$props.innerClass, 'button') || '',
          "tabIndex": "0"
        }), {
          "default": function _default() {
            return [_this.$props.clearAllLabel];
          }
        }) : null];
      }
    });
  },
  methods: {
    remove: function remove(component, value) {
      if (value === void 0) {
        value = null;
      }
      this.setValue(component, null);
      this.$emit('clear', component, value);
    },
    clearValues: function clearValues() {
      var resetToDefault = this.resetToDefault,
        resetToValues = this.resetToValues,
        clearAllBlacklistComponents = this.clearAllBlacklistComponents;
      if (resetToDefault) {
        this.resetValuesToDefault(clearAllBlacklistComponents);
      } else {
        this.clearValuesAction(resetToValues, clearAllBlacklistComponents);
      }
      this.$emit('clear', resetToValues);
    },
    clearValue: function clearValue(componentId) {
      var resetToDefault = this.resetToDefault,
        resetToValues = this.resetToValues;
      if (resetToDefault) {
        this.resetValuesToDefault(this.components.filter(function (component) {
          return component !== componentId;
        }));
      } else {
        this.setValue(componentId, (resetToValues == null ? void 0 : resetToValues[componentId]) || null);
      }
      this.$emit('clear', resetToValues == null ? void 0 : resetToValues[componentId]);
    },
    renderValue: function renderValue(value, isArray) {
      var _this2 = this;
      if (isArray && value.length) {
        var arrayToRender = value.map(function (item) {
          return _this2.renderValue(item);
        });
        return arrayToRender.join(', ');
      }
      if (value && typeof value === 'object') {
        // TODO: support for NestedList
        var label = (typeof value.label === 'string' ? value.label : value.value) || value.key || value.distance || null;
        if (value.location) {
          label = value.location + " - " + label;
        }
        return label;
      }
      return value;
    },
    renderFilterButton: function renderFilterButton(component, keyProp, handleRemove, label) {
      return vue.createVNode(Button.Button, vue.mergeProps(_transformOn({
        click: handleRemove,
        keypress: function keypress(event) {
          return handleA11yAction(event, handleRemove);
        }
      }), {
        "class": getClassName(this.$props.innerClass, 'button') || '',
        "key": keyProp,
        "tabIndex": "0"
      }), {
        "default": function _default() {
          return [vue.createVNode("span", null, [label]), vue.createVNode("span", null, [vue.createTextVNode("\u2715")])];
        }
      });
    },
    renderFilters: function renderFilters() {
      var _this3 = this;
      var selectedValues = this.selectedValues;
      var filterComponents = Object.keys(selectedValues).filter(function (id) {
        return _this3.components.includes(id) && selectedValues[id].showFilter;
      });
      return filterComponents.map(function (component, index$1) {
        var _selectedValues$compo = selectedValues[component],
          label = _selectedValues$compo.label,
          value = _selectedValues$compo.value;
        var isArray = Array.isArray(value);

        // default behaviour
        if (label && (isArray && value.length || !isArray && value)) {
          var valueToRender = _this3.renderValue(value, isArray);
          return _this3.renderFilterButton(component, component + "-" + (index$1 + 1), function () {
            return _this3.remove(component, value);
          }, selectedValues[component].label + ": " + index.decodeHtml(valueToRender));
        }
        return null;
      }).filter(Boolean);
    }
  },
  watch: {
    selectedValues: function selectedValues(newVal) {
      this.$emit('change', newVal);
    }
  }
};
var mapStateToProps = function mapStateToProps(state) {
  return {
    components: state.components,
    selectedValues: state.selectedValues
  };
};
var mapDispatchtoProps = {
  clearValuesAction: clearValues,
  setValue: setValue,
  resetValuesToDefault: resetValuesToDefault
};
var RcConnected = index.connect(mapStateToProps, mapDispatchtoProps)(SelectedFilters);
RcConnected.name = SelectedFilters.name;
RcConnected.install = function (Vue) {
  Vue.component(RcConnected.name, RcConnected);
};

exports.default = RcConnected;