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({
+const props = defineProps<{
-    props: [ "transaction", "index" ],
+    transaction: Transaction,
-    components: { Currency },
+    index: number,
-    computed: {
+}>();
-        ...mapState(useBudgetsStore, ["CurrentBudgetID"])
+    
-    }
+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({
+const dialog = ref(false);
-  data() {
+const budgetName = ref("");
-    return {
+function saveBudget() {
-      dialog: false,
+  useBudgetsStore().NewBudget(budgetName.value);
-      budgetName: ""
+  dialog.value = false;
-    }
+};
-  },
+function newBudget() {
-  components: { Card },
+  dialog.value = true;
-  methods: {
+};
-    saveBudget() {
-      useBudgetsStore().NewBudget(this.$data.budgetName);
-      this.$data.dialog = false;
-    },
-    newBudget() {
-      this.$data.dialog = true;
-    }
-  }
-})
 </script>
 
 <template>