SimpleFilter

Renders a simple filter, emitting the needed events when clicked.

Props

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

Slots

Name	Description	Bindings (name - type - description)
default	The control element to render	filter Filter - The filter data clickFilter () => void - Method that will invoke the needed actions after the user cssClasses Object - Object containing CSS classes to add to the button isDisabled Boolean - True if the filter shouldn't be able to be selected by the
label	The content to render inside the button	filter Filter - The filter data

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.
• UserClickedASimpleFilter (opens new window): the event is emitted after the user clicks the button, using the filter prop as its payload.

See it in action

This component renders a button, which on clicked emits the UserClickedAFilter and the UserClickedASimpleFilter events. By default, it renders a button with the filter.label property as text.

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

<template>
  <SimpleFilter :filter="filter" />
</template>
<script>
  import { SimpleFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'SimpleFilterTest',
    components: {
      SimpleFilter
    },
    data() {
      return {
        filter: {
          modelName: 'SimpleFilter',
          selected: false,
          id: 'category:shirts',
          value: 'category:shirts',
          facetId: 'category',
          totalResults: 10
        }
      };
    }
  };
</script>

Playing with props

Configuring the events to emit when the filter is clicked.

<template>
  <SimpleFilter :clickEvents="{ UserClickedASimpleFilter: filter }" :filter="filter" />
</template>
<script>
  import { SimpleFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'SimpleFilterTest',
    components: {
      SimpleFilter
    },
    data() {
      return {
        filter: {
          modelName: 'SimpleFilter',
          selected: false,
          id: 'category:shirts',
          value: 'category:shirts',
          facetId: 'category',
          totalResults: 10
        }
      };
    }
  };
</script>

Rendering an input

You can change the rendered control using the default slot. Note that because of the current Vue limitations, you must only render one single root node in this slot. There you will receive all the data and methods needed:

<template>
  <SimpleFilter v-slot="{ filter, clickFilter, isDisabled, cssClasses }" :filter="filter">
    <label :class="cssClasses">
      <input :checked="filter.selected" type="checkbox" @change="clickFilter" />
      {{ filter.label }}
    </label>
  </SimpleFilter>
</template>
<script>
  import { SimpleFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'SimpleFilterTest',
    components: {
      SimpleFilter
    },
    data() {
      return {
        filter: {
          modelName: 'SimpleFilter',
          selected: false,
          id: 'category:shirts',
          value: 'category:shirts',
          facetId: 'category',
          label: 'Shirts',
          totalResults: 10
        }
      };
    }
  };
</script>

Changing default button content

You can change the content rendered by the default button using the label slot. There you will receive the filter data.

<template>
  <SimpleFilter :filter="filter">
    <template #label="{ filter }">
      <img :src="`imgs/filters/${filter.id}.png`" />
      <span>{{ filter.label }}</span>
    </template>
  </SimpleFilter>
</template>
<script>
  import { SimpleFilter } from '@empathyco/x-components/facets';
  export default {
    name: 'SimpleFilterTest',
    components: {
      SimpleFilter
    },
    data() {
      return {
        filter: {
          modelName: 'SimpleFilter',
          selected: false,
          id: 'category:shirts',
          value: 'category:shirts',
          facetId: 'category',
          label: 'Shirts',
          totalResults: 10
        }
      };
    }
  };
</script>