Start your content search
1 min read

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
animation Animation component that will be used to animate the empathize. Vue () => NoElement
eventsToOpenEmpathize Array of XEvent to open the empathize. Array () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']
eventsToCloseEmpathize Array of XEvent to close the empathize. Array (): XEvent[] => [
'UserClosedEmpathize',
'UserSelectedASuggestion',
'UserPressedEnterKey',
'UserBlurredSearchBox'
]

Slots

Name Description Bindings
(name - type - description)
default (Required) Modal container content None

Events

A list of events that the component will emit:

  • EmpathizeOpened (opens new window): 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 (opens new window): 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.

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

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

<Empathize :animation="collapseFromTop">
  <template #default>
    <PopularSearches/>
  </template>
</Empathize>
Cookie-Less