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

A Vue UI components library for building search experiences

import { Actions, helper } from '@appbaseio/reactivecore';
import '@appbaseio/reactivecore/lib/utils/constants';
import _transformOn from '@vue/babel-helper-vue-transform-on';
import './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, mergeProps, createTextVNode } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/reactivecore/lib/utils/helper';
import '@appbaseio/vue-emotion';
import '@emotion/css';
import 'polished';
import { f as filters, B as Button } from './Button-8178e39a.js';
import { t as types } from './vueTypes-5d575822.js';
import 'redux';
import { f as decodeHtml, c as connect } from './index-3af85a74.js';
import { T as Title } from './Title-100fe896.js';
import { C as Container } from './Container-e2261542.js';

var setValue = Actions.setValue,
  clearValues = Actions.clearValues,
  resetValuesToDefault = Actions.resetValuesToDefault;
var getClassName = helper.getClassName,
  handleA11yAction = helper.handleA11yAction;
var SelectedFilters = {
  name: 'SelectedFilters',
  props: {
    className: VueTypes.string.def(''),
    clearAllLabel: VueTypes.string.def('Clear All'),
    innerClass: types.style,
    showClearAll: VueTypes.bool.def(true),
    title: 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 createVNode(Container, {
      "class": filters(this.theme) + " " + (this.$props.className || '')
    }, {
      "default": function _default() {
        return [_this.$props.title && hasValues && createVNode(Title, {
          "class": getClassName(_this.$props.innerClass, 'title') || ''
        }, {
          "default": function _default() {
            return [_this.$props.title];
          }
        }), filtersToRender, _this.$props.showClearAll && hasValues && filtersToRender.length > 1 ? createVNode(Button, 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 createVNode(Button, 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 [createVNode("span", null, [label]), createVNode("span", null, [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) {
        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), function () {
            return _this3.remove(component, value);
          }, selectedValues[component].label + ": " + 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 = connect(mapStateToProps, mapDispatchtoProps)(SelectedFilters);
RcConnected.name = SelectedFilters.name;
RcConnected.install = function (Vue) {
  Vue.component(RcConnected.name, RcConnected);
};

export default RcConnected;