@empathyco/x-components 7.2.0 → 7.2.1

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.1](https://github.com/empathyco/x/compare/@empathyco/x-components@7.2.0...@empathyco/x-components@7.2.1) (2026-06-26)
+
+### Code Refactoring
+
+* **recommendations:** provide `LIST_ITEMS_KEY` injection token (#2124)
+
+
 ## [7.2.0](https://github.com/empathyco/x/compare/@empathyco/x-components@7.1.1...@empathyco/x-components@7.2.0) (2026-06-18)
 
 ### Features

package/js/x-modules/recommendations/components/recommendations.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](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 link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot"],"mappings":";;;;;;SAGU,IAAA,CAAA,eAAA,CAAgB,MAAA,IAAAA,SAAA,EAAA,EAFxBC,WAAA,CAmBYC,uBAAA,CAlBL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,GAAA,EAAI,IAAA;AAAA,IACJ,WAAA,EAAU,iBAAA;AAAA,IACV,KAAA,EAAM;AAAA,GAAA,EAAA;qBAGJ,MAAyC;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EAD3CG,kBAAA;AAAA,QAWKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAVsB,IAAA,CAAA,eAAA,EAAe,CAAjC,cAAA,KAAc;8BADvBF,kBAAA,CAWK,IAAA,EAAA;AAAA,YATF,KAAK,cAAA,CAAe,EAAA;AAAA,YACrB,KAAA,EAAM,yBAAA;AAAA,YACN,WAAA,EAAU;AAAA,WAAA,EAAA;AAMV,YAAAG,UAAA,CAAyC,0BAAlC,cAAA,EAA8B,EAAA,MAAA,EAAA,IAAA;AAAA,WAAA,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    provide(LIST_ITEMS_KEY as string, recommendations)\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](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 link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot"],"mappings":";;;;;;SAGU,IAAA,CAAA,eAAA,CAAgB,MAAA,IAAAA,SAAA,EAAA,EAFxBC,WAAA,CAmBYC,uBAAA,CAlBL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,GAAA,EAAI,IAAA;AAAA,IACJ,WAAA,EAAU,iBAAA;AAAA,IACV,KAAA,EAAM;AAAA,GAAA,EAAA;qBAGJ,MAAyC;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EAD3CG,kBAAA;AAAA,QAWKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAVsB,IAAA,CAAA,eAAA,EAAe,CAAjC,cAAA,KAAc;8BADvBF,kBAAA,CAWK,IAAA,EAAA;AAAA,YATF,KAAK,cAAA,CAAe,EAAA;AAAA,YACrB,KAAA,EAAM,yBAAA;AAAA,YACN,WAAA,EAAU;AAAA,WAAA,EAAA;AAMV,YAAAG,UAAA,CAAyC,0BAAlC,cAAA,EAA8B,EAAA,MAAA,EAAA,IAAA;AAAA,WAAA,CAAA;;;;;;;;;;;;;;"}

package/js/x-modules/recommendations/components/recommendations.vue2.js

@@ -1,4 +1,5 @@
 import { defineComponent, provide, computed } from 'vue';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
 import '../../../plugins/x-bus.js';
@@ -45,6 +46,7 @@ var _sfc_main = defineComponent({
          * @returns - The list of recommendations slice by the number of items to render.
          */
         const recommendations = computed(() => storedRecommendations.value.slice(0, props.maxItemsToRender));
+        provide(LIST_ITEMS_KEY, recommendations);
         /**
          * Render function to execute the `layout` slot, binding `slotsProps` and getting only the
          * first `vNode` to avoid Fragments and Text root nodes.

package/js/x-modules/recommendations/components/recommendations.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](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 link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEpB,MAAM,qBAAoB,GAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc;;QAGxE,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA4B;AAC7B,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC9D;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAK;aACxC;YACA,OAAO,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC;QACxE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAa,GAAI,EAAE,eAAc,EAAE;AACzC,QAAA,QAAQ,KAAK,CAAC,MAAK,GAAI,gBAAe,GAAI,cAAc;IAC1D,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    provide(LIST_ITEMS_KEY as string, recommendations)\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](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 link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEpB,MAAM,qBAAoB,GAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc;;QAGxE,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA4B;AAC7B,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC9D;AAEA,QAAA,OAAO,CAAC,cAAwB,EAAE,eAAe,CAAA;AAEjD;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAK;aACxC;YACA,OAAO,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC;QACxE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAa,GAAI,EAAE,eAAc,EAAE;AACzC,QAAA,QAAQ,KAAK,CAAC,MAAK,GAAI,gBAAe,GAAI,cAAc;IAC1D,CAAC;AACF,CAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -117,5 +117,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "13b985a1a61c2f8587435e787e28d38920fc3b2c"
+  "gitHead": "4971259f9f1246043a8d342e9d1b057e1ba6268c"
 }

package/types/src/x-modules/recommendations/components/recommendations.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/recommendations/components/recommendations.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAQhD;;;;;;;;;GASG;;IAKC,4EAA4E;;;;;IAK5E,gDAAgD;;;;;IALhD,4EAA4E;;;;;IAK5E,gDAAgD;;;;;AATpD,wBAsDE"}
+{"version":3,"file":"recommendations.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/recommendations/components/recommendations.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAShD;;;;;;;;;GASG;;IAKC,4EAA4E;;;;;IAK5E,gDAAgD;;;;;IALhD,4EAA4E;;;;;IAK5E,gDAAgD;;;;;AATpD,wBAwDE"}