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
historyQuery	The historyQuery that will be removed when clicking the clear button.	HistoryQuery

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Button content with a text, an icon or both	None

Events

A list of events that the component will emit:

• UserPressedRemoveHistoryQuery (opens new window): 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.

<template>
  <RemoveHistoryQuery :historyQuery="historyQuery">
    <img class="x-history-query__icon" src="./my-awesome-clear-icon.svg" />
  </RemoveHistoryQuery>
</template>
<script setup>
import { RemoveHistoryQuery } from '@empathyco/x-components/history-queries'
import { ref } from 'vue'
const historyQuery = ref({
  modelName: 'HistoryQuery',
  query: 'trousers',
  facets: [],
})
</script>