@empathyco/x-components
Version:
Empathy X Components
54 lines (37 loc) • 1.33 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>
```