Migrate code to composition api.

src/components/SearchSuggestions.vue

@@ -18,67 +18,71 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        searchText: { type: String, default: "" },
-    },
-    emits: ["searchchange"],
-    data() {
-        return {
-            selected: 0,
-            searchSuggestions: [],
-        };
-    },
-    methods: {
-        onKeyUp(e) {
-            if (e.key === "ArrowUp") {
-                if (this.selected <= 0) {
-                    this.setSelected(this.searchSuggestions.length - 1);
-                } else {
-                    this.setSelected(this.selected - 1);
-                }
-                e.preventDefault();
-            } else if (e.key === "ArrowDown") {
-                if (this.selected >= this.searchSuggestions.length - 1) {
-                    this.setSelected(0);
-                } else {
-                    this.setSelected(this.selected + 1);
-                }
-                e.preventDefault();
-            } else {
-                this.refreshSuggestions();
-            }
-        },
-        async refreshSuggestions() {
-            if (!this.searchText) {
-                if (this.getPreferenceBoolean("searchHistory", false))
-                    this.searchSuggestions = JSON.parse(localStorage.getItem("search_history")) ?? [];
-            } else if (this.getPreferenceBoolean("searchSuggestions", true)) {
-                this.searchSuggestions =
-                    (
-                        await this.fetchJson(this.apiUrl() + "/opensearch/suggestions", {
-                            query: this.searchText,
-                        })
-                    )?.[1] ?? [];
-            } else {
-                this.searchSuggestions = [];
-                return;
-            }
-            this.searchSuggestions.unshift(this.searchText);
-            this.setSelected(0);
-        },
-        onMouseOver(i) {
-            if (i !== this.selected) {
-                this.selected = i;
-            }
-        },
-        setSelected(val) {
-            this.selected = val;
-            this.$emit("searchchange", this.searchSuggestions[this.selected]);
-        },
-    },
-};
+<script setup>
+import { ref } from "vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { getPreferenceBoolean } from "@/composables/usePreferences.js";
+
+const props = defineProps({
+    searchText: { type: String, default: "" },
+});
+
+const emit = defineEmits(["searchchange"]);
+
+const selected = ref(0);
+const searchSuggestions = ref([]);
+
+function onKeyUp(e) {
+    if (e.key === "ArrowUp") {
+        if (selected.value <= 0) {
+            setSelected(searchSuggestions.value.length - 1);
+        } else {
+            setSelected(selected.value - 1);
+        }
+        e.preventDefault();
+    } else if (e.key === "ArrowDown") {
+        if (selected.value >= searchSuggestions.value.length - 1) {
+            setSelected(0);
+        } else {
+            setSelected(selected.value + 1);
+        }
+        e.preventDefault();
+    } else {
+        refreshSuggestions();
+    }
+}
+
+async function refreshSuggestions() {
+    if (!props.searchText) {
+        if (getPreferenceBoolean("searchHistory", false))
+            searchSuggestions.value = JSON.parse(localStorage.getItem("search_history")) ?? [];
+    } else if (getPreferenceBoolean("searchSuggestions", true)) {
+        searchSuggestions.value =
+            (
+                await fetchJson(apiUrl() + "/opensearch/suggestions", {
+                    query: props.searchText,
+                })
+            )?.[1] ?? [];
+    } else {
+        searchSuggestions.value = [];
+        return;
+    }
+    searchSuggestions.value.unshift(props.searchText);
+    setSelected(0);
+}
+
+function onMouseOver(i) {
+    if (i !== selected.value) {
+        selected.value = i;
+    }
+}
+
+function setSelected(val) {
+    selected.value = val;
+    emit("searchchange", searchSuggestions.value[selected.value]);
+}
+
+defineExpose({ onKeyUp, refreshSuggestions });
 </script>
 
 <style>