NextQueryPreview

Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results.

Props

Name	Description	Type	Default
suggestion	The next query to retrieve the results preview.	NextQuery
maxItemsToRender	Number of suggestion results to be rendered.	number

Slots

Name	Description	Bindings (name - type - description)
default	Next Query Preview default slot.	suggestion NextQuery - Next Query suggestion data results Result[] - The results preview of the next query
result	Next Query Preview result slot.	result Result - A Next Query Preview result

Events

This component emits the NextQueryPreviewMountedHook (opens new window) when it is mounted.

See it in action

Here you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this component is intended to be used overriding its default slot. By default it will only render the names of the results.

Play with the default slot

In this example, the results will be rendered inside a sliding panel.

Play with the result slot

The component exposes a slot to override the result content, without modifying the list.

In this example, the ID of the results will be rendered along with the name.

<template>
  <NextQueryPreview :suggestion="suggestion" #result="{ result }">
    <span>{{ result.id }}</span>
    <span>{{ result.name }}</span>
  </NextQueryPreview>
</template>
<script>
import { NextQueryPreview } from '@empathyco/x-components/next-queries'
export default {
  name: 'NextQueryPreviewDemoOverridingResultSlot',
  components: {
    NextQueryPreview,
  },
  data() {
    return {
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>

Play with props

In this example, the suggestions has been limited to render a maximum of 4 items.

<template>
  <NextQueryPreview
    :maxItemsToRender="maxItemsToRender"
    :suggestion="suggestion"
    #default="{ results }"
  >
    <BaseGrid #default="{ item }" :items="results">
      <BaseResultLink :result="item">
        <BaseResultImage :result="item" />
      </BaseResultLink>
    </BaseGrid>
  </NextQueryPreview>
</template>
<script>
import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'
import { NextQueryPreview } from '@empathyco/x-components/next-queries'
export default {
  name: 'NextQueryPreviewDemo',
  components: {
    BaseGrid,
    BaseResultImage,
    BaseResultLink,
    NextQueryPreview,
  },
  data() {
    return {
      maxItemsToRender: 4,
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>