Convert NewBudget and TransactionRow

web/src/components/TransactionRow.vue

@@ -1,16 +1,16 @@
-<script lang="ts">
+<script lang="ts" setup>
 import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import { useBudgetsStore } from "../stores/budget";
+import { Transaction } from "../stores/budget-account";
 import Currency from "./Currency.vue";
 
-export default defineComponent({
-    props: [ "transaction", "index" ],
-    components: { Currency },
-    computed: {
-        ...mapState(useBudgetsStore, ["CurrentBudgetID"])
-    }
-})
+const props = defineProps<{
+    transaction: Transaction,
+    index: number,
+}>();
+    
+const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
 </script>
 
 <template>

web/src/dialogs/NewBudget.vue

@@ -1,26 +1,17 @@
-<script lang="ts">
+<script lang="ts" setup>
 import Card from '../components/Card.vue';
-import { defineComponent } from "vue";
+import { ref } from "vue";
 import { useBudgetsStore } from '../stores/budget';
 
-export default defineComponent({
-  data() {
-    return {
-      dialog: false,
-      budgetName: ""
-    }
-  },
-  components: { Card },
-  methods: {
-    saveBudget() {
-      useBudgetsStore().NewBudget(this.$data.budgetName);
-      this.$data.dialog = false;
-    },
-    newBudget() {
-      this.$data.dialog = true;
-    }
-  }
-})
+const dialog = ref(false);
+const budgetName = ref("");
+function saveBudget() {
+  useBudgetsStore().NewBudget(budgetName.value);
+  dialog.value = false;
+};
+function newBudget() {
+  dialog.value = true;
+};
 </script>
 
 <template>