@empathyco/x-components
Version:
Empathy X Components
58 lines (42 loc) • 1.73 kB
Markdown
---
title: ClearHistoryQueries
---
# ClearHistoryQueries
A button that when is pressed, emits the HistoryQueriesXEvents.UserPressedClearHistoryQueries event,
expressing the user intention to clear the whole history of queries.
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | --------------------------------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a message, an icon or both | None |
## Events
A list of events that the component will emit:
- [`UserPressedClearHistoryQueries`](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.
## Examples
### Basic example
The component exposes a single default slot, where you can add icons or text.
```vue live
<template>
<div>
<SearchInput />
<ClearHistoryQueries>Clear history queries</ClearHistoryQueries>
<HistoryQueries :animation="'FadeAndSlide'" :maxItemsToRender="10" />
</div>
</template>
<script>
import Vue from 'vue';
import { SearchInput } from '@empathyco/x-components/search-box';
import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';
import { FadeAndSlide } from '@empathyco/x-components';
// Registering the animation as a global component
Vue.component('FadeAndSlide', FadeAndSlide);
export default {
name: 'ClearHistoryQueriesDemo',
components: {
SearchInput,
HistoryQueries,
ClearHistoryQueries
}
};
</script>
```