From a18e5e233287d187da7578f1009ebb4de4163ca3 Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Sat, 17 Dec 2022 17:15:41 -0500
Subject: [PATCH] feat: add component to enable scroll-into view (#451)

---
 components/common/CommonScrollIntoView.vue | 17 +++++++++++++++++
 components/search/SearchResult.vue         | 14 +++-----------
 components/tiptap/TiptapMentionList.vue    | 10 ++++++----
 3 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 components/common/CommonScrollIntoView.vue

diff --git a/components/common/CommonScrollIntoView.vue b/components/common/CommonScrollIntoView.vue
new file mode 100644
index 00000000..1370815c
--- /dev/null
+++ b/components/common/CommonScrollIntoView.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { as = 'div', active } = defineProps<{ as: any; active: boolean }>()
+const el = ref()
+
+watch(() => active, (active) => {
+  const _el = unrefElement(el)
+
+  if (active && _el)
+    _el.scrollIntoView({ block: 'nearest', inline: 'start' })
+})
+</script>
+
+<template>
+  <component :is="as" ref="el">
+    <slot />
+  </component>
+</template>
diff --git a/components/search/SearchResult.vue b/components/search/SearchResult.vue
index cdfbe54a..94fdba3c 100644
--- a/components/search/SearchResult.vue
+++ b/components/search/SearchResult.vue
@@ -1,14 +1,6 @@
 <script setup lang="ts">
 import type { SearchResult } from './types'
-const props = defineProps<{ result: SearchResult; active: boolean }>()
-
-const el = ref<HTMLElement>()
-watch(() => props.active, (active) => {
-  const _el = unrefElement(el)
-
-  if (active && _el)
-    _el.scrollIntoView({ block: 'nearest', inline: 'start' })
-})
+defineProps<{ result: SearchResult; active: boolean }>()
 
 const onActivate = () => {
   (document.activeElement as HTMLElement).blur()
@@ -16,11 +8,11 @@ const onActivate = () => {
 </script>
 
 <template>
-  <RouterLink ref="el" :to="result.to" py2 block px2 :aria-selected="active" :class="{ 'bg-active': active }" hover:bg-active @click="() => onActivate()">
+  <CommonScrollIntoView as="RouterLink" :active="active" :to="result.to" py2 block px2 :aria-selected="active" :class="{ 'bg-active': active }" hover:bg-active @click="() => onActivate()">
     <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
     <AccountInfo v-else-if="result.type === 'account'" :account="result.account" />
     <div v-else-if="result.type === 'action'" text-center>
       {{ result.action!.label }}
     </div>
-  </RouterLink>
+  </CommonScrollIntoView>
 </template>
diff --git a/components/tiptap/TiptapMentionList.vue b/components/tiptap/TiptapMentionList.vue
index 6a3adb5e..84e8c0e6 100644
--- a/components/tiptap/TiptapMentionList.vue
+++ b/components/tiptap/TiptapMentionList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
+import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
 
 const { items, command } = defineProps<{
   items: Account[]
@@ -50,15 +51,16 @@ defineExpose({
       </div>
     </template>
     <template v-if="items.length">
-      <button
-        v-for="(item, index) in items"
-        :key="index"
+      <CommonScrollIntoView
+        v-for="(item, index) in items" :key="index"
+        :active="index === selectedIndex"
+        as="button"
         :class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
         block m0 w-full text-left px2 py1
         @click="selectItem(index)"
       >
         <AccountInfo :account="item" />
-      </button>
+      </CommonScrollIntoView>
     </template>
   </div>
   <div v-else />