From 2977ed4d7a96865964aef7b775c7f11dc1600a73 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:18:48 +0200
Subject: [PATCH] refactor: TagsItem typing

---
 .../components/globals/formItems/TagsItem.vue | 54 +++++++++----------
 app/src/types/form.ts                         |  6 +++
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 62c477cf..ad0d633b 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 
-withDefaults(
-  defineProps<{
-    modelValue?: unknown[] | null
-    id?: string
-    placeholder?: string
-    limit?: number
-    required?: boolean
-    state?: boolean
-    name?: string
-    // FIXME no options on BFormTags
-    options?: unknown[]
-  }>(),
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, TagsItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<TagsItemProps & BaseItemComputedProps<string[]>>(),
   {
-    modelValue: null,
     id: undefined,
-    placeholder: undefined,
-    limit: undefined,
-    required: false,
-    state: undefined,
     name: undefined,
-    options: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+    limit: undefined,
+    // options: undefined,
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
 
-const touch = inject('touch')
+const touch = inject(ValidationTouchSymbol)
+
+const model = defineModel<string[]>()
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
 
 // FIXME rework for options/choices
 // https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-tags.html#using-custom-form-components
@@ -33,16 +33,16 @@ const touch = inject('touch')
 
 <template>
   <BFormTags
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
+    v-model="model"
+    :name="name"
     :placeholder="placeholder"
-    :required="required"
-    separator=" ,;"
     :limit="limit"
-    remove-on-delete
+    :aria-describedby="ariaDescribedby"
     :state="state"
-    :options="options"
-    @blur="touch(name)"
+    :required="required"
+    remove-on-delete
+    separator=" ,;"
+    @blur="touch?.(touchKey)"
   />
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 821e7ed6..f4726363 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -76,3 +76,9 @@ export type InputItemProps = BaseWritableItemProps & {
 export type SelectItemProps = BaseWritableItemProps & {
   choices: string[] | { text: string; value: string }[]
 }
+
+export type TagsItemProps = BaseWritableItemProps & {
+  limit?: number
+  // FIXME no options on BFormTags?
+  // options?: string[]
+}