refactor: convert to script setup

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

@@ -23,8 +23,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
 import {
   HoppAccentColors,
   HoppAccentColor,
@@ -32,18 +31,11 @@ import {
   useSetting,
 } from "~/newstore/settings"
 
-export default defineComponent({
+const accentColors = HoppAccentColors
-  setup() {
+const active = useSetting("THEME_COLOR")
-    return {
+
-      accentColors: HoppAccentColors,
+const setActiveColor = (color: HoppAccentColor) => {
-      active: useSetting("THEME_COLOR"),
-    }
-  },
-  methods: {
-    setActiveColor(color: HoppAccentColor) {
   document.documentElement.setAttribute("data-accent", color)
   applySetting("THEME_COLOR", color)
-    },
+}
-  },
-})
 </script>

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

@@ -15,8 +15,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
 import {
   applySetting,
   HoppBgColor,
@@ -24,18 +23,14 @@ import {
   useSetting,
 } from "~/newstore/settings"
 
-export default defineComponent({
+const colors = HoppBgColors
-  setup() {
+const active = useSetting("BG_COLOR")
-    return {
+
-      colors: HoppBgColors,
+const setBGMode = (color: HoppBgColor) => {
-      active: useSetting("BG_COLOR"),
-    }
-  },
-  methods: {
-    setBGMode(color: HoppBgColor) {
   applySetting("BG_COLOR", color)
-    },
+}
-    getIcon(color: HoppBgColor) {
+
+const getIcon = (color: HoppBgColor) => {
   switch (color) {
     case "system":
       return "monitor"
@@ -48,8 +43,9 @@ export default defineComponent({
     default:
       return "monitor"
   }
-    },
+}
-    getColorModeName(colorMode: string) {
+
+const getColorModeName = (colorMode: string) => {
   switch (colorMode) {
     case "system":
       return "settings.system_mode"
@@ -62,7 +58,5 @@ export default defineComponent({
     default:
       return "settings.system_mode"
   }
-    },
+}
-  },
-})
 </script>

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

@@ -32,8 +32,8 @@
   </span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { useContext } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
   HoppFontSize,
@@ -41,21 +41,20 @@ import {
   useSetting,
 } from "~/newstore/settings"
 
-export default defineComponent({
+const {
-  setup() {
+  app: { i18n },
-    return {
+} = useContext()
-      fontSizes: HoppFontSizes,
+const t = i18n.t.bind(i18n)
-      active: useSetting("FONT_SIZE"),
+
+const fontSizes = HoppFontSizes
+const active = useSetting("FONT_SIZE")
+
+const getFontSizeName = (size: HoppFontSize) => {
+  return t(`settings.font_size_${size}`)
 }
-  },
+
-  methods: {
+const setActiveFont = (size: HoppFontSize) => {
-    getFontSizeName(size: HoppFontSize) {
-      return this.$t(`settings.font_size_${size}`)
-    },
-    setActiveFont(size: HoppFontSize) {
   document.documentElement.setAttribute("data-font-size", size)
   applySetting("FONT_SIZE", size)
-    },
+}
-  },
-})
 </script>

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

@@ -2,20 +2,14 @@
   <component :is="src" />
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { computed } from "@nuxtjs/composition-api"
 
-export default defineComponent({
+const props = defineProps<{
-  props: {
+  name: String
-    name: {
+}>()
-      type: String,
+
-      required: true,
+const src = computed(() => {
-    },
+  return require(`~/assets/icons/${props.name}.svg?inline`)
-  },
-  computed: {
-    src() {
-      return require(`~/assets/icons/${this.name}.svg?inline`)
-    },
-  },
 })
 </script>