From b1466fd7cdad3fac145e4a8c60d0bc41d398dde2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 17:01:54 +0300
Subject: [PATCH] Implemented PlexTextarea

---
 apps/labs/assets/data/menu.json             |  4 ++
 apps/labs/doc/inputtext/ImportDoc.vue       |  2 +-
 apps/labs/doc/textarea/AutoResizeDoc.vue    | 31 ++++++++++++
 apps/labs/doc/textarea/BasicDoc.vue         | 31 ++++++++++++
 apps/labs/doc/textarea/DisabledDoc.vue      | 31 ++++++++++++
 apps/labs/doc/textarea/FilledDoc.vue        | 31 ++++++++++++
 apps/labs/doc/textarea/HelpTextDoc.vue      | 31 ++++++++++++
 apps/labs/doc/textarea/ImportDoc.vue        | 16 +++++++
 apps/labs/doc/textarea/InvalidDoc.vue       | 31 ++++++++++++
 apps/labs/doc/textarea/SizesDoc.vue         | 39 ++++++++++++++++
 apps/labs/pages/textarea/index.vue          | 52 +++++++++++++++++++++
 apps/labs/plex/textarea/index.vue           | 27 +++++++++++
 apps/showcase/pages/textarea/index.vue      |  4 +-
 packages/primevue/src/textarea/Textarea.vue | 11 ++++-
 14 files changed, 337 insertions(+), 4 deletions(-)
 create mode 100644 apps/labs/doc/textarea/AutoResizeDoc.vue
 create mode 100644 apps/labs/doc/textarea/BasicDoc.vue
 create mode 100644 apps/labs/doc/textarea/DisabledDoc.vue
 create mode 100644 apps/labs/doc/textarea/FilledDoc.vue
 create mode 100644 apps/labs/doc/textarea/HelpTextDoc.vue
 create mode 100644 apps/labs/doc/textarea/ImportDoc.vue
 create mode 100644 apps/labs/doc/textarea/InvalidDoc.vue
 create mode 100644 apps/labs/doc/textarea/SizesDoc.vue
 create mode 100644 apps/labs/pages/textarea/index.vue
 create mode 100644 apps/labs/plex/textarea/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 0a6588dfa..2b28514fb 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -25,6 +25,10 @@
                 {
                     "name": "InputText",
                     "to": "/inputtext"
+                },
+                {
+                    "name": "Textarea",
+                    "to": "/textarea"
                 }
             ]
         },
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/labs/doc/inputtext/ImportDoc.vue
index 435eb2576..a44b8a5ce 100644
--- a/apps/labs/doc/inputtext/ImportDoc.vue
+++ b/apps/labs/doc/inputtext/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import InputText from '@/plex/inputtext';
+import PlexInputText from '@/plex/inputtext';
 `
         };
     }
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
new file mode 100644
index 000000000..5fb9a7bfc
--- /dev/null
+++ b/apps/labs/doc/textarea/AutoResizeDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
new file mode 100644
index 000000000..fc3cbaaf3
--- /dev/null
+++ b/apps/labs/doc/textarea/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
new file mode 100644
index 000000000..aef513d9c
--- /dev/null
+++ b/apps/labs/doc/textarea/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+     <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
new file mode 100644
index 000000000..2c57e549b
--- /dev/null
+++ b/apps/labs/doc/textarea/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/HelpTextDoc.vue b/apps/labs/doc/textarea/HelpTextDoc.vue
new file mode 100644
index 000000000..dd00e6884
--- /dev/null
+++ b/apps/labs/doc/textarea/HelpTextDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" type="text" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" type="text" />
+    </div>
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/labs/doc/textarea/ImportDoc.vue
new file mode 100644
index 000000000..c6dfc67e2
--- /dev/null
+++ b/apps/labs/doc/textarea/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import PlexTextarea from '@/plex/textarea';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
new file mode 100644
index 000000000..d815ad4e2
--- /dev/null
+++ b/apps/labs/doc/textarea/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref('');
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
new file mode 100644
index 000000000..b2b52b2f5
--- /dev/null
+++ b/apps/labs/doc/textarea/SizesDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
+        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+<div class="card flex flex-col items-center gap-4">
+        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
+        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/textarea/index.vue b/apps/labs/pages/textarea/index.vue
new file mode 100644
index 000000000..4fea8233a
--- /dev/null
+++ b/apps/labs/pages/textarea/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocComponent title="Vue Textarea Component" header="InputText" description="Textarea adds styling and auto-resize functionality to standard textarea element." :componentDocs="docs" />
+</template>
+
+<script setup>
+import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
+import BasicDoc from '@/doc/textarea/BasicDoc.vue';
+import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
+import FilledDoc from '@/doc/textarea/FilledDoc.vue';
+import ImportDoc from '@/doc/textarea/ImportDoc.vue';
+import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'auto-resize',
+        label: 'Auto Resize',
+        component: AutoResizeDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
+    }
+]);
+</script>
diff --git a/apps/labs/plex/textarea/index.vue b/apps/labs/plex/textarea/index.vue
new file mode 100644
index 000000000..9e1dd4d5a
--- /dev/null
+++ b/apps/labs/plex/textarea/index.vue
@@ -0,0 +1,27 @@
+<template>
+    <Textarea unstyled :pt="theme" />
+</template>
+
+<script setup>
+import Textarea from 'primevue/textarea';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `appearance-none rounded-md outline-none
+        bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
+});
+</script>
diff --git a/apps/showcase/pages/textarea/index.vue b/apps/showcase/pages/textarea/index.vue
index da1de3872..fa6785c46 100755
--- a/apps/showcase/pages/textarea/index.vue
+++ b/apps/showcase/pages/textarea/index.vue
@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue Textarea Component"
         header="Textarea"
-        description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
+        description="Textarea adds styling and autoResize functionality to standard textarea element."
         :componentDocs="docs"
         :apiDocs="['Textarea']"
         :ptTabComponent="ptComponent"
@@ -20,9 +20,9 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/textarea/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc.vue';
-import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
 import PTComponent from '@/doc/textarea/pt/index.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import ThemingDoc from '@/doc/textarea/theming/index.vue';
 
 export default {
diff --git a/packages/primevue/src/textarea/Textarea.vue b/packages/primevue/src/textarea/Textarea.vue
index 7c22d1865..3a6d827d0 100755
--- a/packages/primevue/src/textarea/Textarea.vue
+++ b/packages/primevue/src/textarea/Textarea.vue
@@ -1,8 +1,9 @@
 <template>
-    <textarea :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="invalid || undefined" @input="onInput" v-bind="attrs"></textarea>
+    <textarea :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="invalid || undefined" :data-p="dataP" @input="onInput" v-bind="attrs"></textarea>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils/classnames';
 import { mergeProps } from 'vue';
 import BaseTextarea from './BaseTextarea.vue';
 
@@ -65,6 +66,14 @@ export default {
                 }),
                 this.formField
             );
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size
+            });
         }
     }
 };