@empathyco/x-components
Version:
Empathy X Components
44 lines (28 loc) • 1.64 kB
Markdown
title: RemoveHistoryQuery
# RemoveHistoryQuery
Button that when it is pressed emits the
HistoryQueriesXEvents.UserPressedRemoveHistoryQuery event, expressing the user
intention to remove a query in the history.
## Props
| Name | Description | Type | Default |
| ------------------------- | --------------------------------------------------------------------- | ------------------------- | ------------- |
| <code>historyQuery</code> | The historyQuery that will be removed when clicking the clear button. | <code>HistoryQuery</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None |
## Events
A list of events that the component will emit:
- [`UserPressedRemoveHistoryQuery`](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 Example
You can customize the content that this component renders. To do so, simply use the default slot.
```vue
<RemoveHistoryQuery :historyQuery="historyQuery">
<img class="x-history-query__icon" src="./my-awesome-clear-icon.svg"/>
</RemoveHistoryQuery>
```