From ee99bbb7c45b2bf0db077d2ae6052daa191753b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 24 May 2023 17:15:21 +0300
Subject: [PATCH] Refactor #3965 - For Textarea

---
 components/lib/textarea/BaseTextarea.vue | 47 ++++++++++++++++++++++++
 components/lib/textarea/Textarea.d.ts    |  5 +++
 components/lib/textarea/Textarea.vue     | 21 ++---------
 3 files changed, 55 insertions(+), 18 deletions(-)
 create mode 100644 components/lib/textarea/BaseTextarea.vue

diff --git a/components/lib/textarea/BaseTextarea.vue b/components/lib/textarea/BaseTextarea.vue
new file mode 100644
index 000000000..117e41ed2
--- /dev/null
+++ b/components/lib/textarea/BaseTextarea.vue
@@ -0,0 +1,47 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-inputtextarea-resizable {
+    overflow: hidden;
+    resize: none;
+}
+
+.p-fluid .p-inputtextarea {
+    width: 100%;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-inputtextarea p-inputtext p-component',
+        {
+            'p-filled': instance.filled,
+            'p-inputtextarea-resizable ': props.autoResize
+        }
+    ]
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_textarea_style', manual: true });
+
+export default {
+    name: 'BaseTextarea',
+    extends: BaseComponent,
+    props: {
+        modelValue: null,
+        autoResize: Boolean
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>
diff --git a/components/lib/textarea/Textarea.d.ts b/components/lib/textarea/Textarea.d.ts
index c7807a3ff..7e402bec3 100755
--- a/components/lib/textarea/Textarea.d.ts
+++ b/components/lib/textarea/Textarea.d.ts
@@ -56,6 +56,11 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @type {TextareaPassThroughOptions}
      */
     pt?: TextareaPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/components/lib/textarea/Textarea.vue b/components/lib/textarea/Textarea.vue
index 8dee0b9fe..4a02a2d1c 100755
--- a/components/lib/textarea/Textarea.vue
+++ b/components/lib/textarea/Textarea.vue
@@ -1,18 +1,14 @@
 <template>
-    <textarea :class="['p-inputtextarea p-inputtext p-component', { 'p-filled': filled, 'p-inputtextarea-resizable ': autoResize }]" :value="modelValue" @input="onInput" v-bind="ptm('root')"></textarea>
+    <textarea :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root')"></textarea>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseTextarea from './BaseTextarea.vue';
 
 export default {
     name: 'Textarea',
-    extends: BaseComponent,
+    extends: BaseTextarea,
     emits: ['update:modelValue'],
-    props: {
-        modelValue: null,
-        autoResize: Boolean
-    },
     mounted() {
         if (this.$el.offsetParent && this.autoResize) {
             this.resize();
@@ -52,14 +48,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-inputtextarea-resizable {
-    overflow: hidden;
-    resize: none;
-}
-
-.p-fluid .p-inputtextarea {
-    width: 100%;
-}
-</style>