HistoryQueries

This component renders a list of suggestions coming from the user queries history. Allows the user to select one of them, emitting the needed events. A history query is just another type of suggestion that contains a query that the user has made in the past.

Slots

Name	Description	Bindings (name - type - description)
suggestion	History Query item	v-bind Object - History Query suggestion attributes:   - suggestion Suggestion - History Query suggestion data   - index number - History Query suggestion index
suggestion-content	History Query content	v-bind Object - History Query suggestion attributes:   - suggestion Suggestion - History Query suggestion data   - index number - History Query suggestion index
suggestion-remove-content	History Query remove button content	v-bind Object - History Query suggestion attributes:   - suggestion Suggestion - History Query suggestion data   - index number - History Query suggestion index

Inherited props

This component inherits the BaseSuggestions props.

Name	Description	Type	Default
animation	Animation component that will be used to animate the suggestions.	Vue	"ul"
maxItemsToRender	Number of popular searches to be rendered.	number

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.