From 489aa88c4b584153d007c0e2fbf4105a06d3d9a9 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 20:06:06 +0000
Subject: [PATCH] Add custom checkbox component

---
 web/src/components/Checkbox.vue       | 11 +++++++++++
 web/src/components/TransactionRow.vue |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/Checkbox.vue

diff --git a/web/src/components/Checkbox.vue b/web/src/components/Checkbox.vue
new file mode 100644
index 0000000..544ec52
--- /dev/null
+++ b/web/src/components/Checkbox.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const props = defineProps(["modelValue"]);
+</script>
+
+<template>
+    <input 
+        type="checkbox"
+        :checked="modelValue"
+        @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
+        class="dark:bg-slate-900">
+</template>
\ No newline at end of file
diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index 9472156..0d87765 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -7,6 +7,7 @@ import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
 import { useAccountStore } from "../stores/budget-account";
 import Input from "./Input.vue";
+import Checkbox from "./Checkbox.vue";
 
 const props = defineProps<{
     transactionid: string,
@@ -70,7 +71,7 @@ function getStatusSymbol() {
             {{ TX.GroupID ? "☀" : "" }}
             {{ getStatusSymbol() }}
             <a @click="edit = true;">✎</a>
-            <Input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
+            <Checkbox v-if="Reconciling && TX.Status != 'Reconciled'" v-model="TX.Reconciled" />
         </td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />