HierarchicalFilter

Renders a hierarchical filter recursively, emitting the needed events when clicked.

Props

Name	Description	Type	Default
filter	The filter data to render.	HierarchicalFilterModel
childrenAnimation	The animation component to use for the children filters.	union
clickEvents	Additional events, with their payload, to emit when the filter is clicked.	Partial

Slots

Name	Description	Bindings (name - type - description)
default	The content to render inside the button.
label	The content to render inside the button.

Events

A list of events that the component will emit:

• UserClickedAFilter (opens new window): the event is emitted after the user clicks the button, using the filter prop as its payload.
• UserClickedAHierarchicalFilter (opens new window): the event is emitted after the user clicks the button, using the filter prop as its payload. filter.

See it in action

This component renders a button, which on clicked emits the UserClickedAFilter and UserClickedAHierarchicalFilter events. By default it renders the filter label as the button text. If the provided filter has children filters, this component will render them recursively. Changing the slot content will change it for all of the children.

The filter prop is required. The clickEvents prop is optional and allows configuring the events to emit on click.

<template>
  <HierarchicalFilter :filter="filter" />
</template>
<script>
  import { HierarchicalFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'HierarchicalFilterTest',
    components: {
      HierarchicalFilter
    },
    date() {
      return {
        filter: {
          id: `categories:men`,
          modelName: 'HierarchicalFilter',
          label: `men`,
          facetId: 'categories',
          parentId: null,
          totalResults: 10,
          children: [],
          selected: false
        }
      };
    }
  };
</script>

Playing with props

Configuring the events to emit when the filter is clicked.

<template>
  <HierarchicalFilter :clickEvents="{ UserClickedAHierarchicalFilter: filter }" :filter="filter" />
</template>
<script>
  import { HierarchicalFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'HierarchicalFilterTest',
    components: {
      HierarchicalFilter
    },
    date() {
      return {
        filter: {
          id: `categories:men`,
          modelName: 'HierarchicalFilter',
          label: `men`,
          facetId: 'categories',
          parentId: null,
          totalResults: 10,
          children: [],
          selected: false
        }
      };
    }
  };
</script>

Customizing the default slot content

In this example, the child filters will also include the label and checkbox.

<template>
  <HierarchicalFilter :filter="filter" v-slot="{ filter, clickFilter, slotCSSClasses, isDisabled }">
    <label :class="slotCSSClasses">
      <input @change="clickFilter" :disabled="isDisabled" />
      {{ filter.label }}
    </label>
  </HierarchicalFilter>
</template>
<script>
  import { HierarchicalFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'HierarchicalFilterTest',
    components: {
      HierarchicalFilter
    },
    date() {
      return {
        filter: {
          id: `categories:men`,
          modelName: 'HierarchicalFilter',
          label: `men`,
          facetId: 'categories',
          parentId: null,
          totalResults: 10,
          children: [],
          selected: false
        }
      };
    }
  };
</script>

Customizing the label slot content

<template>
  <HierarchicalFilter :filter="filter">
    <template #label :filter="filter">
      <span class="custom-class">{{ filter.label }}</span>
    </template>
  </HierarchicalFilter>
</template>
<script>
  import { HierarchicalFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'HierarchicalFilterTest',
    components: {
      HierarchicalFilter
    },
    date() {
      return {
        filter: {
          id: `categories:men`,
          modelName: 'HierarchicalFilter',
          label: `men`,
          facetId: 'categories',
          parentId: null,
          totalResults: 10,
          children: [],
          selected: false
        }
      };
    }
  };
</script>

Customizing the content with classes

The childrenFiltersClass prop can be used to add classes to the inner filters lists. This is useful to set the indent of the children filters.

The filterItemClass prop can be used to add classes to the filter element itself.

<template>
  <HierarchicalFilter
    :filter="filter"
    childrenFiltersClass="x-custom-class"
    filterItemClass="x-custom-filter"
  />
</template>
<script>
  import { HierarchicalFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'HierarchicalFilterTest',
    components: {
      HierarchicalFilter
    },
    date() {
      return {
        filter: {
          id: `categories:men`,
          modelName: 'HierarchicalFilter',
          label: `men`,
          facetId: 'categories',
          parentId: null,
          totalResults: 10,
          children: [],
          selected: false
        }
      };
    }
  };
</script>