feat(ui): new <FieldTextArea /> component

Author: nekomeowww

packages/ui/src/components/Form/Field/FieldTextArea.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import Textarea from '../Textarea/Textarea.vue'
+
+const props = withDefaults(defineProps<{
+  label?: string
+  description?: string
+  placeholder?: string
+  required?: boolean
+  textareaClass?: string
+  rows?: number
+}>(), {
+  rows: 6,
+})
+
+const modelValue = defineModel<string>({ required: false })
+</script>
+
+<template>
+  <div class="max-w-full">
+    <label class="flex flex-col gap-4">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          <slot name="label">
+            {{ props.label }}
+          </slot>
+          <span v-if="props.required !== false" class="text-red-500">*</span>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </div>
+      </div>
+      <Textarea
+        v-model="modelValue"
+        :rows="props.rows"
+        :placeholder="props.placeholder"
+        :class="props.textareaClass"
+      />
+    </label>
+  </div>
+</template>

packages/ui/src/components/Form/Field/index.ts

@@ -3,4 +3,5 @@ export { default as FieldInput } from './FieldInput.vue'
 export { default as FieldKeyValues } from './FieldKeyValues.vue'
 export { default as FieldRange } from './FieldRange.vue'
 export { default as FieldSelect } from './FieldSelect.vue'
+export { default as FieldTextArea } from './FieldTextArea.vue'
 export { default as FieldValues } from './FieldValues.vue'