---

title: HistoryQuery

---

# HistoryQuery

This component renders a history query suggestion combining two buttons: one for selecting this
suggestion as the search query, and another one to remove this query suggestion from the
history queries.

## Props

| Name                           | Description                             | Type                           | Default       |
| ------------------------------ | --------------------------------------- | ------------------------------ | ------------- |
| <code>suggestion</code>        | The history query suggestion to render. | <code>HistoryQueryModel</code> | <code></code> |
| <code>removeButtonClass</code> | Class inherited by content element.     | <code>string</code>            | <code></code> |
| <code>suggestionClass</code>   | Class inherited by content element.     | <code>string</code>            | <code></code> |

## Events

| Event name | Properties                                                                                                        | Description                           |
| ---------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| click      | **suggestion** `Suggestion` - History Query suggestion data<br/>**event** `MouseEvent` - The original mouse event | Click on the History Query suggestion |

## Slots

| Name                               | Description                         | Bindings<br />(name - type - description)                                                                                                                                                                                                                                             |
| ---------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code>               | History Query content               | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter |
| <code>remove-button-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data                                                                                                                                                                                                                |

## Events

A list of events that the component will emit:

- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the history query
  data.

## Examples

### Basic usage

This component only requires a prop called `suggestion`.

```vue live
<template>
  <HistoryQuery :suggestion="suggestion" />
</template>

<script setup>
import { HistoryQuery } from "@empathyco/x-components/history-queries";
import { ref } from "vue";

const suggestion = ref({
  modelName: "HistoryQuery",
  query: "trousers",
  facets: [],
});
</script>
```

### Customizing slots content

Suggestion and remove buttons contents can be customized.

The default slot allows you to replace the content of the suggestion button. It has two properties,
the suggestion itself, and a `string` of HTML with the matched query.

The other slot is called `remove-button-content`, and allows you to set the content of the button
that serves to remove this query from the history. This slot only has one property, the suggestion.

```vue live
<template>
  <HistoryQuery :suggestion="suggestion">
    <template #default="{ suggestion }">
      <HistoryIcon />
      <Highlight highlight="tro" :text="suggestion.query" />
    </template>

    <template #remove-button-content="{ suggestion }">
      <CrossIcon />
    </template>
  </HistoryQuery>
</template>

<script setup>
import { HistoryQuery } from "@empathyco/x-components/history-queries";
import { HistoryIcon, CrossIcon, Highlight } from "@empathyco/x-components";
import { ref } from "vue";

const suggestion = ref({
  modelName: "HistoryQuery",
  query: "trousers",
  facets: [],
});
</script>
```

### Customizing the content with classes

The `suggestionClass` prop can be used to add classes to the history query suggestion.

```vue live
<template>
  <HistoryQuery :suggestion="suggestion" suggestionClass="x-custom-class" />
</template>

<script setup>
import { HistoryQuery } from "@empathyco/x-components/history-queries";
import { ref } from "vue";

const suggestion = ref({
  modelName: "HistoryQuery",
  query: "trousers",
  facets: [],
});
</script>
```

The `removeButtonClass` prop can be used to add classes to the remove history query.

```vue live
<template>
  <HistoryQuery :suggestion="suggestion" removeButtonClass="x-custom-class" />
</template>

<script setup>
import { HistoryQuery } from "@empathyco/x-components/history-queries";
import { ref } from "vue";

const suggestion = ref({
  modelName: "HistoryQuery",
  query: "trousers",
  facets: [],
});
</script>
```