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"),
+  document.documentElement.setAttribute("data-accent", color)
-    }
+  applySetting("THEME_COLOR", 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,45 +23,40 @@ 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"),
+  applySetting("BG_COLOR", color)
-    }
+}
-  },
+
-  methods: {
+const getIcon = (color: HoppBgColor) => {
-    setBGMode(color: HoppBgColor) {
+  switch (color) {
-      applySetting("BG_COLOR", color)
+    case "system":
-    },
+      return "monitor"
-    getIcon(color: HoppBgColor) {
+    case "light":
-      switch (color) {
+      return "sun"
-        case "system":
+    case "dark":
-          return "monitor"
+      return "cloud"
-        case "light":
+    case "black":
-          return "sun"
+      return "moon"
-        case "dark":
+    default:
-          return "cloud"
+      return "monitor"
-        case "black":
+  }
-          return "moon"
+}
-        default:
+
-          return "monitor"
+const getColorModeName = (colorMode: string) => {
-      }
+  switch (colorMode) {
-    },
+    case "system":
-    getColorModeName(colorMode: string) {
+      return "settings.system_mode"
-      switch (colorMode) {
+    case "light":
-        case "system":
+      return "settings.light_mode"
-          return "settings.system_mode"
+    case "dark":
-        case "light":
+      return "settings.dark_mode"
-          return "settings.light_mode"
+    case "black":
-        case "dark":
+      return "settings.black_mode"
-          return "settings.dark_mode"
+    default:
-        case "black":
+      return "settings.system_mode"
-          return "settings.black_mode"
+  }
-        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")
-  methods: {
+
-    getFontSizeName(size: HoppFontSize) {
+const getFontSizeName = (size: HoppFontSize) => {
-      return this.$t(`settings.font_size_${size}`)
+  return t(`settings.font_size_${size}`)
-    },
+}
-    setActiveFont(size: HoppFontSize) {
+
-      document.documentElement.setAttribute("data-font-size", size)
+const setActiveFont = (size: HoppFontSize) => {
-      applySetting("FONT_SIZE", size)
+  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>