@empathyco/x-components
Version:
Empathy X Components
52 lines (36 loc) • 1.48 kB
Markdown
title: SpellcheckButton
# SpellcheckButton
A button that when pressed emits the XEventsTypes.UserAcceptedAQuery
and XEventsTypes.UserAcceptedSpellcheckQuery events, expressing the user
intention to set the spellchecked query.
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | |
## Events
This component emits 2 different events:
- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks the button. The event payload is the spellchecked query
data.
- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks the button. The event payload is the spellchecked query
data.
## Examples
### Basic example
The component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`
and `UserAcceptedSpellcheckQuery` events.
```vue
<SpellcheckButton />
```
### Customizing its contents
```vue
<SpellcheckButton>
<template #default="{ spellcheckedQuery }">
<span class="x-spellcheck__text">
Set the Spellcheck as the new query: {{ spellcheckedQuery}}!
</span>
</template>
</SpellcheckButton>
```