QueryPreviewButton

Component containing an event button that emits QueriesPreviewXEvents.UserAcceptedAQueryPreview when clicked with the full query preview info as payload.

It has a default slot to customize its contents.

Props

Name	Description	Type	Default
queryPreviewInfo	The information about the request of the query preview.	QueryPreviewInfo
metadata	The metadata property for the request on each query preview.	Omit<WireMetadata, 'moduleName'>

Slots

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

Events

A list of events that the component will emit:

• UserAcceptedAQueryPreview: the event is emitted after the user clicks the button. The event payload is the QueryPreviewInfo of the query.

Examples

Basic example

The component content has the query preview query as default.

<template>
  <QueryPreviewButton queryPreviewInfo="queryPreviewInfo" />
</template>
<script setup>
import { QueryPreviewButton } from '@empathyco/x-components/queries-preview'
import { reactive } from 'vue'
const queryPreviewInfo = reactive({ query: 'shoes' })
</script>

Customizing slots

The content of the button is customizable via its default slot.

<template>
  <QueryPreviewButton queryPreviewInfo="queryPreviewInfo">
    {{ `Search for: ${queryPreviewInfo.query}` }}
  </QueryPreviewButton>
</template>
<script setup>
import { QueryPreviewButton } from '@empathyco/x-components/queries-preview'
import { reactive } from 'vue'
const queryPreviewInfo = reactive({ query: 'shoes' })
</script>