MyHistory

The component renders the full history of user searched queries grouped by the day they were performed.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the suggestions.	AnimationProp	'ul'
locale	The current locale.	string	'en'
queriesListClass	Class inherited by content element.	string

Slots

Name	Description	Bindings (name - type - description)
date
suggestion	History Query item	suggestion Suggestion - History Query suggestion data index number - History Query suggestion index formatTime () => string - Callback to format time to hh:mm [PM/AM]
suggestion-content	History Query content	suggestion Suggestion - History Query suggestion data index number - History Query suggestion index formatTime () => string - Callback to format time to hh:mm [PM/AM]
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.

Examples

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

<template>
  <MyHistory />
</template>
<script setup>
import { MyHistory } from '@empathyco/x-components/history-queries'
</script>

Play with props

In this example, the my history has been configured to use the 'es' locale.

<template>
  <MyHistory locale="es" />
</template>
<script setup>
import { MyHistory } from '@empathyco/x-components/history-queries'
</script>

Play with the animation

<template>
  <MyHistory :animation="animation" />
</template>
<script setup>
import { MyHistory } from '@empathyco/x-components/history-queries'
import { FadeAndSlide } from '@empathyco/x-components'
const animation = FadeAndSlide
</script>

Play with suggestion slot

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

<template>
  <MyHistory #suggestion="{ suggestion }">
    <HistoryQuery :suggestion="suggestion" />
  </MyHistory>
</template>
<script setup>
import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'
</script>

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 is also passed.

<template>
  <MyHistory #suggestion-content="{ suggestion }">
    <span>{{ suggestion.query }}</span>
  </MyHistory>
</template>
<script setup>
import { MyHistory } from '@empathyco/x-components/history-queries'
</script>

Play with date slot

In this example, an HTML span tag for the date is passed.

<template>
  <MyHistory #date="{ date }">
    <span>{{ date }}</span>
  </MyHistory>
</template>
<script setup>
import { MyHistory } from '@empathyco/x-components/history-queries'
</script>

Play with suggestion-remove-content slot

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

<template>
  <MyHistory #suggestion-remove-content="{ suggestion }">
    <CrossIcon />
  </MyHistory>
</template>
<script setup>
import { MyHistory } from '@empathyco/x-components/history-queries'
import { CrossIcon } from '@empathyco/x-components'
</script>

Customizing the items with classes

The queriesListClass prop can be used to add classes to the suggestions list.