@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.91

package/js/x-modules/history-queries/components/history-queries.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestionClass=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueries',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSuggestions,\n      HistoryQuery\n    },\n    setup() {\n      /**\n       * The filtered list of history queries.\n       *\n       * @internal\n       */\n      const { historyQueriesWithResults } = useGetter('historyQueries', [\n        'historyQueriesWithResults'\n      ]);\n\n      return {\n        historyQueriesWithResults\n      };\n    }\n  });\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAsDE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;QACf,YAAW;AACZ,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,2BAA4B,GAAE,SAAS,CAAC,gBAAgB,EAAE;YAChE,2BAA0B;AAC3B,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestion-class=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * This component renders a list of suggestions coming from the user queries history.\n * Allows the user to select one of them, emitting the needed events. A history query is just\n * another type of suggestion that contains a query that the user has made in the past.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSuggestions,\n    HistoryQuery,\n  },\n  setup() {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueriesWithResults } = useGetter('historyQueries')\n\n    return {\n      historyQueriesWithResults,\n    }\n  },\n})\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    CrossIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAsDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;QACf,YAAY;AACb,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,yBAA0B,EAAA,GAAI,SAAS,CAAC,gBAAgB,CAAA,CAAA;QAEhE,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/history-query.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './history-query.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, createCommentVNode, createVNode, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, createTextVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, createTextVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "x-history-query x-suggestion-group" };
@@ -7,18 +7,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseSuggestion = resolveComponent("BaseSuggestion");
   const _component_RemoveHistoryQuery = resolveComponent("RemoveHistoryQuery");
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    createCommentVNode("\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    "),
     createVNode(_component_BaseSuggestion, mergeProps({
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", _ctx.suggestion, $event)),
       class: ["x-history-query__suggestion", _ctx.suggestionClass]
     }, { suggestion: _ctx.suggestion, suggestionSelectedEvents: _ctx.suggestionSelectedEvents, query: _ctx.query }, {
       "data-test": "history-query",
-      feature: "history_query"
+      feature: "history_query",
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", _ctx.suggestion, $event))
     }), {
       default: withCtx((baseScope) => [
-        createCommentVNode(" eslint-disable max-len "),
-        createCommentVNode("\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      "),
-        createCommentVNode(" eslint-enable max-len "),
         renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ ...baseScope })))
       ]),
       _: 3
@@ -26,18 +22,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 16, ["class"]),
     createVNode(_component_RemoveHistoryQuery, {
       class: normalizeClass(["x-history-query__remove x-suggestion-group-button", _ctx.removeButtonClass]),
-      historyQuery: _ctx.suggestion,
+      "history-query": _ctx.suggestion,
       "data-test": "remove-history-query"
     }, {
       default: withCtx(() => [
-        createCommentVNode("\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      "),
         renderSlot(_ctx.$slots, "remove-button-content", normalizeProps(guardReactiveProps({ suggestion: _ctx.suggestion })), () => [
           createTextVNode("\u2715")
         ])
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["class", "historyQuery"])
+    }, 8, ["class", "history-query"])
   ]);
 }
 var HistoryQuery = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/js/x-modules/history-queries/components/history-query.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      @click=\"$emit('click', suggestion, $event)\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      #default=\"baseScope\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :historyQuery=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import RemoveHistoryQuery from './remove-history-query.vue';\n\n  /**\n   * This component renders a history query suggestion combining two buttons: one for selecting this\n   * suggestion as the search query, and another one to remove this query suggestion from the\n   * history queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: { RemoveHistoryQuery, BaseSuggestion },\n    props: {\n      /**\n       * The history query suggestion to render.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<HistoryQueryModel>,\n        required: true\n      },\n      /** Class inherited by content element. */\n      removeButtonClass: String,\n      /** Class inherited by content element. */\n      suggestionClass: String\n    },\n    emits: ['click'],\n    setup(props) {\n      /**\n       * The normalized query of the history-queries module.\n       *\n       * @internal\n       */\n      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;\n\n      /**\n       * The list of events that are going to be emitted when the suggestion button is pressed.\n       *\n       * @internal\n       * @returns The {@link XEvent} to emit.\n       */\n      const suggestionSelectedEvents = computed(\n        (): Partial<XEventsTypes> => ({\n          UserSelectedAHistoryQuery: props.suggestion\n        })\n      );\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery,\n      HistoryIcon,\n      CrossIcon,\n      Highlight\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createCommentVNode","_createVNode","_mergeProps","suggestionClass","suggestion","suggestionSelectedEvents","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;wCACEA,gBAoCM,CAAA,oBAAA,CAAA,CAAA;AA7BJ,EAAA,OAAAC,SAAA,uBAAA,KAgBiB,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA,CAfT,iNAAmC,CAAA;AAAA,IAAAC,WAAA,CACnC,2BAA6BC,UAC3BC,CAAAA;AAAAA,MACEC,OAAAA,EAAAA,MAAAA,CAAAA,CAAAA,CAAAA,KAAAA,MAAAA,CAAU,qCAAEC,IAAwB,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA;AAAA,MAC9C,KAAyB,EAAA,CAAA,6BAAA,EAAA,IAAA,CAAA,eAAA,CAAA;AAAA,KAAA,EACzB,cAAQ,IAAe,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,EAAA;AAAA,MAAA,WAAA,EAAA,eAAA;MACtB,OAAO,EAAA,eAAA;AAAA,KAER,CAAA,EAAA;AAAA,MACA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAAA,QAIAN,kBAA8B,CAAA,0BAAA,CAAA;AAAA,QAC9BA,mBAAkC,gVAAN,CAAA;AAAA,QAAAA,kBAAA,CAAA,yBAAA,CAAA;AAvBlC,QAAAO,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAyBI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EACE,IA1BN,CA0BY,OAAA,CAAA,CAAA;AAAA,IAAAR,WAAA,CAEL,6BAAwB,EAAA;AAAA,MACzB,sBAAU,CAAsB,mDAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,MAAA,YAAA,EAAA,IAAA,CAAA,UAAA;AA7BtC,MAAA,WAAA,EAAA,sBAAA;AAAA,KAAA,EAAA;eAmCMK,OAAmE,CAAA,MAAA;AAAA,QAAAN,kBAAA,CAAR,+IAAC,CAAA;AAAA,QAAAO,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,uBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;AAnClE,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries').normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","suggestionClass","_createVNode","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;wCACEA,gBAoCM,CAAA,oBAAA,CAAA,CAAA;AA3BF,EAAA,OAAAC,SAAA,uBAAmC,KAC3BC,EAAAA,UAAAA,EAAAA;AAAAA,IACYC,WAAA,CAAA,yBAAA,EAAAC,UAAA,CAAA;AAAA,MACpB,KAAyB,EAAA,CAAA,6BAAA,EAAA,IAAA,CAAA,eAAA,CAAA;AAAA,KAAA,EACzB,cAAQ,IAAe,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,EAAA;AAAA,MACtB,WAAK,EAAA,eAAA;AAAA,MAAA,OAAA,EAAA,eAAA;AAfZ,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KASc,MAAS,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,OAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAcjB,CAAA,EAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAvBN,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAyBI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EACE,IA1BN,CA0BY,OAAA,CAAA,CAAA;AAAA,IAAAL,WAAA,CAEL,6BAAyB,EAAA;AAAA,MAC1B,sBAAU,CAAsB,mDAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,MAAA,eAAA,EAAA,IAAA,CAAA,UAAA;AA7BtC,MAAA,WAAA,EAAA,sBAAA;AAAA,KAAA,EAAA;eAAAE,OAmCkE,CAAA,MAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,uBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;AAnClE,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-query.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
-import { historyQueriesXModule } from '../x-module.js';
 import { useGetter } from '../../../composables/use-getter.js';
+import { historyQueriesXModule } from '../x-module.js';
 import RemoveHistoryQuery from './remove-history-query.vue.js';
 
 /**
@@ -23,12 +23,12 @@ var _sfc_main = defineComponent({
          */
         suggestion: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Class inherited by content element. */
         removeButtonClass: String,
         /** Class inherited by content element. */
-        suggestionClass: String
+        suggestionClass: String,
     },
     emits: ['click'],
     setup(props) {
@@ -37,7 +37,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;
+        const query = useGetter('historyQueries').normalizedQuery;
         /**
          * The list of events that are going to be emitted when the suggestion button is pressed.
          *
@@ -45,13 +45,13 @@ var _sfc_main = defineComponent({
          * @returns The {@link XEvent} to emit.
          */
         const suggestionSelectedEvents = computed(() => ({
-            UserSelectedAHistoryQuery: props.suggestion
+            UserSelectedAHistoryQuery: props.suggestion,
         }));
         return {
             query,
-            suggestionSelectedEvents
+            suggestionSelectedEvents,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/history-queries/components/history-query.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      @click=\"$emit('click', suggestion, $event)\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      #default=\"baseScope\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :historyQuery=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import RemoveHistoryQuery from './remove-history-query.vue';\n\n  /**\n   * This component renders a history query suggestion combining two buttons: one for selecting this\n   * suggestion as the search query, and another one to remove this query suggestion from the\n   * history queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: { RemoveHistoryQuery, BaseSuggestion },\n    props: {\n      /**\n       * The history query suggestion to render.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<HistoryQueryModel>,\n        required: true\n      },\n      /** Class inherited by content element. */\n      removeButtonClass: String,\n      /** Class inherited by content element. */\n      suggestionClass: String\n    },\n    emits: ['click'],\n    setup(props) {\n      /**\n       * The normalized query of the history-queries module.\n       *\n       * @internal\n       */\n      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;\n\n      /**\n       * The list of events that are going to be emitted when the suggestion button is pressed.\n       *\n       * @internal\n       * @returns The {@link XEvent} to emit.\n       */\n      const suggestionSelectedEvents = computed(\n        (): Partial<XEventsTypes> => ({\n          UserSelectedAHistoryQuery: props.suggestion\n        })\n      );\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery,\n      HistoryIcon,\n      CrossIcon,\n      Highlight\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { HistoryQuery } from '@empathyco/x-components/history-queries';\n  export default {\n    name: 'HistoryQueryDemo',\n    components: {\n      HistoryQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'HistoryQuery',\n          query: 'trousers',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiDE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,kBAAkB,EAAE,gBAAgB;AAClD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,MAAM;;AAEzB,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;AAChB,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,gBAAgB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAA;AAE9E;;;;;AAKE;AACF,QAAA,MAAM,wBAAuB,GAAI,QAAQ,CACvC,OAA8B;YAC5B,yBAAyB,EAAE,KAAK,CAAC,UAAS;AAC3C,SAAA,CAAA,CACF,CAAA;QAED,OAAO;YACL,KAAK;YACL,wBAAuB;SACxB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries').normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,kBAAkB,EAAE,gBAAgB;AAClD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,iBAAiB,EAAE,MAAM;;AAEzB,QAAA,eAAe,EAAE,MAAM;AACxB,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;AAChB,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,KAAI,GAAI,SAAS,CAAC,gBAAgB,CAAC,CAAC,eAAc,CAAA;AAExD;;;;;AAKE;AACF,QAAA,MAAM,wBAAuB,GAAI,QAAQ,CACvC,OAA8B;YAC5B,yBAAyB,EAAE,KAAK,CAAC,UAAU;AAC5C,SAAA,CAAC,CACJ,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/my-history.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './my-history.vue2.js';
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createElementVNode, toDisplayString, createVNode, normalizeClass, createCommentVNode, mergeProps, createTextVNode } from 'vue';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createElementVNode, toDisplayString, createVNode, normalizeClass, mergeProps, createTextVNode, createCommentVNode } from 'vue';
 import './my-history.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -19,7 +19,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       (openBlock(true), createElementBlock(
         Fragment,
         null,
-        renderList(_ctx.groupByDate, (historyQueries, date) => {
+        renderList(_ctx.groupByDate, (queries, date) => {
           return openBlock(), createElementBlock("li", {
             key: date,
             class: "x-my-history-item",
@@ -35,13 +35,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ], true),
             createVNode(_component_BaseSuggestions, {
-              suggestions: historyQueries,
+              suggestions: queries,
               class: normalizeClass(["x-my-history-queries", _ctx.queriesListClass]),
               "data-test": "my-history-queries",
               animation: _ctx.animation
             }, {
               default: withCtx(({ suggestion, index }) => [
-                createCommentVNode("\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      "),
                 renderSlot(_ctx.$slots, "suggestion", mergeProps({ ref_for: true }, { suggestion, index, formatTime: _ctx.formatTime }), () => [
                   createVNode(_component_HistoryQuery, {
                     suggestion,
@@ -49,7 +48,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     class: "x-history-queries__item x-suggestion"
                   }, {
                     default: withCtx(() => [
-                      createCommentVNode("\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            "),
                       renderSlot(_ctx.$slots, "suggestion-content", mergeProps({ ref_for: true }, { suggestion, index, formatTime: _ctx.formatTime }), () => [
                         createTextVNode(
                           toDisplayString(suggestion.query) + " - " + toDisplayString(_ctx.formatTime(suggestion.timestamp)),
@@ -59,7 +57,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       ], true)
                     ]),
                     "remove-button-content": withCtx(() => [
-                      createCommentVNode("\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            "),
                       renderSlot(_ctx.$slots, "suggestion-remove-content", mergeProps({ ref_for: true }, { suggestion, index }), void 0, true)
                     ]),
                     _: 2

package/js/x-modules/history-queries/components/my-history.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(historyQueries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"historyQueries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useState } from '../../../composables/use-state';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * The component renders the full history of user searched queries grouped by the day\n   * they were performed.\n   *\n   * @remarks\n   *\n   * Allows the user to select one of them, emitting the needed events.\n   * A history query is just another type of suggestion that contains a query that the user has\n   * made in the past.\n   * @public\n   */\n  export default defineComponent({\n    name: 'MyHistory',\n    xModule: historyQueriesXModule.name,\n    components: {\n      HistoryQuery,\n      BaseSuggestions\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestions.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * The current locale.\n       *\n       * @public\n       */\n      locale: {\n        type: String,\n        default: 'en'\n      },\n      /** Class inherited by content element. */\n      queriesListClass: String\n    },\n    setup(props) {\n      /**\n       * The list of history queries.\n       *\n       * @internal\n       */\n      const { historyQueries } = useState('historyQueries', ['historyQueries']);\n\n      /**\n       * The provided {@link SnippetConfig}.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The locale that it is going to be used. It can be the one send it by the snippet config or\n       * the one pass it using the prop.\n       *\n       * @returns The locale to be used.\n       * @internal\n       */\n      const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);\n\n      /**\n       * Returns a record of history queries grouped by date.\n       *\n       * @example\n       * ```typescript\n       *  const historyQueriesGrouped = {\n       *    'Monday, January 10th, 2022' : [{\n       *      query: 'lego',\n       *      modelName: 'HistoryQuery',\n       *      timestamp: 121312312\n       *    }],\n       *    'Tuesday, January 11th, 2022' : [{\n       *      query: 'barbie',\n       *      modelName: 'HistoryQuery',\n       *      timestamp: 15221212\n       *    }]\n       *  }\n       * ```\n       * @returns The history queries grouped by date.\n       * @internal\n       */\n      const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n        return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n          return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n            day: 'numeric',\n            weekday: 'long',\n            month: 'long',\n            year: 'numeric'\n          });\n        });\n      });\n\n      /**\n       * Formats a timestamp into `hh:mm [PM/AM]` format.\n       *\n       * @example\n       * ```typescript\n       * // locale 'es'\n       * console.log(formatTime(Date.now()) // '16:54'.\n       *\n       * // locale 'en'\n       * console.log(formatTime(Date.now()) // '16:54 PM'.\n       * ```\n       * @param timestamp - The timestamp to format.\n       * @returns The formatted time.\n       * @internal\n       */\n      const formatTime = (timestamp: number) =>\n        new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n          hour: '2-digit',\n          minute: '2-digit'\n        });\n\n      /**\n       * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n       * stored.\n       *\n       * @returns True if there are history queries; false otherwise.\n       * @internal\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQueryType[])\n      );\n\n      return {\n        hasHistoryQueries,\n        groupByDate,\n        historyQueries,\n        formatTime\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-my-history {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      CrossIcon\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","animation","_withCtx","_createCommentVNode","_renderSlot","_mergeProps"],"mappings":";;;;;MAS8C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,yBAAA;;;;;AARJ,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AADpD,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAC,SAAA,EAC0E,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AAD/E,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,cAAA,EAAA,IAAA,KAAA;AACL,UAAA,OAAAL,SAAA,EAAoB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACzB,GAAA,EAAA,IAAA;AAAA,YAAA,KAAA,EAAA,mBAAA;YAEA,WAEO,EAAA,iBAAA;AAAA,WAAA,EAAA;;AACP,cAAAG,kBAAA;AAAA,gBA0CkB,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAAC,eAAA,CAAA,IAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAzCf,EAAA,IAAA,CAAA;AAAA,YAAAC,WAAA,CAZT,0BAac,EAAA;AAAA,cAEN,WAAU,EAAA,cAAA;AAAA,cACT,sBAAWC,CAAS,sBAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,oBAAA;cAEV,SAAO,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;AAOhB,cAAA,OAAA,EAAAC,OAAA,CA0BO,CA1BP,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AAAA,gBAyBiBC,kBAAA,CAAA,6RAAA,CAAA;AAAA,gBAAAC,UAAA,CAvBZ,KAAY,MAAU,EAAA,YAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,kBAAAL,WAAA,CACd,uBAAqB,EAAA;AAAA,oBAC9B,UAAA;AAAA,oBAAA,WAAA,EAAA,oBAAA;oBAEW,KAAO,EAAA,sCAAA;AAAA,mBAAA,EAAA;6BAOhBE,OAEO,CAAA,MAAA;AAAA,sBAAAC,kBAAA,CAxCvB,8TAuC6E,CAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAGpD,uBAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;AAM+D,oBAAA,uBAAA,EAAAH,OAAA,CAAA,MAAA;AAAA,sBAAAC,kBAAA,CAAA,yOAAA,CAAA;AAhDxF,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;;;AAAA,iBAAA,EAAA,IAAA,CAAA;AAAA,eAAA,CAAA;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAF,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","animation","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;MAS8C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,yBAAA;;;;;AARJ,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AADpD,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAC,SAAA,EAC0E,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AAD/E,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,OAAA,EAAA,IAAA,KAAA;AACL,UAAA,OAAAL,SAAA,EAAoB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACzB,GAAA,EAAA,IAAA;AAAA,YAAA,KAAA,EAAA,mBAAA;YAEA,WAEO,EAAA,iBAAA;AAAA,WAAA,EAAA;;AACP,cAAAG,kBAAA;AAAA,gBA0CkB,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAAC,eAAA,CAAA,IAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAzCf,EAAA,IAAA,CAAA;AAAA,YAAAC,WAAA,CAZT,0BAac,EAAA;AAAA,cAEN,WAAU,EAAA,OAAA;AAAA,cACT,sBAAWC,CAAS,sBAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,oBAAA;cAEV,SAAO,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;uBAQdC,OAwBe,CAAA,CAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AAAA,gBAAAC,UAAA,CAvBZ,KAAY,MAAU,EAAA,YAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,kBAAAJ,WAAA,CACd,uBAAqB,EAAA;AAAA,oBAC9B,UAAA;AAAA,oBAAA,WAAA,EAAA,oBAAA;oBAEW,KAAO,EAAA,sCAAA;AAAA,mBAAA,EAAA;AA/BhC,oBAAA,OAAA,EAAAE,OAAA,CAAA,MAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AA0CyB,uBAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;AA1CzB,sBAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;;;AAAA,iBAAA,EAAA,IAAA,CAAA;AAAA,eAAA,CAAA;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/history-queries/components/my-history.vue2.js

@@ -1,9 +1,9 @@
 import { defineComponent, inject, computed } from 'vue';
 import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
+import { useState } from '../../../composables/use-state.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 import { groupItemsBy, isArrayEmpty } from '../../../utils/array.js';
 import { historyQueriesXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
-import { useState } from '../../../composables/use-state.js';
 import HistoryQuery from './history-query.vue.js';
 
 /**
@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
     xModule: historyQueriesXModule.name,
     components: {
         HistoryQuery,
-        BaseSuggestions
+        BaseSuggestions,
     },
     props: {
         /**
@@ -32,7 +32,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * The current locale.
@@ -41,10 +41,10 @@ var _sfc_main = defineComponent({
          */
         locale: {
             type: String,
-            default: 'en'
+            default: 'en',
         },
         /** Class inherited by content element. */
-        queriesListClass: String
+        queriesListClass: String,
     },
     setup(props) {
         /**
@@ -52,7 +52,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { historyQueries } = useState('historyQueries', ['historyQueries']);
+        const { historyQueries } = useState('historyQueries');
         /**
          * The provided {@link SnippetConfig}.
          *
@@ -94,7 +94,7 @@ var _sfc_main = defineComponent({
                     day: 'numeric',
                     weekday: 'long',
                     month: 'long',
-                    year: 'numeric'
+                    year: 'numeric',
                 });
             });
         });
@@ -115,7 +115,7 @@ var _sfc_main = defineComponent({
          */
         const formatTime = (timestamp) => new Date(timestamp).toLocaleTimeString(usedLocale.value, {
             hour: '2-digit',
-            minute: '2-digit'
+            minute: '2-digit',
         });
         /**
          * The `hasHistoryQueries` computed property is a flag representing if there are history queries
@@ -129,9 +129,9 @@ var _sfc_main = defineComponent({
             hasHistoryQueries,
             groupByDate,
             historyQueries,
-            formatTime
+            formatTime,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/history-queries/components/my-history.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(historyQueries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"historyQueries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useState } from '../../../composables/use-state';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * The component renders the full history of user searched queries grouped by the day\n   * they were performed.\n   *\n   * @remarks\n   *\n   * Allows the user to select one of them, emitting the needed events.\n   * A history query is just another type of suggestion that contains a query that the user has\n   * made in the past.\n   * @public\n   */\n  export default defineComponent({\n    name: 'MyHistory',\n    xModule: historyQueriesXModule.name,\n    components: {\n      HistoryQuery,\n      BaseSuggestions\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestions.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * The current locale.\n       *\n       * @public\n       */\n      locale: {\n        type: String,\n        default: 'en'\n      },\n      /** Class inherited by content element. */\n      queriesListClass: String\n    },\n    setup(props) {\n      /**\n       * The list of history queries.\n       *\n       * @internal\n       */\n      const { historyQueries } = useState('historyQueries', ['historyQueries']);\n\n      /**\n       * The provided {@link SnippetConfig}.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The locale that it is going to be used. It can be the one send it by the snippet config or\n       * the one pass it using the prop.\n       *\n       * @returns The locale to be used.\n       * @internal\n       */\n      const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);\n\n      /**\n       * Returns a record of history queries grouped by date.\n       *\n       * @example\n       * ```typescript\n       *  const historyQueriesGrouped = {\n       *    'Monday, January 10th, 2022' : [{\n       *      query: 'lego',\n       *      modelName: 'HistoryQuery',\n       *      timestamp: 121312312\n       *    }],\n       *    'Tuesday, January 11th, 2022' : [{\n       *      query: 'barbie',\n       *      modelName: 'HistoryQuery',\n       *      timestamp: 15221212\n       *    }]\n       *  }\n       * ```\n       * @returns The history queries grouped by date.\n       * @internal\n       */\n      const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n        return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n          return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n            day: 'numeric',\n            weekday: 'long',\n            month: 'long',\n            year: 'numeric'\n          });\n        });\n      });\n\n      /**\n       * Formats a timestamp into `hh:mm [PM/AM]` format.\n       *\n       * @example\n       * ```typescript\n       * // locale 'es'\n       * console.log(formatTime(Date.now()) // '16:54'.\n       *\n       * // locale 'en'\n       * console.log(formatTime(Date.now()) // '16:54 PM'.\n       * ```\n       * @param timestamp - The timestamp to format.\n       * @returns The formatted time.\n       * @internal\n       */\n      const formatTime = (timestamp: number) =>\n        new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n          hour: '2-digit',\n          minute: '2-digit'\n        });\n\n      /**\n       * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n       * stored.\n       *\n       * @returns True if there are history queries; false otherwise.\n       * @internal\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQueryType[])\n      );\n\n      return {\n        hasHistoryQueries,\n        groupByDate,\n        historyQueries,\n        formatTime\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-my-history {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      CrossIcon\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAsEE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,eAAc;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAK;AACxB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;AAEzE;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAM,aAAa,EAAE,IAAK,IAAG,KAAK,CAAC,MAAM,CAAC,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;AAoBE;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAAsC;YACjE,OAAO,YAAY,CAAC,cAAc,CAAC,KAA2B,EAAE,OAAM,IAAK;AACzE,gBAAA,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACtE,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,SAAQ;AACf,iBAAA,CAAC,CAAA;AACJ,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;AAcE;AACF,QAAA,MAAM,aAAa,CAAC,SAAiB,KACnC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACvD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAQ;AACjB,SAAA,CAAC,CAAA;AAEJ;;;;;;AAME;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAA2B,CAAA,CAC/D,CAAA;QAED,OAAO;YACL,iBAAiB;YACjB,WAAW;YACX,cAAc;YACd,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"my-history.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAsEA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,EAAE,cAAa,KAAM,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAEpD;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAA,CAAA;AAEvE;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAM,aAAa,EAAE,IAAK,IAAG,KAAK,CAAC,MAAM,CAAA,CAAA;AAErE;;;;;;;;;;;;;;;;;;;;AAoBE;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAAsC;YACjE,OAAO,YAAY,CAAC,cAAc,CAAC,KAA2B,EAAE,OAAM,IAAK;AACzE,gBAAA,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACtE,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,SAAS;AAChB,iBAAA,CAAA,CAAA;AACH,aAAC,CAAA,CAAA;AACH,SAAC,CAAA,CAAA;AAED;;;;;;;;;;;;;;AAcE;AACF,QAAA,MAAM,aAAa,CAAC,SAAiB,KACnC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACvD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,CAAA,CAAA;AAEH;;;;;;AAME;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAA2B,CAAC,CACjE,CAAA;QAEA,OAAO;YACL,iBAAiB;YACjB,WAAW;YACX,cAAc;YACd,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/remove-history-query.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './remove-history-query.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10,7 +10,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "remove"
   }, {
     default: withCtx(() => [
-      createCommentVNode("  @slot (Required) Button content with a text, an icon or both "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

package/js/x-modules/history-queries/components/remove-history-query.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-remove-history-query\"\n    :events=\"removeHistoryQueryEvent\"\n    aria-label=\"remove\"\n  >\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RemoveHistoryQuery',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseEventButton\n    },\n    props: {\n      /**\n       * The historyQuery that will be removed when clicking the clear button.\n       *\n       * @public\n       */\n      historyQuery: {\n        type: Object as PropType<HistoryQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The event handler that will be triggered when clicking on the clear history query button.\n       *\n       * @remarks\n       * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const removeHistoryQueryEvent = computed(\n        (): Partial<XEventsTypes> => ({ UserPressedRemoveHistoryQuery: props.historyQuery })\n      );\n\n      return {\n        removeHistoryQueryEvent\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedRemoveHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AAQoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAyB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAChC,KAAA,EAAA,wBAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,uBAAA;AAJJ,IAAA,YAAA,EAAA,QAAA;AAAA,GAAA,EAAA;aAOIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,iEAAA,CAAA;AAPZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"remove-history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-remove-history-query\"\n    :events=\"removeHistoryQueryEvent\"\n    aria-label=\"remove\"\n  >\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * Button that when it is pressed emits the\n * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n * intention to remove a query in the history.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RemoveHistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * The historyQuery that will be removed when clicking the clear button.\n     *\n     * @public\n     */\n    historyQuery: {\n      type: Object as PropType<HistoryQuery>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The event handler that will be triggered when clicking on the clear history query button.\n     *\n     * @remarks\n     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const removeHistoryQueryEvent = computed(\n      (): Partial<XEventsTypes> => ({ UserPressedRemoveHistoryQuery: props.historyQuery }),\n    )\n\n    return {\n      removeHistoryQueryEvent,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedRemoveHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AAQoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAyB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAChC,KAAA,EAAA,wBAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,uBAAA;AAJJ,IAAA,YAAA,EAAA,QAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/history-queries/components/remove-history-query.vue2.js

@@ -13,7 +13,7 @@ var _sfc_main = defineComponent({
     name: 'RemoveHistoryQuery',
     xModule: historyQueriesXModule.name,
     components: {
-        BaseEventButton
+        BaseEventButton,
     },
     props: {
         /**
@@ -23,8 +23,8 @@ var _sfc_main = defineComponent({
          */
         historyQuery: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         /**
@@ -38,9 +38,9 @@ var _sfc_main = defineComponent({
          */
         const removeHistoryQueryEvent = computed(() => ({ UserPressedRemoveHistoryQuery: props.historyQuery }));
         return {
-            removeHistoryQueryEvent
+            removeHistoryQueryEvent,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };