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

package/js/components/result/base-result-rating.vue2.js

@@ -1,5 +1,4 @@
 import { defineComponent, ref } from 'vue';
-import BaseRating from '../base-rating.vue.js';
 import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
 import '@vue/devtools-api';
@@ -12,6 +11,7 @@ import '../../plugins/x-bus.js';
 import '../../plugins/x-plugin.js';
 import 'vuex';
 import '@vueuse/core';
+import BaseRating from '../base-rating.vue.js';
 
 /**
  * This component renders a {@link BaseRating} for a result passed as prop.
@@ -20,7 +20,7 @@ import '@vueuse/core';
  */
 var _sfc_main = defineComponent({
     components: {
-        BaseRating
+        BaseRating,
     },
     inheritAttrs: false,
     props: {
@@ -31,7 +31,7 @@ var _sfc_main = defineComponent({
          */
         result: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * A link to redirect when rating is clicked.
@@ -39,11 +39,12 @@ var _sfc_main = defineComponent({
          * @public
          */
         link: {
-            type: String
-        }
+            type: String,
+        },
     },
     setup(props) {
         const $x = use$x();
+        const el = ref();
         /**
          * Emits the `UserClickedAResultRating` event when user clicks this component, with the
          * {@link @empathyco/x-types#Result} as payload.
@@ -51,15 +52,15 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const emitClickedEvent = () => {
-            const el = ref(null);
             $x.emit('UserClickedAResultRating', props.result, {
-                target: el.value
+                target: el.value,
             });
         };
         return {
-            emitClickedEvent
+            el,
+            emitClickedEvent,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/result/base-result-rating.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-rating.vue2.js","sources":["../../../../src/components/result/base-result-rating.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"link ? 'a' : 'div'\"\n    v-if=\"result.rating && result.rating.value\"\n    ref=\"el\"\n    @click=\"emitClickedEvent\"\n    :href=\"link\"\n    class=\"x-result-rating\"\n    data-test=\"result-rating\"\n  >\n    <!--\n      @slot To override the whole content\n    -->\n    <slot :rating=\"result.rating.value\" :result=\"result\">\n      <BaseRating :value=\"result.rating.value\" v-bind=\"$attrs\">\n        <template #empty-icon>\n          <!--\n            @slot The content to render as empty icon\n          -->\n          <slot name=\"empty-icon\" />\n        </template>\n\n        <template #filled-icon>\n          <!--\n            @slot The content to render as filled icon\n          -->\n          <slot name=\"filled-icon\" />\n        </template>\n      </BaseRating>\n    </slot>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import BaseRating from '../base-rating.vue';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * This component renders a {@link BaseRating} for a result passed as prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    inheritAttrs: false,\n    props: {\n      /**\n       * The {@link @empathyco/x-types#Result} to render its rating.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      },\n\n      /**\n       * A link to redirect when rating is clicked.\n       *\n       * @public\n       */\n      link: {\n        type: String\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      /**\n       * Emits the `UserClickedAResultRating` event when user clicks this component, with the\n       * {@link @empathyco/x-types#Result} as payload.\n       *\n       * @internal\n       */\n      const emitClickedEvent = (): void => {\n        const el = ref<HTMLElement | null>(null);\n        $x.emit('UserClickedAResultRating', props.result, {\n          target: el.value!\n        });\n      };\n\n      return {\n        emitClickedEvent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-result-rating {\n    color: inherit;\n    text-decoration: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAResultRating`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere you have a basic example of how the result rating is rendered.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the result rating has been configured to 6 as maximum value using the prop `max`.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" :max=\"6\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the result rating has been configured with a link to redirect when is clicked.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" link=\"https://empathy.co/\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added to be shown when the result rating is clicked.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" @UserClickedAResultRating=\"logUserClickedRating\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    },\n    methods: {\n      logUserClickedRating(result) {\n        console.log('User clickedRating of this result:', result);\n      }\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nThe rendered icons for rating can be configured through slots. Keep in mind that the icons for both\nstates (filled and empty), must have the same size make component work properly.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\">\n    <template #filled-icon>❤️</template>\n    <template #empty-icon>🤍</template>\n  </BaseResultRating>\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\nIt is possible to override all the content of the component to show your own rating but keeping the\nlink and event behaviour:\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" #default=\"{ rating, result }\">\n    <span v-for=\"star in rating\">⭐️</span>\n    <span>{{ result.name }}</span>\n  </BaseResultRating>\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\nEven it is possible to reuse our rating component:\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" #default=\"{ rating, result }\">\n    <BaseRating :value=\"rating\" />\n    <span>{{ result.name }}</span>\n  </BaseResultRating>\n</template>\n\n<script>\n  import { BaseResultRating, BaseRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating,\n      BaseRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuCE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;AACD,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAK;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;;AAKE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,MAAM,EAAG,GAAE,GAAG,CAAqB,IAAI,CAAC,CAAA;YACxC,EAAE,CAAC,IAAI,CAAC,0BAA0B,EAAE,KAAK,CAAC,MAAM,EAAE;gBAChD,MAAM,EAAE,EAAE,CAAC,KAAK;AACjB,aAAA,CAAC,CAAA;AACJ,SAAC,CAAA;QAED,OAAO;YACL,gBAAe;SAChB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-result-rating.vue2.js","sources":["../../../../src/components/result/base-result-rating.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"link ? 'a' : 'div'\"\n    v-if=\"result.rating && result.rating.value\"\n    :ref=\"el\"\n    :href=\"link\"\n    class=\"x-result-rating\"\n    data-test=\"result-rating\"\n    @click=\"emitClickedEvent\"\n  >\n    <!--\n      @slot To override the whole content\n    -->\n    <slot :rating=\"result.rating.value\" :result=\"result\">\n      <BaseRating :value=\"result.rating.value\" v-bind=\"$attrs\">\n        <template #empty-icon>\n          <!--\n            @slot The content to render as empty icon\n          -->\n          <slot name=\"empty-icon\" />\n        </template>\n\n        <template #filled-icon>\n          <!--\n            @slot The content to render as filled icon\n          -->\n          <slot name=\"filled-icon\" />\n        </template>\n      </BaseRating>\n    </slot>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport BaseRating from '../base-rating.vue'\n\n/**\n * This component renders a {@link BaseRating} for a result passed as prop.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * The {@link @empathyco/x-types#Result} to render its rating.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n\n    /**\n     * A link to redirect when rating is clicked.\n     *\n     * @public\n     */\n    link: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const el = ref<HTMLElement | null>()\n\n    /**\n     * Emits the `UserClickedAResultRating` event when user clicks this component, with the\n     * {@link @empathyco/x-types#Result} as payload.\n     *\n     * @internal\n     */\n    const emitClickedEvent = (): void => {\n      $x.emit('UserClickedAResultRating', props.result, {\n        target: el.value!,\n      })\n    }\n\n    return {\n      el,\n      emitClickedEvent,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-rating {\n  color: inherit;\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAResultRating`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere you have a basic example of how the result rating is rendered.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" />\n</template>\n\n<script>\nimport { BaseResultRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the result rating has been configured to 6 as maximum value using the prop `max`.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" :max=\"6\" />\n</template>\n\n<script>\nimport { BaseResultRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n}\n</script>\n```\n\nIn this example, the result rating has been configured with a link to redirect when is clicked.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" link=\"https://empathy.co/\" />\n</template>\n\n<script>\nimport { BaseResultRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added to be shown when the result rating is clicked.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" @UserClickedAResultRating=\"logUserClickedRating\" />\n</template>\n\n<script>\nimport { BaseResultRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n  methods: {\n    logUserClickedRating(result) {\n      console.log('User clickedRating of this result:', result)\n    },\n  },\n}\n</script>\n```\n\n## Extending the component\n\nThe rendered icons for rating can be configured through slots. Keep in mind that the icons for both\nstates (filled and empty), must have the same size make component work properly.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\">\n    <template #filled-icon>❤️</template>\n    <template #empty-icon>🤍</template>\n  </BaseResultRating>\n</template>\n\n<script>\nimport { BaseResultRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n}\n</script>\n```\n\nIt is possible to override all the content of the component to show your own rating but keeping the\nlink and event behaviour:\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" #default=\"{ rating, result }\">\n    <span v-for=\"star in rating\">⭐️</span>\n    <span>{{ result.name }}</span>\n  </BaseResultRating>\n</template>\n\n<script>\nimport { BaseResultRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n}\n</script>\n```\n\nEven it is possible to reuse our rating component:\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" #default=\"{ rating, result }\">\n    <BaseRating :value=\"rating\" />\n    <span>{{ result.name }}</span>\n  </BaseResultRating>\n</template>\n\n<script>\nimport { BaseResultRating, BaseRating } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultRatingDemo',\n  components: {\n    BaseResultRating,\n    BaseRating,\n  },\n  data() {\n    return {\n      result: {\n        id: 1,\n        name: 'Result with rating',\n        rating: { value: 3 },\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,EAAC,GAAI,GAAG,EAAqB,CAAA;AAEnC;;;;;AAKE;QACF,MAAM,gBAAe,GAAI,MAAY;YACnC,EAAE,CAAC,IAAI,CAAC,0BAA0B,EAAE,KAAK,CAAC,MAAM,EAAE;gBAChD,MAAM,EAAE,EAAE,CAAC,KAAM;AAClB,aAAA,CAAA,CAAA;AACH,SAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,gBAAgB;SAClB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/result/result-variant-selector.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './result-variant-selector.vue2.js';
-import { openBlock, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, createElementVNode, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import './result-variant-selector.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -23,18 +23,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-test": "variant-item"
           },
           [
-            createCommentVNode("\n        @slot Variant item\n        @binding {ResultVariant} variant - The variant item\n        @binding {boolean} isSelected - Indicates if the variant is selected\n        @binding {() => void} selectVariant - Callback to select the variant\n      "),
             renderSlot(_ctx.$slots, "variant", {
               variant,
               isSelected: _ctx.variantIsSelected(variant),
               selectVariant: () => _ctx.selectVariant(variant)
             }, () => [
               createElementVNode("button", {
-                onClick: ($event) => _ctx.selectVariant(variant),
                 "data-test": "variant-button",
-                class: "x-button"
+                class: "x-button",
+                onClick: ($event) => _ctx.selectVariant(variant)
               }, [
-                createCommentVNode("\n            @slot Variant content\n            @binding {ResultVariant} variant - The variant item\n            @binding {boolean} isSelected - Indicates if the variant is selected\n          "),
                 renderSlot(_ctx.$slots, "variant-content", {
                   variant,
                   isSelected: _ctx.variantIsSelected(variant)

package/js/components/result/result-variant-selector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"result-variant-selector.vue.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n  <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n    <li\n      v-for=\"(variant, index) in variants\"\n      :key=\"index\"\n      class=\"x-result-variant-selector__item\"\n      :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n      data-test=\"variant-item\"\n    >\n      <!--\n        @slot Variant item\n        @binding {ResultVariant} variant - The variant item\n        @binding {boolean} isSelected - Indicates if the variant is selected\n        @binding {() => void} selectVariant - Callback to select the variant\n      -->\n      <slot\n        name=\"variant\"\n        :variant=\"variant\"\n        :isSelected=\"variantIsSelected(variant)\"\n        :selectVariant=\"() => selectVariant(variant)\"\n      >\n        <button @click=\"selectVariant(variant)\" data-test=\"variant-button\" class=\"x-button\">\n          <!--\n            @slot Variant content\n            @binding {ResultVariant} variant - The variant item\n            @binding {boolean} isSelected - Indicates if the variant is selected\n          -->\n          <slot name=\"variant-content\" :variant=\"variant\" :isSelected=\"variantIsSelected(variant)\">\n            {{ variant }}\n          </slot>\n        </button>\n      </slot>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, inject, Ref } from 'vue';\n  import { Result, ResultVariant } from '@empathyco/x-types';\n  import {\n    RESULT_WITH_VARIANTS_KEY,\n    SELECTED_VARIANTS_KEY,\n    SELECT_RESULT_VARIANT_KEY\n  } from '../decorators/injection.consts';\n\n  /**\n   * Component to show and select the available variants of a product for a given nest level.\n   * TODO: Add logger warning on mount when result is not injected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultVariantSelector',\n    props: {\n      /** The nest level of the variants to be rendered. */\n      level: {\n        type: Number,\n        default: 0\n      }\n    },\n    setup(props, { slots }) {\n      /**\n       * Callback to be called when a variant is selected.\n       *\n       * @public\n       * @returns The 'selectResultVariant' injection key.\n       */\n      const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n        SELECT_RESULT_VARIANT_KEY as string\n      );\n\n      /** The original result, used to retrieve the available variants for the level. */\n      const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string);\n\n      /** Array containing the selected variants. */\n      const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string);\n\n      /**\n       * It retrieves the available variants from the result.\n       *\n       * @returns - The variants of the result for the current level.\n       */\n      const variants = computed<ResultVariant[] | undefined>(() => {\n        if (props.level === 0) {\n          return result!.value?.variants;\n        }\n        return selectedVariants!.value[props.level - 1]?.variants;\n      });\n\n      /**\n       * Gets the selected variant of the current level.\n       *\n       * @returns - The selected variant.\n       */\n      const selectedVariant = computed<ResultVariant | undefined>(() =>\n        variants.value?.find(variant => variant === selectedVariants!.value[props.level])\n      );\n\n      /**\n       * Calls the provided method to select a variant.\n       *\n       * @param variant - Variant to select.\n       */\n      const selectVariant = (variant: ResultVariant) => {\n        selectResultVariant!(variant, props.level);\n      };\n\n      /**\n       * Checks if a variant is selected.\n       *\n       * @param variant - Variant to check.\n       * @returns True if the variant is selected, false if not.\n       */\n      const variantIsSelected = (variant: ResultVariant) => {\n        return selectedVariant.value === variant;\n      };\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no result or variants, 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 `default` slot or empty string if there are\n       * no result or variants.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          variants: variants.value,\n          selectedVariant: selectedVariant.value,\n          selectVariant\n        };\n        return result && variants.value ? slots.default?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { result, variants, variantIsSelected, selectVariant };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-result-variant-selector__list {\n    display: flex;\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 `ResultVariantSelector` component is rendered.\n\nTake into account that this component **must** be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n      <div>\n        <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n        <ul class=\"x-flex\">\n          <li v-for=\"(variant, index) in variants\" :key=\"index\">\n            <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n          </li>\n        </ul>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n      <div>\n        <button @click=\"selectVariant\">\n          {{ variant.name }}\n          <span v-if=\"isSelected\">SELECTED!</span>\n        </button>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n      <div>\n        {{ variant.name }}\n        <span v-if=\"isSelected\">SELECTED!</span>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_renderSlot","variantIsSelected","_createElementVNode","_toDisplayString"],"mappings":";;;;;MACgC,UAAM,GAAA;AAAA,EAAkC,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;AAAtE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAgCK,QAhCL,KAgCK,EAAA,QAAA,EAAA;6BA/BH,QA8BK,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CA5BG,IAAK,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,QAAA,EAAA,CAAA,OAAA,EAAA,KAAA,KAAA;eACNH,SALX,EAAA,EAAAC,kBAAA;AAAA,UAKY,IAAA;AAAA,UAAA;AAAA,YAEN,GAAA,EAAA,KAAA;AAAA,YAAA,KAAA,EAAAG,cAAA,CAAA,CAAA,iCAAA,EAAA,EAAA,8CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA;AAEA,YAAA,WAAA,EAAA,cAAA;AAAA,WAAA;AAMA,UAAA;AAAA,YAEmBC,kBAAA,CAAA,+PAAA,CAAA;AAAA,YAAAC,UAAA,CACN,KAAEC,MAAiB,EAAA,SAAA,EAAA;AAAA,cAC7B,OAAA;AAAA,cAYI,UAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA;AAAA,cAVL,aASS,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,aATA,EAAA,MAAA;AAAA,cAAyCC,kBAAA,CAAA,QAAA,EAAA;AAAA,gBAAiB,SAAM,CAAU,MAAA,KAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,gBAAA,WAAA,EAAA,gBAAA;AACjF,gBAAA,KAAA,EAAA,UAAA;AAAA,eAKA,EAAA;AAAA,gBAA8CH,kBAAA,CAAA,oMAAA,CAAA;AAAA,gBAAAC,UAAA,CAAa,KAAEC,MAAyB,EAAA,iBAAA,EAAA;AAAA,kBAAA,OAAA;AA3BhG,kBAAA,UAAA,EAAA,IAAA,CAAA,iBAAA,CA4Be,OAAO,CAAA;AAAA,iBAAA,EAAA,MAAA;;AA5BtB,oBAAAE,eAAA,CAAA,OAAA,CAAA;AAAA,oBAAA,CAAA;AAAA;AAAA,mBAAA;AAAA,iBAAA,EAAA,IAAA,CAAA;;;;;;;AAAA,OAAA,CAAA;AAAA,MAAA,GAAA;AAAA;AAAA,KAAA;AAAA,GAAA,CAAA,IAAAJ,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"result-variant-selector.vue.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n  <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n    <li\n      v-for=\"(variant, index) in variants\"\n      :key=\"index\"\n      class=\"x-result-variant-selector__item\"\n      :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n      data-test=\"variant-item\"\n    >\n      <!--\n        @slot Variant item\n        @binding {ResultVariant} variant - The variant item\n        @binding {boolean} isSelected - Indicates if the variant is selected\n        @binding {() => void} selectVariant - Callback to select the variant\n      -->\n      <slot\n        name=\"variant\"\n        :variant=\"variant\"\n        :is-selected=\"variantIsSelected(variant)\"\n        :select-variant=\"() => selectVariant(variant)\"\n      >\n        <button data-test=\"variant-button\" class=\"x-button\" @click=\"selectVariant(variant)\">\n          <!--\n            @slot Variant content\n            @binding {ResultVariant} variant - The variant item\n            @binding {boolean} isSelected - Indicates if the variant is selected\n          -->\n          <slot name=\"variant-content\" :variant=\"variant\" :is-selected=\"variantIsSelected(variant)\">\n            {{ variant }}\n          </slot>\n        </button>\n      </slot>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n  RESULT_WITH_VARIANTS_KEY,\n  SELECT_RESULT_VARIANT_KEY,\n  SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/**\n * Component to show and select the available variants of a product for a given nest level.\n * TODO: Add logger warning on mount when result is not injected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ResultVariantSelector',\n  props: {\n    /** The nest level of the variants to be rendered. */\n    level: {\n      type: Number,\n      default: 0,\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * Callback to be called when a variant is selected.\n     *\n     * @public\n     * @returns The 'selectResultVariant' injection key.\n     */\n    const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n      SELECT_RESULT_VARIANT_KEY as string,\n    )\n\n    /** The original result, used to retrieve the available variants for the level. */\n    const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string)\n\n    /** Array containing the selected variants. */\n    const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string)\n\n    /**\n     * It retrieves the available variants from the result.\n     *\n     * @returns - The variants of the result for the current level.\n     */\n    const variants = computed<ResultVariant[] | undefined>(() => {\n      if (props.level === 0) {\n        return result!.value?.variants\n      }\n      return selectedVariants!.value[props.level - 1]?.variants\n    })\n\n    /**\n     * Gets the selected variant of the current level.\n     *\n     * @returns - The selected variant.\n     */\n    const selectedVariant = computed<ResultVariant | undefined>(() =>\n      variants.value?.find(variant => variant === selectedVariants!.value[props.level]),\n    )\n\n    /**\n     * Calls the provided method to select a variant.\n     *\n     * @param variant - Variant to select.\n     */\n    const selectVariant = (variant: ResultVariant) => {\n      selectResultVariant!(variant, props.level)\n    }\n\n    /**\n     * Checks if a variant is selected.\n     *\n     * @param variant - Variant to check.\n     * @returns True if the variant is selected, false if not.\n     */\n    const variantIsSelected = (variant: ResultVariant) => {\n      return selectedVariant.value === variant\n    }\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no result or variants, 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 `default` slot or empty string if there are\n     * no result or variants.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        variants: variants.value,\n        selectedVariant: selectedVariant.value,\n        selectVariant,\n      }\n      return result && variants.value ? slots.default?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { result, variants, variantIsSelected, selectVariant }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-variant-selector__list {\n  display: flex;\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 `ResultVariantSelector` component is rendered.\n\nTake into account that this component **must** be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n            variants: [\n              {\n                name: 'red XL',\n              },\n              {\n                name: 'red L',\n              },\n            ],\n          },\n          {\n            name: 'blue',\n            variants: [\n              {\n                name: 'blue S',\n              },\n              {\n                name: 'blue M',\n              },\n              {\n                name: 'blue L',\n              },\n            ],\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n      <div>\n        <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n        <ul class=\"x-flex\">\n          <li v-for=\"(variant, index) in variants\" :key=\"index\">\n            <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n          </li>\n        </ul>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n          },\n          {\n            name: 'blue',\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n      <div>\n        <button @click=\"selectVariant\">\n          {{ variant.name }}\n          <span v-if=\"isSelected\">SELECTED!</span>\n        </button>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n          },\n          {\n            name: 'blue',\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n      <div>\n        {{ variant.name }}\n        <span v-if=\"isSelected\">SELECTED!</span>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n          },\n          {\n            name: 'blue',\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","variantIsSelected","_createElementVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;MACgC,UAAM,GAAA;AAAA,EAAkC,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;AAAtE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAgCK,QAhCL,KAgCK,EAAA,QAAA,EAAA;6BA/BH,QA8BK,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CA5BG,IAAK,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,QAAA,EAAA,CAAA,OAAA,EAAA,KAAA,KAAA;eACNH,SALX,EAAA,EAAAC,kBAAA;AAAA,UAKY,IAAA;AAAA,UAAA;AAAA,YAEN,GAAA,EAAA,KAAA;AAAA,YAAA,KAAA,EAAAG,cAAA,CAAA,CAAA,iCAAA,EAAA,EAAA,8CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA;YAQA,WAgBO,EAAA,cAAA;AAAA,WAAA;;AAbO,YAAAC,UAAA,CAAA,IAAA,CAAEC,MAAiB,EAAA,SAAA,EAAA;AAAA,cAC9B,OAAA;AAAA,cAYI,UAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,OAAA,CAAA;AAAA,cAVL,aASS,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,aATD,EAAA,MAAA;AAAA,cAA2CC,kBAAA,CAAA,QAAA,EAAA;AAAA,gBAAE,WAAK,EAAA,gBAAA;AAAA,gBAAA,KAAA,EAAA,UAAA;gBAMxD,OAEO,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,aAAA,CAAA,OAAA,CAAA;AAAA,eAAA,EAAA;AAFqD,gBAAAF,UAAA,CAAA,IAAA,CAAEC,MAAyB,EAAA,iBAAA,EAAA;AAAA,kBAAA,OAAA;AA3BjG,kBAAA,UAAA,EAAA,IAAA,CAAA,iBAAA,CA4Be,OAAO,CAAA;AAAA,iBAAA,EAAA,MAAA;;AA5BtB,oBAAAE,eAAA,CAAA,OAAA,CAAA;AAAA,oBAAA,CAAA;AAAA;AAAA,mBAAA;AAAA,iBAAA,EAAA,IAAA,CAAA;;;;;;;AAAA,OAAA,CAAA;AAAA,MAAA,GAAA;AAAA;AAAA,KAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/components/result/result-variant-selector.vue2.js

@@ -13,8 +13,8 @@ var _sfc_main = defineComponent({
         /** The nest level of the variants to be rendered. */
         level: {
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     setup(props, { slots }) {
         /**
@@ -77,15 +77,15 @@ var _sfc_main = defineComponent({
             const slotProps = {
                 variants: variants.value,
                 selectedVariant: selectedVariant.value,
-                selectVariant
+                selectVariant,
             };
             return result && variants.value ? slots.default?.(slotProps)[0] : '';
         }
         /* Hack to render through a render-function, the `default` slot or, in its absence,
-         the component itself. It is the alternative for the NoElement antipattern. */
+           the component itself. It is the alternative for the NoElement antipattern. */
         const componentProps = { result, variants, variantIsSelected, selectVariant };
         return (slots.default ? renderDefaultSlot : componentProps);
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/result/result-variant-selector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"result-variant-selector.vue2.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n  <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n    <li\n      v-for=\"(variant, index) in variants\"\n      :key=\"index\"\n      class=\"x-result-variant-selector__item\"\n      :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n      data-test=\"variant-item\"\n    >\n      <!--\n        @slot Variant item\n        @binding {ResultVariant} variant - The variant item\n        @binding {boolean} isSelected - Indicates if the variant is selected\n        @binding {() => void} selectVariant - Callback to select the variant\n      -->\n      <slot\n        name=\"variant\"\n        :variant=\"variant\"\n        :isSelected=\"variantIsSelected(variant)\"\n        :selectVariant=\"() => selectVariant(variant)\"\n      >\n        <button @click=\"selectVariant(variant)\" data-test=\"variant-button\" class=\"x-button\">\n          <!--\n            @slot Variant content\n            @binding {ResultVariant} variant - The variant item\n            @binding {boolean} isSelected - Indicates if the variant is selected\n          -->\n          <slot name=\"variant-content\" :variant=\"variant\" :isSelected=\"variantIsSelected(variant)\">\n            {{ variant }}\n          </slot>\n        </button>\n      </slot>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, inject, Ref } from 'vue';\n  import { Result, ResultVariant } from '@empathyco/x-types';\n  import {\n    RESULT_WITH_VARIANTS_KEY,\n    SELECTED_VARIANTS_KEY,\n    SELECT_RESULT_VARIANT_KEY\n  } from '../decorators/injection.consts';\n\n  /**\n   * Component to show and select the available variants of a product for a given nest level.\n   * TODO: Add logger warning on mount when result is not injected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultVariantSelector',\n    props: {\n      /** The nest level of the variants to be rendered. */\n      level: {\n        type: Number,\n        default: 0\n      }\n    },\n    setup(props, { slots }) {\n      /**\n       * Callback to be called when a variant is selected.\n       *\n       * @public\n       * @returns The 'selectResultVariant' injection key.\n       */\n      const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n        SELECT_RESULT_VARIANT_KEY as string\n      );\n\n      /** The original result, used to retrieve the available variants for the level. */\n      const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string);\n\n      /** Array containing the selected variants. */\n      const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string);\n\n      /**\n       * It retrieves the available variants from the result.\n       *\n       * @returns - The variants of the result for the current level.\n       */\n      const variants = computed<ResultVariant[] | undefined>(() => {\n        if (props.level === 0) {\n          return result!.value?.variants;\n        }\n        return selectedVariants!.value[props.level - 1]?.variants;\n      });\n\n      /**\n       * Gets the selected variant of the current level.\n       *\n       * @returns - The selected variant.\n       */\n      const selectedVariant = computed<ResultVariant | undefined>(() =>\n        variants.value?.find(variant => variant === selectedVariants!.value[props.level])\n      );\n\n      /**\n       * Calls the provided method to select a variant.\n       *\n       * @param variant - Variant to select.\n       */\n      const selectVariant = (variant: ResultVariant) => {\n        selectResultVariant!(variant, props.level);\n      };\n\n      /**\n       * Checks if a variant is selected.\n       *\n       * @param variant - Variant to check.\n       * @returns True if the variant is selected, false if not.\n       */\n      const variantIsSelected = (variant: ResultVariant) => {\n        return selectedVariant.value === variant;\n      };\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no result or variants, 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 `default` slot or empty string if there are\n       * no result or variants.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          variants: variants.value,\n          selectedVariant: selectedVariant.value,\n          selectVariant\n        };\n        return result && variants.value ? slots.default?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { result, variants, variantIsSelected, selectVariant };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-result-variant-selector__list {\n    display: flex;\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 `ResultVariantSelector` component is rendered.\n\nTake into account that this component **must** be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n      <div>\n        <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n        <ul class=\"x-flex\">\n          <li v-for=\"(variant, index) in variants\" :key=\"index\">\n            <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n          </li>\n        </ul>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n      <div>\n        <button @click=\"selectVariant\">\n          {{ variant.name }}\n          <span v-if=\"isSelected\">SELECTED!</span>\n        </button>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n      <div>\n        {{ variant.name }}\n        <span v-if=\"isSelected\">SELECTED!</span>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AA6CE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,MAAM,CAChC,yBAAkC,CACnC,CAAA;;AAGD,QAAA,MAAM,MAAK,GAAI,MAAM,CAAc,wBAAkC,CAAC,CAAA;;AAGtE,QAAA,MAAM,gBAAe,GAAI,MAAM,CAAuB,qBAA+B,CAAC,CAAA;AAEtF;;;;AAIE;AACF,QAAA,MAAM,QAAO,GAAI,QAAQ,CAA8B,MAAM;AAC3D,YAAA,IAAI,KAAK,CAAC,KAAI,KAAM,CAAC,EAAE;AACrB,gBAAA,OAAO,MAAO,CAAC,KAAK,EAAE,QAAQ,CAAA;AAChC,aAAA;AACA,YAAA,OAAO,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAI,GAAI,CAAC,CAAC,EAAE,QAAQ,CAAA;AAC3D,SAAC,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAA4B,MAC1D,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,OAAM,IAAK,OAAQ,KAAI,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA,CACjF,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,CAAC,OAAsB,KAAK;AAChD,YAAA,mBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;AAC5C,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,OAAsB,KAAK;AACpD,YAAA,OAAO,eAAe,CAAC,KAAM,KAAI,OAAO,CAAA;AAC1C,SAAC,CAAA;AAED;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK;gBACxB,eAAe,EAAE,eAAe,CAAC,KAAK;gBACtC,aAAY;aACb,CAAA;YACD,OAAO,MAAK,IAAK,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAE,CAAA;SACtE;AAEA;AAC6E;QAC7E,MAAM,cAAe,GAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,eAAe,CAAA;AAC7E,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAgB,GAAI,cAAc,EAA0B;KACtF;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"result-variant-selector.vue2.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n  <ul v-if=\"result && variants\" class=\"x-result-variant-selector__list\" data-test=\"variants-list\">\n    <li\n      v-for=\"(variant, index) in variants\"\n      :key=\"index\"\n      class=\"x-result-variant-selector__item\"\n      :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n      data-test=\"variant-item\"\n    >\n      <!--\n        @slot Variant item\n        @binding {ResultVariant} variant - The variant item\n        @binding {boolean} isSelected - Indicates if the variant is selected\n        @binding {() => void} selectVariant - Callback to select the variant\n      -->\n      <slot\n        name=\"variant\"\n        :variant=\"variant\"\n        :is-selected=\"variantIsSelected(variant)\"\n        :select-variant=\"() => selectVariant(variant)\"\n      >\n        <button data-test=\"variant-button\" class=\"x-button\" @click=\"selectVariant(variant)\">\n          <!--\n            @slot Variant content\n            @binding {ResultVariant} variant - The variant item\n            @binding {boolean} isSelected - Indicates if the variant is selected\n          -->\n          <slot name=\"variant-content\" :variant=\"variant\" :is-selected=\"variantIsSelected(variant)\">\n            {{ variant }}\n          </slot>\n        </button>\n      </slot>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\nimport {\n  RESULT_WITH_VARIANTS_KEY,\n  SELECT_RESULT_VARIANT_KEY,\n  SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/**\n * Component to show and select the available variants of a product for a given nest level.\n * TODO: Add logger warning on mount when result is not injected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ResultVariantSelector',\n  props: {\n    /** The nest level of the variants to be rendered. */\n    level: {\n      type: Number,\n      default: 0,\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * Callback to be called when a variant is selected.\n     *\n     * @public\n     * @returns The 'selectResultVariant' injection key.\n     */\n    const selectResultVariant = inject<(variant: ResultVariant, level?: number) => void>(\n      SELECT_RESULT_VARIANT_KEY as string,\n    )\n\n    /** The original result, used to retrieve the available variants for the level. */\n    const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string)\n\n    /** Array containing the selected variants. */\n    const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string)\n\n    /**\n     * It retrieves the available variants from the result.\n     *\n     * @returns - The variants of the result for the current level.\n     */\n    const variants = computed<ResultVariant[] | undefined>(() => {\n      if (props.level === 0) {\n        return result!.value?.variants\n      }\n      return selectedVariants!.value[props.level - 1]?.variants\n    })\n\n    /**\n     * Gets the selected variant of the current level.\n     *\n     * @returns - The selected variant.\n     */\n    const selectedVariant = computed<ResultVariant | undefined>(() =>\n      variants.value?.find(variant => variant === selectedVariants!.value[props.level]),\n    )\n\n    /**\n     * Calls the provided method to select a variant.\n     *\n     * @param variant - Variant to select.\n     */\n    const selectVariant = (variant: ResultVariant) => {\n      selectResultVariant!(variant, props.level)\n    }\n\n    /**\n     * Checks if a variant is selected.\n     *\n     * @param variant - Variant to check.\n     * @returns True if the variant is selected, false if not.\n     */\n    const variantIsSelected = (variant: ResultVariant) => {\n      return selectedVariant.value === variant\n    }\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no result or variants, 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 `default` slot or empty string if there are\n     * no result or variants.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        variants: variants.value,\n        selectedVariant: selectedVariant.value,\n        selectVariant,\n      }\n      return result && variants.value ? slots.default?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { result, variants, variantIsSelected, selectVariant }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-variant-selector__list {\n  display: flex;\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 `ResultVariantSelector` component is rendered.\n\nTake into account that this component **must** be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n            variants: [\n              {\n                name: 'red XL',\n              },\n              {\n                name: 'red L',\n              },\n            ],\n          },\n          {\n            name: 'blue',\n            variants: [\n              {\n                name: 'blue S',\n              },\n              {\n                name: 'blue M',\n              },\n              {\n                name: 'blue L',\n              },\n            ],\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n      <div>\n        <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n        <ul class=\"x-flex\">\n          <li v-for=\"(variant, index) in variants\" :key=\"index\">\n            <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n          </li>\n        </ul>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n          },\n          {\n            name: 'blue',\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n      <div>\n        <button @click=\"selectVariant\">\n          {{ variant.name }}\n          <span v-if=\"isSelected\">SELECTED!</span>\n        </button>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n          },\n          {\n            name: 'blue',\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n      <div>\n        {{ variant.name }}\n        <span v-if=\"isSelected\">SELECTED!</span>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantSelectorDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n          },\n          {\n            name: 'blue',\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AA8CA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,MAAM,CAChC,yBAAmC,CACrC,CAAA;;AAGA,QAAA,MAAM,MAAK,GAAI,MAAM,CAAc,wBAAkC,CAAA,CAAA;;AAGrE,QAAA,MAAM,gBAAe,GAAI,MAAM,CAAuB,qBAA+B,CAAA,CAAA;AAErF;;;;AAIE;AACF,QAAA,MAAM,QAAO,GAAI,QAAQ,CAA8B,MAAM;AAC3D,YAAA,IAAI,KAAK,CAAC,KAAI,KAAM,CAAC,EAAE;AACrB,gBAAA,OAAO,MAAO,CAAC,KAAK,EAAE,QAAO,CAAA;AAC/B,aAAA;AACA,YAAA,OAAO,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAO,CAAA;AAC1D,SAAC,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAA4B,MAC1D,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,OAAM,IAAK,OAAQ,KAAI,gBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CACnF,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,aAAc,GAAE,CAAC,OAAsB,KAAK;AAChD,YAAA,mBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAA,CAAA;AAC3C,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,OAAsB,KAAK;AACpD,YAAA,OAAO,eAAe,CAAC,KAAI,KAAM,OAAM,CAAA;AACzC,SAAA,CAAA;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK;gBACxB,eAAe,EAAE,eAAe,CAAC,KAAK;gBACtC,aAAa;aACf,CAAA;YACA,OAAO,MAAK,IAAK,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAE,GAAE,EAAC,CAAA;SACrE;AAEA;AAC+E;QAC/E,MAAM,cAAe,GAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,aAAc,EAAA,CAAA;AAC5E,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAkB,GAAE,cAAc,EAAyB;KACpF;AACF,CAAA,CAAA;;;;"}

package/js/components/result/result-variants-provider.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, inject, provide, watch } from 'vue';
-import { RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../decorators/injection.consts.js';
 import { useXBus } from '../../composables/use-x-bus.js';
+import { RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../decorators/injection.consts.js';
 
 /**
  * Component that exposes the result merged with its selected variant in the default slot.
@@ -18,7 +18,7 @@ var _sfc_main = defineComponent({
         /** The original result containing the variants. */
         result: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * The provider by default will auto select the first variants of all levels.
@@ -29,8 +29,8 @@ var _sfc_main = defineComponent({
          */
         autoSelectDepth: {
             type: Number,
-            default: Number.POSITIVE_INFINITY
-        }
+            default: Number.POSITIVE_INFINITY,
+        },
     },
     setup(props, { slots }) {
         const xBus = useXBus();
@@ -69,7 +69,7 @@ var _sfc_main = defineComponent({
                 variant,
                 level,
                 result: result.value,
-                queryPreviewHash
+                queryPreviewHash,
             });
         }
         /**
@@ -85,7 +85,7 @@ var _sfc_main = defineComponent({
             const mergedResult = selectedVariants.value.reduce((result, variant) => {
                 return {
                     ...result,
-                    ...variant
+                    ...variant,
                 };
             }, result.value);
             mergedResult.variants = result.value.variants;
@@ -118,7 +118,7 @@ var _sfc_main = defineComponent({
             selectFirstVariants(result.value?.variants?.[0]);
         }, { immediate: true });
         return () => slots.default?.({ result: resultToProvide.value })[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/result/result-variants-provider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"result-variants-provider.vue.js","sources":["../../../../src/components/result/result-variants-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    defineComponent,\n    ref,\n    computed,\n    watch,\n    provide,\n    Ref,\n    PropType,\n    inject,\n    ComputedRef\n  } from 'vue';\n  import { Result, ResultVariant } from '@empathyco/x-types';\n  import {\n    RESULT_WITH_VARIANTS_KEY,\n    SELECTED_VARIANTS_KEY,\n    SELECT_RESULT_VARIANT_KEY\n  } from '../decorators/injection.consts';\n  import { useXBus } from '../../composables/use-x-bus';\n\n  /**\n   * Component that exposes the result merged with its selected variant in the default slot.\n   *\n   * It receives the original result and keeps track of the selected variant.\n   *\n   * It provides the original result, the array containing the selected variants and a callback to\n   * set the selected variant to be used from a child.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultVariantsProvider',\n    props: {\n      /** The original result containing the variants. */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      },\n      /**\n       * The provider by default will auto select the first variants of all levels.\n       * This prop allows to limit the number of variants auto selected when the provider is created.\n       * Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth\n       * to 0 will not select any variant, setting it to 1 will select only the first variant of the\n       * first level, and so on.\n       */\n      autoSelectDepth: {\n        type: Number,\n        default: Number.POSITIVE_INFINITY\n      }\n    },\n    setup(props, { slots }) {\n      const xBus = useXBus();\n\n      /**\n       * The original result containing the variants as a computed ref object to enable watching\n       * prop changes.\n       */\n      const result = computed(() => props.result);\n\n      /**\n       * Array to keep track of the selected variants of the result.\n       * Each position of the array is a nest level in the variants' hierarchy, so,\n       * the second position will contain a variant that is present inside the variant of the first\n       * position, and so on.\n       */\n      const selectedVariants = ref<ResultVariant[]>([]);\n\n      /**\n       * It injects the queryPreviewHash provided by a query-preview.\n       *\n       * @internal\n       */\n      const queryPreviewHash = inject<ComputedRef<string> | null>('queryPreviewHash', null);\n\n      /**\n       * Selects a variant of the result.\n       * When called, it slices the array of selected variants to remove the selected child variants.\n       * Emits the {@link XEventsTypes.UserSelectedAResultVariant} when called.\n       *\n       * @param variant - The variant to set.\n       * @param level - The nest level where the variant is placed inside the result.\n       */\n      function selectResultVariant(variant: ResultVariant, level = 0) {\n        if (selectedVariants.value[level] === variant) {\n          return;\n        }\n        selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);\n        xBus.emit('UserSelectedAResultVariant', {\n          variant,\n          level,\n          result: result.value,\n          queryPreviewHash\n        });\n      }\n\n      /**\n       * Merges the original result with the selected variant.\n       * The merge is done with all the selected variants of the array.\n       *\n       * @returns - The result with the selected variant merged.\n       */\n      const resultToProvide = computed(() => {\n        if (!selectedVariants.value.length) {\n          return result.value;\n        }\n\n        const mergedResult = selectedVariants.value.reduce<Result>((result, variant) => {\n          return {\n            ...result,\n            ...variant\n          };\n        }, result.value);\n\n        mergedResult.variants = result.value.variants;\n        return mergedResult;\n      });\n\n      /**\n       * Adds to the selectedVariants array the variants up to the autoSelectDepth level.\n       *\n       * @param variant - Variant to add to the array.\n       */\n      function selectFirstVariants(variant?: ResultVariant) {\n        if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {\n          selectedVariants.value.push(variant);\n          selectFirstVariants(variant.variants?.[0]);\n        }\n      }\n\n      /** Provides the original result passed as a prop. */\n      provide<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string, result);\n\n      /** The selected variants of the result. */\n      provide<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string, selectedVariants);\n\n      /** The result variant key that will be selected. */\n      provide(SELECT_RESULT_VARIANT_KEY as string, selectResultVariant);\n\n      /**\n       * Resets the selected variants when the result changes.\n       * That includes doing the auto selection of the variants when the component is created\n       * and when the result is changed.\n       */\n      watch(\n        result,\n        () => {\n          selectedVariants.value = [];\n          selectFirstVariants(result.value?.variants?.[0]);\n        },\n        { immediate: true }\n      );\n\n      return () => slots.default?.({ result: resultToProvide.value })[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAResultVariant`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component is intended to be used in conjunction with the `ResultVariantSelector` component.\n\nThe result exposed in the default slot will contain the data of the selected variant.\n\nBy default, the first variants of all the levels will be selected when the component is rendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantsProviderDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the provider has been configured to not auto select any variant. Changing the\n`autoSelectDepth` prop sets the number of variant levels to auto select, being 0 no variants, 1 the\nfirst variant of the first level, and so on.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" :autoSelectDepth=\"0\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantsProviderDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAoBE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;;;AAME;AACF,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM,CAAC,iBAAgB;AAClC,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;AAGE;QACF,MAAM,MAAK,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,CAAA;AAE3C;;;;;AAKE;AACF,QAAA,MAAM,mBAAmB,GAAG,CAAkB,EAAE,CAAC,CAAA;AAEjD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAM,CAA6B,kBAAkB,EAAE,IAAI,CAAC,CAAA;AAErF;;;;;;;AAOE;AACF,QAAA,SAAS,mBAAmB,CAAC,OAAsB,EAAE,KAAI,GAAI,CAAC,EAAA;YAC5D,IAAI,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAA,KAAM,OAAO,EAAE;gBAC7C,OAAM;AACR,aAAA;AACA,YAAA,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAA;AACvE,YAAA,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE;gBACtC,OAAO;gBACP,KAAK;gBACL,MAAM,EAAE,MAAM,CAAC,KAAK;gBACpB,gBAAe;AAChB,aAAA,CAAC,CAAA;SACJ;AAEA;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;AACrC,YAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE;gBAClC,OAAO,MAAM,CAAC,KAAK,CAAA;AACrB,aAAA;AAEA,YAAA,MAAM,YAAa,GAAE,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAS,CAAC,MAAM,EAAE,OAAO,KAAK;gBAC9E,OAAO;AACL,oBAAA,GAAG,MAAM;AACT,oBAAA,GAAG,OAAM;iBACV,CAAA;AACH,aAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;YAEhB,YAAY,CAAC,QAAO,GAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC7C,YAAA,OAAO,YAAY,CAAA;AACrB,SAAC,CAAC,CAAA;AAEF;;;;AAIE;QACF,SAAS,mBAAmB,CAAC,OAAuB,EAAA;AAClD,YAAA,IAAI,CAAC,CAAC,OAAQ,IAAG,gBAAgB,CAAC,KAAK,CAAC,MAAK,IAAK,KAAK,CAAC,eAAgB,GAAE,CAAC,EAAE;AAC3E,gBAAA,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;gBACpC,mBAAmB,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAA;AAC5C,aAAA;SACF;;AAGA,QAAA,OAAO,CAAc,wBAAkC,EAAE,MAAM,CAAC,CAAA;;AAGhE,QAAA,OAAO,CAAuB,qBAA+B,EAAE,gBAAgB,CAAC,CAAA;;AAGhF,QAAA,OAAO,CAAC,yBAAmC,EAAE,mBAAmB,CAAC,CAAA;AAEjE;;;;AAIE;AACF,QAAA,KAAK,CACH,MAAM,EACN,MAAM;AACJ,YAAA,gBAAgB,CAAC,KAAI,GAAI,EAAE,CAAA;YAC3B,mBAAmB,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAA;AAClD,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;QAED,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,KAAM,EAAC,CAAC,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KAC1E;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"result-variants-provider.vue.js","sources":["../../../../src/components/result/result-variants-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport { computed, defineComponent, inject, provide, ref, watch } from 'vue'\nimport { useXBus } from '../../composables/use-x-bus'\nimport {\n  RESULT_WITH_VARIANTS_KEY,\n  SELECT_RESULT_VARIANT_KEY,\n  SELECTED_VARIANTS_KEY,\n} from '../decorators/injection.consts'\n\n/**\n * Component that exposes the result merged with its selected variant in the default slot.\n *\n * It receives the original result and keeps track of the selected variant.\n *\n * It provides the original result, the array containing the selected variants and a callback to\n * set the selected variant to be used from a child.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ResultVariantsProvider',\n  props: {\n    /** The original result containing the variants. */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * The provider by default will auto select the first variants of all levels.\n     * This prop allows to limit the number of variants auto selected when the provider is created.\n     * Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth\n     * to 0 will not select any variant, setting it to 1 will select only the first variant of the\n     * first level, and so on.\n     */\n    autoSelectDepth: {\n      type: Number,\n      default: Number.POSITIVE_INFINITY,\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /**\n     * The original result containing the variants as a computed ref object to enable watching\n     * prop changes.\n     */\n    const result = computed(() => props.result)\n\n    /**\n     * Array to keep track of the selected variants of the result.\n     * Each position of the array is a nest level in the variants' hierarchy, so,\n     * the second position will contain a variant that is present inside the variant of the first\n     * position, and so on.\n     */\n    const selectedVariants = ref<ResultVariant[]>([])\n\n    /**\n     * It injects the queryPreviewHash provided by a query-preview.\n     *\n     * @internal\n     */\n    const queryPreviewHash = inject<ComputedRef<string> | null>('queryPreviewHash', null)\n\n    /**\n     * Selects a variant of the result.\n     * When called, it slices the array of selected variants to remove the selected child variants.\n     * Emits the {@link XEventsTypes.UserSelectedAResultVariant} when called.\n     *\n     * @param variant - The variant to set.\n     * @param level - The nest level where the variant is placed inside the result.\n     */\n    function selectResultVariant(variant: ResultVariant, level = 0) {\n      if (selectedVariants.value[level] === variant) {\n        return\n      }\n      selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant)\n      xBus.emit('UserSelectedAResultVariant', {\n        variant,\n        level,\n        result: result.value,\n        queryPreviewHash,\n      })\n    }\n\n    /**\n     * Merges the original result with the selected variant.\n     * The merge is done with all the selected variants of the array.\n     *\n     * @returns - The result with the selected variant merged.\n     */\n    const resultToProvide = computed(() => {\n      if (!selectedVariants.value.length) {\n        return result.value\n      }\n\n      const mergedResult = selectedVariants.value.reduce<Result>((result, variant) => {\n        return {\n          ...result,\n          ...variant,\n        }\n      }, result.value)\n\n      mergedResult.variants = result.value.variants\n      return mergedResult\n    })\n\n    /**\n     * Adds to the selectedVariants array the variants up to the autoSelectDepth level.\n     *\n     * @param variant - Variant to add to the array.\n     */\n    function selectFirstVariants(variant?: ResultVariant) {\n      if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {\n        selectedVariants.value.push(variant)\n        selectFirstVariants(variant.variants?.[0])\n      }\n    }\n\n    /** Provides the original result passed as a prop. */\n    provide<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string, result)\n\n    /** The selected variants of the result. */\n    provide<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string, selectedVariants)\n\n    /** The result variant key that will be selected. */\n    provide(SELECT_RESULT_VARIANT_KEY as string, selectResultVariant)\n\n    /**\n     * Resets the selected variants when the result changes.\n     * That includes doing the auto selection of the variants when the component is created\n     * and when the result is changed.\n     */\n    watch(\n      result,\n      () => {\n        selectedVariants.value = []\n        selectFirstVariants(result.value?.variants?.[0])\n      },\n      { immediate: true },\n    )\n\n    return () => slots.default?.({ result: resultToProvide.value })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAResultVariant`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component is intended to be used in conjunction with the `ResultVariantSelector` component.\n\nThe result exposed in the default slot will contain the data of the selected variant.\n\nBy default, the first variants of all the levels will be selected when the component is rendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantsProviderDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n            variants: [\n              {\n                name: 'red XL',\n              },\n              {\n                name: 'red L',\n              },\n            ],\n          },\n          {\n            name: 'blue',\n            variants: [\n              {\n                name: 'blue S',\n              },\n              {\n                name: 'blue M',\n              },\n              {\n                name: 'blue L',\n              },\n            ],\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the provider has been configured to not auto select any variant. Changing the\n`autoSelectDepth` prop sets the number of variant levels to auto select, being 0 no variants, 1 the\nfirst variant of the first level, and so on.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" :autoSelectDepth=\"0\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\nimport { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'ResultVariantsProviderDemo',\n  components: {\n    ResultVariantsProvider,\n    ResultVariantSelector,\n  },\n  data() {\n    return {\n      result: {\n        id: 'jacket',\n        modelName: 'Result',\n        type: 'Product',\n        isWishlisted: false,\n        identifier: { value: 'jacket' },\n        images: [],\n        name: 'jacket',\n        price: { hasDiscount: false, originalValue: 10, value: 10 },\n        url: '/products/jacket',\n        variants: [\n          {\n            name: 'red',\n            variants: [\n              {\n                name: 'red XL',\n              },\n              {\n                name: 'red L',\n              },\n            ],\n          },\n          {\n            name: 'blue',\n            variants: [\n              {\n                name: 'blue S',\n              },\n              {\n                name: 'blue M',\n              },\n              {\n                name: 'blue L',\n              },\n            ],\n          },\n        ],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;AAME;AACF,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM,CAAC,iBAAiB;AAClC,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;AAGE;QACF,MAAM,SAAS,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAA,CAAA;AAE1C;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,GAAG,CAAkB,EAAE,CAAA,CAAA;AAEhD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAM,CAA6B,kBAAkB,EAAE,IAAI,CAAA,CAAA;AAEpF;;;;;;;AAOE;AACF,QAAA,SAAS,mBAAmB,CAAC,OAAsB,EAAE,KAAI,GAAI,CAAC,EAAA;YAC5D,IAAI,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAA,KAAM,OAAO,EAAE;gBAC7C,OAAK;AACP,aAAA;AACA,YAAA,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAA,CAAA;AACtE,YAAA,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE;gBACtC,OAAO;gBACP,KAAK;gBACL,MAAM,EAAE,MAAM,CAAC,KAAK;gBACpB,gBAAgB;AACjB,aAAA,CAAA,CAAA;SACH;AAEA;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;AACrC,YAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE;gBAClC,OAAO,MAAM,CAAC,KAAI,CAAA;AACpB,aAAA;AAEA,YAAA,MAAM,YAAa,GAAE,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAS,CAAC,MAAM,EAAE,OAAO,KAAK;gBAC9E,OAAO;AACL,oBAAA,GAAG,MAAM;AACT,oBAAA,GAAG,OAAO;iBACZ,CAAA;AACF,aAAC,EAAE,MAAM,CAAC,KAAK,CAAA,CAAA;YAEf,YAAY,CAAC,QAAO,GAAI,MAAM,CAAC,KAAK,CAAC,QAAO,CAAA;AAC5C,YAAA,OAAO,YAAW,CAAA;AACpB,SAAC,CAAA,CAAA;AAED;;;;AAIE;QACF,SAAS,mBAAmB,CAAC,OAAuB,EAAA;AAClD,YAAA,IAAI,CAAC,CAAC,OAAQ,IAAG,gBAAgB,CAAC,KAAK,CAAC,MAAK,IAAK,KAAK,CAAC,eAAgB,GAAE,CAAC,EAAE;AAC3E,gBAAA,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAA,CAAA;gBACnC,mBAAmB,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA,CAAA;AAC3C,aAAA;SACF;;AAGA,QAAA,OAAO,CAAc,wBAAkC,EAAE,MAAM,CAAA,CAAA;;AAG/D,QAAA,OAAO,CAAuB,qBAA+B,EAAE,gBAAgB,CAAA,CAAA;;AAG/E,QAAA,OAAO,CAAC,yBAAmC,EAAE,mBAAmB,CAAA,CAAA;AAEhE;;;;AAIE;AACF,QAAA,KAAK,CACH,MAAM,EACN,MAAM;AACJ,YAAA,gBAAgB,CAAC,KAAM,GAAE,EAAC,CAAA;YAC1B,mBAAmB,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAA,CAAA;AACjD,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,KAAI,EAAG,CAAC,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACxE;AACF,CAAA,CAAA;;;;"}

package/js/components/scroll/base-scroll.vue.js

@@ -7,9 +7,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "div",
     {
       ref: "baseScrollEl",
-      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.throttledStoreScrollData && _ctx.throttledStoreScrollData(...args)),
       class: "x-scroll x-base-scroll",
-      "data-test": "base-scroll"
+      "data-test": "base-scroll",
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.throttledStoreScrollData && _ctx.throttledStoreScrollData(...args))
     },
     [
       renderSlot(_ctx.$slots, "default")

package/js/components/scroll/base-scroll.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-scroll.vue.js","sources":["../../../../src/components/scroll/base-scroll.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"baseScrollEl\"\n    @scroll=\"throttledStoreScrollData\"\n    class=\"x-scroll x-base-scroll\"\n    data-test=\"base-scroll\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref, SetupContext } from 'vue';\n  import { XEvent } from '../../wiring/events.types';\n  import { useScroll } from './use-scroll';\n\n  /**\n   * Base scroll component that depending on the user interactivity emits different events for\n   * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseScroll',\n    props: {\n      /**\n       * Distance to the end of the scroll that when reached will emit the\n       * `scroll:about-to-end` event.\n       *\n       * @public\n       */\n      distanceToBottom: {\n        type: Number,\n        default: 100\n      },\n      /**\n       * Positive vertical distance to still consider that the element is the first one visible.\n       * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n       * will still be considered the first one.\n       */\n      firstElementThresholdPx: {\n        type: Number,\n        default: 100\n      },\n      /**\n       * Time duration to ignore the subsequent scroll events after an emission.\n       * Higher values will decrease events precision but can prevent performance issues.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      },\n      /**\n       * If true (default), sets the scroll position to the top when certain events are emitted.\n       *\n       * @public\n       */\n      resetOnChange: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * List of events that should reset the scroll when emitted.\n       *\n       * @public\n       */\n      resetOn: {\n        type: [String, Array] as PropType<XEvent | XEvent[]>,\n        default: () => [\n          'SearchBoxQueryChanged',\n          'SortChanged',\n          'SelectedFiltersChanged',\n          'SelectedFiltersForRequestChanged',\n          'SelectedRelatedTagsChanged',\n          'UserChangedExtraParams'\n        ]\n      }\n    },\n    emits: [\n      'scroll',\n      'scroll:at-start',\n      'scroll:almost-at-end',\n      'scroll:at-end',\n      'scroll:direction-change'\n    ],\n    setup(props, context) {\n      const baseScrollEl = ref<HTMLElement>();\n\n      const { throttledStoreScrollData } = useScroll(\n        props,\n        context as SetupContext<any>,\n        baseScrollEl\n      );\n\n      return {\n        throttledStoreScrollData,\n        baseScrollEl\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseScroll` is a component that manages the state of scroll of a specified element. The\ncomponent does the necessary calculations for knowing the direction of scroll, if the scroll has\nreached to start or to end, and is about to reaching to end. The components emits the next events\ndepending of movement that realize the user:\n\n```vue\n<template>\n  <BaseScroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    :throttleMs=\"1000\"\n    :distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n### Avoid reset scroll on query change\n\nSet to false the reset scroll on query change feature which is true by default.\n\n```vue\n<template>\n  <BaseScroll @scroll=\"scroll\" :resetOnChange=\"false\">\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      }\n    }\n  };\n</script>\n```\n\n### Reset scroll\n\nYou can configure which events reset the scroll position using the `resetOn` prop.\n\n```vue\n<template>\n  <BaseScroll @scroll=\"scroll\" :resetOn=\"resetScrollEvents\">\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    data() {\n      return {\n        resetScrollEvents: ['UserAcceptedAQuery']\n      };\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      }\n    }\n  };\n</script>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;SAEQ,WAAc,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACjBA,SAAM,EAAA,EAAAC,kBAAA;AAAA,IAAA,KAAA;AAAA,IAAA;AAAA,MACP,GAAK,EAAA,cAAA;AAAA,MACL,iBAAU,CAAa,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAA,wBAAA;MAEvB,WAAQ,EAAA,aAAA;AAAA,KAAA;;;;;;;;;;;;"}
+{"version":3,"file":"base-scroll.vue.js","sources":["../../../../src/components/scroll/base-scroll.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"baseScrollEl\"\n    class=\"x-scroll x-base-scroll\"\n    data-test=\"base-scroll\"\n    @scroll=\"throttledStoreScrollData\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, SetupContext } from 'vue'\nimport type { XEvent } from '../../wiring/events.types'\nimport { defineComponent, ref } from 'vue'\nimport { useScroll } from './use-scroll'\n\n/**\n * Base scroll component that depending on the user interactivity emits different events for\n * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseScroll',\n  props: {\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    distanceToBottom: {\n      type: Number,\n      default: 100,\n    },\n    /**\n     * Positive vertical distance to still consider that the element is the first one visible.\n     * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n     * will still be considered the first one.\n     */\n    firstElementThresholdPx: {\n      type: Number,\n      default: 100,\n    },\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: {\n      type: [String, Array] as PropType<XEvent | XEvent[]>,\n      default: () => [\n        'SearchBoxQueryChanged',\n        'SortChanged',\n        'SelectedFiltersChanged',\n        'SelectedFiltersForRequestChanged',\n        'SelectedRelatedTagsChanged',\n        'UserChangedExtraParams',\n      ],\n    },\n  },\n  emits: [\n    'scroll',\n    'scroll:at-start',\n    'scroll:almost-at-end',\n    'scroll:at-end',\n    'scroll:direction-change',\n  ],\n  setup(props, context) {\n    const baseScrollEl = ref<HTMLElement>()\n\n    const { throttledStoreScrollData } = useScroll(\n      props,\n      context as SetupContext<any>,\n      baseScrollEl,\n    )\n\n    return {\n      throttledStoreScrollData,\n      baseScrollEl,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseScroll` is a component that manages the state of scroll of a specified element. The\ncomponent does the necessary calculations for knowing the direction of scroll, if the scroll has\nreached to start or to end, and is about to reaching to end. The components emits the next events\ndepending of movement that realize the user:\n\n```vue\n<template>\n  <BaseScroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    :throttleMs=\"1000\"\n    :distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\nimport { BaseScroll } from '@empathyco/x-components'\n\nexport default {\n  name: 'ScrollTest',\n  components: {\n    BaseScroll,\n  },\n  methods: {\n    scroll(position) {\n      console.log('scroll', position)\n    },\n    scrollDirectionChange(direction) {\n      console.log('scroll:direction-change', direction)\n    },\n    scrollAtStart() {\n      console.log('scroll:at-start')\n    },\n    scrollAlmostAtEnd(distance) {\n      console.log('scroll:almost-at-end', distance)\n    },\n    scrollAtEnd() {\n      console.log('scroll:at-end')\n    },\n  },\n}\n</script>\n```\n\n### Avoid reset scroll on query change\n\nSet to false the reset scroll on query change feature which is true by default.\n\n```vue\n<template>\n  <BaseScroll @scroll=\"scroll\" :resetOnChange=\"false\">\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\nimport { BaseScroll } from '@empathyco/x-components'\n\nexport default {\n  name: 'ScrollTest',\n  components: {\n    BaseScroll,\n  },\n  methods: {\n    scroll(position) {\n      console.log('scroll', position)\n    },\n  },\n}\n</script>\n```\n\n### Reset scroll\n\nYou can configure which events reset the scroll position using the `resetOn` prop.\n\n```vue\n<template>\n  <BaseScroll @scroll=\"scroll\" :resetOn=\"resetScrollEvents\">\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\nimport { BaseScroll } from '@empathyco/x-components'\n\nexport default {\n  name: 'ScrollTest',\n  components: {\n    BaseScroll,\n  },\n  data() {\n    return {\n      resetScrollEvents: ['UserAcceptedAQuery'],\n    }\n  },\n  methods: {\n    scroll(position) {\n      console.log('scroll', position)\n    },\n  },\n}\n</script>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;SAEQ,WAAc,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACbA,SAAC,EAAA,EAAAC,kBAAA;AAAA,IAAwB,KAAA;AAAA,IAAA;AAAA,MAC9B,GAAA,EAAA,cAAA;AAAA,MACC,KAAA,EAAA,wBAAA;AAAA,MAAA,WAAA,EAAA,aAAA;MAED,QAAQ,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;"}

package/js/components/scroll/base-scroll.vue2.js

@@ -18,7 +18,7 @@ var _sfc_main = defineComponent({
          */
         distanceToBottom: {
             type: Number,
-            default: 100
+            default: 100,
         },
         /**
          * Positive vertical distance to still consider that the element is the first one visible.
@@ -27,7 +27,7 @@ var _sfc_main = defineComponent({
          */
         firstElementThresholdPx: {
             type: Number,
-            default: 100
+            default: 100,
         },
         /**
          * Time duration to ignore the subsequent scroll events after an emission.
@@ -37,7 +37,7 @@ var _sfc_main = defineComponent({
          */
         throttleMs: {
             type: Number,
-            default: 100
+            default: 100,
         },
         /**
          * If true (default), sets the scroll position to the top when certain events are emitted.
@@ -46,7 +46,7 @@ var _sfc_main = defineComponent({
          */
         resetOnChange: {
             type: Boolean,
-            default: true
+            default: true,
         },
         /**
          * List of events that should reset the scroll when emitted.
@@ -61,25 +61,25 @@ var _sfc_main = defineComponent({
                 'SelectedFiltersChanged',
                 'SelectedFiltersForRequestChanged',
                 'SelectedRelatedTagsChanged',
-                'UserChangedExtraParams'
-            ]
-        }
+                'UserChangedExtraParams',
+            ],
+        },
     },
     emits: [
         'scroll',
         'scroll:at-start',
         'scroll:almost-at-end',
         'scroll:at-end',
-        'scroll:direction-change'
+        'scroll:direction-change',
     ],
     setup(props, context) {
         const baseScrollEl = ref();
         const { throttledStoreScrollData } = useScroll(props, context, baseScrollEl);
         return {
             throttledStoreScrollData,
-            baseScrollEl
+            baseScrollEl,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };