@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,39 +1,125 @@
-import script from './result-variants-provider.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+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';
 
-/* script */
-const __vue_script__ = script;
+/**
+ * Component that exposes the result merged with its selected variant in the default slot.
+ *
+ * It receives the original result and keeps track of the selected variant.
+ *
+ * It provides the original result, the array containing the selected variants and a callback to
+ * set the selected variant to be used from a child.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'ResultVariantsProvider',
+    props: {
+        /** The original result containing the variants. */
+        result: {
+            type: Object,
+            required: true
+        },
+        /**
+         * The provider by default will auto select the first variants of all levels.
+         * This prop allows to limit the number of variants auto selected when the provider is created.
+         * Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth
+         * to 0 will not select any variant, setting it to 1 will select only the first variant of the
+         * first level, and so on.
+         */
+        autoSelectDepth: {
+            type: Number,
+            default: Number.POSITIVE_INFINITY
+        }
+    },
+    setup(props, { slots }) {
+        const xBus = useXBus();
+        /**
+         * The original result containing the variants as a computed ref object to enable watching
+         * prop changes.
+         */
+        const result = computed(() => props.result);
+        /**
+         * Array to keep track of the selected variants of the result.
+         * Each position of the array is a nest level in the variants' hierarchy, so,
+         * the second position will contain a variant that is present inside the variant of the first
+         * position, and so on.
+         */
+        const selectedVariants = ref([]);
+        /**
+         * It injects the queryPreviewHash provided by a query-preview.
+         *
+         * @internal
+         */
+        const queryPreviewHash = inject('queryPreviewHash', null);
+        /**
+         * Selects a variant of the result.
+         * When called, it slices the array of selected variants to remove the selected child variants.
+         * Emits the {@link XEventsTypes.UserSelectedAResultVariant} when called.
+         *
+         * @param variant - The variant to set.
+         * @param level - The nest level where the variant is placed inside the result.
+         */
+        function selectResultVariant(variant, level = 0) {
+            if (selectedVariants.value[level] === variant) {
+                return;
+            }
+            selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);
+            xBus.emit('UserSelectedAResultVariant', {
+                variant,
+                level,
+                result: result.value,
+                queryPreviewHash
+            });
+        }
+        /**
+         * Merges the original result with the selected variant.
+         * The merge is done with all the selected variants of the array.
+         *
+         * @returns - The result with the selected variant merged.
+         */
+        const resultToProvide = computed(() => {
+            if (!selectedVariants.value.length) {
+                return result.value;
+            }
+            const mergedResult = selectedVariants.value.reduce((result, variant) => {
+                return {
+                    ...result,
+                    ...variant
+                };
+            }, result.value);
+            mergedResult.variants = result.value.variants;
+            return mergedResult;
+        });
+        /**
+         * Adds to the selectedVariants array the variants up to the autoSelectDepth level.
+         *
+         * @param variant - Variant to add to the array.
+         */
+        function selectFirstVariants(variant) {
+            if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {
+                selectedVariants.value.push(variant);
+                selectFirstVariants(variant.variants?.[0]);
+            }
+        }
+        /** Provides the original result passed as a prop. */
+        provide(RESULT_WITH_VARIANTS_KEY, result);
+        /** The selected variants of the result. */
+        provide(SELECTED_VARIANTS_KEY, selectedVariants);
+        /** The result variant key that will be selected. */
+        provide(SELECT_RESULT_VARIANT_KEY, selectResultVariant);
+        /**
+         * Resets the selected variants when the result changes.
+         * That includes doing the auto selection of the variants when the component is created
+         * and when the result is changed.
+         */
+        watch(result, () => {
+            selectedVariants.value = [];
+            selectFirstVariants(result.value?.variants?.[0]);
+        }, { immediate: true });
+        return () => slots.default?.({ result: resultToProvide.value })[0] ?? '';
+    }
+});
 
-/* template */
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    {},
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { _sfc_main as default };
 //# sourceMappingURL=result-variants-provider.vue.js.map

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    CreateElement,\n    VNode,\n    PropType\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      /**\n       * The original result containing the variants.\n       *\n       * @public\n       */\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) {\n      const xBus = useXBus();\n\n      /**\n       * The original result containing the variants as a computed ref object to enable watching prop changes.\n       *\n       * @public\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       * @public\n       */\n      const selectedVariants = ref<ResultVariant[]>([]);\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       * @public\n       */\n      const selectResultVariant = (variant: ResultVariant, level = 0): void => {\n        if (selectedVariants.value[level] === variant) {\n          return;\n        }\n        selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);\n        xBus.emit('UserSelectedAResultVariant', { variant, level, result: result.value });\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       * @public\n       */\n      const resultToProvide = computed<Result>(() => {\n        if (!selectedVariants.value.length) {\n          return result.value;\n        }\n        const mergedResult = selectedVariants.value.reduce<Result>((result, variant) => {\n          return {\n            ...result,\n            ...variant\n          };\n        }, result.value);\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      const selectFirstVariants = (variant?: ResultVariant): void => {\n        if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {\n          selectedVariants.value.push(variant);\n          selectFirstVariants(variant.variants?.[0]);\n        }\n      };\n\n      /**\n       * Provides the original result passed as a prop.\n       *\n       * @public\n       */\n      provide<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string, result);\n\n      /**\n       * The selected variants of the result.\n       *\n       * @public\n       */\n      provide<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string, selectedVariants);\n\n      /**\n       * The result variant key that will be selected.\n       *\n       * @public\n       */\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 {\n        props,\n        selectedVariants,\n        selectResultVariant,\n        resultToProvide\n      };\n    },\n    /**\n     * Render function of the provider.\n     * It exposes the result with the selected variant merged.\n     *\n     * @param createElement - Vue createElement method.\n     * @returns - The VNode of the first element passed in the slot.\n     * @public\n     */\n    render(createElement: CreateElement): VNode {\n      return (\n        this.$scopedSlots.default?.({\n          result: this.resultToProvide\n        })?.[0] ?? createElement()\n      );\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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":"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"}

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

@@ -1,153 +1,6 @@
-import { defineComponent, computed, ref, 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 _sfc_main from './result-variants-provider.vue.js';
 
-/**
- * Component that exposes the result merged with its selected variant in the default slot.
- *
- * It receives the original result and keeps track of the selected variant.
- *
- * It provides the original result, the array containing the selected variants and a callback to
- * set the selected variant to be used from a child.
- *
- * @public
- */
-var script = defineComponent({
-    name: 'ResultVariantsProvider',
-    props: {
-        /**
-         * The original result containing the variants.
-         *
-         * @public
-         */
-        result: {
-            type: Object,
-            required: true
-        },
-        /**
-         * The provider by default will auto select the first variants of all levels.
-         * This prop allows to limit the number of variants auto selected when the provider is created.
-         * Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth
-         * to 0 will not select any variant, setting it to 1 will select only the first variant of the
-         * first level, and so on.
-         */
-        autoSelectDepth: {
-            type: Number,
-            default: Number.POSITIVE_INFINITY
-        }
-    },
-    setup(props) {
-        const xBus = useXBus();
-        /**
-         * The original result containing the variants as a computed ref object to enable watching prop changes.
-         *
-         * @public
-         */
-        const result = computed(() => props.result);
-        /**
-         * Array to keep track of the selected variants of the result.
-         * Each position of the array is a nest level in the variants' hierarchy, so,
-         * the second position will contain a variant that is present inside the variant of the first
-         * position, and so on.
-         *
-         * @public
-         */
-        const selectedVariants = ref([]);
-        /**
-         * Selects a variant of the result.
-         * When called, it slices the array of selected variants to remove the selected child variants.
-         * Emits the {@link XEventsTypes.UserSelectedAResultVariant} when called.
-         *
-         * @param variant - The variant to set.
-         * @param level - The nest level where the variant is placed inside the result.
-         * @public
-         */
-        const selectResultVariant = (variant, level = 0) => {
-            if (selectedVariants.value[level] === variant) {
-                return;
-            }
-            selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);
-            xBus.emit('UserSelectedAResultVariant', { variant, level, result: result.value });
-        };
-        /**
-         * Merges the original result with the selected variant.
-         * The merge is done with all the selected variants of the array.
-         *
-         * @returns - The result with the selected variant merged.
-         * @public
-         */
-        const resultToProvide = computed(() => {
-            if (!selectedVariants.value.length) {
-                return result.value;
-            }
-            const mergedResult = selectedVariants.value.reduce((result, variant) => {
-                return {
-                    ...result,
-                    ...variant
-                };
-            }, result.value);
-            mergedResult.variants = result.value.variants;
-            return mergedResult;
-        });
-        /**
-         * Adds to the selectedVariants array the variants up to the autoSelectDepth level.
-         *
-         * @param variant - Variant to add to the array.
-         */
-        const selectFirstVariants = (variant) => {
-            if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {
-                selectedVariants.value.push(variant);
-                selectFirstVariants(variant.variants?.[0]);
-            }
-        };
-        /**
-         * Provides the original result passed as a prop.
-         *
-         * @public
-         */
-        provide(RESULT_WITH_VARIANTS_KEY, result);
-        /**
-         * The selected variants of the result.
-         *
-         * @public
-         */
-        provide(SELECTED_VARIANTS_KEY, selectedVariants);
-        /**
-         * The result variant key that will be selected.
-         *
-         * @public
-         */
-        provide(SELECT_RESULT_VARIANT_KEY, selectResultVariant);
-        /**
-         * Resets the selected variants when the result changes.
-         * That includes doing the auto selection of the variants when the component is created
-         * and when the result is changed.
-         */
-        watch(result, () => {
-            selectedVariants.value = [];
-            selectFirstVariants(result.value?.variants?.[0]);
-        }, { immediate: true });
-        return {
-            props,
-            selectedVariants,
-            selectResultVariant,
-            resultToProvide
-        };
-    },
-    /**
-     * Render function of the provider.
-     * It exposes the result with the selected variant merged.
-     *
-     * @param createElement - Vue createElement method.
-     * @returns - The VNode of the first element passed in the slot.
-     * @public
-     */
-    render(createElement) {
-        return (this.$scopedSlots.default?.({
-            result: this.resultToProvide
-        })?.[0] ?? createElement());
-    }
-});
 
-export { script as default };
+
+export { _sfc_main as default };
 //# sourceMappingURL=result-variants-provider.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"result-variants-provider.vue2.js","sources":["../../../../src/components/result/result-variants-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n  import {\n    defineComponent,\n    ref,\n    computed,\n    watch,\n    provide,\n    Ref,\n    CreateElement,\n    VNode,\n    PropType\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      /**\n       * The original result containing the variants.\n       *\n       * @public\n       */\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) {\n      const xBus = useXBus();\n\n      /**\n       * The original result containing the variants as a computed ref object to enable watching prop changes.\n       *\n       * @public\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       * @public\n       */\n      const selectedVariants = ref<ResultVariant[]>([]);\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       * @public\n       */\n      const selectResultVariant = (variant: ResultVariant, level = 0): void => {\n        if (selectedVariants.value[level] === variant) {\n          return;\n        }\n        selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);\n        xBus.emit('UserSelectedAResultVariant', { variant, level, result: result.value });\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       * @public\n       */\n      const resultToProvide = computed<Result>(() => {\n        if (!selectedVariants.value.length) {\n          return result.value;\n        }\n        const mergedResult = selectedVariants.value.reduce<Result>((result, variant) => {\n          return {\n            ...result,\n            ...variant\n          };\n        }, result.value);\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      const selectFirstVariants = (variant?: ResultVariant): void => {\n        if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {\n          selectedVariants.value.push(variant);\n          selectFirstVariants(variant.variants?.[0]);\n        }\n      };\n\n      /**\n       * Provides the original result passed as a prop.\n       *\n       * @public\n       */\n      provide<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string, result);\n\n      /**\n       * The selected variants of the result.\n       *\n       * @public\n       */\n      provide<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string, selectedVariants);\n\n      /**\n       * The result variant key that will be selected.\n       *\n       * @public\n       */\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 {\n        props,\n        selectedVariants,\n        selectResultVariant,\n        resultToProvide\n      };\n    },\n    /**\n     * Render function of the provider.\n     * It exposes the result with the selected variant merged.\n     *\n     * @param createElement - Vue createElement method.\n     * @returns - The VNode of the first element passed in the slot.\n     * @public\n     */\n    render(createElement: CreateElement): VNode {\n      return (\n        this.$scopedSlots.default?.({\n          result: this.resultToProvide\n        })?.[0] ?? createElement()\n      );\n    }\n  });\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"result-variants-provider.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,56 +1,24 @@
-import script from './base-scroll.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './base-scroll.vue2.js';
+import { openBlock, createElementBlock, renderSlot } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
     "div",
     {
-      staticClass: "x-scroll x-base-scroll",
-      attrs: { "data-test": "base-scroll" },
-      on: { scroll: _vm.throttledStoreScrollData },
+      ref: "baseScrollEl",
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.throttledStoreScrollData && _ctx.throttledStoreScrollData(...args)),
+      class: "x-scroll x-base-scroll",
+      "data-test": "base-scroll"
     },
-    [_vm._t("default")],
-    2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    [
+      renderSlot(_ctx.$slots, "default")
+    ],
+    544
+    /* NEED_HYDRATION, NEED_PATCH */
   );
+}
+var BaseScroll = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { BaseScroll as default };
 //# sourceMappingURL=base-scroll.vue.js.map

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 @scroll=\"throttledStoreScrollData\" class=\"x-scroll x-base-scroll\" data-test=\"base-scroll\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import ScrollMixin from './scroll.mixin';\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  @Component\n  export default class BaseScroll extends mixins(ScrollMixin) {}\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":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;"}

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

@@ -1,7 +1,5 @@
-import { __decorate } from 'tslib';
-import { mixins } from 'vue-class-component';
-import { Component } from 'vue-property-decorator';
-import ScrollMixin from './scroll.mixin.js';
+import { defineComponent, ref } from 'vue';
+import { useScroll } from './use-scroll.js';
 
 /**
  * Base scroll component that depending on the user interactivity emits different events for
@@ -9,12 +7,80 @@ import ScrollMixin from './scroll.mixin.js';
  *
  * @public
  */
-let BaseScroll = class BaseScroll extends mixins(ScrollMixin) {
-};
-BaseScroll = __decorate([
-    Component
-], BaseScroll);
-var script = BaseScroll;
+var _sfc_main = defineComponent({
+    name: 'BaseScroll',
+    props: {
+        /**
+         * Distance to the end of the scroll that when reached will emit the
+         * `scroll:about-to-end` event.
+         *
+         * @public
+         */
+        distanceToBottom: {
+            type: Number,
+            default: 100
+        },
+        /**
+         * Positive vertical distance to still consider that the element is the first one visible.
+         * For example, if set to 100, after scrolling 100 pixels, the first rendered element
+         * will still be considered the first one.
+         */
+        firstElementThresholdPx: {
+            type: Number,
+            default: 100
+        },
+        /**
+         * Time duration to ignore the subsequent scroll events after an emission.
+         * Higher values will decrease events precision but can prevent performance issues.
+         *
+         * @public
+         */
+        throttleMs: {
+            type: Number,
+            default: 100
+        },
+        /**
+         * If true (default), sets the scroll position to the top when certain events are emitted.
+         *
+         * @public
+         */
+        resetOnChange: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * List of events that should reset the scroll when emitted.
+         *
+         * @public
+         */
+        resetOn: {
+            type: [String, Array],
+            default: () => [
+                'SearchBoxQueryChanged',
+                'SortChanged',
+                'SelectedFiltersChanged',
+                'SelectedFiltersForRequestChanged',
+                'SelectedRelatedTagsChanged',
+                'UserChangedExtraParams'
+            ]
+        }
+    },
+    emits: [
+        'scroll',
+        'scroll:at-start',
+        'scroll:almost-at-end',
+        'scroll:at-end',
+        'scroll:direction-change'
+    ],
+    setup(props, context) {
+        const baseScrollEl = ref();
+        const { throttledStoreScrollData } = useScroll(props, context, baseScrollEl);
+        return {
+            throttledStoreScrollData,
+            baseScrollEl
+        };
+    }
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-scroll.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-scroll.vue2.js","sources":["../../../../src/components/scroll/base-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import ScrollMixin from './scroll.mixin';\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  @Component\n  export default class BaseScroll extends mixins(ScrollMixin) {}\n"],"names":[],"mappings":";;;;;AAWE;;;;;AAKG;AAEY,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,MAAM,CAAC,WAAW,CAAC,CAAA;CAAG,CAAA;AAAzC,UAAU,GAAA,UAAA,CAAA;IAD9B,SAAS;AACW,CAAA,EAAA,UAAU,CAA+B,CAAA;aAAzC,UAAU;;;;"}
+{"version":3,"file":"base-scroll.vue2.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":[],"mappings":";;;AAgBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACZ,SAAA;AACD;;;;AAIE;AACF,QAAA,uBAAuB,EAAE;AACvB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACZ,SAAA;AACD;;;;;AAKE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACZ,SAAA;AACD;;;;AAIE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAgC;YACpD,OAAO,EAAE,MAAM;gBACb,uBAAuB;gBACvB,aAAa;gBACb,wBAAwB;gBACxB,kCAAkC;gBAClC,4BAA4B;gBAC5B,wBAAuB;AACzB,aAAA;AACF,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE;QACL,QAAQ;QACR,iBAAiB;QACjB,sBAAsB;QACtB,eAAe;QACf,yBAAwB;AACzB,KAAA;IACD,KAAK,CAAC,KAAK,EAAE,OAAO,EAAA;AAClB,QAAA,MAAM,YAAa,GAAE,GAAG,EAAe,CAAA;AAEvC,QAAA,MAAM,EAAE,wBAAyB,EAAA,GAAI,SAAS,CAC5C,KAAK,EACL,OAA4B,EAC5B,YAAW,CACZ,CAAA;QAED,OAAO;YACL,wBAAwB;YACxB,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}