PartialQueryButton

A button that when pressed emits the XEventsTypes.UserAcceptedAQuery and SearchXEvents.UserClickedPartialQuery events, expressing the user intention to set the partial query.

Props

Name	Description	Type	Default
query	The query property.	string

Slots

Name	Description	Bindings (name - type - description)
default

Events

This component emits 2 different events:

• UserAcceptedAQuery (opens new window): the event is emitted after the user clicks the partial query. The event payload is the partial query data.
• UserClickedPartialQuery (opens new window): the event is emitted after the user clicks the partial query. The event payload is the partial query data.

Examples

Basic example

A button that when pressed emits the XEventsTypes.UserAcceptedAQuery and SearchXEvents.UserClickedPartialQuery events, expressing the user intention to set the partial query.

The component sets the current query as the new query and emits the UserAcceptedAQuery and UserClickedPartialQuery events when is clicked.

<template>
  <PartialQueryButton :query="query" />
</template>

Customizing its contents

<template>
  <PartialQueryButton>
    <template #default="{ query }">
      <span class="x-partial-query-button__text">
        Set the Partial query as the new query: {{ query }}!
      </span>
    </template>
  </PartialQueryButton>
</template>
<script>
  import { PartialQueryButton } from '@empathyco/x-components/search';
  export default {
    components: {
      PartialQueryButton
    }
  };
</script>