Convert other pages to composition API

web/src/pages/BudgetSidebar.vue

@@ -1,20 +1,25 @@
-<script lang="ts">
-import { mapState } from "pinia"
-import { defineComponent } from "vue"
+<script lang="ts" setup>
 import Currency from "../components/Currency.vue"
 import { useBudgetsStore } from "../stores/budget"
 import { useAccountStore } from "../stores/budget-account"
 import { useSettingsStore } from "../stores/settings"
 
-export default defineComponent({
-    props: ["budgetid", "accountid"],
-    components: { Currency },
-    computed: {
-      ...mapState(useSettingsStore, ["ExpandMenu"]),
-      ...mapState(useBudgetsStore, ["CurrentBudgetName", "CurrentBudgetID"]),
-      ...mapState(useAccountStore, ["OnBudgetAccounts", "OnBudgetAccountsBalance", "OffBudgetAccounts", "OffBudgetAccountsBalance"])
-    }
-})
+const props = defineProps<{
+  budgetid: string,
+  accountid: string,
+}>();
+
+const ExpandMenu = useSettingsStore().Menu.Expand;
+
+const budgetStore = useBudgetsStore();
+const CurrentBudgetName = budgetStore.CurrentBudgetName;
+const CurrentBudgetID = budgetStore.CurrentBudgetID;
+
+const accountStore = useAccountStore();
+const OnBudgetAccounts = accountStore.OnBudgetAccounts;
+const OffBudgetAccounts = accountStore.OffBudgetAccounts;
+const OnBudgetAccountsBalance = accountStore.OnBudgetAccountsBalance;
+const OffBudgetAccountsBalance = accountStore.OffBudgetAccountsBalance;
 </script>
 
 <template>