From 6eb06377ccd0a885a9e4a3f04615028f49209d4b Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 16 Feb 2024 12:19:08 -0800
Subject: [PATCH] feat: Add textarea component to use in forms (#8932)

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../v3/components/Form/Textarea.vue           | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 app/javascript/v3/components/Form/Textarea.vue

diff --git a/app/javascript/v3/components/Form/Textarea.vue b/app/javascript/v3/components/Form/Textarea.vue
new file mode 100644
index 000000000..e43c411f5
--- /dev/null
+++ b/app/javascript/v3/components/Form/Textarea.vue
@@ -0,0 +1,83 @@
+<template>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <textarea
+      :id="name"
+      :name="name"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :rows="rows"
+      :class="{
+        'focus:outline-red-600 outline-red-600': hasError,
+        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
+          !hasError,
+        'resize-none': !allowResize,
+      }"
+      class="block w-full p-3 border-none rounded-xl shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 bg-white dark:bg-slate-800"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </with-label>
+</template>
+<script>
+import WithLabel from './WithLabel.vue';
+export default {
+  components: {
+    WithLabel,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    rows: {
+      type: Number,
+      default: 3,
+    },
+    allowResize: {
+      type: Boolean,
+      default: true,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    dataTestid: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>