@empathyco/x-components
Version:
Empathy X Components
54 lines (37 loc) • 1.35 kB
Markdown
title: Spellcheck
# Spellcheck
The `Spellcheck` component allows to inform the user with a friendly message that he might have
misspelled the search query. This message can be set using the default slot of the component, which
gives access to the searched query using the `query` scope property, and the spellchecked query
proposal, using the `spellcheckedQuery` scope property.
The component will only render itself if the `spellcheckedQuery` property has value.
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | <br /> |
## Examples
This default spellcheck component expects a query and a spellcheckedQuery to render and pass to its
default slot.
This two props should be show like a message comparing them.
### Basic usage
```vue
<Spellcheck />
```
### Customizing its contents
```vue
<Spellcheck>
<template #default="{ query, spellcheckedQuery }">
No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'
</template>
</Spellcheck>
<script>
import { Spellcheck } from '@empathyco/x-components/search';
export default {
components: {
Spellcheck
}
};
</script>
```