From 2b05f0c05b3d1ba55238738bdcee62d9884776dd Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 27 Feb 2025 20:48:19 +0330
Subject: [PATCH] added text area component

---
 frontend/components/global/Textarea.vue | 59 +++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 frontend/components/global/Textarea.vue

diff --git a/frontend/components/global/Textarea.vue b/frontend/components/global/Textarea.vue
new file mode 100644
index 0000000..8765a51
--- /dev/null
+++ b/frontend/components/global/Textarea.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+type Props = {
+    variant?: "solid" | "outlined";
+    disabled?: boolean;
+    error?: boolean;
+    message?: string;
+    placeholder?: string;
+    modelValue: string;
+};
+
+// props
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: "solid",
+    disabled: false,
+    placeholder: "وارد نشده",
+});
+const { variant, message, error, disabled, modelValue } = toRefs(props);
+
+// emits
+
+const emit = defineEmits(["update:modelValue"]);
+
+// state
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// computed
+
+const value = computed({
+    get: () => modelValue.value ?? "",
+    set: (value) => emit("update:modelValue", value),
+});
+
+const classes = computed(() => {
+    return [
+        "flex items-start text-black justify-between cursor-text resize-none transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 transition-all !text-sm",
+        {
+            "input-solid": variant.value === "solid",
+            "input-outlined": variant.value === "outlined",
+            "input-effects": !error.value,
+            [variant.value === "solid"
+                ? "input-solid-error"
+                : "input-outlined-error"]: error.value,
+        },
+    ];
+});
+</script>
+
+<template>
+    <textarea
+        v-model="value"
+        ref="inputRef"
+        v-bind="$attrs"
+        :class="classes"
+        class="size-full outline-none placeholder-slate-400"
+        :placeholder="placeholder"
+    />
+</template>