Convert other components

web/src/components/Autocomplete.vue

@@ -1,5 +1,5 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType } from "vue"
+import { defineComponent, PropType, ref, watch } from "vue"
 import { GET } from "../api";
 import { useBudgetsStore } from "../stores/budget";
 
@@ -14,50 +14,44 @@ interface Data {
     Suggestions: Suggestion[]
 }
 
-export default defineComponent({
+const props = defineProps<{
-    data() {
+    modelValue: Suggestion,
-        return {
-            Selected: undefined,
-            SearchQuery: this.modelValue || "",
-            Suggestions: new Array<Suggestion>(),
-        } as Data
-    },
-    props: {
-        modelValue: Object as PropType<Suggestion>,
     type: String
-    },
+}>();
-    watch: {
+
-        SearchQuery() {
+const Selected = ref<Suggestion | undefined>(props.modelValue || undefined);
-            this.load(this.$data.SearchQuery);
+const SearchQuery = ref(props.modelValue?.Name || "");
-        }
+const Suggestions = ref<Array<Suggestion>>([]);
-    },
+const emit = defineEmits(["update:modelValue"]);
-    methods: {
+watch(SearchQuery, () => {
-        saveTransaction(e : MouseEvent) {
+    load(SearchQuery.value);
+});
+function saveTransaction(e: MouseEvent) {
     e.preventDefault();
-        },
+};
-        load(text : String) {
+function load(text: String) {
-            this.$emit('update:modelValue', {ID: null, Name: text});
+    emit('update:modelValue', { ID: null, Name: text });
     if (text == "") {
-                this.$data.Suggestions = [];
+        Suggestions.value = [];
         return;
     }
 
     const budgetStore = useBudgetsStore();
-            GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
+    GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + props.type + "?s=" + text)
         .then(x => x.json())
         .then(x => {
             let suggestions = x || [];
             if (suggestions.length > 10) {
                 suggestions = suggestions.slice(0, 10);
             }
-                    this.$data.Suggestions = suggestions;
+            Suggestions.value = suggestions;
         });
-        },
+};
-        keypress(e : KeyboardEvent) {
+function keypress(e: KeyboardEvent) {
     console.log(e.key);
     if (e.key == "Enter") {
-                const selected = this.$data.Suggestions[0];
+        const selected = Suggestions.value[0];
-                this.selectElement(selected);
+        selectElement(selected);
         const el = (<HTMLInputElement>e.target);
         const inputElements = Array.from(el.ownerDocument.querySelectorAll('input:not([disabled]):not([readonly])'));
         const currentIndex = inputElements.indexOf(el);
@@ -65,37 +59,43 @@ export default defineComponent({
         (<HTMLInputElement>nextElement).focus();
 
     }
-        },
+};
-        selectElement(element : Suggestion) {
+function selectElement(element: Suggestion) {
-            this.$data.Selected = element;
+    Selected.value = element;
-            this.$data.Suggestions = [];
+    Suggestions.value = [];
-            this.$emit('update:modelValue', element);
+    emit('update:modelValue', element);
-        },
+};
-        select(e : MouseEvent) {
+function select(e: MouseEvent) {
     const target = (<HTMLInputElement>e.target);
     const valueAttribute = target.attributes.getNamedItem("value");
     let selectedID = "";
     if (valueAttribute != null)
         selectedID = valueAttribute.value;
-            const selected = this.$data.Suggestions.filter(x => x.ID == selectedID)[0];
+    const selected = Suggestions.value.filter(x => x.ID == selectedID)[0];
-            this.selectElement(selected);
+    selectElement(selected);
-        },
+};
-        clear() {
+function clear() {
-            this.$data.Selected = undefined;
+    Selected.value = undefined;
-            this.$emit('update:modelValue', {ID: null, Name: this.$data.SearchQuery});
+    emit('update:modelValue', { ID: null, Name: SearchQuery.value });
-        }
+};
-    }
-})
 </script>
 
 <template>
     <div>
-        <input class="border-b-2 border-black" @keypress="keypress" v-if="Selected == undefined" v-model="SearchQuery" />
+        <input
+            class="border-b-2 border-black"
+            @keypress="keypress"
+            v-if="Selected == undefined"
+            v-model="SearchQuery"
+        />
         <span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{ Selected.Name }}</span>
         <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
-            <span v-for="suggestion in Suggestions" class="block" @click="select" :value="suggestion.ID">
+            <span
-                {{suggestion.Name}}
+                v-for="suggestion in Suggestions"
-            </span>
+                class="block"
+                @click="select"
+                :value="suggestion.ID"
+            >{{ suggestion.Name }}</span>
         </div>
     </div>
 </template>

web/src/components/Card.vue

@@ -1,9 +1,4 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-
-})
 </script>
 
 <template>

web/src/components/Currency.vue

@@ -1,17 +1,11 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
+import { computed } from 'vue';
 
-export default defineComponent({
+const props = defineProps<{ value: number }>();
-    props: ["value"],
+
-    computed: {
+const formattedValue = computed(() => Number(props.value).toLocaleString(undefined, {
-        formattedValue() {
-            return Number(this.value).toLocaleString(undefined, {
     minimumFractionDigits: 2,
-            });
+}));
-        }
-    }
-})
-
 </script>
 
 <template>

web/src/components/TransactionRow.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { mapState } from "pinia";
+import { computed } from "vue";
-import { computed, defineComponent } from "vue";
 import { useBudgetsStore } from "../stores/budget";
 import { Transaction } from "../stores/budget-account";
 import Currency from "./Currency.vue";