@empathyco/x-components/docs/API-reference/components/semantic-queries/x-components.semantic-queries.md

Empathy X Components

---

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>
import { SemanticQueries } from '@empathyco/x-components/semantic-queries'

export default {
  name: 'SemanticQueriesDemo',
  components: {
    SemanticQueries,
  },
}
</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>
import { FadeAndSlide } from '@empathyco/x-components'

export default {
  name: 'SemanticQueriesPropsDemo',
  data() {
    return {
      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">
          {{ suggestion.query }}
          {{ suggestion.distance }}
        </div>
      </SlidingPanel>
    </section>
  </SemanticQueries>
</template>

<script>
import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SemanticQueriesDefaultSlotDemo',
  components: {
    SemanticQueries,
    SlidingPanel,
  },
}
</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 :semanticQuery="findSemanticQuery(query)" #default="{ query }">
            {{ query.query }} ({{ query.distance }})
          </SemanticQuery>
          <ul>
            <li v-for="result in results" :key="result.id">
              {{ result.name }}
            </li>
          </ul>
        </div>
      </QueryPreviewList>
    </section>
  </SemanticQueries>
</template>

<script>
import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries'
import { QueryPreviewList } from '@empathyco/x-components/queries-preview'

export default {
  name: 'SemanticQueriesDefaultSlotDemo2',
  components: {
    SemanticQueries,
    SemanticQuery,
    QueryPreviewList,
  },
}
</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>
import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
export default {
  name: 'SemanticQueriesItemSlotDemo',
  components: {
    SemanticQueries,
  },
}
</script>
```

### Play with the suggestion content slot

The suggsetion 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>
import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
export default {
  name: 'SemanticQueriesItemSlotDemo',
  components: {
    SemanticQueries,
  },
}
</script>
```