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
cssClasses	Inheritance CSS classes.	(string | Dictionary)[]	() => []

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

<template>
  <RenderlessFilter :filter="filter" />
</template>
<script setup>
import { RenderlessFilter } from '@empathyco/x-components/facets'
import { ref } from 'vue'
const filter = ref({
  id: 'color:red',
  modelName: 'SimpleFilter',
  label: 'Red',
  facetId: 'color',
  selected: false,
  totalResults: 10,
})
</script>

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 setup>
import { RenderlessFilter } from '@empathyco/x-components/facets'
import { ref, computed } from 'vue'
const filter = ref({
  id: 'color:red',
  modelName: 'SimpleFilter',
  label: 'Red',
  facetId: 'color',
  selected: false,
  totalResults: 10,
})
const clickEvents = computed(() => ({ UserClickedAHierarchicalFilter: filter.value }))
</script>