@empathyco/x-components 6.0.0-alpha.18 → 6.0.0-alpha.181

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

@@ -1,57 +1,57 @@
 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';
 
-/**
- * This component renders a history query suggestion combining two buttons: one for selecting this
- * suggestion as the search query, and another one to remove this query suggestion from the
- * history queries.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'HistoryQuery',
-    xModule: historyQueriesXModule.name,
-    components: { RemoveHistoryQuery, BaseSuggestion },
-    props: {
-        /**
-         * The history query suggestion to render.
-         *
-         * @public
-         */
-        suggestion: {
-            type: Object,
-            required: true
-        },
-        /** Class inherited by content element. */
-        removeButtonClass: String,
-        /** Class inherited by content element. */
-        suggestionClass: String
-    },
-    emits: ['click'],
-    setup(props) {
-        /**
-         * The normalized query of the history-queries module.
-         *
-         * @internal
-         */
-        const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;
-        /**
-         * The list of events that are going to be emitted when the suggestion button is pressed.
-         *
-         * @internal
-         * @returns The {@link XEvent} to emit.
-         */
-        const suggestionSelectedEvents = computed(() => ({
-            UserSelectedAHistoryQuery: props.suggestion
-        }));
-        return {
-            query,
-            suggestionSelectedEvents
-        };
-    }
+/**
+ * This component renders a history query suggestion combining two buttons: one for selecting this
+ * suggestion as the search query, and another one to remove this query suggestion from the
+ * history queries.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'HistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: { RemoveHistoryQuery, BaseSuggestion },
+    props: {
+        /**
+         * The history query suggestion to render.
+         *
+         * @public
+         */
+        suggestion: {
+            type: Object,
+            required: true,
+        },
+        /** Class inherited by content element. */
+        removeButtonClass: String,
+        /** Class inherited by content element. */
+        suggestionClass: String,
+    },
+    emits: ['click'],
+    setup(props) {
+        /**
+         * The normalized query of the history-queries module.
+         *
+         * @internal
+         */
+        const query = useGetter('historyQueries').normalizedQuery;
+        /**
+         * The list of events that are going to be emitted when the suggestion button is pressed.
+         *
+         * @internal
+         * @returns The {@link XEvent} to emit.
+         */
+        const suggestionSelectedEvents = computed(() => ({
+            UserSelectedAHistoryQuery: props.suggestion,
+        }));
+        return {
+            query,
+            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":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementBlock","_Fragment","_renderList","_renderSlot","_createElementVNode","_toDisplayString","_createVNode","_normalizeClass","_mergeProps","_createTextVNode","_createCommentVNode"],"mappings":";;;;;;EASc,KAAM,EAAA,yBAAA;AAAA,EAA0B,WAAU,EAAA,iBAAA;;;;;SARrB,IAAjC,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,WAAA,CAsDYC,wBAtDI,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAD3B,GAAA,EAAA,CAAA;AAAA,IACsD,KAAM,EAAA,cAAA;AAAA,IAAe,GAAI,EAAA,IAAA;AAAA,GAAA,EAAA;AAD/E,IAAA,OAAA,EAAAC,OAAA,CAGM,MAAsC;AAAA,OADxCH,SAAA,CAAA,IAAA,CAAA,EAAAI,kBAAA;AAAA,QAoDKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAtDTC,UAGgC,CAAA,IAAA,CAAA,WAAA,EAHhC,CAGc,OAAA,EAAS,IAAI,KAAA;8BADvBF,kBAoDK,CAAA,IAAA,EAAA;AAAA,YAlDF,GAAK,EAAA,IAAA;AAAA,YACN,KAAM,EAAA,mBAAA;AAAA,YACN,WAAU,EAAA,iBAAA;AAAA,WAAA,EAAA;YAEVG,UAEO,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAA,EAFY,IAAU,EAAA,EAA7B,MAEO;AAAA,cADLC,kBAAA;AAAA,gBAAmF,MAAA;AAAA,gBAAnF,UAAA;AAAA,gBAAmFC,gBAAd,IAAI,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,EAAA,IAAA,CAAA;YAE3EC,WA0CkB,CAAA,0BAAA,EAAA;AAAA,cAzCf,WAAa,EAAA,OAAA;AAAA,cACd,KAAA,EAbRC,cAac,CAAA,CAAA,sBAAA,EACE,IAAgB,CAAA,gBAAA,CAAA,CAAA;AAAA,cACxB,WAAU,EAAA,oBAAA;AAAA,cACT,SAAW,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;AAED,cAAA,OAAA,EAAOR,OAOhB,CAAA,CA0BO,EAjCa,UAAA,EAAY,KAAK,EAAA,KAAA;AAAA,gBAOrCI,UAAA,CA0BO,IA1BP,CAAA,MAAA,EAAA,YAAA,EAAAK,UAAA,CA0BO,EAnDjB,OAAA,EAAA,IAAA,EAAA,EAAA,EAyB4C,YAAY,KAAK,EAAA,UAAA,EAAE,IAAU,CAAA,UAAA,EAAA,CAAA,EAA/D,MA0BO;AAAA,kBAzBLF,WAwBe,CAAA,uBAAA,EAAA;AAAA,oBAvBZ,UAAA;AAAA,oBACD,WAAU,EAAA,oBAAA;AAAA,oBACV,KAAM,EAAA,sCAAA;AAAA,mBAAA,EAAA;AAEK,oBAAA,OAAA,EAAOP,QAOhB,MAEO;AAAA,sBAFPI,UAAA,CAEO,IAFP,CAAA,MAAA,EAAA,oBAAA,EAAAK,UAAA,CAEO,EAxCvB,OAAA,EAAA,IAAA,EAAA,EAAA,EAsC0D,YAAY,KAAK,EAAA,UAAA,EAAE,IAAU,CAAA,UAAA,EAAA,CAAA,EAAvE,MAEO;AAAA,wBAxCvBC,eAAA;AAAA,0BAAAJ,eAAA,CAuCqB,WAAW,KAAK,CAAA,GAAG,QAAGA,eAAG,CAAA,IAAA,CAAA,UAAA,CAAW,WAAW,SAAS,CAAA,CAAA;AAAA,0BAAA,CAAA;AAAA;AAAA,yBAAA;AAAA,uBAAA,EAAA,IAAA,CAAA;;AAGpD,oBAAA,uBAAA,EAAqBN,QAM9B,MAAwE;AAAA,sBAAxEI,WAAwE,IAAxE,CAAA,MAAA,EAAA,2BAAA,EAAAK,UAAA,CAAwE,EAhDxF,OAAA,EAAA,IAAA,EAAA,EAAA,EAgDiE,YAAY,KAAK,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;AAhDlF,oBAAA,CAAA,EAAA,CAAA;AAAA;AAAA,mBAAA,EAAA,IAAA,EAAA,CAAA,YAAA,CAAA,CAAA;;;AAAA,cAAA,CAAA,EAAA,CAAA;AAAA;AAAA,aAAA,EAAA,IAAA,EAAA,CAAA,aAAA,EAAA,OAAA,EAAA,WAAA,CAAA,CAAA;;;;;;;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,137 +1,137 @@
 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';
 
-/**
- * The component renders the full history of user searched queries grouped by the day
- * they were performed.
- *
- * @remarks
- *
- * Allows the user to select one of them, emitting the needed events.
- * A history query is just another type of suggestion that contains a query that the user has
- * made in the past.
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'MyHistory',
-    xModule: historyQueriesXModule.name,
-    components: {
-        HistoryQuery,
-        BaseSuggestions
-    },
-    props: {
-        /**
-         * Animation component that will be used to animate the suggestions.
-         *
-         * @public
-         */
-        animation: {
-            type: AnimationProp,
-            default: 'ul'
-        },
-        /**
-         * The current locale.
-         *
-         * @public
-         */
-        locale: {
-            type: String,
-            default: 'en'
-        },
-        /** Class inherited by content element. */
-        queriesListClass: String
-    },
-    setup(props) {
-        /**
-         * The list of history queries.
-         *
-         * @internal
-         */
-        const { historyQueries } = useState('historyQueries', ['historyQueries']);
-        /**
-         * The provided {@link SnippetConfig}.
-         *
-         * @internal
-         */
-        const snippetConfig = inject('snippetConfig');
-        /**
-         * The locale that it is going to be used. It can be the one send it by the snippet config or
-         * the one pass it using the prop.
-         *
-         * @returns The locale to be used.
-         * @internal
-         */
-        const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);
-        /**
-         * Returns a record of history queries grouped by date.
-         *
-         * @example
-         * ```typescript
-         *  const historyQueriesGrouped = {
-         *    'Monday, January 10th, 2022' : [{
-         *      query: 'lego',
-         *      modelName: 'HistoryQuery',
-         *      timestamp: 121312312
-         *    }],
-         *    'Tuesday, January 11th, 2022' : [{
-         *      query: 'barbie',
-         *      modelName: 'HistoryQuery',
-         *      timestamp: 15221212
-         *    }]
-         *  }
-         * ```
-         * @returns The history queries grouped by date.
-         * @internal
-         */
-        const groupByDate = computed(() => {
-            return groupItemsBy(historyQueries.value, current => {
-                return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
-                    day: 'numeric',
-                    weekday: 'long',
-                    month: 'long',
-                    year: 'numeric'
-                });
-            });
-        });
-        /**
-         * Formats a timestamp into `hh:mm [PM/AM]` format.
-         *
-         * @example
-         * ```typescript
-         * // locale 'es'
-         * console.log(formatTime(Date.now()) // '16:54'.
-         *
-         * // locale 'en'
-         * console.log(formatTime(Date.now()) // '16:54 PM'.
-         * ```
-         * @param timestamp - The timestamp to format.
-         * @returns The formatted time.
-         * @internal
-         */
-        const formatTime = (timestamp) => new Date(timestamp).toLocaleTimeString(usedLocale.value, {
-            hour: '2-digit',
-            minute: '2-digit'
-        });
-        /**
-         * The `hasHistoryQueries` computed property is a flag representing if there are history queries
-         * stored.
-         *
-         * @returns True if there are history queries; false otherwise.
-         * @internal
-         */
-        const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
-        return {
-            hasHistoryQueries,
-            groupByDate,
-            historyQueries,
-            formatTime
-        };
-    }
+/**
+ * The component renders the full history of user searched queries grouped by the day
+ * they were performed.
+ *
+ * @remarks
+ *
+ * Allows the user to select one of them, emitting the needed events.
+ * A history query is just another type of suggestion that contains a query that the user has
+ * made in the past.
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'MyHistory',
+    xModule: historyQueriesXModule.name,
+    components: {
+        HistoryQuery,
+        BaseSuggestions,
+    },
+    props: {
+        /**
+         * Animation component that will be used to animate the suggestions.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul',
+        },
+        /**
+         * The current locale.
+         *
+         * @public
+         */
+        locale: {
+            type: String,
+            default: 'en',
+        },
+        /** Class inherited by content element. */
+        queriesListClass: String,
+    },
+    setup(props) {
+        /**
+         * The list of history queries.
+         *
+         * @internal
+         */
+        const { historyQueries } = useState('historyQueries');
+        /**
+         * The provided {@link SnippetConfig}.
+         *
+         * @internal
+         */
+        const snippetConfig = inject('snippetConfig');
+        /**
+         * The locale that it is going to be used. It can be the one send it by the snippet config or
+         * the one pass it using the prop.
+         *
+         * @returns The locale to be used.
+         * @internal
+         */
+        const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);
+        /**
+         * Returns a record of history queries grouped by date.
+         *
+         * @example
+         * ```typescript
+         *  const historyQueriesGrouped = {
+         *    'Monday, January 10th, 2022' : [{
+         *      query: 'lego',
+         *      modelName: 'HistoryQuery',
+         *      timestamp: 121312312
+         *    }],
+         *    'Tuesday, January 11th, 2022' : [{
+         *      query: 'barbie',
+         *      modelName: 'HistoryQuery',
+         *      timestamp: 15221212
+         *    }]
+         *  }
+         * ```
+         * @returns The history queries grouped by date.
+         * @internal
+         */
+        const groupByDate = computed(() => {
+            return groupItemsBy(historyQueries.value, current => {
+                return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
+                    day: 'numeric',
+                    weekday: 'long',
+                    month: 'long',
+                    year: 'numeric',
+                });
+            });
+        });
+        /**
+         * Formats a timestamp into `hh:mm [PM/AM]` format.
+         *
+         * @example
+         * ```typescript
+         * // locale 'es'
+         * console.log(formatTime(Date.now()) // '16:54'.
+         *
+         * // locale 'en'
+         * console.log(formatTime(Date.now()) // '16:54 PM'.
+         * ```
+         * @param timestamp - The timestamp to format.
+         * @returns The formatted time.
+         * @internal
+         */
+        const formatTime = (timestamp) => new Date(timestamp).toLocaleTimeString(usedLocale.value, {
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+        /**
+         * The `hasHistoryQueries` computed property is a flag representing if there are history queries
+         * stored.
+         *
+         * @returns True if there are history queries; false otherwise.
+         * @internal
+         */
+        const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+        return {
+            hasHistoryQueries,
+            groupByDate,
+            historyQueries,
+            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