feat: extension identification improvements (#2332)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/smart/Radio.vue

@@ -1,33 +1,31 @@
 <template>
   <SmartItem
     :label="label"
-    :icon="
-      value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
-    "
-    :active="value === selected"
+    :icon="selected ? 'radio_button_checked' : 'radio_button_unchecked'"
+    :active="selected"
     role="radio"
-    :aria-checked="value === selected"
-    @click.native="$emit('change', value)"
+    :aria-checked="selected"
+    @click.native="emit('change', value)"
   />
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: "change", value: string): void
+}>()
 
-export default defineComponent({
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    selected: {
-      type: String,
-      default: "",
-    },
+defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  selected: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>

packages/hoppscotch-app/components/smart/RadioGroup.vue

@@ -5,18 +5,22 @@
       :key="`radio-${index}`"
       :value="radio.value"
       :label="radio.label"
-      :selected="selected"
-      @change="$emit('change', radio.value)"
+      :selected="value === radio.value"
+      @change="emit('input', radio.value)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+const emit = defineEmits<{
+  (e: "input", value: string): void
+}>()
+
 defineProps<{
   radios: Array<{
-    value: string
+    value: string // The key of the radio option
     label: string
   }>
-  selected: string
+  value: string // Should be a radio key given in the radios array
 }>()
 </script>