@empathyco/x-components 6.0.0-alpha.21 → 6.0.0-alpha.211

package/js/x-modules/scroll/components/main-scroll-item.vue2.js

@@ -1,85 +1,83 @@
 import { defineComponent, ref, inject, onBeforeUnmount, onMounted, nextTick, watch } from 'vue';
-import { scrollXModule } from '../x-module.js';
 import { useState } from '../../../composables/use-state.js';
 import { useXBus } from '../../../composables/use-x-bus.js';
+import { scrollXModule } from '../x-module.js';
 import { ScrollObserverKey } from './scroll.const.js';
 
-/**
- * Wrapper for elements contained in the {@link MainScroll} that should store/restore its
- * position.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'MainScrollItem',
-    xModule: scrollXModule.name,
-    props: {
-        /** The item data. Used to set the scroll identifier. */
-        item: {
-            type: Object,
-            required: true
-        },
-        /** The tag to render. */
-        tag: {
-            type: [String, Object],
-            default: 'div'
-        }
-    },
-    setup(props) {
-        const xBus = useXBus();
-        /** Rendered HTML node. */
-        const rootRef = ref();
-        /**
-         * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
-         * `id` property, this component should be scrolled into view.
-         */
-        const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
-        /** Observer to detect the first visible element. */
-        const firstVisibleItemObserver = inject(ScrollObserverKey, null);
-        /**
-         * Initialises the element visibility observation, stopping the previous one if it has.
-         *
-         * @param newObserver - The new observer for the HTML element.
-         * @param oldObserver - The old observer for the HTML element.
-         */
-        const observeItem = (newObserver, oldObserver) => {
-            {
-                if (rootRef.value) {
-                    oldObserver?.unobserve(rootRef.value);
-                    newObserver?.observe(rootRef.value);
-                    if (pendingScrollTo.value === props.item.id) {
-                        nextTick(() => {
-                            rootRef.value.scrollIntoView({
-                                block: 'center'
-                            });
-                        });
-                        xBus.emit('ScrollRestoreSucceeded');
-                    }
-                }
-            }
-        };
-        /** Detaches the observer from the rendered element to prevent memory leaks. */
-        onBeforeUnmount(() => {
-            if (rootRef.value) {
-                firstVisibleItemObserver?.value.unobserve(rootRef.value);
-            }
-        });
-        /**
-         * Initialise scroll behavior.
-         * - Observes the rendered element to detect if it is the first visible item.
-         * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
-         * element into the first position of the view.
-         */
-        onMounted(() => {
-            nextTick(() => {
-                // Mounted does not guarantee that child components are mounted too
-                if (firstVisibleItemObserver) {
-                    watch(firstVisibleItemObserver, observeItem, { immediate: true });
-                }
-            });
-        });
-        return { rootRef };
-    }
+/**
+ * Wrapper for elements contained in the {@link MainScroll} that should store/restore its
+ * position.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'MainScrollItem',
+    xModule: scrollXModule.name,
+    props: {
+        /** The item data. Used to set the scroll identifier. */
+        item: {
+            type: Object,
+            required: true,
+        },
+        /** The tag to render. */
+        tag: {
+            type: [String, Object],
+            default: 'div',
+        },
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /** Rendered HTML node. */
+        const rootRef = ref();
+        /**
+         * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
+         * `id` property, this component should be scrolled into view.
+         */
+        const { pendingScrollTo } = useState('scroll');
+        /** Observer to detect the first visible element. */
+        const firstVisibleItemObserver = inject(ScrollObserverKey, null);
+        /**
+         * Initialises the element visibility observation, stopping the previous one if it has.
+         *
+         * @param newObserver - The new observer for the HTML element.
+         * @param oldObserver - The old observer for the HTML element.
+         */
+        const observeItem = (newObserver, oldObserver) => {
+            if (rootRef.value) {
+                oldObserver?.unobserve(rootRef.value);
+                newObserver?.observe(rootRef.value);
+                if (pendingScrollTo.value === props.item.id) {
+                    nextTick(() => {
+                        rootRef.value.scrollIntoView({
+                            block: 'center',
+                        });
+                    });
+                    xBus.emit('ScrollRestoreSucceeded');
+                }
+            }
+        };
+        /** Detaches the observer from the rendered element to prevent memory leaks. */
+        onBeforeUnmount(() => {
+            if (rootRef.value) {
+                firstVisibleItemObserver?.value.unobserve(rootRef.value);
+            }
+        });
+        /**
+         * Initialise scroll behavior.
+         * - Observes the rendered element to detect if it is the first visible item.
+         * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
+         * element into the first position of the view.
+         */
+        onMounted(() => {
+            nextTick(() => {
+                // Mounted does not guarantee that child components are mounted too
+                if (firstVisibleItemObserver) {
+                    watch(firstVisibleItemObserver, observeItem, { immediate: true });
+                }
+            });
+        });
+        return { rootRef };
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/scroll/components/main-scroll-item.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-scroll-item.vue2.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" ref=\"rootRef\" :data-scroll=\"item.id\">\n    <slot />\n  </component>\n</template>\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import {\n    defineComponent,\n    inject,\n    nextTick,\n    onBeforeUnmount,\n    onMounted,\n    PropType,\n    ref,\n    watch,\n    Ref,\n    WatchCallback,\n    Component\n  } from 'vue';\n  import { scrollXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n  import { useXBus } from '../../../composables/use-x-bus';\n  import { ScrollObserverKey } from './scroll.const';\n  import { ScrollVisibilityObserver } from './scroll.types';\n\n  /**\n   * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n   * position.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'MainScrollItem',\n    xModule: scrollXModule.name,\n    props: {\n      /** The item data. Used to set the scroll identifier. */\n      item: {\n        type: Object as PropType<Identifiable>,\n        required: true\n      },\n      /** The tag to render. */\n      tag: {\n        type: [String, Object] as PropType<string | Component>,\n        default: 'div'\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /** Rendered HTML node. */\n      const rootRef = ref<HTMLElement>();\n\n      /**\n       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item\n       * `id` property, this component should be scrolled into view.\n       */\n      const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);\n\n      /** Observer to detect the first visible element. */\n      const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(\n        ScrollObserverKey as string,\n        null\n      );\n\n      /**\n       * Initialises the element visibility observation, stopping the previous one if it has.\n       *\n       * @param newObserver - The new observer for the HTML element.\n       * @param oldObserver - The old observer for the HTML element.\n       */\n      const observeItem: WatchCallback<ScrollVisibilityObserver> = (\n        newObserver: ScrollVisibilityObserver | null,\n        oldObserver: ScrollVisibilityObserver | null\n      ): void => {\n        {\n          if (rootRef.value) {\n            oldObserver?.unobserve(rootRef.value);\n            newObserver?.observe(rootRef.value);\n            if (pendingScrollTo.value === props.item.id) {\n              nextTick(() => {\n                rootRef.value!.scrollIntoView({\n                  block: 'center'\n                });\n              });\n              xBus.emit('ScrollRestoreSucceeded');\n            }\n          }\n        }\n      };\n\n      /** Detaches the observer from the rendered element to prevent memory leaks. */\n      onBeforeUnmount(() => {\n        if (rootRef.value) {\n          firstVisibleItemObserver?.value.unobserve(rootRef.value);\n        }\n      });\n\n      /**\n       * Initialise scroll behavior.\n       * - Observes the rendered element to detect if it is the first visible item.\n       * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n       * element into the first position of the view.\n       */\n      onMounted(() => {\n        nextTick(() => {\n          // Mounted does not guarantee that child components are mounted too\n          if (firstVisibleItemObserver) {\n            watch(firstVisibleItemObserver, observeItem, { immediate: true });\n          }\n        });\n      });\n\n      return { rootRef };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis components emits the following events:\n\n- [`ScrollRestoreSucceeded`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n  <div>\n    <UrlHandler />\n    <SearchInput />\n\n    <MainScroll>\n      <Scroll>\n        <ResultsList #result=\"{ item }\">\n          <MainScrollItem :item=\"item\" tag=\"article\">\n            <BaseResultLink :item=\"item\">\n              <img :src=\"item.images[0]\" />\n              <p>{{ item.title }}</p>\n            </BaseResultLink>\n          </MainScrollItem>\n        </ResultsList>\n      </Scroll>\n    </MainScroll>\n  </div>\n</template>\n\n<script>\n  import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { UrlHandler } from '@empathyco/x-components/url';\n\n  export default {\n    name: 'ScrollItemDemo',\n    components: {\n      Scroll,\n      ResultsList,\n      MainScroll,\n      MainScrollItem,\n      SearchInput,\n      UrlHandler\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;;AAGtB,QAAA,MAAM,OAAQ,GAAE,GAAG,EAAe,CAAA;AAElC;;;AAGE;AACF,QAAA,MAAM,EAAE,eAAgB,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;;QAGnE,MAAM,2BAA2B,MAAM,CACrC,iBAA2B,EAC3B,IAAG,CACJ,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,WAAW,GAA4C,CAC3D,WAA4C,EAC5C,WAA2C,KAClC;AACT,YAAA;gBACE,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,oBAAA,WAAW,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AACrC,oBAAA,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;oBACnC,IAAI,eAAe,CAAC,KAAM,KAAI,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE;wBAC3C,QAAQ,CAAC,MAAM;AACb,4BAAA,OAAO,CAAC,KAAM,CAAC,cAAc,CAAC;AAC5B,gCAAA,KAAK,EAAE,QAAO;AACf,6BAAA,CAAC,CAAA;AACJ,yBAAC,CAAC,CAAA;AACF,wBAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAA;AACrC,qBAAA;AACF,iBAAA;AACF,aAAA;AACF,SAAC,CAAA;;QAGD,eAAe,CAAC,MAAM;YACpB,IAAI,OAAO,CAAC,KAAK,EAAE;gBACjB,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAC1D,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;QACF,SAAS,CAAC,MAAM;YACd,QAAQ,CAAC,MAAM;;AAEb,gBAAA,IAAI,wBAAwB,EAAE;oBAC5B,KAAK,CAAC,wBAAwB,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,IAAK,EAAC,CAAC,CAAA;AACnE,iBAAA;AACF,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;QAEF,OAAO,EAAE,SAAS,CAAA;KACpB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"main-scroll-item.vue2.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" ref=\"rootRef\" :data-scroll=\"item.id\">\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Identifiable } from '@empathyco/x-types'\nimport type { Component, PropType, Ref, WatchCallback } from 'vue'\nimport type { ScrollVisibilityObserver } from './scroll.types'\nimport { defineComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { scrollXModule } from '../x-module'\nimport { ScrollObserverKey } from './scroll.const'\n\n/**\n * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'MainScrollItem',\n  xModule: scrollXModule.name,\n  props: {\n    /** The item data. Used to set the scroll identifier. */\n    item: {\n      type: Object as PropType<Identifiable>,\n      required: true,\n    },\n    /** The tag to render. */\n    tag: {\n      type: [String, Object] as PropType<string | Component>,\n      default: 'div',\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /** Rendered HTML node. */\n    const rootRef = ref<HTMLElement>()\n\n    /**\n     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item\n     * `id` property, this component should be scrolled into view.\n     */\n    const { pendingScrollTo } = useState('scroll')\n\n    /** Observer to detect the first visible element. */\n    const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(\n      ScrollObserverKey as string,\n      null,\n    )\n\n    /**\n     * Initialises the element visibility observation, stopping the previous one if it has.\n     *\n     * @param newObserver - The new observer for the HTML element.\n     * @param oldObserver - The old observer for the HTML element.\n     */\n    const observeItem: WatchCallback<ScrollVisibilityObserver> = (\n      newObserver: ScrollVisibilityObserver | null,\n      oldObserver: ScrollVisibilityObserver | null,\n    ): void => {\n      if (rootRef.value) {\n        oldObserver?.unobserve(rootRef.value)\n        newObserver?.observe(rootRef.value)\n        if (pendingScrollTo.value === props.item.id) {\n          nextTick(() => {\n            rootRef.value!.scrollIntoView({\n              block: 'center',\n            })\n          })\n          xBus.emit('ScrollRestoreSucceeded')\n        }\n      }\n    }\n\n    /** Detaches the observer from the rendered element to prevent memory leaks. */\n    onBeforeUnmount(() => {\n      if (rootRef.value) {\n        firstVisibleItemObserver?.value.unobserve(rootRef.value)\n      }\n    })\n\n    /**\n     * Initialise scroll behavior.\n     * - Observes the rendered element to detect if it is the first visible item.\n     * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n     * element into the first position of the view.\n     */\n    onMounted(() => {\n      nextTick(() => {\n        // Mounted does not guarantee that child components are mounted too\n        if (firstVisibleItemObserver) {\n          watch(firstVisibleItemObserver, observeItem, { immediate: true })\n        }\n      })\n    })\n\n    return { rootRef }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`ScrollRestoreSucceeded`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n  <div>\n    <UrlHandler />\n    <SearchInput />\n\n    <MainScroll>\n      <Scroll>\n        <ResultsList #result=\"{ item }\">\n          <MainScrollItem :item=\"item\" tag=\"article\">\n            <BaseResultLink :item=\"item\">\n              <img :src=\"item.images[0]\" />\n              <p>{{ item.title }}</p>\n            </BaseResultLink>\n          </MainScrollItem>\n        </ResultsList>\n      </Scroll>\n    </MainScroll>\n  </div>\n</template>\n\n<script setup>\nimport { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { UrlHandler } from '@empathyco/x-components/url'\nimport { BaseResultLink } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAgBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;;AAGrB,QAAA,MAAM,OAAM,GAAI,GAAG,EAAc;AAEjC;;;AAGE;QACF,MAAM,EAAE,eAAc,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;;QAG7C,MAAM,2BAA2B,MAAM,CACrC,iBAA2B,EAC3B,IAAI,CACN;AAEA;;;;;AAKE;AACF,QAAA,MAAM,WAAW,GAA4C,CAC3D,WAA4C,EAC5C,WAA4C,KACrC;AACP,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,gBAAA,WAAW,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK,CAAA;AACpC,gBAAA,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,CAAA;gBAClC,IAAI,eAAe,CAAC,KAAI,KAAM,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE;oBAC3C,QAAQ,CAAC,MAAI;AACX,wBAAA,OAAO,CAAC,KAAM,CAAC,cAAc,CAAC;AAC5B,4BAAA,KAAK,EAAE,QAAQ;AAChB,yBAAA,CAAA;AACH,oBAAA,CAAC,CAAA;AACD,oBAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAA;gBACpC;YACF;AACF,QAAA,CAAA;;QAGA,eAAe,CAAC,MAAI;AAClB,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;gBACjB,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAA;YACzD;AACF,QAAA,CAAC,CAAA;AAED;;;;;AAKE;QACF,SAAS,CAAC,MAAI;YACZ,QAAQ,CAAC,MAAI;;gBAEX,IAAI,wBAAwB,EAAE;oBAC5B,KAAK,CAAC,wBAAwB,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAA;gBAClE;AACF,YAAA,CAAC,CAAA;AACH,QAAA,CAAC,CAAA;QAED,OAAO,EAAE,OAAM,EAAE;IACnB,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/scroll/components/main-scroll.vue.js

@@ -1,178 +1,178 @@
 import { defineComponent, ref, computed, provide, onMounted, getCurrentInstance, onBeforeUnmount, watch } from 'vue';
-import { scrollXModule } from '../x-module.js';
 import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts.js';
 import { useState } from '../../../composables/use-state.js';
 import { useXBus } from '../../../composables/use-x-bus.js';
+import { scrollXModule } from '../x-module.js';
 import { ScrollObserverKey } from './scroll.const.js';
 
-/**
- * Extends the scroll making it able to sync the first visible element, and allowing
- * the children position to be restored.
- *
- * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}
- * component.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'MainScroll',
-    xModule: scrollXModule.name,
-    props: {
-        /**
-         * If `true`, sets this scroll instance to the main of the application. Being the main
-         * scroll implies that features like restoring the scroll when the query changes, or storing
-         * the scroll position in the URL will be enabled for this container.
-         */
-        useWindow: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Timeout in milliseconds to abort trying to restore the scroll position to the target
-         * element.
-         */
-        restoreScrollTimeoutMs: {
-            type: Number,
-            default: 5000
-        },
-        /** Intersection percentage to consider an element visible. */
-        threshold: {
-            type: Number,
-            default: 0.3
-        },
-        /** Adjusts the size of the scroll container bounds. */
-        margin: {
-            type: String,
-            default: '0px'
-        }
-    },
-    setup(props, { slots }) {
-        const xBus = useXBus();
-        /** The reference to the root element of the component. */
-        const rootRef = ref();
-        /** The elements that are currently considered visible. */
-        const intersectingElements = ref([]);
-        /** Intersection observer to determine visibility of the elements. */
-        let intersectionObserver = ref(null);
-        /**
-         * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
-         * `id` property, this component should be scrolled into view.
-         */
-        const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
-        /** Disables the animations. */
-        const disableAnimations = computed(() => !!pendingScrollTo.value);
-        provide(DISABLE_ANIMATIONS_KEY, disableAnimations);
-        /**
-         * Removes an element from the {@link MainScroll.intersectingElements} list.
-         *
-         * @param element - The element to remove from the visible elements.
-         */
-        const removeVisibleElement = (element) => {
-            const index = intersectingElements.value.indexOf(element);
-            if (index !== -1) {
-                intersectingElements.value.splice(index, 1);
-            }
-        };
-        /**
-         * Creates an `IntersectionObserver` to detect the first visible elements. Children of this
-         * component should register themselves if they want to be observed.
-         *
-         * @returns The intersection observer.
-         */
-        const visibleElementsObserver = computed(() => {
-            const observer = intersectionObserver.value;
-            return observer
-                ? {
-                    observe: observer.observe.bind(observer),
-                    unobserve: element => {
-                        removeVisibleElement(element);
-                        observer.unobserve(element);
-                    }
-                }
-                : null;
-        });
-        provide(ScrollObserverKey, visibleElementsObserver);
-        /**
-         * Updates the visible elements given a list of intersection observer entries.
-         *
-         * @param entries - The entries from whom update the visibility.
-         */
-        const updateVisibleElements = (entries) => {
-            entries.forEach(entry => {
-                const target = entry.target;
-                if (entry.isIntersecting) {
-                    intersectingElements.value.push(target);
-                }
-                else {
-                    removeVisibleElement(target);
-                }
-            });
-        };
-        /** Stores the root element and initialise the observer after mounting the component. */
-        onMounted(() => {
-            rootRef.value = getCurrentInstance()?.proxy?.$el;
-            if (rootRef.value) {
-                intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
-                    root: props.useWindow ? document : rootRef.value,
-                    threshold: props.threshold,
-                    rootMargin: props.margin
-                });
-            }
-        });
-        /** Disconnects the intersection observer. */
-        onBeforeUnmount(() => {
-            intersectionObserver.value?.disconnect();
-            xBus.emit('UserScrolledToElement', '');
-        });
-        /** Disconnects the previous observer. */
-        watch(intersectionObserver, (_new, old) => old?.disconnect());
-        /** Stores the identifier of the timeout that will consider the scroll failed to restore. */
-        let restoreScrollFailTimeoutId;
-        /**
-         * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
-         *
-         * @param pendingScrollTo - The position the scroll should be restored to.
-         */
-        watch(pendingScrollTo, () => {
-            // TODO Move this logic to the wiring. A cancelable delay operator is needed
-            clearTimeout(restoreScrollFailTimeoutId);
-            if (pendingScrollTo.value) {
-                restoreScrollFailTimeoutId = window.setTimeout(() => {
-                    xBus.emit('ScrollRestoreFailed');
-                }, props.restoreScrollTimeoutMs);
-            }
-        });
-        /**
-         * The first visible element contained in this component.
-         *
-         * @returns The first visible element in this component.
-         */
-        const firstVisibleElement = computed(() => {
-            if (intersectingElements.value.length === 0) {
-                return '';
-            }
-            const firstVisibleElement = intersectingElements.value.reduce((firstVisibleElement, anotherElement) => {
-                // FIXME: This algorithm only takes into account LTR layouts
-                const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();
-                const anotherElementBounds = anotherElement.getBoundingClientRect();
-                return anotherElementBounds.left <= firstVisibleElementBounds.left &&
-                    anotherElementBounds.top <= firstVisibleElementBounds.top
-                    ? anotherElement
-                    : firstVisibleElement;
-            });
-            return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')
-                ? ''
-                : firstVisibleElement.dataset.scroll;
-        });
-        watch(firstVisibleElement, () => xBus.emit('UserScrolledToElement', firstVisibleElement.value), { immediate: true });
-        /*
-         * Obtains the vNodes array of the default slot and renders only the first one.
-         * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2
-         * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
-         * retrieve the HTML element in both versions.
-         */
-        return () => slots.default?.()[0] ?? '';
-    }
+/**
+ * Extends the scroll making it able to sync the first visible element, and allowing
+ * the children position to be restored.
+ *
+ * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}
+ * component.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'MainScroll',
+    xModule: scrollXModule.name,
+    props: {
+        /**
+         * If `true`, sets this scroll instance to the main of the application. Being the main
+         * scroll implies that features like restoring the scroll when the query changes, or storing
+         * the scroll position in the URL will be enabled for this container.
+         */
+        useWindow: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Timeout in milliseconds to abort trying to restore the scroll position to the target
+         * element.
+         */
+        restoreScrollTimeoutMs: {
+            type: Number,
+            default: 5000,
+        },
+        /** Intersection percentage to consider an element visible. */
+        threshold: {
+            type: Number,
+            default: 0.3,
+        },
+        /** Adjusts the size of the scroll container bounds. */
+        margin: {
+            type: String,
+            default: '0px',
+        },
+    },
+    setup(props, { slots }) {
+        const xBus = useXBus();
+        /** The reference to the root element of the component. */
+        const rootRef = ref();
+        /** The elements that are currently considered visible. */
+        const intersectingElements = ref([]);
+        /** Intersection observer to determine visibility of the elements. */
+        const intersectionObserver = ref(null);
+        /**
+         * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
+         * `id` property, this component should be scrolled into view.
+         */
+        const { pendingScrollTo } = useState('scroll');
+        /** Disables the animations. */
+        const disableAnimations = computed(() => !!pendingScrollTo.value);
+        provide(DISABLE_ANIMATIONS_KEY, disableAnimations);
+        /**
+         * Removes an element from the {@link MainScroll.intersectingElements} list.
+         *
+         * @param element - The element to remove from the visible elements.
+         */
+        const removeVisibleElement = (element) => {
+            const index = intersectingElements.value.indexOf(element);
+            if (index !== -1) {
+                intersectingElements.value.splice(index, 1);
+            }
+        };
+        /**
+         * Creates an `IntersectionObserver` to detect the first visible elements. Children of this
+         * component should register themselves if they want to be observed.
+         *
+         * @returns The intersection observer.
+         */
+        const visibleElementsObserver = computed(() => {
+            const observer = intersectionObserver.value;
+            return observer
+                ? {
+                    observe: observer.observe.bind(observer),
+                    unobserve: element => {
+                        removeVisibleElement(element);
+                        observer.unobserve(element);
+                    },
+                }
+                : null;
+        });
+        provide(ScrollObserverKey, visibleElementsObserver);
+        /**
+         * Updates the visible elements given a list of intersection observer entries.
+         *
+         * @param entries - The entries from whom update the visibility.
+         */
+        const updateVisibleElements = (entries) => {
+            entries.forEach(entry => {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    intersectingElements.value.push(target);
+                }
+                else {
+                    removeVisibleElement(target);
+                }
+            });
+        };
+        /** Stores the root element and initialise the observer after mounting the component. */
+        onMounted(() => {
+            rootRef.value = getCurrentInstance()?.proxy?.$el;
+            if (rootRef.value) {
+                intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
+                    root: props.useWindow ? document : rootRef.value,
+                    threshold: props.threshold,
+                    rootMargin: props.margin,
+                });
+            }
+        });
+        /** Disconnects the intersection observer. */
+        onBeforeUnmount(() => {
+            intersectionObserver.value?.disconnect();
+            xBus.emit('UserScrolledToElement', '');
+        });
+        /** Disconnects the previous observer. */
+        watch(intersectionObserver, (_new, old) => old?.disconnect());
+        /** Stores the identifier of the timeout that will consider the scroll failed to restore. */
+        let restoreScrollFailTimeoutId;
+        /**
+         * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
+         *
+         * @param pendingScrollTo - The position the scroll should be restored to.
+         */
+        watch(pendingScrollTo, () => {
+            // TODO Move this logic to the wiring. A cancelable delay operator is needed
+            clearTimeout(restoreScrollFailTimeoutId);
+            if (pendingScrollTo.value) {
+                restoreScrollFailTimeoutId = window.setTimeout(() => {
+                    xBus.emit('ScrollRestoreFailed');
+                }, props.restoreScrollTimeoutMs);
+            }
+        });
+        /**
+         * The first visible element contained in this component.
+         *
+         * @returns The first visible element in this component.
+         */
+        const firstVisibleElement = computed(() => {
+            if (intersectingElements.value.length === 0) {
+                return '';
+            }
+            const firstVisibleElement = intersectingElements.value.reduce((firstVisibleElement, anotherElement) => {
+                // FIXME: This algorithm only takes into account LTR layouts
+                const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();
+                const anotherElementBounds = anotherElement.getBoundingClientRect();
+                return anotherElementBounds.left <= firstVisibleElementBounds.left &&
+                    anotherElementBounds.top <= firstVisibleElementBounds.top
+                    ? anotherElement
+                    : firstVisibleElement;
+            });
+            return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')
+                ? ''
+                : firstVisibleElement.dataset.scroll;
+        });
+        watch(firstVisibleElement, () => xBus.emit('UserScrolledToElement', firstVisibleElement.value), { immediate: true });
+        /*
+         * Obtains the vNodes array of the default slot and renders only the first one.
+         * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2
+         * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
+         * retrieve the HTML element in both versions.
+         */
+        return () => slots.default?.()[0] ?? '';
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/scroll/components/main-scroll.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    computed,\n    defineComponent,\n    getCurrentInstance,\n    onBeforeUnmount,\n    onMounted,\n    provide,\n    ref,\n    watch\n  } from 'vue';\n  import { scrollXModule } from '../x-module';\n  import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';\n  import { useState } from '../../../composables/use-state';\n  import { useXBus } from '../../../composables/use-x-bus';\n  import { ScrollObserverKey } from './scroll.const';\n  import { ScrollVisibilityObserver } from './scroll.types';\n\n  /**\n   * Extends the scroll making it able to sync the first visible element, and allowing\n   * the children position to be restored.\n   *\n   * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n   * component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'MainScroll',\n    xModule: scrollXModule.name,\n    props: {\n      /**\n       * If `true`, sets this scroll instance to the main of the application. Being the main\n       * scroll implies that features like restoring the scroll when the query changes, or storing\n       * the scroll position in the URL will be enabled for this container.\n       */\n      useWindow: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * Timeout in milliseconds to abort trying to restore the scroll position to the target\n       * element.\n       */\n      restoreScrollTimeoutMs: {\n        type: Number,\n        default: 5000\n      },\n      /** Intersection percentage to consider an element visible. */\n      threshold: {\n        type: Number,\n        default: 0.3\n      },\n      /** Adjusts the size of the scroll container bounds. */\n      margin: {\n        type: String,\n        default: '0px'\n      }\n    },\n    setup(props, { slots }) {\n      const xBus = useXBus();\n\n      /** The reference to the root element of the component. */\n      const rootRef = ref<Element>();\n      /** The elements that are currently considered visible. */\n      const intersectingElements = ref<HTMLElement[]>([]);\n\n      /** Intersection observer to determine visibility of the elements. */\n      let intersectionObserver = ref<IntersectionObserver | null>(null);\n\n      /**\n       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item\n       * `id` property, this component should be scrolled into view.\n       */\n      const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);\n\n      /** Disables the animations. */\n      const disableAnimations = computed((): boolean => !!pendingScrollTo.value);\n      provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations);\n\n      /**\n       * Removes an element from the {@link MainScroll.intersectingElements} list.\n       *\n       * @param element - The element to remove from the visible elements.\n       */\n      const removeVisibleElement = (element: HTMLElement) => {\n        const index = intersectingElements.value.indexOf(element);\n        if (index !== -1) {\n          intersectingElements.value.splice(index, 1);\n        }\n      };\n\n      /**\n       * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n       * component should register themselves if they want to be observed.\n       *\n       * @returns The intersection observer.\n       */\n      const visibleElementsObserver = computed((): ScrollVisibilityObserver | null => {\n        const observer = intersectionObserver.value;\n        return observer\n          ? {\n              observe: observer.observe.bind(observer),\n              unobserve: element => {\n                removeVisibleElement(element);\n                observer.unobserve(element);\n              }\n            }\n          : null;\n      });\n      provide(ScrollObserverKey as string, visibleElementsObserver);\n\n      /**\n       * Updates the visible elements given a list of intersection observer entries.\n       *\n       * @param entries - The entries from whom update the visibility.\n       */\n      const updateVisibleElements = (entries: IntersectionObserverEntry[]) => {\n        entries.forEach(entry => {\n          const target = entry.target as HTMLElement;\n          if (entry.isIntersecting) {\n            intersectingElements.value.push(target);\n          } else {\n            removeVisibleElement(target);\n          }\n        });\n      };\n\n      /** Stores the root element and initialise the observer after mounting the component. */\n      onMounted(() => {\n        rootRef.value = getCurrentInstance()?.proxy?.$el;\n        if (rootRef.value) {\n          intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {\n            root: props.useWindow ? document : rootRef.value,\n            threshold: props.threshold,\n            rootMargin: props.margin\n          });\n        }\n      });\n\n      /** Disconnects the intersection observer. */\n      onBeforeUnmount(() => {\n        intersectionObserver.value?.disconnect();\n        xBus.emit('UserScrolledToElement', '');\n      });\n\n      /** Disconnects the previous observer. */\n      watch(intersectionObserver, (_new, old) => old?.disconnect());\n\n      /** Stores the identifier of the timeout that will consider the scroll failed to restore. */\n      let restoreScrollFailTimeoutId: number;\n\n      /**\n       * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n       *\n       * @param pendingScrollTo - The position the scroll should be restored to.\n       */\n      watch(pendingScrollTo, () => {\n        // TODO Move this logic to the wiring. A cancelable delay operator is needed\n        clearTimeout(restoreScrollFailTimeoutId);\n        if (pendingScrollTo.value) {\n          restoreScrollFailTimeoutId = window.setTimeout(() => {\n            xBus.emit('ScrollRestoreFailed');\n          }, props.restoreScrollTimeoutMs);\n        }\n      });\n\n      /**\n       * The first visible element contained in this component.\n       *\n       * @returns The first visible element in this component.\n       */\n      const firstVisibleElement = computed(() => {\n        if (intersectingElements.value.length === 0) {\n          return '';\n        }\n        const firstVisibleElement = intersectingElements.value.reduce(\n          (firstVisibleElement, anotherElement) => {\n            // FIXME: This algorithm only takes into account LTR layouts\n            const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n            const anotherElementBounds = anotherElement.getBoundingClientRect();\n            return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n              anotherElementBounds.top <= firstVisibleElementBounds.top\n              ? anotherElement\n              : firstVisibleElement;\n          }\n        );\n        return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')\n          ? ''\n          : firstVisibleElement.dataset.scroll!;\n      });\n\n      watch(\n        firstVisibleElement,\n        () => xBus.emit('UserScrolledToElement', firstVisibleElement.value),\n        { immediate: true }\n      );\n\n      /*\n       * Obtains the vNodes array of the default slot and renders only the first one.\n       * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n       * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n       * retrieve the HTML element in both versions.\n       */\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserScrolledToElement`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`ScrollRestoreFailed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n  <MainScroll>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n\n<style lang=\"css\" scoped>\n  ul {\n    overflow: auto;\n    max-height: 200px;\n  }\n\n  li {\n    height: 50px;\n    line-height: 50px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n  <MainScroll useWindow>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n  <MainScroll :restoreScrollTimeoutMs=\"1000\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n  <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ScrollVisibilityObserver } from './scroll.types'\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n} from 'vue'\nimport { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { scrollXModule } from '../x-module'\nimport { ScrollObserverKey } from './scroll.const'\n\n/**\n * Extends the scroll making it able to sync the first visible element, and allowing\n * the children position to be restored.\n *\n * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n * component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'MainScroll',\n  xModule: scrollXModule.name,\n  props: {\n    /**\n     * If `true`, sets this scroll instance to the main of the application. Being the main\n     * scroll implies that features like restoring the scroll when the query changes, or storing\n     * the scroll position in the URL will be enabled for this container.\n     */\n    useWindow: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Timeout in milliseconds to abort trying to restore the scroll position to the target\n     * element.\n     */\n    restoreScrollTimeoutMs: {\n      type: Number,\n      default: 5000,\n    },\n    /** Intersection percentage to consider an element visible. */\n    threshold: {\n      type: Number,\n      default: 0.3,\n    },\n    /** Adjusts the size of the scroll container bounds. */\n    margin: {\n      type: String,\n      default: '0px',\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** The reference to the root element of the component. */\n    const rootRef = ref<Element>()\n    /** The elements that are currently considered visible. */\n    const intersectingElements = ref<HTMLElement[]>([])\n\n    /** Intersection observer to determine visibility of the elements. */\n    const intersectionObserver = ref<IntersectionObserver | null>(null)\n\n    /**\n     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item\n     * `id` property, this component should be scrolled into view.\n     */\n    const { pendingScrollTo } = useState('scroll')\n\n    /** Disables the animations. */\n    const disableAnimations = computed((): boolean => !!pendingScrollTo.value)\n    provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations)\n\n    /**\n     * Removes an element from the {@link MainScroll.intersectingElements} list.\n     *\n     * @param element - The element to remove from the visible elements.\n     */\n    const removeVisibleElement = (element: HTMLElement) => {\n      const index = intersectingElements.value.indexOf(element)\n      if (index !== -1) {\n        intersectingElements.value.splice(index, 1)\n      }\n    }\n\n    /**\n     * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n     * component should register themselves if they want to be observed.\n     *\n     * @returns The intersection observer.\n     */\n    const visibleElementsObserver = computed((): ScrollVisibilityObserver | null => {\n      const observer = intersectionObserver.value\n      return observer\n        ? {\n            observe: observer.observe.bind(observer),\n            unobserve: element => {\n              removeVisibleElement(element)\n              observer.unobserve(element)\n            },\n          }\n        : null\n    })\n    provide(ScrollObserverKey as string, visibleElementsObserver)\n\n    /**\n     * Updates the visible elements given a list of intersection observer entries.\n     *\n     * @param entries - The entries from whom update the visibility.\n     */\n    const updateVisibleElements = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach(entry => {\n        const target = entry.target as HTMLElement\n        if (entry.isIntersecting) {\n          intersectingElements.value.push(target)\n        } else {\n          removeVisibleElement(target)\n        }\n      })\n    }\n\n    /** Stores the root element and initialise the observer after mounting the component. */\n    onMounted(() => {\n      rootRef.value = getCurrentInstance()?.proxy?.$el\n      if (rootRef.value) {\n        intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {\n          root: props.useWindow ? document : rootRef.value,\n          threshold: props.threshold,\n          rootMargin: props.margin,\n        })\n      }\n    })\n\n    /** Disconnects the intersection observer. */\n    onBeforeUnmount(() => {\n      intersectionObserver.value?.disconnect()\n      xBus.emit('UserScrolledToElement', '')\n    })\n\n    /** Disconnects the previous observer. */\n    watch(intersectionObserver, (_new, old) => old?.disconnect())\n\n    /** Stores the identifier of the timeout that will consider the scroll failed to restore. */\n    let restoreScrollFailTimeoutId: number\n\n    /**\n     * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n     *\n     * @param pendingScrollTo - The position the scroll should be restored to.\n     */\n    watch(pendingScrollTo, () => {\n      // TODO Move this logic to the wiring. A cancelable delay operator is needed\n      clearTimeout(restoreScrollFailTimeoutId)\n      if (pendingScrollTo.value) {\n        restoreScrollFailTimeoutId = window.setTimeout(() => {\n          xBus.emit('ScrollRestoreFailed')\n        }, props.restoreScrollTimeoutMs)\n      }\n    })\n\n    /**\n     * The first visible element contained in this component.\n     *\n     * @returns The first visible element in this component.\n     */\n    const firstVisibleElement = computed(() => {\n      if (intersectingElements.value.length === 0) {\n        return ''\n      }\n      const firstVisibleElement = intersectingElements.value.reduce(\n        (firstVisibleElement, anotherElement) => {\n          // FIXME: This algorithm only takes into account LTR layouts\n          const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect()\n          const anotherElementBounds = anotherElement.getBoundingClientRect()\n          return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n            anotherElementBounds.top <= firstVisibleElementBounds.top\n            ? anotherElement\n            : firstVisibleElement\n        },\n      )\n      return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')\n        ? ''\n        : firstVisibleElement.dataset.scroll!\n    })\n\n    watch(\n      firstVisibleElement,\n      () => xBus.emit('UserScrolledToElement', firstVisibleElement.value),\n      { immediate: true },\n    )\n\n    /*\n     * Obtains the vNodes array of the default slot and renders only the first one.\n     * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n     * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n     * retrieve the HTML element in both versions.\n     */\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserScrolledToElement`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`ScrollRestoreFailed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n  <MainScroll>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n</script>\n\n<style scoped>\nul {\n  overflow: auto;\n  max-height: 200px;\n}\n\nli {\n  height: 50px;\n  line-height: 50px;\n}\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n  <MainScroll useWindow>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n  <MainScroll :restoreScrollTimeoutMs=\"1000\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n  <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}