RenderlessFilter

Renders default slot content. It binds to the default slot a @empathyco/x-types#BooleanFilter, the XEvent that will be emitted when clicking the content, the css classes and if the content should be deactivated.

Props

Name	Description	Type	Default
filter	The filter data to render.	BooleanFilter
clickEvents	Additional events with its payload to emit when the filter is clicked.	Partial

Examples

Renders default slot content. It binds to the default slot a filter, the events that will be emitted when clicking the content, the CSS classes and if the content should be deactivated.

Basic usage

<RenderlessFilter :filter="filter" />

Customizing its contents and adding new events

<template>
  <RenderlessFilter
    :filter="filter"
    :clickEvents="clickEvents"
    v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
  >
    <button @click="clickFilter" :class="cssClasses" :disabled="isDisabled">
      {{ filter.label }}
    </button>
  </RenderlessFilter>
</template>
<script>
  import { RenderlessFilter } from '@empathyco/x-components';
  export default {
    components: {
      RenderlessFilter
    },
    props: ['filter'],
    computed: {
      clickEvents() {
        return { UserClickedAHierarchicalFilter: this.filter };
      }
    }
  };
</script>