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

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.