@empathyco/x-components
Version:
Empathy X Components
88 lines (66 loc) • 4.09 kB
Markdown
---
title: Empathize
---
# Empathize
Component containing the empathize. It has a required slot to define its content and two props to
define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.
## Props
| Name | Description | Type | Default |
| ----------------------------------- | --------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>eventsToOpenEmpathize</code> | Array of XEvent to open the empathize. | <code>XEvent[]</code> | <code>() => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']</code> |
| <code>eventsToCloseEmpathize</code> | Array of XEvent to close the empathize. | <code>XEvent[]</code> | <code>() => [<br /> 'UserClosedEmpathize',<br /> 'UserSelectedASuggestion',<br /> 'UserPressedEnterKey',<br /> 'UserBlurredSearchBox'<br />]</code> |
| <code>animation</code> | Animation component that will be used to animate the empathize. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ---------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Modal container content | None |
## Events
A list of events that the component will emit:
- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after receiving an event to change the state `isOpen` to `true`. The event
payload is undefined and can have a metadata with the module and the element that emitted it.
- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after receiving an event to change the state `isOpen` to `false`. The event
payload is undefined and can have a metadata with the module and the element that emitted it.
## Examples
This component will listen to the configured events in `eventsToOpenEmpathize` and
`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values
are:
- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and
- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,
'UserBlurredSearchBox`
### Basic examples
The component rendering the query suggestions, popular searches and history queries with keyboard
navigation.
```vue
<Empathize>
<template #default>
<BaseKeyboardNavigation>
<QuerySuggestions/>
<PopularSearches/>
<HistoryQueries/>
</BaseKeyboardNavigation>
</template>
</Empathize>
```
Defining custom values for the events to open and close the Empathize. For example opening it when
the search box loses the focus and closing it when the search box receives the focus:
```vue
<Empathize
:eventsToOpenEmpathize="['UserBlurredSearchBox']"
:eventsToCloseEmpathize="['UserFocusedSearchBox']"
>
<template #default>
Please, type a query in the Search Box.
</template>
</Empathize>
```
An animation can be used for the opening and closing using the `animation` prop. The animation, must
be a Component with a `Transition` with a slot inside:
```vue
<Empathize :animation="collapseFromTop">
<template #default>
<PopularSearches/>
</template>
</Empathize>
```