fix[ChangelogVersions]: Indicator motion not scoped and breaks

playgrounds/nuxt/app/composables/useNavigation.ts

@@ -14,6 +14,7 @@ const components = [
   'card',
   'carousel',
   'changelog-version',
+  'changelog-versions',
   'checkbox-group',
   'checkbox',
   'chip',

playgrounds/nuxt/app/pages/components/changelog-versions.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const containerRef = ref<HTMLElement>()
+const targetRef = ref<HTMLElement>()
+
+const versions = ref([
+  {
+    title: 'Nuxt 3.17',
+    description:
+      'Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!',
+    image: 'https://nuxt.com/assets/blog/v3.17.png',
+    date: '2025-04-27',
+    to: 'https://nuxt.com/blog/v3-17',
+    target: '_blank',
+    ui: {
+      container: 'max-w-lg'
+    }
+  },
+  {
+    title: 'Nuxt 3.16',
+    description:
+      'Nuxt 3.16 is out - packed with features and performance improvements!',
+    image: 'https://nuxt.com/assets/blog/v3.16.png',
+    date: '2025-03-07',
+    to: 'https://nuxt.com/blog/v3-16',
+    target: '_blank',
+    ui: {
+      container: 'max-w-lg'
+    }
+  },
+  {
+    title: 'Nuxt 3.15',
+    description:
+      'Nuxt 3.15 is out - with Vite 6, better HMR and faster performance!',
+    image: 'https://nuxt.com/assets/blog/v3.15.png',
+    date: '2024-12-24',
+    to: 'https://nuxt.com/blog/v3-15',
+    target: '_blank',
+    ui: {
+      container: 'max-w-lg'
+    }
+  }
+])
+</script>
+
+<template>
+  <Navbar />
+  <div ref="containerRef" class="w-full h-full overflow-auto">
+    <UChangelogVersions
+      target="targetRef"
+      :versions="versions"
+      :indicator="{
+        target: targetRef,
+        container: containerRef,
+        offset: ['start start', 'end end']
+      }"
+    />
+  </div>
+</template>

src/runtime/components/ChangelogVersions.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import type { SpringOptions } from 'motion-v'
+import type { SpringOptions, UseScrollOptions } from 'motion-v'
 import theme from '#build/ui/changelog-versions'
 import type { ChangelogVersionProps, ChangelogVersionSlots } from '../types'
 import type { ComponentConfig } from '../types/tv'
@@ -18,8 +18,9 @@
   /**
    * Display an indicator bar on the left.
    * @defaultValue true
+   * @see https://motion.dev/docs/vue-use-scroll#api
    */
-  indicator?: boolean
+  indicator?: boolean | UseScrollOptions
   /**
    * Enable scrolling motion effect on the indicator bar.
    * `{ damping: 30, restDelta: 0.001 }`{lang="ts-type"}
@@ -65,9 +66,11 @@
 
 const appConfig = useAppConfig() as ChangelogVersions['AppConfig']
 
+const rootRef = ref<InstanceType<typeof Primitive>>()
 const springOptions = computed(() => defu(typeof props.indicatorMotion === 'object' ? props.indicatorMotion : {}, { damping: 30, restDelta: 0.001 }))
+const scrollOptions = computed(() => defu(typeof props.indicator === 'object' ? props.indicator : {}, {} as UseScrollOptions))
 
-const { scrollYProgress } = useScroll()
+const { scrollYProgress } = useScroll(scrollOptions.value)
 const y = useSpring(scrollYProgress, springOptions)
 const height = useTransform(() => `${y.get() * 100}%`)
 
@@ -76,13 +79,12 @@
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator">
         <Motion v-if="!!props.indicatorMotion" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
       </slot>
     </div>
-
     <div v-if="versions?.length || !!slots.default" :class="ui.container({ class: props.ui?.container })">
       <slot>
         <UChangelogVersion