sfp_front_vue_diarista_prestador/src/composables/useScroll.js

import { unref } from 'vue'

export const useScroll = () => {
  /**
   * Scrolls to a specific component within a scroll container
   * @param {Ref<Component>} targetRef - Reference to the component to scroll to
   * @param {Ref<Component>} containerRef - Reference to the Quasar ScrollArea component
   * @param {Object} options - Scroll options
   * @param {number} options.offset - Offset from the top in pixels (default: 50)
   * @param {number} options.duration - Animation duration in milliseconds (default: 150)
   * @returns {boolean} - Whether the scroll was successful
   */
  const scrollToComponent = (targetRef, containerRef, options = {}) => {
    const {
      offset = 50,
      duration = 150
    } = options

    const target = unref(targetRef)
    const container = unref(containerRef)

    const targetElement = target?.$el
    const containerElement = container?.$el

    if (!targetElement || !containerElement) {
      console.warn('useScroll: Target or container element not found')
      return false
    }

    try {
      let currentElement = targetElement
      let offsetTop = 0

      // Calculate total offset up to the scroll container
      while (currentElement && currentElement !== containerElement) {
        offsetTop += currentElement.offsetTop
        currentElement = currentElement.offsetParent
      }

      if (!currentElement) {
        console.warn('useScroll: Target is not a child of the container')
        return false
      }

      const targetPosition = Math.max(0, offsetTop - offset)

      container.setScrollPosition('vertical', targetPosition, duration)

      return true
    } catch (error) {
      console.error('useScroll: Error while scrolling', error)
      return false
    }
  }

  return {
    scrollToComponent
  }
}