refactor: ts and composition api for modals

src/renderer/components/ModalSettingsChangelog.vue

@@ -13,66 +13,53 @@
       </div>
    </div>
 </template>
-
-<script>
+<script setup lang="ts">
 import { marked } from 'marked';
-import BaseLoader from '@/components/BaseLoader';
+import BaseLoader from '@/components/BaseLoader.vue';
 import { useApplicationStore } from '@/stores/application';
+import { ref } from 'vue';
 
-export default {
-   name: 'ModalSettingsChangelog',
-   components: {
-      BaseLoader
-   },
-   setup () {
-      const { appVersion } = useApplicationStore();
-      return { appVersion };
-   },
-   data () {
-      return {
-         changelog: '',
-         isLoading: true,
-         error: '',
-         isError: false
+const { appVersion } = useApplicationStore();
+
+const changelog = ref('');
+const isLoading = ref(true);
+const error = ref('');
+const isError = ref(false);
+
+const getChangelog = async () => {
+   try {
+      const apiRes = await fetch(`https://api.github.com/repos/antares-sql/antares/releases/tags/v${appVersion}`, {
+         method: 'GET'
+      });
+
+      const { body } = await apiRes.json();
+      const cutOffset = body.indexOf('### Download');
+      const markdown = cutOffset >= 0
+         ? body.substr(0, cutOffset)
+         : body;
+
+      const renderer = {
+         link (href: string, title: string, text: string) {
+            return text;
+         },
+         listitem (text: string) {
+            return `<li>${text.replace(/ *\([^)]*\) */g, '')}</li>`;
+         }
       };
-   },
-   created () {
-      this.getChangelog();
-   },
-   methods: {
-      async getChangelog () {
-         try {
-            const apiRes = await fetch(`https://api.github.com/repos/antares-sql/antares/releases/tags/v${this.appVersion}`, {
-               method: 'GET'
-            });
 
-            const { body } = await apiRes.json();
-            const cutOffset = body.indexOf('### Download');
-            const markdown = cutOffset >= 0
-               ? body.substr(0, cutOffset)
-               : body;
+      marked.use({ renderer });
 
-            const renderer = {
-               link (href, title, text) {
-                  return text;
-               },
-               listitem (text) {
-                  return `<li>${text.replace(/ *\([^)]*\) */g, '')}</li>`;
-               }
-            };
-
-            marked.use({ renderer });
-
-            this.changelog = marked(markdown);
-         }
-         catch (err) {
-            this.error = err.message;
-            this.isError = true;
-         }
-         this.isLoading = false;
-      }
+      changelog.value = marked(markdown);
    }
+   catch (err) {
+      error.value = err.message;
+      isError.value = true;
+   }
+
+   isLoading.value = false;
 };
+
+getChangelog();
 </script>
 <style lang="scss">
 #changelog {