HistoryQueries

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.

We are cookie-less

This is a cookie-free area. Who needs cookies when you can have trust? Feel free to browse our site and the only cookies you need to worry about are the edible kind.