feat(grid): auto scroll to selected variant

histoire-dev · Apr 4, 2022 · 60bf849 · 60bf849
1 parent 218f856
commit 60bf849
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/packages/histoire/src/client/app/components/story/StoryVariantGrid.vue b/packages/histoire/src/client/app/components/story/StoryVariantGrid.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useResizeObserver } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
 const storyStore = useStoryStore()
 
-const templateWidth = computed(() => {
+const gridTemplateWidth = computed(() => {
   if (storyStore.currentStory.layout.type !== 'grid') {
     return
   }
@@ -34,7 +34,6 @@ const countPerRow = ref(0)
 const visibleRows = ref(0)
 
 const el = ref<HTMLDivElement>(null)
-const children = ref([])
 
 useResizeObserver(el, () => {
   updateMaxCount()
@@ -61,7 +60,13 @@ function updateMaxCount () {
   if (maxCount.value < newMaxCount) {
     maxCount.value = newMaxCount
   }
-  console.log(countPerRow.value, visibleRows.value, maxCount.value)
+
+  if (storyStore.currentVariant) {
+    const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant)
+    if (index + 1 > maxCount.value) {
+      maxCount.value = index + 1
+    }
+  }
 }
 
 function onItemResize (w: number, h: number) {
@@ -71,6 +76,10 @@ function onItemResize (w: number, h: number) {
     updateMaxCount()
   }
 }
+
+watch(() => storyStore.currentVariant, () => {
+  updateMaxCount()
+})
 </script>
 
 <template>
@@ -87,7 +96,7 @@ function onItemResize (w: number, h: number) {
       <div
         class="htw-grid htw-gap-4 htw-m-4"
         :style="{
-          gridTemplateColumns: `repeat(auto-fill, ${templateWidth})`,
+          gridTemplateColumns: `repeat(auto-fill, ${gridTemplateWidth})`,
         }"
       >
         <StoryVariantGridItem

diff --git a/packages/histoire/src/client/app/components/story/StoryVariantGridItem.vue b/packages/histoire/src/client/app/components/story/StoryVariantGridItem.vue
@@ -6,6 +6,7 @@ import { useResizeObserver } from '@vueuse/core'
 import { useCurrentVariantRoute } from '../../util/variant'
 import type { Story, Variant } from '../../types'
 import SandboxVue3 from '../sandbox/SandboxVue3.vue'
+import { useScrollOnActive } from '../../util/scroll.js'
 
 const props = defineProps({
   variant: {
@@ -42,9 +43,15 @@ function selectVariant () {
 }
 
 const el = ref<HTMLDivElement>()
+
+const { autoScroll } = useScrollOnActive(isActive, el)
+
 useResizeObserver(el, () => {
   if (props.variant.ready) {
     emit('resize', el.value!.clientWidth, el.value!.clientHeight)
+    if (isActive.value) {
+      autoScroll()
+    }
   }
 })
 </script>

diff --git a/packages/histoire/src/client/app/util/scroll.ts b/packages/histoire/src/client/app/util/scroll.ts
@@ -24,4 +24,8 @@ export function useScrollOnActive (active: Ref<boolean>, el: Ref<HTMLElement>) {
       autoScroll()
     }
   })
+
+  return {
+    autoScroll,
+  }
 }