refactor: migrate more components to setup script + fix a race condition with power search

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -69,28 +69,29 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { ref, useContext } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default defineComponent({
+const {
-  props: {
+  $toast,
-    headers: { type: Array, default: () => [] },
+  app: { i18n },
-  },
+} = useContext()
-  data() {
+const t = i18n.t.bind(i18n)
-    return {
+
-      copyIcon: "copy",
+const props = defineProps<{
-    }
+  headers: Array<HoppRESTHeader>
-  },
+}>()
-  methods: {
+
-    copyHeaders() {
+const copyIcon = ref("copy")
-      copyToClipboard(JSON.stringify(this.headers))
+
-      this.copyIcon = "check"
+const copyHeaders = () => {
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+  copyToClipboard(JSON.stringify(props.headers))
+  copyIcon.value = "check"
+  $toast.success(t("state.copied_to_clipboard").toString(), {
     icon: "content_paste",
   })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
-    },
+}
-  },
-})
 </script>

packages/hoppscotch-app/components/teams/Modal.vue

@@ -1,26 +1,21 @@
 <template>
-  <SmartModal
+  <SmartModal v-if="show" :title="$t('team.select_a_team')" @close="hideModal">
-    v-if="show"
-    :title="$t('team.select_a_team')"
-    @close="$emit('hide-modal')"
-  >
     <template #body>
       <Teams :modal="true" />
     </template>
   </SmartModal>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+defineProps<{
+  show: Boolean
+}>()
 
-export default defineComponent({
+const emit = defineEmits<{
-  props: {
+  (e: "hide-modal"): void
-    show: Boolean,
+}>()
-  },
+
-  methods: {
+const hideModal = () => {
-    hideModal() {
+  emit("hide-modal")
-      this.$emit("hide-modal")
+}
-    },
-  },
-})
 </script>

packages/hoppscotch-app/helpers/powerSearchNavigation.ts

@@ -15,17 +15,18 @@ export function useArrowKeysNavigation(searchItems: any, options: any = {}) {
     const itemsLength = searchItems.value.length
     const lastItemIndex = itemsLength - 1
     const itemIndexValue = itemIndex.value
-    const action = searchItems.value[itemIndexValue].action
+    const action = searchItems.value[itemIndexValue]?.action
 
     if (action && event.key === "Enter" && options.onEnter) {
       options.onEnter(action)
       return
     }
 
-    if (event.key === "ArrowDown") {
+    if (itemsLength && event.key === "ArrowDown") {
       itemIndex.value = itemIndexValue < lastItemIndex ? itemIndexValue + 1 : 0
     } else if (itemIndexValue === 0) itemIndex.value = lastItemIndex
-    else if (event.key === "ArrowUp") itemIndex.value = itemIndexValue - 1
+    else if (itemsLength && event.key === "ArrowUp")
+      itemIndex.value = itemIndexValue - 1
   }
 
   const preventPropagation = options && options.stopPropagation