BaseSuggestion

Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the XEvent that will be emitted on click with a given feature.

The default slot receives the suggestion and the matched query has props.

Props

Name	Description	Type	Default
query	The normalized query of the module using this component.	string	''
suggestion	The suggestion to render and use in the default slot.	Suggestion
feature	The feature from which the events will be emitted.	QueryFeature
suggestionSelectedEvents	The XEvent that will be emitted when selecting a suggestion.	Partial
highlightCurated	Indicates if the curated suggestion should be highlighted.	boolean

Slots

Name	Description	Bindings (name - type - description)
default	Button content	query String - The query that the suggestion belongs to suggestion Suggestion - Suggestion data filter Filter - Suggestion's filter

Events

This component emits the following events:

• UserAcceptedAQuery (opens new window): the event is emitted after the user clicks the button. The event payload is the suggestion query data.
• UserSelectedASuggestion (opens new window): the event is emitted after the user clicks the button. The event payload is the suggestion data.
• UserClickedAFilter (opens new window): the event is emitted after the user clicks the button if the suggestion includes a filter. The event payload is the suggestion filter.
• The component can emit more events on click using the suggestionSelectedEvents prop.

Examples

Basic usage

This suggestion component expects a suggestion to render and pass to its default slot, a normalized query to compare with the suggestion's query and highlight its matching parts, and events to emit when the suggestion is selected.

If the suggestion contains a filter, it is displayed next to the suggestion.

Customise the content

You can make this component render any content you want by using the default slot.

Emitting custom events with suggestionSelectedEvents

You can emit additional custom events when a suggestion is selected by passing them in the suggestionSelectedEvents prop. For example, to emit a custom event called CustomSuggestionEvent with a payload: