From 111cef1f978067c2f2fad40d9636f0b7579c981e Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 14 Nov 2025 19:22:23 +0800
Subject: [PATCH] feat(ui): new <FieldTextArea /> component

---
 .../components/Form/Field/FieldTextArea.vue   | 42 +++++++++++++++++++
 .../ui/src/components/Form/Field/index.ts     |  1 +
 2 files changed, 43 insertions(+)
 create mode 100644 packages/ui/src/components/Form/Field/FieldTextArea.vue

diff --git a/packages/ui/src/components/Form/Field/FieldTextArea.vue b/packages/ui/src/components/Form/Field/FieldTextArea.vue
new file mode 100644
index 000000000..3704b8c96
--- /dev/null
+++ b/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>
diff --git a/packages/ui/src/components/Form/Field/index.ts b/packages/ui/src/components/Form/Field/index.ts
index 31e62f8d4..1e83c2973 100644
--- a/packages/ui/src/components/Form/Field/index.ts
+++ b/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'