@empathyco/x-components
Version:
Empathy X Components
158 lines (122 loc) • 4.33 kB
Markdown
---
title: SemanticQueries
---
# SemanticQueries
Retrieves a list of semantic queries from the state and exposes them in the slots.
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------- |
| <code>suggestion</code> | Semantic Query content | **v-bind** <code>{suggestion: object - Suggestion data, index: number - Suggestion index}</code> - undefined |
| <code>suggestion-content</code> | Semantic Query content | **undefined** <code>mixed</code> - {{suggestion: object - Suggestion data, query: string - The query that the |
## Events
This component doesn't emit events.
## See it in action
By default, the `SemanticQueries` component will render a list of semantic queries.
```vue
<template>
<SemanticQueries />
</template>
<script setup>
import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
</script>
```
### Play with props
The component has the following props:
- `maxItemsToRender` to limit the number of semantic queries to render.
- `animation` to specify the animation to be used to animate the semantic queries.
```vue live
<template>
<SemanticQueries :animation="animation" :maxItemsToRender="3" />
</template>
<script setup>
import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
import { FadeAndSlide } from "@empathyco/x-components";
const animation = FadeAndSlide;
</script>
```
### Play with the default slot
The default slot is used to overwrite the whole content of the component.
```vue live
<template>
<SemanticQueries #default="{ suggestions }">
<section>
<SlidingPanel>
<div v-for="suggestion in suggestions" :key="suggestion.query">
{{ suggestion.query }}
{{ suggestion.distance }}
</div>
</SlidingPanel>
</section>
</SemanticQueries>
</template>
<script setup>
import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
import { SlidingPanel } from "@empathyco/x-components";
</script>
```
The default slot also exposes an array of semantic queries mapped to strings, and a method to find a
semantic query given a string query.
This is useful if you need an array of string queries, but also need to retrieve the original
semantic query to use it in another element.
```vue live
<template>
<SemanticQueries #default="{ queries, findSemanticQuery }">
<section>
<QueryPreviewList :queries="queries" #slot="{ query, results }">
<div>
<SemanticQuery
:suggestion="findSemanticQuery(query)"
#default="{ suggestion }"
>
{{ suggestion.query }} ({{ suggestion.distance }})
</SemanticQuery>
<ul>
<li v-for="result in results" :key="result.id">
{{ result.name }}
</li>
</ul>
</div>
</QueryPreviewList>
</section>
</SemanticQueries>
</template>
<script setup>
import {
SemanticQueries,
SemanticQuery,
} from "@empathyco/x-components/semantic-queries";
import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
</script>
```
### Play with the suggestion slot
The suggestion slot can be used to override each semantic query item.
In this example, the query will be rendered along with the distance.
```vue live
<template>
<SemanticQueries #suggestion="{ suggestion: { query, distance } }">
<span>
({{ distance }})
{{ query }}
</span>
</SemanticQueries>
</template>
<script setup>
import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
</script>
```
### Play with the suggestion-content slot
The suggestion-content slot can be used to override only the content, but keep using the
SemanticQuery component internally.
```vue live
<template>
<SemanticQueries #suggestion-content="{ suggestion: { query, distance } }">
<span>
({{ distance }})
{{ query }}
</span>
</SemanticQueries>
</template>
<script setup>
import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
</script>
```