feat: Connect TextArea input to form (#4309)

- add a placeholder component to keep the type check without throwing an error for unsupported field types

apps/tailwind-components/components/form/FieldInput.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import type { InputString, InputTextArea } from "#build/components";
+import type {
+  InputString,
+  InputTextArea,
+  InputPlaceHolder,
+} from "#build/components";
 import type {
   columnId,
   columnValue,
@@ -8,16 +12,18 @@ import type {
 
 type inputComponent =
   | InstanceType<typeof InputString>
-  | InstanceType<typeof InputTextArea>;
+  | InstanceType<typeof InputTextArea>
+  | InstanceType<typeof InputPlaceHolder>;
 
 defineProps<{
   type: CellValueType;
   id: columnId;
   label: string;
+  required: boolean;
   data: columnValue;
 }>();
 
-defineEmits(["focus", "input", "error", "update:modelValue"]);
+defineEmits(["focus", "error", "update:modelValue"]);
 defineExpose({ validate });
 
 const input = ref<inputComponent>();
@@ -40,20 +46,22 @@ function validate(value: columnValue) {
     ref="input"
     :id="id"
     :label="label"
+    :required="required"
     :value="data as string"
     @focus="$emit('focus')"
-    @input="$emit('input')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
   ></LazyInputString>
   <LazyInputTextArea
     v-else-if="type === 'TEXT'"
     ref="input"
     :id="id"
+    :label="label"
+    :required="required"
+    :value="data as string"
     @focus="$emit('focus')"
-    @input="$emit('input')"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    @error="$emit('error', $event)"
   ></LazyInputTextArea>
-  <div v-else class="border border-dotted p-2">
-    <pre>place holder for field type {{ type }}</pre>
-  </div>
+  <LazyInputPlaceHolder v-else ref="input" :type="type" />
 </template>

apps/tailwind-components/components/input/PlaceHolder.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="border border-dotted p-2">
+    <pre>place holder for field type {{ type }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CellValueType } from "../../../metadata-utils/src/types";
+defineProps<{
+  type: CellValueType;
+}>();
+defineExpose({ validate });
+
+function validate() {
+  // do nothing, its just a place holder for unkown types
+}
+</script>

apps/tailwind-components/components/input/TextArea.vue

@@ -5,7 +5,7 @@ const props = withDefaults(
   defineProps<{
     id: string;
     label?: string;
-    value?: string;
+    modelValue?: string;
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
@@ -20,11 +20,15 @@ const props = withDefaults(
   }
 );
 
-const emit = defineEmits(["focus", "input", "error", "update:modelValue"]);
+const emit = defineEmits([
+  "focus",
+  "blur",
+  "input",
+  "error",
+  "update:modelValue",
+]);
 defineExpose({ validate });
 
-const modelValue = ref("");
-
 function validate(value: columnValue) {
   if (props.required && value === "") {
     emit("error", [
@@ -34,14 +38,18 @@ function validate(value: columnValue) {
     emit("error", []);
   }
 }
+
+function onInput(event: Event) {
+  const inputElement = event.target as HTMLInputElement;
+  emit("update:modelValue", inputElement.value);
+  validate(inputElement.value);
+}
 </script>
 
 <template>
   <textarea
     :id="id"
     :required="required"
-    @focus="$emit('focus')"
-    @input="$emit('input')"
     :placeholder="placeholder"
     :disabled="disabled"
     class="w-full pr-16 font-sans text-black text-gray-300 outline-none rounded-textarea-input h-60 pl-3 shadow-search-input focus:shadow-search-input hover:shadow-search-input search-input-mobile border py-2"
@@ -51,6 +59,9 @@ function validate(value: columnValue) {
       'border-disabled text-disabled bg-disabled': disabled,
       'bg-white': !disabled,
     }"
-    v-model="modelValue"
+    :value="modelValue"
+    @input="onInput"
+    @focus="$emit('focus')"
+    @blur="$emit('blur')"
   />
 </template>