HistoryQueries

This component renders a list of suggestions coming from the user queries history.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the suggestions.	Vue
maxItemsToRender	Maximum number of history queries to show. It should be a lower number than the maxItemsToStore. If it is not provided, it will show all the stored HistoryQueries.	number

Slots

Name	Description	Bindings (name - type - description)
suggestion	History Query item	suggestion Suggestion - History Query suggestion data index number - History Query suggestion index
suggestion-content	History Query content	suggestion Suggestion - History Query suggestion data index number - History Query suggestion index queryHTML string - Suggestion's query with the matching part inside a span tag
suggestion-remove-content	History Query remove button content	suggestion Suggestion - History Query suggestion data index number - History Query suggestion index

Events

This component doesn't emit events.

See it in action

Here you have a basic example of how the HistoryQueries is rendered.

Play with props

In this example, the history queries have been limited to render a maximum of 10 queries (by default it is 5).

Play with the animation

Play with suggestion slot

In this example, the HistoryQuery component is passed in the suggestion slot (although any other component could potentially be passed).

Play with suggestion-content slot

To continue the previous example, the HistoryQuery component is passed in the suggestion-content slot, but in addition, an HTML span tag for the text are also passed.

Play with suggestion-content-remove slot

To continue the previous example, the HistoryQuery component is passed in the suggestion-content slot, but in addition, a cross icon is also passed to change the icon to remove the history query.