Bootswatch to script setup

src/components/BootswatchThemeSelect.vue

@@ -29,29 +29,25 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
 import { FTHTMLStyleElement } from '@/types/styleElement';
 import { useSettingsStore } from '@/stores/settings';
 import { ThemeType } from '@/shared/themes';
 
-export default defineComponent({
-  name: 'BootswatchThemeSelect',
-  components: { ThemeLightDark },
-  props: {
+const props = defineProps({
   simple: {
     type: Boolean,
     default: true,
   },
-  },
-  setup(props) {
-    const activeTheme = ref('');
-    const themeList = ref<ThemeType[]>([]);
-    const settingsStore = useSettingsStore();
+});
+const activeTheme = ref('');
+const themeList = ref<ThemeType[]>([]);
+const settingsStore = useSettingsStore();
 
-    const setTheme = (themeName) => {
+const setTheme = (themeName) => {
   // If theme is already active, do nothing.
   if (activeTheme.value === themeName) {
     return;
@@ -98,19 +94,19 @@ export default defineComponent({
   // Save the theme as localstorage
   settingsStore.currentTheme = themeName;
   activeTheme.value = themeName;
-    };
+};
 
-    onMounted(() => {
+onMounted(() => {
   if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
-    });
+});
 
-    const handleClick = (e) => {
+const handleClick = (e) => {
   setTheme(e.target.name.trim());
-    };
-    const toggleNight = () => {
+};
+const toggleNight = () => {
   setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
-    };
-    const fetchApi = () => {
+};
+const fetchApi = () => {
   // Fetches boostswatch api and dynamically sets themes.
   // Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
   axios
@@ -129,17 +125,7 @@ export default defineComponent({
     .catch((error) => {
       console.error(error);
     });
-    };
-    return {
-      activeTheme,
-      themeList,
-      setTheme,
-      handleClick,
-      toggleNight,
-      fetchApi,
-    };
-  },
-});
+};
 </script>
 
 <style scoped></style>