QueryPreviewList

Renders the results previews of a list of objects with the information about the query preview, and exposes the QueryPreview slots to modify the content. The requests are made in sequential order.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the elements.	union	'ul'
queriesPreviewInfo	The list of queries preview to render.	Array

Slots

Name	Description	Bindings (name - type - description)
slotName

See it in action

Here you have a basic example of how the QueryPreviewList 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>
  <QueryPreviewList
    class="x-flex x-gap-8"
    :queriesPreviewInfo="queriesPreviewInfo"
    #result="{ result }"
  >
    <span class="x-font-bold">{{ result.id }}:</span>
    <span>{{ result.name }}</span>
  </QueryPreviewList>
</template>
<script>
  import { QueryPreviewList } from '@empathyco/x-components/queries-preview';
  export default {
    name: 'QueryPreviewListDemoOverridingResultSlot',
    components: {
      QueryPreviewList
    },
    data() {
      return {
        queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }]
      };
    }
  };
</script>