SemanticQueries

Retrieves a list of semantic queries from the state and exposes them in the slots.

Slots

Name	Description	Bindings (name - type - description)
default	Semantic Query content	queries string[] - SemanticQueries mapped to strings suggestions SemanticQuery[] - The SemanticQueries findSemanticQuery (query: string) => SemanticQuery - Method to find a semantic query given a query
suggestion	Semantic Query content	v-bind {suggestion: object - Suggestion data, index: number - Suggestion index} - BaseSuggestion bindings
suggestion-content	Semantic Query content	v-bind {suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to} - SemanticQuery bindings

Events

This component doesn't emit events.

See it in action

By default, the SemanticQueries component will render a list of semantic queries.

<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.

Play with the default slot

The default slot is used to overwrite the whole content of the component.

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.

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.

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.