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 themaxItemsToStore . If it is not provided, it will showall the stored HistoryQueries . | number |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
suggestion | History Query item | suggestion Suggestion - History Query suggestion dataindex number - History Query suggestion index |
suggestion-content | History Query content | suggestion Suggestion - History Query suggestion dataindex number - History Query suggestion indexqueryHTML 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 dataindex 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.
Did you find this topic helpful?