From 809fa354c4cf232bdff2892408f06d75cb4878d3 Mon Sep 17 00:00:00 2001
From: Jur van den Berg <jurl.berg@gmail.com>
Date: Sat, 22 Jan 2022 19:41:53 +0100
Subject: [PATCH] Fix typing errors

---
 frontend/src/components/form/Color.vue    | 12 +++++++++---
 frontend/src/components/form/Input.vue    | 12 +++++++++---
 frontend/src/components/form/TextArea.vue | 12 +++++++++---
 frontend/tsconfig.json                    |  2 +-
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/form/Color.vue b/frontend/src/components/form/Color.vue
index c1e8b11..53f06d8 100644
--- a/frontend/src/components/form/Color.vue
+++ b/frontend/src/components/form/Color.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   label: string;
   modelValue: string;
 }>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -13,11 +20,10 @@ const emit = defineEmits<{
     <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
     <div class="mt-1 relative rounded-md shadow-sm">
       <input
+        v-model="localValue"
         type="color"
         class="block w-full py-2 px-4 h-10 bg-white border border-gray-300 hover:border-2 hover:border-blue-500 hover:cursor-pointer focus:border-blue-500 rounded-md"
-        :value="modelValue"
         v-bind="$attrs"
-        @input="emit('update:modelValue', $event.target.value)"
       />
     </div>
   </div>
diff --git a/frontend/src/components/form/Input.vue b/frontend/src/components/form/Input.vue
index b3bc95a..5cef0ed 100644
--- a/frontend/src/components/form/Input.vue
+++ b/frontend/src/components/form/Input.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   label: string;
   modelValue: string;
 }>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -13,11 +20,10 @@ const emit = defineEmits<{
     <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
     <div class="mt-1 relative rounded-md shadow-sm">
       <input
+        v-model="localValue"
         type="text"
         class="focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md"
-        :value="modelValue"
         v-bind="$attrs"
-        @input="emit('update:modelValue', $event.target.value)"
       />
     </div>
   </div>
diff --git a/frontend/src/components/form/TextArea.vue b/frontend/src/components/form/TextArea.vue
index 60a956e..cf9a77b 100644
--- a/frontend/src/components/form/TextArea.vue
+++ b/frontend/src/components/form/TextArea.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   label: string;
   modelValue: string;
 }>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -13,10 +20,9 @@ const emit = defineEmits<{
     <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
     <div class="mt-1 relative rounded-md shadow-sm">
       <textarea
+        v-model="localValue"
         class="focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md"
-        :value="modelValue"
         v-bind="$attrs"
-        @input="emit('update:modelValue', $event.target.value)"
       />
     </div>
   </div>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6de6f41..5119b70 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -11,7 +11,7 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]