feat: auto scroll list item into view

packages/histoire/package.json

@@ -60,6 +60,7 @@
  "picocolors": "^1.0.0",
  "pinia": "^2.0.11",
  "sade": "^1.8.1",
+ "scroll-into-view-if-needed": "^2.2.29",
  "shiki": "^0.10.1",
  "vite-node": "^0.3.6",
  "vue-router": "^4.0.12"

packages/histoire/src/client/app/components/story/StoryListItem.vue

@@ -2,7 +2,9 @@
 import type { Story } from '../../types'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
 import { Icon } from '@iconify/vue'
-import { computed, withDefaults } from 'vue'
+import { computed, ref, withDefaults } from 'vue'
+import { useRoute } from 'vue-router'
+import { useScrollOnActive } from '../../util/scroll.js'
 
 const props = withDefaults(defineProps<{
  story: Story
@@ -14,10 +16,15 @@ const props = withDefaults(defineProps<{
 const filePadding = computed(() => {
  return (props.depth * 16) + 'px'
 })
+
+const route = useRoute()
+const active = computed(() => route.params.storyId === props.story.id)
+const el = ref<HTMLDivElement>()
+useScrollOnActive(active, el)
 </script>
 
 <template>
- <div>
+ <div ref="el">
  <BaseListItemLink
  v-slot="{ active }"
  :to="{

packages/histoire/src/client/app/components/story/StoryVariantListItem.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { PropType, toRefs } from 'vue'
+import { PropType, ref, toRefs } from 'vue'
 import { useCurrentVariantRoute } from '../../util/variant'
 import type { Variant } from '../../types'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
 import { Icon } from '@iconify/vue'
+import { useScrollOnActive } from '../../util/scroll.js'
 
 const props = defineProps({
  variant: {
@@ -14,10 +15,12 @@ const props = defineProps({
 
 const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
+const el = ref<HTMLDivElement>()
+useScrollOnActive(isActive, el)
 </script>
 
 <template>
- <div>
+ <div ref="el">
  <BaseListItemLink
  v-slot="{ active }"
  :to="targetRoute"

packages/histoire/src/client/app/util/scroll.ts

@@ -0,0 +1,27 @@
+import { watch, onMounted, Ref } from 'vue'
+import scrollIntoView from 'scroll-into-view-if-needed'
+
+export function useScrollOnActive (active: Ref<boolean>, el: Ref<HTMLElement>) {
+ watch(active, value => {
+ if (value) {
+ autoScroll()
+ }
+ })
+
+ function autoScroll () {
+ if (el.value) {
+ scrollIntoView(el.value, {
+ scrollMode: 'if-needed',
+ block: 'center',
+ inline: 'nearest',
+ behavior: 'smooth',
+ })
+ }
+ }
+
+ onMounted(() => {
+ if (active.value) {
+ autoScroll()
+ }
+ })
+}