feat: Replace the use of mentionSelectionKeyboard mixin to a composable (#9904)

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,71 +1,82 @@
-<script>
-import mentionSelectionKeyboardMixin from './mentionSelectionKeyboardMixin';
-export default {
-  mixins: [mentionSelectionKeyboardMixin],
-  props: {
-    items: {
-      type: Array,
-      default: () => {},
-    },
-    type: {
-      type: String,
-      default: 'canned',
-    },
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
   },
-  data() {
-    return {
-      selectedIndex: 0,
-    };
-  },
-  watch: {
-    items(newItems) {
-      if (newItems.length < this.selectedIndex + 1) {
-        this.selectedIndex = 0;
-      }
-    },
-    selectedIndex() {
-      const container = this.$refs.mentionsListContainer;
-      const item = container.querySelector(
-        `#mention-item-${this.selectedIndex}`
-      );
-      if (item) {
-        const itemTop = item.offsetTop;
-        const itemBottom = itemTop + item.offsetHeight;
-        const containerTop = container.scrollTop;
-        const containerBottom = containerTop + container.offsetHeight;
-        if (itemTop < containerTop) {
-          container.scrollTop = itemTop;
-        } else if (itemBottom + 34 > containerBottom) {
-          container.scrollTop = itemBottom - container.offsetHeight + 34;
-        }
-      }
-    },
-  },
-  methods: {
-    adjustScroll() {},
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onListItemSelection(index) {
-      this.selectedIndex = index;
-      this.onSelect();
-    },
-    onSelect() {
-      this.$emit('mentionSelect', this.items[this.selectedIndex]);
-    },
-    variableKey(item = {}) {
-      return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
-    },
+  type: {
+    type: String,
+    default: 'canned',
   },
+});
+
+const emit = defineEmits(['mentionSelect']);
+
+const mentionsListContainerRef = ref(null);
+const selectedIndex = ref(0);
+
+const adjustScroll = () => {
+  const container = mentionsListContainerRef.value;
+  const item = container.querySelector(`#mention-item-${selectedIndex.value}`);
+  if (item) {
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const containerTop = container.scrollTop;
+    const containerBottom = containerTop + container.offsetHeight;
+    if (itemTop < containerTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom + 34 > containerBottom) {
+      container.scrollTop = itemBottom - container.offsetHeight + 34;
+    }
+  }
+};
+
+const onSelect = () => {
+  emit('mentionSelect', props.items[selectedIndex.value]);
+};
+
+useKeyboardNavigableList({
+  elementRef: mentionsListContainerRef,
+  items: computed(() => props.items),
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+watch(
+  () => props.items,
+  newItems => {
+    if (newItems.length < selectedIndex.value + 1) {
+      selectedIndex.value = 0;
+    }
+  }
+);
+
+watch(selectedIndex, adjustScroll);
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onListItemSelection = index => {
+  selectedIndex.value = index;
+  onSelect();
+};
+
+const variableKey = (item = {}) => {
+  return props.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
 };
 </script>
 
 <template>
   <div
-    ref="mentionsListContainer"
+    ref="mentionsListContainerRef"
     class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
   >
-    <ul class="vertical dropdown menu">
+    <ul class="mb-0 vertical dropdown menu">
       <woot-dropdown-item
         v-for="(item, index) in items"
         :id="`mention-item-${index}`"