From 32da3d9ee41ef222288ac2ee01b63f346ae43709 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:20:28 +0200
Subject: [PATCH] refactor: TextAreaItem typing

---
 .../globals/formItems/TextAreaItem.vue        | 49 ++++++++++---------
 app/src/types/form.ts                         |  4 ++
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 5aaac353..12b49af3 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -1,43 +1,46 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 
-withDefaults(
-  defineProps<{
-    modelValue?: string | null
-    id?: string
-    placeholder?: string
-    type?: string // FIXME unused?
-    required?: boolean
-    state?: boolean | null
-    name?: string
-  }>(),
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, TextAreaItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<TextAreaItemProps & BaseItemComputedProps<string | null>>(),
   {
-    modelValue: null,
     id: undefined,
-    placeholder: undefined,
-    type: 'text',
-    required: false,
-    state: undefined,
     name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+    // type: 'text',
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
+defineEmits<{
+  'update:modelValue': [value: string | null]
 }>()
 
-const touch = inject('touch')
+const model = defineModel<string>()
+
+const touch = inject(ValidationTouchSymbol)
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
 </script>
 
 <template>
   <BFormTextarea
-    :modelValue="modelValue"
-    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
+    v-model="model"
+    :name="name"
     :placeholder="placeholder"
-    :required="required"
+    :aria-describedby="ariaDescribedby"
     :state="state"
+    :required="required"
     rows="4"
-    @blur="touch(name)"
+    @blur="touch?.(touchKey)"
   />
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 362abb7a..b04dfad1 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -93,3 +93,7 @@ export type TagsSelectizeItemProps = BaseWritableItemProps & {
   noTags?: boolean
   tagIcon?: string
 }
+
+export type TextAreaItemProps = BaseWritableItemProps & {
+  // type?: string // FIXME unused?
+}