@empathyco/x-components 6.0.0-alpha.2 → 6.0.0-alpha.3

package/js/components/scroll/use-scroll.js

@@ -67,9 +67,9 @@ function useScroll(props, { emit }, scrollEl) {
      */
     const storeScrollData = () => {
         if (scrollEl.value) {
-            currentPosition.value = scrollEl.value.scrollTop;
             scrollHeight.value = scrollEl.value.scrollHeight;
             clientHeight.value = scrollEl.value.clientHeight;
+            currentPosition.value = scrollEl.value.scrollTop;
         }
     };
     /**

package/js/components/scroll/use-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import { computed, nextTick, onMounted, Ref, ref, SetupContext, watch } from 'vue';\nimport { isArray } from '@empathyco/x-utils';\nimport { XEvent } from '../../wiring/events.types';\nimport { throttle } from '../../utils/throttle';\nimport { use$x } from '../../composables/use-$x';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Composable to share Scroll logic.\n *\n * @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n */\nexport function useScroll(\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: number;\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: number;\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: number;\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: boolean;\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: XEvent | XEvent[];\n  },\n  { emit }: SetupContext<any>,\n  scrollEl: Ref<HTMLElement | undefined>\n) {\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  const clientHeight = ref(0);\n\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  const currentPosition = ref(0);\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  const previousPosition = ref(0);\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  const scrollHeight = ref(0);\n  /**\n   * Flag to know if the property clientHeight is changing or gets the final value.\n   *\n   * @internal\n   */\n  const isClientHeightChanging = ref(false);\n\n  /**\n   * Property for setting the direction of scroll.\n   *\n   * @internal\n   */\n  const scrollDirection: Ref<ScrollDirection> = ref('UP');\n\n  /**\n   * Restores the clientHeight flag when clientHeight property stops changing.\n   * Also sets a new previous position, before update the current one.\n   *\n   * @internal\n   */\n  const restoreClientHeightFlag = (): void => {\n    isClientHeightChanging.value = false;\n    previousPosition.value = currentPosition.value;\n  };\n\n  const throtteledCall = throttle(restoreClientHeightFlag, 100);\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  const storeScrollData = () => {\n    if (scrollEl.value) {\n      currentPosition.value = scrollEl.value.scrollTop;\n      scrollHeight.value = scrollEl.value.scrollHeight;\n      clientHeight.value = scrollEl.value.clientHeight;\n    }\n  };\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs));\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value);\n\n  /**\n   * Returns distance missing to endPosition position.\n   *\n   * @returns A number for knowing the distance missing to endPosition position.\n   * @internal\n   */\n  const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value);\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value);\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  const hasScrollReachedStart = computed(() => currentPosition.value === 0);\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the `distanceToBottom` prop passed as parameter.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  const hasScrollAlmostReachedEnd = computed(\n    () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value\n  );\n\n  onMounted(() => {\n    nextTick().then(() => {\n      if (!scrollEl.value) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[useScroll]',\n          // eslint-disable-next-line max-len\n          'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.'\n        );\n      } else {\n        storeScrollData();\n      }\n    });\n  });\n\n  /**\n   * Change the isClientHeightChanging flag when the property clientHeight is changing and\n   * calls throttleledCall method.\n   *\n   * @internal\n   */\n  watch(\n    clientHeight,\n    () => {\n      isClientHeightChanging.value = true;\n\n      throtteledCall();\n    },\n    { immediate: true }\n  );\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n    emit('scroll', currentPosition.value);\n    previousPosition.value = oldScrollPosition;\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(currentPosition, () => {\n    if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n      scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP';\n    }\n  });\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n    emit('scroll:at-start', isScrollAtStart);\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n    emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  });\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n    emit('scroll:at-end', isScrollAtEnd);\n  });\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  watch(scrollDirection, (direction: ScrollDirection) => {\n    if (!isClientHeightChanging.value) {\n      emit('scroll:direction-change', direction);\n    }\n  });\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  const $x = use$x();\n  const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn];\n  resetOnEvents.forEach(event =>\n    $x.on(event, false).subscribe(() =>\n      nextTick().then(() => {\n        if (props.resetOnChange) {\n          scrollEl.value?.scrollTo({ top: 0 });\n        }\n      })\n    )\n  );\n\n  return { throttledStoreScrollData };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import { computed, nextTick, onMounted, Ref, ref, SetupContext, watch } from 'vue';\nimport { isArray } from '@empathyco/x-utils';\nimport { XEvent } from '../../wiring/events.types';\nimport { throttle } from '../../utils/throttle';\nimport { use$x } from '../../composables/use-$x';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Composable to share Scroll logic.\n *\n * @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n */\nexport function useScroll(\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: number;\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: number;\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: number;\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: boolean;\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: XEvent | XEvent[];\n  },\n  { emit }: SetupContext<any>,\n  scrollEl: Ref<HTMLElement | undefined>\n) {\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  const clientHeight = ref(0);\n\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  const currentPosition = ref(0);\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  const previousPosition = ref(0);\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  const scrollHeight = ref(0);\n  /**\n   * Flag to know if the property clientHeight is changing or gets the final value.\n   *\n   * @internal\n   */\n  const isClientHeightChanging = ref(false);\n\n  /**\n   * Property for setting the direction of scroll.\n   *\n   * @internal\n   */\n  const scrollDirection: Ref<ScrollDirection> = ref('UP');\n\n  /**\n   * Restores the clientHeight flag when clientHeight property stops changing.\n   * Also sets a new previous position, before update the current one.\n   *\n   * @internal\n   */\n  const restoreClientHeightFlag = (): void => {\n    isClientHeightChanging.value = false;\n    previousPosition.value = currentPosition.value;\n  };\n\n  const throtteledCall = throttle(restoreClientHeightFlag, 100);\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  const storeScrollData = () => {\n    if (scrollEl.value) {\n      scrollHeight.value = scrollEl.value.scrollHeight;\n      clientHeight.value = scrollEl.value.clientHeight;\n      currentPosition.value = scrollEl.value.scrollTop;\n    }\n  };\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs));\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value);\n\n  /**\n   * Returns distance missing to endPosition position.\n   *\n   * @returns A number for knowing the distance missing to endPosition position.\n   * @internal\n   */\n  const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value);\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value);\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  const hasScrollReachedStart = computed(() => currentPosition.value === 0);\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the `distanceToBottom` prop passed as parameter.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  const hasScrollAlmostReachedEnd = computed(\n    () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value\n  );\n\n  onMounted(() => {\n    nextTick().then(() => {\n      if (!scrollEl.value) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[useScroll]',\n          // eslint-disable-next-line max-len\n          'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.'\n        );\n      } else {\n        storeScrollData();\n      }\n    });\n  });\n\n  /**\n   * Change the isClientHeightChanging flag when the property clientHeight is changing and\n   * calls throttleledCall method.\n   *\n   * @internal\n   */\n  watch(\n    clientHeight,\n    () => {\n      isClientHeightChanging.value = true;\n\n      throtteledCall();\n    },\n    { immediate: true }\n  );\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n    emit('scroll', currentPosition.value);\n    previousPosition.value = oldScrollPosition;\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(currentPosition, () => {\n    if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n      scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP';\n    }\n  });\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n    emit('scroll:at-start', isScrollAtStart);\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n    emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  });\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n    emit('scroll:at-end', isScrollAtEnd);\n  });\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  watch(scrollDirection, (direction: ScrollDirection) => {\n    if (!isClientHeightChanging.value) {\n      emit('scroll:direction-change', direction);\n    }\n  });\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  const $x = use$x();\n  const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn];\n  resetOnEvents.forEach(event =>\n    $x.on(event, false).subscribe(() =>\n      nextTick().then(() => {\n        if (props.resetOnChange) {\n          scrollEl.value?.scrollTo({ top: 0 });\n        }\n      })\n    )\n  );\n\n  return { throttledStoreScrollData };\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.3",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -137,5 +137,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "bc8374df76500070aa28838e2c38aee4cd29063e"
+  "gitHead": "56dc02262147b22e22d8a0918abe19be0c90f07f"
 }