Empathize

Component containing the empathize. It has a required slot to define its content.

Props

Name	Description	Type	Default
eventsToOpenEmpathize	Array of XEvent to open the empathize.	XEvent[]	() => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']
eventsToCloseEmpathize	Array of XEvent to close the empathize.	XEvent[]	() => [ 'UserClosedEmpathize', 'UserSelectedASuggestion', 'UserPressedEnterKey', 'UserBlurredSearchBox', ]
animation	Animation component that will be used to animate the empathize.	AnimationProp	() => NoAnimation
hasContent	Whether the empathize has content or not. As it is only known in the client, it is a prop.	boolean	true
searchAndCloseOnNoContent	Fallback flag to trigger a search and close the empathize when has no-content.	boolean	false
searchAndCloseDebounceInMs	Debounce time in milliseconds to search and close the empathize when has no-content.	number	1000

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 and hasContent 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 and hasContent to true. 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
• Close: UserClosedEmpathize, UserSelectedASuggestion, UserPressedEnter and '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>

Advance examples

The component rendering the query suggestions, popular searches and history queries with keyboard navigation. It also configures searchAndCloseOnNoContent to trigger a search and close the empathize when has no-content as fallback behaviour. To do that, hasContent prop must be reactive to know if the empathize has content or not. It also configures searchAndCloseDebounceInMs to 500ms as debounce time to search and close the empathize when has no-content.

<Empathize
  :animation="empathizeAnimation"
  :events-to-close-empathize="empathizeCloseEvents"
  :has-content="showEmpathize"
  :search-and-close-debounce-in-ms="500"
  search-and-close-on-no-content
>
  <BaseKeyboardNavigation>
    <QuerySuggestions/>
    <PopularSearches/>
    <HistoryQueries/>
  </BaseKeyboardNavigation>
</Empathize>