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.	union	'ul'
locale	The current locale.	string	'en'

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.

See it in action

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

<template>
  <MyHistory />
</template>
<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>

Play with props

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

<template>
  <MyHistory :locale="es" />
</template>
<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>

Play with the animation

<template>
  <MyHistory :animation="fadeAndSlide" />
</template>
<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  import { FadeAndSlide } from '@empathyco/x-components';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    },
    data() {
      return {
        fadeAndSlide: 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"></HistoryQuery>
  </MyHistory>
</template>
<script>
  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory,
      HistoryQuery
    }
  };
</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 are also passed.

<template>
  <MyHistory #suggestion-content="{ suggestion }">
    <span>{{ suggestion.query }}</span>
  </MyHistory>
</template>
<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>

Play with suggestion-content slot

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

<template>
  <MyHistory #date="{ date }">
    <span>{{ date }}</span>
  </MyHistory>
</template>
<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory
    }
  };
</script>

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.

<template>
  <MyHistory #suggestion-content-remove="{ suggestion }">
    <CrossIcon />
  </MyHistory>
</template>
<script>
  import { MyHistory } from '@empathyco/x-components/history-queries';
  import { CrossIcon } from '@empathyco/x-components';
  export default {
    name: 'MyHistoryDemo',
    components: {
      MyHistory,
      CrossIcon
    }
  };
</script>

Customizing the items with classes

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