1 min read

QueryPreviewButton

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

Examples

Basic example

The component content has the query preview query as default

<template>
  <div>
    <QueryPreviewButton queryPreviewInfo="queryPreviewInfo" />
  </div>
</template>
<script>
  import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';
  export default {
    components: {
      QueryPreviewButton
    },
    data: function () {
      return {
        queryPreviewInfo: {
          query: 'shoes'
        }
      };
    }
  };
</script>

Customizing slots

The content of the button is customizable via its default slot

<template>
  <div>
    <QueryPreviewButton queryPreviewInfo="queryPreviewInfo">
      {{ `Search for: ${queryPreviewInfo.query}` }}
    </QueryPreviewButton>
  </div>
</template>
<script>
  import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';
  export default {
    components: {
      QueryPreviewButton
    },
    data: function () {
      return {
        queryPreviewInfo: {
          query: 'shoes'
        }
      };
    }
  };
</script>

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.